Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Impara a conoscere Firebase per il Web

In questo codelab imparerai alcune delle basi di Firebase per creare applicazioni web interattive. Costruirai e distribuirai un'app di chat per il libro degli ospiti e RSVP per eventi utilizzando diversi prodotti Firebase.

59abdefbcc23bbbe.png

Cosa imparerai

  • Autentica gli utenti con Firebase Authentication e FirebaseUI.
  • Sincronizza i dati utilizzando Cloud Firestore.
  • Scrivi le regole di sicurezza Firebase per proteggere un database.
  • Distribuisci un'app Web su Firebase Hosting.

Di cosa avrai bisogno

  • Un browser a tua scelta, come Chrome.
  • Accesso a stackblitz.com (non è necessario alcun account o accesso).
  • Un account Google, come un account Gmail. Ti consigliamo l'account di posta elettronica che già utilizzi per il tuo account GitHub. Ciò ti consente di utilizzare funzionalità avanzate in StackBlitz.
  • Il codice di esempio del codelab. Vedere il passaggio successivo per come ottenere il codice.

In questo codelab, crei e distribuisci un'app utilizzando StackBlitz , un editor online in cui sono integrati diversi flussi di lavoro Firebase. Stackblitz non richiede l'installazione di software o un account StackBlitz speciale.

StackBlitz ti consente di condividere progetti con altri. Altre persone che hanno l'URL del tuo progetto StackBlitz possono vedere il tuo codice e fare il fork del tuo progetto, ma non possono modificare il tuo progetto StackBlitz.

  1. Vai a questo URL per il codice di partenza: https://stackblitz.com/edit/firebase-gtk-web-start
  2. Nella parte superiore della pagina StackBlitz, fai clic su Fork : f5135360aef481cc.png

Ora hai una copia del codice di partenza come tuo progetto StackBlitz. Poiché non hai effettuato l'accesso, il tuo account si chiama @anonymous , ma il progetto ha un nome univoco, insieme a un URL univoco. Tutti i file e le modifiche vengono salvati in questo progetto StackBlitz.

I materiali di partenza per questo codelab forniscono una struttura per l'app Web, inclusi alcuni fogli di stile e un paio di contenitori HTML per l'app. Più avanti in questo codelab, collegherai questi contenitori a Firebase.

Per iniziare, acquisiamo familiarità con l'interfaccia StackBlitz.

  1. In StackBlitz, apri il file index.html .
  2. Individua event-details-container e event-details-container description-container e prova a modificare alcuni dettagli dell'evento.

Mentre modifichi il testo, il ricaricamento automatico della pagina in StackBlitz mostra i nuovi dettagli dell'evento. Fantastico, vero?

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>



<!-- ... -->

L'anteprima della tua app dovrebbe essere simile a questa:

Anteprima dell'app

908cc57ce3a5b5fe.png

Visualizzare le informazioni sugli eventi è ottimo per i tuoi ospiti, ma mostrare solo gli eventi non è molto utile per nessuno. Aggiungiamo alcune funzionalità dinamiche a questa app. Per questo, dovrai collegare Firebase alla tua app. Per iniziare con Firebase, dovrai creare e configurare un progetto Firebase.

Crea un progetto Firebase

  1. Accedi a Firebase .
  2. Nella console Firebase, fai clic su Aggiungi progetto (o Crea un progetto ) e assegna un nome al tuo progetto Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Fare clic sulle opzioni di creazione del progetto. Accetta i termini di Firebase se richiesto. Salta la configurazione di Google Analytics, perché non utilizzerai Analytics per questa app.

Per ulteriori informazioni sui progetti Firebase, vedi Informazioni sui progetti Firebase .

L'app che stai creando utilizza diversi prodotti Firebase disponibili per le app web:

  • Firebase Authentication e Firebase UI per consentire facilmente ai tuoi utenti di accedere alla tua app.
  • Cloud Firestore per salvare i dati strutturati sul cloud e ricevere una notifica immediata quando i dati cambiano.
  • Regole di sicurezza Firebase per proteggere il tuo database.
  • Firebase Hosting per ospitare e servire le tue risorse.

Alcuni di questi prodotti richiedono una configurazione speciale o devono essere abilitati utilizzando la console Firebase.

Abilita l'accesso e-mail per Firebase Authentication

Per consentire agli utenti di accedere all'app Web, utilizzerai il metodo di accesso tramite e- mail / password per questo codelab:

  1. Nella console Firebase, fai clic su Sviluppo nel pannello di sinistra.
  2. Fare clic su Autenticazione , quindi sulla scheda Metodo di accesso (o fare clic qui per passare direttamente alla scheda Metodo di accesso ).
  3. Fare clic su E-mail / Password nell'elenco Provider di accesso , impostare l' opzione Abilita sulla posizione On, quindi fare clic su Salva . 4c88427cfd869bee.png

Abilita Cloud Firestore

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

Abilita Cloud Firestore:

  1. Nella sezione Sviluppo della console Firebase, fai clic su Database .
  2. In Cloud Firestore , fai clic su Crea database . 3ce19fd6467e51c5.png
  1. Seleziona l'opzione Avvia in modalità test . Leggi il disclaimer sulle regole di sicurezza. La modalità test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Fare clic su Avanti . 56369cebb9300eb.png
  1. Seleziona la posizione per il tuo database (puoi semplicemente usare l'impostazione predefinita). Tieni presente che questa posizione non può essere modificata in seguito. 32f815f4648c3174.png
  2. Fare clic su Fine .

Ora che hai creato il tuo progetto Firebase e alcuni servizi abilitati, devi dire al codice che desideri utilizzare Firebase, nonché quale progetto Firebase utilizzare.

Aggiungi le librerie Firebase

Affinché la tua app utilizzi Firebase, devi aggiungere le librerie Firebase all'app. Esistono diversi modi per farlo, come descritto nella documentazione di Firebase . Ad esempio, puoi aggiungere le librerie dal CDN di Google oppure installarle localmente utilizzando npm e quindi inserirle nella tua app se utilizzi Browserify.

StackBlitz fornisce il raggruppamento automatico, quindi puoi aggiungere le librerie Firebase utilizzando le istruzioni di importazione.

Per creare questa app, utilizzi le librerie Firebase Authentication, FirebaseUI e Cloud Firestore. Per questo codelab, le seguenti righe sono già incluse all'inizio del file index.js :

// Import stylesheets
import "./style.css";

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

Aggiungi un'app web Firebase al progetto

  1. Di nuovo nella console Firebase, vai alla pagina della panoramica del tuo progetto facendo clic su Panoramica del progetto in alto a sinistra.
  2. Al centro della pagina della panoramica del progetto, fai clic sull'icona web b286f3d215e1f578.png per creare una nuova app web Firebase. c167e9526fad2825.png
  3. Registra l'app con il nickname Web App .
  4. Per questo codelab, non selezionare la casella accanto a Configura anche Firebase Hosting per questa app . Per ora utilizzerai il riquadro di anteprima di StackBlitz.
  5. Fare clic su Registra app . c85ac8aa351e2560.png
  6. Copia l'oggetto di configurazione Firebase negli appunti. ed1e598c6132f734.png
  7. Fare clic su Continua nella console .

Aggiungi l'oggetto di configurazione Firebase alla tua app:

  1. Di nuovo in StackBlitz, vai al file index.js .
  2. Individua la riga di commento Add Firebase project configuration object here e incolla lo snippet di configurazione appena sotto il commento.
  3. Aggiungi la chiamata alla funzione initializeApp per configurare Firebase utilizzando la configurazione unica del tuo progetto Firebase.
// ...

// Add Firebase project configuration object here
var firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Ora che hai aggiunto Firebase all'app, puoi impostare un pulsante RSVP che registra le persone che utilizzano Firebase Authentication .

Autentica i tuoi utenti con Accesso e-mail e FirebaseUI

Avrai bisogno di un pulsante RSVP che richieda all'utente di accedere con il proprio indirizzo email. Puoi farlo collegando FirebaseUI a un pulsante RSVP. FirebaseUI è una libreria che ti offre un'interfaccia utente predefinita su Firebase Auth.

FirebaseUI richiede una configurazione (vedi le opzioni nella documentazione ) che fa due cose:

  1. Indica a FirebaseUI che desideri utilizzare il metodo di accesso tramite e- mail / password .
  2. Gestisce la richiamata per un accesso riuscito e restituisce false per evitare un reindirizzamento. Non vuoi che la pagina si aggiorni, perché stai creando un'app Web a pagina singola.

Innanzitutto, aggiungi il codice per inizializzare FirebaseUI:

  1. In StackBlitz, vai al file index.js . Si noti che la configurazione FirebaseUI è già fornita.
  2. Nella parte inferiore di index.js, aggiungi l'istruzione di inizializzazione FirebaseUI, in questo modo:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Successivamente, aggiungi un pulsante RSVP all'HTML:

  1. In StackBlitz, vai al file index.html .
  2. Aggiungi l'HTML per un pulsante RSVP all'interno del event-details-container come mostrato nell'esempio seguente.

Fare attenzione a utilizzare gli stessi valori id come mostrato di seguito perché, per questo codelab, ci sono già hook per questi ID specifici nel file index.js .

Tieni presente che nel file index.html presente un contenitore con l'ID firebaseui-auth-container . Questo è l'ID che passerai a FirebaseUI per mantenere i tuoi dati di accesso.

<!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->

Anteprima dell'app

ab9ad7d61bb7b28c.png

  1. Imposta un listener sul pulsante RSVP e chiama la funzione di avvio di FirebaseUI. Questo dice a FirebaseUI che vuoi vedere la finestra di accesso. Aggiungi il codice seguente in fondo a index.js :
// ... 
// At the bottom

// Listen to RSVP button clicks
startRsvpButton.addEventListener("click",
 () => {
      ui.start("#firebaseui-auth-container", uiConfig);
});

Prova ad accedere all'app

  1. Nella finestra di anteprima di StackBlitz, fai clic sul pulsante RSVP per accedere all'app.
  • Per questo codelab, puoi utilizzare qualsiasi indirizzo e-mail, anche un indirizzo e-mail falso, poiché non stai configurando un passaggio di verifica e-mail per questo codelab.
  • Se viene visualizzato un messaggio di errore che indica che l' auth/operation-not-allowed o The given sign-in provider is disabled for this Firebase project , assicurati di aver abilitato Email / Password come provider di accesso nella console Firebase.
  1. Vai alla dashboard di autenticazione nella console Firebase. Nella scheda Utenti , dovresti vedere le informazioni sull'account che hai inserito per accedere all'app.

Anteprima dell'app

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Aggiungi lo stato di autenticazione all'interfaccia utente

Ora assicurati che l'interfaccia utente rifletta il fatto che hai effettuato l'accesso.

Utilizzerai il callback del listener di stato di Firebase Authentication, che riceve una notifica ogni volta che lo stato di accesso dell'utente cambia. Se è attualmente presente un utente, cambierai il pulsante RSVP in un pulsante di disconnessione.

  1. In StackBlitz, vai al file index.js .
  2. Aggiungi il seguente codice in fondo:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. Nel listener dei pulsanti, controlla se è presente un utente corrente e disconnettilo. A tale scopo, sostituire l'attuale startRsvpButton.addEventListener con il seguente:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Ora il pulsante dovrebbe mostrare LOGOUT e tornare a RSVP quando viene cliccato.

Anteprima dell'app

4c540450924f1607.png

Sapere che gli utenti stanno arrivando è fantastico, ma diamo agli ospiti qualcos'altro da fare nell'app. E se potessero lasciare messaggi in un guestbook? 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, utilizzerai Cloud Firestore .

Modello di dati

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

b447950f9f993789.png

Aggiungi messaggi a Firestore

In questa sezione, aggiungerai la funzionalità per consentire agli utenti di scrivere nuovi messaggi nel database. Innanzitutto, aggiungi l'HTML per gli elementi dell'interfaccia utente (campo del messaggio e pulsante di invio), quindi aggiungi il codice che collega questi elementi al database.

Per aggiungere gli elementi dell'interfaccia utente di un campo messaggio e un pulsante di invio, eseguire le operazioni seguenti:

  1. In StackBlitz, vai al file index.html .
  2. Individua il guestbook-container del guestbook-container e aggiungi il seguente HTML per creare un modulo con il campo di input del messaggio e il pulsante di invio.
<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

Anteprima dell'app

4a892284443cf73d.png

Un utente che fa clic sul pulsante INVIA attiverà lo snippet di codice riportato di seguito. Aggiunge il contenuto del campo di immissione del guestbook raccolta del guestbook degli guestbook del database. In particolare, il metodo add aggiunge il contenuto del messaggio a un nuovo documento (con un ID generato automaticamente) alla raccolta del guestbook degli guestbook .

  1. In StackBlitz, vai al file index.js .
  2. In fondo al file, aggiungi il codice seguente.

Tieni presente che firebase.auth().currentUser.uid è un riferimento all'ID univoco generato automaticamente che Firebase Authentication fornisce a tutti gli utenti che hanno effettuato l'accesso.

// ..
// Listen to the form submission
form.addEventListener("submit", (e) => {
 // Prevent the default form redirect
 e.preventDefault();
 // Write a new message to the database collection "guestbook"
 firebase.firestore().collection("guestbook").add({
   text: input.value,
   timestamp: Date.now(),
   name: firebase.auth().currentUser.displayName,
   userId: firebase.auth().currentUser.uid
 })
 // clear message input field
 input.value = ""; 
 // Return false to avoid redirect
 return false;
});

Mostra il libro degli ospiti solo agli utenti registrati

Non vuoi che qualcuno veda la chat degli ospiti. Una cosa che puoi fare per proteggere la chat è consentire solo agli utenti registrati di visualizzare il libro degli ospiti. Detto questo, per le tue app, ti consigliamo di proteggere anche il tuo database con le regole di sicurezza di Firebase . (Ci sono ulteriori informazioni sulle regole di sicurezza più avanti nel codelab.)

  1. In StackBlitz, vai al file index.js .
  2. Modifica il listener onAuthStateChanged per nascondere e mostrare il guestbook.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
 if (user){
   startRsvpButton.textContent = "LOGOUT";
   // Show guestbook to logged-in users
   guestbookContainer.style.display = "block";
 }
 else{
   startRsvpButton.textContent = "RSVP";
   // Hide guestbook for non-logged-in users
   guestbookContainer.style.display = "none";
 }
});

