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

chapter 7 – search dengan timer & mekanisme loading

1
Degananda.com -

Pada chapter-7 ini kita akan membuat dua hal baru yakni search dengan menggunakan timer. Jika pada chapter-6 kita telah membuat search dengan menggunakan user input event berupa onChange yang mana user harus menekan tab baru kemudian search berjalan maka pada chapter-7 ini search akan berjalan atau di eksekusi seketika setelah user berhenti mengetik keyword search.  Mekanisme seperti ini sangat hemat memory karena hanya akan menggunakan keyword terahir setelah user tidak menekan tombol dikeyboard.

Untuk mempermudah mengikuti chapter-7 ini sebaiknya anda mengikuti tutorial mengenai chapter-6 tentang pembuatan search secara basic. Source code yang digunakan juga berasal dari chapter-6. Namun kami belum bisa menyediakan repository untuk chapter-6 karena source code lupa kami git sehingga repository langsung loncat ke chapter-7. Tetapi akan kami usahakan untuk membuat ulang untuk repository chapter-6. Anda dapat mengikuti tutorial chapter-6 pada link dibawah ini

https://degananda.com/2017/06/12/chapter-6-basic-search-angular/

pre-requisites

Sebelum anda mengikuti tutorial chapter-7 ini ada beberapa hal mengenai angular yang harus anda pelajari terlebih dahulu. Jika anda belum mengerti hal tersebut untuk memahami tutorial chapter ini akan terasa sulit karena banyak istilah-istilah baru mengenai angular dan tidak ada pada pemrograman javascript pada umumnya. Ini dikarenakan angular banyak menggunakan custom component dan custom directive. Berikut ini adalah hal-hal yang sebaiknya anda mengerti sebelum mengikuti tutorial chapter-6 ini :

  1. @input dan @output decorator untuk bertukar data antar komponen
  2. Memahami pembuatan custom pipe search.
    Silahkan membaca chapter-6 untuk mengetahui dasar pembuatan search (array) dengan menggunakan custom pipe.
  3. Memahami dasar angular material design (tidak wajib)
    Untuk UI tutorial chapter-6 dan chapter 7 ini menggunakan material design, jika anda ingin mempelajarinnya terlebih dulu akan lebih baik, namun hal ini tidak menjadi wajib karena tetap dapat di ikuti tanpa memahami material design(angular).

jika anda belum memahami tiga hal diatas anda juga dapat mengikuti tutorial angular pada blog ini dari chapter-1 hingga chapter-6.

what we build ?

Pada chapter-7 ini kita akan membuat search dengan menggunakan timer. Input dari search dapat berupa angka , huruf ataupun simbol. Sistem filter search akan berfungsi layaknya query “like” pada sql. Selain itu , pada saat proses search kita akan berikan mekanisme loading dengan menampilkan spinner / loading bar pada komponen tertentu. Untuk lebih jelasnya silahkan lihat gambar dibawah ini.

disamping input text (cari berdasarkan isi note) dan dibawah tombol “tambah” terdapat spinner / loading bar yang mungkin pada gambar diatas tidak terlihat dikarenakan screenshot yang tidak pas. Pada saat proses search kedua spinner tersebut akan muncul dan ketika proses search selesai spinner akan hilang. Inilah yang disebut dengan mekanisme loading. Untuk memperjelas bagaimana cara kerja spinner dan timer search silahkan mengunjungi halaman demo dibawah ini untuk melakukan pengaksesan secara live.

http://demo.degananda.com/angular/chapter-7/

Selain itu, pada chapter-7 ini juga akan menambahkan fitur untuk menampilkan pesan bahwa “saat ini pada sistem sedang tidak ada data note” seperti ditunjukan pada gambar dibawah ini.

pesan ini sangat berguna untuk menginformasikan kepada user mengenai kondisi aplikasi sehingga user tidak kebingungan mengapa tidak ada data disistem sehingga menimbulkan prasangka-prasangka seperti server error dan lain sebagainnya. Pesan tidak ada data ini akan hilang ketika user menginputkan data ke sistem ataupun pada saat proses loading search.

Anda dapat mengclone atau mendownload source code yang digunakan pada chapter-7 ini pada link github dibawah ini dengan harapan lebih memudahkan dalam memahami ulasan.

https://github.com/degananda/angular-note/tree/7.0

Lets code

1. Membuat komponen loading

Untuk menampilkan loading / spinner pada komponen list-note (bukan di com-search) kita akan menggunakan custom element. Hal ini ditujukan agar komponen loading ini dapat dipergunakan kembali untuk komponen lainnya. Berbeda dengan loading spinner di com-search yang hanya berupa syntax <md-spinner> sederhana. Perintah yang digunakan untuk membuat komponen loading dengan angular cli adalah

