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!

 

 

Download Free HTML5 Bootstrap Theme Template

Mendesain website di era responsive memang gampang gampang susah. Desain web sekarang sangat berbeda dengan era 5 tahun yang lalu. Dulu, anda cukup belajar CSS Layout, Table Layout atau Photosop, maka desain web sudah dikatakan “KEREN”. Untuk website pemerintah apalagi, sudah baku dengan konsep 3 kolom dengan rincian, Header, menu atas, widget kiri, content ditengah, dan widget kanan serta footer dengan tulis Copyright by Foo Design. Betul ga?

Sekarang eranya responsive. Untuk mengakses website tidak melulu harus pake PC atau Laptop, namun juga merambah ke Tablet serta smartphone. Agar website tampil cantik disetiap device bukanlah perkara gampang, maka dari itu munculah Framework CSS berbasis Grid seperti Bootstrap, UIKit, Grid960, Foundation Framework dan sebagainya. Dalam artikel ini saya fokus pada Thema Bootstrap saja mengingat sepertinya nih (setahu saya) bootstrap sudah menjadi standar de facto untuk Thema website yang responsive. Thema ini ada yang dijual dan ada juga yang free. Dilihat dari sisi penggunanya, Thema bootstrap dibagi lagi menjadi thema HTML, Thema Wordpess dan Thema Joomla.

Pemilik website wordpress atau joomla cukup install thema dan Apply thema maka tampilan langsung berubah responsive dengan perubahan total. Untuk Thema HTML sendiri cocok bagi para programer Web yang malas mempekerjakan desainer atau mau hemat anggaran. Cara termudah tentunya dnegan mencari Thema Bootstrap yang free, terutama lisensi Apache atau MIT Licence yang bisa digunakan untuk proyek komersial. Langsung ke inti, berikut ini adalah website yang menyediakan thema Gratis berbasis Bootstrap yang bisa anda pakai.

shapebootstrap.net

Thema bootstrap disini rata rata sudah menggunakan versi 3.x. Thema juga tersedia untuk Joomla dan WordPress dengan jumlah terbatas.Kategori thema disini juga cukup lengkap, dari One page Website, Portofolio, Bisnis template, Admin Template, Landing template, Coming soondan sebagainya. Anda cukup preview dan DOWNLOAD jika merasa cocok.

shapebootsrap

 

BootstrapPage.com

Bootstrappage.com adalah website yang sudah cukup lama memberikan thema berbasis bootstrap secara gratis. Candralab eCommerce yang saya open sourcekan pun menggunakan salah satu thema dari BootstrapPage. Thema gratis disini tidak terlalu banyak, namun cukup bagus untuk membuat website Company profil atau eCommerce berbasis bootstrap. Yang perlu anda perhatikan adalah thema gratis disini ada yang menggunakan bootstrap3 dan masih ada yang menggunakan bootstrap2.x.

Website bootstrappage.com
Website bootstrappage.com

BootstrapPaste.com

Jika saya lihat websitenya, sepertinya desainer bootstrap ini dari indonesia. Nama nama themanya seperti Dewi, Resi,Hidayah dan sebagainya

herutempalte

HTML5 Up

Sebenarnya, website ini tidak semua menggunakan Bootstrap, namun semua thema disini menggunakan Teknologi HTML5 Responsive desain. berbeda dengan website lain, Thema disini paling banyak digunakan untuk One page Website  atau profil dengan thema yang mirip mirip, perbedaannya ada pada header adn kombinasi warna. Website ini juga menawarkan fitur untuk mempreview hasil tampilan web di device Tablet atau smartphone.

html5up
HTML5 Up menyediakan puluhan thema HTML5 Responive yang bisa anda pakai secara gratis

Bootswatch.com

Bootswatch lebih tepatnya menyediakan Visual Style berbasis Bootstrap. Jika anda belajar menggunakan bootstrap, maka anda dapati rata rata thema Hitam putih dengan warna icon dan button default. Bootswatch menyediakan Visual Style (Swatch) Untuk Bootstrap3  ada sekitar 17 Visual style yang bisa anda pakai secara gratis. Secara pribadi, saya lebih sering menggunakan Bootswatch untuk thema Admin . Jika anda ingin mendapatkan Visual style versi 2.x juga ada. Untuk versi bootstrap versi 2, visual style bisa didownload si http://bootswatch.com/2/.

Bootswatch menyediakan visual style untuk website berbasis bootstrap
Bootswatch menyediakan visual style untuk website berbasis bootstrap

BootstrapZero

Website ini lebih tepat disebut Bootsrap Hero karena thema gratis yagn disediakannya bukan hanya keren tapi profesional dan sekelas Thema premum. Pokoknya Website Best of the best dari free thema Bootstrap ya BootstrapZero ini. Disini juga ada puluhan thema Front End yang siap pakai. Maknyus dan Top markotop deh pokoknya

bootstrapzero

 

And One More thing!

Setelah anda mendapat hal paling top markotop dalam masalah bootstrap thema, pastinya dong anda kepikiran gimana ya cara cepat download semua resource gratis dengan puluhan thema bootstrap diatas? ANDA BISA MENDAPATKAN Sebagian besar thema diatas beserta component bootstrap lain dalam sekali DOWNLOAD  cukup masuk ke http://www.bootbundle.com, Lalu KLIK DOWNLOAD.  Bagaimana? Super duper keren kan?