React JS Training Course Online
- 20k Enrolled Learners
- Weekend
- Live Class
Since the invention of the internet, we have been using different applications and web pages to get data for various resources. However, have you ever thought, where does this data come from? Well, it’s the servers from where we get the data. So in this article on What is REST API, let us look into how a client communicates with the servers to extract the required information.
The following topics will be covered in this article:
The term REST stands for REpresentational State Transfer. It is an architectural style that defines a set of rules in order to create Web Services. In a client-server communication, REST suggests to create an object of the data requested by the client and send the values of the object in response to the user. For example, if the user is requesting for a movie in Bangalore at a certain place and time, then you can create an object on the server-side.
So, over here, you have an object and you are sending the state of an object. This is why REST is known as Representational State Transfer.
The architectural style of REST helps in leveraging the lesser use of bandwidth to make an application more suitable for the internet. It is often regarded as the “language of the internet” and is completely based on the resources.
Now that you know what it is, let us move on and understand the need for REST API.
Consider a scenario where you are using the Book My Show app. Now, obviously, this application needs a lot of Input data, as the data present in the application is never static. Either it is movies getting released on a frequent basis, or various cities showing different languages movies at various times of the day. It’s never static which implies the fact that data is always changing in these applications.
Now, where do you think we get this data from?
Well, this data is received from the Server or most commonly known as a Web-server. So, the client requests the server for the required information, via an API, and then, the server sends a response to the client.
Over here, the response sent to the client is in the form of an HTML Web Page. But, do you think this is an apt response that you would expect when you send a request?
Well, I am assuming the fact that you would say NO. Since, you would prefer the data to be returned in the form of a structured format, rather than the complete Web page.
So, for such reasons, the data returned by the server, in response to the request of the client is either in the format of JSON or XML. Both JSON and XML formats have a proper hierarchical structure of data.
Now, this sounds quite simple, right?
But, the only issue which is present in this framework until now is that you have to use a lot of methods to get the required information. To the fact, using these methods to retrieve information, becomes quite cumbersome when you require complex data.
So, this is where REST API comes into the picture. The REST API creates an object, and thereafter sends the values of an object in response to the client. It breaks down a transaction in order to create small modules. Now, each of these modules is used to address a specific part of the transaction. This approach provides more flexibility but requires a lot of effort to be built from the very scratch.
Moving ahead, let us take a look at the Principles of REST API.
Principles of REST API
Well, there are six ground principles laid down by Dr. Fielding who was the one to define the REST API design in 2000. Below are the six guiding principles of REST:
The requests sent from a client to a server will contain all the required information to make the server understand the requests sent from the client. This can be either a part of URL, query-string parameters, body, or even headers. The URL is used to uniquely identify the resource and the body holds the state of the requesting resource. Once the server processes the request, a response is sent to the client through body, status or headers
The client-server architecture enables a uniform interface and separates clients from the servers. This enhances the portability across multiple platforms as well as the scalability of the server components.
To obtain the uniformity throughout the application, REST has the following four interface constraints:
In order to provide a better performance, the applications are often made cacheable. This is done by labeling the response from the server as cacheable or non-cacheable either implicitly or explicitly. If the response is defined as cacheable, then the client cache can reuse the response data for equivalent responses in the future.
The layered system architecture allows an application to be more stable by limiting component behavior. This type of architecture helps in enhancing the application’s security as components in each layer cannot interact beyond the next immediate layer they are in. Also, it enables load balancing and provides shared caches for promoting scalability. To learn more, check out this Full Stack developer course today.
Code on demand
This is an optional constraint and is used the least. It permits a clients code or applets to be downloaded and to be used within the application. In essence, it simplifies the clients by creating a smart application which doesn’t rely on its own code structure.
Now, that you know the principles behind REST API, next let’s look into the Methods of REST API.
All of us working with the technology of the web, do CRUD operations. When I say CRUD operations, I mean that we create a resource, read a resource, update a resource and delete a resource. Now, to do these actions, you can actually use the HTTP methods, which are nothing but the REST API Methods. Refer below.
Now that you know what is a REST API and what all you need to mind in order to deliver an efficient application, let’s dive deeper and see the process of building REST API.
In this practical demonstration, I will be creating a simple CRUD REST application using Node.js. To build this application, you will need to install the following:
Node.js
Express.js
Joi
nodemon (Node Monitor)
To know, how to install Node.js, you can refer to the article on Installation of Node.js.
For this hands-on, I will be using the WebStorm IDE to write and execute the codes. You can use any IDE or code editor according to your choice. So, let’s get started.
Step 1: Create a project directory, which will consist of all the files present in the project. Then, open commands prompt and navigate to the project directory. Refer below.
Step 2: Now, call npm using the below command. This will initialize the npm modules in your system.
npm init
Once you hit enter, Node.js, will ask you to enter a few details related to the project. These details will basically be the metadata for your project. Refer below.
Here you can define your entry point along with several other information. For this demo, I will be using script.js as an entry point.
It will then, ask you for a confirmation for the data you must have mentioned. Just press on Y to confirm. Refer below.
Step 3: Next, you have yo install Express.js using the below command:
npm i express
Express is a web framework which can be used along with Node.js. This web framework will allow you to create Restful APIs, with the help of helper methods, middle layers to configure your application.
Step 3.1: Similarly, you have to install Joi.
npm i joi
This package allows you to create blueprints for JavaScript objects which store information to ensure validation of key information.
Step 3.2: Finally, install the node monitoring package nodemon, using the below command.
npm i -g nodemon
Nodemon, keeps a watch on all the files with any type of extension present in this folder. Also, with nodemon on the watch, you don’t have to restart the Node.js server each time any changes are made. Nodemon will implicitly detect the changes and restart the server for you.
package.json
{ "name": "restapidemo", "version": "1.0.0", "description": "Creation of REST API", "main": "script.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "sahiti_kappagantula", "license": "ISC", "dependencies": { "express": "^4.17.1", "joi": "^14.3.1" } }
script.js
const express = require('express'); //Import Express const Joi = require('joi'); //Import Joi const app = express(); //Create Express Application on the app variable app.use(express.json()); //used the json file //Give data to the server const customers = [ {title: 'George', id: 1}, {title: 'Josh', id: 2}, {title: 'Tyler', id: 3}, {title: 'Alice', id: 4}, {title: 'Candice', id: 5} ] //Read Request Handlers // Display the Message when the URL consist of '/' app.get('/', (req, res) => { res.send('Welcome to Edurekas REST API!'); }); // Display the List Of Customers when URL consists of api customers app.get('/api/customers', (req,res)=> { res.send(customers); }); // Display the Information Of Specific Customer when you mention the id. app.get('/api/customers/:id', (req, res) => { const customer = customers.find(c => c.id === parseInt(req.params.id)); //If there is no valid customer ID, then display an error with the following message if (!customer) res.status(404).send('<h2 style="font-family: Malgun Gothic; color: darkred;">Ooops... Cant find what you are looking for!</h2>'); res.send(customer); }); //CREATE Request Handler //CREATE New Customer Information app.post('/api/customers', (req, res)=>; { const { error } = validateCustomer(req.body); if (error){ res.status(400).send(error.details[0].message) return; } //Increment the customer id const customer = { id: customers.length + 1, title: req.body.title }; customers.push(customer); res.send(customer); }); //Update Request Handler // Update Existing Customer Information app.put('/api/customers/:id', (req, res) => { const customer = customers.find(c=> c.id === parseInt(req.params.id)); if (!customer) res.status(404).send('<h2 style="font-family: Malgun Gothic; color: darkred;">Not Found!! </h2>'); const { error } = validateCustomer(req.body); if (error){ res.status(400).send(error.details[0].message); return; } customer.title = req.body.title; res.send(customer); }); //Delete Request Handler // Delete Customer Details app.delete('/api/customers/:id', (req, res) =>; { const customer = customers.find( c=> c.id === parseInt(req.params.id)); if(!customer) res.status(404).send('<h2 style="font-family: Malgun Gothic; color: darkred;">Not Found!!</h2>'</span>); const index = customers.indexOf(customer); customers.splice(index,1); res.send(customer); }); //Validate Information function validateCustomer(customer) { const schema = { title: Joi.string().min(3).required() }; return Joi.validate(customer, schema); } //PORT ENVIRONMENT VARIABLE const port = process.env.PORT || 8080; app.listen(port, () => console.log(`Listening on port ${port}..`));
Step 4: Now, the next step is to check whether the handlers are working properly or not. For that, we will use a Chrome extension called Postman. To install Postman you can visit here and click on ‘Add to Chrome’.
Step 5: Now, once you have installed Postman, open it to test your application.
Step 6: But before that you have to start your server. To start your server, type the following command.
node script.js
You would see the output as below:
Let us start by testing the GET Method.
Step 7: In order to do that you need to select GET from the drop-down list, type in the defined URL and hit send.
If your code is working fine, then you will see the list of all the customers which we have added manually in our code. In the below picture, you can see how my result looks like. Here I have mentioned the URL to be localhost:8080/api/customers
Step 8: Now, let’s try adding a new customer to our stack of customers. For that, select ‘POST’ from the drop-down list and type in the defined URL for the POST method. Then, click on ‘Body’, select ‘raw’ and move on to select ‘JSON’ from the drop-down list as depicted in the below image. Now, in the text area, type in the name of your customer as shown and hit send.
If your POST method is working fine, your response body will contain the new customer’s name along with the Customer ID. Here if you observe, we have only mentioned the name but we did not give the customer ID. This implies that the Customer ID is automatically incremented
Step 9: Now, let’s try to update a Customer name. Let us say we ant to update the name of the Customer ID = 3. So, to update the data, you need to first select ‘PUT’ from the drop-down table and enter the PUT request’s URL along with the customer id you wish to update. Next in the ‘Body’, type in the new customer name and hit enter.
This will give you a response with the customer id and updated customer name.
Step 10: Finally, let’s send a ‘DELETE’ request to delete an existing record. For that select DELETE from the drop-down list and type in the URL of the delete request handler along with the customer’s details, you want to remove and hit enter. Let’s say, I want to delete the details of a customer with id = 3. If your transaction is successful, you will see the complete details of the entry you have removed in the response body.
Now, let’s send a GET request for our final list of customers.
As you can see from the above screenshot, the response body contains a total of five customers with the customer id 3 missing as we have already deleted that entry.
With this, we come to an end of this article on “What is REST API?”. If you found this article relevant, check out the Node.js Certification Training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Check out the Angular Certification Training course online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Got a question for us? Please mention it in the comments section of this “What is REST API?” and we will get back to you.
Course Name | Date | Details |
---|---|---|
Web Developer Certification Training Course | Class Starts on 19th October,2024 19th October SAT&SUN (Weekend Batch) | View Details |
Web Developer Certification Training Course | Class Starts on 28th December,2024 28th December SAT&SUN (Weekend Batch) | View Details |
edureka.co