Prova l'invio di messaggi

  1. Assicurati di aver effettuato l'accesso all'app.
  2. Immettere un messaggio come "Ehi, ecco!", Quindi fare clic su INVIA .

Questa azione scrive il messaggio nel tuo database Cloud Firestore. Tuttavia, non vedrai ancora il messaggio nella tua app Web effettiva perché devi ancora implementare il recupero dei dati. Lo farai dopo.

Ma puoi vedere il messaggio appena aggiunto nella console Firebase.

Nella console Firebase, nella dashboard del database , dovresti vedere la raccolta del guestbook degli guestbook con il tuo messaggio appena aggiunto. Se continui a inviare messaggi, la tua raccolta di libri degli ospiti conterrà molti documenti, come questo:

Console Firebase

713870af0b3b63c.png

Sincronizza i messaggi

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

Per visualizzare i messaggi, dovrai aggiungere listener che si attivano quando i dati cambiano e quindi creare un elemento dell'interfaccia utente che mostri i nuovi messaggi.

Aggiungerai il codice che ascolta i messaggi appena aggiunti dall'app. Innanzitutto, aggiungi una sezione nell'HTML per mostrare i messaggi:

  1. In StackBlitz, vai al file index.html .
  2. Nel guestbook-container , aggiungi una nuova sezione con l'ID del guestbook degli guestbook .
