Bu sayfa, Cloud Translation API ile çevrilmiştir.

Flutter uygulamalarınız için Firebase Emulator Suite'i kullanarak yerel geliştirme

1. Başlamadan önce

Bu codelab'de, yerel geliştirme sırasında Firebase Emulator Suite'in Flutter ile nasıl kullanılacağını öğreneceksiniz. Emulator Suite ile e-posta şifresiyle kimlik doğrulamayı kullanmayı ve Firestore emülatöründe veri okuyup yazmayı öğreneceksiniz. Son olarak, geliştirmeye her döndüğünüzde aynı sahte verilerle çalışmak için emülatörlerden veri içe ve dışa aktarma işlemiyle çalışırsınız.

Ön koşullar

Bu codelab'de Flutter deneyiminiz olduğu varsayılır. Yoksa öncelikle temel bilgileri öğrenmeniz iyi olabilir. Aşağıdaki bağlantılar yararlı olabilir:

Flutter Widget Çerçevesi Turu'na katılın
Write Your First Flutter App, Part 1 (İlk Flutter Uygulamanızı Yazma, 1. bölüm) codelab'ini deneyin

Firebase deneyiminiz de olmalıdır. Ancak Firebase'i Flutter projelerine hiç eklemediyseniz sorun yoktur. Firebase konsolu hakkında bilgi sahibi değilseniz veya Firebase'de tamamen yeniyseniz öncelikle aşağıdaki bağlantıları inceleyin:

Oluşturacağınız içerikler

Bu codelab, basit bir Günlük Kaydı uygulaması geliştirme konusunda size rehberlik edecektir. Uygulamanın bir giriş ekranı ve geçmiş günlük girişlerini okumanıza ve yenilerini oluşturmanıza olanak tanıyan bir ekranı olacaktır.

Neler öğreneceksiniz?

Firebase'i kullanmaya nasıl başlayacağınızı ve Firebase Emulator paketini Flutter geliştirme iş akışınıza entegre edip kullanmayı öğreneceksiniz. Şu Firebase konuları ele alınacaktır:

Bu konuların, Firebase emülatör paketini kapsaması için gerekli olduğu için ele alındığını unutmayın. Bu codelab'de, Flutter uygulamanıza Firebase projesi eklemeye ve Firebase Emulator Suite'i kullanarak geliştirme yapmaya odaklanılmaktadır. Firebase Authentication veya Firestore üzerinde kapsamlı görüşmeler yapılmayacaktır. Bu konulara aşina değilseniz Flutter için Firebase'i Tanıma codelab'i ile başlamanızı öneririz.

Gerekenler

Flutter ile ilgili çalışma bilgisi ve SDK yüklü
Intellij JetBrains veya VS Code metin düzenleyicileri
Google Chrome Tarayıcı (veya Flutter için tercih ettiğiniz diğer geliştirme hedefinizi) Bu codelab'deki bazı terminal komutları, uygulamanızı Chrome'da çalıştırdığınızı varsayar).

2. Firebase projesi oluşturma ve ayarlama

Tamamlamanız gereken ilk görev, Firebase'in web konsolunda bir Firebase projesi oluşturmaktır. Bu codelab'in büyük çoğunluğu, yerel olarak çalışan bir kullanıcı arayüzü kullanan Emulator Suite'e odaklanır. Ancak önce tam bir Firebase projesi oluşturmanız gerekir.

Firebase projesi oluşturma

Firebase konsolunda oturum açın.
Firebase konsolunda Proje Ekle'yi (veya Proje oluştur'u) tıklayın ve Firebase projeniz için bir ad girin (ör. "Firebase-Flutter-Codelab").

Proje oluşturma seçeneklerini tıklayarak ilerleyin. İstenirse Firebase şartlarını kabul edin. Bu uygulama için Analytics'i kullanmayacağınızdan Google Analytics kurulumunu atlayın.

Firebase projeleri hakkında daha fazla bilgi için Firebase projelerini anlama başlıklı makaleyi inceleyin.

Derlediğiniz uygulama, Flutter uygulamalarıyla kullanılabilen iki Firebase ürününü kullanır:

