Codelab web AngularFire

1. Panoramica

In questo codelab imparerai a utilizzare AngularFire per creare applicazioni web implementando ed eseguendo il deployment di un client di chat utilizzando i prodotti e i servizi Firebase.

Obiettivi didattici

• Crea un'app web utilizzando Angular e Firebase.
• Sincronizzare i dati utilizzando Cloud Firestore e Cloud Storage for Firebase.
• Autentica i tuoi utenti utilizzando Firebase Authentication.
• Esegui il deployment dell'app web su Firebase App Hosting.
• Invia notifiche con Firebase Cloud Messaging.
• Raccogliere i dati sul rendimento della tua app web.

Che cosa ti serve

• Un account GitHub
• La possibilità di eseguire l'upgrade del progetto Firebase al piano tariffario Blaze
• L'IDE/editor di testo di tua scelta, ad esempio WebStorm, Sublime o VS Code
• Il gestore di pacchetti npm, che in genere include Node.js
• Un terminale/una console
• Un browser a tua scelta, ad esempio Chrome
• Il codice di esempio del codelab (vedi il passaggio successivo del codelab per scoprire come ottenere il codice).

2. recupera il codice campione

Crea un repository GitHub

Il codice sorgente del codelab è disponibile all'indirizzo https://github.com/firebase/codelab-friendlychat-web. Il repository contiene progetti di esempio per più piattaforme. Tuttavia, questo codelab utilizza solo la directory angularfire-start.

Copia la cartella angularfire-start nel tuo repository:

1. Utilizzando un terminale, crea una nuova cartella sul computer e passa alla nuova directory:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. Utilizza il pacchetto npm giget per recuperare solo la cartella angularfire-start:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. Monitora le modifiche localmente con git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. Crea un nuovo repository GitHub: https://github.com/new. Assegna un nome a piacere.
   1. GitHub ti fornirà un nuovo URL del repository simile a https://github.com/[user-name]/[repository-name].git o [e-mail]:[user-name]/[repository-name].git. Copia questo URL.
5. Esegui il push delle modifiche locali nel nuovo repository GitHub. Esegui questo comando, sostituendo l'URL del tuo repository con il segnaposto your-repository-url.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. Ora dovresti vedere il codice di avvio nel tuo repository GitHub.

3. Crea e configura un progetto Firebase

Creare un progetto Firebase

1. Accedi alla Console Firebase.
2. Nella console Firebase, fai clic su Aggiungi progetto e poi assegna al progetto Firebase il nome FriendlyChat. Ricorda l'ID progetto per il tuo progetto Firebase.
3. Deseleziona Abilita Google Analytics per questo progetto
4. Fai clic su Crea progetto.

