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!