DEV Community: Noopur Sharma

Creating a Simple REST API - Part 3

Noopur Sharma — Thu, 14 Jul 2022 17:33:22 +0000

Hello JuxtaCoders!
Welcome to the third part of the REST API series. I hope the series has been helpful so far. Here, we're going to put everything we've seen so far into a functioning API. If you haven't watched the previous parts (part 1 | part 2), I highly recommend going through those and then coming back here:)

In this part, we'll build a simple RESTful API using Express.js

First we need to import the express module :

const express = require('express');
const app = express();

The another thing we need is the joi module. This is used in validation of the bodies of client requests (like in put and post methods). First we install the joi module from npm and then import it :

const Joi = require('joi');
//This returns a class in Joi variable

Now we get a middleware of express to parse the various components of the json type client requests :

app.use(express.json());
//This returns a middleware that we are using via the use() method

Now we can create a dummy array of objects as our data set :

const customers = [
    { id: 1, name: 'John', address: 'Highway 71' },
    { id: 2, name: 'Peter', address: 'Lowstreet 4' },
    { id: 3, name: 'Amy', address: 'Apple st 652' },
    { id: 4, name: 'Hannah', address: 'Mountain 21' },
    { id: 5, name: 'Michael', address: 'Valley 345' },
    { id: 6, name: 'Sandy', address: 'Ocean blvd 2' },
    { id: 7, name: 'Betty', address: 'Green Grass 1' },
    { id: 8, name: 'Richard', address: 'Sky st 331' },
    { id: 9, name: 'Susan', address: 'One way 98' },
    { id: 10, name: 'Vicky', address: 'Yellow Garden 2' },
    { id: 11, name: 'Ben', address: 'Park Lane 38' },
    { id: 12, name: 'William', address: 'Central st 954' },
    { id: 13, name: 'Chuck', address: 'Main Road 989' },
    { id: 14, name: 'Viola', address: 'Sideway 1633' }
];

Now we can start defining the route handlers.

Let the first route handle be for the homepage :

app.get('/', (req, res) => {
    res.send('Hello World!!');
});

Now we can define route handlers for our actual GET requests :

The first one is to get the details of all customers in our dataset. In the second type of request the client defines for what id they want to see the details.

For the second type of request we want to parse the id out of the url, and find if it even exists in the dataset. Only when it exists can we send the details, otherwise we send an error.

First we parse the id from the request. Using the req.params.id object returns a string, so we need to parse it into an integer. For this we use the parseInt() method.

Now to find if the data for this id exists in our dataset, we need to use the find() method on our array of objects. We check if the id of any of the array elements match the id that the user requested. If it doesn't we produce a 404 status code (meaning not found). Otherwise we respond with the object.

app.get('/api/customers', (req, res) => {
    res.send(customers);
});

app.get('/api/customers/:id', (req, res) => {
    const customer = customers.find(c => c.id === parseInt(req.params.id));
        if (!customer) return res.status(404).send("Customer with given ID not found");
        res.send(customer);
});

Now let's create route handler for our POST request :

First we assume that he client makes a proper request with both the necessary properties in our customer object, fulfilling the requirement of a min number of characters.

In such case our goal is to simply take the values from the client, push the details into our array, and display the added object :

app.post('/api/customers', (req, res) => {
    const customer = {
        id: customers.length + 1,
        name: req.body.name,
        address: req.body.address
    }

  customers.push(customer);
  res.send(customer);
});

But majority of the time we assume that the client will not put the right request. In such case we need to validate the body of the request, matching it with an ideal schema. If there is some issue, we need to show the error with a 400 status code (meaning bad request). Otherwise, we respond with the object added :

app.post('/api/customers', (req, res) => {
    const schema = Joi.object({
        name: Joi.string().min(3).required(),
        address: Joi.string().min(5).required()
    });

/*  const result = schema.validate(req.body);
Or we can use the destructuring technique to directly read the error 
out of the validate method
*/
    const { error } = schema.validate(req.body);

    if (error) return res.status(400).send(error);

    const customer = {
        id: customers.length + 1,
        name: req.body.name,
        address: req.body.address
    }

    customers.push(customer);
    res.send(customer);
});

