GAID

Please enter the google analytics ID for appData file.

Gain insights into using Python and Transcrypt to build complete web applications. Delve into refactoring, adding new features, and creating cohesive frontend-backend projects with React.

tarball.tar.gz

Final_App

ReactPythonStep01

ReactPythonStep02

ReactPythonStep03

ReactPythonStep04

ReactPythonStep05

ReactPythonStep06

ReactPythonStep07

ReactPythonStep08

ReactPythonStep09

ReactPythonStep10

ReactPythonStep11

ReactPythonStep12

ReactPythonStep13

FinalWebApp

Gunicorn_run

ReactPythonStep01-copy

Python is already used in the backend of most web applications, but sadly it does not work with web browsers to drive the frontend of those applications. Transcrypt can help by creating more coherent web-based projects, using Python to write both the backend and the frontend.

This course builds on the lessons in Using the Python Transcrypt Transipler for Front-end Coding to implement a complete React and Python web-based project. In each chapter, we will refactor existing code to add new functionality, building up the application as you go. Each chapter ends with a running application that includes all of the features we added up to that specific point.

Using Python and Transcrypt to Build a Complete Web Application

## About the application

Our last view allows us to add and edit the books in our database. The application requires logic in this view and will only allow modifications to the data if the user is logged in. If not logged in, the data will be viewable but will be displayed as read-only.

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## The main view container
The main view container will hold, among other things, the title bar, close button, and a separate form component that displays all of the fields of the book record.

## About the `bookEditView` module

First, we can see a new folder `bookEdit/` inside `bookapp/client/src/views/`. Inside that, we have an empty `__init__.py` file to that folder to be treated as a Python package.  Next, we will look at the `bookEditView.py` module in the same folder.

Starting from line 10, this module defines a dictionary that represents the contents of a new book record, and contains a key for each of the fields in the Books table.  This gets used whenever the state variable which holds information about a selected book requires initialization.  

At line 29, the module has one top-level component called `BookEdit`, a modal view container.  It holds most of the functionality required to view, add, and edit a single book.

### The `BookEdit` component

From a UI perspective, the `BookEdit` component only holds the title bar at line 115 and another component, `BookEditForm` at line 129, which contains all UI edit fields.  

It has several props passed into it, including the four lookup table lists:

* At line 30, the ID number of the book currently being edited. 
* At line 35, the function to refresh the list of books showing in the `BookList` component.
* At line 36, the function to close the modal `BookEdit` view.

This component manages two state variables:

* At line 38, a variable representing the current field values of the book being edited.
* At line 39, a variable representing the original field values of the book being edited.  
* At line 40, the modal state is determined by the value of the `bookId` prop.  If it is a value other than `None`, then the `BookEdit` modal view will appear. Otherwise, it will be hidden.

At line 44, the `handleInputChange()` function keeps the book state variable synchronized with the UI, and will be bound to the `onChange` event on each of the edit fields.

Starting from line 57, the `isDirty()` function determines if any changes have been made to the edited book by making a field-by-field comparison between the `book` state variable and the `bookInitial` state variable.  If the value of any field is different from the original value, it will return `True`.

At line 108, whenever the `bookId` prop changes, a `useEffect()` hook function triggers the `getBook()` function to be called, retrieving the book's record with that ID number.


At lines 90 and 92, the `bookInitial` state variable gets updated with the field data that it receives from the REST service response.  

When that happens at line 109, there is another `useEffect()` function watching the `bookInitial` state variable that updates the `book` state variable to match the values in `bookInitial`.  This gives us the starting point for the field values to be edited from.

### How does the `saveBook()` function works?

Starting from line 61, the `saveBook()` function does just what it says.  At lines 63 and 64, if a new record is added, the ID field is removed before making the `POST` request so that the REST API knows that it is a new record.

At lines 66 and 67, in the request, the `book` state variable dictionary is just sent in the body of the HTTP POST. 

### How does the `deleteBook()` function works?

