Creating Image Repository Service (Part 3)

Hello, today I am going to get in touch with something called API. I guess it is very familiar among people who are interested in software engineering. Let’s get started!

Continuing development using Strapi

First, open Command Line Interface (CLI) and change the directory to the imagerepo folder by typing :

$ cd imagerepo

Start yarn using :

$ yarn develop

Note :

If you use npm :

$ npm run develop

Type localhost:1337 in any browser’s address bar, then you will be redirected to strapi login page. Fill in your username and password to login. Dashboard page is seen immediately if login is successful.

Click Roles & Permissions, then select Public. Scroll down to set some permission configuration.

Next, to set permissions on actions that are listed. Usually, public users can not do create, update, and delete actions. In other words, only authenticated users are allowed to conduct these things. On the other hand, count, find, findone actions can be done by all users without having to be authenticated.

Good Practice :

create, delete, update => Allowed only if the user is authenticated

Since, we need to upload an image, mark on the upload action, then set it to ‘ isauthenticated ’.

But.. I would allow all actions to be performed by public users as we need to test API using an application called Postman.

Without authentication process, Postman would respond like below :

Create / Update / Delete data using API

Ever wonder why applications such as Traveloka have airplane flights, train departure and arrival data? Does Traveloka have direct access to their databases?

NO. It is dangerous to give direct access to databases, in terms of security. So, there is a thing called API.

Imagine, you are having dinner in a restaurant. You are seeing the menu and you order a dish of Nasi Goreng (Your order is a request in an application) . Then, a waiter comes to you and confirms your order. Next, the waiter asks a chef to cook your order (a chef, who is serving, is a server that processes the request) . After being cooked, your order is brought to you (You got your request from the server).

Guess which one is API?

Yes, the waiter has a role as API. So, API has responsibility related to resources and data. 

“Application Programming Interface is a set of definitions and protocols for building and integrating application software.” (https://www.redhat.com/en/topics/api/what-are-application-programming-interfaces)

REST APIs enable you to develop any kind of web application having all possible CRUD (create, retrieve, update, delete) operations. REST guidelines suggest using a specific HTTP method on a specific type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged).

HTTP Methods and its function

HTTP GET : to retrieve resource representation/information only – and not to modify it in any way.

HTTP POST : to create a new resource into the collection of resources.

HTTP PUT : to update existing resources (if the resource does not exist, then API may decide to create a new resource or not).

HTTP DELETE : to delete resources (identified by the Request-URI).

HTTP PATCH : to make partial updates on a resource.

(source : https://restfulapi.net/http-methods/)

How to identify whether the process is successful or not? HTTP Methods will respond with status codes, which identifies status of a request. Hence, the user will know the result of his request after being processed.

1. HTTP GET

HTTP GET : localhost:1337/Imagerepos

The result will present all users in Imagerepos.

I added new users to make some processes more understandable.

How to show specific users?

HTTP GET : localhost:1337/Imagerepos/{id}

For example, I will show a user in Imagerepo with id=2.

Oops… it gave me an error with status code 404, which is Not Found. Sure, since there is no user in Imagerepo with id=2.

Okay, I will show an existing user whose id is 4.

Another example, with id=5 :

Hmm.. I need to find one whose name contains …(bla bla bla)…

No worry, Strapi got you.

HTTP GET : localhost:1337/Imagerepos/?Nama_contains=<name of user>

For instance, I need to find a user whose name is Linus.

I tried another example, using the Biodata field. I want to search a user who wrote “..Python..” in his Biodata.

HTTP GET : localhost:1337/Imagerepos/?Biodata_contains=Python

There he is:)

2. HTTP DELETE

“ A user has delayed payment for more than 6 weeks. He is not part of this community anymore.”

In case of above thing, we can remove a user by :

HTTP DELETE : localhost:1337/Imagerepos/delete/{id}

I removed a user with id=4. Let’s see if it really works :

Voila! The user has been removed successfully.

3. HTTP PUT

“I recently created an amazing software, which I would like to put on my Biodata, so people will recognize me as an outstanding software engineer.”

Okay, calm down:) Strapi will manage this easily for you. All we need is :

HTTP PUT : localhost:1337/Imagerepos/{id}

BEFORE :

Next, just type something new on the VALUE field to update. Do not forget to click Send button on the right side of the page.

AFTER :

Done! Strapi strikes again!

“Wait, has it really changed ?”

Let us check :

Yes it has been modified.

4. HTTP POST

POST method is a bit different and maybe confusing if compared to other methods. It can be either a single request or two requests to complete.

First, we will look at the procedure which requires two requests :

First process : Nama and Biodata field

Fill in the value of Nama and Biodata fields, but just leave the Foto field empty.

“Why leaving the Foto field empty? “

Since x-www-form-urlencoded do not store an image file in a single request. In order to upload an image, we must send another request to http://localhost:1337/upload, as shown below.

Second process : Foto field

“ Wait, what are files, ref, etc. We did not have those fields, didn’t we? “

Sure, just check request parameters to upload files that will be linked to a specific entry. Checkout more at : (https://www.codepolitan.com/mudah-membuat-api-tanpa-koding-dengan-strapi)

Request parameters

• files: The file(s) to upload.
• refId: The ID of the entry which the file(s) will be linked to.
• ref: The name of the model which the file(s) will be linked to.
• field: The field of the entry which the file(s) will be precisely linked to

files => Image of the user (in this case, MacOS2.jpg. Just an example.)

refId => id of the user whose image will be uploaded in this request

refId => the content type name (in this case, content type name is Imagerepo)

field => the field which the image that will be uploaded is attached to. (in this case, it is ‘Foto’ field.)

Now, let us have a look :

The request seems to be successful, as we can see a user with id=7 which we just created using the HTTP POST method.

Next, we will create another user with only a single request :

When sending only one request, we have to write a field with type : text, to JSON format, inside a field called data. Then, field with type : files, enforce us to change KEY field to files.<field name>. In this case, the field name is Foto. So, I renamed the field to files.Foto .

What if I do not pay attention to letters?

Let us proof it :

So, the response came up with 400 Bad Request, which indicates that field names are case-sensitive and must be exactly same (We can not write “nama” as the variable of field “Nama” because it is case-sensitive).

Thank you for reading this article, have a nice day!