Kullanıcılarınızın uygulamanızda oturum açmasına izin vermek için Firebase Authentication.
Yapılandırılmış verileri buluta kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore.

Bu iki ürün için özel yapılandırmanın yapılması veya Firebase konsolu üzerinden etkinleştirilmesi gerekir.

Cloud Firestore'u etkinleştirin

Flutter uygulaması, günlük girişlerini kaydetmek için Cloud Firestore'u kullanır.

Cloud Firestore'u etkinleştirin:

Firebase konsolunun Build bölümünde Cloud Firestore'u tıklayın.
Create database'i (Veritabanı oluştur) tıklayın.
Test modunda başlat seçeneğini belirleyin. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun. Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. İleri'yi tıklayın.
Veritabanınızın konumunu seçin (Yalnızca varsayılanı kullanabilirsiniz). Bu konumun daha sonra değiştirilemeyeceğini unutmayın. .
Etkinleştir'i tıklayın.

3. Flutter uygulamasını ayarlama

Başlamadan önce başlangıç kodunu indirmeniz ve Firebase CLI'ı yüklemeniz gerekir.

Başlangıç kodunu al

GitHub deposunu komut satırından klonlayın:

git clone https://github.com/flutter/codelabs.git flutter-codelabs

Alternatif olarak, GitHub'ın cli aracı yüklüyse:

gh repo clone flutter/codelabs flutter-codelabs

Örnek kod, codelab'ler koleksiyonunun kodunu içeren flutter-codelabs dizinine klonlanmalıdır. Bu codelab'in kodu flutter-codelabs/firebase-emulator-suite dilindedir.

flutter-codelabs/firebase-emulator-suite altındaki dizin yapısı, iki Flutter projesinden oluşur. Bunlardan birine complete adı verilir. İleri gitmek veya kendi kodunuzla karşılaştırma yapmak için bu özelliğe bakabilirsiniz. Diğer projenin adı start.

Başlamak istediğiniz kod flutter-codelabs/firebase-emulator-suite/start dizinindedir. Dizini açın veya tercih ettiğiniz IDE'ye aktarın.

cd flutter-codelabs/firebase-emulator-suite/start

Firebase CLI'yi yükleyin

Firebase CLI, Firebase projelerinizi yönetmenize olanak tanıyan araçlar sunar. Emulator Suite'i kullanmak için CLI gereklidir. Bu nedenle CLI'ı yüklemeniz gerekir.

KSA'yı yüklemenin çeşitli yolları vardır. MacOS veya Linux kullanıyorsanız en basit yol, terminalinizden şu komutu çalıştırmaktır:

curl -sL https://firebase.tools | bash

CLI'yı yükledikten sonra Firebase ile kimlik doğrulaması yapmanız gerekir.

Aşağıdaki komutu çalıştırarak Google Hesabınızla Firebase'e giriş yapın:

firebase login

Bu komut, yerel makinenizi Firebase'e bağlar ve Firebase projelerinize erişmenizi sağlar.

Firebase projelerinizi listeleyerek CLI'ın düzgün şekilde yüklendiğini ve hesabınıza erişebildiğini test edin. Aşağıdaki komutu çalıştırın:

firebase projects:list

Görüntülenen liste, Firebase konsolunda listelenen Firebase projeleriyle aynı olmalıdır. En az firebase-flutter-codelab olmalıdır.

FlutterFire CLI'ı yükleme

FlutterFire CLI, Firebase CLI'ın üzerine kurulmuştur ve bir Firebase projesini Flutter uygulamanızla entegre etmeyi kolaylaştırır.

İlk olarak CLI'yı yükleyin:

dart pub global activate flutterfire_cli

KSA'nın yüklendiğinden emin olun. Flutter proje dizininde aşağıdaki komutu çalıştırın ve CLI'ın, yardım menüsünü çıktığından emin olun.

flutterfire --help

Firebase projenizi Flutter uygulamanıza eklemek için Firebase CLI ve FlutterFire CLI'ı kullanma

