Repository files navigation

In this exercise, we will use all what we have learned about APIs and how to connect an application to them throughAxios.

• Fork this repo
• Then clone this repo

• Upon completion, run the following commands:

$ git add .$ git commit -m "done"$ git push origin master

• Create Pull Request so your TAs can check up your work.

We will first create a fake API usingJSON-Server to then do an application to Create, Read, Update, and Delete characters from it. The routes available in this API are the following:

• Verb: GET,Route: "/characters"
  • It receives NO parameters
  • It returns the full characters list
  • It returns JSON
• Verb: GET,Route: "/characters/:id"
  • It receives the character ID as a parameter (route)
  • It returns the character with the indicatedid
  • It returns JSON
• Verb: POST,Route: "/characters"
  • It receives an object as a parameter, with the following format:{ name: string, occupation: string, cartoon: boolean, weapon: string }
  • It returns the created character if there are no errors
  • It returns the wrong fields if there is some error
  • It returns JSON
• Verb: PATCH/PUT,Route: "/characters/:id"
  • It receives the characterid as a parameter (route)
  • It receives an object as a parameter, with the following format:{ name: string, occupation: string, cartoon: boolean, weapon: string }
  • All the fields are optional
  • It returns the updated character if there are no errors
  • It returns "Character not found" if there is no character with the indicatedid
  • It returns JSON / text
• Verb: DELETE,Route: "/characters/:id"
  • It receives the characterid as a parameter (route)
  • It returns "Character has been successfully deleted" if there are no errors
  • It returns "Character not found" if there is no character with the indicated id
  • It returns text

In theapi folder, create adb.json file. Inside ourdb.json we will specify the first 2 characters of our API, so we can start working with some data. Copy/paste the following characters in the file:

{"characters":[{"id":1,"name":"Han Solo","occupation":"Smuggler","weapon":"Blaster Pistol","cartoon":true},{"id":2,"name":"Luke Skywalker","occupation":"Jedi Knight","weapon":"Lightsaber","cartoon":false},{"id":3,"name":"Sponge Bob","occupation":"Lives under the sea","weapon":"Crabby Patty","cartoon":true}]}

Then run the following code in the terminal to make our API start working:

$ json-server --watch db.json --port 8000

We have our API running, so now we will construct a classAPIHandler to deal with the Axios calls. The only responsibility of this class is to display the JSON result that comes from the API, or give the needed information to the API via a function argument.

The functionalities of theAPIHandler class are:

• Get all the characters info fromhttp://localhost:8000/characters
• Get a single character info fromhttp://localhost:8000/characters/:id
• Create a single character posting the data tohttp://localhost:8000/characters
• Delete a single character through his id inhttp://localhost:8000/characters/:id
• Edit a single character through his id inhttp://localhost:8000/characters/:id

You have to create an Axios call for each of these actions. You can create as many functions as you need inside the class, but remember this class should only manage the API request and display the resulting value.

Micro-advice

To make sure everything is working, usePOSTMAN.

In this iteration, it's enough to show results in the console.

Once we have the results served by the API in the application, we will create the events that will handle with the CRUD operations.

Retrieve all the available characters in the API and show them in the application. In order to do that, we need to:

• Create a button (Fetch all in the image above) that calls a function in theAPIHandler.
• The function will return a JSON object with all the characters.
• Get the data and show the characters. Finally, with JavaScript, we will create a structure similar to a card (image above) to show detailed info about each character.

Following the same idea as with fetching all, to retrieve a single character's data we need to:

• Create a button (Fetch one in the image above) to, through an input field, get theid of an existing character.
• Search that character in the API withhttp://localhost:8000/characters/:id
• Get the data and show the character info as a card.

To be able to delete a character from the API database, we need to:

• Create a button (Delete one in the image above) to get theid of the character we want to delete.
• Delete that character in the API withhttp://localhost:8000/characters/:idRemember which HTTP verb you need in the request!!
• If the character is successfully removed, change the background color of the button to green.
• If something went wrong, change the background color of the button to red.

We will create a form with 4 inputs: name(text), occupation(text), weapon(text) and cartoon(checkbox).

• Create a submit button (Create in the image above) to get all the data from the form.
• Create an event handler function for managing the form submission. To prevent the default form behaviour (page reload), use theevent.preventDefault() method.
• Send the data to theAPIHandler function to save the new character throughhttp://localhost:8000/charactersRemember which HTTP verb you need in the request!!
• If the character was successfully created, set the background color of the button to green.
• If something went wrong, change the background color of the button to red.

We will create a form with 4 inputs: name(text), occupation(text), weapon(text) and cartoon(checkbox). Also, we will create a new input to indicate theid of the character we want to edit.

• Create a submit button (Update in the image above) to get all the data from the form.
• Create an event handler function for managing the form submission. To prevent the default form behaviour (page reload), use theevent.preventDefault() method.
• Send the data to theAPIHandler function to save the new character throughhttp://localhost:8000/characters/:idRemember which HTTP verb you need in the request!!
• If the character was successfully updated, set the background color of the button to green.
• If something went wrong, change the background color of the button to red.

That would be all!

Happy coding! ❤️