Codelab web Firebase

In questo codelab, si apprenderà come utilizzare Firebase di creare facilmente applicazioni web mediante l'attuazione e la distribuzione di un client di chat utilizzando Firebase prodotti e servizi.

3b1284f5144b54f6.png

Cosa imparerai

  • Sincronizza i dati utilizzando Cloud Firestore e Cloud Storage per Firebase.
  • Autentica i tuoi utenti utilizzando l'autenticazione Firebase.
  • Distribuisci la tua app web su Firebase Hosting.
  • Invia notifiche con Firebase Cloud Messaging.
  • Raccogli i dati sulle prestazioni della tua app web.

Di cosa avrai bisogno

  • L'IDE / editor di testo di vostra scelta, come ad esempio WebStorm , Atomo , Sublime , o codice VS
  • Il gestore di pacchetti npm , che viene tipicamente con Node.js
  • Un terminale/console
  • Un browser a tua scelta, come Chrome
  • Il codice di esempio del codelab (consulta il passaggio successivo del codelab per informazioni su come ottenere il codice).

Clonare del codelab repository GitHub dalla riga di comando:

git clone https://github.com/firebase/codelab-friendlychat-web

In alternativa, se non si dispone di git installato, è possibile scaricare l'archivio come file ZIP .

Importa l'app di partenza

Utilizzando l'IDE, aprire o importare il 📁 web-start directory dal repository clonato. Questo 📁 web-start directory contiene il codice di partenza per la codelab, che sarà una chat web app completamente funzionale.

Crea un progetto Firebase

  1. Accedi a Firebase .
  2. Nella console Firebase, fare clic su Aggiungi progetto e quindi un nome al progetto FriendlyChat Firebase. Ricorda l'ID progetto per il tuo progetto Firebase.
  3. Deselezionare Abilita Google Analytics per questo progetto
  4. Fare clic su Crea progetto.

L'applicazione che andremo a creare utilizza i prodotti Firebase disponibili per le app web:

  • Firebase autenticazione per consentire facilmente agli utenti di accedere al proprio app.
  • Nuvola FireStore per salvare i dati strutturati sulla nuvola e ottenere la notifica immediata quando i dati modifiche.
  • Cloud Storage per Firebase per salvare i file nella nuvola.
  • Firebase hosting per ospitare e servire i vostri beni.
  • Firebase cloud di messaggistica per inviare notifiche push e notifiche popup del browser di visualizzazione.
  • Firebase Monitoraggio del rendimento ai dati raccogliere le prestazioni degli utenti per la tua app.

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

Aggiungi un'app Web Firebase al progetto

  1. Fare clic sull'icona web 58d6543a156e56f9.png per creare una nuova app Web Firebase.
  2. Registrare l'app con il soprannome di chiacchierata amichevole, quindi selezionare la casella accanto a anche istituito Firebase Hosting per questa applicazione. Fare clic su Registra app.
  3. Nel passaggio successivo, vedrai un oggetto di configurazione. Copiare solo l'oggetto JS (non il circostante HTML) in Firebase-config.js

Registra screenshot dell'app web

Attiva Google di accesso per l'autenticazione Firebase

Per consentire agli utenti di accedere al web app con i loro account Google, useremo il segno-in metodo di Google.

Avrai bisogno di abilitare Google di accesso:

  1. Nella console Firebase, individuare la sezione Costruire nel pannello di sinistra.
  2. Fare clic su Autenticazione, quindi fare clic sul segno-in scheda Metodo (o cliccare qui per andare direttamente lì).
  3. Abilitare l'accesso a provider di Google, quindi fare clic su Salva.
  4. Impostare il nome rivolto al pubblico della vostra applicazione per chiacchierata amichevole e scegliere un supporto e-mail progetto dal menu a discesa.
  5. Configura il tuo schermo autorizzazione OAuth in Google Cloud Console e aggiungere un logo:

d89fb3873b5d36ae.png

Abilita Cloud Firestore

L'applicazione web utilizza cloud FireStore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.

Dovrai abilitare Cloud Firestore:

  1. Nella sezione Corporatura della console Firebase, clicca Firestore Database.
  2. Fare clic su Crea database nel riquadro cloud FireStore.

