Dodawanie Firebase do aplikacji we Flutterze

Wymagania wstępne

• Zainstaluj preferowany edytor lub IDE.

• Zainstaluj Fluttera w systemie operacyjnym, w tym:

  • Flutter SDK
  • Biblioteki pomocnicze
  • Oprogramowanie i pakiety SDK na poszczególne platformy

• Zaloguj się w Firebase, używając konta Google.

Jeśli nie masz jeszcze aplikacji Flutter, możesz wykonać czynności opisane w tym artykule, aby utworzyć nową aplikację Flutter w wybranym edytorze lub środowisku IDE.

Krok 1. Zainstaluj wymagane narzędzia wiersza poleceń.

1. Jeśli jeszcze tego nie zrobisz, zainstaluj interfejs wiersza poleceń Firebase.

2. Zaloguj się w Firebase za pomocą konta Google, uruchamiając to polecenie:

   firebase login
   

3. Zainstaluj interfejs wiersza poleceń FlutterFire, uruchamiając to polecenie w dowolnym katalogu:

   dart pub global activate flutterfire_cli
   

Krok 2. Skonfiguruj aplikacje pod kątem używania Firebase

Użyj interfejsu wiersza poleceń FlutterFire, aby skonfigurować aplikacje Flutter pod kątem łączenia się z Firebase.

W katalogu projektu Flutter uruchom to polecenie, aby rozpocząć proces konfigurowania aplikacji:

flutterfire configure

Krok 3. Zainicjuj Firebase w aplikacji

1. W katalogu projektu Flutter uruchom to polecenie, aby zainstalować wtyczkę podstawową:

   flutter pub add firebase_core
   

2. W katalogu projektu Flutter uruchom to polecenie, aby upewnić się, że konfiguracja Firebase w aplikacji Flutter jest aktualna:

   flutterfire configure
   

3. W pliku lib/main.dart zaimportuj podstawową wtyczkę Firebase i wygenerowany wcześniej plik konfiguracyjny:

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

4. W pliku lib/main.dart zainicjuj Firebase za pomocą obiektu DefaultFirebaseOptions wyeksportowanego przez plik konfiguracji:

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

5. Przebuduj aplikację Flutter:

   flutter run
   

Jeśli wolisz użyć projektu demonstracyjnego, możesz uruchomić emulator Firebase i w pliku lib/main.dart zainicjować Firebase za pomocą demoProjectId (powinien zaczynać się od demo-):

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

Krok 4. Dodaj wtyczki Firebase

Dostęp do Firebase w aplikacji Flutter uzyskujesz za pomocą różnych wtyczek Firebase Flutter, po jednej dla każdego produktu Firebase (np. Cloud Firestore, Authentication, Analytics itp.).

Flutter to platforma wieloplatformowa, więc każdy wtyczka Firebase ma zastosowanie na platformach Apple, Android i w internecie. Jeśli więc dodasz do aplikacji Flutter dowolną wtyczkę Firebase, będzie ona używana w wersjach aplikacji na Apple, Androida i w internecie.

Aby dodać wtyczkę Firebase Flutter:

1. W katalogu projektu Flutter uruchom to polecenie:

   flutter pub add PLUGIN_NAME

2. W katalogu projektu Flutter uruchom to polecenie:

   flutterfire configure
   

   Uruchomienie tego polecenia zapewnia, że konfiguracja Firebase w aplikacji Flutter jest aktualna, a w przypadku Crashlytics i Performance Monitoring na Androidzie dodaje do aplikacji wymagane wtyczki Gradle.

3. Po zakończeniu ponownie skompiluj projekt Flutter:

   flutter run
   

To już wszystko Twoje aplikacje Flutter są zarejestrowane i skonfigurowane do korzystania z Firebase.

Dostępne wtyczki

^{1 Firebase AI Logic nazywała się wcześniej „Vertex AI in Firebase” z wtyczką firebase_vertexai.}

Wypróbuj przykładową aplikację z Analytics

Podobnie jak wszystkie pakiety, wtyczka firebase_analytics zawiera przykładowy program.

1. Otwórz aplikację Flutter, którą masz już skonfigurowaną do korzystania z Firebase (instrukcje znajdziesz na tej stronie).

2. Otwórz katalog lib aplikacji, a następnie usuń istniejący plik main.dart.

3. Z Google Analytics repozytorium przykładowego programu skopiuj i wklej te 2 pliki do katalogu lib aplikacji:

   • main.dart
   • tabs_page.dart

4. Uruchom aplikację we Flutterze.

5. W Firebasekonsoli otwórz projekt Firebase swojej aplikacji, a potem w menu po lewej stronie kliknij Analytics.

   1. Kliknij Panel. Jeśli Analytics działa prawidłowo, na panelu „Aktywni użytkownicy w ostatnich 30 minutach” pojawi się aktywny użytkownik (wypełnienie tego panelu może zająć trochę czasu).

   2. Kliknij DebugView. Włącz tę funkcję, aby zobaczyć wszystkie zdarzenia wygenerowane przez program przykładowy.

Więcej informacji o konfigurowaniu Analytics znajdziesz w przewodnikach dla początkujących dotyczących iOS, Androida i internetu.

Uwagi dotyczące tworzenia aplikacji internetowych

Obsługa zaufanych typów

Pakiet Firebase SDK na platformę Flutter obsługuje używanie dyrektywy Trusted Types, która pomaga zapobiegać atakom XSS opartym na DOM (po stronie klienta). Gdy włączysz egzekwowanie zaufanych typów w swojej aplikacji, pakiet SDK Firebase wstrzyknie swoje skrypty do DOM za pomocą niestandardowych zasad zaufanych typów o nazwach flutterfire-firebase_core, flutterfire-firebase_auth itd.

Wyłącz automatyczne wstrzykiwanie pakietu Firebase JavaScript SDK

Domyślnie pakiet Firebase Flutter SDK automatycznie wstrzykuje pakiet Firebase JavaScript SDK podczas kompilowania na potrzeby internetu. Jeśli nie chcesz, aby pakiet Firebase JavaScript SDK był wstrzykiwany automatycznie, możesz wykonać te czynności:

1. Zignoruj skrypt automatycznego wstrzykiwania, dodając tę właściwość w tagu <script> w pliku web/index.html w projekcie 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. Załaduj skrypt ręcznie, korzystając z jednej z tych alternatyw:

   • Dodaj pakiet SDK do pliku web/index.html w wywołaniu zwrotnym 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
     

   • Możesz też pobrać kod pakietu Firebase JavaScript SDK wtyczki z domeny „gstatic” i zapisać go w pliku JavaScript, który będzie przechowywany w projekcie i wczytywany ręcznie:

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

Dalsze kroki

• Wypróbuj w praktyce ćwiczenia z programowania Firebase Flutter.

• Przygotuj się do uruchomienia aplikacji:

  • Skonfiguruj alerty budżetowe w projekcie w konsoli Google Cloud.
  • Monitoruj panel Wykorzystanie i rozliczenia w Firebase konsoli, aby uzyskać ogólny obraz wykorzystania usług Firebase w projekcie.
  • Zapoznaj się z listą kontrolną dotyczącą uruchamiania Firebase.