本頁面由 Cloud Translation API 翻譯而成。

認識 Firebase for Flutter

1. 事前準備

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

事前準備

課程內容

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

事前準備

下列任一裝置：

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

此外，您還需要下列資源：

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

2. 取得程式碼範例

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

在指令列中，複製 flutter-codelabs 目錄中的 GitHub 存放區：

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

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

找出第二個步驟的相符檔案：

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 檔案中的輔助小工具，格式為 Header、Paragraph 和 IconAndDetail。這些小工具會排除重複的程式碼，減少 HomePage 所描述網頁版面配置的雜亂。還能維持一致的外觀和風格。

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

3. 建立及設定 Firebase 專案

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

建立 Firebase 專案

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

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

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

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

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

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

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

啟用 Firestore

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

啟用 Firestore：

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

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

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

按一下「啟用」。

4. 設定 Firebase

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

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

在 Flutter 應用程式的頂層目錄中，有 android、ios、macos 和 web 子目錄，分別保存了 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。

在電腦上安裝 Firebase CLI (如果您尚未安裝的話)。
安裝 FlutterFire CLI：

$ dart pub global activate flutterfire_cli

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

設定應用程式

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

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

$ flutterfire configure

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

根據 .firebaserc 檔案或 Firebase 控制台選取 Firebase 專案。
決定設定的平台，例如 Android、iOS、macOS 和網頁。
找出要擷取設定的 Firebase 應用程式。根據預設，CLI 會嘗試依據目前的專案設定，自動比對 Firebase 應用程式。
在專案中產生 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 小工具的應用程式樹狀結構中提供集中式應用程式狀態物件：

建立名為 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，這是在應用程式中快速啟動登入畫面的絕佳方式。

整合驗證流程

修改 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';

連結應用程式狀態與應用程式初始化，然後將驗證流程新增至 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 套件知道何時要重新顯示相依小工具。

您可以建立 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
    );
  }
}

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

在 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 小工具是您測試的補充小工具。

測試驗證流程

在應用程式中輕觸「回覆」按鈕，即可啟動 SignInScreen。

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

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

6. 將訊息寫入 Firestore

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

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

資料模型

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

將訊息新增至 Firestore

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

建立名為 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 存取表單背後的表單狀態。如要進一步瞭解金鑰及使用方法，請參閱金鑰的使用時機。

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

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

編輯 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)),

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

應用程式預覽

使用者按一下「傳送」時，就會觸發下列程式碼片段。這會將訊息輸入欄位的內容新增至資料庫的 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>，將應用程式狀態提供給所算繪的樹狀結構部分。如此一來，您就可以在使用者介面中輸入訊息，並將訊息發布到資料庫中。在下一節中，您將測試新增的訊息是否已發布於資料庫中。

測試訊息傳送功能

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

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

7. 讀取訊息

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

同步處理郵件

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

建立新檔案 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;
}

在 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

在您定義狀態和 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.

在 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 取得即時更新資訊。

在 lib/guest_book.dart 檔案中，新增以下匯入內容：

import 'guest_book_message.dart';

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

在 _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。

更新 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 會自動與訂閱資料庫的用戶端同步處理資料。

測試訊息同步處理作業：

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

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

應用程式預覽

8. 設定基本安全性規則

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

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

設定基本安全性規則：

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

識別應用程式寫入資料的集合：

在 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。

為您的規則組合新增讀取和寫入規則：

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;
    }
  }
}

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

新增資料驗證，確保文件中所有預期欄位都出現：

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. 額外步驟：練習所學內容

錄製參與者的回覆狀態

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

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

在 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});
  }
}

請更新 ApplicationState 的 init() 方法，如下所示：

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

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

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

lib/app_state.dart

enum Attending { yes, no, unknown }

建立新的檔案 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'),
              ),
            ],
          ),
        );
    }
  }
}

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

更新 HomePage 的 build() 方法以充分運用 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 集合。

在 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;
    }
  }
}

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

新增資料驗證，確保文件中所有預期欄位都出現：

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;

    }
  }
}

選用：在應用程式中點選按鈕，即可在 Firebase 控制台的 Firestore 資訊主頁中查看結果。

應用程式預覽

10. 恭喜！

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

認識 Firebase for Flutter

1. 事前準備

事前準備

課程內容

事前準備

2. 取得程式碼範例

匯入範例應用程式

找出需要處理的檔案

查看 lib/main.dart 檔案

3. 建立及設定 Firebase 專案

建立 Firebase 專案

啟用電子郵件登入驗證

啟用 Firestore

4. 設定 Firebase

設定依附元件

安裝 FlutterFire CLI

設定應用程式

設定 macOS

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

使用 Provider 套件新增商業邏輯

整合驗證流程

測試驗證流程

6. 將訊息寫入 Firestore

資料模型

將訊息新增至 Firestore

應用程式預覽

連結 UI 和資料庫

測試訊息傳送功能

7. 讀取訊息

同步處理郵件

測試訊息同步處理作業

應用程式預覽

8. 設定基本安全性規則

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

錄製參與者的回覆狀態

新增規則

應用程式預覽

10. 恭喜！

瞭解詳情

查看 `lib/main.dart` 檔案

使用 `Provider` 套件新增商業邏輯