CS 651 Spring 2020 Homework 10

APIs, Databases, Fetch, and Proxies

Dr. Greg M. Bernstein

Due Monday, April 27th, 2020 by 11:59PM, 50 points.

General Instructions

Server APIs, Document Databases, Fetch API, Proxies

Create and Use a new Branch hw10

We will create a new git branch called hw10 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 9. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw10. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Questions

Question 1. (10 pts) REST APIs

We are going to check if our existing club server APIs are reasonable REST interfaces. Then we are going to specify, but NOT IMPLEMENT some new interfaces.

You are to use the resource naming guide and the HTTP methods guide to determine appropriate names, methods, and response codes (success and failure) to be used in for the following interfaces. Assume that each club activity and user has a unique id (like the database gives us). For each of the interfaces give the URL path, method to be used and return codes/information to be returned (if any) under both success and error conditions. Indicate which roles can use the interface.

(a) Check existing interfaces

For your current club server, not including the /login and /logout list the APIs here (path, method, return codes on sucess and failure).

(b) REST like interfaces?

Are all your interfaces from part (a) REST-like? If not show the modifications here that you would need to make them rest like.

(c) Update Activity Interface

Design an interface and show it here to update a specific activity based on its activity-ID. Show path, method, return codes for success and failure. DO NOT IMPLEMENT on your server.

(d) Add and Delete Club Member

Design interfaces and show them here to add and delete club members. Show path, method, return codes for success and failure. DO NOT IMPLEMENT on your server.

(e) Change Member Password

Design an interface and show it here to update a specific members password. Show path, method, return codes for success and failure. DO NOT IMPLEMENT on your server.

Question 2. (10 pts) Activities DataBase

We will use promises with NeDB so use the

(a) Create Initial Activity Database

Write a small Node.js program to initialize an activities NeDB database from your club event JSON file. Let NeDB assign unique Ids for your activities. Show your code here.

(b) Integrate Database Into Server

Now we will update our club server to use the NeDB database created in part (a). List the server APIs that need to be updated here. Show only the code for the updated APIs (only) here.

(c) Test Server with Activities Database

We have two main things to test here. The first is that we didn’t break the server when we updated it to use the database (get activities, add activities, delete activities). Second we need a way to establish that the database is working across server stops and starts. Explain your test procedure, show some test output, and show delete testing code here.

Here is sample screenshot of my updated delete testing output:

Delete Testing
Delete Testing

Question 3. (10 pts) Proxies

(a) Alternate Development Scenario

We want to connect our React based club application to our club server. However we are still developing our React club application which uses a development server. We get the React application from the development server but we want to make API calls to our own club server. There are two ways we can configure this. In part (b) we will use a proxy approach. Give a non-proxy approach and indicate any changes needed to client and/or server.

(b) Development Proxy

We are going to create a combination development server/proxy to serve up our React application and forward club API calls to our club server. The raw code you need is given in the HTTP Proxy slides. However, we now have a lot of pieces to hook together. To get you all the information you need answer the following:

  1. Where should the development proxy (devProxy) code be located? E.g., with the React client code or with the server code?

  2. What paths are you going to forward to the server?

  3. On what IP address and port are you going to run your club server?

  4. On what IP address and port are you going to run your devProxy?

  5. At which URL will you point your browser?

  6. How many command terminals do you need and what will be running in each?

  7. What additional NPM packages do you need to install and where?

  8. How can you test that the proxy is forwarding your requests?

(c) Configure, run, and debug the dev. proxy

Use the information from part (b) to configure your club server and development proxy. Run the appropriate programs. Show me how you verified that your devProxy is working.

Here a screenshot of my proof, i.e., the devProxy forwarding a GET activities request that was made to the devProxy address and port.

Browsers, server, and proxy
Browsers, server, and proxy

Question 4. (10 pts) Fetch for Login

Now we are going to go back to our React app and update it to use fetch calls to our club server. The first thing we want to be able to do is login and logout.

(a) Member and Admin Login

Update your React Login component to make a fetch POST call to our server (running behind the proxy) with the users email and password. Note that we have this component but it didn’t do a “real login” before. Make sure that bad logins don’t break your React app and that both member and admin logins both work. Add something to the application to indicate the name of the person who is logged in.

Show your updated login click handling code from your Login component here.

Take a screen shot showing the result of a successful login in the network panel and user information. I get something like:

Result of login
Result of login

(b) Member and Admin Logout

Update your logout processing in the React app to actually call the /logout API on your server. Take a screenshot showing that the /logout request in the network panel and that the server “clears the cookie” by setting the max age to 0 and the contents to zero. My screenshot looks like:

Logout calls
Logout calls

Question 5. (10 pts) Fetch for Activities

Now lets get the activities data for members from our server!

(a) Members Activities Component

You should have created a members activities component to show your activities to the members. However we want to use the life cycle method componentDidMount as the place to make the fetch call. If you Activities component is not a class based component update it here with its state containing the array of activities.

(b) Fetch Activities in the Component

Add the component life cycle method componentDidMount and use fetch to get the list of activities from the server. Take a screenshot that shows the network panel with the fetch to activities and some of the data returned. My screenshot looks like:

Fetching Activities
Fetching Activities

Show your updated Activities component code here. Note that we will add the capability to add and edit activities via the server in the last homework.