iT邦幫忙

2025 iThome 鐵人賽

DAY 15
1

我覺得一個好的App是需要被提醒點開他的,現在好用的小工具太多,多到我本來要記得使用,但真的不是不需要,也不是App不夠好,是真的忘記了。

如果使用者忘記使用它,那它的價值也無法體現,在資訊爆炸的時代,該如何溫柔地提醒使用者:「嘿,今天的靈感來源已為你準備好了,快來點開我吧!(催眠中)」?如何跨越App關閉的鴻溝,主動與使用者建立聯繫?

答案就是推播通知 (Push Notification)。今天將整合Google強大且免費的跨平台訊息服務——Firebase Cloud Messaging (FCM)。我們將完成從Firebase專案設定、Flutter App整合,一直到最終從我們的 n8n 後端觸發推播的完整流程,讓我們的App真正學會「主動喚醒」使用者。

第一部分:Flutter端與Firebase的整合

這部分的設定稍微繁瑣,因为它涉及到Firebase雲端平台、Android/iOS 原生設定以及Flutter程式碼的串接。請跟著以下步驟,一步步完成。

Step1. 建立Firebase專案
前往Firebase Console,使用你的Google帳號登入。點擊「新增專案」,跟隨指引建立一個新的Firebase專案,名稱可自訂。

Step2. 使用FlutterFire CLI自動設定
過去手動設定Firebase相當繁瑣,但現在官方提供了方便好用的命令列工具FlutterFire CLI,可以自動完成大部分工作。

  • 安裝CLI工具:
    dart pub global activate flutterfire_cli
  • 自動設定專案:
    flutterfire configure

它會引導你登入 Google 帳號,選擇剛才建立的 Firebase 專案,並自動為Android和iOS平台進行註冊,最後會產生一個至關重要的設定檔lib/firebase_options.dart。

Step3. 安裝FCM相關套件
安裝兩個核心的Firebase套件:
flutter pub add firebase_core firebase_messaging

  • firebase_core: Firebase 服務的核心套件,必須安裝。
  • firebase_messaging: FCM 功能的主要套件。

Step4. 在App中初始化Firebase
打開lib/main.dart,在 main 函式中,runApp 之前,加入 Firebase 的初始化程式碼。

import 'package.flutter/material.dart';
import 'package:firebase_core/firebase_core.dart'; // 引入 core
import 'firebase_options.dart'; // 引入自動產生的設定檔
// ... 其他 import

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  await Hive.initFlutter(...); // Hive 的初始化保留
  // ... 其他設定
  runApp(...);
}

Step5. 請求推播權限
在App啟動時,需要向使用者請求接收通知的權限,這在iOS上是必要的步驟。

在main函式中加入以下程式碼:

// 在 main.dart 頂部引入
import 'package:firebase_messaging/firebase_messaging.dart';

// ... in main() after Firebase.initializeApp()
FirebaseMessaging messaging = FirebaseMessaging.instance;

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);

debugPrint('使用者授予權限: ${settings.authorizationStatus}');

Step6. 取得並印出FCM Token
要向特定裝置發送通知,我們需要一個獨一無二的識別碼,這就是FCM Token。我們先將它印出來,以便後續在 n8n 中進行測試。

// ... in main() after requestPermission()

final fcmToken = await FirebaseMessaging.instance.getToken();
debugPrint('FCM Token: $fcmToken');

現在,在真實的手機上 (模擬器可能無法正常接收推播) 執行你的App,然後在VS Code或Android Studio的 Console中找到這串長長的Token,並將它複製下來,接下來馬上就會用到。

第二部分:從n8n後端觸發推播

當n8n工作流成功產生每日靈感後,就應該觸發一次推播。這需要透過n8n的HTTP Request節點來呼叫Google 的FCM API。

  • 先取得n8n呼叫API所需的「憑證」
  • 再修改n8n工作流並設定HTTP Request

整合測試

  • 確保你的手機連接著網路,並且App處於背景或已關閉狀態。
  • 在n8n中,點擊HTTP Request節點的「Test step」手動執行。
  • 如果一切順利,幾秒鐘後,你的手機螢幕上就會彈出那條期待已久的推播通知!

明日預告:workmanager

在真實產品中,需要一個資料庫來儲存所有使用者的FCM Token,並在發送時遍歷這個列表。但在我們的MVP中,成功地向單一測試裝置發送通知,已經完成了一個重要的里程碑。

推播通知解決了「如何喚醒使用者」的問題。但還能再想想,還能做得更好嗎?是否能在使用者打開App之前,就悄悄地在背景為他們準備好最新的內容,讓App一打開就是最新狀態?

明天將探索Flutter的背景作業魔法:workmanager,讓App知道如何在背景中自動執行任務~明天見:)


【哈囉你好:)感謝你的閱讀!其他我會常出沒的地方:Threads


上一篇
30 天做一個極簡App:讓資料活下來 - Hive 離線快取(下)
下一篇
30 天做一個極簡App:workmanager背景抓取
系列文
Mobile Dev|日更靈感來源 App:Flutter × LLM × n8n,每天只推 3 則!19
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言