【Expo Android 推播整合 02】 專案建置：設定 Firebase、Azure

以下流程是針對 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 應用程式

2. 註冊 Android 應用程式

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

3. 加入 google-services 設定檔

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

4. 設定 Firebase SDK

這是我覺得整個設定中最難的步驟…沒有原生知識真的搞不清楚狀況，完全按照 Firebase 貼也可能在 Sync 報錯，翻了好多網友留言才試出來… 🥲。

將畫面提供的程式碼貼入專案內,請注意你是 gradle 或 gradle.tks，本範例使用 gradle，所以切換至 Groovy 版本程式碼。總共有兩個 build.gradle 檔案，請特別留意檔案路徑！以下程式碼可以在 VS code 或是 Android Studio 貼上都可以，推薦使用 Android Studio，雖然設定繁雜，但好處是會有格式報錯，之後我們打包除錯還是會用到。

• 方法 1：使用 VS code 設定

android 專案資料夾的 build.gradle

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

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

// android/app/build.gradle
apply plugin: 'com.google.gms.google-services'

// android/app/build.gradle
implementation platform('com.google.firebase:firebase-bom:33.11.0') // Firebase BoM
implementation 'com.google.firebase:firebase-messaging' // 接收推播

• 方法 2：使用 Android Studio 設定

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

１．jdk-17.0.12-windows 下載並安裝

２．重新啟動電腦

３．設定 JDK
- 手動設定 JDK 17
- 透過 Android Studio 設定 (但我沒設成功… 🫠)

４．在 Android Studio 開啟終端機輸入./gradlew --version 確認設定成果

５．Android Studio 開啟專案中的 android 資料夾。當檔案有變更時，會出現 Sync Now 按鈕，點選後可藉由下方 Build 觀看是否報錯。

5. 完成 Firebase Android 設定

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

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

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

我們已經完成最難的部分啦！ 🙌

歡呼一下，接下來就是設定 Azure 了。

Azure 連接

1. 建立 Azure 通知中樞

建立通知中樞方法

2. 串接 Firebase 和 Azure

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

🎉 完工啦~！

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

iOS 設定文件

• 教學課程：設定 iOS 應用程式以使用 Azure 通知中樞