W01 Individual Activity: Develop an API
Special Instructions for this Week's Activity
Each week will contain a team activity. These activities are designed to take about one hour and should be completed by multiple people working together.
You will need to gather for a synchronous video call, where everyone can see the code that is being written and help contribute.
For this lesson, because the teams may not be fully defined you will work on the activity individually, but you are encouraged to collaborate with others by asking and answering questions in the course discussion.
Overview
Purpose: Develop an API for an existing frontend.
To complete this assignment, you will create a backend for a frontend that is already complete. After building your API endpoints, you will be able to use the frontend to both test it and to see your data in action.
- Start by downloading the frontend code.
- You will not change any code in it, you will just open the html file in the browser to test that your backend is functional. You'll see a series of ids in the HTML and the JavaScript. Look at the data that the JavaScript file uses to populate the HTML, this includes a lot of text, a few links, and a base64 image.
- Create a new node project (npm init) with a server and a REST endpoint to GET all data required by the frontend code you downloaded.
- While you're writing your code, test it with a REST Client to ensure it is working correctly.
- Once everything looks good in the REST Client, open the frontend webpage in the browser and check to see if it is working (ensure that your backend server is still running on port 8080).
- STRETCH CHALLENGE: Connect the API to MongoDB, and retrieve data from database.
After completing the assignment or spending an hour on it, please review the solution and solution video below. Please note that there are many different ways to accomplish what is being asked and this is simply one way to do things. The following code is also a very good starting point for projects.
Submission
When you are finished:
- Return to Canvas to take the quiz.
Other Links:
- Return to: Week Overview | Course Home