דף זה תורגם על ידי Cloud Translation API.

פיתוח מקומי עבור אפליקציות Flutter שלך באמצעות Firebase Emulator Suite

1. לפני שמתחילים

במעבדת קוד זה, תלמד כיצד להשתמש בחבילת האמולטור של Firebase עם Flutter במהלך פיתוח מקומי. תלמד כיצד להשתמש באימות סיסמת דוא"ל באמצעות Emulator Suite, וכיצד לקרוא ולכתוב נתונים לאמולטור Firestore. לבסוף, תעבדו עם ייבוא וייצוא נתונים מהאמולטורים, כדי לעבוד עם אותם נתונים מזויפים בכל פעם שתחזרו לפיתוח.

דרישות מוקדמות

מעבד הקוד הזה מניח שיש לך קצת ניסיון ב-Flutter. אם לא, אולי כדאי ללמוד תחילה את היסודות. הקישורים הבאים מועילים:

צא לסיור במסגרת ה-Flutter Widget
נסה את אפליקציית Write Your First Flutter, חלק 1 codelab

אתה צריך גם קצת ניסיון ב-Firebase, אבל זה בסדר אם מעולם לא הוספת את Firebase לפרויקט Flutter. אם אינך מכיר את קונסולת Firebase, או שאתה חדש לגמרי ב-Firebase, עיין תחילה בקישורים הבאים:

מה אתה תיצור

מעבדת קוד זה מנחה אותך בבניית יישום פשוט ל-Journaling. לאפליקציה יהיה מסך כניסה, ומסך המאפשר לקרוא רשומות יומן קודמות, וליצור חדשות.

מה תלמד

תלמד כיצד להתחיל להשתמש ב-Firebase, וכיצד לשלב ולהשתמש בחבילת Firebase Emulator בזרימת העבודה שלך בפיתוח Flutter. הנושאים האלה של Firebase ייסקרו:

שים לב שהנושאים האלה מכוסים במידה שהם נדרשים כדי לכסות את חבילת האמולטורים של Firebase. מעבד קוד זה מתמקד בהוספת פרויקט Firebase לאפליקציית Flutter שלך, ופיתוח באמצעות Firebase Emulator Suite. לא יתקיימו דיונים מעמיקים על אימות Firebase או Firestore. אם אינך מכיר את הנושאים הללו, אנו ממליצים להתחיל עם מעבדת הקוד הכרת Firebase for Flutter .

מה אתה צריך

ידע בעבודה על Flutter וה- SDK המותקן
עורכי טקסט Intellij JetBrains או VS Code
דפדפן Google Chrome (או יעד אחר לפיתוח המועדף עליך עבור Flutter. פקודות מסוימות במעבדת קוד זה יניחו שאתה מפעיל את האפליקציה שלך ב-Chrome)

2. צור והגדר פרוייקט Firebase

המשימה הראשונה שתצטרך להשלים היא יצירת פרויקט Firebase בקונסולת האינטרנט של Firebase. הרוב המכריע של מעבדת הקוד הזה יתמקד בחבילת האמולטור, המשתמשת בממשק משתמש מקומי הפועל, אבל תחילה עליך להגדיר פרויקט Firebase מלא.

צור פרויקט Firebase

היכנס למסוף Firebase.
במסוף Firebase, לחץ על הוסף פרוייקט (או צור פרוייקט ), והזן שם עבור פרוייקט Firebase שלך (לדוגמה, " Firebase-Flutter-Codelab") .

לחץ על אפשרויות יצירת הפרויקט. קבל את תנאי Firebase אם תתבקש. דלג על הגדרת Google Analytics, כי לא תשתמש ב-Analytics עבור האפליקציה הזו.

למידע נוסף על פרויקטים של Firebase, ראה הבנת פרויקטי Firebase .

האפליקציה שאתה בונה משתמשת בשני מוצרי Firebase הזמינים עבור אפליקציות Flutter:

אימות Firebase כדי לאפשר למשתמשים שלך להיכנס לאפליקציה שלך.
Cloud Firestore כדי לשמור נתונים מובנים בענן ולקבל הודעה מיידית כאשר הנתונים משתנים.

שני המוצרים הללו זקוקים לתצורה מיוחדת או שצריכים להיות מופעלים באמצעות מסוף Firebase.

הפעל את Cloud Firestore

אפליקציית Flutter משתמשת ב-Cloud Firestore כדי לשמור רשומות יומן.

הפעל את Cloud Firestore:

בקטע Build של מסוף Firebase, לחץ על Cloud Firestore .
לחץ על צור מסד נתונים .
בחר באפשרות התחל במצב בדיקה . קרא את כתב הוויתור על כללי האבטחה. מצב בדיקה מבטיח שאתה יכול לכתוב בחופשיות למסד הנתונים במהלך הפיתוח. הקש "הבא .
בחר את המיקום עבור מסד הנתונים שלך (אתה יכול פשוט להשתמש בברירת המחדל). שים לב שלא ניתן לשנות את המיקום הזה מאוחר יותר.
לחץ על הפעל .

3. הגדר את אפליקציית Flutter

תצטרך להוריד את קוד ההתחלה ולהתקין את Firebase CLI לפני שנתחיל.

קבל את קוד ההתחלה

שכבו את מאגר GitHub משורת הפקודה:

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

לחלופין, אם מותקן אצלך כלי cli של GitHub :

gh repo clone flutter/codelabs flutter-codelabs

יש לשכפל את הקוד לדוגמה לתוך ספריית flutter-codelabs , המכילה את הקוד לאוסף של מעבדות קוד. הקוד למעבדת קוד זה נמצא ב- flutter-codelabs/firebase-emulator-suite .

מבנה הספריות תחת flutter-codelabs/firebase-emulator-suite הוא שני פרויקטים של Flutter. אחד נקרא complete , שאליו אתה יכול להפנות אם אתה רוצה לדלג קדימה, או להצליב את הקוד שלך. הפרויקט השני נקרא start .

הקוד שברצונך להתחיל איתו נמצא בספרייה flutter-codelabs/firebase-emulator-suite/start . פתח או ייבא את הספרייה ל-IDE המועדף עליך.

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

התקן את Firebase CLI

Firebase CLI מספק כלים לניהול פרויקטי Firebase שלך. ה-CLI נדרש כדי להשתמש ב-Emulator Suite, אז תצטרך להתקין אותו.

ישנן מגוון דרכים להתקנת ה-CLI. הדרך הפשוטה ביותר, אם אתה משתמש ב-MacOS או Linux, היא להפעיל את הפקודה הזו מהמסוף שלך:

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

לאחר התקנת ה-CLI, עליך לבצע אימות באמצעות Firebase.

היכנס ל-Firebase באמצעות חשבון Google שלך על ידי הפעלת הפקודה הבאה:

firebase login

פקודה זו מחברת את המחשב המקומי שלך ל-Firebase ומעניקה לך גישה לפרויקטים שלך ב-Firebase.

בדוק שה-CLI מותקן כהלכה ויש לו גישה לחשבון שלך על ידי רישום הפרויקטים שלך ב-Firebase. הפעל את הפקודה הבאה:

firebase projects:list

הרשימה המוצגת צריכה להיות זהה לפרויקטים של Firebase הרשומים במסוף Firebase . אתה אמור לראות לפחות firebase-flutter-codelab.

התקן את FlutterFire CLI

FlutterFire CLI בנוי על גבי Firebase CLI, והוא מקל על שילוב פרויקט Firebase עם אפליקציית Flutter שלך.

ראשית, התקן את ה-CLI:

dart pub global activate flutterfire_cli

ודא שה-CLI הותקן. הפעל את הפקודה הבאה בתוך ספריית הפרויקט Flutter וודא שה-CLI מוציא את תפריט העזרה.

flutterfire --help

השתמש ב-Firebase CLI וב-FlutterFire CLI כדי להוסיף את פרויקט Firebase שלך לאפליקציית Flutter

כששני ה-CLI מותקנים, אתה יכול להגדיר מוצרי Firebase בודדים (כמו Firestore), להוריד את האמולטורים ולהוסיף את Firebase לאפליקציית Flutter שלך עם כמה פקודות מסוף בלבד.

ראשית, סיים להגדיר את Firebase על ידי הפעלת הפעולות הבאות:

firebase init

פקודה זו תוביל אותך דרך סדרה של שאלות הדרושות להגדרת הפרויקט שלך. צילומי מסך אלה מציגים את הזרימה:

כאשר תתבקש לבחור תכונות, בחר "Firestore" ו"אמולטורים". (אין אפשרות אימות, מכיוון שהיא אינה משתמשת בתצורה הניתנת לשינוי מקבצי פרויקט Flutter שלך.)
לאחר מכן, בחר "השתמש בפרויקט קיים", כאשר תתבקש.

כעת, בחר את הפרוייקט שיצרת בשלב הקודם: flutter-firebase-codelab.

לאחר מכן, תישאל סדרה של שאלות לגבי מתן שמות לקבצים שייווצרו. אני מציע ללחוץ על "Enter" עבור כל שאלה כדי לבחור ברירת המחדל.
לבסוף, תצטרך להגדיר את האמולטורים. בחר Firestore ואימות מהרשימה, ולאחר מכן הקש "Enter" לכל שאלה לגבי היציאות הספציפיות לשימוש עבור כל אמולטור. עליך לבחור את ברירת המחדל, כן, כאשר תישאל אם אתה רוצה להשתמש בממשק המשתמש של האמולטור.

בסוף התהליך, אתה אמור לראות פלט שנראה כמו צילום המסך הבא.

חשוב : הפלט שלך עשוי להיות שונה במקצת משלי, כפי שניתן לראות בצילום המסך למטה, מכיוון שהשאלה הסופית תהיה ברירת המחדל "לא" אם כבר הורדת את האמולטורים.

הגדר את FlutterFire

לאחר מכן, תוכל להשתמש ב-FlutterFire כדי ליצור את קוד Dart הדרוש לשימוש ב-Firebase באפליקציית Flutter שלך.

flutterfire configure

כאשר פקודה זו מופעלת, תתבקש לבחור באיזה פרויקט Firebase אתה רוצה להשתמש, ואילו פלטפורמות אתה רוצה להגדיר. במעבדת הקוד הזה, הדוגמאות משתמשות ב-Flutter Web, אבל אתה יכול להגדיר את פרויקט Firebase שלך כך שישתמש בכל האפשרויות.

צילומי המסך הבאים מציגים את ההנחיות שתצטרך לענות.

צילום מסך זה מציג את הפלט בסוף התהליך. אם אתם מכירים את Firebase, תשימו לב שלא הייתם צריכים ליצור אפליקציות בקונסולה, וה- FlutterFire CLI עשה זאת עבורכם.

הוסף חבילות Firebase לאפליקציית Flutter

שלב ההגדרה האחרון הוא הוספת חבילות Firebase הרלוונטיות לפרויקט Flutter שלך. בטרמינל, ודא שאתה נמצא בשורש של פרויקט Flutter ב- flutter-codelabs/firebase-emulator-suite/start . לאחר מכן, הפעל את שלוש הפקודות הבאות:

flutter pub add firebase_core

flutter pub add firebase_auth

flutter pub add cloud_firestore

אלו החבילות היחידות בהן תשתמש ביישום זה.

4. הפעלת אמולטורים של Firebase

עד כה, אפליקציית Flutter ופרויקט Firebase שלך מוגדרים כך שיוכלו להשתמש באמולטורים, אך אתה עדיין צריך לומר לקוד Flutter לנתב מחדש בקשות Firebase יוצאות ליציאות המקומיות.

ראשית, הוסף את קוד האתחול של Firebase וקוד הגדרת האמולטור לפונקציה main ב- main.dart.

main.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());
}

שורות הקוד הראשונות מאתחלות את Firebase. באופן כמעט אוניברסלי, אם אתה עובד עם Firebase באפליקציית Flutter, אתה רוצה להתחיל בקריאה ל- WidgetsFlutterBinding.ensureInitialized ו- Firebase.initializeApp .

לאחר מכן, הקוד שמתחיל בשורה if (kDebugMode) אומר לאפליקציה שלך למקד לאמולטורים ולא לפרויקט Firebase ייצור. kDebugMode מבטיח שהמיקוד לאמולטורים יתרחש רק אם אתה נמצא בסביבת פיתוח. מכיוון ש- kDebugMode הוא ערך קבוע, מהדר Dart יודע להסיר את בלוק הקוד הזה לגמרי במצב שחרור.

הפעל את האמולטורים

עליך להפעיל את האמולטורים לפני שתפעיל את אפליקציית Flutter. ראשית, הפעל את האמולטורים על ידי הפעלת זה בטרמינל:

firebase emulators:start

פקודה זו מאתחלת את האמולטורים וחושפת יציאות localhost איתם נוכל לקיים אינטראקציה איתם. כאשר אתה מפעיל את הפקודה הזו, אתה אמור לראות פלט דומה לזה:

פלט זה אומר לך אילו אמולטורים פועלים, ולאן אתה יכול ללכת לראות את האמולטורים. ראשית, בדוק את ממשק המשתמש של האמולטור ב- localhost:4000 .

זהו דף הבית של ממשק המשתמש של האמולטור המקומי. זה מפרט את כל האמולטורים הזמינים, וכל אחד מהם מסומן עם סטטוס מופעל או כבוי.

5. אמולטור Firebase Auth

האמולטור הראשון שבו תשתמש הוא אמולטור האימות. התחל עם אמולטור Auth על ידי לחיצה על "עבור לאמולטור" בכרטיס האימות בממשק המשתמש, ותראה עמוד שנראה כך:

לדף זה יש קווי דמיון לדף מסוף האינטרנט Auth. יש לו טבלה המפרטת את המשתמשים כמו הקונסולה המקוונת, ומאפשרת לך להוסיף משתמשים באופן ידני. הבדל אחד גדול כאן הוא שהאפשרות היחידה של שיטת האימות הזמינה באמולטורים היא באמצעות דואר אלקטרוני וסיסמה. זה מספיק לפיתוח מקומי.

לאחר מכן, תעבור על התהליך של הוספת משתמש לאמולטור Firebase Auth, ולאחר מכן תיכנס למשתמש זה דרך ממשק המשתמש של Flutter.

הוסף משתמש

לחץ על כפתור "הוסף משתמש" ומלא את הטופס עם המידע הזה:

שם תצוגה: מקף
דוא"ל: dash@email.com
סיסמה: מקש

שלח את הטופס ותראה שהטבלה כוללת כעת משתמש. עכשיו אתה יכול לעדכן את הקוד כדי להיכנס עם אותו משתמש.

logd_out_view.dart

הקוד היחיד בווידג'ט LoggedOutView שיש לעדכן הוא בהתקשרות חוזרת שמופעלת כאשר משתמש לוחץ על כפתור ההתחברות. עדכן את הקוד כך שיראה כך:

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'),
          ),
        ),
      ],
    ),
   ),
  );
 }
}

הקוד המעודכן מחליף את מחרוזות TODO בדוא"ל ובסיסמה שיצרת באמולטור האימות. ובשורה הבאה, שורת if(true) הוחלפה בקוד שבודק אם state.user הוא null. הקוד ב- AppClass שופך יותר אור על זה.

app_state.dart

יש לעדכן שני חלקים מהקוד ב- AppState . ראשית, תן לחבר הכיתה AppState.user את הסוג User מחבילת firebase_auth , במקום את הסוג Object .

שנית, מלא את שיטת AppState.login כפי שמוצג להלן:

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!');
   }
 } 
 // ...
}

הגדרת הסוג למשתמש היא כעת User? . כיתת User זו מגיעה מ-Firebase Auth, ומספקת מידע נחוץ כגון User.displayName , שנדון עוד מעט.

זהו קוד בסיסי הדרוש לכניסה למשתמש עם דוא"ל וסיסמה ב-Firebase Auth. הוא מבצע קריאה ל-FirebaseAuth כדי להיכנס, מה שמחזיר אובייקט Future<UserCredential> . כשהעתיד יסתיים, הקוד הזה בודק אם יש User שמצורף ל- UserCredential . אם יש משתמש באובייקט האישור, אז משתמש נכנס בהצלחה, וניתן להגדיר את המאפיין AppState.user . אם אין, אז הייתה שגיאה, והיא מודפסת.

שים לב ששורת הקוד היחידה בשיטה זו הספציפית לאפליקציה הזו (ולא קוד FirebaseAuth כללי) היא הקריאה לשיטת _listenForEntries , שתכוסה בשלב הבא.

מטלה: סמל פעולה - טען מחדש את האפליקציה שלך ולאחר מכן לחץ על כפתור ההתחברות כאשר היא מוצגת. זה גורם לאפליקציה לנווט לדף שאומר "ברוכים הבאים, אדם!" בחלק העליון. האימות חייב לפעול, מכיוון שהוא מאפשר לך לנווט לדף זה, אך יש לבצע עדכון קל ל- logged_in_view.dart כדי להציג את השם האמיתי של המשתמש.

logd_in_view.dart

שנה את השורה הראשונה בשיטת LoggedInView.build :

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(
 // ...

כעת, שורה זו תופסת את displayName מהמאפיין User באובייקט AppState . displayName זה הוגדר באמולטור כאשר הגדרת את המשתמש הראשון שלך. האפליקציה שלך אמורה להציג כעת "ברוכים הבאים, דאש!" כשאתה מתחבר, במקום TODO .

6. קרא וכתוב נתונים לאמולטור Firestore

ראשית, בדוק את אמולטור Firestore. בדף הבית של ממשק המשתמש של אמולטור ( localhost:4000 ), לחץ על "עבור לאמולטור" בכרטיס Firestore. זה אמור להיראות כך:

אמולטור:

קונסולת Firebase:

אם יש לך ניסיון כלשהו עם Firestore, תבחין שדף זה נראה דומה לדף Firestore של קונסולת Firebase. עם זאת, ישנם כמה הבדלים בולטים.

אתה יכול לנקות את כל הנתונים בלחיצת כפתור אחד. זה יהיה מסוכן עם נתוני ייצור, אבל מועיל לאיטרציה מהירה! אם אתה עובד על פרויקט חדש ומודל הנתונים שלך משתנה, קל לנקות אותו.
יש לשונית "בקשות". כרטיסייה זו מאפשרת לך לצפות בבקשות נכנסות שנשלחות לאמולטור זה. אדון בכרטיסייה זו ביתר פירוט בעוד מעט.
אין כרטיסיות עבור כללים, אינדקסים או שימוש. יש כלי (שנדון בסעיף הבא) שעוזר בכתיבת כללי אבטחה, אבל לא ניתן להגדיר כללי אבטחה עבור האמולטור המקומי.

לסיכום רשימה זו, גרסה זו של Firestore מספקת עוד כלים שימושיים במהלך הפיתוח, ומסירה כלים הדרושים לייצור.

כתוב ל-Firestore

לפני שנדון בלשונית 'בקשות' באמולטור, תחילה שלח בקשה. זה דורש עדכוני קוד. התחל על ידי חיבור הטופס באפליקציה כדי לכתוב Entry יומן חדש ל-Firestore.

הזרימה ברמה גבוהה להגשת Entry היא:

המשתמש ממלא טופס ולחץ על כפתור Submit
ממשק המשתמש קורא AppState.writeEntryToFirebase
AppState.writeEntryToFirebase מוסיף ערך ל-Firebase

אף אחד מהקודים המעורבים בשלב 1 או 2 לא צריך להשתנות. הקוד היחיד שצריך להוסיף עבור שלב 3 יתווסף במחלקת AppState . בצע את השינוי הבא ל- AppState.writeEntryToFirebase .

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 תופס הפניה לאוסף שנקרא "Entries" ב-Firestore. לאחר מכן הוא מוסיף ערך חדש, שצריך להיות מסוג Map<String, String> .

במקרה זה, אוסף ה"ערכים" ב-Firestore לא היה קיים, אז Firestore יצרה אחד.

עם הוספת הקוד הזה, טען מחדש או הפעל מחדש את האפליקציה שלך, התחבר ונווט לתצוגת EntryForm . אתה יכול למלא את הטופס עם כל Strings שתרצה. (השדה Date ייקח כל מחרוזת, מכיוון שהוא פושט עבור מעבדת קוד זה. אין לו אימות חזק או אכפת לו מאובייקטי DateTime בשום אופן).

לחץ על שלח בטופס. שום דבר לא יקרה באפליקציה, אבל אתה יכול לראות את הערך החדש שלך בממשק המשתמש של האמולטור.

לשונית הבקשות באמולטור Firestore

בממשק המשתמש, נווט לאמולטור Firestore והסתכל בכרטיסייה "נתונים". אתה אמור לראות שיש עכשיו אוסף בשורש מסד הנתונים שלך בשם "ערכים". זה צריך להיות מסמך המכיל את אותו מידע שהזנת בטופס.

זה מאשר שה- AppState.writeEntryToFirestore עבד, ועכשיו אתה יכול להמשיך ולחקור את הבקשה בכרטיסייה בקשות. לחץ על הכרטיסייה הזו עכשיו.

בקשות אמולטור של Firestore

כאן, אתה אמור לראות רשימה שנראית דומה לזה:

אתה יכול ללחוץ על כל אחד מפריטי הרשימה האלה ולראות לא מעט מידע מועיל. לחץ על פריט הרשימה CREATE התואם לבקשתך ליצירת רישום יומן חדש. תראה טבלה חדשה שנראית כך:

כאמור, אמולטור Firestore מספק כלים לפיתוח כללי האבטחה של האפליקציה שלך. תצוגה זו מראה בדיוק איזה שורה בכללי האבטחה שלך עברה בקשה זו (או נכשלה, אם זה היה המקרה). באפליקציה חזקה יותר, כללי אבטחה יכולים לגדול ולבצע בדיקות הרשאות מרובות. תצוגה זו משמשת כדי לעזור בכתיבה וניפוי באגים של כללי הרשאה אלה.

זה גם מספק דרך קלה לבדוק כל חלק בבקשה זו, כולל המטא נתונים ונתוני האימות. נתונים אלה משמשים לכתיבת כללי הרשאה מורכבים.

קריאה מ-Firestore

Firestore משתמשת בסנכרון נתונים כדי לדחוף נתונים מעודכנים למכשירים מחוברים. בקוד Flutter, אתה יכול להאזין (או להירשם) לאוספים ומסמכים של Firestore, והקוד שלך יקבל הודעה בכל פעם שישתנו נתונים. באפליקציה זו, ההאזנה לעדכוני Firestore מתבצעת בשיטה הנקראת AppState._listenForEntries .

קוד זה פועל בשילוב עם ה- StreamController וה- Stream הנקראים AppState._entriesStreamController ו- AppState.entries , בהתאמה. הקוד הזה כבר כתוב, וכך גם כל הקוד הדרוש בממשק המשתמש כדי להציג את הנתונים מ-Firestore.

עדכן את שיטת _listenForEntries כך שתתאים לקוד שלהלן:

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);
   });
 }
 // ...
}

קוד זה מאזין לאוסף "ערכים" ב-Firestore. כאשר Firestore מודיעה ללקוח הזה שיש נתונים חדשים, היא מעבירה את הנתונים האלה והקוד ב _listenForEntries משנה את כל מסמכי הצאצא שלו לאובייקט שהאפליקציה שלנו יכולה להשתמש בו ( Entry ). לאחר מכן, הוא מוסיף את הערכים הללו ל- StreamController הנקרא _entriesStreamController (שממשק המשתמש מאזין לו). קוד זה הוא העדכון היחיד הנדרש.

לבסוף, זכור ששיטת AppState.logIn מבצעת קריאה ל _listenForEntries , שמתחילה את תהליך ההאזנה לאחר שמשתמש נכנס.

// ...
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!');
 }
}
// ...

כעת הפעל את האפליקציה. זה אמור להיראות כך:

7. ייצא וייבא נתונים לאמולטור

אמולטורים של Firebase תומכים בייבוא וייצוא נתונים. השימוש ביבוא וביצוא מאפשר לך להמשיך בפיתוח עם אותם נתונים כאשר אתה לוקח הפסקה מהפיתוח ולאחר מכן המשך. אתה יכול גם להעביר קבצי נתונים ל-git, ולמפתחים אחרים שאתה עובד איתם יהיו אותם נתונים לעבוד איתם.

ייצוא נתוני אמולטור

ראשית, ייצא את נתוני האמולטור שכבר יש לך. בזמן שהאמולטורים עדיין פועלים, פתח חלון מסוף חדש והזן את הפקודה הבאה:

firebase emulators:export ./emulators_data

.emulators_data הוא ארגומנט שאומר ל-Firebase לאן לייצא את הנתונים. אם הספרייה לא קיימת, היא נוצרת. אתה יכול להשתמש בכל שם שתרצה עבור הספרייה הזו.

כאשר אתה מפעיל את הפקודה הזו, תראה את הפלט הזה במסוף שבו הפעלת את הפקודה:

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

ואם תעבור לחלון הטרמינל שבו פועלים האמולטורים, תראה את הפלט הזה:

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

ולבסוף, אם אתה מסתכל בספריית הפרויקט שלך, אתה אמור לראות ספרייה בשם ./emulators_data , המכילה קבצי JSON , בין קבצי מטא נתונים אחרים, עם הנתונים ששמרת.

ייבוא נתוני אמולטור

כעת, אתה יכול לייבא את הנתונים האלה כחלק מתהליך העבודה בפיתוח שלך, ולהתחיל מאיפה שהפסקת.

ראשית, הפסק את האמולטורים אם הם פועלים על ידי לחיצה על CTRL+C בטרמינל שלך.

לאחר מכן, הפעל את פקודת emulators:start שכבר ראית, אבל עם דגל שמראה לו אילו נתונים לייבא:

firebase emulators:start --import ./emulators_data

כאשר האמולטורים פועלים, נווט אל ממשק המשתמש של האמולטור בכתובת localhost:4000 , ואתה אמור לראות את אותם נתונים שעבדת איתם בעבר.

ייצא נתונים אוטומטית בעת סגירת אמולטורים

אתה יכול גם לייצא נתונים אוטומטית כאשר אתה עוזב את האמולטורים, במקום לזכור לייצא את הנתונים בסוף כל סשן פיתוח.

כאשר אתה מפעיל את האמולטורים שלך, הפעל את הפקודה emulators:start עם שני דגלים נוספים.

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

וואלה! כעת הנתונים שלך יישמרו ויטענו מחדש בכל פעם שאתה עובד עם האמולטורים של פרויקט זה. אתה יכול גם לציין ספרייה אחרת כארגומנט לדגל –export-on-exit flag , אך היא תהיה ברירת המחדל לספרייה המועברת אל –import .

אתה יכול להשתמש בכל שילוב של אפשרויות אלה גם כן. זו ההערה מהמסמכים : ניתן לציין את ספריית הייצוא עם הדגל הזה: firebase emulators:start --export-on-exit=./saved-data . אם נעשה שימוש --import , נתיב הייצוא מוגדר כברירת מחדל זהה; לדוגמה: firebase emulators:start --import=./data-path --export-on-exit . לבסוף, אם תרצה, העבירו נתיבים שונים של ספרייה לדגלי --import ו-- --export-on-exit .

8. מזל טוב!

סיימתם להתחיל לעבוד עם אמולטור Firebase ו-Flutter. אתה יכול למצוא את הקוד המושלם עבור Codelab זה בספריית "השלם" ב-github: Flutter Codelabs

מה שכיסינו

הגדרת אפליקציית Flutter לשימוש ב-Firebase
הגדרת פרויקט Firebase
FlutterFire CLI
Firebase CLI
אמולטור אימות Firebase
אמולטור Firebase Firestore
ייבוא וייצוא נתוני אמולטור

הצעדים הבאים

למידע נוסף על שימוש ב-Firestore ואימות ב-Flutter: הכר את Firebase for Flutter Codelab
גלה כלים אחרים של Firebase המציעים אמולטורים:
אחסון בענן
פונקציות ענן
מסד נתונים בזמן אמת
חקור את ממשק המשתמש של FlutterFire כדי להוסיף במהירות את אימות Google לאפליקציה שלך.

למד עוד

אתר Firebase: firebase.google.com
אתר פלאטר: flutter.dev
ווידג'טים של FlutterFire Firebase Flutter: firebase.flutter.dev
ערוץ YouTube של Firebase
ערוץ יוטיוב פלאטר

ספרקי גאה בך!

פיתוח מקומי עבור אפליקציות Flutter שלך באמצעות Firebase Emulator Suite

1. לפני שמתחילים

דרישות מוקדמות

מה אתה תיצור

מה תלמד

מה אתה צריך

2. צור והגדר פרוייקט Firebase

צור פרויקט Firebase

הפעל את Cloud Firestore

3. הגדר את אפליקציית Flutter

קבל את קוד ההתחלה

התקן את Firebase CLI

התקן את FlutterFire CLI

השתמש ב-Firebase CLI וב-FlutterFire CLI כדי להוסיף את פרויקט Firebase שלך ​​לאפליקציית Flutter

הגדר את FlutterFire

הוסף חבילות Firebase לאפליקציית Flutter

4. הפעלת אמולטורים של Firebase

main.dart

הפעל את האמולטורים

5. אמולטור Firebase Auth

הוסף משתמש

logd_out_view.dart

app_state.dart

logd_in_view.dart

6. קרא וכתוב נתונים לאמולטור Firestore

כתוב ל-Firestore

app_state.dart

לשונית הבקשות באמולטור Firestore

בקשות אמולטור של Firestore

קריאה מ-Firestore

app_state.dart

7. ייצא וייבא נתונים לאמולטור

ייצוא נתוני אמולטור

ייבוא ​​נתוני אמולטור

ייצא נתונים אוטומטית בעת סגירת אמולטורים

8. מזל טוב!

מה שכיסינו

הצעדים הבאים

למד עוד

השתמש ב-Firebase CLI וב-FlutterFire CLI כדי להוסיף את פרויקט Firebase שלך לאפליקציית Flutter

ייבוא נתוני אמולטור