เพิ่ม 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 ที่ส่งออกโดยไฟล์การกําหนดค่า

    WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());

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

    flutter run

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

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

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

คุณเข้าถึง Firebase ในแอป Flutter ผ่านปลั๊กอิน Firebase Flutter ต่างๆ ซึ่งจะมี 1 ปลั๊กอินสําหรับผลิตภัณฑ์ 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
เบต้า
Data Connect firebase_data_connect
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 จากนั้นคลิกข้อมูลวิเคราะห์ในการนําทางด้านซ้าย

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

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

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

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