<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

Quindi, registra il listener che ascolta le modifiche apportate ai dati:

  1. In StackBlitz, vai al file index.js .
  2. In fondo al file, aggiungi il seguente codice per scorrere tutti i documenti (messaggi del libro degli ospiti) nel database:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((snaps) => {
 // Reset page
 guestbook.innerHTML = "";
 // Loop through documents in database
 snaps.forEach((doc) => {
   // Create an HTML entry for each document and add it to the chat
   const entry = document.createElement("p");
   entry.textContent = doc.data().name + ": " + doc.data().text;
   guestbook.appendChild(entry);
 });
});

Per ascoltare i messaggi nel database, creare una query su una raccolta specifica utilizzando la funzione .collection . Il codice sopra ascolta le modifiche nella raccolta del guestbook degli guestbook , che è dove sono archiviati i messaggi di chat. I messaggi sono anche ordinati per data, utilizzando .orderBy('timestamp', 'desc') per visualizzare i messaggi più recenti in alto.

La funzione .onSnapshot accetta un parametro: una funzione di callback. La funzione di callback viene attivata quando vengono apportate modifiche ai documenti che corrispondono alla query. Questo potrebbe essere se un messaggio viene eliminato, modificato o aggiunto. Per ulteriori informazioni, consulta la documentazione di Cloud Firestore .

Prova la sincronizzazione dei messaggi

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

  1. I messaggi che hai creato in precedenza nel database dovrebbero essere visualizzati nell'app. Sentiti libero di scrivere nuovi messaggi; dovrebbero apparire immediatamente.
  2. Se apri il tuo spazio di lavoro in più finestre o schede, i messaggi verranno sincronizzati in tempo reale tra le schede.
  3. (Facoltativo) Puoi provare a eliminare, modificare o aggiungere manualmente nuovi messaggi direttamente nella sezione Database della console Firebase; eventuali modifiche dovrebbero essere visualizzate nell'interfaccia utente.

Congratulazioni! Stai leggendo documenti Cloud Firestore nella tua app!

Revisione dell'app p

e30df0a9614bae7d.png

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

Le regole di sicurezza 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.

Puoi scrivere regole di sicurezza per Cloud Firestore nella console Firebase:

  1. Nella sezione Sviluppo della console Firebase, fai clic su Database , quindi seleziona la scheda Regole (o fai clic qui per andare direttamente alla scheda Regole ).
  2. Dovresti vedere le seguenti regole di sicurezza predefinite, insieme a un avviso sulle regole che sono pubbliche.

7767a2d2e64e7275.png

Identifica le collezioni

Innanzitutto, 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.
  }
}

Aggiungi regole di sicurezza

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

Aggiungi le regole di lettura e scrittura al tuo set di regole come mostrato di seguito:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

Ora, per il libro degli ospiti, solo gli utenti registrati possono leggere i messaggi (qualsiasi messaggio!), Ma puoi creare un messaggio solo utilizzando il tuo ID utente. Inoltre, non consentiamo la modifica o l'eliminazione dei messaggi.

Aggiungi regole di convalida

Aggiungi la convalida dei dati per assicurarti 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 create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

Reimposta ascoltatori

Poiché la tua app ora consente solo agli utenti autenticati di accedere, dovresti spostare la query firestore del guestbook all'interno del listener di autenticazione. In caso contrario, si verificheranno errori di autorizzazione e l'app verrà disconnessa quando l'utente si disconnette.

  1. onSnapshot raccolta del libro degli ospiti su onSnapshot listener in una nuova funzione chiamata subscribeGuestbook . Inoltre, assegna i risultati della funzione onSnapshot alla variabile guestbookListener .

Il listener di Firestore onSnapshot restituisce una funzione di annullamento onSnapshot che potrai utilizzare per annullare il listener di snapshot in un secondo momento.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((snaps) => {
   // Reset page
   guestbook.innerHTML = "";
   // Loop through documents in database
   snaps.forEach((doc) => {
     // Create an HTML entry for each document and add it to the chat
     const entry = document.createElement("p");
     entry.textContent = doc.data().name + ": " + doc.data().text;
     guestbook.appendChild(entry);
   });
 });
};
  1. Aggiungi una nuova funzione sotto chiamata unsubscribeGuestbook . Controlla se la variabile guestbookListener non è nulla, quindi chiama la funzione per annullare il listener.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Infine, aggiungi le nuove funzioni al callback onAuthStateChanged (usa i due passaggi seguenti).
  2. Aggiungi subscribeGuestbook() in fondo a if (user) .
  3. Aggiungi unsubscribeGuestbook() in fondo all'istruzione else .
// ...
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
}
});

Firebase offre un servizio di hosting per servire le risorse della tua app web. Puoi distribuire i file e la configurazione di hosting su Firebase Hosting utilizzando l'interfaccia della riga di comando (CLI) di Firebase. Ma per questo codelab, stai usando StackBlitz , che ha integrato la Firebase CLI nel suo spazio di lavoro!

Puoi utilizzare l'integrazione Firebase di StackBlitz per indicare a StackBlitz in quale progetto Firebase desideri distribuire le risorse:

  1. Se non hai già effettuato l'accesso con GitHub in StackBlitz, fai clic su Accedi in alto a destra, quindi inserisci le credenziali del tuo account GitHub.

99a41778bb3c194c.png

  • Se hai già un account GitHub, accedi utilizzando il tuo account GitHub.
  • Se non disponi già di un account GitHub, crea un account GitHub utilizzando lo stesso indirizzo email che hai utilizzato per accedere a Firebase.
  1. Ora dovrebbe esserci un'icona Firebase nel pannello di sinistra.

2981c2e3ad13c2c1.png 3. Fare clic su Accedi a Google . Accedi utilizzando lo stesso indirizzo email che hai utilizzato per accedere a Firebase. 4. Dall'elenco dei progetti Firebase, seleziona il tuo progetto Firebase-Web-Codelab .

La distribuzione su Firebase Hosting con StackBlitz è letteralmente un'operazione con un clic:

  1. Nell'area di lavoro StackBlitz, fai clic su Distribuisci sul lato sinistro della pagina. Sì, è così. Un passo! 8fe6c0bfc04c8935.png

Visita la documentazione per saperne di più su come funziona Firebase Hosting .