Importante: il progetto Firebase verrà denominato friendlyChat, ma Firebase gli assegnerà automaticamente un ID progetto univoco nel formato friendlychat-1234. Questo identificatore univoco è il modo in cui viene identificato il tuo progetto (anche nell'interfaccia a riga di comando), mentre friendlyChat è semplicemente un nome visualizzato.

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

• Firebase Authentication per consentire agli utenti di accedere facilmente alla tua app.
• Cloud Firestore per salvare i dati strutturati sul cloud e ricevere notifiche immediate quando i dati subiscono modifiche.
• Cloud Storage for Firebase per salvare i file nel cloud.
• Firebase App Hosting per creare, ospitare e pubblicare l'app.
• Firebase Cloud Messaging per inviare notifiche push e visualizzare notifiche popup del browser.
• Firebase Performance Monitoring per raccogliere i dati sul rendimento degli utenti per la tua app.

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

Esegui l'upgrade del piano tariffario Firebase

Per utilizzare Firebase App Hosting e Cloud Storage for Firebase, il tuo progetto Firebase deve utilizzare il piano tariffario con pagamento a consumo (Blaze), il che significa che deve essere collegato a un account di fatturazione Cloud.

• Un account di fatturazione Cloud richiede un metodo di pagamento, ad esempio una carta di credito.
• Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai l'idoneità a ricevere un credito di 300 $ e un account di fatturazione Cloud per la prova gratuita.
• Se partecipi a questo codelab come parte di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Per eseguire l'upgrade del progetto al piano Blaze, segui questi passaggi:

1. Nella console Firebase, seleziona l'upgrade del piano.
2. Seleziona il piano Blaze. Segui le istruzioni sullo schermo per collegare un account di fatturazione Cloud al progetto.
   Se nell'ambito di questo upgrade dovevi creare un account di fatturazione Cloud, potresti dover tornare al flusso di upgrade nella console Firebase per completare l'upgrade.

Nota: puoi eseguire il downgrade del progetto al piano tariffario senza costi (Spark) dopo aver completato questo codelab.

Aggiungi un'app web Firebase al progetto

1. Fai clic sull'icona web per creare una nuova app web Firebase.
2. Registra l'app con il nickname Chat semplice. Non selezionare la casella accanto a Configura anche Firebase Hosting per questa app. Fai clic su Registra app.
3. Nel passaggio successivo vedrai un oggetto di configurazione. Non ti serve subito. Fai clic su Vai alla console.

Configura l'autenticazione

Per consentire agli utenti di accedere all'app web con i propri Account Google, utilizzerai il metodo di accesso di Google.

1. Nella console Firebase, vai ad Autenticazione.
2. Fai clic su Inizia.
3. Nella colonna Provider aggiuntivi, fai clic su Google > Abilita.
4. Nella casella di testo Nome visibile al pubblico del progetto, inserisci un nome facile da ricordare, ad esempio My Next.js app.
5. Nel menu a discesa Email dell'assistenza per il progetto, seleziona il tuo indirizzo email.
6. Fai clic su Salva.

Configurare Cloud Firestore

L'app web utilizza Cloud Firestore per salvare i messaggi della chat e ricevere nuovi messaggi.

Ecco come configurare Cloud Firestore nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Crea e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia l'ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, scegli una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Più avanti in questo codelab aggiungerai le regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
6. Fai clic su Crea.

Configurare Cloud Storage per Firebase

L'app web utilizza Cloud Storage for Firebase per archiviare, caricare e condividere le immagini.

Ecco come configurare Cloud Storage for Firebase nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Crea e seleziona Spazio di archiviazione.
2. Fai clic su Inizia.
3. Seleziona una posizione per il bucket di archiviazione predefinito.
   I bucket in US-WEST1, US-CENTRAL1 e US-EAST1 possono usufruire del livello "Sempre gratuito" per Google Cloud Storage. I bucket in tutte le altre località seguono i prezzi e l'utilizzo di Google Cloud Storage.
4. Fai clic su Avvia in modalità di test. Leggi il disclaimer sulle regole di sicurezza.
   Più avanti in questo codelab aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il bucket Storage.
5. Fai clic su Crea.

4. Installa l'interfaccia a riga di comando di Firebase

L'interfaccia a riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per pubblicare la tua app web localmente, nonché di eseguire il deployment della tua app web nel tuo progetto Firebase.

Nota: per installare l'interfaccia a riga di comando, devi installare npm, che in genere viene fornito insieme a Node.js.

1. Installa l'interfaccia a riga di comando eseguendo questo comando npm:

npm -g install firebase-tools@latest

Non funziona? Potresti dover modificare le autorizzazioni npm.

2. Verifica che l'interfaccia a riga di comando sia stata installata correttamente eseguendo questo comando:

firebase --version

Assicurati che la versione dell'interfaccia a riga di comando di Firebase sia 13.9.0 o successiva.

3. Autorizza l'interfaccia a riga di comando di Firebase eseguendo questo comando:

firebase login

Hai configurato il modello di app web in modo che estragga la configurazione dell'app per Firebase Hosting dalla directory locale dell'app (il repository che hai clonato in precedenza nel codelab). Tuttavia, per estrarre la configurazione, devi associare la tua app al tuo progetto Firebase.

4. Assicurati che la riga di comando acceda alla directory angularfire-start locale dell'app.
5. Associa l'app al progetto Firebase eseguendo questo comando:

firebase use --add

6. Quando richiesto, seleziona l'ID progetto e poi assegna un alias al progetto Firebase.

Un alias è utile se disponi di più ambienti (produzione, gestione temporanea e così via). Tuttavia, per questo codelab, utilizziamo solo l'alias di default.

7. Segui le istruzioni rimanenti sulla riga di comando.

5. Installa AngularFire

Prima di eseguire il progetto, assicurati di aver configurato l'interfaccia a riga di comando Angular e AngularFire.

1. In una console, esegui questo comando:

npm install -g @angular/cli

2. Quindi, in una console dalla directory angularfire-start, esegui questo comando dell'interfaccia a riga di comando di Angular:

ng add @angular/fire

Questa operazione installerà tutte le dipendenze necessarie per il progetto.

3. Quando richiesto, deseleziona ng deploy -- hosting con la barra spaziatrice. Seleziona le seguenti funzionalità con i tasti freccia e la barra spaziatrice:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Premi enter e segui gli altri prompt.
5. Crea un commit con il messaggio "Install AngularFire" ed esegui il push nel tuo repository GitHub.

6. Crea un backend di hosting delle app

In questa sezione configurerai un backend App Hosting per monitorare un ramo nel tuo repository Git.

Nota: Firebase App Hosting è in versione di anteprima pubblica.

Alla fine di questa sezione avrai un backend di App Hosting collegato al tuo repository in GitHub, che ricrea e implementa automaticamente una nuova versione dell'app ogni volta che esegui il push di un nuovo commit al ramo main.

1. Vai alla pagina Hosting app nella Console Firebase:

2. Fai clic su "Inizia" per avviare il flusso di creazione del backend. Configura il backend nel seguente modo:
3. Segui le istruzioni nel primo passaggio per connettere il repository GitHub che hai creato in precedenza.
4. Imposta le impostazioni di deployment:
   1. Mantieni la directory principale come /
   2. Imposta il ramo attivo su main
   3. Abilita implementazioni automatiche
5. Assegna un nome al backend friendlychat-codelab.
6. In "Crea o associa un'app web Firebase", scegli l'app web configurata in precedenza dal menu a discesa "Seleziona un'app web Firebase esistente".
7. Fai clic su "Termina ed esegui il deployment". Dopo qualche istante, verrà visualizzata una nuova pagina in cui potrai vedere lo stato del nuovo backend di App Hosting.

   Nota: puoi monitorare i servizi Google Cloud sottostanti per il backend di App Hosting seguendo i link dalla console. Scopri di più in Visualizzare i log e le metriche.

8. Una volta completata l'implementazione, fai clic sul tuo dominio senza costi in "domini". Questa operazione potrebbe richiedere alcuni minuti per iniziare a funzionare a causa della propagazione del DNS.

Hai eseguito il deployment dell'app web iniziale. Ogni volta che esegui il push di un nuovo commit nel ramo main del tuo repository GitHub, nella console Firebase inizieranno una nuova build e un'implementazione e il sito verrà aggiornato automaticamente al termine dell'implementazione.

Dovresti vedere la schermata di accesso dell'app FriendlyChat, che non è (ancora!) funzionante.

Al momento l'app non può fare nulla, ma con il tuo aiuto lo farà a breve.

Creiamo ora un'app di chat in tempo reale.

7. Importa e configura Firebase

Configura Firebase

Dovrai configurare l'SDK Firebase per indicargli quale progetto Firebase stai utilizzando.

1. Vai alle impostazioni del progetto nella Console Firebase.
2. Nella scheda "Le tue app", seleziona il nickname dell'app per la quale hai bisogno di un oggetto di configurazione.
3. Seleziona "Configurazione" nel riquadro degli snippet dell'SDK Firebase.

Scoprirai che è stato generato per te un file di ambiente /angularfire-start/src/environments/environment.ts.

4. Copia lo snippet dell'oggetto di configurazione, poi aggiungilo a angularfire-start/src/firebase-config.js.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Il codice riportato sopra deve contenere l'oggetto di configurazione Firebase specifico per la tua app, non i nostri valori segnaposto.

Visualizzare la configurazione di AngularFire

Le funzionalità che hai selezionato nella console sono state aggiunte automaticamente al file /angularfire-start/src/app/app.config.ts. In questo modo, la tua app può utilizzare le caratteristiche e le funzionalità di Firebase.

8. Configurare l'accesso degli utenti

AngularFire ora dovrebbe essere pronto per l'uso, poiché è stato importato e inizializzato in app.config.ts. Ora implementerai l'accesso degli utenti utilizzando Firebase Authentication.

Aggiungi un dominio autorizzato

Firebase Authentication consente gli accessi solo da un elenco prestabilito di domini controllati da te. Aggiungi il tuo dominio di hosting di app gratuito all'elenco dei domini:

1. Vai ad App Hosting.
2. Copia il dominio del tuo backend.
3. Vai a Impostazioni di autenticazione.
4. Scegli la scheda Domini autorizzati.
5. Fai clic su Aggiungi dominio e incolla il dominio del backend di App Hosting.

Autenticare gli utenti con Accedi con Google

Nell'app, quando un utente fa clic sul pulsante Accedi con Google, viene attivata la funzione login. Per questo codelab, devi autorizzare Firebase a utilizzare Google come provider di identità. Potrai utilizzare un popup, ma in Firebase sono disponibili diversi altri metodi.

1. Nella sottodirectory /src/app/services/, apri chat.service.ts.
2. Trova la funzione login.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

La funzione logout viene attivata quando l'utente fa clic sul pulsante Uscire.

1. Torna al file src/app/services/chat.service.ts.
2. Trova la funzione logout.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Monitorare lo stato dell'autenticazione

Per aggiornare la nostra UI di conseguenza, devi trovare un modo per verificare se l'utente ha eseguito l'accesso o la disconnessione. AngularFire fornisce una funzione per ottenere un Observable che si aggiorna ogni volta che cambia lo stato di autenticazione. Questa funzionalità è già stata implementata, ma vale la pena dare un'occhiata.

1. Torna al file src/app/services/chat.service.ts.
2. Trova l'assegnazione della variabile user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Il codice riportato sopra chiama la funzione AngularFire user che restituisce un utente osservabile. Si attiva ogni volta che cambia lo stato di autenticazione (quando l'utente accede o esce). I componenti dei modelli Angular in FreshChat utilizzano questo osservabile per aggiornare la UI per reindirizzare l'utente, visualizzare l'utente nel riquadro di navigazione dell'intestazione e così via.

