เพิ่ม 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 และ ในไฟล์ 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
Firebase AI Logic 1 firebase_ai
เบต้า
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
เบต้า

1 Firebase AI Logic เดิมชื่อ "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 และ เว็บ

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