Comment créer un projet de statut de pays Covid19 à l'aide de l'API REST ?

Avant de créer le projet, nous allons d'abord discuter de l'API REST. REST est un style architectural logiciel et un ensemble de normes qui aident à créer des services en ligne. Le nom complet du transfert d’État représentatif est REST. Pendant ce temps, une interface de programmation d'application (API) permet la communication entre deux ou plusieurs programmes informatiques. Il s'agit d'une interface logicielle qui fournit des services à d'autres logiciels. Les utilisateurs doivent suivre les règles de l'API REST basées sur HTTP (Hypertext Transfer Protocol) pour accéder au service Web.

Les méthodes HTTP traditionnelles (telles que GET, POST, PUT et DELETE) accèdent et modifient des ressources telles que des objets de données dans les API REST. Ceux-ci sont identifiés par des URI (Uniform Resource Identifiers). Vous pouvez utiliser l'API pour transférer des données dans divers formats, notamment XML et JSON. Vous pouvez utiliser REST pour créer des services Web petits, rapides et facilement évolutifs. Il a été développé pour communiquer avec le protocole HTTP du World Wide Web. Parce qu'elle est basée sur des protocoles standards, l'API REST peut être utilisée par divers clients, notamment les navigateurs Web, les applications mobiles et d'autres serveurs.

L'API REST est souvent utilisée dans le développement d'applications Web et mobiles car elle offre aux applications un moyen simple et standardisé d'accéder aux ressources du serveur et de les modifier.

Étapes pour créer un projet national de statut de sage Covid19

Grâce à l'API REST, on peut créer un projet de statut de pays COVID-19 en suivant ces étapes de base -

Étape 1 - Recherchez des API fiables qui fournissent des données COVID-19 ventilées par pays. Dans ce tutoriel, nous utilisons le lien API suivant : https://covid19api.com/.

Étape 2 - Consultez la documentation de l'API pour savoir comment obtenir les données et les paramètres permettant de filtrer les données par pays.

Étape 3 - À l'aide de la méthode AJAX, envoyez une requête HTTP sur l'API et obtenez les données de réponse.

Étape 4 - Pour développer le front-end du projet (afin de présenter les données de manière conviviale), nous avons utilisé des tableaux HTML et CSS pour mieux représenter visuellement les données.

Projet national de situation sage Covid19

Ici, nous allons construire le projet lui-même. Il sera divisé en trois parties : le code JavaScript AJAX qui effectue la requête HTTP, le corps HTML qui affiche le contenu et le style CSS qui le rend convivial. Nous utilisons la bibliothèque jQuery AJAX pour rendre le code plus facile à lire et à utiliser pour les utilisateurs.

Corps de réponse HTTP

Avant d’entrer dans les détails du code corporel HTML qui représente le statut Covid19 du pays, nous devons examiner la réponse de l’API et comprendre sa structure.

Voici une partie de la réponse API que nous avons reçue -

{
   "ID": "027ce495-cf80-48da-afb7-6b8f95b12a01",
   "Message": "",
   "Global": {
      "NewConfirmed": 208060,
      "TotalConfirmed": 671410179,
      "NewDeaths": 2047,
      "TotalDeaths": 6771936,
      "NewRecovered": 0,
      "TotalRecovered": 0,
      "Date": "2023-02-18T04:36:09.159Z"
   },
   "Countries": [
      {
         "ID": "2390f7cb-1c24-4164-bfc3-688afed8bbe7",
         "Country": "Afghanistan",
         "CountryCode": "AF",
         "Slug": "afghanistan",
         "NewConfirmed": 16, 
         "TotalConfirmed": 209072,
         "NewDeaths": 0,
         "TotalDeaths": 7896,
         "NewRecovered": 0,
         "TotalRecovered": 0,
         "Date": "2023-02-18T04:36:09.159Z",
         "Premium": {}
      },
      {
         "ID": "8591babe-97a3-44f5-8e38-06df8ae67a55",
         "Country": "Albania",
         "CountryCode": "AL",
         "Slug": "albania",
         "NewConfirmed": 9,
         "TotalConfirmed": 334273,
         "NewDeaths": 0,
         "TotalDeaths": 3596,
         "NewRecovered": 0,
         "TotalRecovered": 0,
         "Date": "2023-02-18T04:36:09.159Z",
         "Premium": {}
      },
      ...
   ]
   "Date": "2023-02-18T04:36:09.159Z"
}

Dans cette réponse, nous fournissons quelques détails sur les pays COVID-19, mais la partie importante du projet est la clé du pays. Il contient un ensemble d'objets représentant les détails du pays covid19 pour un pays spécifique. Les clés de cet objet sont explicites, par exemple « Pays » contient le nom du pays. "NewConfirmed" stocke les cas de covid19 nouvellement confirmés. « TotalConfirmed » stocke le nombre total de cas confirmés dans le pays. « NewDeaths » représente le nombre de décès récents. « TotalDeaths » fait référence au nombre total de décès dans le pays, « NewRecovered » représente les patients actuellement rétablis et « TotalRecovered » représente le nombre total de patients rétablis.

Exemple

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <title> Covid19 Country Wise Status Project </title>
   <style>
      .text-center {
         text-align: center;
      }
      #mytable {
         border-collapse: collapse;
         width: 100%;
      }
      #mytable td,
      #mytable th {
         border: 1px solid #ddd;
         padding: 8px;
      }
      #mytable tr:nth-child(even) {
         background-color: #f2f2f2;
      }
      #mytable th {
         padding-top: 12px;
         padding-bottom: 12px;
         text-align: left;
         background-color: #008b86;
         color: white;
      }
   </style>
</head>
<body>
   <h2 class="text-center"> Covid19 Country Wise Status Project </h2>
   <!-- Table -->
   <table id="mytable">
      <thead>
         <th> Country Name </th>
         <th> New Confirmed </th>
         <th> New Deaths </th>
         <th> New Recovered </th>
         <th> Total Confirmed </th>
         <th> Total Deaths </th>
         <th> Total Recovered </th>
      </thead>
   </table>
   <script>
      let mytable = document.getElementById('mytable')
      
      // AJAX HTTP Request 
      $.ajax({
         url: 'https://api.covid19api.com/summary',
         type: 'GET',
         success: function (response) {
            let data = response.Countries
            console.log(data)
            let element = ''
            data.forEach((country) => {
               element +=
               '<tr><td>' +
               country.Country +
               '</td>' +
               '<td>' +
               country.NewConfirmed +
               '</td>' +
               '<td>' +
               country.NewDeaths +
               '</td>' +
               '<td>' +
               country.NewRecovered +
               '</td>' +
               '<td>' +
               country.TotalConfirmed +
               '</td>' +
               '<td>' +
               country.TotalDeaths +
               '</td>' +
               '<td>' + 
               country.TotalRecovered +
               '</td></tr>'
            })
            mytable.innerHTML += element
         },
      })
   </script>
 </body>
</html>

Ce projet aidera les débutants à en apprendre davantage sur AJAX, JavaScript, HTML et CSS. Il peut également être utilisé comme vérification rapide du statut COVID pour plusieurs comtés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!