Testare l'accesso all'app

1. Crea un commit con il messaggio "Aggiunta dell'autenticazione Google" ed esegui il push nel tuo repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.
3. Nell'app web, aggiorna la pagina e accedi all'app utilizzando il pulsante di accesso e il tuo Account Google. Se viene visualizzato il messaggio di errore auth/operation-not-allowed, verifica di aver attivato Accedi con Google come provider di autenticazione nella console Firebase.
4. Dopo aver effettuato l'accesso, dovrebbero essere visualizzati la tua immagine del profilo e il tuo nome utente:

9. Scrivi messaggi in Cloud Firestore

In questa sezione scriverai alcuni dati in Cloud Firestore in modo da poter completare l'UI dell'app. Questa operazione può essere eseguita manualmente con la console Firebase, ma la eseguirai nell'app stessa per dimostrare una scrittura di Cloud Firestore di base.

Modello dei dati

I dati di Cloud Firestore sono suddivisi in raccolte, documenti, campi e sottoraccolte. Ogni messaggio della chat verrà archiviato come documento in una raccolta di primo livello chiamata messages.

Suggerimento: per scoprire di più sul modello di dati di Cloud Firestore, leggi la sezione relativa a documenti e raccolte nella documentazione.

Aggiungi messaggi a Cloud Firestore

