SWEN-344 Final Practicum

Final Exam: Full Stack - React plus Flask APIs

As in the REACT client project, you will integrate your React application with a Server side API and DB.

Setup

Create a new react app with reactstrap

Create a new gitlab project named react-final-abc123 (abc123 is your student id) and clone to your local pc. NOTE: This does NOT go in your ‘group’ in gitlab. This is a standalone gitlab project (just like practicum-1 and practicum-2). Make sure you add your instructor as ‘reporter’. Refer to REST and REACT setup instructions from the relevant setup pages to create your react project with reactstrap and Flask/ Python/ Postgres setups. As a quick reminder, the basic React commands are:
npx create-react-app react-final-abc123
cd react-final-abc123
npm start

This will install and create the react skeleton and run the server. Remember to make the changes specified in the React setup and REST setup instruction pages. Reminder for reactstrap installation …
npm install --save reactstrap react react-dom
npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';(This goes in your index.js file)

React-Final Specifics

Overview

In this practicum, you will use the full-stack components to build an application to list courses, add a course and select courses to add to your ‘semester’ list.
You will build a server side component with API endpoints that connect to a PostgreSQL DB.
The API endpoints will provide you the data to load into your webpage and you will take input from the webpage(s) to update the DB. This means you will have React running as the client and Flask running as the server simultaneously.

Starter code setup

Create a new folder name server/. This will be at the same level as the src directory.
Unzip the contents of this package. Copy the files from the server directory from the .zip file into your server directory. Make sure you extract the files only, and do not create a subdirectory under server.
You will also find some example files in the src directory. You can use these as reference, or copy them over as starter code.
Finally, there are test files to help you confirm the API for the DB is working. Create a folder called test, and copy the files from the test/ directory to your local app. You do not need to create unittests for the exam.

Explanation of the files

In the root (server) folder:

• server.py: This file sets loads the SQL data and sets up the endpoints. An endpoint has been created as an example for you. Add your own endpoint(s) for the project
  In the server/api subfolder:
• example_api.py: This file contains and example endpoint for the API which also serves as an interface to the DB. This example just returns the number of rows in the DB. Add your own code (in another file) to handle the GET API and return the course data for your client.
• courses_schema.sql: This file has the actual data tables, in sql format. When your server runs (python server.py), this data will be loaded into your postgres DB. Note that there are multiple tables.
• db.yml: Information to connect to the DB. Modify as needed for your configuration.

In the src folder:

• index.js: Basic React file to load a component (MyComponent is the example provided)
• mycomponent.js: Contains sample code for invoking the REST api directly from the React component. See Client API calls below for more details. There is also an example of how to handle textbox input and capture the data using events and state.

In the test folder:

test_utils.py: This contains python REST api methods
test_api.py: This contains a simple unitest to confirm your server has loaded a table correctly. Run this using python -m unittest -v. This is for convenience/ information ONLY. You do not need to create unittests for the exam.

Client API calls

You will want your client to get the data from the server _before_ the page displays.
To do this, our recommended approach is that you would hook into the React event componentDidMount. Sample code for this is:

fetchData = () => {
        //With Flask CORS enabled, we can directly call the server on port 5000
        fetch('http://localhost:5000/example_api')
         .then(
             response => response.json() 
             )//The promise response is returned, then we extract the json data
         .then (jsonOutput => //jsonOutput now has result of the data extraction
                  {
                      this.updateData(jsonOutput)
                    }
              )
      }
    componentDidMount(){
        this.fetchData();
    }

Capturing user input

User input in React is tracked on a character by character basis especially for textboxes.
To capture this, you will typically handle the onChange event and update a state variable that will therefore hold the latest valuew. In this way you can then use the state variable to process data when a form is submitted. You can do this for other user input controls as well (e.g. radio buttons, select lists). Key code snippets are:

• Hook into onChange event
  <Input id="fName" type='text' placeholder="Enter firstname" onChange={this.updateFirstName}></Input>
• Update the state variable
  updateFirstName = (e) =>
{ this.setState({firstName: e.target.value}) //Update the text data in state}
• Use the state data when the user is done and clicks a submit or done button
  handleSubmit = ()=> {
let msg =
'Your name is ' + this.state.firstName + ' ' + this.state.lastName;
//Use the updated state variables to capture the user input
}
  You can see the code in mycomponent.js
  Also look at the code for handling dynamic updates to a Modal component using the isOpened event. This is very useful for adding data to a dialog that may not exist when the component is first created or needs to be updated when the component is made visible. This is just one suggestion. You are free to implement differently.

Running the server

When your code is implemented, open a new console window, navigate to the server directory and type py server.py. This will start the Flask server. The supplied server code should load up the SQL DB. Run the python unittest in a separate console to confirm this. Remember that if you need to re-initalize the DB, you will need to restart the Flask server.

Client Setup for APIs

Set up your React project as normal (see above). Edit the package.json file and add the following line right after version.

  "homepage": ".",  

The homepage attribute enables building static webpages.

Setup Notes

• Mac Users
  • If you needed to change Flask previously (in REST) to run on a different port (e.g. 4999), then you will need to do that again. If you change the port in Flask, you will need to make the corresponding change to your client API call.
• All users
  • Make sure you have installed flask_cors. This should already be set up on your local device from prior assignments, but if you change devices, follow the full stack setup instructions from client-4.

Running the client

On your PC, in a separate console window, navigate to the React project, and type npm start. This will start your React application. Your React application, when the page loads, will call the REST API (the Flask server must already be running at this point), and return the course data to populate your page.

Once everything is running, you should see this: