Membuat Filtering Data pada Ionic 2 atau Ionic 3

Pada tutorial kali ini, saya akan membahas tentang filtering di ionic dengan high performance dan usability. Berikut gambaran umumnya :

Getting Started

Mari kita mulai tutorial cara membuat filtering sederhana menggunakan framework ionic 2 atau ionic 3.

Generate new project ionic

Pertama-tama, buat project ionic terlebih dahulu.

 ionic start ionic2-search-filter blank  

Buat sebuah provider dengan nama Data.

 ionic g provider Data  

Untuk dapat digunakan didalam aplikasi, jangan lupa menambahkan Data di dalam provider.

Ubah app.module.ts

 import { BrowserModule } from '@angular/platform-browser';  
 import { ErrorHandler, NgModule } from '@angular/core';  
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';  
 import { HttpModule } from '@angular/http';  
 import { SplashScreen } from '@ionic-native/splash-screen';  
 import { StatusBar } from '@ionic-native/status-bar';  
 import { MyApp } from './app.component';  
 import { HomePage } from '../pages/home/home';  
 import { Data } from '../providers/data';  
 @NgModule({  
  declarations: [  
   MyApp,  
   HomePage  
  ],  
  imports: [  
   BrowserModule,  
   HttpModule,  
   IonicModule.forRoot(MyApp)  
  ],  
  bootstrap: [IonicApp],  
  entryComponents: [  
   MyApp,  
   HomePage  
  ],  
  providers: [  
   StatusBar,  
   SplashScreen,  
   Data,  
   {provide: ErrorHandler, useClass: IonicErrorHandler}   
  ]  
 })  
 export class AppModule {}  

Seletah menambahkan Data ke dalam provider. Mari kita mulai.

Basic Filtering

Kita akan gunakan pipe filter untuk memfilter data kita. Buat function filterItems di dalam provider Data. disini kita menggunakan static data dan disimpan ke dalam variabel items. Kita buat function filterItem dengan return sesuai dengan kriteria.

Ubah src/providers/data.ts seperti cuplikan berikut:

 import { Injectable } from '@angular/core';  
 import { Http } from '@angular/http';  
 import 'rxjs/add/operator/map';  
 @Injectable()  
 export class Data {  
   items: any;  
   constructor(public http: Http) {  
     this.items = [  
       {title: 'one'},  
       {title: 'two'},  
       {title: 'three'},  
       {title: 'four'},  
       {title: 'five'},  
       {title: 'six'}  
     ]  
   }  
   filterItems(searchTerm){  
     return this.items.filter((item) => {  
       return item.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;  
     });     
   }  
 }  

Kita buat variabel items untuk mengisi data arraynya di dalam constructor. Data ini sebagai data awal kita. Kemudian kita akan mengimplementasikan fungsi filterItems dengan parameter searchTerm untuk memilih data yang akan kita cari.
Nah, kembalian dari fungsi ini adalah true dengan data sesuai dengan kriteria.

Ubah home.ts seperti cuplikan berikut :

 import { Component } from '@angular/core';  
 import { NavController } from 'ionic-angular';  
 import { Data } from '../../providers/data';  
 @Component({  
  selector: 'page-home',  
  templateUrl: 'home.html'  
 })  
 export class HomePage {  
   searchTerm: string = '';  
   items: any;  
   constructor(public navCtrl: NavController, public dataService: Data) {  
   }  
   ionViewDidLoad() {  
     this.setFilteredItems();  
   }  
   setFilteredItems() {  
     this.items = this.dataService.filterItems(this.searchTerm);  
   }  
 }  

Sekerang, kita dapat memfilter data, pertama-tama, kita deklarasikan variabel items, set dengan any. variabel items ini yang akan menampung data dan ditampilkan ke dalam tampilan. Kita juga membuat variabel searchTerm diset ke string dengan data awal kosong, Agar ketika pertama kali mengambil data, data akan muncul semua tanpa difilter.

Kemudian kita buat function setFilteredItems. Didalam fungsi ini kita buat items = fungsi data yang dicari, memanggil fungsi dari dalam dataService. Agar setiap kali kita membutuhkan data kita tinggal panggil fungsi setFilteredItems.

Ubah home.html seperti cuplikan code berikut:

 <ion-header>  
  <ion-navbar>  
   <ion-title>  
    Ionic Blank  
   </ion-title>  
  </ion-navbar>  
 </ion-header>  
 <ion-content>  
   <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar>  
   <ion-list>  
     <ion-item *ngFor="let item of items">  
       {{item.title}}  
     </ion-item>  
   </ion-list>  
 </ion-content>  

Kita tambahkan ion-searchbar ke dalam tampilan kita dengan model searchTerm. dan (ionInput) dengan fungsi setFilteredItems. Agar setiap kali kita mengisi input pencarian langsung terdeteksi.

Filtering dengan Observables

Kita memiliki items yang telah disiapkan sekarang untuk memfilter data tanpa menggunakan pipe, tetapi kita dapat mengambilnya lebih dalam lagi. Kita saat ini mencari setiap kali pengguna mengetik nilai ke dalam input pencarian.

Sebagai contoh: Jika saya mencari coffe, saya tidak perlu melihat hasilnya untuk c, co, cof, coff, dan coffe. Saya tidak perlu pencarian terjadi sampai saya selesai mengetik. Idealnya, kita ingin memberi pengguna waktu untuk selesai mengetik pencarian mereka sebelum memicu pencarian, dan kita bisa melakukan ini dengan mudah dengan Observable.

Angular 2 menyediakan Observable yang dapat kita gunakan dengan input yang dapat diakses melalui control. Ini akan memungkinkan kita untuk mendengarkan masukan dengan cara yang lebih maju. Mari lihat.

