Membuat Graphic Chart di Web dengan ChartJS

chartjs

Tutorial ini adalah bagian pertama dari 4 Tutorial. Tutorial lain yang merupakan kelanjutan dari tutorial ini bisa anda baca di link berikut :

  1. Mengenal ChartJS (artikel ini )
  2. Membuat Line Chart dengan ChartJS + PHP (Coming soon…)
  3. Membuat Bar Chart dengan ChartJS + PHP ( Coming soon…)
  4. Membuat Pie Chart dengan ChartJS + PHP (Coming soon ..)

Sekitar 3 tahun yang lalu saya membuat tutorial Membuat grafik Chart dengan Highcart dan PHP yang sampai hari ini tetap menjadi TOP Post di blog ini.  Sayangnya Highcart hanya membolehkan versi freenya untuk membuat aplikasi open source saja dan tidak diperbolehkan membuat aplikasi komersial kecuali membeli lisensinya yang untuk ukuran kantong indonesia mahal banget, bayangkan saja satu developer lisensinya sampai 590 USD atau sekitar 8 Juta dengan Kurs saat ini.

Untuk itulah saya akan membuat panduan baru dengan chartJS Library yang murni Open source berbasis teknologi HTML5 Canvas dengan Lisensi MIT . Lisensi ini membolehkan kita membuat aplikasi Free ataupun Komersial tanpa harus membayar lisensi.

ChartJS punya 6 Fitur utama yaitu :

  1. Mendukung 6 tipe chart yaitu line,bar, pie, donat, polar dan radar Chart
  2. Berbasis HTML5  Canvas sehingga tidak perlu plugin dibrowser
  3. Tidak membutuhkan library lain seperti jQuery . Ukuranya kecil cuma 11kb.
  4. Responsive, Graphic Chart bisa dilihat di smartphone, tablet ataupun desktop Browser.
  5. Modular, Anda bisa mengcustom javascript misalkan hanya untuk barchart saja sehingga ukuran library menjadi sangat kecil yang efeknya akan mempercepat loading halaman.
  6. Interaktif, berupa tooltip yang menampilkan informasi jumlah data di chart.

Dengan 6 kelebihan itu saya yakin Lebih dari cukup untuk kebutuhan pembuatan chart di website/WebApp yang anda buat. Tutorial selanjutnya akan membahas tentang membuat chart yang dikombinasikan dengan PHP dan MySQL. Untuk dokumentasi library ini dan contoh pembuatan chart static (tanpa database dan php) bisa anda lihat di http://www.chartjs.org/docs/.

Teknologi dibalik WhatsApp berbasis Web

Artikel ini akan membahas teknologi dibalik WhatsApp berbasis Web yang merupakan layanan baru dari WhatsApp. Jika anda ingin tahu cara memakai whatsapp Berbasis web, silahkan baca artikelnya disini.  WhatsApp berbasis web menggunakan teknologi canggih dan sebagian berupa komponen Open source atau standar terbuka sehingga kita seharusnya juga bisa membuat aplikasi yang mirip baik dari segi tampilan ataupun fungsionalitasnya.

Tampilan WhatsApp berbasis Web
Tampilan WhatsApp berbasis Web

 

Teknologi yang saya bahas hanya teknologi di sisi Front End yang kebanyakan adalah javascript Framework dan HTML. Teknologi tersebut adalah sbb:

  1. HTML5
  2. ModernizerJS
  3. Material Design Thema
  4. VelocityJS
  5. UndersoreJS
  6. BlueBirdJS
  7. MomentJS
  8. ReactJS

 

HTML5

WhatsApp menggunkan 2 Fitur HTML yang paling baru yaitu akses Hardware. WhatsApp Web ini mampu mengambil gambar dari camera Laptop/PC dan mengirimkannya keteman chat anda. Selain itu, Aplikasi Web ini mampu merekam suara dan mengirimkan ke teman chating. Semua itu dlakukan tanpa Plugin semacam Flash atau Java. Jika anda ingin membuat aplikasi web yang mendukung akses kamera silahkanbaca tutorialnya disini . Bagaimana jika browser tidak mendukung HTML5? cara kedua yaitu menggunakan Fallback. Fallback adalah teknik untuk mendeteksi apakah browser bisa mengakses kamera secara langsung, jika tidak bisa, maka akses dengan Plugin Flash. Anda bisa menggunakan library  WebCamJS.   Untuk tutorial mengakses microphone dan merekam suara langsung dari browser, tutorial bisa dibaca disini.

