LAB | Axios CRUD exercise

Introduction

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

Requirements

• Fork this repo
• Then clone this repo

Submission

• 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.

Instructions

We will first create a fake API using JSON-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 indicated id
  • 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 character id 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 indicated id
  • It returns JSON / text
• Verb: DELETE, Route: "/characters/:id"
  • It receives the character id 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

Iteration 1: The Fake API

In the api folder, create a db.json file. Inside our db.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 ./data/db.json -p 8000

This should be the result on your terminal:

NOTE: Now your api is running on port 8000. test your routes using postman

Iteration 2: The index.routes.js file

We have our API running, So now will create the routes in our application to handle the CRUD api calls for creating, reading, updating, and deleting resources from our api.

The routes that we will create create will each make a call to the following endpoints in our custom api:

• "/all": Get all the characters info from http://localhost:8000/characters
• "/search": Get a single character info from http://localhost:8000/characters/:id
• "/search/new-character": Create a single character posting the data to http://localhost:8000/characters
• "/search/delete": Delete a single character through his id in http://localhost:8000/characters/:id
• "/search/edit": Edit a single character through his id in http://localhost:8000/characters/:id

You have to create an Axios call for each of these actions. The "/all" and "/search" routes should send the information of the 1 character to the index.hbs page

Micro-advice

To make sure everything is working, use POSTMAN.

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

Iteration 3: Fetch all characters

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

• When the user clicks on the "Fetch All" button then a GET request should be sent to the '/all' route.
• this route should render the index.hbs page and pass the object containing all the characters to the hbs page.
• Finally, using the hbs helpers iterate through the array of all the characters and display them at the bottom of the hbs page.
• 

Iteration 4: Fetch one character

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

• make an axios call in the '/search' route that will send an axios call to retrieve one character based on the user input in the input field.
• Search that character in the API with http://localhost:8000/characters/:id
• Get the data and render the index.js file with the one character data.
• 

Iteration 5: Delete one character

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

• make an axios call in the '/search/delete' route based on the id the user inputs in the input field.
• Delete that character in the API with http://localhost:8000/characters/:id Remember which HTTP verb you need in the request!!
• if the user is deleted then redirect the user back to the '/' route

Iteration 6: Create new character

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

• Once the user clicks on the submit button, a POST request should be sent to the '/search/new-character'
• In the route make an axios call to create the character based on the inputs of the user
• once the character has been created redirect the user back to the '/' route Remember which HTTP verb you need in the request!!

Iteration 7: Edit a character

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 the id of the character we want to edit.

• Once the submit button is clicked a POST request should be sent to the '/search/edit' route that will edit the character based on the id passed and the new information for the fields. Remember which HTTP verb you need in the request!!
• If the character was successfully updated, redirect the user back to the '/'.

That would be all!

Happy coding! ❤️

BONUS: Iteration 8: Add feedback for successful and failed api calls

• add feedback to the user if the creating, retrieving, updating, or deleting a character has failed or succeeded