Multi-Platform Flutter Firestore (Türkçe/Turkish)

Google’ın CodeLabs platformu üzerinde, yakın zamanda yayınlanan Multi-Platform Firestore Firestore isimli içeriğini geliştirirken çok eğlendim ve sizlere bu Codelab’i Türkçe olarak çevirip yorumlamaya çalışacağım. Orjinal içeriğe buradan erişebilirsiniz. 👉 Multi-Platform Firestore Firestore

Codelab’ın Hedefi:

Bu Codlab’da, Flutter ve Cloud Firestore tarafından desteklenen çok platformlu bir restoran önerisi uygulaması oluşturacağız. Bitmiş uygulama Android, iOS ve web üzerinde tek bir Dart kod tabanından çalışacak.

Bu Eğitimde Neler Öğreneceğiz?

• Bir Flutter uygulamasıyla birlikte Cloud Firestore’a veri okuma ve yazma,
• Cloud Firestore üzerinde gerçekleşen değişiklikleri gerçek zamanlı olarak görme,
• Flutter’da GraphQL kod üretiminin nasıl yapıldığı.
• Cloud Firestore verilerini güvenceye almak için Firebase Kimlik Doğrulaması ve güvenlik kuralları
• Karmaşık Cloud Firestore sorguları ve işlemleri yazma

Nelere İhtiyacımız Var?

Flutter veya Firestore’a aşina değilseniz, önce Flutter için Firebase Codlab’ini tamamlamalısınız.

Bu Codlab’i tamamlamak için ihtiyacımız olanlar:

• Dart ve Flutter eklentileriyle yapılandırılmış Android Studio veya VS Code gibi seçtiğiniz bir IDE veya metin editörü.
• Google Chrome tarayıcı ve Chrome Geliştirme Araçları’na biraz aşinalık.
• Web desteği etkinleştirilmiş yeni bir Flutter sürümü (“beta” kanalı veya daha yenisi). Web desteğini bu Codlab’e devam ederken aktif edebilirsiniz. Daha fazla Flutter Web desteği için flutter’ın ilgili sayfasını ziyaret edebilirsiniz. 👉 https://flutter.dev/web
• Bu kod etiketinin son kısmında resmi firebase komut satırı araçlarını kurmak için npm aracı.
• (İsteğe bağlı) Uygulamanızı Android için derlemek istiyorsanız bağlı bir Android cihaz veya emülatör.
• (İsteğe bağlı) Uygulamanızı iOS için derlemek istiyorsanız, XCode’un yeni sürümüne sahip bir Mac.

Not: Komut satırı aracına sahip herhangi bir metin düzenleyicisini kullanarak Flutter ile uygulamalar oluşturabilirsiniz. Ancak, daha da iyi bir deneyim için bir IDE eklentisi (Android Studio, IntelliJ veya VS Code için) kullanmanızı öneririz. Bu eklentiler size kod tamamlama, sözdizimi vurgulama, widget düzenleme yardımları, çalıştırma, hata ayıklama desteği ve daha fazlasını sağlar.

Firebase projesi oluşturma

1. Firebase konsolunda Add Project’i tıklatın ve Firebase projesine FriendlyEats adını verin. Firebase projenizin proje kimliğini unutmayın (veya tercih ettiğiniz proje kimliğini ayarlamak için Edit simgesini tıklayın).
2. “Create project” e tıklayın.

Önemli: Firebase projenize FriendlyEats adı verilir, ancak Firebase otomatik olarak friendlyeats-1234 biçiminde benzersiz bir proje kimliği atar. Bu benzersiz tanımlayıcı, projenizin gerçekte nasıl tanımlandığını belirtir, FriendlyEats sadece görünen addır.

Oluşturduğunuz uygulama, web’de bulunan birkaç Firebase hizmetini kullanır:

• Firebase Authentication : kullanıcılarınızı kolayca tanımlamak için.
• Cloud Firestore : yapılandırılmış verileri Buluta kaydetmek ve veriler güncellendiğinde anında bildirim almak için.
• Firebase Hosting : Static assetleri barındırmak ve sunmak için.

Ardından, Firebase konsolunu kullanarak hizmetleri yapılandırma ve etkinleştirme adımlarını izleyelim.

Anonim Kimlik Doğrulamasını Etkinleştiriyoruz

Kimlik doğrulaması bu Codlab’in odak noktası olmasa da, uygulamanızda bir tür kimlik doğrulaması olması önemlidir. Anonymous login kullanacağız; bu, kullanıcının giriş yapmadan sessizce oturum açtığı/açabileceği anlamına gelir.

Anonymous login’i aktif etmek için:

