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.

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.

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.

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.

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.

selectCustomer(): Listelenen müşterilerden biri seçildiğinde, seçilen müşterinin ID ve Name’i değişkenlere atılır.

ionViewWillLeave() : customerSearch.html sayfası, deal.html sayfasını child’ıdır. Child’dan Parent sayfaya dönme zamanında , seçile müşterinin ismi, “helper.removeHTMLTag()” methodu ile “html” taglardan temizlenerek geri dönülmektedir.

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.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Tagi dedi ki:

    Böyle bir şeye ihtiyacım vardı bide okuyup olayı anlayınca çok faydalı oluyor.
    Teşekkürler Bora Hocam :)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir