Website yang interaktif memiliki keunggulan tersendiri. Biasanya nilai interaktif ini berhubungan dengan pembelajaran, animasi, grafik atau chart. Website seperti ini umumnya dibangun dengan flash. Namun, tampilan interaktif tersebut juga mempunyai kekurangan. Maka yang penting, browser harus mendukung flash.
Teknologi ini memakan banyak memori. Selain itu, kadang flash juga sering membuat browser crash. Real-time chart di JavaScript juga penting Anda ketahui demi membuat website lebih interaktif. Memang sih, membuat chart dengan data real-time mungkin cukup sulit. Namun, Anda bisa melakukannya dengan menerapkan teknik-teknik tertentu di JavaScript. Begini langkahnya!
Buat aplikasi
Pertama-tama agar Anda tak kebingungan dalam menyusun folder, buat strukturnya agar lebih mudah. Struktur folder dari aplikasi Anda akan terlihat seperti ini :
- app.js, menjadi main file dan yang menyimpan semua kode server side
- folder public, menjadi tempat kode template client side disimpan dan diakses publik.
- package.json, tempat menyimpan daftar package yang Anda butuhkan (npm)
- node_modules, folder tempat package terinstall
Install dependency
Setelah itu, Anda perlu menginstall dependency. Bisa dilihat, Anda membutuhkan dependencies sebagai berikut :
- Express sebagai framework
- Mongoose (mongodb wrapper) sebagai object modelling, penggunaannya seperti ORM. Ini memudahkan dalam query.
- Body-parser, sebagai middleware untuk Express, berguna sebagai parser data dari HTTP Body. Library ini akan mengubah data ke javascript object, agar dapat kita panggil dalam aplikasi.
- Socket.io, wrapper websocket API untuk penggunaan websocket yang lebih sederhana
Baiklah, silakan jalankan npm install. Jika berhasil, folder node_modules beserta isinya akan terbentuk.
Inisialisasi
Selanjutnya, buatlah file app.js. Silakan melakukan inisialisasi dari semua library seperti berikut ini :
Pada baris 2-7 tempatkan library yang sudah diunduh dalam variabel. Pada baris ke-5 Anda akan assign framework express. Selanjutnya di baris ke-6 terlihat proses define dependency HTTP server.
Masuk ke bagian config, pada baris ke-10 jalankan method app.use dari Express. Selanjutnya, masukkan function callback dari library body-parser. Hal ini berfungsi memerintahkan Express untuk jalankan parsing body ketika route dipanggil. Kemudian pada baris ke-11 perintahkan Express untuk request socket io, sebelum melanjutkan program. Langkah ini berguna agar library socket io bisa Andagunakan dalam HTTP Route di Express.
Nah, pada baris ke-17 Anda menjumpai perintah pendefinisian tempat folder file static berada. Gunakan express.static yang merupakan fungsi built-in middleware di Express.
Database
Pada program ini, Anda hanya butuh collection sederhana. Berikut ini kode terusan dari bagian "Inisialisasi" sebelumnya.
Untuk database, gunakan nama "realtime_chart". Sebenarnya, Anda bebas menggunakan nama lain. Pada baris ke-4, lakukandefine collection berisi hanya satu field, yaitu "name" berjenis "string". Kemudian pada baris ke-5 masukkan kode untuk assign mongoose model dengan skema yang sudah Anda buat ke dalam variabel Vote. Sebagai catatan, pada kode berikutnya, operasi database akan menggunakan model "Vote".
Definisikan route, query, dan broadcast
Oke, masih terusan kode sebelumnya. Sekarang masukkan kode berikut ini. Pada baris ke-2 lakukan define homepage. Maksud dari kodenya, ketika url yang diakses adalah (/), jalankan res.sendfile ke file index.html. Kode tersebut akan parsing file template index.html yang terletak pada folder public (Anda akan membuat file tersebut pada bagian selanjutnya).
Pada baris ke-7, lakukan define rute dengan segment vote. Ketika url (/vote) diakses maka jalankan perintah pada callback function. Di dalam fungsi tersebut pada baris ke-8, ambil data http body bernama "name" dan masukkan dalam variabel field.
Nah pada baris ke-10 hingga 14 kita silakan buat document/object baru, menggunakan model "Vote". Kemudian pada baris ke-16 sampai 30, ada kode untuk mengambil data total dari voting. Gunakan method "aggregate", untuk menghitung total document berdasarkan field tertentu.
Coba perhatikan baris ke-26. Di sana Anda menjalankan perintah socket emit (broadcast/push) data ke semua client yang terhubung dengan room "vote". Room dalam konsep websocket berguna untuk mengkategorisasikan client yang terhubung dengan server.
Terakhir, pada baris ke-33 sampai 37, Anda akan melihat kode sederhana untuk menampilkan data-data voting dalam bentuk JSON ketika url (/data) dipanggil. Ini digunakan untuk kepentingan pengecekan data saja.
Tambahkan event socket IO
Ini merupakan bagian akhir dari kode di sisi server. Silakan tambahkan kode berikut ini : Pada baris ke-5 hingga 21, tambahkan event handler socket io. Ketika ada client terhubung, jalankan kode pengambilan data total voting. Kemudian, emit/broadcast datanya ke semua client. Data tersebut akan digunakan untuk mengisi chart ketika pertama kali load. Selanjutnya pada baris ke-24 dan25, jalankan server pada port 3000 dan tampilkan log-nya.
Buat halaman statis chart dengan integrasi socket IO
Mari lanjutkan pada program sisi client. Buatlah file index.html, kemudian simpan file tersebut di dalam folder "public". Isi dengan kode chart sederhana berikut ini : Dalam membuat chart di ChartJs Anda membutuhkan elemen canvas. Elemen canvas tersebut juga memerlukan atribut id. Selanjutnya, define dalam library ChartJs. Dalam proyek ini Anda sudah membuatnya pada baris ke-14.
Nah dalam sisi client, Anda juga butuh beberapa library seperti Jquery, SocketIO dan ChartJs. Anda bisa melihatnya pada baris ke-18 hingga 20. Ambil library tersebut langsung dari CDN.
Pada baris ke-44 sampai 61, lakukan inisialisasi sebuah chart dengan membuat object baru dari library ChartJs. Variabel pada baris ke-44 adalah config berisi Javascript object untuk menentukan presentasi data yang ditampilkan pada chart. Terlihat data tersebut kosong. Data kosong tersebut baru akan Anda isi dalam event handler socket io on "vote" pada baris ke-33.
Coba lihat baris ke-40. Itu adalah kode untuk mengupdate data chart. Kode ini akan dieksekusi jika ada data baru. Client akan menerima data baru pada saat server emit/broadcast. Lihatlah bariske-29. Ini adalah kode event handler dari socket io yang berfungsi mendengarkan perubahan yang terjadi.
Anda masih merasa bingung? Anda bisa mencobanya perlahan, sembari membaca ulang mengenai cara membuat real time chart di Javascript, atau berkonsultasi dengan ahli IT bidang Javascript.
Sumber:
hackernoon.com
codepolitan.com
candra.web.id
