PENGEMBANGAN SISTEM PUSH NOTIFICATION MENGGUNAKAN WEBSOCKET DAN NODE.JS STUDI KASUS UNIVERSITAS BINA NUSANTARA

(1)

PENGEMBANGAN SISTEM PUSH

NOTIFICATION MENGGUNAKAN

WEBSOCKET DAN NODE.JS STUDI KASUS

UNIVERSITAS BINA NUSANTARA

Timothy Yudi; Eric Anthony; Andreas Christian; Renan

Prasta Jenie

Computer Science Department, School of Computer Science Binus University J.l. K.H. Syahdan No. 9. Kemanggisan – Palmerah, Jakarta Barat 11480, (021)-53696969

peacemakersquad@yahoo.com

ABSTRACT

The purpose of this research is to develop a system base on push technology to deliver a variety of the latest information in the form of notification that will be received directly at user’s smartphone. This system will use the websocket technology that supported with Node.JS. The method used in this research is the study of literature from the internet, while the design of the model used is the V-Model, in which of this method, each stage will be tested before moving to the next stage. The expected result is Universitas Bina Nusantara could deliver information directly to binusian by sending it via web server, binusian will get notification on their smartphone. Hopefully, this application could make things easier for Universitas

Bina Nusantara in deliver the message to binusian.

Keywords : Push Notification, Websocket, Node.Js

ABSTRAK

Tujuan dari penelitian ini ialah mengembangkan suatu sistem berbasis teknologi push untuk menyampaikan berbagai informasi terbaru dalam bentuk notifikasi yang nantinya akan langsung diterima oleh smartphone pengguna. Sistem ini nantinya akan menggunakan teknologi websocket yang didukung dengan Node.Js. Metode penelitian yang digunakan adalah metode studi literatur dari internet,

sedangkan model perancangan yang digunakan adalah V-Model dimana pada metode ini, setiap tahap yang dikerjakan diuji terlebih dahulu sebelum berlanjut ke tahap berikutnya. Hasil yang ingin dicapai

yaitu Universitas Bina Nusantara dapat mengirim informasi secara langsung ke binusian dengan mengirim pesan dari web server, binusian menerima notifikasi ini di smartphone mereka. Diharapkan, aplikasi ini dapat mempermudah Universitas Bina Nusantara dalam mengirim pesan secara langsung ke

binusian.

(2)

PENDAHULUAN

Di era informasi ini, akses informasi yang cepat merupakan hal yang sangat penting. Dengan adanya teknologi internet, serta dukungan teknologi mobile saat ini, mengakses informasi secara cepat menjadi hal yang mudah. Mengacu pada data dari Badan Pusat Statistik tahun 2011, pendapatan per kapita di tahun tersebut sebesar 31 juta rupiah per tahun atau rata-rata penghasilan 2,56 juta rupiah per bulan, didukung dengan meningkatnya penggunaan smartphone di Indonesia berdasarkan data yang didapat dari statcounter. Dengan maraknya penggunaan teknologi mobile, terbuka peluang yang besar bagi aplikasi web maupun mobile. Universitas Bina Nusantara menyediakan situs binusmaya dimana mahasiswa dapat mengakses berbagai informasi mengenai perkuliahan. Namun penyebaran informasi melalui situs biasa menyebabkan pengguna tidak mengetahui adanya informasi secara realtime.

Sistem yang diusulkan dalam topik ini, bertujuan untuk menyampaikan berbagai informasi perkuliahan terbaru dalam bentuk notifikasi langsung ke smartphone pengguna. Sistem ini menggunakan sistem push, yang sifatnya mandiri dan tidak bergantung pada pihak ketiga. Penggunaan sistem push memiliki keunggulan tersendiri dibanding sistem pull karena client tidak perlu melakukan request secara berkala sehingga sesuai untuk diaplikasikan pada platform mobile. Platform mobile yang dipilih adalah

smartphone karena dari data yang dihimpun, lebih dari 80% binusian sudah memiliki smartphone dan

lebih dari 60% binusian tersebut mengakses website binusmaya melalui browser smartphone dibandingkan mengakses website binusmaya melalui PC komputer.

Tujuan dari penelitian ini adalah mengembangkan suatu sistem berbasis push yang digunakan untuk mengirimkan informasi dari web server yang nantinya diterima secara langsung dalam bentuk notifikasi di smartphone pengguna. Selain itu aplikasi di dalam smartphone pengguna juga memiliki fungsi sebagai alat bantu penampil jadwal perkuliahan. Manfaat dari penulisan ini adalah untuk menyampaikan informasi dari administrator ke binusian melalui perangkat mobile yang terhubung dengan internet serta menyajikan jadwal my class binusian melalui perangkat mobile.

