Conosci Firebase per Flutter

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Prima di iniziare

In questo codelab imparerai alcune delle nozioni di base di Firebase per creare app mobili Flutter per Android e iOS.

Prerequisiti

Cosa imparerai

  • Come creare un evento RSVP e un'app di chat guestbook su Android, iOS, Web e macOS con Flutter.
  • Come autenticare gli utenti con Firebase Authentication e sincronizzare i dati con Firestore.

Di cosa avrai bisogno

Uno dei seguenti dispositivi:

  • Un dispositivo Android o iOS fisico connesso al tuo computer e impostato sulla modalità sviluppatore.
  • Il simulatore iOS (richiede gli strumenti Xcode ).
  • L'emulatore Android (richiede l'installazione in Android Studio ).

È inoltre necessario quanto segue:

  • Un browser di tua scelta, come Google Chrome.
  • Un IDE o un editor di testo di tua scelta configurato con i plug-in Dart e Flutter, come Android Studio o Visual Studio Code .
  • L'ultima versione stable di Flutter o beta se ti piace vivere al limite.
  • Un account Google per la creazione e la gestione del tuo progetto Firebase.
  • L'interfaccia a riga di comando di Firebase ha effettuato l'accesso al tuo account Google.

2. Ottieni il codice di esempio

Scarica la versione iniziale del tuo progetto da GitHub:

  1. Dalla riga di comando, clona il repository GitHub nella directory flutter-codelabs :
git clone https://github.com/flutter/codelabs.git flutter-codelabs

La directory flutter-codelabs contiene il codice per una raccolta di codelab. Il codice per questo codelab si trova nella flutter-codelabs/firebase-get-to-know-flutter . La directory contiene una serie di istantanee che mostrano come dovrebbe apparire il tuo progetto alla fine di ogni passaggio. Ad esempio, sei al secondo gradino.

  1. Trova i file corrispondenti per il secondo passaggio:
cd flutter-codelabs/firebase-get-to-know-flutter/step_02

Se vuoi andare avanti o vedere come dovrebbe apparire qualcosa dopo un passaggio, guarda nella directory che prende il nome dal passaggio che ti interessa.

Importa l'app iniziale

  • Apri o importa la flutter-codelabs/firebase-get-to-know-flutter/step_02 nel tuo IDE preferito. Questa directory contiene il codice iniziale per il codelab, che consiste in un'app Meetup Flutter non ancora funzionante.

Individua i file che necessitano di lavoro

Il codice in questa app è distribuito su più directory. Questa suddivisione delle funzionalità semplifica il lavoro perché raggruppa il codice per funzionalità.

  • Individua i seguenti file:
    • lib/main.dart : questo file contiene il punto di ingresso principale e il widget dell'app.
    • lib/src/widgets.dart : questo file contiene una manciata di widget per aiutare a standardizzare lo stile dell'app. Compongono lo schermo dell'app iniziale.
    • lib/src/authentication.dart : questo file contiene un'implementazione parziale dell'autenticazione con una serie di widget per creare un'esperienza utente di accesso per l'autenticazione basata su e-mail di Firebase. Questi widget per il flusso di autenticazione non sono ancora usati nell'app iniziale, ma li aggiungerai presto.

Aggiungi file aggiuntivi come richiesto per creare il resto dell'app.

Esaminare il file lib/main.dart

Questa app sfrutta il pacchetto google_fonts per rendere Roboto il carattere predefinito in tutta l'app. Puoi esplorare fonts.google.com e utilizzare i caratteri che trovi lì in diverse parti dell'app.

Si utilizzano i widget helper dal file lib/src/widgets.dart sotto forma di Header , Paragraph e IconAndDetail . Questi widget eliminano il codice duplicato per ridurre il disordine nel layout di pagina descritto in HomePage . Ciò consente anche un aspetto coerente.

Ecco come appare la tua app su Android, iOS, Web e macOS:

3. Crea e configura un progetto Firebase

La visualizzazione delle informazioni sull'evento è ottima per i tuoi ospiti, ma da sola non è molto utile per nessuno. Devi aggiungere alcune funzionalità dinamiche all'app. Per fare ciò, devi connettere Firebase alla tua app. Per iniziare con Firebase, devi creare e configurare un progetto Firebase.

Crea un progetto Firebase

  1. Accedi a Firebase .
  2. Nella console, fai clic su Aggiungi progetto o Crea un progetto .
  3. Nel campo Nome progetto , inserisci Firebase-Flutter-Codelab e fai clic su Continua .

4395e4e67c08043a.png

  1. Fai clic sulle opzioni di creazione del progetto. Se richiesto, accetta i termini di Firebase, ma salta la configurazione di Google Analytics perché non lo utilizzerai per questa app.

b7138cde5f2c7b61.png

