การรวม Firebase Cloud Messaging ใน Flutter:คำแนะนำทีละขั้นตอน

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

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

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

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

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

นี่คือสิ่งที่เราจะกล่าวถึง:

1. วิธีสร้างแอปใน Firebase
2. วิธีตั้งค่า Firebase ใน Flutter
3. วิธีใช้การแจ้งเตือนแบบพุชโดยใช้โทเค็น FCM

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

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

ฉันจะสร้างโปรเจ็กต์ใหม่ในคอนโซล Firebase เพื่อเริ่มต้น ฉันจะอธิบายขั้นตอนที่จำเป็น รวมถึงการตั้งค่าโปรเจ็กต์ วิธีกำหนดค่า Firebase Cloud Messaging และวิธีรับข้อมูลรับรองและไฟล์การกำหนดค่าที่จำเป็นสำหรับแอป Flutter ของเรา

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

สร้างโครงการใน Firebase

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

การสร้างโครงการใน Firebase

หลังจากสร้างโปรเจ็กต์แล้ว มันจะเปลี่ยนเส้นทางคุณไปยังแดชบอร์ดโปรเจ็กต์

ภาพรวมโครงการในคอนโซล Firebase

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

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

ฉันได้สร้างโครงการ Flutter ง่ายๆ โดยใช้ Visual Studio Code หากคุณไม่คุ้นเคยกับการสร้างโปรเจ็กต์ Flutter คุณสามารถดูบทช่วยสอนก่อนหน้าของฉันได้ (หากคุ้นเคยอยู่แล้วสามารถข้ามขั้นตอนนี้ได้)

แอปพลิเคชัน Flutter อย่างง่ายที่ทำงานบนอุปกรณ์ Android

มารวม Firebase เข้ากับโปรเจ็กต์ Flutter ของเรากันดีกว่า ในการดำเนินการนี้ เราจำเป็นต้องมีเครื่องมือบรรทัดคำสั่ง Firebase CLI ฉันได้ติดตั้ง Firebase CLI แล้ว หากคุณยังไม่ได้ดำเนินการนี้ คุณสามารถดูเอกสารอย่างเป็นทางการได้

จากนั้นเราจำเป็นต้องเข้าสู่ระบบ Firebase โดยใช้ Firebase CLI

firebase login

เข้าสู่ระบบ Firebase โดยใช้ FirebaseCLI

สิ่งนี้จะนำคุณไปยังเบราว์เซอร์เพื่อเข้าสู่ระบบ Firebase คุณจะถูกนำกลับมาเมื่อการรับรองความถูกต้องเสร็จสมบูรณ์

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

dart pub global activate flutterfire_cli

FlutterFire CLI เป็นเครื่องมืออินเทอร์เฟซบรรทัดคำสั่งที่ทำให้การรวมบริการ Firebase เข้ากับแอปพลิเคชัน Flutter ง่ายขึ้น มอบวิธีที่สะดวกในการเพิ่ม กำหนดค่า และจัดการปลั๊กอิน Firebase ในโปรเจ็กต์ Flutter ของเรา

การติดตั้ง FlutterFireCLI

ขั้นตอนต่อไปคือการเพิ่ม 04 ไลบรารีสำหรับโครงการ Flutter ของเรา

คำสั่งต่อไปนี้จะเพิ่ม 19 โดยอัตโนมัติ แพ็กเกจเป็นการพึ่งพาใน 23 ของโปรเจ็กต์ของคุณ ไฟล์และดึงแพ็คเกจเวอร์ชันล่าสุดจาก 36 . หลังจากรันคำสั่งนี้แล้ว คุณสามารถนำเข้า 48 ได้ บรรจุลงในไฟล์ Dart และใช้บริการ Firebase ในแอป Flutter ของเรา

flutter pub add firebase_core

การติดตั้งแพ็คเกจ Firebase Core

55 คำสั่งใช้เพื่อกำหนดค่าบริการ Firebase ในโปรเจ็กต์ Flutter ของเราโดยใช้ FlutterFire CLI คำสั่งนี้ช่วยให้เราตั้งค่าการตรวจสอบสิทธิ์ Firebase, Firestore, Cloud Messaging และบริการ Firebase อื่นๆ ได้อย่างง่ายดายและมีประสิทธิภาพ

flutterfire configure

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

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

flutter pub add firebase_messaging

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

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

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");
}