Here we first create a schema to define the requirements of the properties that need to be included in the body of the request. This is done by creating an object using the object() method of the Joi class. Next we use the validate() method to see if req.body is valid with respect to the schema.

The validate() method returns an object containing two properties —> error and value. In case there is an error, the property 'value' gets a null value, otherwise the 'error' property gets a null value.

Either we can retrieve this object in 'result' variable and then use its 'error' property, or we can use the concept of destructuring to just take the error value out of the object.

Then we check if the value of error is null or not. If it is not null, we send the value of error, otherwise we create a variable to hold the values of the object and push it into the array and show it to the client.

Now we create a route handler for the PUT request :

The client will provide an id for which they want to update the data. So our goal is to first look up the id in our dataset. If it doesn't exist we respond with a 404 status code. If it exists, we check the validity of the request body. If the body is valid, we show the updated object, otherwise we respond with a 400 status code.

Now let's start with finding the id in our dataset :

app.put('/api/customers/:id', (req, res) => {
    //Finding
    const customer = customers.find(c => c.id === parseInt(req.params.id));
  if (!customer) return res.status(404).send("Customer with given ID not found");

    //Validating
  const schema = Joi.object({
      name: Joi.string().min(3).required(),
      address: Joi.string().min(5).required()
  });

    //Using destructuring
  const { error } = schema.validate(req.body);
  if (error) return res.status(400).send(error);

    //Updating
  customer.name = req.body.name;
  customer.address = req.body.address;

  res.send(customer);
});

Now in the above two route handlers we can the the code for validation is repeated. We can reduce it by creating a method that takes the body as parameter, creates a schema and validates. This method returns the error :

function validation(user) {
    const schema = Joi.object({
      name: Joi.string().min(3).required(),
      address: Joi.string().min(5).required()
  });

    return schema.validate(user);
}

Now the value we pass this function will be :

const { error } = validation(req.body);

Everything else remains the same.

So, now both the route handlers look like this :

//POST
app.post('/api/customers', (req, res) => {

    const { error } = validation(req.body);
    if (error) return res.status(400).send(error);

    const customer = {
        id: customers.length + 1,
        name: req.body.name,
        address: req.body.address
    }

    customers.push(customer);
    res.send(customer);
});

//PUT
app.put('/api/customers/:id', (req, res) => {
    //Finding
    const customer = customers.find(c => c.id === parseInt(req.params.id));
  if (!customer) return res.status(404).send("Customer with given ID not found");

  const { error } = validation(req.body);
  if (error) return res.status(400).send(error);

    //Updating
  customer.name = req.body.name;
  customer.address = req.body.address;

  res.send(customer);
});

Now finally we need the DELETE route handler :

Here we first find if the dataset exists which the client wants to delete, via the id. If it exists, we get the index of the object through its id and we use the splice() method on our dataset array to remove the object. If the id is not found, we show a 404 status code, otherwise we show the deleted object as response.

app.delete('/api/customers/:id', (req, res) => {
    //Finding
    const customer = customers.find(c => c.id === parseInt(req.params.id));
    if (!customer) return res.status(404).send("Customer with given ID not found");

    //Delete
    const index = customers.indexOf(customer);
    customers.splice(index , 1);

    res.send(customer);
});