1. Firebase konsolunda, sol gezinme çubuğundaki Develop bölümünü bulun.
2. Authentication’nı tıklatın ve sonra Sign-in method sekmesini tıklayın (veya doğrudan Firebase konsoluna gidin).
3. Anonymous Oturum Açma Provider’ını etkinleştirin ve Save’i tıklayın.

Anonymous login’i etkinleştirmek, uygulamanın web uygulamasına eriştiklerinde kullanıcılarımızın sessizce oturum açmasına izin verir. Daha fazla bilgi edinmek için anonymous authentication documentation(en) bakın.

Cloud Firestor’u Aktifleştirelim

Uygulama restoran bilgilerini kaydetmek ve derecelendirme almak için Cloud Firestore kullanır.

Cloud Firestore’u etkinleştirmek için:

1. Firebase konsolunun Develop bölümünde Database’i tıklayalım.
2. Cloud Firestore bölmesinde Create database’i tıklayalım.

3. Start in test mode seçeneğini seçin ve güvenlik kuralları hakkındaki yasal uyarıyı okuduktan sonra Enable’ı tıklayın.

Test modu, geliştirme sırasında veritabanına serbestçe yazabilmemizi sağlar. Veritabanımızı daha sonra daha güvenli hale getireceğiz.

Örnek kodu alalım

Github reposunu Clonlayalım

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

Örnek kod 📁friendlyeats-flutter dizinine klonlanmalıdır. Şuandan itibaren kodlarımızı ve komutları bu dizin üzerinde gerçekleştirdiğinizden emin olun.

cd friendlyeats-flutter

Başlangıç ​​uygulamasını içe aktaralım

📁friendlyeats-flutter dizinini tercih ettiğiniz IDE ile açın . Bu dizin henüz işlevsel olmayan bir restoran tavsiye uygulamasının kodlarını içeriyor.

Bu Codelab ile birlikte kodumuzu düzenleyerek işlevsel hale getireceğiz.

Üzerinde çalışılacağımız dosyaları bulalım

Bir Flutter uygulaması için normal giriş noktası lib / main.dart dosyası olsa da, bu Codelab’da, nesnelerin veri tarafına odaklanacağız.

Projemizde aşağıdaki dosyaları bulalım:

lib / src / model / data.dart: Bu Codlab sırasında değiştireceğimiz ana dosya. Firestore’dan veri okumak ve yazmak için tüm Logicleri içerir.

web / index.html: Uygulamanızı başlatmak için tarayıcının yüklediği dosya. Web için Firebase Librarylerini yüklemek ve başlatmak için bu dosyayı değiştireceğiz.

Firebase ve Flutter CLI’yı hazırlayalım

Firebase CLI

Firebase command-line interface (CLI), web uygulamamızı ve yapılandırmamızı Firebase’e doğrudan projenizdeki dosyalardan dağıtmamıza olanak tanır.

Not: CLI’yi kurmak için, genellikle NodeJS ile birlikte gelen npm’i yüklememiz gerekir.

• Aşağıdaki npm komutunu çalıştırarak CLI’yı yükleyin:

npm -g install firebase-tools

Çalışmıyor mu? Npm izinlerini değiştirmeniz gerekebilir.

• Aşağıdaki komutu çalıştırarak CLI’nın doğru yüklendiğini doğrulayalım:

firebase --version

Firebase CLI sürümünün v7.4.0 veya üstü olduğundan emin oluyoruz.

• Aşağıdaki komutu çalıştırarak Firebase CLI’yi yetkilendirelim:

firebase login

Önceki adımda klonladığımız repoda, bazı hazır proje yapılandırmaları lan bir firebase.json dosyası zaten var. Şimdi uygulamanın çalışma kopyasını Firebase projenizle ilişkilendirmeniz gerekiyor:

• Komut satırınızın uygulamamızın yerel dizinine eriştiğinden emin olun.
• Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendiriyoruz:

firebase use --add

• İstendiğinde, Proje Kimliğinizi seçin ve Firebase projenize bir takma ad verin.

Birden fazla ortamınız varsa (üretim, aşamalandırma vb.) Takma ad yararlıdır. Ancak, bu kod etiketi için, yalnızca default alliasını kullanın.

• Komut satırında verilen talimatları izleyin.

Flutter için web desteğini etkinleştir

Flutter uygulamamızı web’de çalışacak şekilde derlemek için bu özelliği (şu anda beta sürümünde) etkinleştirmemiz gerekiyor. Web desteğini etkinleştirmek için aşağıdaki adımları izleyeceğiz:

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

İpucu: config komutunu yalnızca bir kez çalıştırmamız yeterli. Web desteğini etkinleştirdikten sonra oluşturduğunuz her Flutter uygulaması web için de derlenecektir.

IDE’nizdeki Cihazlar açılır listesinin altında veya flutter devices komutunun çıktısında Chrome ve Web sunucusunun listelendiğini görmelisiniz.

Chrome cihazı otomatik olarak Chrome’u başlatır. Web Server, herhangi bir tarayıcıdan yükleyebilmeniz için uygulamayı barındıran bir sunucu başlatır.

DevTools’u kullanabilmek için geliştirme sırasında Chrome tarayıcısını, diğer tarayıcılarda test etmek istediğinizde Web sunucusunu kullanın.

Web’e özgü Firebase yapılandırması

Bir Firebase projesi oluşturduktan sonra, bir (veya daha fazla) uygulamayı o Firebase projesini kullanacak şekilde yapılandırabiliriz. Bunun için aşağıdakileri yapacağız:

• Firebase’e uygulamanızın platforma özel kimliğini kaydedin.
• Uygulamanız için yapılandırma dosyaları oluşturun.
• Yapılandırmayı proje klasörlerinizdeki doğru noktaya ekleyin.

Flutter uygulamanızı birden çok platform için geliştiriyorsanız, uygulamanızın çalıştığı her platformu aynı Firebase projesine kaydettirmeniz gerekir.

Bu Codelab web platformuna odaklanır, iOS ve Android platformları için eğitimler, Flutter Firebase Codlab’inde(en) yer alır. FriendlyEats uygulamanıza Android veya iOS için destek eklemek istiyorsanız bu Codelab’e gidebilirsiniz.

İpucu: Zaman kazanmak için Firebase’i şimdilik yalnızca web platformuyla kurmanızı öneririz. Daha sonra başka platformları da ekleyebilirsiniz.

Flutter uygulamamızda, web üzerinde çalışırken uygulamamızın giriş noktası olarak kullanılan özel bir web / index.html dosyası vardır. Web uygulamamızın Firebase backend’ine bağlanabilmesi için bu giriş noktasını projeniz için belirli bir yapılandırmayla değiştirmelisiniz.

Web için yapılandırma

• Firebase konsolunda, sol gezinme çubuğunda Project Overview’ı seçin ve Web altında yer alan Get started by adding Firebase to your app butonuna tıklayın. Sol tarafta yer alan iletişim kutusunu görmelisiniz.
• Uygulamanıza bir takma ad verin. Bu, Firestore konsolunda uygulamanızın web sürümünü tanımlamak için kullanılan değerdir.
• Register App’e tıklayın
• Uygulamanızı kaydettikten sonra, Add Firebase SDK adımı size Flutter uygulamanızın web / index.html dosyasına yapıştırmanız gereken bazı kodlar verir. Tamamlandığında, şuna benzer görünmelidir:

web/index.html

İpucu: Kodu Firebase’den index.html dosyanıza yapıştırabileceğiniz birkaç yer vardır. main.dart.js dosyasını yükleyen kod scriptinden önce yapıştırdığınızdan emin olun.

Önemli: Uygulama bilgilerini, bu kod etiketinde sağlanan koddan değil, Firebase konsolundan kopyalayın. Her Firebase uygulamasının farklı, benzersiz parametreleri vardır. Kod örneğindeki değerler örnektir ve sizin kodunuzda çalışmayacaktır.

• Yeni yapıştırdığınız kodda bir TODO olduğuna dikkat edin. Bunu şimdi düzeltin.Codelab Firebase Auth ve Firestore kullandığından bu ürünler için komut dosyası etiketlerini şimdi eklemelisiniz:

web/index.html

Not: Projenizi oluştururken Firebase Analytics’i etkinleştirdiyseniz, başlatma kodunuzda firebase-analytics.js ve firebase.analytics (); fonksiyonlarının olması normladir. Analytics komut dosyasının yanına Firebase Auth ve Firestore komut dosyalarını eklemeniz yeterli olacaktır.

• Web / index.html dosyanızı kaydedin ve Add Firebase to your web app iletişim kutusunda Continue to console’u tıklayın.
• Flutter uygulamanız Firebase’e bağlanmaya hazır!

İpucu: Firebase uygulamanız için web initialize snippet’ini almanız gerekirse, bunu Project Settings > General > Your apps > Your web app > Firebase SDK Snippet yolunu izleyerek bulabilirsiniz.

(İsteğe bağlı) Mobil cihazlara özel Firebase yapılandırması

İpucu: Uygulamanıza şu anda Android veya iOS desteği eklemek istemiyorsanız bunu atlayın.

Firebase desteğini etkinleştirmek için gereken kod değişikliklerinin çoğu üzerinde çalıştığımız projeye zaten eklendi. Bununla birlikte, mobil platformlar için destek eklemek için, web için az önce yaptığımız işleme benzer bir işlemi izlememiz gerekiyor:

