前言

今日的程序码 => GITHUB
我很喜欢这篇 CodeLab，我自己认为，如果这篇的内容看得懂那 Provider 基本上都会了。

如果想要看这篇的成品什麽样子，欢迎去 官方 CodeLab 看。

连接 Firebase

这边里面有 IOS、Android、Web，下面会补充。
https://firebase.google.com/codelabs/firebase-get-to-know-flutter#3

IOS 设定

1. 设定 Firebase 的 GoogleService-Info.plist 到 ./ios/Runner
2. 在 ./ios/Podfile (这个看你需求，我自己是没有加。)
   里面加上，注意 platfrom 的版本不可以太低(我自己是设定为 10.0)。

pod 'Firebase/Analytics'

cd ios/
pod install

4.在 ./ios/Runner/AppDelegate.swift 加上这两行(这个要加)

import UIKit
import Flutter
import Firebase   // 加上这行

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    FirebaseApp.configure()  // 加上这行
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

5. 设定 Target，可以看这个 ISSUE
6. 开启网路设定
   Info.plist

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

7. Firebase authentication 开启 eamil 登入的选项

Android 设定

1. 将 google-services 放到 android/app/ 底下
2. 後面依照官方设定，Kotlin 的就是找 Kotlin 的方案。

Web 设定

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>

  <script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {

  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

FireStore 安全设定

参考来源 (FireStore 安全设定)[https://firebase.google.com/codelabs/firebase-get-to-know-flutter#7]

.gitignore 设定

记得不要把这两个档案上传到 GitLab or GitHub

# Google Services (e.g. APIs or Firebase)
google-services.json
GoogleService-Info.plist

专案会用到的重要元件

• Authentication 这个是 Firebase 中间的区块，用来注册登入、登出的元件。
• ApplicationProvider 用来处理 Authentication 元件里面的逻辑。
• YesNoSelection 是否参加活动的区块
• GuestBook 留言区

ApplicationProvider

方法用途

• set attending
  • 更新 firebase user 的参加状态
  • 这边更新後会触发 firebase 的 userChanges().listen，然後信行 attending 的更新
• init
  • 监听使用者耕该的资讯
  • 监听 attending 参加人数的资料
  • 监听 guestbook 参加人数的资料
• addMessageToGuestBook
  • 更新 firebase message 的留言状态。
  • 这边更新後会触发 firebase 的 userChanges().listen，然後信行 attending 的更新
• startLoginFlow
  • 更新 变成登入输入 email 的画面
• verifyEmail
  • 取得现在 email 的资料是什麽
  • 验证 eamil 是否符合格式
• signInWithEmailAndPassword
  • 有 Email 和 Password
• cancelRegistration
  • 取消注册
• registerAccount
  • 注册帐号，会有 email 和 password 和姓名
• signOut
  • 登出

References

• Get to know Firebase for Flutter
• Flutter Codelab

今天就先讲到这边，明天谈谈里面的逻辑和其他的应用。
那我们铁人赛 Day 15 见罗!!