In this exercise, we will use all what we have learned about APIs and how to connect an application to them through Axios.
- Clone this repo
- Run
npm i
- Run
npm run dev
ornodemon
to start the project- Note: The
env
file is available for you in the repo.
- Note: The
- 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.
The base URL is https://ih-crud-api.herokuapp.com
. This API allows us to get some data from it, create new documents in its characters collection, update existing characters as well as delete them from the database. Every character has these properties:
name
- String,occupation
- String,weapon
- String,debt
- Boolean.
Here are the relevant API endpoints (routes) that the Characters API provides to use and which we will be using:
Route | HTTP Verb | Description |
---|---|---|
/characters |
GET | List of all characters |
/characters/:id |
GET | Details of a specific character |
/characters |
POST | Create a new character |
/characters/:id |
PUT/PATCH | Update a specific character |
/characters/:id |
DELETE | Delete a specific character |
:::info
All these routes must be prefixed with the API's base URL: https://ih-crud-api.herokuapp.com
.
:::
The way how the endpoints are presented in the table above is the usual approach you will find in the majority API documentations. The base URL will be given once, and it is considered that it will be prefixed to each endpoint by default. For example, the full URL of the /characters
endpoint would be https://ih-crud-api.herokuapp.com/characters
.
Reminder: Whenever you use the data provided by the 3rd party APIs, you should always log the response of an API to check the structure of the data. Knowing the structure of the response will allow us to capture the right properties and to know what type of data we are working with.
- Create
characters.routes.js
file inside theroutes
folder- Don't forget to link these newly created routes to the
app.js
- Don't forget to link these newly created routes to the
- Create the
characters-views
subfolder inside theviews
folder and then create the following HBS files:list-characters.hbs
details-character.hbs
create-character.hbs
edit-character.hbs
- Create a GET route
/characters-list
in thecharacters.routes.js
file. - Inside, use AXIOS to get the list of all characters using the
https://ih-crud-api.herokuapp.com/characters
endpoint. - Render the response to the
list-characters.hbs
.
- Create a GET route
/characters/:id
in thecharacters.routes.js
file. - Inside, use AXIOS to get the list of all characters using the
https://ih-crud-api.herokuapp.com/characters/:id
endpoint. - Render the response to the
details-character.hbs
.
- Create a POST route
/characters/create
in thecharacters.routes.js
file. - Inside, use AXIOS to POST a newly created character's object using the
https://ih-crud-api.herokuapp.com/characters
endpoint. - Redirect to
/characters
to see the full list of characters and your new character on it.
- Create GET route
/characters/:id/edit
in thecharacters.routes.js
file and render theedit-character.hbs
page on it.- Make sure the form is pre-loaded with the details of a specific character you want to update. The form should have the method POST and action set to
/characters/:id/update
route.
- Make sure the form is pre-loaded with the details of a specific character you want to update. The form should have the method POST and action set to
- After that, create a POST route
/characters/:id/update
in thecharacters.routes.js
file. - Inside, use AXIOS to PUT/PATCH an updated character's object using the
https://ih-crud-api.herokuapp.com/characters/:id
endpoint. - Redirect to
/characters/:id
to see the updated character details and the changes you made.
- Create a form in the
details-character.hbs
file and set it to use POST method and action set to the route/characters/:id/delete
. - After that, create a POST route
/characters/:id/delete
in thecharacters.routes.js
file. - Inside, use AXIOS to DELETE a character object using the
https://ih-crud-api.herokuapp.com/characters/:id
endpoint. - Redirect to
/characters
to see the full list of characters and to notice that the deleted character is not on the list.
That would be all!
Happy coding! ❤️