เพิ่ม Firebase ให้กับแอป Flutter ของคุณ

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

หากคุณยังไม่มีแอป Flutter คุณสามารถดำเนิน การเริ่มต้นใช้งาน: Test Drive เพื่อสร้างแอป 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, การรับรองความถูกต้อง, การวิเคราะห์ ฯลฯ)

เนื่องจาก 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

ปลั๊กอินที่มีอยู่

ผลิตภัณฑ์ ชื่อปลั๊กอิน ไอโอเอส หุ่นยนต์ เว็บ แอปเปิ้ลอื่นๆ
(macOS ฯลฯ)
การวิเคราะห์ firebase_analytics
เบต้า
ตรวจสอบแอป firebase_app_check
เบต้า
การรับรองความถูกต้อง firebase_auth
เบต้า
คลาวด์ไฟร์สโตร์ 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
เบต้า

ลองใช้แอปตัวอย่างกับ Analytics

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

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

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

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

    • main.dart
    • tabs_page.dart
  4. เรียกใช้แอป Flutter ของคุณ

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

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

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

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

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