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;
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.
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 query ilgili index iç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:
Kaynaklar
Okuduğunuz için teşekkürler! Sorularınız varsa sorabilirsiniz ve beni buradan veya merttoptas.com ‘dan takip edebilirsiniz.