729991a081e7cd5.png

  1. Selezionare l'opzione Avvia in modalità di test, quindi fare clic su Avanti dopo aver letto il disclaimer sulle regole di sicurezza.

La modalità di test garantisce la possibilità di scrivere liberamente nel database durante lo sviluppo. Renderemo il nostro database più sicuro più avanti in questo codelab.

77e4986cbeaf9dee.png

  1. Imposta la posizione in cui vengono archiviati i dati di Cloud Firestore. Puoi lasciare questo come predefinito o scegliere una regione vicino a te. Fare clic su Fine per disposizione FireStore.

9f2bb0d4e7ca49c7.png

Abilita archiviazione cloud

L'app Web utilizza Cloud Storage per Firebase per archiviare, caricare e condividere immagini.

Dovrai abilitare Cloud Storage:

  1. Nella sezione Corporatura della console Firebase, fare clic su Archiviazione.
  2. Se non c'è il pulsante Get Started, vuol dire che la memorizzazione cloud è già attivato, e non è necessario seguire le istruzioni riportate di seguito.
  3. Fare clic su Get Started.
  4. Leggi il disclaimer sulle regole di sicurezza per il vostro progetto Firebase, quindi fare clic su Avanti.

Con le regole di sicurezza predefinite, qualsiasi utente autenticato può scrivere qualsiasi cosa su Cloud Storage. Renderemo il nostro spazio di archiviazione più sicuro più avanti in questo codelab.

62f1afdcd1260127.png

  1. La posizione di Cloud Storage è preselezionata con la stessa regione che hai scelto per il tuo database Cloud Firestore. Fare clic su Fine per completare la configurazione.

1d7f49ebaddb32fc.png

L'interfaccia a riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per servire la tua app web localmente, nonché per distribuire la tua app web al tuo progetto Firebase.

  1. Installa la CLI eseguendo il seguente comando npm:
npm -g install firebase-tools
  1. Verificare che la CLI sia stata installata correttamente eseguendo il comando seguente:
firebase --version

Assicurati che la versione della CLI Firebase sia v4.1.0 o successiva.

  1. Autorizza la CLI Firebase eseguendo il comando seguente:
firebase login

Abbiamo impostato il modello di app web per estrarre la configurazione della tua app per Firebase Hosting dalla directory locale della tua app (il repository che hai clonato in precedenza nel codelab). Ma per estrarre la configurazione, dobbiamo associare la tua app al tuo progetto Firebase.

  1. Assicurarsi che la riga di comando accede locale della tua applicazione web-start directory.
  2. Associa la tua app al tuo progetto Firebase eseguendo il comando seguente:
firebase use --add
  1. Quando richiesto, selezionare l'ID del progetto, poi dare il vostro progetto Firebase un alias.

Un alias è utile se hai più ambienti (produzione, staging, ecc.). Tuttavia, per questo codelab, facciamo solo utilizzare l'alias di default .

  1. Segui le istruzioni rimanenti sulla riga di comando.

Ora che hai importato e configurato il tuo progetto, sei pronto per eseguire l'app Web per la prima volta.

  1. In una console dal web-start directory, eseguire il seguente comando CLI Firebase:
firebase serve --only hosting
  1. La tua riga di comando dovrebbe visualizzare la seguente risposta:
✔  hosting: Local server: http://localhost:5000

Stiamo usando l' Hosting Firebase emulatore per servire la nostra applicazione a livello locale. L'applicazione web dovrebbe essere disponibile da http: // localhost: 5000 . Tutti i file che si trovano sotto il public sottodirectory sono serviti.

  1. Utilizzando il browser, aprire l'applicazione a http: // localhost: 5000 .

Dovresti vedere l'interfaccia utente della tua app FriendlyChat, che non è (ancora!) funzionante:

4c23f9475228cef4.png

L'app non può fare nulla in questo momento, ma con il tuo aiuto lo farà presto! Finora abbiamo creato solo l'interfaccia utente per te.

Ora costruiamo una chat in tempo reale!

Importa l'SDK Firebase

