Covid19 Tracker

Assalamualaikum Warahmatullahi Wabarokatuh.

Pandemi Covid19 atau lebih kita kenal dengan coronavirus mulai menyebar hampir keseluruh provinsi. Nah, kebutuhan akan informasi terupdate tentang corona ini sangat membludak, banyak orang butuh info terbaru.

Menyadari kebutuhan akan informasi ini, banyak teman teman di sosial media, utamanya grup facebook mencari sumber data nya atau teman teman developer kenal dengan sebutan API atau Application Programming Interfaces.

Nah, pada tutorial ini kita akan mencoba membuat sebuah web app untuk monitoring covid19 coronavirus. Sebagai hasilnya bisa dilihat di https://covid19.coretanit.com/

Persiapan

Dalam proses pembuatan aplikasi ini kita perlu menyiapkan beberapa hal berikut.

  • Koneksi Internet untuk mengakses data source.
  • Browser (Firefox, Chrome, Opera, dan sebagainya)
  • Text Editor (Vim, Sublime Text, VSCode, Atom dan sebagainya)

Sebagai tambahan untuk kepadatan informasi berikut datasource yang bisa dipakai untuk improve

Memulai

Sebelum memulai coding bahasa pemrograman yang akan kita pakai adalah Javascript. Kenapa ? Agar coding yang akan kita buat bisa dipakai oleh orang lain hehe. Jadi diharapkan sudah punya basic bahasa JS.

Berikut Strukdur folder dan file yang akan kita buat.

- covid19-js
    script.js
    index.html

Berikut penjelasan folder dan file diatas dan silahkan didownload beberapa file yang dibutuhkan.

Silahkan buat folder project covid19-js di text editor masing masing, dan silahkan disesuaikan seperti struktur folder dan file diatas (atau bisa disesuaikan)

Membuat File index.html

File index.html merupakan halaman utama yang akan kita iskan sebagai berikut.

<!DOCTYPE html>
<html lang="id">
    <head>
        <meta charset="UTF-8">
        <title>Covid19 Corovirus Monitoring</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./script.js"></script>
    </body>
</html>

Diatas adalah script HTML kita untuk halaman utama, berikut penjelasan dan kegunaan masing masing elemen.

<div id="app"></div>

Elemen dengan #app merupakan elemen utama, dimana setiap hasil render kode akan ditampilkan.

<script src="./js/script.js"></script>

Pada kode diatas tempat kita memanggil setiap script javascript kita, urutan harus sesuai dan script.js harus berada pada bagian terbawah agar tidak terjadi error code.

Saatnya Membuat Script

Tahap selanjutnya adalah silahkan ke file src/script.js dan buka pada text editor, dan pastikan halaman masi kosong.