Ubah home.ts seperti cuplikan code berikut:

 import { Component } from '@angular/core';  
 import { FormControl } from '@angular/forms';  
 import { NavController } from 'ionic-angular';  
 import { Data } from '../../providers/data';  
 import 'rxjs/add/operator/debounceTime';  
 @Component({  
  selector: 'page-home',  
  templateUrl: 'home.html'  
 })  
 export class HomePage {  
   searchTerm: string = '';  
   searchControl: FormControl;  
   items: any;  
   constructor(public navCtrl: NavController, public dataService: Data) {  
     this.searchControl = new FormControl();  
   }  
   ionViewDidLoad() {  
     this.setFilteredItems();  
     this.searchControl.valueChanges.debounceTime(700).subscribe(search => {  
       this.setFilteredItems();  
     });  
   }  
   setFilteredItems() {  
     this.items = this.dataService.filterItems(this.searchTerm);  
   }  
 }  

Kita sekarang mengimpor FormControl dan operator debounceTime. Kita mengatur variabel anggota baru yang disebut searchControl, dan kemudian kami membuat contoh baru dari control dan menugaskannya untuknya. Anda akan melihat bagaimana kami mengikatnya ke di template kita hanya dalam beberapa saat.

Dengan FormControl diatur, kita bisa subscribe valueChanges yang dapat diamati yang akan memancarkan beberapa data setiap kali nilai dari field input berubah. kita tidak hanya melihat perubahan, namun kami juga menghubungkan operator debounceTime, yang memungkinkan kita untuk menentukan waktu yang ingin kita tunggu sebelum memicu pengamatan. Jika nilainya berubah lagi sebelum debounceTime telah kedaluwarsa, maka nilainya tidak akan terpicu. Ini akan menghentikan fungsi setFilteredItems dari menjadi spam yang dipanggil dan, tergantung pada seberapa cepat jenis pengguna, seharusnya hanya dipanggil sekali per pencarian. Dalam hal ini, kita menetapkan debounceTime dari 700 milidetik, tetapi Anda dapat mengubah ini menjadi apa pun yang Anda suka.

Ubah home.ts seperti cuplikan code berikut: 

 <ion-header>  
  <ion-navbar>  
   <ion-title>  
    Ionic Blank  
   </ion-title>  
  </ion-navbar>  
 </ion-header>  
 <ion-content>  
   <ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl"></ion-searchbar>  
   <ion-list>  
     <ion-item *ngFor="let item of items">  
       {{item.title}}  
     </ion-item>  
   </ion-list>  
 </ion-content>  

Bagian terakhir dari project kita adalah untuk menghubungkan  kita ke searchControl yang kita buat, yang kita lakukan di sini dengan [formControl]. Perhatikan juga bahwa kita telah menghapus (ionInput), karena fungsi pemfilteran sekarang akan dipicu oleh Observable.

Improving the User Experience

Terakhir kita akan membuat effect untuk pencarian kita. Agar terdapat loading saat mencari data. Sederhana saja kita tambahkan spinner ke dalam tampilan kita.

Ubah home.ts seperti cuplikan code berikut: 

 <ion-header>  
  <ion-navbar color="primary">  
   <ion-title>  
    Ionic Blank  
   </ion-title>  
  </ion-navbar>  
 </ion-header>  
 <ion-content>  
   <ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"></ion-searchbar>  
   <div *ngIf="searching" class="spinner-container">  
     <ion-spinner></ion-spinner>  
   </div>  
   <ion-list>  
     <ion-item *ngFor="let item of items">  
       {{item.title}}  
     </ion-item>  
   </ion-list>  
 </ion-content>  

Kita telah menambahkan sekarang, yang hanya menunjukkan sedikit animasi loading, dan kita hanya menampilkan bahwa ketika pencarian dinilai benar (kita akan menentukan ini sebentar lagi). Perhatikan juga bahwa kita telah menambahkan listener (ionInput) kembali, tetapi kali ini kita akan menggunakannya untuk menentukan kapan pengguna mencari.

Ubah home.ts seperti cuplikan code berikut: 

 import { Component } from '@angular/core';  
 import { FormControl } from '@angular/forms';  
 import { NavController } from 'ionic-angular';  
 import { Data } from '../../providers/data';  
 import 'rxjs/add/operator/debounceTime';  
 @Component({  
  selector: 'page-home',  
  templateUrl: 'home.html'  
 })  
 export class HomePage {  
   searchTerm: string = '';  
   searchControl: FormControl;  
   items: any;  
   searching: any = false;  
   constructor(public navCtrl: NavController, public dataService: Data) {  
     this.searchControl = new FormControl();  
   }  
   ionViewDidLoad() {  
     this.setFilteredItems();  
     this.searchControl.valueChanges.debounceTime(700).subscribe(search => {  
       this.searching = false;  
       this.setFilteredItems();  
     });  
   }  
   onSearchInput(){  
     this.searching = true;  
   }  
   setFilteredItems() {  
     this.items = this.dataService.filterItems(this.searchTerm);  
   }  
 }  

Sekarang kita tambahkan sedikit style untuk memepercantik tampilan loading kita.

Ubah home.scss seperti cuplikan code berikut: 

 page-home {  
   .spinner-container {  
     width: 100%;  
     text-align: center;  
     padding: 10px;  
   }  
 }  

Kesimpulan 

Metode ini menggambarkan cara kita melakukan pencarian di Ionic Framework dengan high performance secara cepat dan sederhana

Kami mengambil sumber disini, terima kasih atas kerja kerasnya Josh.

https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/