iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

Flutter - 複製貼上到開發套件之旅系列 第 14

【第十四天 - Flutter 官方 CodeLab Get-To-Know 活動報名教學(上)】

前言

今日的程式碼 => GITHUB
我很喜歡這篇 CodeLab,我自己認為,如果這篇的內容看得懂那 Provider 基本上都會了。

如果想要看這篇的成品什麼樣子,歡迎去 官方 CodeLab 看。

連接 Firebase

這邊裡面有 IOSAndroidWeb,下面會補充。
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)
  }
}
  1. 設定 Target,可以看這個 ISSUE
  2. 開啟網路設定
    Info.plist
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>
  1. 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

今天就先講到這邊,明天談談裡面的邏輯和其他的應用。
那我們鐵人賽 Day 15 見囉!!


上一篇
【第十三天 - Flutter Sqflite+Provider】
下一篇
【第十五天 - Flutter 官方 CodeLab Get-To-Know 活動報名教學(下)】
系列文
Flutter - 複製貼上到開發套件之旅30

尚未有邦友留言

立即登入留言