Learning Materials
Understanding Middleware
Middleware is a critical part of all Express applications. This link: https://expressjs.com/en/guide/writing-middleware.html explains the use of middleware, so you should review it before proceeding with the lesson.
Continuing with the Video
You continue watching this video. This week, you watch from 6:10:46 of the video to the end. The initial focus is on middleware. Then each of the HTTP methods involved in API development are covered: GET, POST, PUT, PATCH, and DELETE. As routes for each of these API methods are implemented, you will test them using Postman. You then refactor the code, to separate out the router and controller functions.
The front end calls the APIs in two ways, first as browser GET and POST requests coming from a standard HTML page, and second via JavaScript in the browser that issues GET, POST, PUT, and DELETE requests. You find the front end in the methods-public directory. Study this file. It shows you how to call the back end from the front end, using either ordinary HTML or JavaScript. When ordinary HTML is used, only GET and POST requests are supported, because those are the only operations a browser can do, and the post request sends form-encoded data. When JavaScript is used, all HTTP operations are supported, and JSON is used to send and receive data. Parsing of the body of the request, for form-encoded and JSON data, is explained in the video.
In practice, it is not practical always to create a front end in order to test a back end, so we use Postman, which you should have already installed. Postman can send all the standard HTTP request operations and can parse the data returned. Be sure you understand the use of Postman and duplicate the tests that the instructor performs with Postman, because you will need to use it extensively in the lessons to come.
Assignments
Coding Assignment
For this lesson, you continue to work in the node-express-course/02-express-tutorial directory. As usual, you should use git to switch to a new branch, the week4 branch, before you start your work.
Once APIs are built, one will typically create a front end, which calls the APIs using JavaScript fetch operations or Axios function calls. For the APIs you build in this lesson, the instructor provides a front end. This is accessible from the browser, when the server is running, at localhost:3000, after you have completed all the steps up to 6:53:25 of the video. That is the point where the instructor adds this line to app.js.
app.use(express.static('./methods-public'))The audio portion of the video is not quite in sync with the video portion — it lags by about 3 seconds — but this is only a minor annoyance.
You duplicate the work of the instructor. In the process, you create the following programs:
- 08-middleware-basic.js
- 09-middleware-use.js
- 10-middleware-options.js
- 11-methods.js
- 12-route-app.js
- routes/people.js
- routes/auth.js
- controllers/people.js
The instructor again follows the pattern that he does the work in app.js and periodically copies it to one of these other names. The answers are in the 02-express-tutorial/final directory — but try to do your own work. For the answers in the final directory, the instructor has renamed router/people.js to 13-router-people.js, routes/auth.js to 14-router-auth.js, and controllers/people.js to 15-router-controller.js.
Additional Assignment: Practice Middleware
Create a file practice-middleware.js. In it, create a middleware function called consoleLog(req, res, next) that logs a statement to the console and then invokes the next function. Export this function. Edit practice-express.js to require the consoleLog function, and add an app.use statement so that it is invoked before every request. Test the practice-express.js program to make sure the middleware is working, accessing your express program from the browser using localhost:3000 as before.
Mindset Assignment
Your mindset assignment this week can be found here: Comfort with the Unknown
Submitting Your Work
When you are done, do the following, use the same procedure as for previous lessons. You do a git add, git commit, and git push for the week4 branch, create your pull request on github, and put a link to your pull request in your assignment submission form below.
When you’ve completed your Coding Assignment and Mindset Assignment this week, submit all of your work using:
| Alpaca class use: | Squibby 2.0 Assignment Submission Form |
| Baboon and any 2023 classes use: | Homework Assignment Submission Form |