Membuat Dashboard COVID-19 dengan Django 3

Membuat simple live COVID-19 dashboard dengan menggunakan Django

Photo by Luke Chesser on Unsplash

Sudah lama tidak menulis di Medium. Kali ini saya ingin berbagi tentang membuat dashboard (simpel dashboard) yang memuat data Covid-19 khusus yang ada di Indonesia. Sesuai dengan judul artikel, disini saya akan menggunakan Python dengan framework web yang sudah dikenal banyak orang yaitu Django.

Setup

Sebelum kita mulai membuat dashboard, pastikan kalian sudah menginstall Python dan PIP. Jika ingin melihat cara menginstallnya bisa kunjungi link berikut.

Setelah berhasil menginstall, disini saya membuat virtual environment Python dengan menggunakan perintah python3 -m venv env

Aktifkan virtual env kamu dengan perintah:

source env/bin/activate

Setelah berhasil masuk kedalam virtual env, kita perlu menginstall beberapa dependency yang akan kita gunakan dalam membuat dashboard ini. Kita perlu menginstall Django dan requests.

pip install Django, requests

Membuat Aplikasi Django

Setelah kita berhasil menginstall django dan requests kedalam virtual env, langkah selanjutnya adalah membuat project atau aplikasi dengan django.

mkdir covid_dashboard && cd covid_dashboard
django-admin startproject config .
django-admin startapp core
python manage.py migrate

Command diatas kita telah berhasil membuat projek django dan membuat app bernama core untuk aplikasi dashboard kita. Setelah berhasil membuat projek dan app, kita harus melakukan first migrate pada projek Django kita.

Sebelum menjalankan aplikasi, kita tambahkan nama inisial core kedalam file settings.py

INSTALLED_APPS = [                           
  ...                          
  'core'                       
]

Silahkan jalankan aplikasi django untuk mengecek apakah sudah berhasil terbuild: python manage.py runserver

API

Dalam pembuatan dashboard COVID-19 ini, kita akan menggunakan data live dari API yang akan diambil dari situs RAPID API. RAPID API merupakan situs marketplace untuk API, dimana disana terdapat berbagai macam API yang memuat berbagai macam data. API yang disajikan disana ada yang berbayar dan gratis. Saya akan menggunakan API COVID yang berasal dari link berikut.

API COVID-19, Rapidapi.com

Silahkan mendaftar akun pada situs tersebut agar bisa mendapat token key untuk mengakses API COVID yang akan kita gunakan.

Lets Set-Up Django Project

Setting API sudah, Project django sudah dibuat. Sekarang kita akan memulai membuat halaman index yang langsung memuat konten dashboard kita. Pada pembuatan dashboard ini saya menggunakan sebuah static template dari tabler. Template ini berbasis open-source dibawah lisesnsi MIT, dimana bisa kita gunakan secara free. Berikut adalah hasil akhir dari dashbord yang akan kita buat.

Hasil akhir dashboard

Keren bukan? hehe

Pertama, kita akan setting path static dan memasukan file-file static yang akan digunakan. pastikan kamu sudah menambahkan initial static di settings.py

STATIC_URL = '/static/'          
                                                                                 STATICFILES_DIRS = 
[                          
   os.path.join(BASE_DIR, 'static')                       
]

Selain itu, kita perlu menambahkan inisial folder templates sebagai penampungan file html di aplikasi kita dengan cara menambahkan nama folder templates di settings.py

TEMPLATES = [{                              
  ...                
  'DIRS': ['templates'],
  ...
}]

Setelah set-up file setting.py selesai, kita perlu import beberapa file static seperti file css dan js dari template yang digunakan. Pada tutorial kali ini saya menggunakan sebuah template dashboard dari tabler.io. Template dashboard buatan tabler ini bersifat free and open-source dibawah lisensi MIT. Dimana kita bisa bebas menggunakannya, hehe. Silahkan cari beberapa file static mulai dari tabler.css dan tabler.js di repositori diatas.

Sebelum kita masuk ke tahap selanjutnya dibagian pengkodean, kita coba membuat file base.html terlebih dahulu untuk memudahkan kita memasukan konten di halaman dashboard kita nanti.

Membuat Views Dashboard

Kita sudah menyelesaikan persiapan untuk membuat aplikasi dashboard, mulai dari installasi django, set-up direktori templates dan file static. Langkah pertama kita akan membuat fungsi untuk menarik data dan menyimpannya dihalaman utama.

Disini saya mengimport beberapa modules yang akan digunakan dalam membuat dashboard ini. Termasuk menginport SECRET_KEY dari RapidAPI yang sudah disimpan di file settings.py sebelumnya.

Pada tampilan dashboard diatas, saya akan menarik data dari API sampai 7 hari sebelumnya. Oleh karena itu kita perlu membuat fungsi date-range yang akan memudahkan kita untuk mengatur tanggal penarikan data dari API.

Selanjutnya tinggal membuat fungsi penarikan dari API dan menampilkannya di halaman dashboard. Berikut code nya.

Cukup panjang ya.

Disini kita melakukan request GET ke URL API dengan menggunakan library requests yang sebelumnya sudah diinstall. Lalu ada beberapa variabel seperti total, active_case, new_cases, dll untuk penampungan value yang kita ingin tampilkan dihalaman paling atas Dashboard.

Selain itu pada potongan kode ini:

Saya coba untuk loop berdasarkan isi Array yang ada di variabel dates untuk memasukan nya ke masing-masing index Array yang saya buat. Karena disini saya ingin menarik data dengan jangka waktu 7 hari kebelakang. Maka loop ini akan berjalan sebanyak 7 kali putaran.

Lalu pada potongan kode terakhir

context = {                               
   'response':datatables,                               
   'total':total,                                
   'new_cases':new_cases,                                      
   'active_cases':active_cases,                               
   'recovered_cases':recovered_cases,                                 
   'deaths':deaths,                               
   'new_deaths':new_deaths,                                 
   'chart_new_case': chart_new_cases,                               
   'chart_recovered_cases': chart_recovered_cases,                               
   'chart_death_cases': chart_death_cases,                               
   'chart_date_range': dates,                                                       
   'chart_1m_cases' : chart_1m_cases,                               
   'chart_1m_deaths' : chart_1m_deaths,                                
   'chart_1m_tests' : chart_1m_tests,                                                        
   'total_populations': total_populations,                               
   'total_tests': total_tests                           
}

Tentu kita perlu menampung hasil dari tarikan data kita dan menampilkannya di halaman web dashboard, variabel context disini menampung berbagai macam inisial dict yang akan kita panggil di HTML selanjutnya.

Membuat Halaman (Template) Dashboard

Sekarang masuk ke tahap terakhir yaitu templating, setelah views sudah terbuat sekarang hanya perlu memanggil variabel-variabel yang sudah kita set di views tadi. Berikut tampilan html nya.

Akhir Kata

Yaps, sudah sampai ditahap akhir yaitu templating. Semua tahap pembuatan dashboard covid-19 kali ini saya rasa cukup. Untuk hasil full-code nya saya sudah siapkan repository nya di github. Silahkan teman-teman cek dan pelajari kembali.

Live demo nya tersedia di heroku.

Terima kasih sudah membaca artikel ini sampai habis ya.

rdmaulana/covid19-dashboard-idn