前言

今日的程式碼 => 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 見囉!!