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!

 

 

Produk Gagal Google

Google adalah salahsatu perusahaan IT paling sukses di dunia. Bersama dengan Microsoft dan Apple, perusahaan ini sukses menelurkan produk produk unggulan, mudah dipakai dan sebagian besarnya gratis. Walapun demikian, bukan berarti semua layanan dan produk Google itu sukses loh. Ada puluhan produk dan layanan Google yang gagal dipasar. Sebelum lebih jauh saya infokan sedikit bahwa tulisan seperti ini sudah banyak di bahas oleh situs berita IT dan Blog lain, namun saya ingin melihat dari sudut pandang yang berbeda. Jika di artikel lain hanya menyebutkan nama produk dan deskripsi produk, saya akan menjelaskan penyebab kegagalan produk tersebut dan bagaimana Google menangani produk gagal tersebut menjadi Produk baru yang lebih sukses.

Agar mudah dicerna, produk gagal dari Google ini akan saya bagi menjadi 3 bagian yaitu produk Hardware, produk software dan Service. Produk hardware adalah produk yang punya bentuk fisik dan dijual ke konsumen.Produk software adalah produk yang di DOWNLOAD oleh user lalu software tersebut di install di Windows, Linux atau Mac, sedangkan Service adalah layanan Google yang bisa diakses lewat Website ataupun aplikasi Mobile.

Hardware

Google TV

Google TV ingin menggabungkan Internet dan Siaran TV dalam satu layar. Untuk menonton Video streaming dari Youtube memang keren,  Permasalahan kenapa Google TV gagal adalah remote controlnya terlalu rumit dan tidak user friendly. Selain itu menampilkan aplikasi android di TV tidaklah senyaman di tablet. Pernah membayangkan membuka Twitter di TV? Yup, ide yang semua keren berangsur angsur terliat konyol. Mengapa? karena dari sisi orang awam, mereka tidak punya alasan ngapain saya harus membuka situs berita atau Twitter saat sedang menonton TV di TV?

Remote Google TV
Remote Google TV

Google menyadari kesalah ini. Maka untuk selanjutnya, branding Google TV diganti dengan Android TV. Perbedaan mendasar dari dua platform ini, Google TV menggunakan android versi 4 kebawah, sementara Android TV sudah menggunakan versi 5 lolipop. Perbedaan lain adalah dari sisi kontrol. Google TV menggunakan Remote dengan puluhan tombol, sementara Android TV cukup menggunakan suara. Perbedaan ketiga dan yang paling mendasar selanjutnya adalah Android TV hanya fokus kedalam aplikasi hiburan seperti Game, Streaming video dan layanan TV berbayar serta terintegrasi dengan layanan Google play Service (Play Games, Play Music, Play Movie dll).

Karena website ini membahas pemrograman android, maka untuk selanjutnya perbedaan dari sisi SDK, untuk membuat aplikasi android TV, anda cukup menggunkaan Android Studio tanpa menggunakan tambahan SDK lain. Walaupun Google TV gagal, namun google justru menjadikan kegagalan itu sebagai pondasi dalam merilis produk selanjutya, semoga aja Android TV sukses!

 

Google Nexus Q

Nexus Q
Nexus Q

Nexus Q adalah produk yang fungsinya cuma satu Produk ini hanya bertugas mengirim data streaming dari Google Play Movie ke layar Televisi. bagaimana caranya? Pemakai android harus menginstall program untuk streaming, lalu terkoneksi ke Nexus Q kemudian, video yang akan di putra tinggal di CAST ke layar TV lewat Nexus Q ini. Produk ini gagal karena banyak hal. Yang pertama masalah harga. Harga Nexus Q sekitar 300 USD dan fungsinya cuma satu, siapa yang mau beli? Bentuknya besar dan tidak elegan. bentuk Nexus Q mirip bola bowling dan terasa aneh melihat ada bola bowling di meja.

Bagaimana Google menyikapi hal ini? Google menstop brand Nexus Q dan mendesain ulang tool streaming dengan tampilan ringkas dan harga murah. Produk ini bernama Chromecast. Fungsinya mirip dengan Nexus Q, namun bisa streaming sembarang gambar dan video dari smartphone Android. Harganya cuma 35USD, hampir sepersepuluh harga Nexus Q, udah jelas produk ini sukses.

 