Dobbiamo importare l'SDK Firebase nell'app. Ci sono diversi modi per fare questo, come descritto nella nostra documentazione . Ad esempio, puoi importare la libreria dal nostro CDN. Oppure puoi installarlo localmente usando npm, quindi impacchettarlo nella tua app se stai usando Browserify.

Stiamo per ottenere la Firebase SDK da NPM e utilizzare Webpack per raggruppare il nostro codice. Lo stiamo facendo in modo che Webpack possa rimuovere qualsiasi codice non necessario, mantenendo le dimensioni del nostro bundle JS ridotte per assicurarci che la nostra app si carichi il più rapidamente possibile. Per questo codelab, abbiamo già creato un web-start/package.json file che include il Firebase SDK come una dipendenza, così come importati le funzioni necessarie in cima alla web-start/src/index.js .

pacchetto.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Durante questo codelab utilizzeremo Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging e Performance Monitoring, quindi importeremo tutte le loro librerie. Nelle tue app future, assicurati di importare solo le parti di Firebase di cui hai bisogno, per ridurre il tempo di caricamento della tua app.

Installa l'SDK Firebase e avvia la build del tuo Webpack

Dobbiamo eseguire alcuni comandi per far funzionare la build della nostra app.

  1. Apri una nuova finestra di terminale
  2. Assicurarsi che si sta nel web-start directory
  3. Eseguire npm install per scaricare l'SDK Firebase
  4. Eseguire npm run start per avviare Webpack. Webpack ora ricostruirà continuamente il nostro codice di corso per il resto del codelab.

Configura Firebase

Dobbiamo anche configurare l'SDK Firebase per dirgli quale progetto Firebase stiamo utilizzando.

  1. Vai alle Impostazioni del progetto nella console Firebase
  2. Nella scheda "Le tue app", seleziona il nickname dell'app per cui hai bisogno di un oggetto di configurazione.
  3. Seleziona "Configura" dal riquadro dello snippet dell'SDK di Firebase.
  4. Copia lo snippet oggetto di configurazione, quindi aggiungerlo a web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Ora, andare al fondo di web-start/src/index.js e inizializzare Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

Il Firebase SDK dovrebbe essere pronto per l'uso dal momento che è importato e inizializzato in index.html . Stiamo andando a implementare utente di accesso con autenticazione Firebase .

Autentica i tuoi utenti con Google Sign-In

Nell'applicazione, quando un utente fa clic sul segno con il tasto Google, la signIn funzione viene attivata. (L'abbiamo già impostato per te!) Per questo codelab, vogliamo autorizzare Firebase a utilizzare Google come provider di identità. Useremo un popup, ma molti altri metodi raggiungibili da Firebase.

  1. Nel web-start directory, nella sottodirectory src/ , aperti index.js .
  2. Trova la funzione signIn .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

La signOut funzione viene attivata quando l'utente fa clic sul pulsante di Sign out.

  1. Torna al file src/index.js .
  2. Trova la funzione signOutUser .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Tieni traccia dello stato di autenticazione

