Advertisements

Selama beberapa minggu terakhir, saya membuat diri saya tetap terlibat dengan Angular. Saya memikirkan sebuah aplikasi untuk menikmati cita rasa kerangka kerja front-end yang menakjubkan ini. Dalam waktu singkat saya mendapat ide untuk mengembangkan Pelacak Kasus COVID -19 menggunakan Rest API online.

Swab Test Jakarta yang nyaman

Faktanya, saya belum menggunakan database apa pun untuk aplikasi ini. Ini murni aplikasi ujung depan. Untuk pertama kalinya, saya menggunakan library yang berbeda seperti Angular Material, Semantic UI, Angular Charts untuk mengembangkan User Interface. Prosesnya sangat menarik untuk sedikitnya, namun saya masih menggores permukaannya.

Seluruh aplikasi mencakup 7 komponen dan 3 layanan. Mari kita lihat sekilas apa itu….

Untuk tujuan navigasi, saya telah menggunakan konsep perutean sudut.
1. Komponen NavBar:

Di sini, saya telah menggunakan bootstrap untuk membuat Bilah Navigasi, yang mencantumkan semua fungsi yang dilakukan aplikasi ini.
2. Komponen Rumah:

Pada frame pertamanya, ditampilkan gambar COVID-19. Di sebelahnya, saya telah menampilkan jumlah total kasus yang Dikonfirmasi, Sembuh dan Meninggal di seluruh dunia, diikuti dengan jumlah kasus di India. Pada catatan yang menarik, semua kasing ini dipamerkan pada kartu yang saya gunakan Semantic UI.

Sekarang… bagaimana dengan membandingkan data di antara berbagai negara bagian? Untuk mendapatkan gambaran sekilas, saya berpikir untuk membuat representasi bergambar dari angka-angka ini dan saya merepresentasikannya sebagai Bagan Pai dan Grafik Batang, secara bergambar, yang menggambarkan hitungan di setiap negara bagian. Tidak, itu tidak cukup … jadi saya menggunakan 3 tombol radio untuk Kasus yang Dikonfirmasi, Dipulihkan dan Meninggal yang merangkum semua kasus yang dikonfirmasi. Semua kasus ini ditampilkan dalam warna yang berbeda, biru untuk kasus Terkonfirmasi, hijau untuk Pulih dan merah untuk Kematian.
3. Komponen WhatIsCovid -19:

Komponen ini dibuat untuk meningkatkan persepsi pengguna tentang apa itu Covid-19. Saya pikir orang lebih suka menonton atau mendengarkan konteks daripada membacanya. Maka saya menyematkan video Youtube yang mendemonstrasikan Pandemi Covid-19 yang resmi diunggah oleh WHO.

Di sebelahnya, beberapa pertanyaan dasar dan yang sering dicari dijawab di panel ekspansi.
4. Komponen Pencegahan:

Beberapa tindakan pencegahan untuk mencegah penyebaran virus corona disebutkan di bagian khusus ini. Selain itu, ia juga memiliki beberapa poster (dirancang oleh WHO) yang dapat diunduh.
5. Komponen State-WiseData:

Sebuah drop-down dengan daftar negara bagian India ditempatkan. Ketika sebuah negara bagian dipilih, jumlah total kasus Dikonfirmasi, Aktif, Pulih dan Meninggal ditampilkan dalam kartu diikuti oleh tabel yang berisi daftar distrik dan kasus masing-masing dalam urutan yang berbeda.
6. Komponen TravelData:

Komponen ini terdiri dari drop-down dengan daftar negara dan memberikan data perjalanan mereka pada setiap pilihan.
7. Komponen Footer:

Footer menyertakan teks –

Tetap Di Rumah…. Tetap Aman….

Tetap sehat…. Tetap waras…

Ini juga mencakup tautan untuk sumber daya Data dan API…

Semoga Anda juga tetap sehat dan bugar di masa pandemi yang berat ini.

Oke !! Ini membawa Anda ke akhir artikel ini … Ada pertanyaan, sebutkan di bagian komentar.

Ayo Tes PCR