เพิ่ม Firebase ไปยังแอป Flutter


ข้อกำหนดเบื้องต้น

หากยังไม่มีแอป Flutter คุณสามารถดำเนินการตามขั้นตอน เริ่มต้น: ทดลองใช้ สร้างแอป Flutter ใหม่โดยใช้เครื่องมือแก้ไขหรือ IDE ที่ต้องการ

ขั้นตอนที่ 1: ติดตั้งเครื่องมือบรรทัดคำสั่งที่จำเป็น

  1. หากคุณยังไม่ได้ดำเนินการ ติดตั้ง Firebase CLI

  2. เข้าสู่ระบบ Firebase โดยใช้บัญชี Google โดยเรียกใช้รายการต่อไปนี้ คำสั่ง:

    firebase login

  3. ติดตั้ง FlutterFire CLI โดยเรียกใช้คำสั่งต่อไปนี้จาก ไดเรกทอรี:

    dart pub global activate flutterfire_cli

ขั้นตอนที่ 2: กำหนดค่าแอปเพื่อใช้ Firebase

ใช้ FlutterFire CLI เพื่อกำหนดค่าแอป Flutter ให้เชื่อมต่อกับ Firebase

จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้น เวิร์กโฟลว์การกำหนดค่าแอป:

flutterfire configure


ขั้นตอนที่ 3: เริ่มต้น Firebase ในแอป

  1. จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง ปลั๊กอินหลักกัน

    flutter pub add firebase_core

  2. จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อให้แน่ใจว่า ว่าการกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุด โดยทำดังนี้

    flutterfire configure

  3. ในไฟล์ lib/main.dart ให้นำเข้าปลั๊กอินหลักของ Firebase และ ไฟล์การกำหนดค่าที่คุณสร้างไว้ก่อนหน้านี้:

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

  4. และในไฟล์ lib/main.dart ให้เริ่มต้น Firebase โดยใช้ ออบเจ็กต์ DefaultFirebaseOptions ที่ส่งออกโดยไฟล์การกำหนดค่า:

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

  5. สร้างแอปพลิเคชัน Flutter ใหม่โดยทำดังนี้

    flutter run

หากคุณต้องการใช้โปรเจ็กต์สาธิต คุณสามารถเริ่มโปรแกรมจำลอง Firebase และ ในไฟล์ lib/main.dart เริ่มต้น Firebase โดยใช้ demoProjectId (ควรขึ้นต้นด้วย demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

ขั้นตอนที่ 4: เพิ่มปลั๊กอิน Firebase

คุณเข้าถึง Firebase ในแอป Flutter ได้ผ่านทาง ปลั๊กอิน Firebase Flutter แต่ละรายการสำหรับผลิตภัณฑ์ Firebase แต่ละรายการ (เช่น Cloud Firestore, Authentication, Analytics เป็นต้น)

เนื่องจาก Flutter เป็นเฟรมเวิร์กหลายแพลตฟอร์ม ปลั๊กอิน Firebase แต่ละรายการจึงใช้งานได้ สำหรับแพลตฟอร์ม Apple, Android และเว็บ ดังนั้นหากคุณเพิ่มปลั๊กอิน Firebase ลงใน แอป Flutter ของคุณจะใช้งานในแอป Apple, Android และเวอร์ชันเว็บ แอปของคุณ

วิธีเพิ่มปลั๊กอิน Firebase Flutter มีดังนี้

  1. จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้

    flutter pub add PLUGIN_NAME

  2. จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้

    flutterfire configure

    การเรียกใช้คำสั่งนี้จะช่วยให้การกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุดแล้ว และสำหรับ Crashlytics และ Performance Monitoring ใน Android ให้เพิ่ม ปลั๊กอิน Gradle ที่จำเป็นในแอป

  3. เมื่อเสร็จแล้ว ให้สร้างโปรเจ็กต์ Flutter ใหม่โดยทำดังนี้

    flutter run

คุณพร้อมแล้ว แอป Flutter ได้รับการลงทะเบียนและกําหนดค่าให้ใช้ Firebase

ปลั๊กอินที่ใช้ได้

ผลิตภัณฑ์ ชื่อปลั๊กอิน iOS Android เว็บ Apple
(macOS เป็นต้น)		 Windows
Analytics firebase_analytics
เบต้า
App Check firebase_app_check
เบต้า
Authentication firebase_auth
เบต้า เบต้า
Cloud Firestore cloud_firestore
เบต้า เบต้า
Cloud Functions cloud_functions
เบต้า
Cloud Messaging firebase_messaging
เบต้า
Cloud Storage firebase_storage
เบต้า เบต้า
Crashlytics firebase_crashlytics
เบต้า
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
การติดตั้ง Firebase ครั้ง firebase_app_installations
เบต้า
โปรแกรมดาวน์โหลดโมเดล ML firebase_ml_model_downloader
เบต้า
Performance Monitoring firebase_performance
Realtime Database firebase_database
เบต้า
Remote Config firebase_remote_config
เบต้า
Vertex AI in Firebase firebase_vertexai
เบต้า

ลองใช้แอปตัวอย่างที่มี Analytics

เช่นเดียวกับแพ็กเกจทั้งหมด ปลั๊กอิน firebase_analytics มาพร้อมกับ โปรแกรมตัวอย่าง

  1. เปิดแอป Flutter ที่คุณกําหนดค่าไว้ให้ใช้ Firebase (โปรดดู คำแนะนำในหน้านี้)

  2. เข้าถึงไดเรกทอรี lib ของแอป แล้วลบ main.dart ที่มีอยู่

  3. จาก Google Analytics ที่เก็บโปรแกรมตัวอย่าง คัดลอกและวางไฟล์ 2 ไฟล์ต่อไปนี้ลงในไดเรกทอรี lib ของแอป

    • main.dart
    • tabs_page.dart

  4. เรียกใช้แอป Flutter

  5. ไปที่โปรเจ็กต์ Firebase ของแอปในคอนโซล Firebase แล้วคลิก Analytics ในการนำทางด้านซ้าย

    1. คลิก แดชบอร์ด หาก Analytics ทํางานได้อย่างถูกต้อง แดชบอร์ดจะแสดงผู้ใช้ที่ใช้งานอยู่ ในคอลัมน์ "ผู้ใช้ที่ใช้งานในช่วง 30 นาทีที่ผ่านมา" (อาจใช้เวลา ก่อนป้อนข้อมูลในแผงนี้)

    2. คลิก DebugView เปิดใช้ฟีเจอร์เพื่อ ดูกิจกรรมทั้งหมดที่สร้างโดยโปรแกรมตัวอย่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า Analytics ได้ที่การเริ่มต้นใช้งาน คู่มือสำหรับ iOS+ Android และ เว็บ

ขั้นตอนถัดไป