• İstenilen platformu Firebase projesine kaydedin
• Platforma özgü yapılandırma dosyasını indirin ve koda ekleyin.

Önemli: Kullanmak istediğiniz tüm platformları aynı Firebase projesine kaydetmeniz gerekir.

Flutter uygulamamızın üst düzey dizininde ios ve android adlı alt dizinler var. Bu dizinler, sırasıyla iOS ve Android için platforma özgü yapılandırma dosyalarını içerir.

iOS’i Yapılandırın

• Firebase konsolunda, sol gezinme çubuğunda Project Overview’ı seçin ve Get started by adding Firebase to your app’in altındaki iOS butonuna tıklayın.

Aşağıdaki iletişim kutusunu görmelisiniz:

• Sağlanması gereken önemli değer iOS bundle ID dir. Sonraki üç adımı uygulayarak paket kimliğini alabilirsimiz.

İpucu: iOS paket kimlikleri hakkında daha fazla bilgi için Uygulama Kimlikleri ve Paket Tanımlayıcıları nedir bölümünü okuyun.(en)

• Komut satırında, Flutter uygulamanızın en üst düzey dizinine gidin.
• Xcode’u açmak için open ios/Runner.xcworkspace komutunu çalıştırın.
• Xcode’da, sağ bölmedeki Genel sekmesini görmek için sol bölmedeki Runner’ı tıklatın. Bundle Identifier değerini kopyalayın.

Firebase iletişim kutusuna geri dönün, kopyalanan Bundle Identifier’ı iOS bundle ID alanına yapıştırın ve Register App’i tıklayın.

Not: Şirketinizin ve projenizin gerçek değerleri, Flutter uygulamanızı adlandırdığınız şeye bağlıdır.

• Firebase’de devam ederek GoogleService-Info.plist yapılandırma dosyasını indirmek için talimatları izleyin.
• Xcode a geri dönün, Runner’ın Runner olarak da adlandırılan bir alt klasörü olduğuna dikkat edin (önceki resimde gösterilmiştir)
• GoogleService-Info.plist dosyasını (yeni indirdiğiniz) bu Runner alt klasörüne sürükleyip bırakın.
• Xcode’da görünen iletişim kutusunda End’i tıklayın.
• Firebase konsoluna geri dönün. Kurulum adımında Next’i tıklayın, kalan adımları atlayın ve Firebase konsolunun ana sayfasına dönün.

Flutter uygulamanızı iOS için yapılandırmayı tamamladınız!

Android’i yapılandırın

• Firebase Konsolu’nda, sol gezinme çubuğunda Project Overview’ı seçin ve Get started by adding Firebase to your app altındaki Android butonuna tıklayın.

Not: Zaten bir uygulama eklediyseniz (örneğin, önceki bölümde ki iOS uygulaması), Add app’i tıklayın.

Aşağıdaki iletişim kutusunu göreceksiniz:

• Sağlanması gereken önemli değer Android package name dir. Aşağıdaki iki adımı uyguladığınızda paket adını alırsınız:
• Flutter uygulama dizininizde bulunan android/app/src/main/AndroidManifest.xml dosyasını açın .
• manifestöğesinde packageözniteliğinin String değerini bulun. Bu değer Android paket adıdır (com.yourcompany.yourproject gibi). Bu değeri kopyalayın.
• Firebase iletişim kutusunda, kopyalanan paketin adını Android package name alanına yapıştırın.
• Bu Codelab için Debug signing certificate SHA-1 alanına gerek yoktur. Bunu boş bırakın.
• Register App’e tıklayın.
• Firebase’de devam ederken, google-services.json yapılandırma dosyasını indirmek için talimatları izleyin.
• Flutter uygulama dizininize gidin ve google-services.json dosyasını (yeni indirdiğiniz) android / app dizinine taşıyın.
• Firebase konsoluna geri dönün, kalan adımları atlayın ve Firebase konsolunun ana sayfasına geri dönün.
• Tüm Gradle yapılandırması zaten kontrol edilmiş durumda. Uygulamanız hala çalışıyorsa, gradle’ın bağımlılıkları yüklemesine izin vermek için uygulamayı kapatın ve yeniden build alın.

Android için Flutter uygulamanızı yapılandırmayı tamamladınız!

Uygulamamızı Localde Çalıştıralım

Uygulamanız üzerinde çalışmaya başlamaya hazırsınız! İlk olarak, uygulamayı yerel olarak çalıştırın. Artık uygulamayı yapılandırdığınız herhangi bir platformda çalıştırabilirsiniz.

Aşağıdaki komutla hangi cihazların kullanılabilir olduğunu kontrol edelim:

flutter devices

Hangi cihazların kullanılabilir olduğuna bağlı olarak, önceki komutun çıktısı şuna benzemelidir:

3 connected devices:

Android SDK built for x86 • emulator-5554 • android-x86    • Android 7.1.1 (API 25) (emulator)
Chrome                    • chrome        • web-javascript • Google Chrome 79.0.3945.130
Web Server                • web-server    • web-javascript • Flutter Tools

Bu Codlab’de Chrome’u kullanacağız.

• Aşağıdaki Flutter CLI komutunu çalıştıralım:

flutter run -d chrome

• Flutter Building your application for the web… ile başlar ve çalışan uygulama ile otomatik olarak bir Chrome penceresi açar.

İpucu: Flutter’ın çalıştığı terminal penceresi uygulamanızı hızla yeniden yüklemenizi sağlar. Uygulamanızı yeniden başlatmak için terminaldeki r tuşuna veya uygulamanızı tamamen yeniden oluşturmak ve tarayıcı penceresini yeniden yüklemek için Shift + R tuşlarına basabilirsiniz. Bu ipucu, uygulamanızın bağımlılıklarını değiştirmediğiniz sürece çalışır; bu durumda Flutter çalıştırma işlemini durdurmanız ve yeni yapılandırmanın alınması için yeniden başlatmanız gerekir.

Şimdi, Firebase projenize bağlı olan FriendlyEats kopyanızı görmelisiniz.

Uygulama Firebase projenize otomatik olarak bağlanır ve sessizce sizi anonim bir kullanıcı olarak oturum açar.

Cloud Firestore’a veri yazma

Bu bölümde, uygulamanın kullanıcı arayüzünü doldurmak için Cloud Firestore’a bazı veriler yazıyoruz. Bu, Firebase konsolu kullanılarak manuel olarak yapılabilir, ancak temel bir Cloud Firestore yazısının bir örneğin görmek için bunu uygulamada yapacağız.

Veri Modeli

Firestore verileri koleksiyonlara, belgelere, alanlara ve alt koleksiyonlara ayrılır. Her restoran, restaurants adı verilen üst düzey bir koleksiyonda belge olarak saklanır.

Daha sonra, her bir incelemeyi, her restoranın içinde ratingsolarak adlandırılan bir alt koleksiyonda depolarsınız.

Firestore için restoran ekle

Restoran uygulamanızın içinde ki bir ana modeldir. restaurants koleksiyonuna restoran belgesi ekleyen bir kod yazacağız.

• Lib / src / model / data.dart dosyasını açın.
• addRestaurant fonksiyonunu bulun.
• Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

Yukarıdaki kod, restaurantskoleksiyonuna yeni bir belge ekler.

Bunu önce bir Cloud Firestore Koleksiyonundan restaurants referans alarak ve ardından verileri ekleyerek yapar.

Belge verileri, Firestore eklentisi için Map a dönüştürülmesi gereken bir Restaurantnesnesinden gelir.

Birkaç Restoran Ekleyelim

• Flutter Uygulamamızı yeniden oluşturalım ve yenileyelim (uygulamayı çalıştıran terminal penceresinde Shift + R ile yapabilirsiniz).
• ADD SOME’a tıklayın.

Uygulama otomatik olarak rastgele bir restaurantsnesnelerini içeren bir küme oluşturur ve addRestaurantişlevini çağırır. Ancak, verileri almayı uygulamanız gerektiğinden web uygulamanızda verileri görmeyeceksiniz. (İleriki aşamalarda göreceksiniz).

Firebase konsolundaki Geliştir> Veritabanı> Cloud Firestore sekmesine giderseniz, restoranlar koleksiyonunda yeni belgeler görmelisiniz!

Firebase konsolundaki Develop > Database > Cloud Firestore tab sekmesine giderseniz, restaurantskoleksiyonunda yeni verileri görebilirsiniz.

Tebrikler, web uygulamamızdan Cloud Firestore’a veri yazdınız!

Cloud Firestore’daki verileri görüntüleme

Şimdi, Cloud Firestore’dan nasıl veri alacağımızı ve uygulamamızda nasıl görüntüleyeceğimizi görelim. 2 temel adım bulunmakta; Bunlar sorgu oluşturma ve anlık görüntü akışını dinleme.

İlk olarak, filtrelenmemiş restoranların varsayılan listesini sunan sorguyu oluşturalım.

1. lib/src/model/data.dart dosyasına geri dönelim.
2. loadAllRestaurants fonksiyonunu bulun.
3. Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

Yukarıdaki kod, ortalama derecelendirmelerine göre sıralanan, restaurants adlı üst düzey koleksiyondan en fazla 50 restoran alan(şu anda tümü sıfır) bir sorgu oluşturur.