Ruang lingkup dari penulisan ini difokuskan pada perancangan dan pembuatan sistem push notifikasi, perancangan dan pembuatan database sistem push notifikasi serta pengintegrasian sistem push notifikasi ini dengan sistem Universitas Bina Nusantara. Perancangan dan pengembangan sistem push notifikasi ini meliputi perancangan dan pengembangan push server dengan teknologi Node.JS dan

websocket, perancangan dan pengembangan web server dengan teknologi PHP serta perancangan dan

pengembangan aplikasi bagi sistem operasi android. LANDASAN TEORI

V-Model

Menurut Pressman (2010, pp. 39-40), V-model adalah variasi dari representasi model waterfall. V-model menggambarkan kualitas hubungan dari satu tindakan ke tindakan lain yang dihubungkan dengan komunikasi, modeling dan aktifitas awal konstruksi.

(3)

Gambar 1. Ilustrasi V-model

V-model diawali dengan membuat requirement model yang semakin disempurnakan menjadi lebih rinci dan teknikal di sisi kiri. Saat kode sudah dihasilkan, selanjutnya melakukan serangkaian tes kualitas tindakan jaminan (Quality Assurance Actions) yang memvalidasi masing masing model. V-model menyediakan cara untuk memvisualisasikan bagaimana verifikasi dan validasi tindakan yang diterapkan dalam rekayasa software sebelumnya.

OOP(Object Oriented Programming)

OOP Menurut Den Clark (2011, pp. 1-3), adalah sebuah pendekatan untuk pengembangan perangkat lunak dimana struktur perangkat lunak ini didasarkan pada benda-benda berinteraksi satu sama lain untuk menyelesaikan tugas. Interaksi ini membutuhkan bentuk pesan lewat bolak-balik antara objek. Dalam menanggapi pesan, objek dapat melakukan suatu tindakan atau metode. Contohnya seperti ketika seseorang ingin pergi ke toko dan berinteraksi dengan sebuah mobil. Sebuah objek mobil terdiri dari benda-benda yang berinteraksi satu sama lain untuk menyelesaikan tugas untuk mengantar orang tersebut ke toko. Orang tersebut meletakkan kunci dan menyalakannya. Hal tersebut mengirimkan pesan (melalui sinyal listrik) ke objek pemula, yang berinteraksi dengan objek mesin untuk menyalakan mobil. Sebagai supir, hal tersebut membuatnya terisolasi dari logika bagaimana suatu objek pada suatu sistem bekerja sama untuk menyalakan mobil. Orang tersebut hanya memulai urutan kejadian dengan menjalankan metode mulai dari objek pengapian dengan kunci, kemudian menunggu respon keberhasilan atau kegagalan.

Node.JS

Menurut jurnal yang ditulis oleh Muhammad Iqbal (2012) Node.js adalah sistem perangkat lunak yang didesain untuk pengembangan aplikasi web. Aplikasi ini ditulis dalam bahasa JavaScript, menggunakan basis event dan asynchrounous I/O. Tidak seperti kebanyakan bahasa JavaScript yang

(4)

dijalankan pada peramban, Node.js dieksekusi sebagai aplikasi server. Aplikasi ini terdiri dari V8 JavaScript Engine buatan Google dan beberapa modul bawaan yang terintegrasi.

Sedangkan menurut Pedro (2012, p. iv) Node.JS diperkenalkan oleh seorang programmer bernama Ryan Dahl pada European JSCONF 2009. Saat ini lebih dikenal secara sederhana sebagai 'Node'. Node memungkinkan programmer untuk secara mudah mengkonstruksikan network services yang cepat dan terukur.

Websocket

Menurut jurnal yang ditulis oleh Dilip Kumar (2011, p. 134) ,Websocket di HTML5 merupakan kemajuan di bidang komunikasi HTTP. Spesifikasi dari Websocket memungkinkan saluran komunikasi dua arah single-socket untuk mengirim dan menerima informasi antara browser dan server. Dengan demikian, Websocket menghindari koneksi dan portabilitas masalah teknik lainnya dan memberikan solusi yang lebih efisien daripada polling Ajax. Saat ini Websocket di HTML5 adalah sarana terdepan untuk memfasilitasi full-duplex, pertukaran data di web secara real time. Websocket menyediakan lintasan sederhana dari firewall dan router dan kompatibel dengan data biner. Websocket juga memungkinkan pertukaran data dengan cookie-based authentication.

Mongo DB

Menurut jurnal yang ditulis oleh Tauro (2012, p. 3), Mongo DB adalah non-relasional database, yang memiliki fitur terkaya dan paling menyerupai database relasional. Mendukung tipe data kompleks yang menggunakan struktur data BJSON untuk menyimpan tipe data kompleks. Menggunakan bahasa query yang baik yang memungkinkan sebagian besar fungsi seperti query dalam satu table relasional database, dan juga mendukung penggunaan indeks. Kecepatan akses ke data tinggi: saat data melebihi 50GB, kecepatan akses Mongo DB 10 kali dari My SQL. Karena karakteristik Mongo DB ini, banyak proyek yang penggunaan datanya terus meningkat memilih untuk menggunakan Mongo DB dibandingkan dengan relational database.

