เพิ่ม 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 เป็นเวอร์ชันล่าสุด และเพิ่มปลั๊กอิน Gradle ที่จำเป็นลงในแอปสำหรับ Crashlytics และ Performance Monitoring ใน Android

  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 และเว็บ

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