Per aggiornare di conseguenza la nostra interfaccia utente, abbiamo bisogno di un modo per verificare se l'utente è connesso o disconnesso. Con Firebase Authentication, puoi registrare un osservatore sullo stato di autenticazione che verrà attivato ogni volta che lo stato di autenticazione cambia.

  1. Torna al file src/index.js .
  2. Trova la funzione initFirebaseAuth .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Il codice sopra registri la funzione authStateObserver come osservatore di stato di autenticazione. Si attiverà ogni volta che lo stato di autenticazione cambia (quando l'utente accede o si disconnette). È a questo punto che aggiorneremo l'interfaccia utente per visualizzare o nascondere il pulsante di accesso, il pulsante di disconnessione, l'immagine del profilo dell'utente che ha eseguito l'accesso e così via. Tutte queste parti dell'interfaccia utente sono già state implementate.

Visualizza le informazioni dell'utente che ha effettuato l'accesso

Vogliamo visualizzare l'immagine del profilo e il nome utente dell'utente che ha eseguito l'accesso nella barra in alto della nostra app. Nel Firebase, il sottoscritto, nei dati dell'utente è sempre disponibile nel currentUser oggetto. In precedenza, abbiamo istituito authStateObserver funzione per grilletto quando l'utente accede in modo che i nostri aggiornamenti dell'interfaccia utente di conseguenza. Si chiamerà getProfilePicUrl e getUserName quando attivato.

  1. Torna al file src/index.js .
  2. Trova le funzioni getProfilePicUrl e getUserName .
  3. Sostituisci entrambe le funzioni con il codice seguente.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Mostriamo un messaggio di errore se l'utente tenta di inviare messaggi quando l'utente non è connesso. (Puoi provarlo, però!) Quindi, dobbiamo rilevare se l'utente è effettivamente connesso.

  1. Torna al file src/index.js .
  2. Trova la funzione isUserSignedIn .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Prova l'accesso all'app

  1. Se la tua app viene ancora pubblicata, aggiorna l'app nel browser. In caso contrario, eseguire firebase serve --only hosting sulla riga di comando per iniziare a servire l'applicazione da http: // localhost: 5000 , e quindi aprirlo nel browser.
  2. Accedi all'app utilizzando il pulsante di accesso e il tuo account Google. Se viene visualizzato un messaggio di errore auth/operation-not-allowed , controllo per assicurarsi che è stata attivata Google Sign-in come un provider di autenticazione nella console Firebase.
  3. Dopo aver effettuato l'accesso, dovrebbero essere visualizzati l'immagine del profilo e il nome utente: c7401b3d44d0d78b.png

In questa sezione, scriveremo alcuni dati su Cloud Firestore in modo da poter popolare l'interfaccia utente dell'app. Questo può essere fatto manualmente con la console Firebase , ma lo faremo nella stessa app per dare prova di una base di scrittura cloud Firestore.

Modello di dati

I dati di Cloud Firestore sono suddivisi in raccolte, documenti, campi e sottoraccolte. Noi conserviamo ogni messaggio della chat come un documento in una raccolta di livello superiore chiamato messages .

688d7bc5fb662b57.png

Aggiungi messaggi a Cloud Firestore

Per memorizzare i messaggi di chat che sono scritte dagli utenti, useremo cloud Firestore .

In questa sezione, aggiungerai la funzionalità per consentire agli utenti di scrivere nuovi messaggi nel tuo database. Un utente cliccando sul tasto INVIA attiverà il frammento di codice di seguito. Si aggiunge un oggetto messaggio con il contenuto dei campi del messaggio per l'istanza cloud Firestore in messages di raccolta. L' add() metodo aggiunge un nuovo documento con un ID generato automaticamente alla raccolta.

  1. Torna al file src/index.js .
  2. Trova la funzione saveMessage .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Prova l'invio di messaggi

  1. Se la tua app viene ancora pubblicata, aggiorna l'app nel browser. In caso contrario, eseguire firebase serve --only hosting sulla riga di comando per iniziare a servire l'applicazione da http: // localhost: 5000 , e quindi aprirlo nel browser.
  2. Dopo l'accesso, inserire un messaggio del tipo "Hey there!", E fare clic su Invia. Questo scriverà il messaggio in Cloud Firestore. Tuttavia, non sarà possibile vedere ancora i dati nel vostro web app reale perché abbiamo ancora bisogno di implementare il recupero dei dati (sezione successiva del codelab).
  3. Puoi vedere il messaggio appena aggiunto nella tua console Firebase. Apri la tua console Firebase. Nella sezione Costruire clicca Firestore Database (o cliccare qui e selezionare il progetto) e si dovrebbe vedere la collezione dei messaggi con il tuo messaggio appena aggiunto:

6812efe7da395692.png

Sincronizzare i messaggi

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

Aggiungeremo il codice che ascolta i messaggi appena aggiunti dall'app. In questo codice, registreremo il listener che ascolta le modifiche apportate ai dati. Mostreremo solo gli ultimi 12 messaggi della chat per evitare di visualizzare una cronologia molto lunga al momento del caricamento.

  1. Torna al file src/index.js .
  2. Trova la funzione loadMessages .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Per ascoltare i messaggi nel database, creiamo una query su una raccolta utilizzando la collection funzione per specificare che la raccolta dei dati che vogliamo ascoltare è in. Nel codice di cui sopra, stiamo ascoltando i cambiamenti all'interno dei messages raccolta, che è dove sono archiviati i messaggi di chat. Stiamo anche l'applicazione di un limite da solo ascoltando gli ultimi 12 messaggi utilizzando .limit(12) e ordinare i messaggi per data utilizzando orderBy('timestamp', 'desc') per ottenere i 12 messaggi più nuovi.

La onSnapshot funzione prende una query come primo parametro, e una funzione di callback come secondo. La funzione di callback verrà attivata quando vengono apportate modifiche ai documenti che corrispondono alla query. Questo potrebbe essere se un messaggio viene eliminato, modificato o aggiunto. Si può leggere di più su questo nella documentazione di cloud FireStore .

Prova la sincronizzazione dei messaggi

  1. Se la tua app viene ancora pubblicata, aggiorna l'app nel browser. In caso contrario, eseguire firebase serve --only hosting sulla riga di comando per iniziare a servire l'applicazione da http: // localhost: 5000 , e quindi aprirlo nel browser.
  2. I messaggi che hai creato in precedenza nel database dovrebbero essere visualizzati nell'interfaccia di FriendlyChat (vedi sotto). Sentiti libero di scrivere nuovi messaggi; dovrebbero apparire all'istante.
  3. (Opzionale) Si può provare manualmente l'eliminazione, la modifica o l'aggiunta di nuovi messaggi direttamente nella sezione Database della console Firebase; eventuali modifiche dovrebbero riflettersi nell'interfaccia utente.

Congratulazioni! Stai leggendo documenti Cloud Firestore nella tua app!

2168dec79b573d07.png

Ora aggiungeremo una funzione che condivide le immagini.

Mentre Cloud Firestore è utile per l'archiviazione di dati strutturati, Cloud Storage è più adatto per l'archiviazione di file. Cloud Storage per Firebase è un servizio di archiviazione file / blob, e useremo per memorizzare le immagini che un utente condivide con la nostra app.

Salva le immagini su Cloud Storage

Per questo codelab, abbiamo già aggiunto per te un pulsante che attiva una finestra di dialogo di selezione file. Dopo aver selezionato un file, la saveImageMessage funzione viene chiamata, e si può ottenere un riferimento al file selezionato. La saveImageMessage funzione compie la seguente:

  1. Crea un messaggio di chat "segnaposto" nel feed della chat, in modo che gli utenti vedano un'animazione "Caricamento" mentre carichiamo l'immagine.
  2. Carica il file immagine da Cloud Storage a questo percorso: /<uid>/<messageId>/<file_name>
  3. Genera un URL leggibile pubblicamente per il file immagine.
  4. Aggiorna il messaggio di chat con l'URL del file di immagine appena caricato al posto dell'immagine di caricamento temporanea.

Ora aggiungerai la funzionalità per inviare un'immagine:

  1. Torna al file src/index.js .
  2. Trova la funzione saveImageMessage .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Prova l'invio di immagini

  1. Se la tua app viene ancora pubblicata, aggiorna l'app nel browser. In caso contrario, eseguire firebase serve --only hosting sulla riga di comando per iniziare a servire l'applicazione da http: // localhost: 5000 , e quindi aprirlo nel browser.
  2. Dopo aver effettuato l'accesso, fai clic sul pulsante di caricamento dell'immagine 13734cb66773e5a3.png e seleziona un file immagine utilizzando il selettore di file. Se siete alla ricerca di un'immagine, sentitevi liberi di utilizzare questa bella foto di una tazza di caffè .
  3. Dovrebbe apparire un nuovo messaggio nell'interfaccia utente dell'app con l'immagine selezionata: 3b1284f5144b54f6.png

Se provi ad aggiungere un'immagine mentre non sei connesso, dovresti vedere una notifica di Toast che ti dice che devi accedere per aggiungere immagini.

Ora aggiungeremo il supporto per le notifiche del browser. L'app avviserà gli utenti quando vengono pubblicati nuovi messaggi nella chat. Firebase cloud Messaging (FCM) è una soluzione di messaggistica multipiattaforma che consente di fornire in modo affidabile messaggi e le notifiche a costo zero.

Aggiungi l'addetto al servizio FCM

L'applicazione web ha bisogno di un operaio di servizio che riceverà e le notifiche di visualizzazione web.

  1. Dal web-start directory, nel src directory, aperto firebase-messaging-sw.js .
  2. Aggiungi il seguente contenuto a quel file.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

L'operatore dell'assistenza deve semplicemente caricare e inizializzare l'SDK di Firebase Cloud Messaging, che si occuperà di visualizzare le notifiche.

Ottieni i token del dispositivo FCM

Quando le notifiche sono stati abilitati su un dispositivo o browser, ti verrà dato un dispositivo token. Questo token del dispositivo è ciò che utilizziamo per inviare una notifica a un particolare dispositivo o browser particolare.

Quando l'utente segni-in, ci chiamano la saveMessagingDeviceToken funzioni. Ecco dove avremo il dispositivo FCM token dal browser e salvarlo a Cloud FireStore.

  1. Torna al file src/index.js .
  2. Trova la funzione saveMessagingDeviceToken .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

Tuttavia, questo codice non funzionerà inizialmente. Affinché la tua app possa recuperare il token del dispositivo, l'utente deve concedere all'app l'autorizzazione per visualizzare le notifiche (passaggio successivo del codelab).

Richiedi le autorizzazioni per mostrare le notifiche

Quando l'utente non ha ancora concesso alla tua app l'autorizzazione a mostrare le notifiche, non ti verrà assegnato un token del dispositivo. In questo caso, chiamiamo la firebase.messaging().requestPermission() il metodo, che consente di visualizzare una finestra del browser per chiedere questo permesso ( nel browser supportati ).

8b9d0c66dc36153d.png

  1. Torna al file src/index.js .
  2. Trova la funzione requestNotificationsPermissions .
  3. Sostituisci l'intera funzione con il seguente codice.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Ottieni il token del tuo dispositivo

  1. Se la tua app viene ancora pubblicata, aggiorna l'app nel browser. In caso contrario, eseguire firebase serve --only hosting sulla riga di comando per iniziare a servire l'applicazione da http: // localhost: 5000 , e quindi aprirlo nel browser.
  2. Dopo l'accesso, dovrebbe apparire la finestra di dialogo di autorizzazione delle notifiche: bd3454e6dbfb6723.png
  3. Fai clic su Consenti.
  4. Apri la console JavaScript del tuo browser. Si dovrebbe vedere il seguente messaggio: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Copia il token del tuo dispositivo. Ti servirà per la fase successiva del codelab.

Invia una notifica al tuo dispositivo

Ora che hai il token del tuo dispositivo, puoi inviare una notifica.

  1. Aprire la scheda di messaggistica cloud della console Firebase .
  2. Fare clic su "Nuova notifica"
  3. Inserisci un titolo e un testo di notifica.
  4. Sul lato destro dello schermo, fai clic su "invia un messaggio di prova"
  5. Inserisci il token del dispositivo che hai copiato dalla console JavaScript del tuo browser, quindi fai clic sul segno più ("+")
  6. Fare clic su "prova"

Se la tua app è in primo piano, vedrai la notifica nella console JavaScript.

Se la tua app è in background, dovrebbe apparire una notifica nel tuo browser, come in questo esempio:

de79e8638a45864c.png

Vedi regole di sicurezza del database

Nuvola Firestore utilizza uno specifico regime linguistico per definire i diritti di accesso, sicurezza e validazione dei dati.

Durante l'impostazione del progetto Firebase all'inizio di questo codelab, abbiamo scelto di utilizzare le regole di sicurezza predefinite "Modalità test" in modo da non limitare l'accesso al datastore. Nella console Firebase , nella scheda Regole della sezione database, è possibile visualizzare e modificare queste regole.

In questo momento, dovresti vedere le regole predefinite, che non limitano l'accesso al datastore. Ciò significa che qualsiasi utente può leggere e scrivere su qualsiasi raccolta nel tuo datastore.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Aggiorneremo le regole per limitare le cose utilizzando le seguenti regole:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Aggiorna le regole di sicurezza del database

Esistono due modi per modificare le regole di sicurezza del database, nella console Firebase o da un file di regole locali distribuito utilizzando la Firebase CLI.

Per aggiornare le regole di sicurezza nella console Firebase:

  1. Vai alla sezione database dal pannello di sinistra, quindi fare clic sulla scheda Regole.
  2. Sostituisci le regole predefinite che sono già nella console con le regole mostrate sopra.
  3. Fare clic su Pubblica.

Per aggiornare le regole di sicurezza da un file locale:

  1. Dal web-start directory, aperto firestore.rules .
  2. Sostituisci le regole predefinite che sono già nel file con le regole mostrate sopra.
  3. Dal web-start directory, aperto firebase.json .
  4. Aggiungere i firestore.rules attribuiscono indicando firestore.rules , come illustrato di seguito. (L' hosting attributo deve essere già nel file.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Distribuisci le regole di sicurezza utilizzando la CLI Firebase eseguendo il comando seguente:
firebase deploy --only firestore
  1. La tua riga di comando dovrebbe visualizzare la seguente risposta:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Visualizza le regole di sicurezza di Cloud Storage

Cloud Storage per Firebase utilizza uno specifico regime linguistico per definire i diritti di accesso, sicurezza e validazione dei dati.

Durante la configurazione del progetto Firebase all'inizio di questo codelab, abbiamo scelto di utilizzare la regola di sicurezza predefinita di Cloud Storage che consente solo agli utenti autenticati di utilizzare Cloud Storage. Nella console Firebase , nella scheda Regole della sezione bagagli, è possibile visualizzare e modificare le regole. Dovresti vedere la regola predefinita che consente a qualsiasi utente che ha eseguito l'accesso di leggere e scrivere qualsiasi file nel tuo bucket di archiviazione.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Aggiorneremo le regole per fare quanto segue:

  • Consenti a ciascun utente di scrivere solo nelle proprie cartelle specifiche
  • Consenti a chiunque di leggere da Cloud Storage
  • Assicurati che i file caricati siano immagini
  • Limita la dimensione delle immagini che possono essere caricate a un massimo di 5 MB

Questo può essere implementato utilizzando le seguenti regole:

regole.di.archiviazione

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Aggiorna le regole di sicurezza di Cloud Storage

Esistono due modi per modificare le regole di sicurezza dell'archiviazione: nella console Firebase o da un file di regole locali distribuito utilizzando la Firebase CLI.

Per aggiornare le regole di sicurezza nella console Firebase:

  1. Vai alla sezione di archiviazione dal pannello di sinistra, quindi fare clic sulla scheda Regole.
  2. Sostituisci la regola predefinita già presente nella console con le regole mostrate sopra.
  3. Fare clic su Pubblica.

Per aggiornare le regole di sicurezza da un file locale:

  1. Dal web-start directory, aperto storage.rules .
  2. Sostituisci le regole predefinite che sono già nel file con le regole mostrate sopra.
  3. Dal web-start directory, aperto firebase.json .
  4. Aggiungere i storage.rules attribuiscono punta al storage.rules di file, come illustrato di seguito. (L' hosting e la database attributo dovrebbe già essere nel file.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Distribuisci le regole di sicurezza utilizzando la CLI Firebase eseguendo il comando seguente:
firebase deploy --only storage
  1. La tua riga di comando dovrebbe visualizzare la seguente risposta:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Puoi utilizzare l'SDK di monitoraggio delle prestazioni per raccogliere dati sulle prestazioni reali dalla tua app e quindi rivedere e analizzare tali dati nella console Firebase. Il monitoraggio delle prestazioni ti aiuta a capire dove e quando è possibile migliorare le prestazioni della tua app in modo da poter utilizzare tali informazioni per risolvere i problemi di prestazioni.

Esistono vari modi per integrarsi con l'SDK JavaScript di Firebase Performance Monitoring. In questo codelab, abbiamo attivato Monitoraggio del rendimento da URL di hosting. Fare riferimento alla documentazione per vedere altri metodi di consentire l'SDK.

Tracce automatiche

Dal momento che abbiamo già importiamo getPerformance nella parte superiore del web-start/src/index.js , abbiamo solo bisogno di aggiungere una riga per dire Monitoraggio del rendimento di caricamento della pagina automaticamente raccogliere e richiedere metriche di rete per voi quando gli utenti visitano il tuo sito schierato!

  1. Nel web-start/src/index.js , aggiungere la seguente riga sotto l'esistente TODO per inizializzare monitoraggio delle prestazioni.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Misura ritardo primo ingresso (opzionale)

In primo luogo il ritardo di ingresso è utile in quanto il browser rispondendo ad un'interazione con l'utente offre agli utenti le loro prime impressioni sulla reattività della vostra applicazione.

Il primo ritardo di input inizia quando l'utente interagisce per la prima volta con un elemento della pagina, ad esempio facendo clic su un pulsante o su un collegamento ipertestuale. Si interrompe immediatamente dopo che il browser è in grado di rispondere all'input, il che significa che il browser non è impegnato a caricare o analizzare il contenuto della tua pagina.

Se desideri misurare il primo ritardo di input, dovrai includere direttamente il codice seguente.

  1. Aperto public/index.html .
  2. Rimuovere il commento dalla script tag sulla seguente riga.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Per saperne di più il primo polyfill ritardo di ingresso, date un'occhiata alla documentazione .

Visualizza i dati sulle prestazioni

Poiché non hai ancora implementato il tuo sito (lo implementerai nel passaggio successivo), ecco uno screenshot che mostra le metriche sulle prestazioni di caricamento della pagina che vedrai nella console Firebase entro 30 minuti dall'interazione degli utenti con il tuo sito distribuito :

29389131150f33d7.png

Quando integri l'SDK di monitoraggio delle prestazioni nella tua app, non è necessario scrivere altro codice prima che l'app inizi a monitorare automaticamente diversi aspetti critici delle prestazioni. Per le app Web, l'SDK registra aspetti come il primo disegno di contenuto, la possibilità per gli utenti di interagire con la tua app e altro ancora.

Puoi anche impostare tracce, metriche e attributi personalizzati per misurare aspetti specifici della tua app. Visita la documentazione per ulteriori informazioni su tracce e le metriche e gli attributi personalizzati .

Offerte Firebase un servizio di hosting per servire i vostri beni e le applicazioni web. Puoi distribuire i tuoi file su Firebase Hosting utilizzando la Firebase CLI. Prima di distribuire, è necessario specificare nel firebase.json file di quali file locali dovrebbero essere distribuiti. Per questo codelab, l'abbiamo già fatto per te perché questo passaggio era necessario per servire i nostri file durante questo codelab. Le impostazioni di hosting sono specificate sotto l' hosting attributi:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Queste impostazioni dicono al CLI che vogliamo distribuire tutti i file della ./public directory ( "public": "./public" ).

  1. Assicurarsi che la riga di comando accede locale della tua applicazione web-start directory.
  2. Distribuisci i tuoi file al tuo progetto Firebase eseguendo il seguente comando:
firebase deploy --except functions
  1. La console dovrebbe visualizzare quanto segue:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visita la tua app web che ora è completamente ospitata su un CDN globale utilizzando Firebase Hosting in due dei tuoi sottodomini Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

In alternativa, è possibile eseguire firebase open hosting:site nella riga di comando.

Visita la documentazione per ulteriori informazioni su come Firebase Hosting opere .

Vai alla sezione Hosting console Firebase del progetto per visualizzare le informazioni di hosting utili e strumenti, tra cui la storia delle vostre dell'airbag, la funzionalità per ripristinare le versioni precedenti della vostra applicazione, e il flusso di lavoro per impostare un dominio personalizzato.

Hai utilizzato Firebase per creare un'applicazione web di chat in tempo reale!

Cosa abbiamo coperto

  • Autenticazione Firebase
  • Cloud Firestore
  • SDK Firebase per Cloud Storage
  • Messaggistica cloud Firebase
  • Monitoraggio delle prestazioni di Firebase
  • Hosting Firebase

Prossimi passi

Scopri di più