How to create Covid19 country status project using REST API?

Before creating the project, we will first discuss the REST API. REST is a software architectural style and collection of standards that help make online services. The full name of Representational State Transfer is REST. Meanwhile, an application programming interface (API) allows communication between two or more computer programs. It is a software interface that provides services to other software programs. Users must follow HTTP (Hypertext Transfer Protocol)-based REST API rules to access the web service.

Traditional HTTP methods (such as GET, POST, PUT, and DELETE) access and modify resources such as data objects in the REST API. These are identified by URIs (Uniform Resource Identifiers). You can use the API to transfer data in a variety of formats, including XML and JSON. You can use REST to build web services that are small, fast, and easily scalable. It was developed to communicate with the HTTP protocol of the World Wide Web. Because it is based on standard protocols, the REST API can be used by a variety of clients, including web browsers, mobile applications, and other servers.

REST API is often used in web and mobile application development because it provides an easy and standardized way for applications to access and change resources on the server.

Steps to Create a Covid19 National Wise State Project

Using the REST API, one can build a COVID-19 country status project by following these basic steps -

Step 1 - Research reliable APIs that provide COVID-19 data broken down by country. In this tutorial, we use the following API link: https://covid19api.com/.

Step 2 - See the API documentation to learn how to get the data and the parameters to filter the data by country.

Step 3 - Using the AJAX method, send an HTTP request on the API and get the response data.

Step 4 - To develop the front-end of the project (to present the data in a user-friendly way), we used HTML tables and CSS to better visually represent the data.

Covid19 National Wise Situation Project

Here we will build the actual project. It will be divided into three parts: the JavaScript AJAX code that performs the HTTP request, the HTML body that displays the content, and the CSS styling that makes it user-friendly. We use jQuery AJAX library to make the code easier for users to read and use.

HTTP response text

Before we get into the details of the actual HTML body code that represents the country's Covid19 status, we need to look at the API response and understand its structure.

The following is part of the API response we received -

{
   "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 this reply, we provide some details about the COVID-19 countries, but the important part of the project is the "Country" key. It contains a set of objects representing covid19 country details for a specific country. The object's keys are self-explanatory, for example "Country" contains the country name. "NewConfirmed" stores newly confirmed covid19 cases. "TotalConfirmed" stores the total number of confirmed cases in that country. "NewDeaths" represents the number of recent deaths. “TotalDeaths” refers to the total number of deaths in the country, “NewRecovered” represents current recovered patients, and “TotalRecovered” represents the total number of recovered patients.

Example

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

This project will help beginners learn more about AJAX, JavaScript, HTML and CSS. It can also be used as a quick COVID status check for multiple counties.

The above is the detailed content of How to create Covid19 country status project using REST API?. For more information, please follow other related articles on the PHP Chinese website!