Şimdi akıştan dönen her bir QuerySnapshot ı render alabileceğimiz Restaurant verisine dönüştürmemiz gerekiyor.

Not: Akışa dinleyici aboneliği uygulama tarafından işlenir, böylece StreamSubscription üzerinde bir referans tutabilir. Bu şekilde, uygun olduğunda Akış dinlemeyi durdurmak, bellek sızıntılarını ve diğer durum yönetimi hatalarını önlemek için uygulamanın yaşam döngüsü olaylarını kullanabilirsiniz. Bunun nasıl yapıldığını merak ediyorsanız, lib / src / home_page.dart dosyasındaki private _currentSubscription üyesinin kullanımlarını kontrol edin.

Bir QuerySnapshot’dan Restaurant bilgilerini restaurants koleksiyonundan çıkarmak için:

1. lib/src/model/data.dart dosyasına geri dönelim.
2. getRestaurantFromQuery fonksiyonunu bulun.
3. Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

getRestaurantsFromQuery methodu daha önce oluşturduğumuz Queryden her yeni bir QuerySnapshot çağırıldığında çağırılır. QuerySnapshots, Firestore’un bir Querydeki değişikliklerden uygulamanızı gerçek zamanlı olarak bilgilendirmek için kullandığı mekanizmadır.

Bu yöntem, anlık görüntüde bulunan tüm belgeleri Flutter uygulamamızın başka bir yerinde kullanılabilecek Restaurantnesnelerine dönüştürür.

Artık her iki yöntemi de uyguladığımıza, uygulamanızı yeniden oluşturup yeniden yüklediğinize göre Firebase konsolunda daha önce gördüğünüz restoranların uygulamada görünür olduğunu doğrulayabilirsiniz. Bu bölümü başarıyla tamamladıysanız, uygulamanız Cloud Firestore ile veri okuyor ve yazıyor olamalıdır.

Restoran listeniz değiştikçe, bu dinleyici otomatik olarak güncellenir. Firebase konsoluna gidip bir restoranı manuel olarak silmeyi veya adını değiştirmeyi deneyin; değişikliklerin sitenizde hemen göründüğünü göreceksiniz!

Not: Belgeleri, Query.get() yöntemini kullanarak gerçek zamanlı güncellemeleri dinlemek yerine bir kez Cloud Firestore’dan almak da mümkün.

Veri Alma

Şimdiye kadar, güncellemeleri gerçek zamanlı olarak almak için onSnapshot’ı nasıl kullanacağımızı öğrendik; ancak, bu her zaman istediğiniz şey olmayabilir. Bazen, verileri yalnızca bir kez almak daha mantıklı olabilir.

Kullanıcılar uygulamadaki belirli bir restoranı tıkladıklarında, kimliğinden belirli bir restoranı yükleyen bir yönteme ihtiyacınız olacak.

1. lib/src/model/data.dart dosyasına geri dönelim.
2. getRestaurant fonksiyonunu bulun.
3. Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

Kod, istediğiniz restoranın bilgilerini içeren bir Future <DocumentSnapshot> almak için get() kullanır. Bunu then() ile hazır olduğunda DocumentSnapshot’ı Restaurant nesnesine dönüştüren bir işleve bağlamanız gerekiyor.

Bu yöntemi uyguladıktan sonra, her restoranın ayrıntı sayfasını görüntüleyebilirsiniz.

1. Flutter’ın çalıştığı terminalde Shift + R tuşlarına basarak uygulamanızı yenileyin.
2. Listedeki bir restorana tıkladığınızda restoranın ayrıntılar sayfasını görmelisiniz:

Bir Transaction’a Veri Yazma

Şimdi, kullanıcıların restoranlara yorum gönderme olanağını ekleyebiliriz. Şimdiye kadar tüm yazılarımız atomik ve nispeten basitti. yorumlardan herhangi biri hatalıysa, büyük olasılıkla kullanıcıdan yorum işlemini yeniden denemesini ister veya uygulamamız yorumlama işlemini otomatik olarak yeniden dener.

Uygulamamızın bir restorana derecelendirme eklemek isteyen birçok kullanıcısı olacaktır, bu nedenle birden çok okuma ve yazmayı koordine etmemiz gerekiyor. İlk olarak, inceleme gönderilmelidir ve daha sonra restoranın derecelendirme sayısı ve ortalama derecelendirmesinin güncellenmesi gerekir. Biri başarısız olur, diğeri başarısız olmazsa, tutarsız bir durumda kalırız. Veritabanının bir bölümündeki veriler başka bir bölümündeki verilerle eşleşmeş.

