Wie erstelle ich ein Covid19-Länderstatusprojekt mithilfe der REST-API?

Bevor wir das Projekt erstellen, besprechen wir zunächst die REST-API. REST ist ein Software-Architekturstil und eine Sammlung von Standards, die bei der Erstellung von Online-Diensten helfen. Der vollständige Name von Representational State Transfer ist REST. Mittlerweile ermöglicht eine Anwendungsprogrammierschnittstelle (API) die Kommunikation zwischen zwei oder mehr Computerprogrammen. Es handelt sich um eine Softwareschnittstelle, die Dienste für andere Softwareprogramme bereitstellt. Benutzer müssen die auf HTTP (Hypertext Transfer Protocol) basierenden REST-API-Regeln befolgen, um auf den Webdienst zuzugreifen.

Herkömmliche HTTP-Methoden (wie GET, POST, PUT und DELETE) greifen auf Ressourcen wie Datenobjekte in REST-APIs zu und ändern diese. Diese werden durch URIs (Uniform Resource Identifiers) identifiziert. Sie können die API verwenden, um Daten in verschiedenen Formaten zu übertragen, einschließlich XML und JSON. Mit REST können Sie kleine, schnelle und leicht skalierbare Webdienste erstellen. Es wurde für die Kommunikation mit dem HTTP-Protokoll des World Wide Web entwickelt. Da die REST-API auf Standardprotokollen basiert, kann sie von einer Vielzahl von Clients verwendet werden, darunter Webbrowser, mobile Anwendungen und andere Server.

REST API wird häufig bei der Entwicklung von Web- und mobilen Anwendungen verwendet, da es eine einfache und standardisierte Möglichkeit für Anwendungen bietet, auf Ressourcen auf dem Server zuzugreifen und diese zu ändern.

Schritte zum Erstellen eines Covid19 National Wise Status-Projekts

Mit der REST-API kann man ein COVID-19-Länderstatusprojekt erstellen, indem man diese grundlegenden Schritte befolgt –

Schritt 1 – Recherchieren Sie zuverlässige APIs, die nach Ländern aufgeschlüsselte COVID-19-Daten bereitstellen. In diesem Tutorial verwenden wir den folgenden API-Link: https://covid19api.com/.

Schritt 2 – Sehen Sie sich die API-Dokumentation an, um zu erfahren, wie Sie die Daten und die Parameter zum Filtern der Daten nach Land erhalten.

Schritt 3 – Senden Sie mithilfe der AJAX-Methode eine HTTP-Anfrage an die API und erhalten Sie die Antwortdaten.

Schritt 4 – Um das Frontend des Projekts zu entwickeln (um die Daten benutzerfreundlich darzustellen), haben wir HTML-Tabellen und CSS verwendet, um die Daten visuell besser darzustellen.

Covid19 National Wise Situation Project

Hier werden wir das eigentliche Projekt aufbauen. Es wird in drei Teile unterteilt: den JavaScript-AJAX-Code, der die HTTP-Anfrage ausführt, den HTML-Body, der den Inhalt anzeigt, und den CSS-Stil, der ihn benutzerfreundlich macht. Wir verwenden die jQuery-AJAX-Bibliothek, um den Code für Benutzer einfacher lesbar und verwendbar zu machen.

HTTP-Antworttext

Bevor wir uns mit den Details des eigentlichen HTML-Body-Codes befassen, der den Covid19-Status des Landes darstellt, müssen wir uns die API-Antwort ansehen und ihre Struktur verstehen.

Hier ist ein Teil der API-Antwort, die wir erhalten haben -

{
   "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"
}

In dieser Antwort stellen wir einige Details zu den COVID-19-Ländern bereit, aber der wichtige Teil des Projekts ist der Länderschlüssel. Es enthält eine Reihe von Objekten, die Covid19-Länderdetails für ein bestimmtes Land darstellen. Die Schlüssel des Objekts sind selbsterklärend, beispielsweise enthält „Land“ den Ländernamen. „NewConfirmed“ speichert neu bestätigte Covid19-Fälle. „TotalConfirmed“ speichert die Gesamtzahl der bestätigten Fälle im Land. „NewDeaths“ stellt die Anzahl der jüngsten Todesfälle dar. „TotalDeaths“ bezieht sich auf die Gesamtzahl der Todesfälle im Land, „NewRecovered“ stellt die derzeit genesenen Patienten dar und „TotalRecovered“ stellt die Gesamtzahl der genesenen Patienten dar.

Beispiel

<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>

Dieses Projekt hilft Anfängern, mehr über AJAX, JavaScript, HTML und CSS zu lernen. Es kann auch als schnelle COVID-Statusprüfung für mehrere Landkreise verwendet werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Covid19-Länderstatusprojekt mithilfe der REST-API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!