GDG Taichung: What is new in Firebase

WHAT IS NEW IN
FIREBASE
GDG-Taichung
Duran Hsieh

2
Presented By: Duran Hsieh
ABOUT ME
• Duran Hsieh
• Microsoft Customer Engineer (App Dev)
• Google Developer
Group Taichung Co-Organizer
• .NET User Group Taichung
Study4TW
• 2016-2018 Microsoft MVP
(VSDT)

3
ABOUT ME
• Skill
• Performance tuning & Load/Performance Test
• Web application development
• Azure app development
• Android & Firebase
• Jenkins/TeamCity/GitHub/Azure DevOps

4
ABOUT ME
• Certification
• MCSA: Web Applications
• MCSD: Web Applications
• MCSD: App Builder
• Oracle Certified Professional, Java SE 6 Programmer
• MS: Programming in HTML5 with JavaScript and CSS3
• Oracle Database SQL Certified Expert
• Oracle Database 10g Administrator Certified Associate
• Oracle Database 10g Administrator Certified
• (Course completion confirmation) M102: MongoDB for DBAs
• (Course completion confirmation) M101N: MongoDB for .NET
Developers
• Microsoft Certified: Azure Fundamentals
• Microsoft Certified: Azure Developer Associate

5
ABOUT ME
• Award
• 2011資訊教育與科技應用研討會專題競賽佳作(Excellent Work)
• 2010 Open Source and Creative Application Contest (Silver Medal
Award)
• 2012跨領域創意網路通訊應用與服務競賽 (特優)
• IBM Taiwan 2011 z Master Contest (Excellent Performance in Part II)
• The 2012 Network Communication software and Creative Application
Contest Award (First Prize)
• 2014第7屆IT邦幫忙鐵人賽入圍佳作(Excellent Work)
• 2015 Microsoft Community Challenge (Second Prize)
• 2017第8屆IT邦幫忙鐵人賽佳作(Excellent Work)
• 2018第9屆IT邦幫忙鐵人賽佳作(Excellent Work)
• 2018 智在家鄉聯發科技數位社會創新競賽首獎 (First Prize)

6
ABOUT ME
• Other
• Blog : http://dog0416.blogspot.com/
• GitHub : https://github.com/matsurigoto/
• Bitbucket : https://bitbucket.org/matsurigoto/
• DockerHub : https://hub.docker.com/u/matsurigoto/

AGENDA
• What is Firebase
• Firebase Extension
• Firebase Hosting Next.js +
angular SSR
• App Check
• App Distribution
• Firebase Performance
Monitoring
• Crashlytics integrations
with Andorid

9
WHAT IS FIREBASE
• Firebase
• 行動與網路應用程式開發者平台 (backend as a service)
• 讓開發人員專注於終端開發與 UX
• 提供各式後端服務以強化前端應用程式
• Firebase Firestore
• Firebase Authentication
• Firebase Function
• …
• 提供效能、測試實驗室、錯誤報告等穩定性服務
• 整合 Google Analytics、Admob…等既有服務

11
FIREBASE EXTENSION
• 預先包裝好的解決方案，將您所需要的功能部署至應用程式
• 減少開發與維護應用程式時間
• 具有可配置特性(可重用)
• 與 Firebase 平台整合
• 安全性 (受限訪問)
• 無須維護

12
FIREBASE EXTENSION (BETA)
• 運作方式
• 使用Cloud Functions for Firebase編寫的
• 提供事件提供程序與觸發執行條件
• Extension 依賴於 extension.yaml，明確定義
• 使用的 Google API
• 需要訪問角色
• 列出所 Extension 需要資源
• Extension 可配置參數
• 安裝 Extension 執行下列操作
• 提示執行此 Extension 所需要的參數
• 啟用需要的 API
• 建立新的服務帳戶並給予執行權限
• 提供 Extension 所需要資源 (如: 函數)

13
• 如何使用 Firebase Extension (1/2)
• 在 Firebase Extension 產品頁面探索

14
• 如何使用 Firebase Extension (2/2)
• 評估、安裝與設定 Extension
• 使用 Extension emulator 評估
• 使用 Firebase console 或 Firebase CLI 安裝 Extension
• 管理 Extension
• 使用 Firebase console 或 Firebase CLI 安裝 Extension

15
FIREBASE EXTENSION
• Demo: Trigger mail
• 設定教學

16
FIREBASE EXTENSION NEW FEATURES
• Extension events
• 允許插入 Extension 時，使用自己的程式碼擴充功能
• 整合時自訂使用案例與業務工作流程
• Run Payments with Stripe
• 訂閱計費
• 在客戶取消付款時觸發折扣優惠
• 參考資料