Neyse ki, Cloud Firestore, tek bir atomik işlemle birden çok okuma ve yazma gerçekleştirmenize olanak tanıyan ve verilerinizin tutarlı kalmasını sağlayan bir işlevsellik sağlar.

1. lib/src/model/data.dart dosyasına geri dönelim.
2. getReview fonksiyonunu bulun.
3. Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

Yukarıdaki işlev, restaurantId tarafından temsil edilen Restaurant’ın yeni bir sürümünü getirerek başlayan bir işlemi tetikler.

Ardından, restoran dökümanının başvurusunda avgRating ve numRatings öğelerinin sayısal değerlerini güncelleştirirsiniz.

Not: Derecelendirme eklemek, bu özel Codelab üzerinde bir işlem kullanmak için iyi bir örnekt olabilir. Ancak, bir Production app’de, kullanıcıların manipülasyonunu önlemek için güvenilir bir sunucuda ortalama derecelendirme hesaplaması yapmalısınız. Bunu yapmanın iyi bir yolu, derecelendirme belgesini doğrudan istemciden yazmak ve ardından yeni restoran ortalama derecelendirmesini güncellemek için Bulut İşlevlerini kullanmaktır.

Uyarı: Sunucuda bir transaction başarısız olduğunda, geri callback de tekrar tekrar yürütülür. Uygulama durumunu değiştiren logic’i asla transaction callback’in içine yerleştirmeyin.

Yeni eklediğiniz kodu test etmek için:

1. Flutter’ın çalıştığı terminalde Shift + R tuşlarına basarak uygulamanızı yenileyin.
2. Herhangi bir Restoran detay sayfasına gidin.
3. Bazı yorumlar ekleyin. Bunu şu şekilde yapabilirsiniz:

• Yorum yoksa, boş listede ADD SOME butonuna tıklayın
• “ +” (FloatingActionButton’a) tıklayıp kendi yorumunuzu yazın

Verileri sıralama ve filtreleme

Şu anda, uygulama bir restoran listesi görüntülüyor, ancak kullanıcının ihtiyaçlarına göre filtreleme yapmasının bir yolu yok. Bu bölümde, filtrelemeyi etkinleştirmek için Cloud Firestore’un gelişmiş sorgulamasını kullanırsınız.

Tüm “Dim Sum” restoranlarını getirmek için basit bir sorgu örneği:

Adından da anlaşılacağı gibi where() yöntemi, sorguyu yalnızca alanlar üzerinde ayarladığınız kısıtlamaları karşılayan koleksiyonun üyelerini indirmeye zorlar. Bu durumda, yalnızca kategorinin Dim Sum’a eşit olduğu restoranları indirir.

Benzer şekilde, döndürülen verileri sıralayabilirsiniz:

OrderBy() yöntemi, sorguyu “Dim Sum” restoranlarını fiyat özelliklerine göre ucuzdan pahalıya sıralar.

Uygulamada, kullanıcı popülerliğe göre sıralanmış Şanlıurfa Kebap veya Ankara Pide gibi belirli sorgular oluşturmak için birden fazla filtre zincirleyebilirsiniz.

1. lib/src/model/data.dart dosyasına geri dönelim.
2. loadFilteredRestaurants fonksiyonunu bulun.
3. Tüm işlevi aşağıdaki kodla değiştirin.

lib/src/model/data.dart

Yukarıdaki kod, kullanıcı girdisine dayalı bir bileşik sorgu oluşturmak için birden fazla where filtresi ve tek bir orderBy yantümcesi ekler. Şimdi sorgu yalnızca kullanıcının gereksinimlerine uyan restoranları döndürür.

Flutter’ın çalıştığı terminalde Shift + R tuşlarına basarak uygulamanızı tarayıcınızda yenileyin.

Şimdi fiyata, şehre ve kategoriye göre filtrelemeye çalışın. Test sırasında, tarayıcınızın JavaScript Konsolu’nda şuna benzer hatalar görürsünüz:

The query requires an index. You can create it here: https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

Bu hatalar, Cloud Firestore’un çoğu bileşik sorgu için dizinler gerektirmesi nedeniyle oluşur. Sorgularda dizinlere gereksinim duyulması, Cloud Firestore’u hızlı bir şekilde ölçeklendirir.

Hata mesajındaki bağlantıyı tıkladığınızda Firebase Konsolunda dizin oluşturma arayüzü içerisinde otomatik olarak oluşturulmuş doğru parametreler ile doldurulmuş ekran ile karşılaşırsınız.

Dizinleri dağıtma

Uygulamadaki her yolu keşfetmek ve dizin oluşturma bağlantılarının her birini izlemek istemiyorsanız, Firebase CLI’ı kullanarak aynı anda birçok dizini kolayca dağıtabilirsiniz.

