Description
Objective:
This first assignment will get the “Teams” Web API ready for use with the WEB422 course as well as reinforce
the use of the jQuery and Bootstrap frameworks for rendering API data.
Specification:
For this assignment, we will be publishing our own personal version of the “Teams” API on Heroku. We will
then write jQuery code to request data and render it on the page using Bootstrap (3.3.7).
Step 1: Obtaining the Code Examples / teams-api from GitHub
The first step will be downloading (“cloning”) The web422 repository, located here:
https://github.com/sictweb/web422
This can be done by opening a Command Prompt / terminal window and entering the command:
git clone https://github.com/sictweb/web422.git
Once this operation completes successfully, open the newly received folder (this will be “web422”) and
open the “Code Examples” folder. Here you will see a “teams-api” folder – this is the main folder with all
of the API / Server logic in it, so it’s best to copy this whole folder out of “Code Examples” and into another
location that’s easy to remember. We will be updating it during this and future assignments.
Once you have the “teams-api” folder in a more permanent location, open it in Visual Studio Code.
Step 2: Following the Guide
Now that you have obtained the source code and have the folder open in Visual Studio Code, the next step
involves following along with the instructions located online here. This will help you to get a new
MongoDB Atlas Database set up, as well as configure the server.js file correctly and push the solution to
Heroku.
Step 3: Boilerplate Client Side Code
Once you have completed the guide (Step 2), and have the Teams API running on Heroku (this can be
tested by accessing the newly-created Heroku URL in a web browser and using one of the API routes such
as “/teams”) we need to create some code on the client-side to work with the data.
To get started, create a new Assignment 1 folder and open it up in Visual Studio Code (this folder is what
we will be submitting as the completed assignment)
• First, create the following folder / file structure
o css
▪ main.css
o js
▪ main.js
o index.html
• Next, we will use some boiler-plate code to start our index.html. You can copy and paste the
index.html file from the WEB422 “static-server” example – this can be found online here.
• Be sure to add a CSS reference to “css/main.css” and a JavaScript reference to “js/main.js”
• Lastly, ensure that the
