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