ng g component com-loading

isi dari komponen view diatas adalah

perlu diketahui bahwa seluruh syntax custom html yang dimiliki oleh angular material design memiliki default stylesheet untuk display berupa “flex”. Karena kita ingin menampilkan spinner tersebut ditengah dari container maka harus diubah menjadi display “inline-block”. Jika tetap menggunakan “flex” maka spinner tidak akan bisa berada ditengah.

2. Membuat mekanisme timer search

Logika dari search yang menggunakan waktu atau timer adalah memanfaatkan fungsi setTimeOut dari javascript. setTimeOut adalah sebuah fungsi yang dapat mengeksekusi perintah tertentu (dalam hal ini yang akan kita eksekusi adalah eventemitter untuk output keyword search) dalam jangka waktu tertentu (dalam satuan milisecond). Urutan logikannya adalah sebagai berikut :

  1. Saat user menekan keypad pada keyboard(huruf/angka), timer akan berjalan dan menandakan bahwa loading dimulai.
  2. Setelah keypad di “release” atau telah ditekan maka timer akan diclear. Mengapa ? karena tujuannya hanya akan membuat satu buah TIMER saja. Jika ada lebih dari satu timer maka search akan dilakukan dua kali.
  3. Pada saat timer dieksekusi maka menandakan bahwa loading telah selesai dan meng”emit” nilai keyword dari output searchQueryElement.
  4. Loading state yang digunakan ada dua , pertama pada internal com-search yang kedua pada com-listnote yang memanfaatkan output onSearchLoading. Sehingga pada saat timer dieksekusi maka juga dilakukan emit untuk output onSearchLoading dengan value false(menandakan search telah dilakukan/loading selesai).

Mungkin cukup membingunkan , tetapi coba pahami dengan menyimak penjelasan diatas dan mencocokan dengan kode dibawah ini. Pada intinnya kita akan membuat timer setelah user selesai melakukan pengetikan keyword namun hanya boleh ada satu timer saja.

clearTimeOut() digunakan untuk menghilangkan timer , fungsi ini yang digunakan untuk menghindari timer double atau bahkan triple. clearTimeOut ini akan di eksekusi di user input event “keydown“. “keydown” dieksekusi sesaat setelah user menekan keypad dan value dari keypad tersebut belum diterima oleh sistem. Tetapi “keyup” di eksekusi sesaat setelah user menekan keypad di keyboard namun value dari keypad belum diterima oleh sistem. Mengapa clearTimeOut() dieksekusi sebelum sistem menerima value? untuk melakukan clear terhadap timer-timer sebelumnya.

2.1 View komponen com-search

kita akan implementasikan user input event keyup dan keydown sesuai dengan penjelasan diatas. Fungsi yang akan dieksekusi adalah startTyping(querySearch.value) dengan parameter berupa  value dari input text. startTyping akan dieksekusi di user input event keyup. sedangkan pada user input event keydown yang akan di eksekusi adalah endTyping() untuk meng”clear” seluruh timer.

kita juga menambahkan dua buah div dengan float left dan right untuk menampung spinner disamping kanan input text. Mengapa menggunakan float? karena kita belum mengimplementasikan angular-flex untuk layouting. Pada chapter didepan nanti kita akan mengimplementasikan angular-flex untuk layouting.

3. Com Listnote

pada komponen(com-listnote.component.html) ini terdapat beberapa hal yang ditambahkan :

  1. dua directive baru pada komponen <app-com-search> untuk mengakomodasi output yakni searchQueryElement() untuk mengambil nilai search/keyword dan onSearchLoading untuk mengambil nilai boolean loading (apakah loading sedang berjalan atau tidak)
  2. Satu property baru bernama onSearchLoading untuk menandakan bahwa apakah sedang loading search atau tidak (list-note.component.ts)
  3. Menambahkan ngIf ke beberapa div. ngIf ini berfungsi sebagai mekanisme loading.
  4. Div daftar note hanya akan muncul apabila sedang tidak loading(onSearchLoading bernilai false)
  5. com-loading (komponen loading) hanya akan muncul ketika onSearchLoading bernilai true / proses loading sedang berjalan
  6. div yang menampilkan pesan bahwa tidak ada data pada sistem akan muncul ketika listNote.length <= 0 && !onSearchLoading (tidak ada data note dan tidak sedang pada proses loading search).

sedangkan pada com-listnote.ts hanya menambahkan property onSearchLoading dan fungsi onLoadingChange untuk mengambil value boolean dari loading yang diambil dari output dari com-seach