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

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

1. Başlamadan önce

Bu codelab'de yerel geliştirme sırasında Firebase Emulator Suite'i Flutter ile nasıl kullanacağınızı öğreneceksiniz. Emulator Suite aracılığıyla e-posta-şifre kimlik doğrulamasını nasıl kullanacağınızı ve Firestore emülatörüne nasıl veri okuyup yazacağınızı öğ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 aktarmayla çalışacaksınız.

Önkoşullar

Bu codelab, Flutter deneyiminizin olduğunu varsayar. Değilse, önce temelleri öğrenmek isteyebilirsiniz. Aşağıdaki bağlantılar faydalıdır:

Flutter Widget Çerçevesinde Bir Tura Katılın
İlk Flutter Uygulamanızı Yazın, bölüm 1 codelab'i deneyin

Ayrıca biraz Firebase deneyiminiz de olmalıdır, ancak Firebase'i bir Flutter projesine hiç eklemediyseniz sorun değil. Firebase konsoluna yabancıysanız veya Firebase'de tamamen yeniyseniz öncelikle aşağıdaki bağlantılara bakın:

Ne yaratacaksınız

Bu codelab, basit bir Günlük Tutma uygulaması oluşturma konusunda size yol gösterir. 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.

Ne öğreneceksin

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

Bu konuların, Firebase emülatör paketini kapsaması gerektiği sürece kapsandığını unutmayın. Bu codelab, Flutter uygulamanıza bir Firebase projesi eklemeye ve Firebase Emulator Suite'i kullanarak geliştirmeye odaklanmıştır. Firebase Authentication veya Firestore hakkında derinlemesine tartışmalar yapılmayacaktır. Bu konulara aşina değilseniz Flutter codelab için Firebase'i Tanıma ile başlamanızı öneririz.

İhtiyacınız olan şey

Flutter ve kurulu SDK hakkında çalışma bilgisi
Intellij JetBrains veya VS Code metin editörleri
Google Chrome tarayıcısı (veya Flutter için tercih ettiğiniz diğer geliştirme hedefi. Bu codelab'deki bazı terminal komutları, uygulamanızı Chrome'da çalıştırdığınızı varsayacaktır)

2. Firebase projesi oluşturun ve kurun

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 odaklanacak, ancak önce tam bir Firebase projesi oluşturmanız gerekiyor.

Firebase projesi oluşturma

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

Proje oluşturma seçeneklerine tıklayın. İstenirse Firebase şartlarını kabul edin. Bu uygulama için Analytics kullanmayacağınız için Google Analytics kurulumunu atlayın.

Firebase projeleri hakkında daha fazla bilgi edinmek için Firebase projelerini anlama konusuna bakın.

Oluşturduğunuz uygulama, Flutter uygulamaları için kullanılabilen iki Firebase ürününü kullanıyor:

Kullanıcılarınızın uygulamanızda oturum açmasına olanak tanıyan Firebase Kimlik Doğrulaması .
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ün özel konfigürasyona ihtiyacı vardır veya Firebase konsolu kullanılarak 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 Derleme bölümünde Cloud Firestore'u tıklayın.
Veritabanı oluştur'u tıklayın.
Test modunda başlat seçeneğini seçin. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun. Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Sonrakine tıkla .
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ı kurun

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

Başlangıç kodunu alın

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

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

Alternatif olarak, GitHub'un cli aracını yüklediyseniz:

gh repo clone flutter/codelabs flutter-codelabs

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

flutter-codelabs/firebase-emulator-suite altındaki dizin yapısı iki Flutter projesidir. Bunlardan birine complete denir; ileri atlamak veya kendi kodunuza çapraz referans vermek istiyorsanız başvurabilirsiniz. Diğer projeye start adı verilir.

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

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

Firebase CLI'yi yükleyin

Firebase CLI, Firebase projelerinizi yönetmeniz için araçlar sağlar. Emulator Suite'i kullanmak için CLI gereklidir, dolayısıyla onu yüklemeniz gerekir.

CLI'yi kurmanın çeşitli yolları vardır. MacOS veya Linux kullanıyorsanız en basit yol, bu komutu terminalinizden çalıştırmaktır:

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

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

Aşağıdaki komutu çalıştırarak Google hesabınızı kullanarak Firebase'de oturum açın:

firebase login

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

Firebase projelerinizi listeleyerek CLI'nin 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ından firebase-flutter-codelab'i görmelisiniz.

FlutterFire CLI'yi yükleyin

FlutterFire CLI, Firebase CLI'nin üzerine inşa edilmiştir ve bir Firebase projesini Flutter uygulamanızla entegre etmeyi kolaylaştırır.

İlk önce CLI'yi yükleyin:

dart pub global activate flutterfire_cli

CLI'nin kurulu olduğundan emin olun. Flutter proje dizininde aşağıdaki komutu çalıştırın ve CLI'nin yardım menüsünü çıkardığından emin olun.

flutterfire --help

Firebase projenizi Flutter uygulamanıza eklemek için Firebase CLI ve FlutterFire CLI'yi kullanın

İki CLI kuruluyken, tek tek Firebase ürünlerini (Firestore gibi) kurabilir, emülatörleri indirebilir ve yalnızca birkaç terminal komutuyla Firebase'i Flutter uygulamanıza ekleyebilirsiniz.

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

firebase init

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

Özellikleri seçmeniz istendiğinde "Firestore" ve "Emülatörler"i seçin. (Flutter proje dosyalarınızdan değiştirilebilen yapılandırmayı kullanmadığından Kimlik Doğrulama seçeneği yoktur.)
Daha sonra istendiğinde "Mevcut bir projeyi kullan" seçeneğini seçin.

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

Daha sonra, oluşturulacak dosyaların adlandırılmasıyla ilgili bir dizi soru sorulacak. Varsayılanı seçmek için her soru için "enter" tuşuna basmanızı öneririm.
Son olarak emülatörleri yapılandırmanız gerekecek. Listeden Firestore ve Kimlik Doğrulama'yı seçin ve ardından her öykünücü için kullanılacak belirli bağlantı noktalarıyla ilgili her soru için "Enter" tuşuna basın. Emulator kullanıcı arayüzünü kullanmak isteyip istemediğiniz sorulduğunda varsayılan Evet seçeneğini seçmelisiniz.

İşlemin sonunda aşağıdaki ekran görüntüsüne benzer bir çıktı görmelisiniz.

Önemli : Aşağıdaki ekran görüntüsünde görüldüğü gibi çıktınız benimkinden biraz farklı olabilir, çünkü emülatörleri zaten indirdiyseniz son soru varsayılan olarak "Hayır" olacaktır.

FlutterFire'ı yapılandırın

Daha sonra Flutter uygulamanızda Firebase'i kullanmak için gerekli Dart kodunu oluşturmak üzere FlutterFire'ı kullanabilirsiniz.

flutterfire configure

Bu komut çalıştırıldığında hangi Firebase projesini kullanmak istediğinizi ve hangi platformları kurmak istediğinizi seçmeniz istenecektir. Bu codelab'deki örnekler Flutter Web'i kullanıyor ancak Firebase projenizi tüm seçenekleri kullanacak şekilde ayarlayabilirsiniz.

Aşağıdaki ekran görüntüleri yanıtlamanız gereken istemleri göstermektedir.

Bu ekran görüntüsü işlemin sonundaki çıktıyı gösterir. Firebase'e aşina iseniz, konsolda uygulama oluşturmanıza gerek olmadığını ve FlutterFire CLI'nin bunu sizin için yaptığını fark edeceksiniz.

Flutter uygulamasına Firebase paketleri ekleme

Son kurulum adımı ilgili Firebase paketlerini Flutter projenize eklemektir. Terminalde flutter-codelabs/firebase-emulator-suite/start adresindeki Flutter projesinin kökünde 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

Bunlar, bu uygulamada kullanacağınız tek paketlerdir.

4. Firebase emülatörlerini etkinleştirme

Şu ana kadar Flutter uygulaması ve Firebase projeniz emülatörleri kullanacak şekilde ayarlandı, ancak yine de Flutter koduna giden Firebase isteklerini yerel bağlantı noktalarına yeniden yönlendirmesini söylemeniz gerekiyor.

Öncelikle Firebase başlatma kodunu ve emülatör kurulum kodunu main.dart'taki main işleve ekleyin main.dart.

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. Neredeyse evrensel olarak, bir Flutter uygulamasında Firebase ile çalışıyorsanız WidgetsFlutterBinding.ensureInitialized ve Firebase.initializeApp çağırarak başlamak istersiniz.

Bunu takiben if (kDebugMode) satırıyla başlayan kod, uygulamanıza üretim Firebase projesi yerine emülatörleri hedeflemesini söyler. kDebugMode , öykünücüleri hedeflemenin yalnızca bir geliştirme ortamındaysanız gerçekleşmesini sağlar. kDebugMode sabit bir değer olduğundan, Dart derleyicisi bu kod bloğunu yayın modunda tamamen kaldırması gerektiğini bilir.

Emülatörleri başlatın

Flutter uygulamasını başlatmadan önce emülatörleri başlatmalısınız. Öncelikle terminalde şunu çalıştırarak emülatörleri başlatın:

firebase emulators:start

Bu komut emülatörleri başlatır ve onlarla etkileşim kurabileceğimiz localhost bağlantı noktalarını ortaya çıkarır. Bu komutu çalıştırdığınızda şuna benzer bir çıktı görmelisiniz:

Bu çıktı size hangi emülatörlerin çalıştığını ve emülatörleri nerede görebileceğinizi söyler. Öncelikle localhost:4000 adresindeki emülatör kullanıcı arayüzüne bakın.

Bu, yerel öykünücünü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ı durumuyla etiketlenir.

5. Firebase Auth emülatörü

Kullanacağınız ilk emülatör Kimlik Doğrulama emülatörüdür. Kullanıcı arayüzündeki Kimlik Doğrulama kartında "Emülatöre git" seçeneğini tıklayarak Kimlik Doğrulama emülatörüyle başlayın; şuna benzer bir sayfa göreceksiniz:

Bu sayfanın Auth web konsolu sayfasıyla benzerlikleri vardır. Çevrimiçi konsol gibi kullanıcıları listeleyen bir tabloya sahiptir ve kullanıcıları manuel olarak eklemenize olanak tanır. Buradaki büyük farklardan biri, emülatörlerde kullanılabilen tek kimlik doğrulama yöntemi seçeneğinin E-posta ve Şifre aracılığıyla olmasıdır. Bu yerel kalkınma için yeterlidir.

Daha sonra, Firebase Auth öykünücüsüne bir kullanıcı ekleme ve ardından bu kullanıcının Flutter UI aracılığıyla oturum açma sürecini adım adım izleyeceksiniz.

Kullanıcı ekle

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

Görünen ad: Dash
E-posta: dash@email.com
Şifre: Dashword

Formu gönderdiğinizde tablonun artık bir kullanıcıyı içerdiğini göreceksiniz. Artık o kullanıcıyla oturum açmak için kodu güncelleyebilirsiniz.

log_out_view.dart

LoggedOutView widget'ında güncellenmesi gereken tek kod, kullanıcı oturum açma düğmesine bastığında tetiklenen geri aramadadır. Kodu şu şekilde görünecek ş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, kimlik doğrulama öykünücüsünde oluşturduğunuz e-posta ve parolayla değiştirir. Ve bir sonraki satırda if(true) satırı, state.user boş olup olmadığını kontrol eden kodla değiştirildi. AppClass kod bu konuya daha fazla ışık tutuyor.

app_state.dart

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

İkinci olarak, aşağıda gösterildiği gibi AppState.login yöntemini 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? . Bu User sınıfı Firebase Auth'tan gelir ve birazdan tartışılacak olan User.displayName gibi gerekli bilgileri sağlar.

Bu, Firebase Auth'ta bir kullanıcının e-posta ve şifreyle oturum açması için gereken temel koddur. Oturum açmak için FirebaseAuth'a bir çağrı yapar ve bu, Future<UserCredential> nesnesini döndürür. Gelecek tamamlandığında bu kod, UserCredential öğesine eklenmiş bir User olup olmadığını kontrol eder. Kimlik bilgisi nesnesinde bir kullanıcı varsa, kullanıcı başarıyla oturum açmış demektir ve AppState.user özelliği ayarlanabilir. Eğer yoksa bir hata var demektir ve yazdırılmıştır.

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

YAPILACAKLAR: Eylem Simgesi – Uygulamanızı yeniden yükleyin ve oluşturulduğunda Giriş düğmesine basın. Bu, uygulamanın "Tekrar hoş geldin, Kişi!" yazan bir sayfaya gitmesine neden olur. tepede. Bu sayfaya gitmenize izin verildiği için kimlik doğrulamanın çalışıyor olması gerekir, ancak kullanıcının gerçek adını görüntülemek için logged_in_view.dart dosyasında küçük bir güncelleme yapılması gerekir.

login_in_view.dart

LoggedInView.build yöntemindeki 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(
 // ...

Artık bu satır, AppState nesnesindeki User özelliğinden displayName değerini alır. Bu displayName ilk kullanıcınızı tanımladığınızda öykünücüde ayarlandı. Uygulamanızda artık "Tekrar hoş geldiniz Dash!" mesajı görüntülenmelidir. TODO yerine oturum açtığınızda.

6. Firestore öykünücüsüne veri okuyun ve yazın

İlk önce Firestore öykünücüsüne göz atın. Emulator UI ana sayfasında ( localhost:4000 ), Firestore kartındaki "Emülatöre git" seçeneğini tıklayın. Şunun gibi görünmeli:

Emülatör:

Firebase konsolu:

Firestore deneyiminiz varsa bu sayfanın Firebase konsolunun Firestore sayfasına benzediğini fark edeceksiniz. Yine de birkaç dikkate değer farklılık var.

Tek tuşla tüm verileri temizleyebilirsiniz. Bu, üretim verileri açısından tehlikeli olabilir ancak hızlı yineleme için faydalıdır! Yeni bir proje üzerinde çalışıyorsanız ve veri modeliniz değişirse, bunu temizlemek kolaydır.
Bir "İstekler" sekmesi var. Bu sekme, bu öykünücüye yapılan istekleri izlemenizi sağlar. Bu sekmeyi birazdan daha ayrıntılı olarak ele alacağım.
Kurallar, Dizinler veya Kullanım için sekme yoktur. Güvenlik kurallarının yazılmasına yardımcı olan bir araç vardır (sonraki bölümde tartışılacaktır), ancak yerel öykünücü için güvenlik kuralları belirleyemezsiniz.

Listeyi özetlemek gerekirse, Firestore'un bu sürümü, geliştirme sırasında faydalı olan daha fazla araç sağlar ve üretimde ihtiyaç duyulan araçları kaldırır.

Firestore'a yaz

Emülatördeki 'İstekler' sekmesini tartışmadan önce bir istekte bulunun. Bu kod güncellemeleri gerektirir. Firestore'a Entry yeni bir günlük yazmak için uygulamadaki formu bağlayarak başlayın.

Bir Entry göndermek için üst düzey akış şöyledir:

Kullanıcı formu doldurur ve Submit düğmesine basar
Kullanıcı arayüzü AppState.writeEntryToFirebase çağırır
AppState.writeEntryToFirebase Firebase'e bir giriş ekler

1. veya 2. adımda yer alan kodların hiçbirinin değişmesine gerek yoktur. 3. adım için eklenmesi gereken tek kod AppState sınıfına eklenecektir. AppState.writeEntryToFirebase 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, Firestore'daki "Girişler" adlı koleksiyona bir referans alır. Daha sonra Map<String, String> türünde olması gereken yeni bir giriş ekler.

Bu durumda, Firestore'da "Girişler" koleksiyonu mevcut olmadığından Firestore bir tane oluşturdu.

Bu kod eklendiğinde, uygulamanızı çalışırken yeniden yükleyin veya yeniden başlatın, oturum açın ve EntryForm görünümüne gidin. Formu istediğiniz Strings doldurabilirsiniz. (Bu codelab için basitleştirildiği için Tarih alanı herhangi bir Dizeyi alacaktır. Hiçbir şekilde güçlü bir doğrulamaya sahip değildir veya DateTime nesneleri ile ilgilenmez.)

Formda gönder tuşuna basın. Uygulamada hiçbir şey olmayacak ancak yeni girişinizi öykünücünün kullanıcı arayüzünde görebilirsiniz.

Firestore emülatöründeki istekler sekmesi

Kullanıcı arayüzünde Firestore öykünücüsüne gidin ve "Veri" sekmesine bakın. Artık veritabanınızın kökünde "Girdiler" adında bir Koleksiyon bulunduğunu görmelisiniz. Forma girdiğiniz bilgilerin aynısını içeren bir belgeye sahip olmalıdır.

Bu, AppState.writeEntryToFirestore çalıştığını doğrular ve artık İstekler sekmesinde isteği daha ayrıntılı olarak inceleyebilirsiniz. Şimdi o sekmeye tıklayın.

Firestore emülatör istekleri

Burada buna benzer bir liste görmelisiniz:

Bu liste öğelerinden herhangi birine tıklayabilir ve oldukça fazla yararlı bilgi görebilirsiniz. Yeni bir yevmiye kaydı oluşturma isteğinize karşılık gelen CREATE liste öğesine tıklayın. Şuna benzeyen yeni bir tablo göreceksiniz:

Belirtildiğ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çtiğini (veya bu durumda başarısız olduğunu) gösterir. Daha sağlam bir uygulamada Güvenlik Kuralları büyüyebilir ve birden fazla yetkilendirme kontrolüne sahip olabilir. Bu görünüm, bu yetkilendirme kurallarının yazılmasına ve hatalarının ayıklanmasına 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 sağlar. Bu veriler karmaşık yetkilendirme kurallarını yazmak için kullanılır.

Firestore'dan okuma

Firestore, güncellenmiş verileri bağlı cihazlara göndermek için veri senkronizasyonunu kullanır. Flutter kodunda, Firestore koleksiyonlarını ve belgelerini dinleyebilir (veya abone olabilirsiniz) ve verileriniz değiştiğinde kodunuz bilgilendirilecektir. Bu uygulamada, Firestore güncellemelerinin dinlenmesi AppState._listenForEntries adı verilen yöntemde yapılır.

Bu kod, sırasıyla AppState._entriesStreamController ve AppState.entries adı verilen StreamController ve Stream ile birlikte çalışır. Bu kod, Firestore'dan gelen verileri görüntülemek için kullanıcı arayüzünde ihtiyaç duyulan tüm kodlar gibi zaten 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, Firestore'daki "Girişler" koleksiyonunu dinler. 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. Daha sonra, bu girişleri _entriesStreamController (kullanıcı arayüzünün dinlediği) adlı StreamController ekler. Bu kod gerekli olan tek güncellemedir.

Son olarak, AppState.logIn yönteminin, kullanıcı oturum açtıktan sonra dinleme işlemini başlatan _listenForEntries çağrı yaptığını hatırlayı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. Şunun gibi görünmeli:

7. Verileri öykünücüye aktarın ve içe aktarın

Firebase emülatörleri verilerin içe ve dışa aktarılmasını destekler. İçe aktarma ve dışa aktarma işlemlerini kullanmak, geliştirmeye ara verdiğinizde ve ardından devam ettiğinizde aynı verilerle geliştirmeye devam etmenize olanak tanır. Ayrıca veri dosyalarını git'e gönderebilirsiniz; birlikte çalıştığınız diğer geliştiriciler de çalışmak için aynı verilere sahip olur.

Emülatör verilerini dışa aktar

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

firebase emulators:export ./emulators_data

.emulators_data , Firebase'e verilerin nereye aktarılacağını söyleyen bir argümandır. Dizin yoksa oluşturulur. Bu dizin için istediğiniz adı kullanabilirsiniz.

Bu komutu çalıştırdığınızda, komutu çalıştırdığınız terminalde şu çıktıyı göreceksiniz:

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 çıktıyı göreceksiniz:

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

Ve son olarak, proje dizininize bakarsanız, kaydettiğiniz verileri içeren diğer meta veri dosyalarının yanı sıra JSON dosyalarını içeren ./emulators_data adlı bir dizin görmelisiniz.

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 terminalinizde CTRL+C tuşlarına basarak emülatörleri çalışıyorlarsa durdurun.

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

firebase emulators:start --import ./emulators_data

Emülatörler çalıştığında, localhost:4000 adresindeki emülatör kullanıcı arayüzüne gidin; daha önce üzerinde çalıştığınız verilerin aynısını görmelisiniz.

Emülatörleri kapatırken verileri otomatik olarak dışa aktarın

Ayrıca, her geliştirme oturumunun sonunda verileri dışarı aktarmayı hatırlamak yerine, öykünücülerden çıktığınızda verileri otomatik olarak dışarı aktarabilirsiniz.

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

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

İşte! Artık bu proje için emülatörlerle her çalıştığınızda verileriniz kaydedilecek ve yeniden yüklenecek. Ayrıca –export-on-exit flag bağımsız değişken olarak farklı bir dizin de belirtebilirsiniz, ancak bu, varsayılan olarak –import öğesine iletilen dizini kullanacaktır.

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

8. Tebrikler!

Firebase öykünücüsü ve Flutter ile çalışmaya başlama işlemini tamamladınız. Bu Codelab'in tamamlanmış kodunu github'daki "complete" dizininde bulabilirsiniz: Flutter Codelabs

Neleri ele aldık?

Firebase'i kullanmak için Flutter uygulamasını kurma
Firebase projesi oluşturma
FlutterFire CLI'si
Firebase CLI
Firebase Kimlik Doğrulama 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 Kimlik Doğrulamayı kullanma hakkında daha fazla bilgi edinin: Flutter Codelab için Firebase'i tanıyın
Emülatörler sunan diğer Firebase araçlarını keşfedin:
Bulut depolama
Bulut İşlevleri
Gerçek Zamanlı Veritabanı
Uygulamanıza Google Kimlik Doğrulamasını hızlı bir şekilde eklemek için FlutterFire kullanıcı arayüzünü keşfedin.

Daha fazla bilgi edin

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

Sparky seninle gurur duyuyor!

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

1. Başlamadan önce

Önkoşullar

Ne yaratacaksınız

Ne öğreneceksin

İhtiyacınız olan şey

2. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

Cloud Firestore'u etkinleştirin

3. Flutter uygulamasını kurun

Başlangıç ​​kodunu alın

Firebase CLI'yi yükleyin

FlutterFire CLI'yi yükleyin

Firebase projenizi Flutter uygulamanıza eklemek için Firebase CLI ve FlutterFire CLI'yi kullanın

FlutterFire'ı yapılandırın

Flutter uygulamasına Firebase paketleri ekleme

4. Firebase emülatörlerini etkinleştirme

ana.dart

Emülatörleri başlatın

5. Firebase Auth emülatörü

Kullanıcı ekle

log_out_view.dart

app_state.dart

login_in_view.dart

6. Firestore öykünücüsüne veri okuyun ve yazın

Firestore'a yaz

app_state.dart

Firestore emülatöründeki istekler sekmesi

Firestore emülatör istekleri

Firestore'dan okuma

app_state.dart

7. Verileri öykünücüye aktarın ve içe aktarın

Emülatör verilerini dışa aktar

Emülatör verilerini içe aktar

Emülatörleri kapatırken verileri otomatik olarak dışa aktarın

8. Tebrikler!

Neleri ele aldık?

Sonraki adımlar

Daha fazla bilgi edin

Başlangıç kodunu alın