狠狠撸

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

Recommended

More Related Content

More from Duran Hsieh (20)

GDG Taichung - Flutter and Firebase.pdf