Ann Chou Coding
0%

Expo 推播通知（Android） - Firebase 與 Azure 整合（2）

發表於 分類於 ，

以下流程是針對 Android 推播通知設定，請在 windows 電腦上執行！
這次的主題是 Expo 串接 Firebase 和 Azure，Azure 運行流程、編譯 App 和除錯會放在之後的文章。

前置準備

在這篇文章中，你需要事先準備

  • Google 帳號
  • Firebase 帳號
  • Azure 帳號
  • 一個 React Native / Expo 專案（安裝方法參考）
    • 安裝指令 npx create-expo-app@latest
    • 使用 npx expo prebuild 生成 android 資料夾
    • 修改專案 app.json 檔案中的 android package 名稱
  • 安裝 Android Studio

Firebase 設定

1. 建立 Firebase Android 應用程式

在 Firebase 建立一個新專案後，新增 Android 應用程式
Firebase_CreateAndroid

2. 註冊 Android 應用程式

如果在上一篇文章中有設定專案 app.json 的 android package 辨識名稱，請在這裡填入，Firebase 會以這個名稱為辨識
FirebaseCreateAndroid

3. 加入 google-services 設定檔

下載畫面中提供的 google-services.json 檔案，放入 android/app 資料夾中
FirebaseCreateAndroid-2

4. 設定 Firebase SDK

這是我覺得整個設定中最難的步驟…沒有原生知識真的搞不清楚狀況，完全按照 Firebase 貼也可能在 Sync 報錯，翻了好多網友留言才試出來… 🥲。
將畫面提供的程式碼貼入專案內,請注意你是 gradle 或 gradle.tks，本範例使用 gradle，所以切換至 Groovy 版本程式碼。總共有兩個 build.gradle 檔案，請特別留意檔案路徑！
以下程式碼可以在 VS code 或是 Android Studio 貼上都可以，推薦使用 Android Studio，雖然設定繁雜，但好處是會有格式報錯，之後我們打包除錯還是會用到。

- 方法 1：使用 VS code 設定

android 專案資料夾的 build.gradle

1
2
// android/build.gradle
classpath 'com.google.gms:google-services:4.4.2'

FirebaseCreateAndroid-3

android 專案資料夾 / App module 的 build.gradle

1
2
// android/app/build.gradle
apply plugin: 'com.google.gms.google-services'
1
2
3
// android/app/build.gradle
implementation platform('com.google.firebase:firebase-bom:33.11.0') // Firebase BoM
implementation 'com.google.firebase:firebase-messaging' // 接收推播

FirebaseCreateAndroid-4FirebaseCreateAndroid-5

- 方法 2：使用 Android Studio 設定

如果你想使用 Android Studio 設定，建議先做 JDK 17 配置。JDK 17 是 Java Development Kit（Java 開發工具包）的其中一個版本，是 Oracle 和 Java 社群釋出的 LTS（長期支援）版本。我們之後把程式碼編譯成可安裝的 APK 也會用到！

  1. jdk-17.0.12-windows 下載並安裝
  2. 重新啟動電腦
  3. 設定 JDK
    - 手動設定 JDK 17
    - 透過 Android Studio 設定 (但我沒設成功… 🫠)
  4. 在 Android Studio 開啟終端機輸入./gradlew --version 確認設定成果
    FirebaseCreateAndroid-6-JDK-2
  5. Android Studio 開啟專案中的 android 資料夾。當檔案有變更時，會出現 Sync Now 按鈕，點選後可藉由下方 Build 觀看是否報錯。
    FirebaseCreateAndroid-6-AndroidStudio

5. 完成 Firebase Android 設定

以上設定完成後，回到 Firebase 的 Android 應用程式選擇確定建立。

6. 確認 Firebase Cloud Messaging API（V1） 啟用

在 Firebase Android 專案進入「雲端通訊」頁籤，確認 FCM API（V1） 是啟用狀態。查看一下服務帳戶，應該是自動連接 Google console 帳戶的。
FirebaseAzure-1

我們已經完成最難的部分啦！ 🙌
歡呼一下，接下來就是設定 Azure 了。

Azure 連接

1. 建立 Azure 通知中樞

建立通知中樞方法

2. 串接 Firebase 和 Azure

  1. 開啟 Firebase Android 應用程式中的「服務帳戶」頁籤，下載金鑰檔案
  2. 開啟剛才建立的 Azure 通知中樞，切到 FCM v1（舊版 FCM 已經在 2024 停用）
  3. 在 Azure 貼上 Firebase 金鑰，按下儲存
    FirebaseAzure-2

🎉 完工啦~！
文末附上 iOS 設定文件，因為 iOS 需要先付費申請 Apple 開發者帳號，我也沒有 Apple 筆電，就讓我引用教學文件代替吧。

iOS 設定文件