Ionic-Typescript ile Yapılan Bir Mobile Uygulamada Arama Mimarisi
Selamlar,
Bu makalede, Ionic beta 4.12 Framework’ü üzerinde, Typescript kullanarak, Pipelar ve Helper sınıfları ile bir aramadan dönen sonuçlar listelenecektir. 3 harften sonra, basılan her harfe göre ilgili müşteri listesi, filitrelenerek ekrana getirilecektir.
customSearch.cs : Bir müşteri arama paneli, aşağıda görüldüğü gibi yazılmıştır.
- “<ion-searchbar placeholder=”Search” [(ngModel)]=”queryCustomer” (ionInput)=”getCustomer()”>”: Searchbar’a aranacak müşterinin her harfi basıldığında, “queryCustomer“‘a bağlanan aranacak kelime “getCustomer()” methodu ile ilgili WebApi servisinden sorgulanır.
- “<ion-item *ngFor=”let customer of customerList | Search: queryCustomer” (click)=”selectCustomer(customer.id,customer.name)”>”: Koşula uygun çekilen müşteri listesi (customerList) ekrana basılmadan önce Search Pipe Filter ile müşteri isimleri içinde aranan kelime bulunup, rengi değiştirilerek belirgin hale getirilir. Tıklanma durumunda seçilen müşteri bilgileri(id,name), bir üst sayfaya parametre olarak gönderilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ion-header> <ion-navbar color="primary"> <ion-title>Müşteri Arama</ion-title> </ion-navbar> <ion-toolbar> <ion-searchbar placeholder="Search" [(ngModel)]="queryCustomer" (ionInput)="getCustomer()"> </ion-searchbar> </ion-toolbar> </ion-header> <ion-content padding> <ion-list> <ion-item *ngFor="let customer of customerList | Search: queryCustomer" (click)="selectCustomer(customer.id,customer.name)"> <span [innerHTML]="customer.name "></span> </ion-item> </ion-list> </ion-content> |
searchPipe.ts: Bu filter’ın amacı *ngFor ile gezilen, custermer[] dizisindeki tüm isimler içinde aranan kelimeyi, belirginleştirmektir. Bu filter, istendiğinde projenin herhangi bir yerinde de rahatlıkla kullanılabilir.
- “if (searchKey.length >= minLength) {“: Default’da minimum 3 karakterden sonra arama işleminin yapılması sağlanmıştır.
- “cus.name = this.ReplaceName(cus.name, searchKey);”: Tüm “customer.nameler”, aranan farklı renkte “searchKey” ile değiştirilir. “ReplaceName()” yazının hemen devamında detaylıca incelenecektir.
- ReplaceName() :
Müşteri ism içinde aranan harfler, yandaki renk ile değiştirilir. Burada “this.helper.UppercaseFirst()” helper methodu kullanılmıştır. Çeşitli varyosyanlarda aranan müşteri ismi fontu, “#990066” ile değiştirilmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import { Pipe, PipeTransform } from '@angular/core'; import { CustomerSearchModel } from './Model/CustomerSearchModel'; import { HelperComponent } from './helper'; @Pipe({ name: 'Search' }) export class SearchPipe implements PipeTransform { constructor(private helper: HelperComponent) { } transform(value: CustomerSearchModel[], searchKey: string, minLength: number = 3): CustomerSearchModel[] { if (searchKey.length >= minLength) { value.forEach(cus => { cus.name = this.ReplaceName(cus.name, searchKey); }) } return value; } public ReplaceName(name, searchKey): string { return name.replace(searchKey, "<b><font color='#990066'>" + searchKey + "</font></b>") .replace(this.helper.UppercaseFirst(searchKey), "<b><font color='#990066'>" + this.helper.UppercaseFirst(searchKey) + "</font></b>") .replace(searchKey.toLowerCase(), "<b><font color='#990066'>" + searchKey.toLowerCase() + "</font></b>") .replace(searchKey.toUpperCase(), "<b><font color='#990066'>" + searchKey.toUpperCase() + "</font></b>") .replace(this.helper.UppercaseFirst(searchKey.toLowerCase()), "<b><font color='#990066'>" + this.helper.UppercaseFirst(searchKey.toLowerCase()) + "</font></b>") .replace(this.helper.UppercaseFirst(searchKey.toUpperCase()), "<b><font color='#990066'>" + this.helper.UppercaseFirst(searchKey.toUpperCase()) + "</font></b>") } } |
helper.ts: Projenin çeşitli yerlerinde, kullanılan araçların bulunduğu bir sınıftır. Kullanılacağı sayfaya, dependency injection ile constructor’da tanımlanır,
- UppercaseFirst(): Bakılacak text’in ilk harfi büyütülür.
- htclean() : İlgili text içindeki html taglar temizlenir.
- brclean(): Burda da gene igili text içindeki html kodlar temizlenir.
- removeHTMLTag(): Tüm html tagların temizlendiği, diğer 2 methodun, tek bir yerde kullanıldığı helper methodudur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Injectable } from '@angular/core'; @Injectable() export class HelperComponent { constructor() { } public UppercaseFirst(s: string): string { if (!s) { return ""; } let sList = s.split(''); sList[0] = s.charAt(0).toUpperCase() return sList.join(""); } private htclean(html: string) { if (!html) { return ""; } return html.replace(/<(?:.|\n)*?>/gm, ''); } private brclean(html: string) { if (!html) { return ""; } return html.replace(/<br( \/|\/|)>/gm, '\r\n'); } public removeHTMLTag(html: string) { return this.htclean(this.brclean(html)); } } |
getCustomer(): Search’e yazılan kelimelere göre müşterilerin çekildiği methoddur. Minimum 3 karakterden sonra arama yapılmaktadır. Datalar ilgili services’den “getCustomerData()” methodu ile çekilmektedir. En sonunda çekilen tüm liste “name” yani ad alanına göre sıralanmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public getCustomer() { if (this.queryCustomer.length > 2 || this.queryCustomer.length == 0) { this.service.getCustomerData(this.queryCustomer).then(result => { this.customerList = result.list.sort((a, b) => { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; }); }); } } |
getCustomerData: Tuşlanan customer name alanına göre aksi belirtilmedikçe 10 kayıt, ilgili servisden çekilmekte ve “Json” olarak geri dönülmektedir. Geri dönüş tipi “Promise<any>” olarak belirtilmesi, tamamlanmasını “.then()” ile beklenilmesine olanak vermektedir.
|
1 2 3 4 5 6 7 8 9 |
root: string = "http://xxxxx.xxxxx.com/" private baseCustomerUrl = this.root + "api/Customer/getcustomers"; constructor(private http: Http) { } getCustomerData(key: string = "", count: number = 10): Promise<any> { return this.http.get(`${this.baseCustomerUrl}?value=${key}&count=${count}`) .toPromise() .then(res => res.json(), err => console.log(err)); } |
selectCustomer(): Listelenen müşterilerden biri seçildiğinde, seçilen müşterinin ID ve Name’i değişkenlere atılır.
|
1 2 3 4 5 |
public selectCustomer(customerID, customerName) { this.selectedCustomerID = customerID; this.selectedCustomerName = customerName; this.viewCtrl.dismiss(); } |
|
1 2 3 4 |
ionViewWillLeave() { this.navCtrl.getPrevious().data.selectedCustomerID = this.selectedCustomerID; this.navCtrl.getPrevious().data.selectedCustomerName = this.helper.removeHTMLTag(this.selectedCustomerName); } |
Aşağıda Ionic Framework’ünde Parent’dan Detail’a ve Detail’dan da Parent’a geçişlerde, hangi methodlar hangi sırada çağrılıyor gösterilmiştir. Yukarıda kullandığımız “ionViewWillLeave()”methodunda, Child sayfadan, Parrent sayfaya geçiş esnasında, customer parametreler üzerinde işlem yapılmasını sağlar.
<span [innerHTML]=”customer.name “></span>: Sıralanan customer[] list nameleri içindeki Html tagler yani, rengi değişen string ifadelerin htmllerinin render olması için <span> html elementinin [innerHTML]’ine attribute olarak yazılmıştır.
Geldik bir makelenin daya sonuna. Bu makalede Ionic mobile uygulamlar içinde Arama, Harita ve Camera gibi özelliklerin bulunduğu, müşterilerin nasıl listelenmesi gerektiği gibi yapılar detaylıca anlatılmıştır.
Yeni bir makalede görüşmek üzere hepinize hoşçakalın.
Böyle bir şeye ihtiyacım vardı bide okuyup olayı anlayınca çok faydalı oluyor.
Teşekkürler Bora Hocam :)