Per archiviare i messaggi di chat scritti dagli utenti, utilizzerai Cloud Firestore.

In questa sezione, aggiungerai la funzionalità che consente agli utenti di scrivere nuovi messaggi nel tuo database. Un utente che fa clic sul pulsante INVIA attiverà lo snippet di codice riportato di seguito. Aggiunge un oggetto messaggio con i contenuti dei campi del messaggio all'istanza Cloud Firestore nella raccolta messages. Il metodo add() aggiunge alla raccolta un nuovo documento con un ID generato automaticamente.

1. Torna al file src/app/services/chat.service.ts.
2. Trova la funzione addMessage.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Verifica l'invio dei messaggi

1. Crea un commit con il messaggio "Pubblica nuove chat in Firestore" ed esegui il push nel tuo repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.
3. Aggiorna FriendlyChat. Dopo aver eseguito l'accesso, inserisci un messaggio come "Ciao!" e fai clic su INVIA. Il messaggio verrà scritto in Cloud Firestore. Tuttavia, non vedrai ancora i dati nella tua app web effettiva perché devi ancora implementare il recupero dei dati (la sezione successiva del codelab).
4. Puoi visualizzare il messaggio appena aggiunto nella tua console Firebase. Apri l'interfaccia utente della suite di emulatori. Nella sezione Crea, fai clic su Database Firestore (oppure fai clic qui. Dovresti vedere la raccolta messages con il messaggio appena aggiunto:

10. Leggi i messaggi

Sincronizzare i messaggi

Per leggere i messaggi nell'app, dovrai aggiungere un elemento osservabile che si attivi quando i dati cambiano, quindi creare un elemento UI che mostri i nuovi messaggi.

Aggiungerai il codice che rimane in ascolto dei messaggi appena aggiunti dall'app. In questo codice recupererai l'istantanea della raccolta messages. Per evitare di visualizzare una cronologia molto lunga al momento del caricamento, visualizzerai solo gli ultimi 12 messaggi della chat.

1. Torna al file src/app/services/chat.service.ts.
2. Trova la funzione loadMessages.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Per ascoltare i messaggi nel database, crea una query su una raccolta utilizzando la funzione collection per specificare la raccolta in cui si trovano i dati che vuoi ascoltare. Nel codice riportato sopra, stai ascoltando le modifiche all'interno della raccolta messages, dove vengono archiviati i messaggi di chat. Inoltre, stai applicando un limite ascoltando solo gli ultimi 12 messaggi utilizzando limit(12) e ordinando i messaggi per data utilizzando orderBy('timestamp', 'desc') per ottenere i 12 messaggi più recenti.

La funzione collectionData utilizza gli snapshot "in background". La funzione di callback viene attivata quando vengono apportate modifiche ai documenti che corrispondono alla query. ad esempio se un messaggio viene eliminato, modificato o aggiunto. Puoi trovare ulteriori informazioni nella documentazione di Cloud Firestore.

Testa la sincronizzazione dei messaggi

1. Crea un commit con il messaggio "Mostra le nuove chat nell'interfaccia utente" ed esegui il push nel tuo repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.
3. Aggiorna Friends Chat. I messaggi che hai creato in precedenza nel database dovrebbero essere visualizzati nell'interfaccia utente di friendlyChat (vedi sotto). Scrivi nuovi messaggi: dovrebbero apparire all'istante.
4. (Facoltativo) Puoi provare a eliminare, modificare o aggiungere manualmente nuovi messaggi direttamente nella sezione Firestore della suite di emulatori. Eventuali modifiche dovrebbero essere riportate nell'interfaccia utente.

Complimenti! Stai leggendo documenti Cloud Firestore nella tua app.

11. Aggiungere funzionalità di IA

Utilizzerai l'IA di Google per aggiungere utili funzionalità assistive all'app di chat.

Ottieni una chiave API Google AI

1. Vai a Google AI Studio e fai clic su Crea chiave API.
2. Seleziona il progetto Firebase che hai creato per questo codelab. La richiesta riguarda un progetto Google Cloud, ma ogni progetto Firebase è un progetto Google Cloud.
3. Fai clic su Crea chiave API in un progetto esistente.
4. Copia la chiave API risultante

Installare un'estensione

Questa estensione eseguirà il deployment di una funzione cloud che viene attivata ogni volta che viene aggiunto un nuovo documento alla raccolta messages in Firestore. La funzione chiamerà Gemini e scriverà la risposta nel campo response del documento.

