API REST

What is an API?

An API (Application Programming Interface) is a set of features that an application makes available to web developers. New applications based on this data and code are satellites of the base application. Using an API allows you to work more on the development of an existing application or service in order to save work time instead of creating an entirely new application.

How does an API work?

The web client will make a call to the API with an event defined by the developer. The API will make a request to the server to retrieve data from a database for example. Thereafter, the server has processed the data, the API will retrieve the data to return to the web client. Finally, the API will send the data to the web client to display it.

NOTA: If the web client is a PHP file, the data can also be retrieved for processing.

How to create your first API?

We are going to create an API that allows us to display a random number by clicking on a button. To create our first API, we will need: 

  • A server to put the project in, a local server like Wampserver is sufficient.
  • Our web client (HTML/PHP file)

We need to integrate our JS file into our web client:
<script type= »text/javascript » src= »api.js »></script>

Be careful with the file path, it will have to be modified if it is not in root.

We will create a button to display a random number by clicking on it, the event onclick= »clicked() » allows us to call the function in the JS file. The random number will be displayed in : <div id= »number »></div>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="api.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>First API</title>
    </head>
    <body>
        <button onclick="clicked()">Click</button>
        <div>Number Randomize: <div id="number"></div></div>
    </body>
</html>
  • Our data processing file (PHP file)

We will generate a random number from 0 to 100 with rand(0,100), then place this number in a JSON array to retrieve it with our API.

<?php
    $retour[0] = rand(0,100);
    echo json_encode($retour);
?>
  • Our API (JS file)

The client clicks on the button, we will call our server with a fetch() it will return a JSON array response named data with the dependency then(). With the second dependency we will enter a function that displays our table in JSON in the browser console:

Then we call our function to display the number on the web client with the id of the <div> to modify and the array data in JSON (our random number): UpdateNumber(« number »,data[0]);

The function UpdateNumber() will target the content of the client element with the id « number ». In the content we will insert our random number with the variable text (this variable corresponds to data[0] previously set as parameter).

function clicked(){
    fetch('api.php').then((resp) => resp.json()).then(function(data) {
        console.log(data);
        UpdateNumber("number",data[0]);
    })
    .catch(function(error) {
    console.log(error);
    });
   }
 
function UpdateNumber(id,text){
    var e = document.getElementById(id).innerHTML = text;
}

Our API is now finished, you can try it and here is the result:

Flèche bas

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *