Flutter’da Algolia Kullanarak Arama Yapmak

İlk olarak Algolia’in ne olduğu ve Cloud Functions kullanarak Firestore’daki veriyi nasıl Algolia’ya deploy edileceğini öğrenmek için bu yazıyı okuyabilirsiniz.

Bilindiği üzere arama, bir uygulamanın en önemli özelliklerinden birisidir. Özellikle çok fazla değişken veya kategori varsa kullanıcının arama fonksiyonunu kullanarak hızlıca istediği sonuca ulaşması gerekir. API veya lokalde verileriniz varsa bunu kendiniz de yapabileceğiniz gibi eğer Cloud Firestore kullanıyorsanız, Full-Text özelliğinden yararlanmak için Algolia kullanmalısınız.

Flutter’da Algolia servisini kullanmak için elimizde bir Algolia hesabı ve içinde kullanacağımız veriler olmalı. Algolia kullanmamızdaki amaç, uygulamada detaylı ve hızlı bir şekilde kullanıcıya arama yaptırmayı sağlamaktır.

Algolia’daki verimiz şöyle;

Image for post

Algolia servisinin kolaylığı ise örneğin “name” keyine bağlı verilerde arama yapıyorsak eğer “al..” diye yazdığımızda “algolia, alg..” diyerek içeren tüm kelimeleri getirecektir. Böylelikle liste içinde kelime yazımında hata yapılsa bile doğru sonuca ulaştıracaktır.

Paket Yüklenmesi

Algolia paketi pub.dev de bulunuyor. Algolia paketine buradan ulaşabilirsiniz.

Image for post

Ardında pub get diyerek paketi ekleyelim.

Search Servisi

Search Servise isimli class yaratalım. Burada servisin keylerini tanımlayacağız. Aşağıdaki gibi ilgili yere kendinizin keyini yazıp çalıştırabilirsiniz.

Arama Sayfası

Arama sayfası basitçe bir TextField olacak ve kelime yazıldıkça Listview yenilecek. İsterseniz TextField yanına bir arama butonu ekleyerek sadece arama butonuna basıldığında Listview’ı güncelleyebilirsiniz. Bu tamamen size kalmış bir durum.

Listview ise;

ItemCount ile görüldüğü üzere _results listesi kullanıyor. Çalışma mantığı ise şöyle TextField’a string değer girildikçe değerler Algolia API’a istek atıp fonksiyondan gelen değerle _results listesi güncelleniyor ve ekranda Listview güncellenmiş oluyor.

Arama Fonksiyonu

Öncelikle TextField widgetı bir controller parametresi istediğinden dolayı TextEditingController oluşturduk.

Sonrasında ise içine AlgoliaObjectSnapshot alan bir liste oluşturduk. AlgoliaObjectSnapshot sebebi ise query içinde dataya istek attığı için snapshot şeklinde veri geliyor ve bunu liste halinde gösteriyoruz.

Future fonksiyonu olan _search ise bizim asıl işimizi gören fonksiyondur. Burada string bir değeri alıp queryilgili indexiçinde texti search eder ve gelen değeri _results listesi içinde döner. Sonrasında ise _results listesi ListView halinde ekranda güncellenir.

Ve Çıktı

Ve görüldüğü gibi veriler geldi ve dilediğiniz gibi arama yapabilirsiniz.

Uygulamanın Github Reposu:

https://github.com/merttoptas/algolia_example

İnternet sitesi https://www.merttoptas.com
Yazı oluşturuldu 18

Bir cevap yazın

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

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön
%d blogcu bunu beğendi: