認識 Firebase for Flutter

1. 事前準備

在本程式碼研究室中,您將瞭解 Firebase 的一些基本概念,以建立適用於 Android 和 iOS 的 Flutter 行動應用程式。

事前準備

課程內容

  • 如何在 Android、iOS、網頁版和 macOS 裝置上透過 Flutter 建立活動回覆和留言板即時通訊應用程式。
  • 如何使用 Firebase 驗證功能驗證使用者,並用 Firestore 同步處理資料。

Android 上的應用程式主畫面

iOS 裝置的主畫面

事前準備

下列任一裝置:

  • 將實體 Android 或 iOS 裝置接上電腦,並設為開發人員模式。
  • iOS 模擬工具 (需要 Xcode 工具)。
  • Android 模擬器 (需要在 Android Studio 中設定)。

此外,您還需要下列資源:

  • 使用您選擇的瀏覽器,例如 Google Chrome。
  • 透過 Dart 和 Flutter 外掛程式 (例如 Android StudioVisual Studio Code) 設定的 IDE 或文字編輯器。
  • 最新版本的 stable Flutterbeta,如果您喜歡在邊緣生活。
  • 用於建立及管理 Firebase 專案的 Google 帳戶。
  • 已登入 Google 帳戶的 Firebase CLI

2. 取得程式碼範例

從 GitHub 下載專案的初始版本:

  1. 在指令列中,複製 flutter-codelabs 目錄中的 GitHub 存放區
git clone https://github.com/flutter/codelabs.git flutter-codelabs

flutter-codelabs 目錄含有一系列程式碼研究室的程式碼。本程式碼研究室的程式碼位於 flutter-codelabs/firebase-get-to-know-flutter 目錄中。目錄包含一系列快照,顯示專案應如何查看每個步驟的結尾。例如,你目前在第二個步驟

  1. 找出第二個步驟的相符檔案:
cd flutter-codelabs/firebase-get-to-know-flutter/step_02

如要跳至下一個步驟,或是查看步驟完成後的畫面,請查看以您感興趣的步驟命名的目錄。

匯入範例應用程式

  • 在想用的 IDE 中開啟或匯入 flutter-codelabs/firebase-get-to-know-flutter/step_02 目錄。這個目錄包含程式碼研究室的範例程式碼,其中包含一個還沒有功能的 Flutter 聚會應用程式。

找出需要處理的檔案

這個應用程式中的程式碼分散在多個目錄。這種功能劃分功能可讓程式碼依功能分組,因此可讓工作更輕鬆。

  • 找出下列檔案:
    • lib/main.dart:這個檔案包含主要進入點和應用程式小工具。
    • lib/home_page.dart:此檔案包含首頁小工具。
    • lib/src/widgets.dart:這個檔案內含幾個小工具,可協助標準化應用程式的樣式。可撰寫範例應用程式的畫面。
    • lib/src/authentication.dart:這個檔案內含一組小工具的驗證作業與一組小工具,旨在讓使用者體驗 Firebase 電子郵件型驗證的登入使用者體驗。這些驗證流程的小工具尚未在範例應用程式中使用,但你很快就會新增。

您可以視需要新增其他檔案,建構應用程式的其餘部分。

查看 lib/main.dart 檔案

這個應用程式會使用 google_fonts 套件,將 Roboto 設為整個應用程式的預設字型。你可以瀏覽 fonts.google.com,並使用在應用程式各部分找到的字型。

您可以使用 lib/src/widgets.dart 檔案中的輔助小工具,格式為 HeaderParagraphIconAndDetail。這些小工具會排除重複的程式碼,減少 HomePage 所描述網頁版面配置的雜亂。還能維持一致的外觀和風格。

以下是您的應用程式在 Android、iOS、網頁和 macOS 上的外觀:

Android 上的應用程式主畫面

iOS 裝置的主畫面

網頁應用程式的主畫面

macOS 上的應用程式主畫面

3. 建立及設定 Firebase 專案

顯示活動資訊對來賓有很大的幫助,但對於單方面來說,活動資訊並不實用。您必須在應用程式中新增一些動態功能。如果要這麼做,您必須將 Firebase 連結至應用程式。如要開始使用 Firebase,請建立並設定 Firebase 專案。

建立 Firebase 專案

  1. 登入 Firebase
  2. 在控制台中,按一下「新增專案」或「建立專案」
  3. 在「專案名稱」欄位中輸入「Firebase-Flutter-Codelab」,然後按一下「繼續」

4395e4e67c08043a.png

  1. 點選專案建立選項。如果出現系統提示,請接受 Firebase 條款,但不要在這個應用程式中使用 Google Analytics,因此可略過設定。

b7138cde5f2c7b61.png

如要進一步瞭解 Firebase 專案,請參閱「瞭解 Firebase 專案」一文。

這個應用程式使用下列適用於網頁應用程式的 Firebase 產品:

  • 驗證:讓使用者登入您的應用程式。
  • Firestore:在雲端儲存結構化資料,並在資料變更時收到即時通知。
  • Firebase 安全性規則:保護資料庫。

部分產品需要特殊設定,或是您需要在 Firebase 控制台中啟用。

啟用電子郵件登入驗證

  1. 在 Firebase 控制台的「專案總覽」窗格中,展開「建構」選單。
  2. 按一下「驗證」>「驗證」開始使用 >登入方式 >電子郵件/密碼 >啟用 >節省

58e3e3e23c2f16a4.png

啟用 Firestore

網頁應用程式會使用 Firestore 儲存即時通訊訊息,以及接收新的即時通訊訊息。

啟用 Firestore:

  • 在「建構作業」「建構」選單中,按一下 Firestore 資料庫>建立資料庫。

99e8429832d23fa3.png

  1. 選取「以測試模式啟動」,然後詳閱安全性規則免責事項。測試模式可確保您在開發期間能自由寫入資料庫。

6be00e26c72ea032.png

  1. 按一下「Next」,然後選取資料庫位置。您可以使用預設值。地點一經設定即無法變更。

278656eefcfb0216.png

  1. 按一下「啟用」

4. 設定 Firebase

如要將 Firebase 與 Flutter 搭配使用,必須先完成下列工作來設定 Flutter 專案,才能正確使用 FlutterFire 程式庫:

  1. FlutterFire 依附元件新增至專案。
  2. 在 Firebase 專案中註冊所需的平台。
  3. 下載平台專用的設定檔,然後新增至程式碼。

在 Flutter 應用程式的頂層目錄中,有 androidiosmacosweb 子目錄,分別保存了 iOS 和 Android 平台專用的設定檔。

設定依附元件

您必須針對在此應用程式中使用的兩項 Firebase 產品,新增 FlutterFire 程式庫:驗證和 Firestore。

  • 從指令列新增下列依附元件:
$ flutter pub add firebase_core

firebase_core 套件是所有 Firebase Flutter 外掛程式所需的通用程式碼。

$ flutter pub add firebase_auth

firebase_auth 套件可整合驗證功能。

$ flutter pub add cloud_firestore

cloud_firestore 套件可讓您存取 Firestore 資料儲存空間。

$ flutter pub add provider

firebase_ui_auth 套件提供一組小工具和公用程式,透過驗證流程加快開發人員速度。

$ flutter pub add firebase_ui_auth

您已新增必要套件,但還需要設定 iOS、Android、macOS 和 Web Runner 專案,才能妥善使用 Firebase。您也可以使用 provider 套件,將商業邏輯與顯示邏輯區隔開來。

安裝 FlutterFire CLI

FlutterFire CLI 仰賴基礎 Firebase CLI。

  1. 在電腦上安裝 Firebase CLI (如果您尚未安裝的話)。
  2. 安裝 FlutterFire CLI:
$ dart pub global activate flutterfire_cli

安裝完成後,flutterfire 指令就能全域使用。

設定應用程式

CLI 會從 Firebase 專案和所選專案應用程式擷取資訊,產生特定平台的所有設定。

在應用程式的根目錄中執行 configure 指令:

$ flutterfire configure

設定指令會引導您完成下列程序:

  1. 根據 .firebaserc 檔案或 Firebase 控制台選取 Firebase 專案。
  2. 決定設定的平台,例如 Android、iOS、macOS 和網頁。
  3. 找出要擷取設定的 Firebase 應用程式。根據預設,CLI 會嘗試依據目前的專案設定,自動比對 Firebase 應用程式。
  4. 在專案中產生 firebase_options.dart 檔案。

設定 macOS

macOS 上的 Flutter 能建構完全採用沙箱機制的應用程式。這個應用程式已整合網路,因此無法與 Firebase 伺服器進行通訊,因此您必須透過網路用戶端權限設定應用程式。

macos/Runner/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

macos/Runner/Release.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

詳情請參閱 Flutter 的電腦支援

5. 新增 RSVP (敬請回覆) 功能

現在您將 Firebase 新增至應用程式,可以建立「回覆」按鈕,透過「驗證」來註冊使用者。如果是 Android 原生、iOS 原生和網頁,系統會顯示預先建構的 FirebaseUI Auth 套件,但您必須為 Flutter 建構這項功能。

您先前擷取的專案包含一組小工具,用來實作大部分驗證流程的使用者介面。實作商業邏輯,將驗證功能與應用程式整合。

使用 Provider 套件新增商業邏輯

使用 provider 套件,在整個 Flutter 小工具的應用程式樹狀結構中提供集中式應用程式狀態物件:

  1. 建立名為 app_state.dart 的新檔案,並在其中加入下列內容:

lib/app_state.dart

import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
      } else {
        _loggedIn = false;
      }
      notifyListeners();
    });
  }
}

import 陳述式會引入 Firebase Core 和 Auth,並提取 provider 套件,讓整個小工具樹狀結構可以使用應用程式狀態物件,並納入 firebase_ui_auth 套件中的驗證小工具。

ApplicationState 應用程式狀態物件是這個步驟的主要職責,是要通知小工具樹狀結構有更新到已驗證的狀態。

您只能使用提供者將使用者的登入狀態傳送給應用程式。如要讓使用者登入,您可以使用 firebase_ui_auth 套件提供的 UI,這是在應用程式中快速啟動登入畫面的絕佳方式。

整合驗證流程

  1. 修改 lib/main.dart 檔案的頂端匯入內容:

lib/main.dart

import 'package:firebase_ui_auth/firebase_ui_auth.dart'; // new
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';               // new
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';                 // new

import 'app_state.dart';                                 // new
import 'home_page.dart';
  1. 連結應用程式狀態與應用程式初始化,然後將驗證流程新增至 HomePage

lib/main.dart

void main() {
  // Modify from here...
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider(
    create: (context) => ApplicationState(),
    builder: ((context, child) => const App()),
  ));
  // ...to here.
}

修改 main() 函式會使提供者套件,該套件負責使用 ChangeNotifierProvider 小工具建立應用程式狀態物件例項。請使用這個特定的 provider 類別,因為應用程式狀態物件會擴充 ChangeNotifier 類別,讓 provider 套件知道何時要重新顯示相依小工具。

  1. 您可以建立 GoRouter 設定,更新應用程式,處理 FirebaseUI 為您所提供不同畫面的導覽:

lib/main.dart

// Add GoRouter configuration outside the App class
final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'sign-in',
          builder: (context, state) {
            return SignInScreen(
              actions: [
                ForgotPasswordAction(((context, email) {
                  final uri = Uri(
                    path: '/sign-in/forgot-password',
                    queryParameters: <String, String?>{
                      'email': email,
                    },
                  );
                  context.push(uri.toString());
                })),
                AuthStateChangeAction(((context, state) {
                  final user = switch (state) {
                    SignedIn state => state.user,
                    UserCreated state => state.credential.user,
                    _ => null
                  };
                  if (user == null) {
                    return;
                  }
                  if (state is UserCreated) {
                    user.updateDisplayName(user.email!.split('@')[0]);
                  }
                  if (!user.emailVerified) {
                    user.sendEmailVerification();
                    const snackBar = SnackBar(
                        content: Text(
                            'Please check your email to verify your email address'));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  }
                  context.pushReplacement('/');
                })),
              ],
            );
          },
          routes: [
            GoRoute(
              path: 'forgot-password',
              builder: (context, state) {
                final arguments = state.uri.queryParameters;
                return ForgotPasswordScreen(
                  email: arguments['email'],
                  headerMaxExtent: 200,
                );
              },
            ),
          ],
        ),
        GoRoute(
          path: 'profile',
          builder: (context, state) {
            return ProfileScreen(
              providers: const [],
              actions: [
                SignedOutAction((context) {
                  context.pushReplacement('/');
                }),
              ],
            );
          },
        ),
      ],
    ),
  ],
);
// end of GoRouter configuration

// Change MaterialApp to MaterialApp.router and add the routerConfig
class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Firebase Meetup',
      theme: ThemeData(
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              highlightColor: Colors.deepPurple,
            ),
        primarySwatch: Colors.deepPurple,
        textTheme: GoogleFonts.robotoTextTheme(
          Theme.of(context).textTheme,
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        useMaterial3: true,
      ),
      routerConfig: _router, // new
    );
  }
}

根據驗證流程的新狀態,每個畫面都有不同的動作類型。在驗證作業中的大部分狀態變更後,你可以將重新轉送回偏好的畫面,無論是主畫面還是其他畫面,例如個人資料畫面。

  1. HomePage 類別的建構方法中,將應用程式狀態與 AuthFunc 小工具整合:

lib/home_page.dart

import 'package:firebase_auth/firebase_auth.dart' // new
    hide EmailAuthProvider, PhoneAuthProvider;    // new
import 'package:flutter/material.dart';           // new
import 'package:provider/provider.dart';          // new

import 'app_state.dart';                          // new
import 'src/authentication.dart';                 // new
import 'src/widgets.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          // Add from here
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
          // to here
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
        ],
      ),
    );
  }
}

AuthFunc 小工具執行個體化,並將其納入 Consumer 小工具。應用程式狀態變更時,您可使用 provider 套件透過取用端小工具重新建構樹狀結構的一部分。AuthFunc 小工具是您測試的補充小工具。

測試驗證流程

cdf2d25e436bd48d.png

  1. 在應用程式中輕觸「回覆」按鈕,即可啟動 SignInScreen

2a2cd6d69d172369.png

  1. 輸入電子郵件地址。如果您已經註冊,系統會提示您輸入密碼。否則,系統將提示您填寫註冊表單。

e5e65065dba36b54.png

  1. 請輸入長度不超過六個字元的密碼,檢查錯誤處理流程。如果您已註冊,就會看到該密碼。
  2. 輸入錯誤密碼,檢查錯誤處理流程。
  3. 輸入正確的密碼。畫面上會顯示登入體驗,其中可讓使用者登出帳戶。

4ed811a25b0cf816.png

6. 將訊息寫入 Firestore

雖然知道使用者會來得開心,不過您需要在應用程式中提供其他操作給訪客。他們可以在留言板中留下訊息該怎麼辦?他們可以分享自己樂於助人的原因,或想認識哪些人。

如要儲存使用者在應用程式中撰寫的即時通訊訊息,請使用 Firestore

資料模型

Firestore 是 NoSQL 資料庫,儲存在資料庫中的資料會分為集合、文件、欄位和子集合。您可以將每則即時通訊訊息儲存為文件,並存放在頂層集合中。guestbook

7c20dc8424bb1d84.png

將訊息新增至 Firestore

在本節中,您將新增讓使用者將郵件寫入資料庫的功能。首先,請新增表單欄位並傳送按鈕,然後新增用來將這些元素與資料庫連結的程式碼。

  1. 建立名為 guest_book.dart 的新檔案,新增 GuestBook 有狀態小工具,以建構訊息欄位的 UI 元素和傳送按鈕:

lib/guest_book.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'src/widgets.dart';

class GuestBook extends StatefulWidget {
  const GuestBook({required this.addMessage, super.key});

  final FutureOr<void> Function(String message) addMessage;

  @override
  State<GuestBook> createState() => _GuestBookState();
}

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Form(
        key: _formKey,
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'Leave a message',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Enter your message to continue';
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(width: 8),
            StyledButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  await widget.addMessage(_controller.text);
                  _controller.clear();
                }
              },
              child: Row(
                children: const [
                  Icon(Icons.send),
                  SizedBox(width: 4),
                  Text('SEND'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

這裡有幾個搜尋點。首先,請將表單例項化,讓您驗證訊息是否確實含有內容,並在使用者沒有內容時顯示錯誤訊息。如要驗證表單,您可以使用 GlobalKey 存取表單背後的表單狀態。如要進一步瞭解金鑰及使用方法,請參閱金鑰的使用時機

另請注意,小工具的版面配置方式,您會擁有包含 TextFormFieldStyledButton,且包含 RowRow。另請注意,TextFormField 已納入在 Expanded 小工具中,這會強制 TextFormField 填入資料列中的任何額外空間。如要進一步瞭解這項限制的原因,請參閱瞭解限制一文。

現在您已擁有小工具,可讓使用者輸入文字來新增到訪客留言板,因此您需要在螢幕上取得小工具。

  1. 編輯 HomePage 的主體,在 ListView 的子項結尾加入下列兩行:
const Header("What we'll be doing"),
const Paragraph(
  'Join us for a day full of Firebase Workshops and Pizza!',
),
// Add the following two lines.
const Header('Discussion'),
GuestBook(addMessage: (message) => print(message)),

雖然這足以顯示小工具,但功能不足以執行任何實用操作。稍後您將更新此程式碼,讓程式碼可以正常運作。

應用程式預覽

具備即時通訊整合功能的 Android 應用程式主畫面

具備即時通訊整合功能的 iOS 應用程式主畫面

具備即時通訊整合功能的應用程式主畫面

macOS 中具有即時通訊整合功能的應用程式主畫面

使用者按一下「傳送」時,就會觸發下列程式碼片段。這會將訊息輸入欄位的內容新增至資料庫的 guestbook 集合。具體來說,addMessageToGuestBook 方法會將訊息內容新增至 guestbook 集合中含有自動產生的 ID 的新文件。

請注意,FirebaseAuth.instance.currentUser.uid 是系統自動產生的專屬 ID 的參照,驗證功能提供給所有已登入的使用者。

  • lib/app_state.dart 檔案中,新增 addMessageToGuestBook 方法。您將在下一個步驟中將這個功能與使用者介面建立連結。

lib/app_state.dart

import 'package:cloud_firestore/cloud_firestore.dart'; // new
import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

class ApplicationState extends ChangeNotifier {

  // Current content of ApplicationState elided ...

  // Add from here...
  Future<DocumentReference> addMessageToGuestBook(String message) {
    if (!_loggedIn) {
      throw Exception('Must be logged in');
    }

    return FirebaseFirestore.instance
        .collection('guestbook')
        .add(<String, dynamic>{
      'text': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'name': FirebaseAuth.instance.currentUser!.displayName,
      'userId': FirebaseAuth.instance.currentUser!.uid,
    });
  }
  // ...to here.
}

連結 UI 和資料庫

您有一個使用者介面,使用者可以在其中輸入要新增到留言板的文字,而且您也有將項目新增至 Firestore 的程式碼。只要將兩者連結起來即可。

  • lib/home_page.dart 檔案中,對 HomePage 小工具進行下列變更:

lib/home_page.dart

import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'app_state.dart';
import 'guest_book.dart';                         // new
import 'src/authentication.dart';
import 'src/widgets.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
          // Modify from here...
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (appState.loggedIn) ...[
                  const Header('Discussion'),
                  GuestBook(
                    addMessage: (message) =>
                        appState.addMessageToGuestBook(message),
                  ),
                ],
              ],
            ),
          ),
          // ...to here.
        ],
      ),
    );
  }
}