İki CLI yüklüyken ayrı Firebase ürünlerini (Firestore gibi) kurabilir, emülatörleri indirebilir ve sadece birkaç terminal komutuyla Firebase'i Flutter uygulamanıza ekleyebilirsiniz.

Öncelikle aşağıdaki komutu çalıştırarak Firebase kurulumunu tamamlayın:

firebase init

Bu komut, projenizi oluşturmak için gereken bir dizi soruda size yol gösterir. Bu ekran görüntüleri akışı göstermektedir:

Özellikleri seçmeniz istendiğinde "Firestore"u seçin ve "Emülatörler". (Flutter proje dosyalarınızdan değiştirilebilecek bir yapılandırma kullanılmadığından, Authentication (Kimlik Doğrulama) seçeneği yoktur.)
Ardından, istendiğinde "Mevcut bir projeyi kullan"ı seçin.

Şimdi, önceki adımda oluşturduğunuz projeyi seçin: flutter-firebase-codelab.

Ardından, oluşturulacak dosyaların adlandırılmasıyla ilgili bir dizi soru sorulacaktır. "Enter" tuşuna basmanızı öneririm tıklayın. .
Son olarak, emülatörleri yapılandırmanız gerekir. Listeden Firestore ve Authentication'ı seçip "Enter" tuşuna basın bağlantı noktalarının listesini bulun. Emülatör kullanıcı arayüzünü kullanmak isteyip istemediğiniz sorulduğunda varsayılan Evet seçeneğini belirlemeniz gerekir.

İşlemin sonunda, aşağıdaki ekran görüntüsüne benzeyen bir çıkış göreceksiniz.

Önemli: Son soru varsayılan olarak "Hayır" olacağından, çıkışınız aşağıdaki ekran görüntüsünde görüldüğü gibi benimkinden biraz farklı olabilir. Emülatörleri zaten indirdiyseniz.

FlutterFire'ı yapılandırma

Ardından, Flutter uygulamanızda Firebase'i kullanmak için gereken Dart kodunu oluşturmak amacıyla FlutterFire'ı kullanabilirsiniz.

flutterfire configure

Bu komut çalıştırıldığında, kullanmak istediğiniz Firebase projesini ve oluşturmak istediğiniz platformları seçmeniz istenir. Bu codelab'deki örnekler Flutter Web'i kullanır ancak Firebase projenizi tüm seçenekleri kullanacak şekilde ayarlayabilirsiniz.

Aşağıdaki ekran görüntülerinde yanıtlamanız gereken istemler gösterilmektedir.

Bu ekran görüntüsünde, işlemin sonundaki çıktı gösterilmektedir. Firebase'e aşinaysanız konsolda uygulama oluşturmanızın gerekmediğini fark edeceksiniz. FlutterFire CLI, bunu sizin için yapmıştır.

Firebase paketlerini Flutter uygulamasına ekleme

Kurulum son adımı, ilgili Firebase paketlerini Flutter projenize eklemektir. Terminalde, flutter-codelabs/firebase-emulator-suite/start adresindeki Flutter projesinin kök dizininde olduğunuzdan emin olun. Ardından aşağıdaki üç komutu çalıştırın:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add cloud_firestore

Bu uygulamada yalnızca bu paketleri kullanacaksınız.

4. Firebase emülatörlerini etkinleştirme

Şu ana kadar Flutter uygulaması ve Firebase projeniz emülatörleri kullanabilecek şekilde ayarlanmıştır. Ancak yine de Flutter koduna, giden Firebase isteklerini yerel bağlantı noktalarına yeniden yönlendirmesini bildirmeniz gerekir.

Öncelikle Firebase başlatma kodunu ve emülatör kurulum kodunu main.dart. uygulamasındaki main işlevine ekleyin

ana.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import 'app_state.dart';
import 'firebase_options.dart';
import 'logged_in_view.dart';
import 'logged_out_view.dart';


void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 if (kDebugMode) {
   try {
     FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
     await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
   } catch (e) {
     // ignore: avoid_print
     print(e);
   }
 }

 runApp(MyApp());
}

Kodun ilk birkaç satırı Firebase'i başlatır. Genelde, bir Flutter uygulamasında Firebase ile çalışıyorsanız WidgetsFlutterBinding.ensureInitialized ve Firebase.initializeApp numaralı telefonu arayarak başlamak istersiniz.

Bunun ardından, if (kDebugMode) satırıyla başlayan kod, uygulamanıza üretim Firebase projesi yerine emülatörleri hedeflemesini söyler. kDebugMode, emülatörlerin hedeflenmesinin yalnızca bir geliştirme ortamındaysanız gerçekleşmesini sağlar. kDebugMode sabit bir değer olduğundan, Dart derleyicisi yayınlama modunda bu kod bloğunu tamamen kaldıracağını bilir.

Emülatörleri başlatma

Flutter uygulamasını başlatmadan önce emülatörleri başlatmanız gerekir. İlk olarak, terminalde aşağıdaki komutu çalıştırarak emülatörleri başlatın:

firebase emulators:start

Bu komut, emülatörleri başlatır ve onlarla etkileşimde bulunabileceğimiz localhost bağlantı noktalarını ortaya çıkarır. Bu komutu çalıştırdığınızda şuna benzer bir çıkış görürsünüz:

Bu çıkış, hangi emülatörlerin çalıştığını ve emülatörleri görmek için nereye gidebileceğinizi belirtir. İlk olarak localhost:4000 adresindeki emülatör kullanıcı arayüzüne göz atın.

Bu, yerel emülatörün kullanıcı arayüzünün ana sayfasıdır. Mevcut tüm emülatörleri listeler ve her biri açık veya kapalı durum şeklinde etiketlenir.

5. Firebase Auth emülatörü

Kullanacağınız ilk emülatör Kimlik Doğrulama emülatörüdür. "Emülatöre git"i tıklayarak Auth emülatörüne başlayın düğmesine bastığınızda, şuna benzer bir sayfa görürsünüz:

Bu sayfa, Auth web konsolu sayfasıyla benzerliklere sahiptir. Online konsol gibi kullanıcıları listeleyen bir tablo bulunur ve kullanıcıları manuel olarak ekleyebilirsiniz. Buradaki önemli farklardan biri, emülatörlerde kullanılabilen tek kimlik doğrulama yöntemi seçeneğinin E-posta ve Şifre olmasıdır. Bu, yerel gelişim için yeterlidir.

Ardından, Firebase Auth emülatörüne kullanıcı ekleme ve Flutter kullanıcı arayüzü aracılığıyla bu kullanıcının giriş yapma sürecini adım adım açıklayacaksınız.

Kullanıcı ekleyin

"Kullanıcı ekle"yi tıklayın. düğmesini tıklayın ve formu şu bilgilerle doldurun:

Görünen ad: Kısa çizgi
E-posta: dash@email.com
Şifre: kısa çizgi

Formu gönderdiğinizde, tablonun artık bir kullanıcı içerdiğini görürsünüz. Artık bu kullanıcıyla giriş yapmak için kodu güncelleyebilirsiniz.

logged_out_view.dart

LoggedOutView widget'ında güncellenmesi gereken tek kod, kullanıcı giriş düğmesine bastığında tetiklenen geri çağırmatır. Kodu aşağıdakine benzer şekilde güncelleyin:

class LoggedOutView extends StatelessWidget {
 final AppState state;
 const LoggedOutView({super.key, required this.state});
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Firebase Emulator Suite Codelab'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
          Text(
           'Please log in',
            style: Theme.of(context).textTheme.displaySmall,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
             onPressed: () async {
              await state.logIn('dash@email.com', 'dashword').then((_) {
                if (state.user != null) {
                 context.go('/');
                }
              });
              },
              child: const Text('Log In'),
          ),
        ),
      ],
    ),
   ),
  );
 }
}

Güncellenen kod, TODO dizelerini auth emülatöründe oluşturduğunuz e-posta ve şifreyle değiştirir. Bir sonraki satırda, if(true) satırı state.user kullanıcısının null olup olmadığını kontrol eden kodla değiştirilmiştir. AppClass dilindeki kod bu durumu daha iyi aydınlatır.

app_state.dart

AppState kodundaki iki bölümün güncellenmesi gerekiyor. İlk olarak, sınıf üyesi AppState.user'e Object türü yerine firebase_auth paketinden User türünü verin.

İkinci olarak, AppState.login yöntemini aşağıda gösterildiği gibi doldurun:

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user; // <-- changed variable type
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 } 
 // ...
}

Kullanıcının tür tanımı artık User? oldu. Bu User sınıfı, Firebase Auth'tan gelir ve birazdan ele alınacak olan User.displayName gibi gerekli bilgileri sağlar.

Bu, Firebase Auth'ta e-posta adresi ve şifreyle kullanıcının giriş yapmak için gereken temel koddur. Oturum açmak için FirebaseAuth'a çağrı yapar ve bu çağrı bir Future<UserCredential> nesnesi döndürür. Gelecek tamamlandığında, bu kod UserCredential öğesine ekli bir User olup olmadığını kontrol eder. Kimlik bilgisi nesnesinde bir kullanıcı varsa kullanıcı başarıyla giriş yapmış demektir ve AppState.user özelliği ayarlanabilir. Yoksa bir hata oluşmuştur ve mesaj yazdırılmıştır.

Bu yöntemde, genel FirebaseAuth kodu yerine bu uygulamaya özel tek kod satırının _listenForEntries yöntemine yapılan çağrı olduğunu unutmayın. Bu çağrı bir sonraki adımda ele alınacaktır.

YAPILACAKLAR: İşlem Simgesi – Uygulamanızı yeniden yükleyin ve oluşturulduğunda Giriş düğmesine basın. Bu, uygulamanın "Tekrar Hoş Geldiniz, Kişi!" mesajının bulunduğu bir sayfaya gitmesine neden olur. dokunun. Kimlik doğrulama çalışıyor olmalıdır çünkü bu sayfaya gitmenize izin verilir, ancak kullanıcının gerçek adının görüntülenmesi için logged_in_view.dart ürününde küçük bir güncelleme yapılması gerekir.

logged_in_view.dart

LoggedInView.build yönteminde ilk satırı değiştirin:

class LoggedInView extends StatelessWidget {
 final AppState state;
 LoggedInView({super.key, required this.state});

 final PageController _controller = PageController(initialPage: 1);

 @override
 Widget build(BuildContext context) {
   final name = state.user!.displayName ?? 'No Name';

   return Scaffold(
 // ...

Şimdi bu satır, AppState nesnesindeki User özelliğinden displayName öğesini alıyor. Bu displayName, ilk kullanıcınızı tanımlarken emülatörde ayarlandı. Uygulamanızda şimdi "Tekrar hoş geldiniz, Dash!" ifadesi görüntülenir. Bunun yerine, giriş yaptığınızda TODO yerine otomatik olarak bunu yapabilirsiniz.

6. Firestore emülatörüne veri okuma ve yazma

İlk olarak Firestore emülatörüne göz atın. Emülatör kullanıcı arayüzü ana sayfasında (localhost:4000), "Emülatöre git"i tıklayın tıklayın. Aşağıdaki gibi görünmelidir:

Emülatör:

Firebase konsolu:

Firestore ile ilgili herhangi bir deneyiminiz varsa bu sayfanın Firebase konsolunun Firestore sayfasına benzediğini fark edeceksiniz. Yine de aralarında birkaç önemli fark vardır.

Tek bir düğmeye dokunarak tüm verileri temizleyebilirsiniz. Bu, üretim verileri için tehlikeli olabilir ancak hızlı iterasyon için faydalıdır. Yeni bir proje üzerinde çalışıyorsanız ve veri modeliniz değişirse bunları kolayca temizleyebilirsiniz.
"İstekler" var. sekmesinden yararlanın. Bu sekme, bu emülatöre gelen istekleri izlemenize olanak tanır. Birazdan bu sekmeyi daha ayrıntılı bir şekilde ele alacağım.
Kurallar, Dizinler veya Kullanım için sekme yoktur. Güvenlik kurallarını yazmaya yardımcı olan bir araç vardır (sonraki bölümde açıklanmıştır) ancak yerel emülatör için güvenlik kuralları ayarlayamazsınız.

Özetle, Firestore'un bu sürümü, geliştirme sırasında daha fazla araç sunar ve üretimde gerekli olan araçları ortadan kaldırır.

Firestore'a yaz

"İstekler" konusunu tartışmadan önce sekmesinden bir istek gönderebilirsiniz. Bunun için kod güncellemeleri gerekir. Uygulamadaki formu kablo bağlantısıyla başlayarak Firestore'a yeni bir günlük (Entry) yazın.

Entry göndermek için genel akış:

Kullanıcı formu doldurdu ve Submit düğmesine bastı
Kullanıcı arayüzü şunları çağırır: AppState.writeEntryToFirebase
AppState.writeEntryToFirebase, Firebase'e bir giriş ekler

1. veya 2. adımda kullanılan kodun hiçbirinin değiştirilmesi gerekmez. 3. adım için eklenmesi gereken tek kod AppState sınıfına eklenecektir. AppState.writeEntryToFirebase üzerinde aşağıdaki değişikliği yapın.

app_state.dart

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }
 // ...
}

WriteEntryToFirebase yöntemindeki kod, "Entries" adlı koleksiyona bir referans alır. seçeneğini tıklayın. Ardından, Map<String, String> türünde olması gereken yeni bir giriş ekler.

Bu örnekte, "Girişler" Firestore'da koleksiyon yoktu, bu yüzden Firestore bir tane oluşturdu.

Kodu ekledikten sonra uygulamanızı çalışırken yeniden yükleyin veya yeniden başlatın, giriş yapın ve EntryForm görünümüne gidin. Formu istediğiniz Strings ile doldurabilirsiniz. (Tarih alanı, bu codelab için basitleştirilmiş olduğu için tüm Dizeleri alır. Güçlü bir doğrulaması yoktur veya DateTime nesneleriyle hiçbir şekilde ilgilenmez.)

Formda gönder düğmesine basın. Uygulamada hiçbir şey olmaz ancak yeni girişinizi emülatör kullanıcı arayüzünde görebilirsiniz.

Firestore emülatöründeki istekler sekmesi

Kullanıcı arayüzünde Firestore emülatörüne gidin ve "Data" (Veriler) bölümüne bakın sekmesinden yararlanın. Veritabanınızın kökünde "Girişler" adlı bir Koleksiyon bulunduğunu göreceksiniz. Söz konusu belgede, forma girdiğiniz bilgilerin aynılarını içeren bir belge bulunmalıdır.

Bu, AppState.writeEntryToFirestore isteğinin çalıştığını onaylar. Artık İstekler sekmesinde isteği daha ayrıntılı olarak inceleyebilirsiniz. Şimdi bu sekmeyi tıklayın.

Firestore emülatörü istekleri

Şuna benzer bir liste göreceksiniz:

Bu liste öğelerinden herhangi birini tıklayarak birçok yararlı bilgiye ulaşabilirsiniz. Yeni günlük girişi oluşturma isteğinize karşılık gelen CREATE liste öğesini tıklayın. Aşağıdaki gibi yeni bir tablo görürsünüz:

Bahsedildiği gibi, Firestore emülatörü, uygulamanızın güvenlik kurallarını geliştirmek için araçlar sağlar. Bu görünüm, bu isteğin güvenlik kurallarınızda tam olarak hangi satırı geçirdiğini (veya bu durumda başarısız olduysa) gösterir. Daha sağlam bir uygulamada ise Güvenlik Kuralları büyüyebilir ve birden fazla yetkilendirme kontrolüne tabi olabilir. Bu görünüm, bu yetkilendirme kurallarını yazmaya ve hata ayıklamaya yardımcı olmak için kullanılır.

Ayrıca, meta veriler ve kimlik doğrulama verileri de dahil olmak üzere bu isteğin her parçasını incelemenin kolay bir yolunu sunar. Bu veriler karmaşık yetkilendirme kuralları yazmak için kullanılır.

Firestore'dan okunuyor

Firestore, güncellenmiş verileri bağlı cihazlara aktarmak için veri senkronizasyonunu kullanır. Flutter kodunda, Firestore koleksiyonlarını ve belgelerini dinleyebilir (veya bunlara abone olabilirsiniz) ve verilerde değişiklik olduğunda kodunuza bildirim gönderilir. Bu uygulamada, Firestore güncellemelerini dinleme işlemi AppState._listenForEntries adlı yöntemle yapılır.

Bu kod, sırasıyla AppState._entriesStreamController ve AppState.entries olarak adlandırılan StreamController ve Stream ile birlikte çalışır. Bu kod, Firestore'daki verileri görüntülemek için kullanıcı arayüzünde gereken tüm kodlar gibi önceden yazılmıştır.

_listenForEntries yöntemini aşağıdaki kodla eşleşecek şekilde güncelleyin:

app_state.dart

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

import 'entry.dart';

class AppState {
 AppState() {
   _entriesStreamController = StreamController.broadcast(onListen: () {
     _entriesStreamController.add([
       Entry(
         date: '10/09/2022',
         text: lorem,
         title: '[Example] My Journal Entry',
       )
     ]);
   });
 }