1. Fai clic su Installa nella console Firebase nella pagina dell'estensione Creare un chatbot con l'API Gemini.
2. Segui le istruzioni. Quando arrivi al passaggio Configura l'estensione, imposta i seguenti valori del parametro:
   • Provider API Gemini: Google AI
   • Chiave API Google AI: incolla la chiave che hai creato in precedenza e fai clic su Crea secret.
   • Percorso della raccolta Firestore: messages
   • Campo prompt: text
   • Campo di risposta: response
   • Campo ordine: timestamp
   • Contesto: Keep your answers short, informal, and helpful. Use emojis when possible.
3. Fai clic su Installa estensione.
4. Attendi il completamento dell'installazione dell'estensione

Testa funzionalità AI

HappyChat dispone già di un codice per leggere le risposte dell'estensione IA. Per provarlo, non devi fare altro che inviare un nuovo messaggio di chat.

1. Apri friendlyChat e invia un messaggio.
2. Dopo un istante, accanto al messaggio dovrebbe apparire una risposta. Alla fine è presente una nota ✨ ai generated per chiarire che è stata creata con l'IA generativa e non da un utente reale.

12. Inviare immagini

Ora aggiungi una funzionalità che condivide le immagini.

Sebbene Cloud Firestore sia adatto per l'archiviazione di dati strutturati, Cloud Storage è più adatto per l'archiviazione di file. Cloud Storage for Firebase è un servizio di archiviazione di file/BLOB che lo utilizzerai per archiviare le immagini che un utente condivide utilizzando la nostra app.

Salvare le immagini in Cloud Storage

Per questo codelab, hai già aggiunto un pulsante che attiva una finestra di dialogo del selettore file. Dopo aver selezionato un file, viene chiamata la funzione saveImageMessage e puoi ottenere un riferimento al file selezionato. La funzione saveImageMessage esegue le seguenti operazioni:

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

Ora aggiungerai la funzionalità per inviare un'immagine:

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

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, 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.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Prova a inviare le immagini

1. Crea un commit con messaggio di commit "Aggiungi la possibilità di pubblicare immagini" ed eseguine il push nel repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.
3. Aggiorna HappyChat. Dopo aver eseguito l'accesso, fai clic sul pulsante di caricamento delle immagini in basso a sinistra e seleziona un file immagine utilizzando il selettore di file. Se stai cercando un'immagine, puoi utilizzare questa bella foto di una tazza di caffè.
4. Nell'interfaccia utente dell'app dovrebbe essere visualizzato un nuovo messaggio con l'immagine selezionata:

Se provi ad aggiungere un'immagine senza aver eseguito l'accesso, dovresti visualizzare un messaggio di errore che ti informa che devi accedere per aggiungere immagini.

13. Mostra notifiche

Ora aggiungi il supporto per le notifiche del browser. L'app invia una notifica agli utenti quando vengono pubblicati nuovi messaggi nella chat. Firebase Cloud Messaging (FCM) è una soluzione di messaggistica multipiattaforma che ti consente di inviare messaggi e notifiche in modo affidabile e senza costi.

Aggiungi il worker del servizio FCM

L'app web richiede un service worker che riceva e mostri le notifiche web.

Il fornitore di servizi di messaggistica dovrebbe essere già stato configurato quando è stato aggiunto AngularFire. Assicurati che il seguente codice esista nella sezione delle importazioni di /angularfire-start/src/app/app.config.ts

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

Il service worker deve semplicemente caricare e inizializzare l'SDK Firebase Cloud Messaging, che si occuperà di visualizzare le notifiche.

Ottenere i token del dispositivo FCM

Quando le notifiche sono state attivate su un dispositivo o un browser, ti verrà assegnato un token dispositivo. Il token del dispositivo è lo strumento che utilizzi per inviare una notifica a un particolare dispositivo o browser.

Quando l'utente accede, chiami la funzione saveMessagingDeviceToken. Qui potrai recuperare il token del dispositivo FCM dal browser e salvarlo in Cloud Firestore.

