Build a NodeJS app with Final Space API

Photo by ThisisEngineering RAEng on Unsplash

In this project we will learn Asynchronous NodeJS by creating a app and doing API call to the famous Final Space API

You can find this in Video format here -

So, first create a final-space-app folder and change to it. Open it in VS Code nad create a file app.js in it.

We will learn about asynchronous programming first. In the app.js we have four console logs. Two of them are through a setTimeout() with 2 second and 0 second delay.

Now, when we run our program the NodeJS don’t stops for the Call number two to complete and will print the Call number four. But one thing to notice is that Call number three with a 0 second delay, will also be printed later.

app.js

This happens because of the concept of Event loop in NodeJS. The best explanation for it is in this yotube video.

We will be using the Final Space API to make our app. The link for the same is https://finalspaceapi.com/

To use the API endpoint in our project, we will use the package of postman-request. The link for the same is https://www.npmjs.com/package/postman-request

So, we will first make the project as a npm project by npm init -y command and after that install postman-request using the below npm command.

npm init -y
npm i postman-request

Now, in app.js we will remove the earlier code and use request to do api call to https://finalspaceapi.com/api/v0/character/ to get a list of all charaters from final space. Notice that we are also making the json as true, so that we can get the response directly.

app.js

Now, we will also add the code once we get error in our api call. To check the error, jut hit a wrong endpoint.

Now, when we run app.js, it will show the error.

app.js

We will now use callback in our code, so that we can re-use our code. Refer to this YouTube video to learn more about callbacks.

Now, create a folder utils and inside it create a file characters.js. We are moving all of the api call logic to there. Also notice that we have a callback function, which contains our error message or the data we get from the API.

characters.js

Now, back in app.js we will first import the getCharacters function, which will receive a callback once the API call is done.

app.js

Again running node app.js with wrong endpoint, will give us the error and correct endpoint will return us back the data.

Wrong endpoint

Now, we will create a server folder in the root directory and start learning about express first. Now, express is a NodeJS framework which make it easy to build web-server which serves API endpoint in no time

In the server folder, we have created an empty node folder and also installed the packages of express and hbs in it. We will use hbs to create dynamic html code in the server later on.

Create

Before moving forward, we will also install nodemon, so that we don’t have to restart the server after every change.

Also, in the package.json add the new start script.

package.json

Now, we can use the npm start to start our node application from the terminal.

npm start

Now, create a file app.js in the server directory and put the below content in it.

Here, we are first importing and using express. After that we can create GET routes through app.get() method. Here, we are creating index, about and help route.

We are sending back object and string inside them. At last we are listening at port 8080.

app.js

Now, if we go to http://localhost:8080/ we will get the json object back.

json

Similarly the route http://localhost:8080/about will give us the string.

String

Now, we will use create a folder of public and templates. Inside the templates, we will create the folder of partials and views.

Now, views are the dynamic html files which can be served from our node app. Here, we have created three files about.hbs, help.hbs and index.hbs.

The partials are the small resusable codes, which can be used in views files. We have created footer.hbs and header.hbs here.

Now, in our app.js we have included all of them and also added the required code to use them.

app.js

Now, we will change our app.get() to show the hbs file and also pass some parameters to it. Here, we are using the res.render() to render the hbs.

app.js

Now, we will create the header.hbs file and in it, show static code and also will show the varibale of title.

header.hbs

In the footer.hbs we will show the name varibale in html tags.

footer.hbs

Now, in the index.hbs we are showing the header and the footer partials and also some static content. Notice, that we use > to refer to partials.

index.hbs

Now, the about.hbs will again show the header and footer partials.

about.hbs

The help.hbs will be like below and will also show the helpText.

help.hbs

Now, go to http://localhost:8080/ and we will see the content from index.hbs server. All the navigation and other paths are also working fine.

localhost

Now, in the public folder, we will create a css folder and put a style.css file, a img folder and put two images in it and a js folder and main.js file in it.

We can now use these files to add style and functionalities to our hbs files. In the style.css add the below content. Here, we have added styles for all three handlerbar files.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background: #000 url('../img/bg.jpg') no-repeat center center/cover;
height: 100vh;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.main-content{
max-width: 1100px;
margin: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a {
color: #888888;
}
a:hover {
color: #fff;
background-color: #888888;
}
p {
margin: 10px 0;
}
input {
border: 1px solid #cccccc;
padding: 8px;
margin: 10px 0;
}
button {
cursor: pointer;
border: 1px solid #888888;
background: #888888;
color: white;
padding: 8px;
}
.card {
cursor: pointer;
background-color: transparent;
height: 300px;
}
.card img {
width: 100%;
height: 300px;
object-fit: cover;
}
.card-container {
background-color: #333;
color: white;
padding: 20px;
}
.card h1 {
font-size: 25px;
border-bottom: 1px #fff solid;
padding-bottom: 10px;
margin-bottom: 10px;
}
.card li, .help-list li {
list-style: none;
padding-bottom: 10px;
}
.help-text{
font-size: 20px;
margin: 6px 0;
}
footer {
color: #888888;
border-top: 1px solid #eeeeee;
margin-top: 16px;
padding: 16px 0;
position: fixed;
bottom: 0;
}
header h1{
margin-bottom: 6px;
}
.portrait{
width: 600px;
height: 600px;
object-fit: cover;
margin: 10px 0;
}

Now, in the about.hbs file, we will add a image and two paragraphs.

about.hbs

Now, our About page is looking like below in localhost.

About

Now, we will update our help.hbs file we add the style file and data containing links.

help.hbs

The http://localhost:8080/help looks like below.

Help

Lastly, we will update the index.hbs file. Here, we have a form containg a input box and button. We also have an empty div of card below it.

Also, notice we have included a main.js file.

index.hbs

Now, in the main.js we will write the code to get the data from location endpoint of final space API. Notice that we are using fetch here, because this code will be executed on client browser.

main.js

Now, in our home we can query to get various location data from final space API.

Final app

Now, we will deploy our app through heroku. We should install heroku cli, first to use the awesome features of heroku. The details for the same are here.

Our main code is in the server folder and so, we will make that a git repo. And also don’t forget to add a .gitignore with node_modules in it.

To deploy in heroku, we need to change two things. First in the package.json we need to change the start script and also creating a dev script to run with nodemon in local.

package.json

Also, in the app.js we are creating a port variable and also listening to it.

app.js

Now, got to heroku site and create a new project.

Project

Now, we will follow the instruction as per heroku and give the mentioned commands.

Commands to give

After the last command our app is deployed successfully, and we are able to use it. The code for the same can be found in this github repo.

Deployed

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to write an article with Next.js medium publication?

How to write an article with Next.js medium publication?

Sorting data from a GraphQL+GraphCool Endpoint

25 Programming Jokes That Will Make You Laugh

Building a Voice-Powered Song Search

Refusing to convert from directory to symlink with Ansible

Now Playing: Using Spotify’s Awesome API with React

Let’s Start the journey with React fundamental Concept

Java Script Camp

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Understanding NodeJS by building a Task App

Build Crud API with Node.js, Express, and MongoDB

Deploying an Express Application Using GitHub Actions

How to Build an Authentication API with JWT Token in Node.js