Bagaimana untuk membuat projek status negara Covid19 menggunakan API REST?

Sebelum mencipta projek, kami akan membincangkan REST API terlebih dahulu. REST ialah gaya seni bina perisian dan koleksi piawaian yang membantu membuat perkhidmatan dalam talian. Nama penuh Pemindahan Negeri Perwakilan ialah REST. Sementara itu, antara muka pengaturcaraan aplikasi (API) membenarkan komunikasi antara dua atau lebih program komputer. Ia adalah antara muka perisian yang menyediakan perkhidmatan kepada program perisian lain. Pengguna mesti mengikut peraturan REST API berasaskan HTTP (Hypertext Transfer Protocol) untuk mengakses perkhidmatan web.

Kaedah HTTP tradisional (seperti GET, POST, PUT dan DELETE) mengakses dan mengubah suai sumber seperti objek data dalam REST API. Ini dikenal pasti oleh URI (Uniform Resource Identifiers). Anda boleh menggunakan API untuk memindahkan data dalam pelbagai format, termasuk XML dan JSON. Anda boleh menggunakan REST untuk membina perkhidmatan web yang kecil, pantas dan mudah berskala. Ia dibangunkan untuk berkomunikasi dengan protokol HTTP World Wide Web. Oleh kerana ia berdasarkan protokol standard, API REST boleh digunakan oleh pelbagai pelanggan, termasuk penyemak imbas web, aplikasi mudah alih dan pelayan lain.

REST API sering digunakan dalam pembangunan aplikasi web dan mudah alih kerana ia menyediakan cara yang mudah dan standard untuk aplikasi mengakses dan menukar sumber pada pelayan.

Langkah Mencipta Projek Status Bijak Nasional Covid19

Menggunakan REST API, seseorang boleh membina projek status negara COVID-19 dengan mengikuti langkah asas ini -

Langkah 1 - Selidik API yang boleh dipercayai yang menyediakan data COVID-19 yang dipecahkan mengikut negara. Dalam tutorial ini, kami menggunakan pautan API berikut: https://covid19api.com/.

Langkah 2 - Lihat dokumentasi API untuk mengetahui cara mendapatkan data dan parameter untuk menapis data mengikut negara.

Langkah 3 - Menggunakan kaedah AJAX, hantar permintaan HTTP pada API dan dapatkan data respons.

Langkah 4 - Untuk membangunkan bahagian hadapan projek (untuk mempersembahkan data dalam cara yang mesra pengguna), kami menggunakan jadual HTML dan CSS untuk mewakili data dengan lebih baik.

Projek Situasi Bijak Negara Covid19

Di sini kami akan membina projek sebenar. Ia akan dibahagikan kepada tiga bahagian: kod AJAX JavaScript yang melaksanakan permintaan HTTP, badan HTML yang memaparkan kandungan dan penggayaan CSS yang menjadikannya mesra pengguna. Kami menggunakan perpustakaan AJAX jQuery untuk memudahkan kod untuk dibaca dan digunakan oleh pengguna.

Badan tindak balas HTTP

Sebelum kita masuk ke butiran kod badan HTML sebenar yang mewakili status Covid19 negara, kita perlu melihat respons API dan memahami strukturnya.

Berikut ialah sebahagian daripada respons API yang kami terima -

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

Dalam balasan ini, kami memberikan beberapa butiran tentang negara COVID-19, tetapi bahagian penting projek ialah kunci Negara. Ia mengandungi satu set objek yang mewakili butiran negara covid19 untuk negara tertentu. Kekunci untuk objek ini adalah jelas, contohnya "Negara" mengandungi nama negara. "NewConfirmed" menyimpan kes covid19 yang baru disahkan. "TotalConfirmed" menyimpan jumlah kes yang disahkan di negara ini. "NewDeaths" mewakili bilangan kematian baru-baru ini. "TotalDeaths" merujuk kepada jumlah kematian di negara ini, "NewRecovered" mewakili pesakit semasa yang telah pulih, dan "TotalRecovered" mewakili jumlah pesakit yang pulih.

Contoh

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

Projek ini akan membantu pemula mengetahui lebih lanjut tentang AJAX, JavaScript, HTML dan CSS. Ia juga boleh digunakan sebagai semakan status COVID pantas untuk beberapa daerah.

Atas ialah kandungan terperinci Bagaimana untuk membuat projek status negara Covid19 menggunakan API REST?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!