Thêm Firebase vào ứng dụng Flutter

Điều kiện tiên quyết

• Cài đặt trình chỉnh sửa hoặc IDE mà bạn muốn.

• Cài đặt Flutter cho hệ điều hành cụ thể của bạn, bao gồm cả những hệ điều hành sau:

  • Flutter SDK
  • Thư viện hỗ trợ
  • Phần mềm và SDK dành riêng cho từng nền tảng

• Đăng nhập vào Firebase bằng Tài khoản Google của bạn.

Nếu chưa có ứng dụng Flutter, bạn có thể hoàn tất phần Bắt đầu: Lái thử để tạo một ứng dụng Flutter mới bằng trình chỉnh sửa hoặc IDE mà bạn muốn.

Bước 1: Cài đặt các công cụ dòng lệnh bắt buộc

1. Nếu bạn chưa cài đặt, hãy cài đặt CLI Firebase.

2. Đăng nhập vào Firebase bằng Tài khoản Google của bạn bằng cách chạy lệnh sau:

   firebase login
   

3. Cài đặt FlutterFire CLI bằng cách chạy lệnh sau từ bất kỳ thư mục nào:

   dart pub global activate flutterfire_cli
   

Bước 2: Định cấu hình ứng dụng để sử dụng Firebase

Sử dụng FlutterFire CLI để định cấu hình các ứng dụng Flutter nhằm kết nối với Firebase.

Trong thư mục dự án Flutter, hãy chạy lệnh sau để bắt đầu quy trình định cấu hình ứng dụng:

flutterfire configure

Bước 3: Khởi động Firebase trong ứng dụng của bạn

1. Trong thư mục dự án Flutter, hãy chạy lệnh sau để cài đặt trình bổ trợ cốt lõi:

   flutter pub add firebase_core
   

2. Trong thư mục dự án Flutter, hãy chạy lệnh sau để đảm bảo rằng cấu hình Firebase của ứng dụng Flutter luôn mới nhất:

   flutterfire configure
   

3. Trong tệp lib/main.dart, hãy nhập trình bổ trợ Firebase Core và tệp cấu hình mà bạn đã tạo trước đó:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. Ngoài ra, trong tệp lib/main.dart, hãy khởi động Firebase bằng đối tượng DefaultFirebaseOptions do tệp cấu hình xuất:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Tạo lại ứng dụng Flutter:

   flutter run
   

Nếu muốn sử dụng một dự án minh hoạ, bạn có thể khởi động Trình mô phỏng Firebase và trong tệp lib/main.dart, hãy khởi chạy Firebase bằng demoProjectId (phải bắt đầu bằng demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

Bước 4: Thêm các trình bổ trợ Firebase

Bạn truy cập vào Firebase trong ứng dụng Flutter thông qua nhiều trình bổ trợ Firebase Flutter, một trình bổ trợ cho mỗi sản phẩm của Firebase (ví dụ: Cloud Firestore, Authentication, Analytics, v.v.).

Vì Flutter là một khung đa nền tảng, nên mỗi trình bổ trợ Firebase đều áp dụng cho các nền tảng Apple, Android và web. Vì vậy, nếu bạn thêm bất kỳ trình bổ trợ Firebase nào vào ứng dụng Flutter, thì trình bổ trợ đó sẽ được các phiên bản Apple, Android và web của ứng dụng sử dụng.

Sau đây là cách thêm một trình bổ trợ Firebase Flutter:

1. Trong thư mục dự án Flutter, hãy chạy lệnh sau:

   flutter pub add PLUGIN_NAME

2. Trong thư mục dự án Flutter, hãy chạy lệnh sau:

   flutterfire configure
   

   Việc chạy lệnh này đảm bảo rằng cấu hình Firebase của ứng dụng Flutter luôn mới nhất và đối với Crashlytics và Performance Monitoring trên Android, lệnh này sẽ thêm các trình bổ trợ Gradle bắt buộc vào ứng dụng của bạn.

3. Sau khi hoàn tất, hãy tạo lại dự án Flutter:

   flutter run
   

Bạn đã hoàn tất! Các ứng dụng Flutter của bạn được đăng ký và định cấu hình để sử dụng Firebase.

Các trình bổ trợ có sẵn

^{1 Firebase AI Logic trước đây có tên là "Vertex AI in Firebase" với trình bổ trợ firebase_vertexai.}

Dùng thử một ứng dụng mẫu bằng Analytics

Giống như mọi gói, trình bổ trợ firebase_analytics đi kèm với một chương trình mẫu.

1. Mở một ứng dụng Flutter mà bạn đã định cấu hình để sử dụng Firebase (xem hướng dẫn trên trang này).

2. Truy cập vào thư mục lib của ứng dụng, sau đó xoá tệp main.dart hiện có.

3. Từ Google Analytics kho lưu trữ chương trình ví dụ, hãy sao chép và dán 2 tệp sau vào thư mục lib của ứng dụng:

   • main.dart
   • tabs_page.dart

4. Chạy ứng dụng Flutter.

5. Chuyển đến dự án Firebase của ứng dụng trong bảng điều khiển Firebase, sau đó nhấp vào Phân tích trong trình đơn điều hướng bên trái.

   1. Nhấp vào Trang tổng quan. Nếu Analytics hoạt động đúng cách, trang tổng quan sẽ cho thấy một người dùng đang hoạt động trong bảng "Số người dùng đang hoạt động trong 30 phút qua" (có thể mất một khoảng thời gian để điền thông tin vào bảng này).

   2. Nhấp vào DebugView. Bật tính năng này để xem tất cả các sự kiện do chương trình ví dụ tạo ra.

Để biết thêm thông tin về cách thiết lập Analytics, hãy truy cập vào hướng dẫn bắt đầu cho iOS+, Android và web.

Lưu ý về việc xây dựng ứng dụng web

Hỗ trợ Trusted Types

Firebase SDK cho Flutter hỗ trợ việc sử dụng Trusted Types để giúp ngăn chặn các cuộc tấn công XSS dựa trên DOM (phía máy khách). Khi bạn bật tính năng thực thi Loại đáng tin cậy cho ứng dụng, SDK Firebase sẽ chèn các tập lệnh của ứng dụng vào DOM bằng cách sử dụng các chính sách Loại đáng tin cậy tuỳ chỉnh, có tên là flutterfire-firebase_core, flutterfire-firebase_auth, v.v.

Tắt tính năng tự động chèn SDK JavaScript của Firebase

Theo mặc định, Firebase Flutter SDK sẽ tự động chèn Firebase JavaScript SDK khi tạo cho web. Nếu không muốn Firebase JavaScript SDK tự động được chèn, bạn có thể làm như sau:

1. Bỏ qua tập lệnh tự động chèn bằng cách thêm thuộc tính sau vào bên trong thẻ <script> trong tệp web/index.html trong dự án Flutter:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. Tải tập lệnh theo cách thủ công bằng một trong các phương án thay thế sau:

   • Thêm SDK một cách rõ ràng vào tệp web/index.html, bên trong lệnh gọi lại window.addEventListener:

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • Hoặc tải mã Firebase JavaScript SDK của trình bổ trợ xuống từ miền "gstatic" rồi lưu vào một tệp JavaScript để lưu giữ trong dự án và tải theo cách thủ công:

       // "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
     

Các bước tiếp theo

• Trải nghiệm thực tế với Lớp học lập trình Firebase Flutter.

• Chuẩn bị ra mắt ứng dụng:

  • Thiết lập cảnh báo ngân sách cho dự án của bạn trong bảng điều khiển Google Cloud.
  • Theo dõi bảng điều khiển Mức sử dụng và thanh toán trong bảng điều khiển Firebase để nắm được thông tin tổng quan về mức sử dụng của dự án trên nhiều dịch vụ của Firebase.
  • Tham khảo danh sách kiểm tra trước khi phát hành của Firebase.