Software

Selain produk hardware, Google juga punya bebdeh segala yang diinstall di PC user.

Google deskbar dan Google desktop

Google deskbar adalah fitur pencarian google lewat deskbar (taskbar di windows). Artinya kita cukup ketik pencarian tanpa membuka browser. Karena fitur ini terlalu sederhana, Google menyempurnakannya menjadi Google Desktop. Google desktop mempunyai fitur mencari file di komputer user serta menampilkan Widget di desktop. Produk ini hidup diera 2005-2010, artinya produk ini tidak benar benar gagal. Pada masa itu desktop search dan widget memang sedang ramai ramainya. Pemakai Windows Vista dan 7 yang suka menampilkan calendar atau jam dinding didesktop, dan Google ramai ramai membuat aplikasi seperti ini. Pada masa itu, memang sedang ramai ada Yahoo Widget, Windows Widget, Mac OS X widget serta KDE widget. Intinya program kecil yang nongol dilayar, biasanya menampilkan informasi berita, waktu,cuaca atau galeri foto.

Sejauh ini tidak ada pengganti untuk produk ini. Program google desktop dan deskbar di kritik karena masalah privasi serta BOROS memori. Makanya bagi yang suka dengan berbagai widget di layar, mulai sekarang matikan saja, sayang komputernya menjadi lambat. Program widget apapun didesktop yang fungsinya mempercantik tampilan pasti makan memori. Alasan utama google saya tidak tahu, yang jelas produk ini sudah dihentikan.

 

Google Web accelerator

Produk ini berfungsi sebagai cache proxy server di komputer user. Seperti namanya saat user mengakses Website, program ini menyimpan cachenya sehingga saat user membuka lagi, maka loading halaman terasa lebih cepat. Produk ini ternyata banyak menimbulkan masalah, misalkan seringnya Youtube error saat memutar video. Alasan lain adalah masalah privasi user karena setiap website yang diakses oleh user akan terekam oleh Google. Kalau begitu mengapa software ini pernah dirilis? produk ini beredar tahun 2005, 10 tahun yang lalu, waktu itu bandwidth mahal bro. jadi jelas saja produk ini banyak manfaatnya. Sekarang jaman bandwidth murah, makanya google tidak perlu lagi pake web Accelerator. Solusi agar koneksi tidak lambat sudah teratasi dengan membaiknya infrastuktur jaringan internet dunia dan adanya layanan CDN yang akan mempercepat loading website tanpa campur tangan user.

 

Google Video Player

Google video player
Google video player

Dulu, sebelum youtube sepopuler sekarang, Google punya layanan bernama Google Video. Google video ini intinya sama dengan youtube. Saat itu google merasa membuat aplikasi desktop yang bisa memutar video langsung secara streaming. Alasan utama adanya video player (saat itu tahun 2005) adalah belum ada standar baku dalam format video berbasis web. Waktu itu streaming adalah barang mahal. Alasan lain adalah saat itu Google video ini adalah saingan dari youtube. Waktu itu youtube belum dibeli Google. Perusahan raksasa ini sadar bahwa Youtube lebih terkenal dan lebih potensial, maka pada akhirnya mereka membeli Youtube dan menghentikan produk mereka sendiri.

Google Cloud Connect

Produk ini adalah plugin Microsoft Office yang fungsinya menyimpan dokumen Microsoft word yang sedang di edit ke Google Drive. Produk ini sebenarnya kurang tepat kalau disebut gagal karena tujuan utama dari Cloud Connect adalah Cara Google mengenalkan Google docs secara tidak langsung. Produk ini tidak dilanjutkan karena fungsinya sudah tergantikan dengan adanya Google Drive for desktop.

Google Talk