Per ulteriori informazioni sui progetti Firebase, consulta Capire i progetti Firebase .

L'app utilizza i seguenti prodotti Firebase, disponibili per le app Web:

  • Autenticazione: consente agli utenti di accedere alla tua app.
  • Firestore: salva i dati strutturati sul cloud e riceve notifiche istantanee quando i dati cambiano.
  • Regole di sicurezza Firebase: protegge il tuo database.

Alcuni di questi prodotti richiedono una configurazione speciale o devi abilitarli nella console Firebase.

Abilita l'autenticazione dell'accesso tramite posta elettronica

  1. Nel riquadro Panoramica del progetto della console Firebase, espandi il menu Crea .
  2. Fai clic su Autenticazione > Inizia > Metodo di accesso > E-mail/password > Abilita > Salva .

58e3e3e23c2f16a4.png

Abilita Firestore

L'app Web utilizza Firestore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.

Abilita Firestore:

  • Nel menu Crea , fai clic su Cloud Firestore > Crea database .

99e8429832d23fa3.png

  1. Selezionare Avvia in modalità test e quindi leggere l'esclusione di responsabilità sulle regole di sicurezza. La modalità test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo.

6be00e26c72ea032.png

  1. Fare clic su Avanti e quindi selezionare la posizione per il database. Puoi usare il valore predefinito. Non puoi modificare la posizione in un secondo momento.

278656eefcfb0216.png

  1. Fare clic su Abilita .

4. Configura Firebase

Per utilizzare Firebase con Flutter, è necessario completare le seguenti attività per configurare il progetto Flutter in modo che utilizzi correttamente le librerie FlutterFire :

  1. Aggiungi le dipendenze FlutterFire al tuo progetto.
  2. Registra la piattaforma desiderata sul progetto Firebase.
  3. Scarica il file di configurazione specifico della piattaforma e aggiungilo al codice.

Nella directory di primo livello della tua app Flutter, ci sono le sottodirectory android , ios , macos e web , che contengono rispettivamente i file di configurazione specifici della piattaforma per iOS e Android.

Configura le dipendenze

Devi aggiungere le librerie FlutterFire per i due prodotti Firebase che utilizzi in questa app: Authentication e Firestore.

  • Dalla riga di comando, aggiungi le seguenti dipendenze:
$ flutter pub add firebase_core

Il pacchetto firebase_core è il codice comune richiesto per tutti i plug-in Firebase Flutter.

$ flutter pub add firebase_auth

Il pacchetto firebase_auth consente l'integrazione con l'autenticazione.

$ flutter pub add cloud_firestore

Il pacchetto cloud_firestore consente l'accesso all'archiviazione dei dati Firestore.

$ flutter pub add provider

Il pacchetto firebase_ui_auth fornisce una serie di widget e utilità per aumentare la velocità dello sviluppatore con i flussi di autenticazione.

$ flutter pub add firebase_ui_auth

Hai aggiunto i pacchetti richiesti, ma devi anche configurare i progetti iOS, Android, macOS e Web runner per utilizzare Firebase in modo appropriato. Si utilizza anche il pacchetto provider che consente la separazione della logica di business dalla logica di visualizzazione.

Installa l'interfaccia a riga di comando di FlutterFire

La CLI di FlutterFire dipende dalla CLI di Firebase sottostante.

  1. Se non lo hai già fatto, installa l'interfaccia a riga di comando di Firebase sul tuo computer.
  2. Installa la CLI di FlutterFire:
$ dart pub global activate flutterfire_cli

Una volta installato, il comando flutterfire è disponibile a livello globale.

Configura le tue app

L'interfaccia a riga di comando estrae le informazioni dal progetto Firebase e dalle app del progetto selezionate per generare tutta la configurazione per una piattaforma specifica.

Nella root della tua app, esegui il comando configure :

$ flutterfire configure

Il comando di configurazione guida l'utente attraverso i seguenti processi:

  1. Seleziona un progetto Firebase basato sul file .firebaserc o dalla console Firebase.
  2. Determina le piattaforme per la configurazione, come Android, iOS, macOS e web.
  3. Identifica le app Firebase da cui estrarre la configurazione. Per impostazione predefinita, l'interfaccia a riga di comando tenta di abbinare automaticamente le app Firebase in base alla configurazione del progetto corrente.
  4. Genera un file firebase_options.dart nel tuo progetto.

Configura macOS

Flutter su macOS crea app completamente in modalità sandbox. Poiché questa app si integra con la rete per comunicare con i server Firebase, devi configurare la tua app con i privilegi del client di rete.

macos/Runner/DebugProfile.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
	<key>com.apple.security.cs.allow-jit</key>
	<true/>
	<key>com.apple.security.network.server</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

macos/Runner/Release.entitlements

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>com.apple.security.app-sandbox</key>
	<true/>
  <!-- Add the following two lines -->
	<key>com.apple.security.network.client</key>
	<true/>
</dict>
</plist>

Per ulteriori informazioni, consulta Supporto desktop per Flutter .

5. Aggiungi la funzionalità RSVP

Ora che hai aggiunto Firebase all'app, puoi creare un pulsante RSVP che registri le persone con Authentication . Per Android nativo, iOS nativo e Web, sono disponibili pacchetti FirebaseUI Auth predefiniti, ma è necessario creare questa funzionalità per Flutter.

Il progetto recuperato in precedenza includeva un set di widget che implementa l'interfaccia utente per la maggior parte del flusso di autenticazione. Implementi la logica aziendale per integrare l'autenticazione con l'app.

Aggiungi logica aziendale con il pacchetto Provider

Utilizza il pacchetto del provider per rendere disponibile un oggetto di stato dell'app centralizzato nell'albero dei widget Flutter dell'app:

  1. Modifica le importazioni nella parte superiore del file lib/main.dart :

lib/principale.dart

import 'dart:async';                                     // new
import 'package:firebase_auth/firebase_auth.dart'        // new
    hide EmailAuthProvider, PhoneAuthProvider;           // new
import 'package:firebase_core/firebase_core.dart';       // new
import 'package:firebase_ui_auth/firebase_ui_auth.dart'; // new
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';                 // new

import 'firebase_options.dart';                          // new
import 'src/authentication.dart';                        // new
import 'src/widgets.dart';

Le istruzioni import introducono Firebase Core e Auth, inseriscono il pacchetto del provider che rende l'oggetto dello stato dell'app disponibile nell'albero dei widget e includono i widget di autenticazione dal pacchetto firebase_ui_auth .

Questo oggetto dello stato dell'applicazione ApplicationState ha una responsabilità principale per questo passaggio, ovvero avvisare l'albero del widget che c'è stato un aggiornamento a uno stato autenticato.

  1. Aggiungi la seguente classe alla fine del file lib/main.dart :

lib/principale.dart

class ApplicationState extends ChangeNotifier {
  ApplicationState() {
    init();
  }

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
      } else {
        _loggedIn = false;
      }
      notifyListeners();
    });
  }
}

Utilizzi un provider solo per comunicare all'app lo stato di accesso di un utente. Per consentire a un utente di accedere, utilizza le interfacce utente fornite dal pacchetto firebase_ui_auth , che è un ottimo modo per avviare rapidamente le schermate di accesso nelle tue app.

Integra il flusso di autenticazione

  1. Connetti lo stato dell'app con l'inizializzazione dell'app e quindi aggiungi il flusso di autenticazione a HomePage :

lib/principale.dart

void main() {
  // Modify from here...
  WidgetsFlutterBinding.ensureInitialized();

  runApp(ChangeNotifierProvider(
    create: (context) => ApplicationState(),
    builder: ((context, child) => const App()),
  ));
  // ...to here.
}

La modifica alla funzione main() rende il pacchetto del provider responsabile della creazione di un'istanza dell'oggetto dello stato dell'app con il widget ChangeNotifierProvider . Si usa questa classe del provider specifica perché l'oggetto dello stato dell'app estende la classe ChangeNotifier , che consente al pacchetto del provider di sapere quando visualizzare nuovamente i widget dipendenti.

  1. Aggiorna la tua app per gestire la navigazione su diverse schermate fornite da FirebaseUI:

lib/principale.dart

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Start adding here
      initialRoute: '/home',
      routes: {
        '/home': (context) {
          return const HomePage();
        },
        '/sign-in': ((context) {
          return SignInScreen(
            actions: [
              ForgotPasswordAction(((context, email) {
                Navigator.of(context)
                    .pushNamed('/forgot-password', arguments: {'email': email});
              })),
              AuthStateChangeAction(((context, state) {
                if (state is SignedIn || state is UserCreated) {
                  var user = (state is SignedIn)
                      ? state.user
                      : (state as UserCreated).credential.user;
                  if (user == null) {
                    return;
                  }
                  if (state is UserCreated) {
                    user.updateDisplayName(user.email!.split('@')[0]);
                  }
                  if (!user.emailVerified) {
                    user.sendEmailVerification();
                    const snackBar = SnackBar(
                        content: Text(
                            'Please check your email to verify your email address'));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                  }
                  Navigator.of(context).pushReplacementNamed('/home');
                }
              })),
            ],
          );
        }),
        '/forgot-password': ((context) {
          final arguments = ModalRoute.of(context)?.settings.arguments
              as Map<String, dynamic>?;

          return ForgotPasswordScreen(
            email: arguments?['email'] as String,
            headerMaxExtent: 200,
          );
        }),
        '/profile': ((context) {
          return ProfileScreen(
            providers: [],
            actions: [
              SignedOutAction(
                ((context) {
                  Navigator.of(context).pushReplacementNamed('/home');
                }),
              ),
            ],
          );
        })
      },
      // end adding here
      title: 'Firebase Meetup',
      theme: ThemeData(
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              highlightColor: Colors.deepPurple,
            ),
        primarySwatch: Colors.deepPurple,
        textTheme: GoogleFonts.robotoTextTheme(
          Theme.of(context).textTheme,
        ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

A ogni schermata è associato un diverso tipo di azione in base al nuovo stato del flusso di autenticazione. Dopo la maggior parte dei cambiamenti di stato nell'autenticazione, puoi reindirizzare a una schermata preferita, che si tratti della schermata iniziale o di una schermata diversa, ad esempio il profilo.

  1. Nel metodo build della classe HomePage , integra lo stato dell'app con il widget AuthFunc :

lib/principale.dart

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<ApplicationState>(
        builder: (context, appState, child) => Scaffold(
              appBar: AppBar(
                title: const Text('Firebase Meetup'),
              ),
              body: ListView(
                children: <Widget>[
                  Image.asset('assets/codelab.png'),
                  const SizedBox(height: 8),
                  const IconAndDetail(Icons.calendar_today, 'October 30'),
                  const IconAndDetail(Icons.location_city, 'San Francisco'),
                  // Add from here
                  Consumer<ApplicationState>(
                    builder: (context, appState, _) => AuthFunc(
                        loggedIn: appState.loggedIn,
                        signOut: () {
                          FirebaseAuth.instance.signOut();
                        }),
                  ),
                  // to here
                  const Divider(
                    height: 8,
                    thickness: 1,
                    indent: 8,
                    endIndent: 8,
                    color: Colors.grey,
                  ),
                  const Header("What we'll be doing"),
                  const Paragraph(
                    'Join us for a day full of Firebase Workshops and Pizza!',
                  ),
                ],
              ),
            ));
  }
}

Si crea un'istanza del widget AuthFunc e lo si avvolge in un widget Consumer . Il widget Consumer è il modo consueto in cui il pacchetto del provider può essere utilizzato per ricostruire parte dell'albero quando cambia lo stato dell'app. Il widget AuthFunc è il widget supplementare che testerai.

Testare il flusso di autenticazione

cdf2d25e436bd48d.png

  1. Nell'app, tocca il pulsante RSVP per avviare SignInScreen .

2a2cd6d69d172369.png

  1. Inserire un indirizzo email. Se sei già registrato, il sistema ti chiederà di inserire una password. In caso contrario, il sistema richiede di compilare il modulo di registrazione.

e5e65065dba36b54.png

  1. Immettere una password con meno di sei caratteri per controllare il flusso di gestione degli errori. Se sei registrato, vedi invece la password per.
  2. Immettere password errate per controllare il flusso di gestione degli errori.
  3. Inserisci la password corretta. Viene visualizzata l'esperienza di accesso, che offre all'utente la possibilità di disconnettersi.

4ed811a25b0cf816.png

6. Scrivi messaggi a Firestore

È bello sapere che gli utenti stanno arrivando, ma devi dare agli ospiti qualcos'altro da fare nell'app. E se potessero lasciare messaggi in un libro degli ospiti? Possono condividere il motivo per cui sono entusiasti di venire o chi sperano di incontrare.

Per archiviare i messaggi di chat che gli utenti scrivono nell'app, utilizzi Firestore .

Modello dati

Firestore è un database NoSQL e i dati archiviati nel database sono suddivisi in raccolte, documenti, campi e sottoraccolte. Memorizzi ogni messaggio della chat come documento in una raccolta di gustbook , che è una raccolta di primo livello.

7c20dc8424bb1d84.png

Aggiungi messaggi a Firestore

In questa sezione, aggiungi la funzionalità per consentire agli utenti di scrivere messaggi nel database. Innanzitutto, aggiungi un campo modulo e un pulsante di invio, quindi aggiungi il codice che collega questi elementi al database.

  1. Nel file lib/main.dart , aggiungi le importazioni per i cloud_firestore e dart:async :

lib/principale.dart

import 'dart:async';                                    // new

import 'package:cloud_firestore/cloud_firestore.dart';  // new
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'firebase_options.dart';
import 'src/authentication.dart';
import 'src/widgets.dart';
  1. Alla fine del file lib/main.dart , aggiungi un widget stateful GuestBook per costruire gli elementi dell'interfaccia utente di un campo messaggio e un pulsante di invio:

lib/principale.dart

class GuestBook extends StatefulWidget {
  const GuestBook({required this.addMessage, super.key});
  final FutureOr<void> Function(String message) addMessage;

  @override
  State<GuestBook> createState() => _GuestBookState();
}

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Form(
        key: _formKey,
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'Leave a message',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Enter your message to continue';
                  }
                  return null;
                },
              ),
            ),
            const SizedBox(width: 8),
            StyledButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  await widget.addMessage(_controller.text);
                  _controller.clear();
                }
              },
              child: Row(
                children: const [
                  Icon(Icons.send),
                  SizedBox(width: 4),
                  Text('SEND'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Ci sono un paio di punti di interesse qui. Innanzitutto, crei un'istanza di un modulo in modo da poter convalidare che il messaggio contenga effettivamente contenuto e mostrare all'utente un messaggio di errore se non ce n'è. Per convalidare un modulo, accedi allo stato del modulo dietro il modulo con un GlobalKey . Per ulteriori informazioni sulle chiavi e su come utilizzarle, vedere Quando utilizzare le chiavi .

Nota anche il modo in cui sono disposti i widget, hai un Row con un TextFormField e uno StyledButton , che contiene un Row . Si noti inoltre che TextFormField è racchiuso in un widget Expanded , che forza TextFormField a riempire qualsiasi spazio extra nella riga. Per comprendere meglio il motivo per cui è necessario, vedere Comprensione dei vincoli .

Ora che disponi di un widget che consente all'utente di inserire del testo da aggiungere al Guest Book, devi visualizzarlo sullo schermo.

  1. Modifica il corpo di HomePage per aggiungere le seguenti due righe alla fine dei figli di ListView :
const Header("What we'll be doing"),
const Paragraph(
  'Join us for a day full of Firebase Workshops and Pizza!',
),
// Add the following two lines.
const Header('Discussion'),
GuestBook(addMessage: (message) => print(message)),

Mentre questo è sufficiente per visualizzare il widget, non è sufficiente per fare qualcosa di utile. Aggiorna questo codice a breve per renderlo funzionale.

Anteprima dell'app

Quando un utente fa clic su INVIA , viene attivato il seguente snippet di codice. Aggiunge il contenuto del campo di input del messaggio alla raccolta guestbook del database. Nello specifico, il metodo addMessageToGuestBook aggiunge il contenuto del messaggio a un nuovo documento con un ID generato automaticamente nella raccolta guestbook .

Tieni presente che FirebaseAuth.instance.currentUser.uid è un riferimento all'ID univoco generato automaticamente che l'autenticazione fornisce a tutti gli utenti che hanno effettuato l'accesso.

  • Nel file lib/main.dart , aggiungi il metodo addMessageToGuestBook . Connetti questa funzionalità con l'interfaccia utente nel passaggio successivo.

lib/principale.dart

class ApplicationState extends ChangeNotifier {

  // Current content of ApplicationState elided ...

  // Add from here...
  Future<DocumentReference> addMessageToGuestBook(String message) {
    if (!_loggedIn) {
      throw Exception('Must be logged in');
    }

    return FirebaseFirestore.instance
        .collection('guestbook')
        .add(<String, dynamic>{
      'text': message,
      'timestamp': DateTime.now().millisecondsSinceEpoch,
      'name': FirebaseAuth.instance.currentUser!.displayName,
      'userId': FirebaseAuth.instance.currentUser!.uid,
    });
  }
  // ...to here.
}

Collega l'interfaccia utente e il database

Hai un'interfaccia utente in cui l'utente può inserire il testo che desidera aggiungere al libro degli ospiti e hai il codice per aggiungere la voce a Firestore. Ora tutto ciò che devi fare è collegare i due.

  • Nel file lib/main.dart , apporta la seguente modifica al widget HomePage :

lib/principale.dart

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Meetup'),
      ),
      body: ListView(
        children: <Widget>[
          Image.asset('assets/codelab.png'),
          const SizedBox(height: 8),
          const IconAndDetail(Icons.calendar_today, 'October 30'),
          const IconAndDetail(Icons.location_city, 'San Francisco'),
          Consumer<ApplicationState>(
            builder: (context, appState, _) => AuthFunc(
                loggedIn: appState.loggedIn,
                signOut: () {
                  FirebaseAuth.instance.signOut();
                }),
          ),
          const Divider(
            height: 8,
            thickness: 1,
            indent: 8,
            endIndent: 8,
            color: Colors.grey,
          ),
          const Header("What we'll be doing"),
          const Paragraph(
            'Join us for a day full of Firebase Workshops and Pizza!',
          ),
          // Modify from here...
          Consumer<ApplicationState>(
            builder: (context, appState, _) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (appState.loggedIn) ...[
                  const Header('Discussion'),
                  GuestBook(
                    addMessage: (message) =>
                        appState.addMessageToGuestBook(message),
                  ),
                ],
              ],
            ),
          ),
          // ...to here.
        ],
      ),
    );
  }
}