Pertama kita defenisikan terlebih dahulu base url API kita yaitu di (https://api.kawalcorona.com/)

const apiUrl = "https://api.kawalcorona.com";

Selanjutnya kita defenisikan juga untuk function request data ke API yang telah kita buat diatas.

async function request(url){
    const response = await fetch(url);
    const json = await response.json();
    return await json;
}

Pada function request diatas akan mengembalikan sebuah promise dan jika request berhasil akan mengembalikan data yang akan kita olah nantinya.

Sebagai percobaan kita coba untuk mendapatkan update seputar data dunia tentang covid di URL API utamanya (apiUrl) sebagai percobaan dan akan kita keluarkan di console browser.

Silahkan tambahkan kode berikut

(function(){
    request(apiUrl)
        .then(res => console.log(res))
})();

Untuk melihat hasil silahkan buka folder project dibrowser dan arahkan ke file index.html. Kemudian buka console browser dengan cara klik kanan – pilih inspect element.

Nah, seperti yang kita liat bersama data yang diberikan berupa array dan tentu akan berbeda beda tiap endpoint yang kita tuju, atau bisa juga berupa object.

Setelah mengetahui struktur object, untuk bisa mengambil secara keseluruhan Javascript menyediakan sebuah built in function yang sangat powerful, atau dikenal dengan high-order function. Tidak lain high-order function javascript adalah map dipergunakna untuk mapping atau looping setiap data pada array.

Kembali ke file script.js dan untuk percobaan saja untuk melihat strukt dari data yang akan kita olah silahkan tambahkan baris berikut.

(function(){
    request(apiUrl)
    .then(res => {
        res.map(data => console.log(data))
    })
})();

Silahkan buka kembali console browser kalian, seharusnya akan tampil data berikut ini.

Selanjutnya kita perlu mengetahui secara detail data apa saja yang akan kita tampilkan, jika ditinjau dari data hasil looping yang kita dapatkan dihasilkan object seperti berikut.

{
  "attributes": {
    "OBJECTID": 18,
    "Country_Region": "US",
    "Last_Update": 1586013989000,
    "Lat": 40,
    "Long_": -100,
    "Confirmed": 278942,
    "Deaths": 7174,
    "Recovered": 9920,
    "Active": 0
  }
}

Data diatas merupakan data object, dimana kita membutuhkan key dari object untuk bisa menampilkan data.

Setelah mendapatkan data kita bisa menampilkannya ke browser, tentu setiap orang punya cara masing masing, sebagai contoh saya menampilkan dalam bentuk tabel.

Pertama tambahkan function untuk menampilkan table. Function ini akan otomatis menge-generate table dan tampilannya bisa disesuaikan. Tapi simplenya seperti berikut.

Masih di file script.js silahkan di tambahkan kode berikut tepat sebelum kode yang sudah ada , silahkan di custom.

function generateTable(data){
    let table, tableValue;

    table = document.createElement("table");
    table.setAttribute("border", "1");
    
    const tableCaptionWrapper = table.createCaption();
    tableCaptionWrapper.innerHTML = "Data Covid19 Dunia";

    let tableBody, tableBodyCell;

    data.map((d, index) => {
        tableBody = table.insertRow();
        tableBodyCell = tableBody.insertCell();
        tableBodyCell.innerHTML = (index + 1);

        tableBodyCell = tableBody.insertCell();
        tableBodyCell.innerHTML = d.attributes.Country_Region;

        tableBodyCell = tableBody.insertCell();
        tableBodyCell.innerHTML = d.attributes.Confirmed;

        tableBodyCell = tableBody.insertCell();
        tableBodyCell.innerHTML = d.attributes.Recovered;

        tableBodyCell = tableBody.insertCell();
        tableBodyCell.innerHTML = d.attributes.Deaths;
    });

    const tableHeader = table.createTHead();
    const tableRow = tableHeader.insertRow(0);

    const tableCellTitle = ["No", "Negara", "Positif", "Sembuh", "Meninggal"];
    let tableCell;

    tableCellTitle.map(title => {
        tableCell = tableRow.insertCell();
        tableCell.innerHTML = title;
    });

    return table;
}

Tentu jika disimpan dan dijalankan tidak akan kelihatan perubahan apa apa, perlu kita tambahkan kode berikut masih script.js

(function(){
      const app = document.getElementById("app");
      request(apiUrl)
          .then(res => {
              app.innerHTML = generateTable(res).outerHTML
          })
  })();

app merupakan elemen yang kita dapat dari dom id #app pada kode html kita. Elemen ini lah yang nantinya menjadi tempat kode html kiita dirender.

Silahkan disimpan dan seharusnya hasilnya sebagai berikut.

Pada tutorial ini kita cukup ambil dari satu endpoint API saja silahkan diimprove untuk endpoint lainnya, bisa dicek di https://kawalcorona.com/api.

Sebagai hasil jadi dari tutorial ini bisa di cek di https://covid19.coretanit.com/ dan source codenya di https://github.com/azharisikumbang/covid19-js

Sekian Terima Kasih.

Usefull Links :

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com