Phonegap

Menurut Adrian Kosmaczewski (2012, p. 91), PhoneGap diciptakan oleh perusahaan bernama Nitobi yang kemudian di akuisisi oleh Adobe. Lebih daripada itu, PhoneGap telah menjadi proyek resmi dari Apache Foundation dan sekarang dinamakan Apache Cordova. Secara teknis, dapat dikatakan bahwa PhoneGap adalah distribusi dari Apache Cordova. PhoneGap membungkus aplikasi yang diciptakan menggunakkan HTML, CSS dan JavaScript ke dalam bahasa native menggunakkan komponen web browser native yang disediakan oleh kebanyakan smartphone. Menurut promosi dari Adobe, PhoneGap merupakan dua hal:[1]Wrapper: PhoneGap menangani HTML, CSS dan JavaScript file dan

menyatukannya dalam suatu cara sehingga dapat dirilis di online store.[2] Bridge: PhoneGap juga menyediakan mekanisme HTML5 web applications, yang memungkinkan mereka mengakses dan memakai informasi dan service yang tersedia dari aplikasi bawaan, seperti buku kontak lokal, sistem notifikasi, suara, dan keperluan lainnya.

PHP

Menurut Suryatiningsih (2009, p. 141), PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada sisi server. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja.

(5)

METODE

Untuk menentukan kebutuhan yang diperlukan dalam perancangan dan pembuatan sistem di penelitian ini maka dilakukan wawancara dengan IS Development Manager serta pengisian kuisioner oleh binusian dari Universitas Bina Nusantara. Dari wawancara dan kuisioner, dilakukan analisis yang lalu diambil kesimpulan sebagai acuan. Berdasarkan data yang kami peroleh dari wawancara, sistem yang sudah berjalan di Universitas Bina Nusantara seperti situs binusmaya dan TV Wall saat ini masih belum mencukupi kebutuhan pengguna karena informasi harus dapat diakses secara Real-time dan personal. Binusian diminta untuk menjawab kuisioner dan digunakan sebagai sampel dari keseluruhan populasi. Dari kuisioner yang disebarkan, dapat diambil kesimpulan bahwa 83% binusian telah menggunakan

smartphone, dimana sistem operasi smartphone yang populer adalah Android. Responden juga lebih

sering berinteraksi dengan situs binusmaya melalui browser smartphone dibandingkan melalui browser PC.

Metode perancangan sistem yang digunakan dalam penulisan ini adalah metode V Model, dimana pembuatan sistem ini berdasar pada OOP(Object Oriented Programming). Perancangan sistem meliputi Usecase diagram dan Class Diagram.

Gambar 2. Usecase diagram Android Client, Web Server, Push Server

(6)

Gambar 4. Class diagram web server

Gambar 5. Class diagram push server

HASIL DAN PEMBAHASAN

Evaluasi dilakukan dengan mengirim pesan ke 5 pengguna, data tabel yang memiliki pengguna lebih dari 1 hanya akan ditampilkan data rata-rata dari pengguna, data sudah tercatat pada tabel di bawah ini (dalam satuan detik):

Tabel 1. Evaluasi Kecepatan Pengiriman Ke 1 Pengguna Evaluasi Kecepatan Pengiriman Ke 1 Pengguna

Percobaan ke- 1 2 3 4 5 6 7 8 9 10 Average

Broadcast 2.52 2.52 2.49 2.63 3.13 2.33 2.51 2.29 2.32 2.44 2.52 Multicast 2.67 2.12 2.28 2.43 2.26 2.03 2.68 2.61 2.08 2.02 2.32 Specific 2.56 2.04 2.15 2.46 2.07 2.47 2.44 3.22 2.45 2.38 2.42

Tabel 1. Evaluasi Kecepatan Rata-Rata Pengiriman Ke 2 Pengguna Evaluasi Kecepatan Rata-Rata Pengiriman Ke 2 Pengguna

(7)

Analisis evaluasi:

Berdasarkan data yang diproses, waktu pengukuran bervariasi dari 2 hingga 3 detik, hal ini bergantung pada koneksi internet dan kesalahan manusia saat mengukur waktu (saat mematikan

stopwatch).

(8)

1. Berusaha untuk konsisten

Perancangan layar pada aplikasi mobile sistem push notifikasi ini berusaha untuk mempertahankan konsistensi dari segi warna, tampilan, penggunaan jenis dan warna font

Gambar 6. Announcement

Gambar 7. Message 2. Memenuhi universal usability

Perancangan navigasi pada aplikasi mobile sistem push notifikasi ini dibuat sedemikian rupa sehingga pengguna dapat mengakses setiap menu dengan cepat. Sebagai contoh adanya tab menu halaman yang terletak di bawah dan berguna untuk mengontrol navigasi antar halaman sehingga mempermudah pengguna dalam melakukan navigasi dari halaman yang satu ke yang lain.

(9)

3. Memberikan umpan balik yang informative

Perancangan aplikasi mobile sistem push notifikasi ini dibuat bersifat

rensponsive terhadap prekondisi aplikasi. Sebagai contoh ketika pengguna tidak

memiliki koneksi internet saat melakukan login maka akan muncul pesan kesalahan.

Gambar 9. Umpan Balik 4. Merancang dialog yang memberikan akhir

Salah satu contoh pemberian dialog penutupan pada perancangan aplikasi

mobile sistem push notifikasi ini merupakan dialog notifikasi yang muncul ketika

pengguna yang menerima pesan dari push server.

Gambar 10. Dialog Penutupan Akhir

5. Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana

Adanya pemberitahuan kotak mana yang harus diisikan username, mana yang harus diisikan password untuk mencegah kesalahan input.

Gambar 11. Penanganan Kesalahan 6. Memungkinkan pembalikan aksi yang mudah

Perancangan aplikasi mobile sistem push notifikasi ini juga menyediakan tombol yang memungkinkan pengguna untuk membatalkan aksi yang telah dilakukannya dengan mudah. Sebagai contoh pada menu delete message, pengguna dapat membatalkan penghapusan pesan.

(10)

Gambar 12. Pembalikan Aksi Yang Mudah 7. Mendukung pusat kendali internal

Perancangan aplikasi mobile sistem push notifikasi ini menyediakan fitur menghapus pesan yang tidak diinginkan dari tampilan. Hal ini memberi kebebasan kepada pengguna untuk mengontrol tampilan sesuai dengan yang diinginkan.

Gambar 13. Pusat Kendali Internal 8. Mengurangi beban ingatan jangka pendek

Penggunaan status navigasi pada sistem ini dibuat sesederhana mungkin sehingga pengguna dapat dengan mudah mengetahui posisinya ketika sedang mengakses menu tertentu. Sebagai contoh ketika mengakses halaman Announcement, gambar menu Announcement akan memberikan warna yang berbeda sebagai petunjuk.

(11)

PENUTUP

Kesimpulan yang dapat diberikan berdasarkan hasil perancangan dan pengembangan adalah sebagai berikut: (1) Perancangan dan pengembangan ini menghasilkan sistem push notifikasi memungkinkan administrator web server mengirimkan notifikasi ke smartphone pengguna secara real time melalui internet. (2) Melalui web server sistem push notifikasi, administrator dapat mengirimkan notifikasi secara broadcast, multicast ke grup, tertentu ataupun secara personal sesuai dengan username pengguna. (3) Melalui aplikasi mobile sistem push notifikasi, pengguna dapat mengakses jadwal kelas.

Berdasarkan perancangan dan pengembangan sistem push notifikasi yang telah dilakukan, maka beberapa saran yang dapat diberikan untuk pengembangan lebih lanjut adalah sebagai berikut: (1) Mengimplementasi delete database push server melalui web server.(2) Mengintegrasikan bagian message dari situs binusmaya ke sistem push notifikasi.(3) Mengembangkan tampilan antarmuka dari web server serta aplikasi mobile dari sistem push notifikasi lebih lanjut.

DAFTAR PUSTAKA

BadanPusatStatistik. (2012, December 14). Retrieved from http://www.bps.go.id/brs_file/pdb_banner1.pdf

C.R, M. I., Husni, M., & Studiawan, H. (2012). Implementasi Klien SIP berbasis Web menggunakkan HTML5 dan Node.JS. Jurnal Teknik ITS, 1, A-243.

Clark, D. (2011). Beginning C# Object - Oriented Programming. New York: Apress.

Kosmaczewski, A. (2012). Mobile JavaScript Application Development. California: O'Reilly Media, Inc.,.

Pressman, R. S. (2010). Software Engineering : A practitioner's Approach, Seventh Edition. New York: McGraw-Hill.

Sharma, D. K., & Sharma, A. (2011). Implementation of Secure Cross-site Communication on QIIIEP.

International Journal of Advancements in Technology, II(1), 134.

StatCounter. (2012, December 14). Retrieved from http://gs.statcounter.com/#mobile_os-ID-yearly-2010-2012

Suryatiningsih, W. (2009). Web Programming. Bandung: Politeknik Telkom.

S, A., Tauro, C. J., & A B, S. (2012). Comparative Study of the New Generation, Agile,Scalable, High Performance NOSQL Databases. International Journal of Computer Applications, 48(20), 3. Teixeira, P. (2012). Hands-on Node.js. Lean Publishing.