Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

เริ่มต้นใช้งาน Firebase ในโปรเจ็กต์ Flutter

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

ติดตั้งเครื่องมือแก้ไขหรือ IDE ที่ต้องการ
ติดตั้ง Flutter สำหรับระบบปฏิบัติการที่เฉพาะเจาะจงของคุณ ซึ่งรวมถึงระบบปฏิบัติการต่อไปนี้
- Flutter SDK
- ไลบรารีที่รองรับ
- ซอฟต์แวร์และ SDK เฉพาะแพลตฟอร์ม

สิ่งที่ต้องดำเนินการก่อนเฉพาะแพลตฟอร์มมีดังนี้

Apple

ตั้งค่าอุปกรณ์ Apple จริงหรือใช้เครื่องจำลองเพื่อเรียกใช้แอป
ตรวจสอบว่าแอป Flutter กำหนดเป้าหมายเป็นแพลตฟอร์มเวอร์ชันต่อไปนี้หรือเวอร์ชันที่ใหม่กว่า
- iOS 15
- macOS 11

คุณต้องการใช้ Cloud Messaging ไหม

ข้อกำหนดเบื้องต้นสำหรับ Cloud Messaging ในแพลตฟอร์ม Apple มีดังนี้

ตั้งค่าอุปกรณ์ Apple จริง

รับคีย์การตรวจสอบสิทธิ์ Apple Push Notification สำหรับบัญชีนักพัฒนาแอป Apple

เปิดใช้ข้อความ Push ใน Xcode ในส่วนแอป > ความสามารถ

Android

ตั้งค่าอุปกรณ์หรือโปรแกรมจำลองเพื่อเรียกใช้แอป โปรแกรมจำลองต้องใช้อิมเมจโปรแกรมจำลองที่มี Google Play
ตรวจสอบว่าแอปเป็นไปตามข้อกำหนดต่อไปนี้
- กำหนดเป้าหมายเป็น API ระดับ 24 (Nougat) ขึ้นไป
- ใช้ Android 7.0 ขึ้นไป

เว็บ

ไม่มีข้อกำหนดเบื้องต้นเฉพาะแพลตฟอร์ม

หากยังไม่มีแอป Flutter คุณสามารถทำตามขั้นตอนในเริ่มต้นใช้งาน: ทดลองใช้เพื่อสร้างแอป Flutter ใหม่โดยใช้เครื่องมือแก้ไขหรือ IDE ที่ต้องการ

ขั้นตอนที่ 1: ติดตั้งเครื่องมือบรรทัดคำสั่งที่จำเป็น

หากยังไม่ได้ติดตั้ง ให้ติดตั้ง Firebase CLI
เข้าสู่ระบบ Firebase โดยใช้บัญชี Google โดยเรียกใช้คำสั่งต่อไปนี้
```
firebase login
```
ติดตั้ง FlutterFire CLI โดยเรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีใดก็ได้
```
dart pub global activate flutterfire_cli
```

ขั้นตอนที่ 2: กำหนดค่าแอปให้ใช้ Firebase

ใช้ FlutterFire CLI เพื่อกำหนดค่าแอป Flutter ให้เชื่อมต่อกับ Firebase

จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มเวิร์กโฟลว์การกำหนดค่าแอป

flutterfire configure

เวิร์กโฟลว์ flutterfire configure นี้ทำหน้าที่อะไร

เวิร์กโฟลว์ flutterfire configure จะดำเนินการต่อไปนี้

ขอให้คุณเลือกแพลตฟอร์ม (iOS, Android, เว็บ) ที่รองรับในแอป Flutter สำหรับแต่ละแพลตฟอร์มที่เลือก FlutterFire CLI จะสร้างแอป Firebase ใหม่ในโปรเจ็กต์ Firebase

คุณเลือกได้ว่าจะใช้โปรเจ็กต์ Firebase ที่มีอยู่หรือสร้างโปรเจ็กต์ Firebase ใหม่ หากคุณลงทะเบียนแอปในโปรเจ็กต์ Firebase ที่มีอยู่แล้ว FlutterFire CLI จะพยายามจับคู่แอปเหล่านั้นตามการกำหนดค่าโปรเจ็กต์ Flutter ปัจจุบัน

หมายเหตุ: เคล็ดลับบางส่วนเกี่ยวกับการตั้งค่าและจัดการโปรเจ็กต์ Firebase มีดังนี้

ดูแนวทางปฏิบัติแนะนำในการเพิ่มแอปลงในโปรเจ็กต์ Firebase รวมถึงวิธีจัดการตัวแปรหลายรายการ

เปิดใช้ Google Analytics ในโปรเจ็กต์ ซึ่งจะมอบประสบการณ์การใช้งานที่ดีที่สุดเมื่อใช้ผลิตภัณฑ์ Firebase หลายรายการ เช่น Crashlytics และ Remote Config

สร้างไฟล์การกำหนดค่า Firebase (firebase_options.dart) และเพิ่มลงในไดเรกทอรี lib/

หมายเหตุ: ไฟล์การกำหนดค่า Firebase นี้มีตัวระบุที่ไม่ซ้ำกันและไม่เป็นความลับสำหรับแต่ละแพลตฟอร์มที่คุณเลือก
ดูข้อมูลเพิ่มเติมเกี่ยวกับไฟล์การกำหนดค่านี้ได้ที่ทำความเข้าใจโปรเจ็กต์ Firebase

(สำหรับ Crashlytics หรือ Performance Monitoring ใน Android) เพิ่มปลั๊กอิน Gradle ที่จำเป็นสำหรับผลิตภัณฑ์ลงในแอป Flutter

หมายเหตุ: หากต้องการให้ FlutterFire CLI เพิ่มปลั๊กอิน Gradle ที่เหมาะสม คุณต้องนำเข้าปลั๊กอิน Flutter ของผลิตภัณฑ์ไปยังแอป Flutter แล้ว

หลังจากเรียกใช้ flutterfire configure ครั้งแรกนี้แล้ว คุณจะต้องเรียกใช้คำสั่งอีกครั้งเมื่อใดก็ตามที่ดำเนินการต่อไปนี้

เริ่มรองรับแพลตฟอร์มใหม่ในแอป Flutter
เริ่มใช้บริการหรือผลิตภัณฑ์ใหม่ของ Firebase ในแอป Flutter โดยเฉพาะอย่างยิ่งหากคุณเริ่มใช้การลงชื่อเข้าใช้ด้วย Google, Crashlytics, Performance Monitoring หรือ Realtime Database

การเรียกใช้คำสั่งอีกครั้งจะช่วยให้มั่นใจว่าการกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุด และ (สำหรับ Android) จะเพิ่มปลั๊กอิน Gradle ที่จำเป็นลงในแอปโดยอัตโนมัติ

ขั้นตอนที่ 3: เริ่มต้นใช้งาน Firebase ในแอป

จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอินหลัก
```
flutter pub add firebase_core
```
จากไดเรกทอรีโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อให้แน่ใจว่าการกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุด
```
flutterfire configure
```
ในไฟล์ lib/main.dart ให้นำเข้าปลั๊กอิน Firebase Core และไฟล์การกำหนดค่าที่คุณสร้างไว้ก่อนหน้านี้
```
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
```
นอกจากนี้ ในไฟล์ lib/main.dart ให้เริ่มต้น Firebase โดยใช้ออบเจ็กต์ DefaultFirebaseOptions ที่ส่งออกโดยไฟล์การกำหนดค่า
```
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
```
สร้างแอปพลิเคชัน Flutter ใหม่โดยทำดังนี้
```
flutter run
```

หากต้องการใช้โปรเจ็กต์สาธิต คุณสามารถเริ่มโปรแกรมจำลอง Firebase และในไฟล์ lib/main.dart ให้เริ่มต้น Firebase โดยใช้ demoProjectId (ควรขึ้นต้นด้วย 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 มีดังนี้

เรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีโปรเจ็กต์ Flutter
```
flutter pub add PLUGIN_NAME
```
เรียกใช้คำสั่งต่อไปนี้จากไดเรกทอรีโปรเจ็กต์ Flutter
```
flutterfire configure
```
การเรียกใช้คำสั่งนี้ช่วยให้มั่นใจว่าการกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุด และสำหรับ Crashlytics และ Performance Monitoring ใน Android จะเพิ่มปลั๊กอิน Gradle ที่จำเป็นลงในแอป
เมื่อเสร็จแล้ว ให้สร้างโปรเจ็กต์ Flutter อีกครั้งโดยทำดังนี้
```
flutter run
```

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

ข้อควรพิจารณาเป็นพิเศษสำหรับการสร้างเว็บแอป

ตรวจสอบตัวเลือกการกำหนดค่าต่อไปนี้เมื่อกำหนดเป้าหมายเป็นแพลตฟอร์มเว็บ

การรองรับ Trusted Types

Firebase SDK สำหรับ Flutter รองรับการใช้ Trusted Types เพื่อช่วยป้องกันการโจมตี XSS ที่อิงตาม DOM (ฝั่งไคลเอ็นต์) เมื่อคุณเปิดใช้การบังคับใช้ประเภทที่เชื่อถือได้สำหรับแอป Firebase SDK จะแทรกสคริปต์ลงใน DOM โดยใช้นโยบายประเภทที่เชื่อถือได้ที่กำหนดเองซึ่งชื่อว่า flutterfire-firebase_core, flutterfire-firebase_auth เป็นต้น

ปิดใช้การแทรก Firebase JavaScript SDK อัตโนมัติ

โดยค่าเริ่มต้น Firebase Flutter SDK จะแทรก Firebase JavaScript SDK โดยอัตโนมัติเมื่อสร้างสำหรับเว็บ หากไม่ต้องการให้ระบบแทรก Firebase JavaScript SDK โดยอัตโนมัติ ให้ทำดังนี้

ละเว้นสคริปต์การแทรกอัตโนมัติโดยเพิ่มพร็อพเพอร์ตี้ต่อไปนี้ภายในแท็ก <script> ในไฟล์ web/index.html ในโปรเจ็กต์ Flutter
```


window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
```

โหลดสคริปต์ด้วยตนเองโดยใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

ตัวเลือกที่ 1: เพิ่ม SDK ลงในไฟล์ web/index.html อย่างชัดเจนภายใน Callback window.addEventListener ดังนี้

  window.addEventListener('load', async function (ev) {
    window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/13.1.0/firebase-firestore.js");
    window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/13.1.0/firebase-analytics.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

ตัวเลือกที่ 2: ดาวน์โหลดโค้ด Firebase JavaScript SDK ของปลั๊กอินจากโดเมน gstatic และบันทึกเป็นไฟล์ JavaScript เพื่อเก็บไว้ในโปรเจ็กต์และโหลดด้วยตนเอง โดยทำดังนี้

  // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file:
  window.addEventListener('load', async function (ev) {
    window.firebase_analytics = await import("./my-analytics.js");
    window.firebase_firestore = await import("./my-firestore.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

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

ผลิตภัณฑ์	ชื่อปลั๊กอิน	Apple อื่นๆ (macOS ฯลฯ)	Windows
Firebase AI Logic ¹	`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`	เบต้า
In-App Messaging	`firebase_in_app_messaging`
มีการติดตั้งไปแล้ว Firebase ครั้ง	`firebase_app_installations`	เบต้า
Performance Monitoring	`firebase_performance`
Realtime Database	`firebase_database`	เบต้า
Remote Config	`firebase_remote_config`	เบต้า
SQL Connect ²	`firebase_data_connect`
ไลบรารีที่เลิกใช้งานแล้วหรือไม่รองรับ
Dynamic Links	`firebase_dynamic_links`
เครื่องมือดาวน์โหลดโมเดล ML	`firebase_ml_model_downloader`	เบต้า

^{1 Firebase AI Logic เดิมเรียกว่า "Vertex AI in Firebase" พร้อมปลั๊กอิน firebase_vertexai}

^{2 Firebase SQL Connect เดิมเรียกว่า "Firebase Data Connect"}

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

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