GDG Taichung - Flutter and Firebase.pdf

FIREBASE & FLUTTER
GDG-Taichung
Duran Hsieh

3
Presented By: Duran Hsieh
WHAT IS FIREBASE & FLUTTER
• Firebase
• 行動與網路應用程式開發者平台 (backend as a service)
• 包含身分驗證、訊息傳送、資料庫、代管等多種服務
• 包含效能、測試實驗室、錯誤報告等穩定性服務
• 跨平台 SDK (Android、IOS、Web… etc.)
• 整合
• Google Analytics
• Admob
• …

4
• Flutter
• 開放原始碼的行動應用程式開發套件
• 用於Android、iOS、Windows、macOS、Linux
Desktop、Google Fuchsia 開發
• 使用 dart 語言撰寫
• 使用 put 管理第三方套件 (pubspec.yaml)

5
• Flutter 3
• 主要從 iOS & Android Apps 框架轉型為跨平台解決方案
• 對於 mobile 應用程式開發者而言，Flutter 3 沒有引入任
何需要大量程式碼調整主要新的功能
• mobile 應用程式開發者可以得到免費的效能與生活品質

7
環境準備
• Flutter SDK
• 編輯器與模擬器
• Firebase Tool
• Git (選擇性)

8
環境準備
• Flutter SDK
• 依據作業系統進行安裝
• 下載並解壓縮
• 設定環境變數
• 使用 flutter doctor 確認套件是否齊全
• https://docs.flutter.dev/get-started/install
• Windows 安裝可以參考
• https://dog0416.blogspot.com/2022/05/flutter.html

9
環境準備
• 編輯器
• Android Studio
• IntelliJ
• Visual Studio Code
• 步驟
• 安裝編輯器
• 安裝 Android SDK (Android Studio 較方便)
• 安裝 Plugin
• 使用 flutter doctor 確認
• 編輯器是否可以建立 Flutter 專案

10
環境準備
• Android Studio 安裝 Flutter and Dart plugin
• MacOS
• Preferences > Plugins ()
• 找到 Flutter plugin 與 Dart plugin 進行安裝
• Windows and Linux
• 或 File > Settings > Plugins 找到 Flutter plugin 進行安裝

11
環境準備
• Visual Studio Code 安裝 Flutter and Dart plugin
• View > Command Palette….
• 輸入 install，選擇 Extensions: Install Extensions
• 找到 flutter 並進行安裝

12
環境準備
• 模擬器相關
• Android Studio 透過 Device Manager 設定安裝即可
• Visual Studio Code 需下載 Android SDK
• 指令 Flutter:launch emulator [模擬器名稱]
• 範例 flutter emulators --launch Nexus 6 API 28
• 若出現 sdkmanager " system-images;android-
27;google_apis_playstore;x86 "相關錯誤
• 確認 Android SDK Tools 下載並設定環境變數
• 安裝 Java8 JDK
• 開啟命令列輸入 sdkmanager “system-images;android-
27;google_apis_playstore;x86 ” 下載並安裝套件
• 確認模擬器是否可以開啟

13
環境準備
• Firebase tools & Flutterfire CLI
• 安裝 NodeJS (需要 npm)
• 透過指令安裝 firebase tools
• firebase-tools：npm install -g firebase-tools
• 透過指令安裝 Flutterfire CLI
• dart pub global activate flutterfire_cli
• Windows 安裝步驟可以參考
https://dog0416.blogspot.com/2022/05/firebase-
flutter.html

14
環境準備
• 設定 Flutter 專案與 Firebase 連結
• flutterfire configure
• 加入所需要的 Firebase 套件
• firebase_core 是所有 Firebase Flutter 套件所需的通用代碼。
• 指令:flutter pub add firebase_core
• firebase_auth 支持與 Firebase 的身份驗證功能整合。
• 指令:flutter pub add firebase_auth
• cloud_firestore 允許訪問 Cloud Firestore 資料儲存。
• 指令:flutter pub add cloud_firestore

CODELAB:
CREATING A APP
WITH FLUTTER AND
FIREBASE

16
CODELAB
• 您將在 Android、iOS、Web 和 macOS 上開發
Flutter 應用程式
• 活動邀請功能
• 留言簿聊天
• 透過 Firebase 身份驗證對用戶進行身份驗證
• Cloud Firestore 同步資料
• 連結
• https://firebase.google.com/codelabs/firebase-get-
to-know-flutter

GDG Taichung - Flutter and Firebase.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à GDG Taichung - Flutter and Firebase.pdf

Similaire à GDG Taichung - Flutter and Firebase.pdf (20)

Plus de Duran Hsieh

Plus de Duran Hsieh (20)

GDG Taichung - Flutter and Firebase.pdf