รวม Firebase Cloud Messaging ใน Flutter: คู่มือทีละขั้นตอน

ในภูมิทัศน์แอปมือถือที่แข่งขันสูงในปัจจุบัน การมีส่วนร่วมกับผู้ใช้แอปของคุณอย่างมีประสิทธิภาพและส่งมอบข้อมูลทันเวลาเป็นกุญแจสำคัญ

Firebase Cloud Messaging (FCM) เป็นบริการ push notification ที่ทรงพลังจาก Firebase มันเสนอวิธีที่ seamless ในการเชื่อมต่อกับผู้ใช้แอปของคุณและเก็บพวกเขาให้ engaged

ในบทช่วยสอนนี้ เราจะเจาะลึกการรวม FCM ใน Flutter เราจะสำรวจประโยชน์และแสดงตัวอย่างจริงว่ามันสามารถเพิ่ม user engagement และปรับปรุงประสิทธิภาพแอปได้อย่างไร

Firebase Cloud Messaging (FCM) ให้การเชื่อมต่อที่น่าเชื่อถือและประหยัดแบตเตอรี่ระหว่าง server และอุปกรณ์ มันช่วยให้คุณส่งและรับข้อความและแจ้งเตือนบน iOS, Android และ web โดยไม่มีค่าใช้จ่าย

ในบทช่วยสอนนี้ เราจะสำรวจกระบวนการตั้งค่าและใช้ Firebase Cloud Messaging (FCM) ใน Flutter โดยใช้ Firebase เป็น backend service แม้ focus หลักจะเป็น Android implementation แต่คุ้มค่าที่จะทราบว่ากระบวนการคล้ายกันสำหรับ iOS และ Android (มีความแตกต่างเล็กน้อยในการตั้งค่า)

นี่คือสิ่งที่เราจะครอบคลุม:

1. วิธีสร้างแอปใน Firebase
2. วิธีตั้งค่า Firebase ใน Flutter
3. วิธี implement push notifications โดยใช้ FCM tokens

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีส่งแจ้งเตือนง่ายๆ โดยใช้ Firebase ไปยังแอปที่รันใน Flutter มาเริ่มกันเลย

วิธีสร้างแอปใน Firebase

ผมจะสร้างโปรเจกต์ใหม่ใน Firebase console เพื่อเริ่มต้น ผมจะเดินผ่านขั้นตอนที่จำเป็น รวมถึง project setup, วิธีกำหนดค่า Firebase Cloud Messaging และวิธีได้ credentials และไฟล์ config ที่จำเป็นสำหรับ Flutter app ของเรา

ก่อนสร้างแอป คุณต้องสมัคร Firebase console หากยังไม่มีบัญชี หลังสมัคร ลองสร้างโปรเจกต์

Create a Project in Firebase

จะใช้เวลาสักครู่ในการสร้างโปรเจกต์

Creating project in Firebase

หลังจากสร้างโปรเจกต์ จะ redirect คุณไปที่ project dashboard

Project Overview in Firebase Console

เมื่อคุณสร้างโปรเจกต์ใน Firebase console แล้ว ถึงเวลาเริ่มกับ Flutter app ของเรา

วิธีตั้งค่า Firebase ใน Flutter

ผมสร้าง Flutter project เรียบง่ายด้วย Visual Studio Code หากคุณไม่คุ้นเคยกับการสร้าง Flutter project คุณสามารถอ้างอิง tutorial ก่อนหน้าของผมได้ (หากคุณคุ้นเคยแล้ว ข้ามขั้นตอนนี้ได้)

Simple Flutter Application running on Android Device

มารวม Firebase เข้า Flutter project ของเรา เพื่อทำเช่นนี้ เราต้องการ Firebase CLI command line tool ผมติดตั้ง Firebase CLI แล้ว หากคุณยังไม่ทำ คุณสามารถอ้างอิงเอกสารทางการได้

จากนั้นเราต้อง login ไป Firebase โดยใช้ Firebase CLI

firebase login

Login to Firebase using FirebaseCLI

นี่จะนำทางคุณไป browser เพื่อ login Firebase คุณจะถูกนำทางกลับเมื่อ authentication สำเร็จ

หลัง login สำเร็จ เราต้องติดตั้ง FlutterFire CLI เราสามารถใช้ FlutterFire CLI เพื่อกำหนดค่า Flutter apps ให้เชื่อมต่อกับ Firebase รันคำสั่งต่อไปนี้เพื่อ activate FlutterFire CLI:

dart pub global activate flutterfire_cli

FlutterFire CLI เป็น command-line interface tool ที่ทำให้การรวม Firebase services เข้า Flutter applications ง่ายขึ้น มันให้วิธีสะดวกในการเพิ่ม กำหนดค่า และจัดการ Firebase plugins ใน Flutter project ของเรา

Installing FlutterFireCLI

ขั้นตอนต่อไปคือเพิ่ม library firebase_core เข้า Flutter project ของเรา

คำสั่งต่อไปนี้จะเพิ่ม firebase_core package เป็น dependency ใน pubspec.yaml ของโปรเจกต์โดยอัตโนมัติ และดึงเวอร์ชันล่าสุดจาก pub.dev หลังรันคำสั่งนี้ คุณสามารถ import firebase_core package เข้า Dart files และใช้ Firebase services ใน Flutter app

flutter pub add firebase_core

Installing Firebase Core package

คำสั่ง flutterfire configure ใช้เพื่อกำหนดค่า Firebase services ใน Flutter project โดยใช้ FlutterFire CLI คำสั่งนี้ช่วยให้เราตั้งค่า Firebase authentication, Firestore, Cloud Messaging และ Firebase services อื่นๆ ได้ง่ายและมีประสิทธิภาพ

flutterfire configure

ขั้นตอนแรกคือเลือกโปรเจกต์

Connect Flutter App with Firebase app

ขั้นตอนต่อไปคือเลือก platform ผมใช้สำหรับ Android ที่นี่ จึงเลือก Android

Choosing platform

หลังจาก configuration สำเร็จ Firebase App Id จะแสดง

สุดท้าย เราต้องเพิ่มการเปลี่ยนแปลงโค้ดบ้างในไฟล์ main.dart

Import packages ต่อไปนี้:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

เพิ่มการกำหนดค่าต่อไปนี้เพื่อ initialize Firebase config ภายใน main function ของ main.dart

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

ดีแล้ว เรา configure Firebase ใน Flutter app สำเร็จแล้ว! มาเฉลิมฉลอง milestone นี้สักครู่ การกำหนดค่า Firebase services เป็นขั้นตอนสำคัญในการสร้างแอปพลิเคชันที่ทรงพลังและ feature-rich

วิธี Implement Push Notification โดยใช้ FCM Tokens

เราจะ implement กระบวนการลงทะเบียนอุปกรณ์สำหรับ push notifications และดึง FCM tokens ที่ unique มอบให้แต่ละอุปกรณ์ ขั้นตอนนี้สำคัญสำหรับการส่ง targeted notifications ไปยังอุปกรณ์เฉพาะ

เราจะเจาะลึกการ implement การส่ง push notifications ไปยังอุปกรณ์โดยใช้ Firebase Cloud Messaging เราจะสำรวจวิธี structure และส่ง notification messages จาก Firebase console และสาธิตวิธีจัดการข้อความเหล่านี้ภายใน Flutter app

flutter pub add firebase_messaging

Installing firebse messaging Package

ต่อไป เราต้อง trigger function setAutoInitEnabled เพื่อ enable automatic initialization ของ Firebase Cloud Messaging (FCM) ใน Flutter app ของเรา หมายความว่า FCM จะ initialize อัตโนมัติและดึง device token เมื่อแอปเริ่มต้น

เพิ่ม function call ต่อไปนี้ใน method main:

import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);

มา run Flutter app และ verify ว่าเราได้รับ notification หรือไม่

นำทางไปที่ Firebase messaging console เนื่องจากเป็นข้อความแรก เราต้องเลือก "Create your first campaign" เลือก "Firebase Notification messages" และคลิก "Create"

Sample test messaging template

ตอนนี้เราต้องใส่ notification title, text, และ name สำหรับข้อความ

จากนั้นเราสามารถได้ FCM token ด้วยมือเพื่อทดสอบโดยใช้โค้ดด้านล่าง เพื่อดึง registration token ปัจจุบันสำหรับ app instance ให้เรียก getToken() ใน method main() เมธอดนี้จะขอ notification permissions จากผู้ใช้หากยังไม่ได้ให้สิทธิ์ มิฉะนั้น จะคืนค่า token หรือ reject หากมี error

final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");

Copy FCM token ที่พิมพ์บน console และวางใน input box "Add an FCM registration token"

Sent test message using FCM Token

คลิกปุ่ม Test อุปกรณ์ client เป้าหมาย (กับแอปใน background) ควรได้รับแจ้งเตือน

Received push notification in android device

Hurray! เราได้แจ้งเตือนบนอุปกรณ์ Android แล้ว หากเราคลิกที่แจ้งเตือน จะเปิดแอปโดย default

เมื่อเราแตะแจ้งเตือน พฤติกรรม default บน Android และ iOS คือเปิดแอปพลิเคชัน หากแอปพลิเคชัน terminated จะเริ่มต้นขึ้น หากอยู่ใน background จะนำมาข้างหน้า

ที่นี่ เราเห็น basic configuration สำหรับ initialize Firebase messaging

main.dart

 import 'package:flutter/material.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_messaging/firebase_messaging.dart';
 import 'firebase_options.dart';
 void main() async {
   runApp(const MyApp());
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   final fcmToken = await FirebaseMessaging.instance.getToken();
   await FirebaseMessaging.instance.setAutoInitEnabled(true);
   log("FCMToken $fcmToken");
 }

สรุป

ในบทช่วยสอนนี้ เราครอบคลุมขั้นตอนสำคัญสำหรับการ implement push notifications ใน Flutter โดยใช้ Firebase Cloud Messaging (FCM)

โดยการปฏิบัติตามขั้นตอนที่ระบุไว้ คุณสามารถตั้งค่า Firebase รวมเข้า Flutter project และ implement push notification functionality

ด้วยความสามารถในการส่งและรับแจ้งเตือนอย่างราบรื่น คุณสามารถเพิ่ม user experience และมีส่วนร่วมกับผู้ใช้แอปของคุณอย่างมีประสิทธิภาพ อย่าลืมติดตาม tutorials 進階 และ features อื่นๆ ในอนาคต

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Flutter สมัครรับจดหมายข่าวอีเมลของผม (https://5minslearn.gogosoon.com/) และติดตามผมบน social media

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพนซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานเป็นนักพัฒนา เริ่มต้นเลยวันนี้