เพิ่ม 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

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

คุณเข้าถึง Firebase ในแอป Flutter ได้ผ่านทาง ปลั๊กอิน Firebase Flutter สำหรับแต่ละผลิตภัณฑ์ Firebase (เช่น Cloud Firestore, การตรวจสอบสิทธิ์, 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 และการตรวจสอบประสิทธิภาพใน Android จะมีการเพิ่ม ปลั๊กอิน Gradle ที่จำเป็นในแอป

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

    flutter run

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

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

ผลิตภัณฑ์ ชื่อปลั๊กอิน iOS Android เว็บ Apple
(macOS เป็นต้น)		 Windows
ข้อมูลวิเคราะห์ firebase_analytics
เบต้า
การตรวจสอบแอป firebase_app_check
เบต้า
การตรวจสอบสิทธิ์ firebase_auth
เบต้า เบต้า
Cloud Firestore cloud_firestore
เบต้า เบต้า
ฟังก์ชันระบบคลาวด์ cloud_functions
เบต้า
การรับส่งข้อความในระบบคลาวด์ firebase_messaging
เบต้า
พื้นที่เก็บข้อมูลระบบคลาวด์ firebase_storage
เบต้า เบต้า
Crashlytics firebase_crashlytics
เบต้า
ลิงก์แบบไดนามิก firebase_dynamic_links
การรับส่งข้อความในแอป firebase_in_app_messaging
การติดตั้ง Firebase firebase_app_installations
เบต้า
โปรแกรมดาวน์โหลดโมเดล ML firebase_ml_model_downloader
เบต้า
การตรวจสอบประสิทธิภาพ firebase_performance
ฐานข้อมูลเรียลไทม์ firebase_database
เบต้า
การกำหนดค่าระยะไกล firebase_remote_config
เบต้า
Vertex AI สำหรับ 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 และ เว็บ

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