chat.service.ts

2. Trova la funzione saveMessagingDeviceToken.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.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 concederle l'autorizzazione per mostrare le notifiche (passaggio successivo del codelab).

Richiedi le autorizzazioni per mostrare le notifiche

Se l'utente non ha ancora concesso alla tua app l'autorizzazione a mostrare notifiche, non ti verrà fornito un token dispositivo. In questo caso, chiami il metodo requestPermission(), che visualizza una finestra di dialogo del browser in cui viene richiesta l'autorizzazione ( nei browser supportati).

1. Torna al file src/app/services/chat.service.ts.
2. Trova la funzione requestNotificationsPermissions.
3. Sostituisci l'intera funzione con il seguente codice.

chat.service.ts

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

Ottenere il token del dispositivo

1. Crea un commit con il messaggio "Aggiungi la possibilità di pubblicare immagini" ed esegui il push nel tuo repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.
3. Aggiorna FriendlyChat. Dopo aver eseguito l'accesso, dovrebbe essere visualizzata la finestra di dialogo di autorizzazione per le notifiche:
4. Fai clic su Consenti.
5. Apri la console JavaScript del browser. Dovresti vedere il seguente messaggio: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. Copia il token del dispositivo. Ne avrai bisogno per la fase successiva del codelab.

Inviare una notifica al tuo dispositivo

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

1. Apri la scheda Cloud Messaging della console Firebase.
2. Fai clic su "Nuova notifica".
3. Inserisci un titolo e un testo per la notifica.
4. Sul lato destro dello schermo, fai clic su "Invia messaggio di prova".
5. Inserisci il token dispositivo che hai copiato dalla console JavaScript del browser, quindi fai clic sul segno Più ("+").
6. Fai clic su "Verifica"

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

Se l'app è in background, nel browser dovrebbe essere visualizzata una notifica, come nell'esempio seguente:

In un codelab di follow-up, Firebase SDK for Cloud Functions, scoprirai come automatizzare l'invio di notifiche dal backend per ogni nuovo messaggio pubblicato nell'app di chat.

14. Regole di sicurezza di Cloud Firestore

Visualizza le regole di sicurezza del database

Cloud Firestore utilizza un linguaggio di regole specifico per definire i diritti di accesso, la sicurezza e le convalide dei dati.

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

Al 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;
    }
  }
}

Aggiornerai le regole per limitare gli elementi 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;
    }
  }
}

La variabile della regola request.auth è una variabile speciale contenente informazioni su un utente autenticato. La variabile della regola request.resource rimanda ai nuovi dati che vengono scritti. Per saperne di più, consulta la documentazione.

Le regole di sicurezza dovrebbero aggiornarsi automaticamente nella suite di emulatori.

Visualizzare le regole di sicurezza di Cloud Storage

Cloud Storage per Firebase utilizza un linguaggio di regole specifico per definire i diritti di accesso, la sicurezza e le convalide dei dati.

Durante la configurazione del progetto Firebase all'inizio di questo codelab, hai 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 Archiviazione, puoi visualizzare e modificare le regole. Dovresti vedere la regola predefinita che consente a qualsiasi utente che ha eseguito l'accesso di leggere e scrivere file nel bucket di archiviazione.

rules_version = '2';

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

Aggiornerai le regole per:

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

Questo può essere implementato utilizzando le seguenti regole:

storage.rules

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;
    }
  }
}

La variabile della regola request.auth è una variabile speciale contenente informazioni su un utente autenticato. La variabile della regola request.resource contiene informazioni sul file caricato. Ulteriori informazioni sono disponibili nella documentazione.

15. Complimenti!

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

Argomenti trattati

• Firebase App Hosting
• Firebase Authentication
• Cloud Firestore
• SDK Firebase per Cloud Storage
• Firebase Cloud Messaging
• Firebase Performance Monitoring

Passaggi successivi

Continua al codelab Cloud Functions for Firebase per scoprire come utilizzare l'SDK Firebase per Cloud Functions e aggiungere alcune attività di backend alla tua app di chat. Puoi iniziare direttamente dal passaggio 5 del codelab in quanto hai già configurato il tuo progetto Firebase.