We end our server by creating a listening port :

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`));

This is the final code ———>

const Joi = require('joi');
const express = require('express');
const app = express();

app.use(express.json());

const customers = [
    { id: 1, name: 'John', address: 'Highway 71' },
    { id: 2, name: 'Peter', address: 'Lowstreet 4' },
    { id: 3, name: 'Amy', address: 'Apple st 652' },
    { id: 4, name: 'Hannah', address: 'Mountain 21' },
    { id: 5, name: 'Michael', address: 'Valley 345' },
    { id: 6, name: 'Sandy', address: 'Ocean blvd 2' },
    { id: 7, name: 'Betty', address: 'Green Grass 1' },
    { id: 8, name: 'Richard', address: 'Sky st 331' },
    { id: 9, name: 'Susan', address: 'One way 98' },
    { id: 10, name: 'Vicky', address: 'Yellow Garden 2' },
    { id: 11, name: 'Ben', address: 'Park Lane 38' },
    { id: 12, name: 'William', address: 'Central st 954' },
    { id: 13, name: 'Chuck', address: 'Main Road 989' },
    { id: 14, name: 'Viola', address: 'Sideway 1633' }
];

app.get('/', (req, res) => {
    res.send('Hello World!!');
});

app.get('/api/customers', (req, res) => {
    res.send(customers);
});

app.get('/api/customers/:id', (req, res) => {

    const customer = customers.find(c => c.id === parseInt(req.params.id));

    if (!customer) return res.status(404).send("Customer with given ID not found");

    res.send(customer);
});

function validation(user) {
    const schema = Joi.object({
        name: Joi.string().min(3).required(),
        address: Joi.string().min(5).required()
    });

    return schema.validate(user);
}

app.post('/api/customers', (req, res) => {

    const { error } = validation(req.body);
    if (error) return res.status(400).send(error);

    const customer = {
        id: customers.length + 1,
        name: req.body.name,
        address: req.body.address
    }

    customers.push(customer);
    res.send(customer);
});

app.put('/api/customers/:id', (req, res) => {
    //Finding
    const customer = customers.find(c => c.id === parseInt(req.params.id));
    if (!customer) return res.status(404).send("Customer with given ID not found");

    const { error } = validation(req.body);
    if (error) return res.status(400).send(error);

    //Updating
    customer.name = req.body.name;
    customer.address = req.body.address;

    res.send(customer);
});

app.delete('/api/customers/:id', (req, res) => {
    //Look up the customer
    //If not existing, return 404
    const customer = customers.find(c => c.id === parseInt(req.params.id));

    if (!customer) return res.status(404).send("Customer with given ID not found");

    //Delete
    const index = customers.indexOf(customer);
    customers.splice(index, 1);

    //Return the same customer
    res.send(customer);
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`));

That's all for now!! I hope this was helpful. Now, you can use this knowledge to make more complex APIs for more diverse databases. But remember, the key is to taking it slow and not to loose momentum. Keep making projects and gradually gain more skills!

If there are any suggestions, feel free to share:)

Until next time... Happy Coding!

Creating a Simple REST API - Part 2

Noopur Sharma — Tue, 08 Mar 2022 17:03:07 +0000

Hello JuxtaCoders!
Welcome to the second part of the REST API series. I hope the first part was helpful in some way. To get a better understanding of this part, you should have a basic knowledge of JavaScript, Node.js, basic shell/terminal commands and how to setup npm, etc. on your device. If there are topics on which I should make separate in-depth articles, please let me know in the comments.

In this part, we'll get an introduction to Express.js

A basic http server in NodeJs looks like following :

const http = require('http');

const server = http.createServer((req, res) => {
    if(req.url === '/'){
        res.write("Hello World!");
        res.end();
    }
    if(req.url === '/api/customers'){
        res.write(JSON.stringify([1,2,3]));
        res.end();
    }
});

server.listen(3000);
console.log("Listening on http://localhost:3000");

The problem here, however, is in the route handlers. For a web application, there can be multiple routes and it can get tedious to write so many ' if ' statements.

To resolve this, we use express framework.

To set up express, we first create a folder and initialize our packages.json file in it.

> mkdir REST API
> cd REST API
> npm init --yes

Now that we have our folder ready with the packages.json file, we can install express :

> npm install express

Now we can import express to our file and use it.

Another module that we should install is 'nodemon'. This is short for node-monitor. Basically, when we execute a .js file, we use the following statement :

> node index.js

But, with this, whenever we make any change in our file, we have to restart the server. This can be very tedious. Instead, if we use nodemon, we don't have to manually restart the server. Nodemon will do it for us.

To install nodemon :

> npm install -g nodemon

We simply have to run our file using the following command :

> nodemon index.js

Now, we won't have to repeatedly restart our server.