Starting from line 69, the `deleteBook()` function works the same way, but it sends an HTTP `DELETE` request and uses the original values in the `bookInitial` state variable instead.  Technically, we could use either state variable for deleting the record since the only value it needs is the ID number.  At lines 74, 79, and 82, the application also makes liberal use of the snackbar on calls to the REST service to let the user know if the requests were successful or not.

### The `onClose()` function

At line 77, the `onClose()` function passed in as a prop sets the `bookId` to `None`, which causes the `modalState` to be `False` and hides the modal `BookEdit` view.

# About the application

Our last view allows us to add and edit the books in our database. The application requires logic in this view and will only allow modifications to the data if the user is logged in. If not logged in, the data will be viewable but will be displayed as read-only.

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

# The main view container
The main view container will hold, among other things, the title bar, close button, and a separate form component that displays all of the fields of the book record.

# About the `bookEditView` module

First, we can see a new folder `bookEdit/` inside `bookapp/client/src/views/`. Inside that, we have an empty `__init__.py` file to that folder to be treated as a Python package.  Next, we will look at the `bookEditView.py` module in the same folder.

Starting from line 10, this module defines a dictionary that represents the contents of a new book record, and contains a key for each of the fields in the Books table.  This gets used whenever the state variable which holds information about a selected book requires initialization.  

At line 29, the module has one top-level component called `BookEdit`, a modal view container.  It holds most of the functionality required to view, add, and edit a single book.

## The `BookEdit` component

From a UI perspective, the `BookEdit` component only holds the title bar at line 115 and another component, `BookEditForm` at line 129, which contains all UI edit fields.  

It has several props passed into it, including the four lookup table lists:

* At line 30, the ID number of the book currently being edited. 
* At line 35, the function to refresh the list of books showing in the `BookList` component.
* At line 36, the function to close the modal `BookEdit` view.

This component manages two state variables:

* At line 38, a variable representing the current field values of the book being edited.
* At line 39, a variable representing the original field values of the book being edited.  
* At line 40, the modal state is determined by the value of the `bookId` prop.  If it is a value other than `None`, then the `BookEdit` modal view will appear. Otherwise, it will be hidden.

At line 44, the `handleInputChange()` function keeps the book state variable synchronized with the UI, and will be bound to the `onChange` event on each of the edit fields.

Starting from line 57, the `isDirty()` function determines if any changes have been made to the edited book by making a field-by-field comparison between the `book` state variable and the `bookInitial` state variable.  If the value of any field is different from the original value, it will return `True`.

At line 108, whenever the `bookId` prop changes, a `useEffect()` hook function triggers the `getBook()` function to be called, retrieving the book's record with that ID number.


At lines 90 and 92, the `bookInitial` state variable gets updated with the field data that it receives from the REST service response.  

When that happens at line 109, there is another `useEffect()` function watching the `bookInitial` state variable that updates the `book` state variable to match the values in `bookInitial`.  This gives us the starting point for the field values to be edited from.

## How does the `saveBook()` function works?

Starting from line 61, the `saveBook()` function does just what it says.  At lines 63 and 64, if a new record is added, the ID field is removed before making the `POST` request so that the REST API knows that it is a new record.

At lines 66 and 67, in the request, the `book` state variable dictionary is just sent in the body of the HTTP POST. 

## How does the `deleteBook()` function works?

Starting from line 69, the `deleteBook()` function works the same way, but it sends an HTTP `DELETE` request and uses the original values in the `bookInitial` state variable instead.  Technically, we could use either state variable for deleting the record since the only value it needs is the ID number.  At lines 74, 79, and 82, the application also makes liberal use of the snackbar on calls to the REST service to let the user know if the requests were successful or not.

## The `onClose()` function

At line 77, the `onClose()` function passed in as a prop sets the `bookId` to `None`, which causes the `modalState` to be `False` and hides the modal `BookEdit` view.

Learn how to design a modal view container to list the book records.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Build a REST API in Flask

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

View Container

About the application

The main view container

About the `bookEditView` module

Build a REST API in Flask

View Container

About the application

The main view container

About the bookEditView module

About the `bookEditView` module