Hai sostituito le due righe che hai aggiunto all'inizio di questo passaggio con l'implementazione completa. Si utilizza nuovamente Consumer<ApplicationState> per rendere disponibile lo stato dell'app alla parte dell'albero di cui si esegue il rendering. Ciò ti consente di reagire a qualcuno che inserisce un messaggio nell'interfaccia utente e di pubblicarlo nel database. Nella sezione successiva, verificherai se i messaggi aggiunti sono pubblicati nel database.

Testare l'invio di messaggi

  1. Se necessario, accedi all'app.
  2. Inserisci un messaggio, ad esempio Hey there! , quindi fare clic su INVIA .

Questa azione scrive il messaggio nel tuo database Firestore. Tuttavia, non visualizzi il messaggio nella tua vera app Flutter perché devi ancora implementare il recupero dei dati, operazione che eseguirai nel passaggio successivo. Tuttavia, nella dashboard del database della console Firebase, puoi vedere il tuo messaggio aggiunto nella raccolta guestbook . Se invii più messaggi, aggiungi più documenti alla tua collezione di libri guestbook . Ad esempio, vedere il seguente frammento di codice:

713870af0b3b63c.png

7. Leggi i messaggi

È bello che gli ospiti possano scrivere messaggi nel database, ma non possono ancora vederli nell'app. È ora di aggiustarlo!

Sincronizza i messaggi

Per visualizzare i messaggi, è necessario aggiungere listener che si attivano quando i dati cambiano e quindi creare un elemento dell'interfaccia utente che mostri i nuovi messaggi. Aggiungi codice allo stato dell'app che ascolta i nuovi messaggi aggiunti dall'app.

  1. Nel file lib/main.dart prima del widget GuestBook , aggiungi la seguente classe per esporre una vista strutturata dei dati archiviati in Firestore.

lib/principale.dart

class GuestBookMessage {
  GuestBookMessage({required this.name, required this.message});
  final String name;
  final String message;
}
  1. Nella sezione di ApplicationState in cui definisci lo stato e i getter, aggiungi le seguenti righe:

lib/principale.dart

  bool _loggedIn = false;
  bool get loggedIn => _loggedIn;

  // Add from here...
  StreamSubscription<QuerySnapshot>? _guestBookSubscription;
  List<GuestBookMessage> _guestBookMessages = [];
  List<GuestBookMessage> get guestBookMessages => _guestBookMessages;
  // ...to here.
  1. Nella sezione di inizializzazione di ApplicationState , aggiungi le seguenti righe per sottoscrivere una query sulla raccolta di documenti quando un utente accede e annullare l'iscrizione quando si disconnette:

lib/principale.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);
    
    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loggedIn = true;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
      } else {
        _loggedIn = false;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
      }
      notifyListeners();
    });
  }

Questa sezione è importante perché è dove si costruisce una query sulla raccolta guestbook e si gestisce la sottoscrizione e l'annullamento della sottoscrizione a questa raccolta. Ascolti lo stream, dove ricostruisci una cache locale dei messaggi nella raccolta del libro degli guestbook e memorizzi anche un riferimento a questa iscrizione in modo che tu possa cancellarti da essa in seguito. C'è molto da fare qui, quindi dovresti esplorarlo in un debugger per ispezionare cosa succede per ottenere un modello mentale più chiaro. Per ulteriori informazioni, consulta Ottenere aggiornamenti in tempo reale con Firestore .

  1. Nel widget GuestBook , aggiungi un elenco di messaggi come parte della configurazione per connettere questo stato mutevole all'interfaccia utente:

lib/principale.dart

class GuestBook extends StatefulWidget {
  // Modify the following line:
  const GuestBook({super.key, required this.addMessage, required this.messages,});
  final FutureOr<void> Function(String message) addMessage;
  final List<GuestBookMessage> messages; // new

  @override
  _GuestBookState createState() => _GuestBookState();
}
  1. In _GuestBookState , modifica il metodo di build come segue per esporre questa configurazione:

lib/principale.dart

class _GuestBookState extends State<GuestBook> {
  final _formKey = GlobalKey<FormState>(debugLabel: '_GuestBookState');
  final _controller = TextEditingController();

  @override
  // Modify from here...
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // ...to here.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: 'Leave a message',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Enter your message to continue';
                      }
                      return null;
                    },
                  ),
                ),
                const SizedBox(width: 8),
                StyledButton(
                  onPressed: () async {
                    if (_formKey.currentState!.validate()) {
                      await widget.addMessage(_controller.text);
                      _controller.clear();
                    }
                  },
                  child: Row(
                    children: const [
                      Icon(Icons.send),
                      SizedBox(width: 4),
                      Text('SEND'),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        // Modify from here...
        const SizedBox(height: 8),
        for (var message in widget.messages)
          Paragraph('${message.name}: ${message.message}'),
        const SizedBox(height: 8),
      ],
      // ...to here.
    );
  }
}

Racchiudi il contenuto precedente del metodo build() con un widget Column e quindi aggiungi una raccolta alla coda dei figli di Column per generare un nuovo Paragraph per ogni messaggio nell'elenco dei messaggi.

  1. Aggiorna il corpo della HomePage per costruire correttamente il GuestBook con il nuovo parametro dei messages :

lib/principale.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (appState.loggedIn) ...[
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages, // new
        ),
      ],
    ],
  ),
),

Testare la sincronizzazione dei messaggi

Firestore sincronizza automaticamente e istantaneamente i dati con i clienti iscritti al database.

Prova la sincronizzazione dei messaggi:

  1. Nell'app, trova i messaggi che hai creato in precedenza nel database.
  2. Scrivi nuovi messaggi. Appaiono all'istante.
  3. Apri il tuo spazio di lavoro in più finestre o schede. I messaggi si sincronizzano in tempo reale attraverso le finestre e le schede.
  4. Facoltativo: nel menu Database della console Firebase, elimina, modifica o aggiungi manualmente nuovi messaggi. Tutte le modifiche vengono visualizzate nell'interfaccia utente.

Congratulazioni! Leggi i documenti Firestore nella tua app!

Anteprima dell'app

8. Impostare regole di sicurezza di base

Inizialmente hai configurato Firestore per utilizzare la modalità test, il che significa che il tuo database è aperto per letture e scritture. Tuttavia, dovresti utilizzare la modalità test solo durante le prime fasi di sviluppo. Come best practice, dovresti impostare regole di sicurezza per il tuo database mentre sviluppi la tua app. La sicurezza è parte integrante della struttura e del comportamento della tua app.

Le regole di sicurezza di Firebase ti consentono di controllare l'accesso a documenti e raccolte nel tuo database. La sintassi flessibile delle regole consente di creare regole che corrispondono a qualsiasi cosa, da tutte le scritture sull'intero database alle operazioni su un documento specifico.

Imposta regole di sicurezza di base:

  1. Nel menu Sviluppo della console Firebase, fai clic su Database > Regole . Dovresti vedere le seguenti regole di sicurezza predefinite e un avviso che indica che le regole sono pubbliche:

7767a2d2e64e7275.png

  1. Identifica le raccolte in cui l'app scrive i dati:

In match /databases/{database}/documents , identifica la raccolta che desideri proteggere:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Poiché hai utilizzato l'UID di autenticazione come campo in ogni documento del guestbook, puoi ottenere l'UID di autenticazione e verificare che chiunque tenti di scrivere sul documento abbia un UID di autenticazione corrispondente.

  1. Aggiungi le regole di lettura e scrittura al tuo set di regole:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

Ora solo gli utenti che hanno effettuato l'accesso possono leggere i messaggi nel libro degli ospiti, ma solo l'autore di un messaggio può modificare un messaggio.

  1. Aggiungere la convalida dei dati per garantire che tutti i campi previsti siano presenti nel documento:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow write:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

9. Passaggio bonus: pratica ciò che hai imparato

Registra lo stato RSVP di un partecipante

Al momento, la tua app consente alle persone di chattare solo quando sono interessate all'evento. Inoltre, l'unico modo per sapere se qualcuno sta arrivando è quando lo dice nella chat.

In questa fase, ti organizzi e fai sapere alla gente quante persone stanno arrivando. Aggiungi un paio di funzionalità allo stato dell'app. La prima è la possibilità per un utente che ha effettuato l'accesso di indicare se parteciperà. Il secondo è un contatore di quante persone stanno partecipando.

  1. Nel file lib/main.dart , aggiungi le seguenti righe alla sezione delle funzioni di accesso in modo che il codice dell'interfaccia utente possa interagire con questo stato:

lib/principale.dart

int _attendees = 0;
int get attendees => _attendees;

Attending _attending = Attending.unknown;
StreamSubscription<DocumentSnapshot>? _attendingSubscription;
Attending get attending => _attending;
set attending(Attending attending) {
  final userDoc = FirebaseFirestore.instance
      .collection('attendees')
      .doc(FirebaseAuth.instance.currentUser!.uid);
  if (attending == Attending.yes) {
    userDoc.set(<String, dynamic>{'attending': true});
  } else {
    userDoc.set(<String, dynamic>{'attending': false});
  }
}
  1. Aggiorna il metodo init() di ApplicationState come segue:

lib/principale.dart

  Future<void> init() async {
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform);

    FirebaseUIAuth.configureProviders([
      EmailAuthProvider(),
    ]);

    // Add from here...
    FirebaseFirestore.instance
        .collection('attendees')
        .where('attending', isEqualTo: true)
        .snapshots()
        .listen((snapshot) {
      _attendees = snapshot.docs.length;
      notifyListeners();
    });
    // ...to here.

    FirebaseAuth.instance.userChanges().listen((user) {
      if (user != null) {
        _loginState = ApplicationLoginState.loggedIn;
        _guestBookSubscription = FirebaseFirestore.instance
            .collection('guestbook')
            .orderBy('timestamp', descending: true)
            .snapshots()
            .listen((snapshot) {
          _guestBookMessages = [];
          for (final document in snapshot.docs) {
            _guestBookMessages.add(
              GuestBookMessage(
                name: document.data()['name'] as String,
                message: document.data()['text'] as String,
              ),
            );
          }
          notifyListeners();
        });
        // Add from here...
        _attendingSubscription = FirebaseFirestore.instance
            .collection('attendees')
            .doc(user.uid)
            .snapshots()
            .listen((snapshot) {
          if (snapshot.data() != null) {
            if (snapshot.data()!['attending'] as bool) {
              _attending = Attending.yes;
            } else {
              _attending = Attending.no;
            }
          } else {
            _attending = Attending.unknown;
          }
          notifyListeners();
        });
        // ...to here.
      } else {
        _loginState = ApplicationLoginState.loggedOut;
        _guestBookMessages = [];
        _guestBookSubscription?.cancel();
        _attendingSubscription?.cancel(); // new
      }
      notifyListeners();
    });
  }

Questo codice aggiunge una query sempre sottoscritta per determinare il numero di partecipanti e una seconda query che è attiva solo mentre un utente è connesso per determinare se l'utente sta partecipando.

  1. Aggiungi la seguente enumerazione dopo la dichiarazione GuestBookMessage :

lib/principale.dart

enum Attending { yes, no, unknown }
  1. Definisci un nuovo widget che si comporti come i vecchi pulsanti di opzione:

lib/principale.dart

class YesNoSelection extends StatelessWidget {
  const YesNoSelection(
      {super.key, required this.state, required this.onSelection});
  final Attending state;
  final void Function(Attending selection) onSelection;

  @override
  Widget build(BuildContext context) {
    switch (state) {
      case Attending.yes:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      case Attending.no:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              TextButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              ElevatedButton(
                style: ElevatedButton.styleFrom(elevation: 0),
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
      default:
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              StyledButton(
                onPressed: () => onSelection(Attending.yes),
                child: const Text('YES'),
              ),
              const SizedBox(width: 8),
              StyledButton(
                onPressed: () => onSelection(Attending.no),
                child: const Text('NO'),
              ),
            ],
          ),
        );
    }
  }
}

Inizia in uno stato indeterminato con né No selezionati. Una volta che l'utente seleziona se sta partecipando, mostri quell'opzione evidenziata con un pulsante pieno e l'altra opzione si allontana con un rendering piatto.

  1. Aggiorna il metodo build() di HomePage per sfruttare YesNoSelection , consentire a un utente che ha effettuato l'accesso di indicare se sta partecipando e visualizzare il numero di partecipanti all'evento:

lib/principale.dart

Consumer<ApplicationState>(
  builder: (context, appState, _) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Add from here...
      if (appState.attendees >= 2)
        Paragraph('${appState.attendees} people going')
      else if (appState.attendees == 1)
        const Paragraph('1 person going')
      else
        const Paragraph('No one going'),
      // ...to here.
      if (appState.loggedIn) ...[
        // Add from here...
        YesNoSelection(
          state: appState.attending,
          onSelection: (attending) => appState.attending = attending,
        ),
        // ...to here.
        const Header('Discussion'),
        GuestBook(
          addMessage: (message) =>
              appState.addMessageToGuestBook(message),
          messages: appState.guestBookMessages,
        ),
      ],
    ],
  ),
),

Aggiungi regole

Hai già impostato alcune regole, quindi i dati che aggiungi con i pulsanti verranno rifiutati. È necessario aggiornare le regole per consentire aggiunte alla raccolta dei attendees .

  1. Nella raccolta dei attendees , prendi l'UID di autenticazione che hai utilizzato come nome del documento e verifica che l' uid del mittente sia lo stesso del documento che sta scrivendo:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Ciò consente a tutti di leggere l'elenco dei partecipanti perché non ci sono dati privati, ma solo il creatore può aggiornarlo.

  1. Aggiungere la convalida dei dati per garantire che tutti i campi previsti siano presenti nel documento:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}
  1. Facoltativo: nell'app, fai clic sui pulsanti per visualizzare i risultati nella dashboard di Firestore nella console di Firebase.

Anteprima dell'app

10. Congratulazioni!

Hai utilizzato Firebase per creare un'app Web interattiva in tempo reale!

Scopri di più