lifelong learner — urip iku urup, currently working on accenture.

Angular – penjelasan observable

1
Degananda.com -

Jika anda pernah membuat aplikasi CRUD dengan menggunakan http pada angular maka istilah observable tentunnya tidak asing. Apakah observable itu ? dan bagaimana cara kerja observable ? silahkan simak pada ulasan ini.

Observable vs Observer

Observable adalah suatu object yang merepresentasikan “push based collection”.  Collection adalah kumpulan dari suatu data dengan tipe data tertentu. Observable merupakan bagian dari reactive programming. Mekanisme kerja observable dapat di ibaratkan seperti seseorang yang mengirimkan pesan kepada orang lain dan kemudian orang tersebut dapat mengetahui pesan tersebut telah diterima atau biasa disebut sebagai observer desian patern.

Observer adalah seseorang yang melakukan observasi. Object observasi bisa bermacam-macam. Jika kasus pada orang yang mengirim pesan tadi maka bisa jadi terdapat suatu object yang dapat mengetahui state dari pesan tersebut. Misalnya state 1 pesan ditulis, state 2 pesan dikirimkan , state 3 pesan diterima oleh penerima. Namun, biasannya si penerima ini juga dapat dianggap sebagai observer karena object yang diamati adalah pengirim pesan. Pesan yang dikirim juga bisa jadi gagal atau error. Observer sebagai object yang mengamati observable dapat mengerti atau tahu kondisi tersebut.

Jika observer adalah penerima pesan atau notifikasi maka pengirim pesan inilah yang disebut dengan observable. Sehingga observable adalah object yang mengirimkan notifikasi atau pesan dan observable adalah object yang merepresentasikan penerima notifikasi atau pesan. Pada reactive programming observer akan melakukan subscribe kepada observable untuk mendapatkan pesan/data yang dikirimkan. Observer sebagai penerima data akan bereaksi apabila data tersebut telah di “emit” oleh observer. Proses ini berjalan secara asynchronous sehingga tidak saling blocking yang mengakibatkan menunggu.

Observable @ Angular

Observable pada angular biasannya terkait dengan proses http request. Data yang kita terima dari api yang direquest oleh modul http akan diproses dalam bentuk observable. Tujuannya adalah agar kita dapat tahu mengenai :

  1. Apakah data telah terkirim dengan baik (ada error atau tidak ada error).
  2. Apakah data telah terkirim dan sudah diterima. Ini sangat berperan penting untuk menghadirkan fitur loading.

Pola komunikasi yang tidak saling menunggu atau async ini dapat meningkatkan performa dari applikasi. Waiting = spend more time. Untuk apa menunggu jika kita bisa saling memberikan kabar dan suatu kepastian ? (hehehe jangan baper). Perhatikan kode services dibawah ini

getNote() : Observable<NoteModel[]>{
 let headers = new Headers({'Content-Type': 'application/json'});
 let username : string = 'degananda';
 let password : string = 'indonesiaraya'; 
 headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
 let options = new RequestOptions({ headers: headers });
 return this.http.get('http://localhost:7250/note', options).map(
   (res : Response) => res.json()
 );
}

kode diatas digunakan untuk membuat suatu observable yang akan mengirimkan pesan berupa JSON yang didapatkan dari API(Application programming interfaces). Pada saat pembuatan observable ini kita memiliki keleluasaan dalam mengubah atau mentransforamsi pesan yang akan dikirimkan. Pada contoh diatas pesan/data akan diubah formatnya menjadi JSON. Misalkan data yang diterima adalah [1,2,3,4,5] kita juga dapat memanfaatkan fungsi map() untuk mentransformasikannya menjadi [2,4,6,8,10].  Itulah sedikit gambaran fungsi dari observable , selain digunakan untuk mengirim/meneruskan pesan dari API tetapi juga dapat melakukan transformasi data.

Dalam komunikasi/dialog syarat mutlak yang harus ada adalah pengirim dan penerima pesan. Jika hanya ada salah satu itu dinamakan dengan monolog. Observable berperan sebagai pengirim dan observer berperan sebagai penerima. Observer akan melakukan subscribe kepada observable yang berarti dia (observer) telah berniat dan berjanji untuk mengobservasi observable tentang segala kondisi yang terjadi saat berkomunikasi. Data yang dikirimkan diatas akan disubscribe oleh observer dengan cara seperti dibawah ini

getCurrentNote(){
  this.serviceNoteService.getNote().subscribe(
      (res) => {
        this.serviceNoteService.listNote = res;
      }
  )
}

getCurrentNode() adalah fungsi yang berperan sebagai observer dan akan melakukan observasi terhadap observable. Res disini merupakan pesan yang dikirimkan oleh observable dan akan diolah oleh observer untuk keperluan selanjutnya. Pada object res inilah kita dapat menyimpan berbagai macam variabel misalkan error, status code dan lain sebagainya yang dapat dimanfaatkan oleh observer guna menunjang fungsi aplikasi. Itulah kekuatan dari salah satu kemampuan reactive programming (RX). RX tidak hanya tersedia dalam javascript (RXJS) tetapi juga tersedia diplatform lain misalnya java (RXJava).

Untuk apa menunggu jika kita bisa saling memberikan kabar dan suatu kepastian ? (hehehe jangan baper)