Tuesday, February 11, 2020

Membuat Aplikasi Realtime Dengan Flutter + Websocket

Aplikasi Realtime dengan Flutter + Websocket
Membuat Aplikasi Mobile Realtime Data Dengan Flutter dan Websocket -  Sebagai seorang programmer atau developer aplikasi, terutama aplikasi mobile menguasai berbagai macam teknik, metode, dan teknologi API adalah salah satu hal yang wajib dilakukan. Terutama di era aplikasi modern saat ini, dimana pertukaran data sangatlah cepat sehingga pembuat aplikasi harus besaing dalam membuat aplikasi yang efektif, efisien, dan cepat.
Hasil Aplikasi
Dalam pembuatan aplikasi sendiri, baik aplikasi desktop, web, maupun mobile metode atau teknologi yang kita  terapkan hharus menyesuaikan dengan kebutuhan. Artinya, kita tidak bisa memukul sama rata teknologi dan memutuskan penggunaan teknologi secara sepihak tanpa mempertimbangkan aspek-aspek lainya.

Misal nya dalam konteks pembuatan aplikasi CRUD sederhana, yang mana kebutuhuan update perubahan data yang tidak terlalu tinggi kita cukup menggunakan methode REST API baik mealui HTTP POST atau HTTP GET sesuai selera kita masing-masing. Namun, berbeda hal nya dengan pembuatan aplikasi yang membutuhkan pergerakan atau perubahan data secara cepat (atau bisa dikatakan realtime) seperti aplikasi Trading (Forex, Saham, ataupun Cryptocurrency) tentu nya REST API tidak bisa diterapkan mengingat REST API bersifat single-directional sehingga tidak efektif untuk jenis aplikasi realtime.

Untuk itu, dalam pembuatan aplikasi yang membutuhkan perubahan data secara realtime kita perlu mengimplmentasikan teknologi lainya (API) yang bersifat bidirectional communication salah satunya yaitu Webssocket.

Apa itu Websocket?


Websocket adalah protokol komunikasi komputer, yang menyediakan saluran komunikasi dupleks penuh melalui koneksi TCP tunggal. Protokol WebSocket distandarisasi oleh IETF sebagai RFC 6455 pada 2011, dan API Websocket di Web IDL sedang distandarisasi oleh W3C.

Websocket sendiri sudha menjadi protokol standar internasional untuk pertukaran data realtime, sehingga banyak penyedia API menggunakan protokol Websocket yang siap kita gunakan. Hanya saja pada pembuatan aplikasi realtime yang sesungguhnya, kita perlu mengembangkan atau membuat server Websocket kita sendiri.

Pada artikel kali ini saya akan menunjukan konsep dan contoh source code lengkap serta penjelasan bagian penting dari source code pembuatan aplikasi realtime dengan Flutter dan Websocket. Pada contoh kasus pembuatan aplikasi realtime kali ini saya memanfaatkan API public (data cryptocurrency) dengan protokol Websocket yang disediakan oleh BitMex dan bisa kita konsumsi secara gratis.

Pada Flutter sendiri terdapat beberapa package bantuan untuk menggunakan protokol Websocket dan terhubung ke websocket server, dimana saya memakai package web_socket_channel, dengan package ini kita bisa mengakses API bitmex dengan kode utama sebagai berikut:

var channel = IOWebSocketChannel.connect('wss://www.bitmex.com/realtime');
channel.sink.add('{"op": "subscribe", "args": ["trade:XBTUSD"]}');
channel.stream.listen((message) {
  var jResponse = json.decode(message);
  print(jResponse);
  //. lanjut parsing data dan gambar ke widget});

Penjelasan kode di atas adalah, kita melakukan koneksi Secure Websocket (wss) ke url API realtime bitmex. Setelah berhasil, lalu kita kirimkan subscribe data untuk mendapatkan data trade dengan kode cryptocurrency XBT (Bitcoin) dan dalam harga USD (Dollar AS).

Lalu setiap data yang dikirimkan oleh server akan diterima kedaam callback listen, dan data dalam bentuk String kita taruh dalam variabel message. Dengan demikian langkah selanjutnya adalah parsing message sesuai format data API dan menggambarnya ke dalam widget kita.

Jika sobat eduprog masih pemula atau bahkan, pertama kali ini mengimplementasikan teknologi Webscoket mungkin awalnya sobat agak bingung karena konsep dari Websocket ini adalah asinkron, sehingga sobat harus memperdalam pemahaman/kemampuan terhadap metode pemrograman yang asinkron (permintaan data dan hasil dari permintaan data terpisah).
Agar sobat bsia memahami lebih jauh implementasi, saya sudah membuatkan aplikasi sederhana dengan soource code lengkap untuk menampilkan data trade cryptocurrency dari BitMex.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: