Categories: Insights

What is a RestfulAPI?

4 min read

Well, RestfulAPI is not only about the action but also about the whole React concept design pattern. Let’s describe it like this:

roles:
1.”Browser” == “client”,
2.”Server” == “shop”,
action:
Client ask shop : ” please give me Black chocolate”,
shop receive from Client: “ok, got your message, I will send you Black chocolate”
result:
shop send client Black chocolate

You can see from this scenario that there are: roles, verb(ask, receive), result

And they all play a drama called the ”Restful API”.

So, the Restful API is the Representation State Transfer—it’s about the architectural style. There’s no standard on how you build your restful API (like, if you write a drama, there should be no standard pattern, right?). Instead, it’s all about the action between Browser | Server, and how you communicate with the object you want.

Here is a sample graphic from the above scenario:

So, RestfulAPI is this entire picture: Browser| Web Server, action by method: GET, POST, PUT, DELETE and so on, and a Browser that will react with the result to the web page.

When you get this concept, you will see the key point is to communicate between the Browser | Web Server. So how do we do this? We primarily use http to connect both. So, now let’s look at what an http request is.

What is an http request?

With an http request, you can send the specific request and get the specific product you want directly, or you can send the common request and retrieve one of the products in the whole list. This will depend on your request and how complex the list of products happens to be.

You can look at it this way:

Nouns: Like whole collections of books, or resources, in http, this can be a URL such as http://book.com/books/{list}.

Verbs: This is the action involving our bookshelf. So, you can get the book, remove the book… and in http, you can use GET, POST, PUT, DELETE.

Content types: The book information is the author names, editor, publishing date, and so on. So, in http, you show this information with XML, JSON, or YAML format.

Here is a graphic to show the whole concept:

So if I want book 1, the URL to get book 1 can be http: //book.com/books/1.

If I want the author information, such as the publish date from book 1, the URL can be http: //book.com/books/1?authorInfo=John&publishDate=2016.

Here you can get authorInfo, so it is “John” and publish date is “2016”

In JSON format, it looks like this:

{
“book”:[{
“authorInfo” : “John”,
“publishDate”: “2016”
}]
}

In this URL, you can use GET or POST to get the information. And if you want to know the difference between GET and POST, you can look here.

So, the action should return the status, right?

http has a status code to show the return status:

200: ok
404: Not Found
500: internal Server Error

Here’s a link to look at the different statuses.

How do you access the API through the web browser?

You can actually open the web browser, click on the network and see the API running through the web event binding:

For example:

Here the resource (noun) is: https://stripe-s.pointroll.com/api/data/get/376?model=touareg&zip=55344
The method is get
The content type resource is 376?model=touareg&zip=55344, which in JSON format is:

And how will this information show in our final destination, the web browser?

You can use any language, but here I use JavaScript:

First, load the above resource.
Second, define the condition: if process 1 is successful, you need to get the offers list deal, and get the title “499/month for 36 months.”
If process 1 is not successful, then use the web browser to show the status.
And finally, show the result in the website.

The concept code will look like this:

$('#main-menu a').click(function(event) {    event.preventDefault();        $.ajax(this.href, {       success: function(data) {          $('#main').text(data.offers.deal.title);       },       error: function() {          $('#notification-bar').text('An error occurred');          //console.log("fn xhr.status: " + xhr.status);       }    }); });

So, the final expectation is to show the title “499/month for 36 months” on the browser’s web page.

Conclusion

The basic Restful API concept simply reduces the communication work between the frontend and backend. I recommend that you explore using it yourself and see how useful it can be.