Vai alla sezione Hosting della console Firebase del tuo progetto per visualizzare utili informazioni e strumenti di hosting, inclusa la cronologia delle distribuzioni, la funzionalità per ripristinare le versioni precedenti della tua app e il flusso di lavoro per impostare un dominio personalizzato.

Registra lo stato RSVP di un partecipante

In questo momento, la tua app consente alle persone di iniziare a chattare se sono interessate all'evento. Inoltre, l'unico modo per sapere se qualcuno sta arrivando è se lo pubblica nella chat. Organizziamoci e facciamo sapere alla gente quante persone stanno arrivando.

Aggiungerai un interruttore per registrare le persone che vogliono partecipare all'evento, quindi raccogli il conteggio di quante persone stanno arrivando.

  1. In StackBlitz, vai al file index.html .
  2. Nel guestbook-container , aggiungi una serie di pulsanti e NO , in questo modo:
<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

Anteprima dell'app

73ca99ca35c13ee7.png

Quindi, registra l'ascoltatore per i clic sui pulsanti. Se l'utente fa clic su , utilizza il proprio UID di autenticazione per salvare la risposta nel database.

  1. In StackBlitz, vai al file index.js .
  2. In fondo al file, aggiungi il seguente codice per ascoltare lo stato RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Crea una nuova raccolta chiamata attendees , quindi registra un riferimento al documento se viene fatto clic su uno dei pulsanti RSVP.
  2. Imposta quel riferimento su true o false seconda del pulsante selezionato.

Primo, per rsvpYes :

// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

Quindi, lo stesso per rsvpNo , ma con il valore false :

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

Aggiungi regole

Poiché hai già impostato alcune regole, i nuovi dati che stai aggiungendo con i pulsanti verranno rifiutati. Dovrai aggiornare le regole per consentire l'aggiunta alla raccolta dei attendees .

Per la raccolta dei attendees , poiché hai utilizzato l'UID di autenticazione come nome del documento, puoi prenderlo e verificare che l' uid del mittente sia lo stesso del documento che stanno scrivendo. Consentirai a tutti di leggere l'elenco dei partecipanti (poiché non ci sono dati privati ​​lì), ma solo il creatore dovrebbe essere in grado di aggiornarlo.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}

Aggiungi regole di convalida

Aggiungi la convalida dei dati per assicurarti 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;

    }
  }
}

(Facoltativo) È ora possibile visualizzare i risultati facendo clic sui pulsanti. Vai alla dashboard di Cloud Firestore nella console Firebase.

Leggi lo stato RSVP

Ora che hai registrato le risposte, vediamo chi arriva e riflettiamo nell'interfaccia utente.

  1. In StackBlitz, vai al file index.html .
  2. In description-container , aggiungi un nuovo elemento con l'ID del number-attending .
<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

Quindi, registra l'ascoltatore per la raccolta dei attendees e conta il numero di risposte :

  1. In StackBlitz, vai al file index.js .
  2. In fondo al file, aggiungi il seguente codice per ascoltare lo stato RSVP e contare i clic .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Infine, evidenziamo il pulsante corrispondente allo stato corrente. Controlla se l'UID di autenticazione corrente ha una voce nella raccolta dei attendees , quindi imposta la classe su cui fare clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((doc) => {
   if (doc && doc.data()){
     const attendingResponse = doc.data().attending;

     // Update css classes for buttons
     if (attendingResponse){
       rsvpYes.className="clicked";
       rsvpNo.className="";
     }
     else{
       rsvpYes.className="";
       rsvpNo.className="clicked";
     }
   }
 });
}
  1. Inoltre, creiamo una funzione per annullare l'iscrizione. Questo verrà utilizzato quando l'utente si disconnette.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Chiama le funzioni dal listener di autenticazione.
// ...

// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  subscribeCurrentRSVP(user);
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
  // Unsubscribe from the guestbook collection
  unsubscribeCurrentRSVP();

}
});
  1. Prova ad accedere come più utenti e osserva il conteggio aumentare ogni volta che fai clic sul pulsante .

Anteprima dell'app

3df607d3e0b3c35.png

Hai utilizzato Firebase per creare un'applicazione web interattiva e in tempo reale!

Cosa abbiamo trattato

  • Autenticazione Firebase
  • FirebaseUI
  • Cloud Firestore
  • Regole di sicurezza Firebase
  • Hosting Firebase

Prossimi passi

Per saperne di più

Com'è andata?

Ci piacerebbe il tuo feedback! Si prega di compilare un modulo (molto) breve qui .