Vuoi saperne di più su Cloud Firestore? Forse vuoi saperne di più su sottocollezioni e transazioni? Vai al codelab web di Cloud Firestore per un codelab che approfondisce Cloud Firestore.

Vuoi saperne di più su Firebase Performance Monitoring per il web? Consulta il codelab web sul monitoraggio del rendimento di Firebase per un codelab che approfondisce Firebase Performance Monitoring.

Scopri di più

• firebase.google.com

16. [Facoltativo] Applica con App Check

Firebase App Check contribuisce a proteggere i tuoi servizi dal traffico indesiderato e il tuo backend da comportamenti illeciti. In questo passaggio, aggiungerai la convalida delle credenziali e bloccherai i client non autorizzati con App Check e reCAPTCHA Enterprise.

Questo passaggio dipende dal completamento di quelli precedenti. Assicurati che friendlyChat sia eseguito localmente con emulatori o sia implementato con i servizi Firebase.

Innanzitutto, devi attivare App Check e reCAPTCHA.

Abilitazione di reCAPTCHA Enterprise

1. Nella console Cloud, trova e seleziona reCaptcha Enterprise in Sicurezza.
2. Attiva il servizio come richiesto e fai clic su Crea chiave.
3. Inserisci un nome visualizzato come richiesto e seleziona Sito web come tipo di piattaforma.
4. Aggiungi gli URL di cui è stato eseguito il deployment all'elenco dei domini e assicurati che l'opzione "Utilizza verifica tramite casella di controllo" non sia selezionata.
5. Fai clic su Crea chiave e conserva la chiave generata in un luogo sicuro. Ti servirà in un secondo momento in questo passaggio.

Attivare App Check

1. Nella console Firebase, individua la sezione Build nel riquadro a sinistra.
2. Fai clic su App Check, quindi sulla scheda Metodo di accesso per passare ad App Check.
3. Fai clic su Registra e inserisci la chiave reCAPTCHA Enterprise quando richiesto, quindi fai clic su Salva.
4. Nella visualizzazione API, seleziona Storage e fai clic su Enforce (Applica). Fai lo stesso per Cloud Firestore.

Ora App Check dovrebbe essere applicato in modo forzato. Aggiorna l'app e prova a visualizzare o inviare messaggi di chat. Dovresti visualizzare il messaggio di errore:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Ciò significa che App Check blocca le richieste non convalidate per impostazione predefinita. Ora aggiungi la convalida all'app.

Vai al file environment.ts e aggiungi reCAPTCHAEnterpriseKey all'oggetto environment.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Sostituisci il valore di key con il tuo token reCAPTCHA Enterprise.

Quindi, vai al file app.config.ts e aggiungi le seguenti importazioni:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Nello stesso file app.config.ts, aggiungi la seguente dichiarazione di variabile globale:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Nelle importazioni, aggiungi l'inizializzazione di App Check con ReCaptchaEnterpriseProvider e imposta isTokenAutoRefreshEnabled su true per consentire l'aggiornamento automatico dei token.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Per consentire i test locali, imposta self.FIREBASE_APPCHECK_DEBUG_TOKEN su true. Quando aggiorni l'app in localhost, nella console viene registrato un token di debug simile al seguente:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Ora, vai alla vista app di App Check nella console Firebase.

Fai clic sul menu extra e seleziona Gestisci token di debug.

Poi, fai clic su Aggiungi token di debug e incolla il token di debug dalla console quando richiesto.

Vai al file chat.service.ts e aggiungi la seguente importazione:

import { AppCheck } from '@angular/fire/app-check';

Nello stesso file chat.service.ts, inserisci App Check insieme agli altri servizi Firebase.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. Crea un commit con il messaggio "Blocca i client non autorizzati con App Check" ed esegui il push nel tuo repository GitHub.
2. Apri la pagina Hosting app nella Console Firebase e attendi il completamento del nuovo implementazione.

Complimenti! App Check dovrebbe funzionare nella tua app.