17
• Extensions
• Marketing、Search 與 Payment processing
• Snap – 讓使用者登入並在故事中宣傳產品
• Stream – 在應用程式中實作聊天並實時回覆客戶
• RevenueCat – 管理應用程式內訂閱
• Typesense – 開放原始碼，在Cloud Firestore 中實
作索引和搜索

18
• Extensions 可以在 Emulator Suite 內使用
• 在安全的本地環境進行測試
• 更細部的了解功能
• 更容易進行調整

FIREBASE HOSTING
NEXT.JS +
ANGULAR SSR

20
FIREBASE HOSTING : NEXT.JS + ANGULAR SSR
• 單一指令進行佈署
• Firebase deploy
• 專注在 UI/UX，簡化建構後端服務
• Developer preview of Next.js and Angular
• 開箱即用 (out-of-the-box) 安全性功能
• CDN 所有功能
• SSL
• 未來持續有更多框架可以使用

21
• npm - firebase-tools
• 佈署程式碼到您的 Firebase projects
• 為您的 Firebase Hosting site 執行 local web server
• 與 Firebase 資料庫庫中的資料互動
• 匯入/匯出 users 到 Firebase Auth
• 安裝方式
• npm
• npm install –g firebase-tools (推薦)
• Standalone Binary (連結)

22
• Demo
• Next.js
• 會後提供完整範例

24
FLUTTER PLUGINS
• Firebase Crashlytics
• Updated for Flutter
• 透過 Crashlytics 快速通知並解決問題
• 安裝
• flutter pub add firebase_crashlytics
• flutterfire configure
• flutter run
• 設定程序

25
FLUTTER PLUGINS
• Firebase Crashlytics 更新內容
• 開始所需的步驟，不再需要您打開任何特定於平台的 IDE
• 需要做的就是添加 Crashlytics 插件並在您的 Dart 代碼中初始化它
• 可以在 Flutter 應用程序中按需記錄致命錯誤，並在出現嚴重問題時
從 Crashlytics 接收警報
• 我們改進了我們的後端崩潰分析器，通過常見的底層特徵更直觀地
對 Flutter 崩潰進行分組。

26
環境準備 - FIREBASE + FLUTTER 說明
• 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

27
FLUTTER PLUGINS - FIREBASE + FLUTTER 說明
• 設定 Flutter 專案與 Firebase 連結
• 加入所需要的 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

28
FLUTTER PLUGINS
• Flutter 加入 Firebase Crashlytics
• Flutter 專案中加入 Crashlytics Flutter 套件
• flutter pub add firebase_crashlytics
• Apply 設定
• 重新建置
• Flutter run

29
FLUTTER PLUGINS
• Flutter 程式碼內使用 Firebase Crashlytics
• 使用 FirebaseCrashlytics.instance.recordFlutterFatalError 自動取
得 Flutter 框架內引發的所有錯誤

30
FLUTTER PLUGINS
• Demo

32
APP CHECK
• Beta 升級至正式版本
• Play Integrity API 整合
• 最新、最先進的 Android 設備應用證明提供程序，具有更
多反濫用信號
• 更多資訊
• 檢視文件

34
APP DISTRIBUTION
• 將應用程式預先發佈指派給受信任的測試人員，以便您在正
式發布前獲得重要地回饋
• Console 和新的 Public API 中添加了簡化的群組訪問、發布
自動刪除和批次測試人員管理
• 借助我們新的 Android SDK，您現在可以直接在應用程序內
通知測試人員有新版本可用，因此您的測試人員始終保持最
新狀態並就您最關心的版本提供反饋
• 更多資訊
• Android 與 iOS

35
APP DISTRIBUTION
• 應用的 APK 文件拖到 Console 上傳
• 指定要接收構建的測試人員組和個人測試人員 (Email)

36
APP DISTRIBUTION

FIREBASE
PERFORMANCE
MONITORING

38
FIREBASE PERFORMANCE MONITORING
• Real time alert
• 您可以為應用程序最關鍵部分的自定義程式碼追蹤、網路請求、銀
幕渲染和 Web 追蹤設置警報 - 並將它們自定義為您自己的門檻值
• 請參考文件

CRASHLYTICS
INTEGRATIONS
WITH ANDORID

40
CRASHLYTICS INTEGRATIONS WITH ANDORID
• Crashlytics integrations with Andorid

41
CRASHLYTICS INTEGRATIONS WITH ANDORID
• Android Studio
• App Quality Insight Windows
• Electric Eel (2022.1.1) Canary 8 (preview)

GDG Taichung: What is new in Firebase

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie GDG Taichung: What is new in Firebase

Ähnlich wie GDG Taichung: What is new in Firebase (20)

Mehr von Duran Hsieh

Mehr von Duran Hsieh (20)

GDG Taichung: What is new in Firebase