If we see our http server we've created in NodeJs, we see the use of a hard coded Port = 3000. While this may work in our own system, it may not work in a production environment. This is because, when we host an application on a hosting environment, a port is dynamically assigned to our application. In most cases the port that we've exclusively chosen will not be available in a dynamic environment. For this we use the following way to set up a port :

const port = process.env.PORT || 3000;

This means that if the application is running on some external process, the port should be equal to the environment variable PORT of that process, otherwise, we've set it to 3000.

If we don't want to give a constant value to our port variable in our code, we can assign the environment variable PORT a value in the terminal :

> set PORT = 5000

Now let's see how we create Route Handlers in express :

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));

This is what a simple http server using express looks like.

First we import the express module. Then we get an express object in a variable 'app'. This object contains all the important properties and methods of the express module. By convention, we call it an express app.

This object will contain all our http methods (like get, put, post, delete, etc.). We can directly use them to describe what kind of request we want from the user.

If we want to define a route handler for a get request to the homepage, we use the get() method of our express app. This method takes two arguments. The first is the path of the request. In case we want to make this handler for the homepage, our path is '/'. The next argument is the call back function. Here we describe how does our server respond to the request. For instance, we simply send a response displaying 'Hello World' on the screen.

We can create similar route handlers for all types of http requests and path names.

In the above example if we want to add a route to get the list of courses, we can use the following statement :

app.get('/api/courses', (req,res) => {
    res.send([1,2,3]);
});

Whenever the user makes a url request of http://localhost:3000/api/courses the response is an array of numbers [1,2,3].

Now let's see how we parse the url to give specific responses based on the id that a client requests :

app.get('/api/courses/:id', (req, res) => {
    res.send(req.params.id);
});

Here the path contains :id, which means here we are putting a placeholder that'll take whatever id the user requests. In our response we use the .params object of request, that'll contain the id.

We can use the params object for multiple parameters in the request as well :

app.get('/api/courses/:year/:month', (req, res) => {
    res.send(req.params);
});

//Responds with an object containing values of the properties "year" and "month"
//as requested by the client
//eg. http://localhost:3000/api/courses/2021/July -->
// { year : 2021, month : "July"}

We can parse the queries out of the request using the .query object of request :

app.get('/api/courses/:year/:month', (req, res) => {
    res.send(req.query );
});

//Responds with an object containing key-value pairs of the query
//as requested by the client
//eg. http://localhost:3000/api/courses/2021/July?sortBy=name -->
// { sortBy : "name"}

That's all for now!! I hope this was helpful. In the next part, I'll provide a explanation of how to use what we've seen so far and create a REST API using Express.

If there are any suggestions, feel free to share:)

Until next time... Happy Coding!

Guide to Git and GitHub - Part 1

Noopur Sharma — Wed, 16 Feb 2022 12:06:03 +0000

Hello JuxtaCoders!

In my opinion, Git and GitHub are some of the most essential skills that every programmer must have. So, I am bringing this series where I share all the basics that you need to know to get comfortable with using Git and GitHub. I'll share some resources at the end to help you learn further.

In this part we'll get an introduction to what Git and GitHub are.

Imagine you and your team are working on an application. Someone does a change in the code and the application crashes. At this stage, you have a few options. Either someone in your team remembers what the code looked like before making the changes, or, someone had a copy of the previous version of the code in their system which they can share with the team, or, in the worst case, you have to start all over again. Now, this won’t be a huge issue if a few people are working on a small application. But imagine working on thousands of lines of code, with tens or even hundreds of people making changes (or contributing). Here, if the application fails, it’ll be almost impossible to find someone who remembers what the code looked like before crashing!

This is where Git comes in. Git is a distributed Version Control System. Basically, it helps us keep track of the history of all the changes that were made in the codebase with the help of some commands. Also, in projects where many people are working on the same code, Git helps everyone to make changes on their own and add these to the original codebase (merging), without affecting others’ progress.

Side note, a lot of people may confuse Git with a programming language, which it isn’t!