HTML5 benar benar dipakai secara Optimal oleh Whatsapp agar aplikasinya ringan serta bisa diakses disembarang browser yang mendukung hTML5. Walaupun demikian, saat ini browser yang paling Optimal dalah Google Chrome.  Satu lagi fitur yang ada adalah Desktop Notifikasi. Sejauh ini, Hanya Google Chrome yang mengimplementasikan fitur ini. Anda bisa mempelajari tentang notifikasi ini di http://www.html5rocks.com/en/tutorials/notifications/quick/

Modernizer

Dalam point HTML5, Whatsapp menyarankan menggunakan Chrome. Pertanyaan selanjutnya bagaimana Whatsapp mendeteksi Bahwa browser mendukung HTML5 Audio dan akses ke kamera langsung? WhatsApp tidak membuat code untuk mendeteksinya sendiri, namun menggunakan Library Modernizer. Library inilah yang akan mendeteksi apakah sebuah browser mendukung fitur HTML5 atau tidak. Yang perlu di ingat disini, semua browser modern sudah mendukung HTML5, permasalahannya implementasi fitur HTML5 dimasing masing browser berbeda. Disinilah manfaat Modernizer baru terasa. Anda juga bisa menerapkan di aplikasi yang sedang anda buat dengan mempelajarinya disini.

Material Design

Material design adalah konsep design yang di populerkan google dan dipakai sebagai dasar desain di Androdi Lolilop dan secara bertahap diterapkan disemua aplikasi Web punya Google. Jika anda pernah memakai GMail di Android atau memakai Google Inbox, maka anda sudah memakai material design. Saya sendiri tidak begitu tahu library yang dipakai oleh pihak whatsApp, namun anda juga bisa membuat aplikasi web dengan tampilan material design menggunakan CSS framework yang sifatnya open source. Dua CSS framework yang bisa anda pakai adalah sbb:

VelocityJS

VelocityJS adalah library Javascript yang dikhususkan untuk animasi tampilan. Pada intinya, VelocityJS adalah jQuerynya Animasi Web. Silahkan akses sendiri tutorialnya disini.

UnderscoreJS

UndescoreJS adalah library javascript yang mempermudah penulisan kode javascript. Underschore mempunyai lebih dari 100 fungsi yang akan mempermudah hidup anda dalam menulis javascript. Silahkan masuk kewebsitenya untuk mempeljari lebih lanjut di http://underscorejs.org/.

BluebirdJS

Bluebird disini bukan perusahaan taksiya :), bluebird disini adalah library javascript yang memudahkan proses penulisan kode, sama seperti VelocityJS dan underscoreJS. walaupn sama sama library penekannya berbeda, velocity untuk animasi, Underscore untuk fungsi helper sedangkan bluebird untuk akses kesistem, misalkan membaca file JSON. Bluebird banyak dipakai untuk mengurangi error di javascript dengan memperkuat kode dibagian “try…catch…”.

MomentJS

Saat anda chating, anda kadang melihat history chat dengan tulisan “1 jam yang lalu”,  “5 menit yang lalu” atau “3 hari yang lalu”. Konsep waktu relatif terhadap waktu saat ini dipakai disebagian besar aplikasi chat serta timeline jejaring social. Whatsapp juga tidak jauh berbeda, untuk memudahkan menkonersi waktu absolute seperti (2015-02-25 10:10:10) menjadi tulisan “3 hari yang lalu” cukup gunakan momentJS.

ReactJS

Pernah ga sih kita berpikir bagaimana facebook menangani halaman webnya secara realtime tanpa perlu reload website. Contohnya saat anda komentar, melike, menambah teman, membaca pesan dan aktivitas dilain, facebook jarang melakukan refresh Website. Kok bisa ya? Facebook menggunakan Library React untuk membangun interfacenya. RactJS adalah libary javascript yang dipakai dan khususkan untuk mebuat user interface yang responsive saat diakses user tanpa sering sering reload. React ini fungsinya sama dengan AngularJS.

 

Sebenarnya ada satu lagi teknologi yang dipakai whatsapp. Teknologi itu adalah WebFont. Whatsapp memanfaatkan Google Webfont  agar tampilan teksnya rapih dan terlihat lebih modern. Jika kita perhatikan, ternyata kebanyakan teknologi yang dipakai di WhatsApp adalah teknologi Opensource dan javascript library. Artinya, bagi kamu kamu programer Web yang hanya ngandalin PHP dan jQuery, sudah saatnye menambah skill baru dengan teknologi diatas. Kalau cuma PHP dan jQuery, siap siap saja bentar lagi tergusur! Teknologi memang tidak pernah berhenti, maka tugas kita sebagai programer yang terus menerus belajar sehingga aplikasi yang kita bangun bisa terus susuai dengan perkembangan jaman.

InsyaAllah, tutorial masing masing library diatas akan saya buatkan tutorialnya secara bertahap. Selamat belajar, semoga bermanfaat!