เพิ่ม Firebase ไปยังแอป Flutter

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

• ติดตั้งเครื่องมือแก้ไขหรือ IDE ที่ต้องการ

• ติดตั้ง Flutter สำหรับระบบปฏิบัติการที่เฉพาะเจาะจง ซึ่งรวมถึงระบบปฏิบัติการต่อไปนี้

  • Flutter SDK
  • ไลบรารีที่รองรับ
  • ซอฟต์แวร์และ SDK สำหรับแพลตฟอร์มที่เฉพาะเจาะจง

• ลงชื่อเข้าใช้ Firebase ด้วยบัญชี Google

หากยังไม่มีแอป 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 แล้ว

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

ลองใช้แอปตัวอย่างด้วย 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 และเว็บ

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

• รับประสบการณ์การใช้งานจริงจาก Firebase Flutter Codelab

• เตรียมเปิดตัวแอป

  • ตั้งค่าการแจ้งเตือนเกี่ยวกับงบประมาณสำหรับโปรเจ็กต์ในคอนโซล Google Cloud
  • ตรวจสอบแดชบอร์ดการใช้งานและการเรียกเก็บเงินในคอนโซล Firebase เพื่อดูภาพรวมการใช้งานโปรเจ็กต์ในบริการ Firebase หลายรายการ
  • ตรวจสอบรายการตรวจสอบการเปิดตัว Firebase