Google talk adalah usaha Google masuk kedalam pasar Instant Messagging (pesan instant). Kala itu, Pesan instant di dominasi oleh Yahoo Messenger, ICQ , AOL serta MSN Messenger. Perbedaan mendasar dari Google talk adalah protokolnya terbuka. Artinya aplikasi pesan instant yang lain bisa terhubung ke Google talk sehingga era pesan sesama “jenis” sudah usai. Permasalahannya, Google tidak mendapat untung dari produk ini. Protokol Google Talk juga tidak memungkinan melakukan pesan suara ataupun video padahal pada saat yang sama, Apple success dengan FaceTimenya dan Microsoft sukses dengan Skype.  Akhirnya Google membuat protokol baru agar bisa mendukung layanan suara atau video, produk ini sekarang bernama Google Hangout.

Service

Setelah kita tahu kegagalan Google di Hardware dan software, mari kita lihat kegagalan di layanan. Layanan disini adalah layanan berbasis web yang diakses lewat browser. Kebanyakan layanan ini merupakan jejaring social yang gagal merebut pasar. Pendapat saya pribadi, mungkin memang google tidak ditakdirkan menguasai pasar jejaring social :).

Jaiku

Jaiku adalah layanan microblogging seperti Twitter. Google membeli jaiku namun tidak menjadikan layanan ini dipakai oleh end user. Google memanfaatkannya di AppEngine bagi para programer. Ternyata layanan ini kurang sukses, dan produk Jaiku ini di open sourcekan.

Google Dodgeball

Google dodgeball adalah layanan chekin lokasi lewat aplikasi mobile. Pada saat itu belum ada yang namanya foursquare. Dogleball juga kurang beruntung dan layanan ini dimatikan, sementara itu programmernya justru keluar dari Google dan membuat layanan sendiri bernama foursquare.com. Nah loh, ternyata foursquare.com orang google juga yang buat. Google mengganti layanan Dodgeball dengan Google laitude dan sekarang latitude di integrasikan dengan Google+.

Google Buzz

Google Buzz adalah layanan yang disisipkan ke GMail sehingga setiap orang yang punya akun GMail otomatis menjadi pengguna Google Buzz. Google buzz sendiri berusaha menjadi layanan perantara antara twitter yang terlau sederhana dan Facebook yang terlalu komplek. Saya sendiri sangat suka dengan Google Buzz. Sayangnya Buzz banyak mendapat kritikan karena produk ini nempel di GMail. Sebagian orang merasa tidak nyaman sehingga Buzz dinyatakan sebagai produk Gagal.

Google Orkut

Orkut adalah jejaring sosial seperti Friendster, MySpace dan Facebook. Saat ini Google orkut hanya ramai di Brazil. Google sebentar lagi juga mematikan produk ini dan fokus ke Google+.

 

Google Friends Connect

Google friends connect merupakan usaha lain dari Google untuk membuat jejaring sosial yang lebih terbuka. Pada kenyataanya friends connect lebih tepat disebut Identity Service seperti Facebook Connect. Pemakaian paling nampak dari friends connect adalah Blogger. Sayangnya friend connect juga gagal.

Google Wave

Google wave adalah layanan paling revolusional dari Google yang ternyata juga Gagal. Layanan ini berusaha menggantikan email, menyatukan fitur chating, email serta Wiki kedalam satu aplikasi terintegrasi. Kegagalan dari wave adalah terlalu teknisbagi orang awam dan ide ini terlalu radikal. Saya lebih senang menyebut Google wave sebagai produk yang melebihi zaman. Masyarakat  tidak siap dengan perubahan radikal. Jangankan mengganti pemakaian email, Microsoft aja gagal membuagn startmenu yang sudah berumur 20 tahun!

 

Kesimpulannya?

Selain produk diatas, masih banyak produk lain yang juga gagal, bahkan jumlahnya sampai puluhan yang belum sempat sayatulis. Silahkan baca selengkapnya disini. Makanya jangan patah semangat kalau usaha kamu gagal. Google saja yang terlihat sukses ternyata punya puluhan kegagalan dibelakangnya. Masa kita yang baru sekali dua kali gagal membuat aplikasi atau startup terus menyerah?  Sekarang mari kita memandang kegagalan dari sudut pandang berbeda, bahwa kegagalan adalah benih benih keberhasilan jika kita mau belajar dari kegagalan tadi.