Now, using Git on its own can be complex for a lot of people. Not many people would want to learn how to set Git up in their system, its various commands and how to properly use them with your project, just to add a semicolon in your code (which is totally fair!). So, for a convenient user experience, there are many platforms that allow you to maintain your project in forms of repositories and collaborate with people from around the world. GitHub is one such platform. There are many more such platforms, like, BitBucket, GitLab, etc. But, GitHub is the most widely used. GitHub provides developers an efficient UI so that we can easily maintain our projects, contribute to other projects, or simply see how some of the widely used applications are built and maintained.

To use GitHub, you don't necessarily need to learn the Git commands, you just need to be familiar with some basic terms and how to operate GitHub. But regardless, it is always beneficial if you know Git too (in my opinion). So, that's everything we'll be focusing on in this series.

That's all for now!! I hope this was helpful. In the next part, I'll continue with how to set Git in your system, some important commands, etc.

If there are any suggestions, feel free to share:)

Until next time... Happy Coding!

Creating a Simple REST API - Part 1

Noopur Sharma — Tue, 15 Feb 2022 13:28:08 +0000

Hello JuxtaCoders!
A few months back I was learning Backend Development for a Training Program I enrolled in. We had to work on REST APIs using NodeJS and Express (with a database of your choice). The issue was, there was an overwhelming amount of resources available online, and I was a beginner. I didn't know which resource to follow, which one is better than others and why, etc. But finally, after a few weeks, I managed to make a basic REST API, using MySQL as the database (because I already knew MySQL and didn't want to learn another new tech in such a short amount of time). So, I'm bringing this 3-part series to help any beginner understand the making of a REST API better, using MySQL, NodeJS, and Express.

This series covers the following topics:

1. Understanding what are RESTful APIs

2. Introduction to Express.js

3. Building a RESTful API using Express.js

In this part, we'll get a quick understanding of RESTful APIs (also known as RESTful services).

We know that all web applications work on a Client - Server Architecture. These components interact via the HTTP protocol. The Server provides some services that the Client can access via the HTTP protocol. The Client can directly ask for these services through an HTTP Request and in return the Server sends a Response. This is where REST comes into use.

REST is short for Representational State Transfer. REST is a convention to handle these HTTP requests. It provides basic principles to Create, Read, Update and Delete data via the HTTP protocol. These operations are collectively called CRUD operations.

Let us take an example of a movie rental system :

Let the domain name of the application be ⇒

⚡ moviez.com

If the clients want to access the 'customers' page and perform the various CRUD operations on it, they may use the following HTTP request ⇒

⚡ http://moviez.com/api/customers

The various components of the url are ⇒
1. http:// —> Mentions the protocol used
2. moviez.com —> Is the domain name
3. /api —> This is not compulsory but can be used as a convention to determine the use of rest operations
4. /customers —> This is the end point, or what we call the 'resource'. This specific end point refers to the list of customers. The client sends various http requests to such end points.
The type of http request determines the kind of operation carried out. For this we have a few verbs/methods that specify what operation is the client looking for, based on the http request. These methods are :
1. Get —> for Reading Data
2. Post —> for Creating Data
3. Put —> for Updating Data
4. Delete —> for Deleting Data

Let's further analyze the http methods :

The following are the basic http requests that a client will make ⇒

This is how each of them will be responded ⇒

First request will be to Get the details of all customers, by simply reaching the /customers endpoint. In response, we show the complete array of objects.

The other request can be to Get the details of a single customer. For this, the client has to provide an "id" to view data of a particular customer, therefore, the endpoint is /customers/:id (here there can be any value in place of :id). In response, we should details of only that object whose value of 'id' property matches the value entered.

The Put request consists of the id whose value is to be updated, and an object containing the set of values that the record needs to be updated to, so the endpoint is /customers/:id and an object. In response, we show the updated record.

The Delete request consists of the id whose record has to be deleted, so the endpoint is /customers/:id. In response, we can show the deleted record.

The Post request doesn't need any id but needs an object containing values for the various properties that need to be added to the array, so the endpoint is /customers. In response, we show the object added to the array.

That's all for now!! I hope this was helpful. In the next part, I'll give an introduction to Express and how we can set it up to write API queries that we learnt here.

If there are any suggestions, feel free to share:)

Until next time... Happy Coding!