 User? user;
 Stream<List<Entry>> get entries => _entriesStreamController.stream;
 late final StreamController<List<Entry>> _entriesStreamController;

 Future<void> logIn(String email, String password) async {
   final credential = await FirebaseAuth.instance
       .signInWithEmailAndPassword(email: email, password: password);
   if (credential.user != null) {
     user = credential.user!;
     _listenForEntries();
   } else {
     print('no user!');
   }
 }

 void writeEntryToFirebase(Entry entry) {
   FirebaseFirestore.instance.collection('Entries').add(<String, String>{
     'title': entry.title,
     'date': entry.date.toString(),
     'text': entry.text,
   });
 }

 void _listenForEntries() {
   FirebaseFirestore.instance
       .collection('Entries')
       .snapshots()
       .listen((event) {
     final entries = event.docs.map((doc) {
       final data = doc.data();
       return Entry(
         date: data['date'] as String,
         text: data['text'] as String,
         title: data['title'] as String,
       );
     }).toList();

     _entriesStreamController.add(entries);
   });
 }
 // ...
}

Bu kod "Girişler"i dinler koleksiyonudur. Firestore, bu istemciye yeni veriler olduğunu bildirdiğinde bu verileri iletir ve _listenForEntries içindeki kod, tüm alt belgelerini uygulamamızın kullanabileceği bir nesneye (Entry) dönüştürür. Ardından, bu girişleri _entriesStreamController adlı (kullanıcı arayüzünün dinlediği) StreamController öğesine ekler. Gerekli olan tek güncelleme budur.

Son olarak, AppState.logIn yönteminin _listenForEntries öğesine çağrı yaptığını ve dinleme işlemine kullanıcı giriş yaptıktan sonra başladığını unutmayın.

// ...
Future<void> logIn(String email, String password) async {
 final credential = await FirebaseAuth.instance
     .signInWithEmailAndPassword(email: email, password: password);
 if (credential.user != null) {
   user = credential.user!;
   _listenForEntries();
 } else {
   print('no user!');
 }
}
// ...

Şimdi uygulamayı çalıştırın. Aşağıdaki gibi görünecektir:

7. Verileri emülatöre ve dışa aktarma

Firebase emülatörleri, verilerin içe ve dışa aktarılmasını destekler. İçe ve dışa aktarma işlemlerini kullanmak, geliştirmeye ara verip daha sonra devam ettirdiğinizde aynı verilerle geliştirmeye devam etmenize olanak tanır. Ayrıca, veri dosyalarını git'e kaydedebilirsiniz. Birlikte çalıştığınız diğer geliştiriciler de aynı verilere sahip olurlar.

Emülatör verilerini dışa aktarma

İlk olarak, sahip olduğunuz emülatör verilerini dışa aktarın. Emülatörler çalışırken yeni bir terminal penceresi açın ve aşağıdaki komutu girin:

firebase emulators:export ./emulators_data

.emulators_data, Firebase'e verileri nereye aktaracağını bildiren bir bağımsız değişkendir. Dizin yoksa oluşturulur. Bu dizin için istediğiniz adı kullanabilirsiniz.

Bu komutu çalıştırdığınızda aşağıdaki çıkışı, komutu çalıştırdığınız terminalde görürsünüz:

i  Found running emulator hub for project flutter-firebase-codelab-d6b79 at http://localhost:4400
i  Creating export directory /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
i  Exporting data to: /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data
✔  Export complete

Emülatörlerin çalıştığı terminal penceresine geçerseniz şu çıkışı görürsünüz:

i  emulators: Received export request. Exporting data to /Users/ewindmill/Repos/codelabs/firebase-emulator-suite/complete/emulators_data.
✔  emulators: Export complete.

Son olarak, proje dizininize bakarsanız ./emulators_data adlı bir dizin görürsünüz. Bu dizinde, kaydettiğiniz diğer meta veri dosyalarının yanı sıra JSON dosyaları bulunur.

Emülatör verilerini içe aktar

Artık bu verileri geliştirme iş akışınızın bir parçası olarak içe aktarabilir ve kaldığınız yerden başlayabilirsiniz.

Öncelikle, çalışıyorlarsa terminalinizde CTRL+C tuşuna basarak emülatörleri durdurun.

Daha sonra, önceden gördüğünüz emulators:start komutunu ancak hangi verilerin içe aktarılacağını belirten bir işaretle çalıştırın:

firebase emulators:start --import ./emulators_data

Emülatörler hazır olduğunda localhost:4000 adresindeki emülatör kullanıcı arayüzüne gidin. Daha önce üzerinde çalıştığınız verileri görürsünüz.

Emülatörler kapatılırken verileri otomatik olarak dışa aktarma

Ayrıca, her geliştirme oturumunun sonunda verileri dışa aktarmayı hatırlamak yerine, emülatörlerden çıktığınızda verileri otomatik olarak dışa aktarabilirsiniz.

Emülatörlerinizi başlattığınızda emulators:start komutunu iki ek işaretle çalıştırın.

firebase emulators:start --import ./emulators_data --export-on-exit

Hepsi bu kadar! Bu projenin emülatörleriyle her çalışmanızda verileriniz kaydedilecek ve yeniden yüklenecek. –export-on-exit flag için bağımsız değişken olarak farklı bir dizin de belirtebilirsiniz; ancak bu dizin, –import işlevine geçirilen dizin varsayılan olarak ayarlanır.

Bu seçeneklerin herhangi bir kombinasyonunu da kullanabilirsiniz. Dokümanlardaki not: Dışa aktarma dizini şu işaretle belirtilebilir: firebase emulators:start --export-on-exit=./saved-data. --import kullanılırsa dışa aktarma yolu varsayılan olarak aynı olur; örneğin: firebase emulators:start --import=./data-path --export-on-exit. Son olarak, istenirse --import ve --export-on-exit işaretlerine farklı dizin yolları iletin.

8. Tebrikler!

Firebase emülatörü ve Flutter ile çalışmaya başlama işlemini tamamladınız. Bu Codelab için tamamlanmış kodu "tamamlanmış" github'daki dizin: Flutter Codelabs

İşlediğimiz konular

Firebase'i kullanmak için Flutter uygulaması kurma
Firebase projesi oluşturma
FlutterFire KSA
Firebase CLI
Firebase Authentication emülatörü
Firebase Firestore emülatörü
Emülatör verilerini içe ve dışa aktarma

Sonraki adımlar

Flutter'da Firestore ve Authentication'ı kullanma hakkında daha fazla bilgi: Flutter Codelab için Firebase'i tanıma
Emülatörler sunan diğer Firebase araçlarını keşfedin:
Cloud Storage
Cloud Functions
Gerçek Zamanlı Veritabanı
Google Kimlik Doğrulama'yı uygulamanıza hızlı bir şekilde eklemek için FlutterFire kullanıcı arayüzünü keşfedin.

Daha fazla bilgi

Firebase sitesi: firebase.google.com
Flutter sitesi: flutter.dev
FlutterFire Firebase Flutter widget'ları: firebase.flutter.dev
Firebase YouTube kanalı
Flutter YouTube kanalı

Sparky sizinle gurur duyuyor.