您以完整實作取代了在這個步驟一開始新增的兩行。您再次使用 Consumer<ApplicationState>,將應用程式狀態提供給所算繪的樹狀結構部分。如此一來,您就可以在使用者介面中輸入訊息,並將訊息發布到資料庫中。在下一節中,您將測試新增的訊息是否已發布於資料庫中。

測試訊息傳送功能

  1. 如有需要,請登入應用程式。
  2. 輸入訊息 (例如 Hey there!),然後按一下「傳送」

這項操作會將訊息寫入 Firestore 資料庫。不過,實際的 Flutter 應用程式不會顯示訊息,因為您仍然需要在下一個步驟中實作擷取資料。不過,您可以前往 Firebase 控制台的「資料庫資訊主頁」,在「guestbook」集合中查看新增的訊息。如果您傳送更多郵件,就會將更多文件加入「guestbook」集合。例如,請參閱下列程式碼片段:

713870af0b3b63c.png

7. 讀取訊息

訪客可以撰寫訊息到資料庫,但目前還無法在應用程式中查看。該解決這個問題了!

同步處理郵件

如要顯示訊息,您需要新增可在資料變更時觸發的事件監聽器,然後建立顯示新訊息的 UI 元素。請將程式碼新增至應用程式狀態,監聽應用程式新增的訊息。

  1. 建立新檔案 guest_book_message.dart,新增下列類別以公開儲存在 Firestore 中的資料的結構化檢視畫面。

lib/guest_book_message.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});

  final String name;
  final String message;
}
  1. lib/app_state.dart 檔案中,新增以下匯入項目:

lib/app_state.dart

import 'dart:async';                                     // new

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart'
    hide EmailAuthProvider, PhoneAuthProvider;
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';
import 'guest_book_message.dart';                        // new
  1. 在您定義狀態和 getter 的 ApplicationState 區段中,新增以下行:

lib/app_state.dart

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  // Add from here...
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // ...to here.
  1. ApplicationState 的初始化部分新增以下幾行內容,即可在使用者登入時訂閱文件集合的查詢,並在使用者登出時取消訂閱:

lib/app_state.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);
    
    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
      } else {
        _loggedIn = false;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
      }
      notifyListeners();
    });
  }

這個部分非常重要,因為您可以在 guestbook 集合上建構查詢,並處理訂閱和取消訂閱集合。您會聆聽串流,在 guestbook 集合中重新建構訊息的本機快取,以及儲存此訂閱項目的參照,以便之後取消訂閱。這裡有許多工作,建議你在偵錯工具中探索,以便檢查難度,以取得更明確的心理模型。詳情請參閱透過 Firestore 取得即時更新資訊

  1. lib/guest_book.dart 檔案中,新增以下匯入內容:
import 'guest_book_message.dart';
  1. GuestBook 小工具中,新增訊息清單做為設定的一部分,將此變更狀態連結至使用者介面:

lib/guest_book.dart

class GuestBook extends StatefulWidget {
  // Modify the following line:
  const GuestBook({
    super.key, 
    required this.addMessage, 
    required this.messages,
  });

  final FutureOr<void> Function(String message) addMessage;
  final List<GuestBookMessage> messages; // new

  @override
  _GuestBookState createState() => _GuestBookState();
}
  1. _GuestBookState 中,修改 build 方法以公開這項設定:

lib/guest_book.dart

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  // Modify from here...
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // ...to here.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Leave a message',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Enter your message to continue';
                      }
                      return null;
                    },
                  ),
                ),
                const SizedBox(width: 8),
                StyledButton(
                  onPressed: () async {
                    if (_formKey.currentState!.validate()) {
                      await widget.addMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                  child: Row(
                    children: const [
                      Icon(Icons.send),
                      SizedBox(width: 4),
                      Text('SEND'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        // Modify from here...
        const SizedBox(height: 8),
        for (var message in widget.messages)
          Paragraph('${message.name}: ${message.message}'),
        const SizedBox(height: 8),
      ],
      // ...to here.
    );
  }
}

您要使用 Column 小工具納入 build() 方法的先前內容,然後新增適用於 Column 子項尾端的集合,為訊息清單中的每則訊息產生新的 Paragraph

  1. 更新 HomePage 的主體,以便使用新的 messages 參數正確建構 GuestBook

lib/home_page.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (appState.loggedIn) ...[
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages, // new
        ),
      ],
    ],
  ),
),

測試訊息同步處理作業

Firestore 會自動與訂閱資料庫的用戶端同步處理資料。

測試訊息同步處理作業:

  1. 在應用程式中,找出您先前在資料庫中建立的訊息。
  2. 撰寫新訊息。圖片會立即顯示。
  3. 在多個視窗或分頁中開啟工作區。這些郵件會即時同步處理各個視窗和分頁。
  4. 選用:在 Firebase 控制台的「資料庫」選單中,手動刪除、修改或新增訊息。所有變更都會顯示在使用者介面中。

恭喜!您已讀取應用程式中的 Firestore 文件!

應用程式預覽

具備即時通訊整合功能的 Android 應用程式主畫面

具備即時通訊整合功能的 iOS 應用程式主畫面

具備即時通訊整合功能的應用程式主畫面

macOS 中具有即時通訊整合功能的應用程式主畫面

8. 設定基本安全性規則

您一開始將 Firestore 設為使用測試模式,這代表資料庫已開啟讀取和寫入功能。不過,您只能在開發初期階段使用測試模式。最佳做法是在開發應用程式時為資料庫設定安全性規則。安全性對應用程式的結構和行為至關重要。

有了 Firebase 安全性規則,就能控管資料庫中文件和集合的存取權。規則的語法十分靈活,可讓您建立規則,以比對所有寫入作業、整個資料庫至特定文件的作業。

設定基本安全性規則:

  1. 在 Firebase 控制台的「開發」選單中,依序點選「資料庫」>「資料庫」規則。您應該會看到下列預設安全性規則,以及有關公開規則的警告:

7767a2d2e64e7275.png

  1. 識別應用程式寫入資料的集合:

match /databases/{database}/documents 中,找出要保護的集合:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

由於您在每組留言板文件中使用驗證 UID 做為欄位,因此您可以取得驗證 UID,並驗證所有嘗試寫入該文件的使用者都擁有相符的驗證 UID。

  1. 為您的規則組合新增讀取和寫入規則:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

現在,只有登入使用者可以閱讀訪客留言板中的訊息,但只有訊息的作者可以編輯訊息。

  1. 新增資料驗證,確保文件中所有預期欄位都出現:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

9. 額外步驟:練習所學內容

錄製參與者的回覆狀態

目前,您的應用程式僅允許使用者在有興趣的活動時進行即時通訊。此外,唯有在聊天室中說的話,你才能知道對方是否來電。

在這個步驟中,你可以把工作安排得井井有條,並讓大家知道參加人數。您將幾項功能新增至應用程式狀態。第一項功能可讓已登入的使用者指定是否參加。第二是和參加人數的計數器。

  1. lib/app_state.dart 檔案中,將以下幾行新增至 ApplicationState 的存取子區段,以便 UI 程式碼與此狀態互動:

lib/app_state.dart

int _attendees = 0;
int get attendees => _attendees;

Attending _attending = Attending.unknown;
StreamSubscription<DocumentSnapshot>? _attendingSubscription;
Attending get attending => _attending;
set attending(Attending attending) {
  final userDoc = FirebaseFirestore.instance
      .collection('attendees')
      .doc(FirebaseAuth.instance.currentUser!.uid);
  if (attending == Attending.yes) {
    userDoc.set(<String, dynamic>{'attending': true});
  } else {
    userDoc.set(<String, dynamic>{'attending': false});
  }
}
  1. 請更新 ApplicationStateinit() 方法,如下所示:

lib/app_state.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    // Add from here...
    FirebaseFirestore.instance
        .collection('attendees')
        .where('attending', isEqualTo: true)
        .snapshots()
        .listen((snapshot) {
      _attendees = snapshot.docs.length;
      notifyListeners();
    });
    // ...to here.

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
        _emailVerified = user.emailVerified;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // Add from here...
        _attendingSubscription = FirebaseFirestore.instance
            .collection('attendees')
            .doc(user.uid)
            .snapshots()
            .listen((snapshot) {
          if (snapshot.data() != null) {
            if (snapshot.data()!['attending'] as bool) {
              _attending = Attending.yes;
            } else {
              _attending = Attending.no;
            }
          } else {
            _attending = Attending.unknown;
          }
          notifyListeners();
        });
        // ...to here.
      } else {
        _loggedIn = false;
        _emailVerified = false;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        _attendingSubscription?.cancel(); // new
      }
      notifyListeners();
    });
  }

這段程式碼會新增一個持續訂閱的查詢,以判定參與者人數,以及第二個只在使用者登入期間才會有效的查詢,以判斷使用者是否參加。

  1. lib/app_state.dart 檔案頂端新增以下列舉項目。

lib/app_state.dart

enum Attending { yes, no, unknown }
  1. 建立新的檔案 yes_no_selection.dart,定義類似圓形按鈕的新小工具:

lib/yes_no_selection.dart

import 'package:flutter/material.dart';

import 'app_state.dart';
import 'src/widgets.dart';

class YesNoSelection extends StatelessWidget {
  const YesNoSelection(
      {super.key, required this.state, required this.onSelection});
  final Attending state;
  final void Function(Attending selection) onSelection;

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case Attending.yes:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              FilledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      case Attending.no:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              TextButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              FilledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              StyledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              StyledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
    }
  }
}

且開始時間為不確定狀態,且未選取「是」和「否」。使用者選擇是否參加後,您就會以實心按鈕醒目顯示該選項,另一個選項則會以平面顯示。

  1. 更新 HomePagebuild() 方法以充分運用 YesNoSelection,讓已登入的使用者可以指出是否參加,並顯示活動的參與者人數:

lib/home_page.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Add from here...
      switch (appState.attendees) {
        1 => const Paragraph('1 person going'),
        >= 2 => Paragraph('${appState.attendees} people going'),
        _ => const Paragraph('No one going'),
      },
      // ...to here.
      if (appState.loggedIn) ...[
        // Add from here...
        YesNoSelection(
          state: appState.attending,
          onSelection: (attending) => appState.attending = attending,
        ),
        // ...to here.
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages,
        ),
      ],
    ],
  ),
),

新增規則

你已設定一些規則,因此使用按鈕新增的資料會遭拒。您需要更新規則,允許新增 attendees 集合。

  1. attendees 集合中,擷取當做文件名稱使用的驗證 UID,並確認提交者的 uid 與他們撰寫的文件相同:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

這可讓所有人查看與會者名單,因為那裡沒有私人資料,但只有建立者可以更新。

  1. 新增資料驗證,確保文件中所有預期欄位都出現:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}
  1. 選用:在應用程式中點選按鈕,即可在 Firebase 控制台的 Firestore 資訊主頁中查看結果。

應用程式預覽

Android 上的應用程式主畫面

iOS 裝置的主畫面

網頁應用程式的主畫面

macOS 上的應用程式主畫面

10. 恭喜!

你已使用 Firebase 打造互動式的即時網頁應用程式!

瞭解詳情