• Uygulama projenizin kök dizininde firestore.indexes.json dosyasını bulun.

Bu dosya, olası tüm filtre kombinasyonları için gereken tüm dizinleri açıklar.

firestore.indexes.json

• Bu dizinleri aşağıdaki komutla dağıtın:

firebase deploy --only firestore:indexes

Birkaç dakika sonra dizinleriniz yayınlanır ve hata mesajları kaybolur. Dizinleri tamamen hazır olmadan kullanmaya çalışırsanız, aşağıdakine benzer hatalar görebilirsiniz:

The query requires an index. That index is currently building and cannot be used yet. See its status here:
https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

İpucu: Cloud Firestore’daki dizinler hakkında daha fazla bilgi için Index documentation(en) bakın.

Verilerinizi koruyun

Bu kod etiketinin başında, uygulamanızın güvenlik kurallarını veritabanını herhangi bir okuma veya yazma işlemine tamamen açacak şekilde ayarlarıyoruz. Gerçek bir uygulamada, istenmeyen veri erişimi veya değişikliklerini önlemek için çok daha ayrıntılı kurallar belirlerlemelisiniz.

1. Firebase konsolunun Develop bölümünde Database’i tıklatın.
2. Cloud Firestore bölümündeki Kurallar sekmesini tıklayın (veya doğrudan Firebase konsoluna gidin).
3. Varsayılanları aşağıdaki kurallarla değiştirin ve Publish’i tıklayın.

firestore.rules

Bu kurallar, istemcilerin yalnızca güvenli değişiklikler yapmasını sağlamak için erişimi kısıtlar, örneğin:

• Güncellemeler; Bir restoran belgesinde yalnızca derecelendirmeleri değiştirilebilir, adı veya diğer değiştirilemez veriler değiştirilemez.
• Derecelendirmeler; yalnızca kullanıcı kimliği oturum açmış kullanıcıyla eşleşiyorsa derecelendirme yapabilir, kimlik sahtekarlığını önler.

Firebase projenize kural dağıtmak için Firebase CLI’ı kullanabilirsiniz. Firebase konsolunu kullanmak yerine, Bu kuralları yerel dosya sisteminizden dağıtmak için ,(çalışma dizininizdeki firestore.rules dosyası zaten yukarıdaki kuralları içeriyor.) aşağıdaki komutu çalıştırın:

firebase deploy --only firestore:rules

Önemli: Güvenlik kuralları hakkında daha fazla bilgi edinmek için security rules documentation(en) bakın.

Web uygulamanızı Firebase Hosting’e dağıtın

flutter build web

Şimdiye kadar, Flutter uygulamanızın yalnızca “hata ayıklama” sürümlerini kullandınız. Bu yapılar biraz daha yavaştır, çünkü hata ayıklamayı kolaylaştırmak için ek bilgiler içerir.

Uygulamanızı dağıtmadan önce bir production(prod) sürümü oluşturmanız gerekir. Flutter, tool aracıyla production için build almanıza olanak tanır:

flutter build web

Bu, üretimle ilgili tüm varlıklara projenin build / web dizininden erişebilirsiniz.

Uygulamamız artık Firebase’e dağıtılmaya hazır!

firebase deploy

Projemiz, Flutter’ın oluşturduğu varlıkları oluşturmak ve dağıtmak için önceden yapılandırılmıştır (projenin kökündeki firebase.json dosyasına bakın).

Tek bir komut kullanarak uygulamanızın yeni bir sürümünü Firebase ile dağıtın:

firebase deploy --only hosting

Bu işlem sadece birkaç saniye sürmelidir. Önceki yapıları temizler (flutter clean), uygulamanızı yeniden oluşturur (flutter build web) ve yeni oluşturulan varlıkları (build/web içeriğini) Firebase Hosting’e dağıtır.

Başarı mesajında yayınlanan uygulamanızın artık internette bulunduğu bir Hosting URL’si içeriyor olmalı.

Sonuç

Bu Codlab’de, Firebase Auth ve Firestore eklentilerini kullanarak Flutter web uygulamamızı Firebase’e nasıl bağlayacağımızı öğrendik, Cloud Firestore ile temel ve gelişmiş okuma, yazma işlemleri gerçekleştirdik ve güvenlik kurallarıyla güvenli veri erişimi gerçekleştirdik.

Son olarak bitmiş projeye buradan erişebilirsiniz 👉 https://github.com/FirebaseExtended/codelab-friendlyeats-flutter/commits/done

Yazımı okuduğunuz için teşekkür ederim.

Ben hem yazıyı yazarken hem de uygulamayı geliştirirken çok eğlendim umarım sizlerde eğlenmişsinizdir.