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.
• Sincronizza i dati utilizzando Cloud Firestore e Cloud Storage per Firebase.
• Autentica gli 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 che preferisci, ad esempio WebStorm, Sublime o VS Code
• Il gestore dei pacchetti npm, che in genere è incluso in 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

Creare 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 git@github.com:[user-name]/[repository-name].git. Copia questo URL.
5. Esegui il push delle modifiche locali nel nuovo repository GitHub. Esegui il comando seguente sostituendo l'URL del tuo repository al 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.

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

• Firebase Authentication per consentire facilmente agli utenti di accedere alla tua app.
• Cloud Firestore per salvare i dati strutturati sul cloud e ricevere una notifica istantanea quando i dati cambiano.
• Cloud Storage for Firebase per salvare i file sul 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.

Eseguire l'upgrade del piano tariffario di Firebase

Per utilizzare Firebase App Hosting e Cloud Storage for Firebase, il tuo progetto Firebase deve utilizzare il piano tariffario Blaze con pagamento a consumo, 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 senza costi.
• Se stai svolgendo questo codelab nell'ambito di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Per eseguire l'upgrade del progetto al piano Blaze:

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 tuo progetto.
   Se hai dovuto creare un account di fatturazione Cloud nell'ambito di questo upgrade, potresti dover tornare al flusso di upgrade nella console Firebase per completarlo.

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 amichevole. 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 Continua alla console.

Configurare l'autenticazione

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

1. Nella Console Firebase, vai ad Autenticazione.
2. Fai clic su Inizia.
3. Nella colonna Fornitori aggiuntivi, fai clic su Google > Attiva.
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 Build 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 for Firebase

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

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

1. Nel riquadro a sinistra della console Firebase, espandi Build e seleziona 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 senza costi" per Google Cloud Storage. I bucket in tutte le altre località rispettano i prezzi e l'utilizzo di Google Cloud Storage.
4. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Più avanti in questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre un'app pubblicamente senza aggiungere regole di sicurezza per il bucket di archiviazione.
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 e di eseguire il deployment della tua app web nel tuo progetto Firebase.

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

npm -g install firebase-tools@latest

2. Verifica che la CLI sia stata installata correttamente eseguendo il seguente comando:

firebase --version

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

3. Autorizza Firebase CLI eseguendo il seguente 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 la tua app al progetto Firebase eseguendo il seguente comando:

firebase use --add

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

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

7. Segui le restanti istruzioni nella riga di comando.

5. Installa AngularFire

Prima di eseguire il progetto, assicurati di aver configurato Angular CLI e AngularFire.

1. In una console, esegui il seguente comando:

npm install -g @angular/cli

2. Quindi, in una console dalla directory angularfire-start, esegui il seguente comando Angular CLI:

ng add @angular/fire

Verranno installate 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 le istruzioni rimanenti.
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.

Al termine di questa sezione, avrai un backend di App Hosting collegato al tuo repository su GitHub che eseguirà automaticamente la re-build e l'implementazione di una nuova versione della tua app ogni volta che esegui il push di un nuovo commit nel 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 come segue:
3. Segui le istruzioni nel primo passaggio per collegare il repository GitHub 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 che hai configurato in precedenza dal menu a discesa "Seleziona un'app web Firebase esistente".
7. Fai clic su "Fine ed esegui il deployment". Dopo un istante, verrà visualizzata una nuova pagina in cui potrai vedere lo stato del nuovo backend di App Hosting.
8. Al termine dell'implementazione, fai clic sul tuo dominio senza costi in "domini". L'inizio del funzionamento potrebbe richiedere alcuni minuti 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 viene avviata una nuova build e un nuovo rollout e il tuo 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.

Ora creiamo 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 cui hai bisogno di un oggetto di configurazione.
3. Seleziona "Config" dal riquadro dello snippet dell'SDK Firebase.

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

4. Copia lo snippet dell'oggetto di configurazione e 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",
  },
};

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 potrà utilizzare 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 senza costi 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à. Utilizzerai un popup, ma diversi altri metodi sono disponibili in Firebase.

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 di conseguenza la nostra UI, devi avere un modo per controllare 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 FriendlyChat utilizzano questo Observable per aggiornare l'interfaccia utente per il reindirizzamento, mostrare l'utente nel menu di navigazione della barra delle app e così via.

Testa 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 un messaggio di errore che indica auth/operation-not-allowed, verifica di aver attivato Accedi con Google come fornitore di autenticazione nella console Firebase.
4. Dopo aver eseguito l'accesso, dovresti vedere la tua immagine del profilo e il tuo nome utente:

9. Scrivere messaggi in Cloud Firestore

In questa sezione scriverai alcuni dati in Cloud Firestore per compilare l'interfaccia utente 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. Dovrai archiviare ogni messaggio della chat come documento in una raccolta di primo livello denominata messages.

Aggiungere messaggi a Cloud Firestore

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

In questa sezione aggiungerai la funzionalità che consente agli utenti di scrivere nuovi messaggi nel database. Un utente che fa clic sul pulsante INVIARE 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;
  }
};

Testare l'invio di 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, ad esempio "Un saluto da Google", quindi 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 vedere il messaggio appena aggiunto nella Console Firebase. Apri l'interfaccia utente di Emulator Suite. Nella sezione Compilazione, fai clic su Database Firestore (o fai clic qui) e dovresti vedere la raccolta messages con il messaggio appena aggiunto:

10. Leggere i messaggi

Sincronizzare i messaggi

Per leggere i messaggi nell'app, devi aggiungere un Observable che si attivi quando i dati cambiano e poi creare un elemento dell'interfaccia utente che mostri i nuovi messaggi.

Aggiungerai del codice che ascolta i messaggi appena aggiunti dall'app. In questo codice, recupererai lo snapshot della raccolta messages. Verranno visualizzati solo gli ultimi 12 messaggi della chat per evitare di mostrare una cronologia molto lunga al caricamento.

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, in cui sono archiviati i messaggi della 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 le istantanee sotto il cofano. La funzione di callback viene attivata in caso di modifiche ai documenti corrispondenti alla query. Ad esempio, se un messaggio viene eliminato, modificato o aggiunto. Puoi trovare ulteriori informazioni nella documentazione di Cloud Firestore.

Testare 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 FriendlyChat. I messaggi che hai creato in precedenza nel database dovrebbero essere visualizzati nell'interfaccia utente di FriendlyChat (vedi di seguito). Non esitare a scrivere nuovi messaggi, che dovrebbero essere visualizzati immediatamente.
4. (Facoltativo) Puoi provare a eliminare, modificare o aggiungere manualmente nuovi messaggi direttamente nella sezione Firestore della suite di emulatori. Eventuali modifiche dovrebbero essere applicate all'interfaccia utente.

Complimenti! Stai leggendo documenti Cloud Firestore nella tua app.

11. Aggiungere funzionalità di IA

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

Ottenere una chiave API di 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 nel 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:
   • Fornitore dell'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

Testare la funzionalità di IA

FriendlyChat ha già il codice per leggere le risposte dell'estensione AI. Per provarlo, non devi fare altro che inviare un nuovo messaggio di chat.

1. Apri FriendlyChat e invia un messaggio.
2. Dopo un istante, dovresti visualizzare una risposta accanto al messaggio. 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 per Firebase è un servizio di archiviazione di file/blob che utilizzerai per archiviare le immagini condivise da un utente utilizzando la nostra app.

Salvare le immagini in Cloud Storage

Per questo codelab, hai già aggiunto un pulsante che attiva una finestra di dialogo di selezione dei file. Dopo aver selezionato un file, viene chiamata la funzione saveImageMessage e puoi ottenere un riferimento al file selezionato. La funzione saveImageMessage esegue quanto segue:

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

Ora aggiungi 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);
  }
}

Testare l'invio di immagini

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, 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 invierà 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 ha bisogno di 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 dei dispositivi FCM

Quando le notifiche sono state attivate su un dispositivo o un browser, ti verrà assegnato un token dispositivo. Questo token dispositivo viene utilizzato per inviare una notifica a un determinato dispositivo o browser.

Quando l'utente accede, chiami la funzione saveMessagingDeviceToken. È qui che otterrai il token del dispositivo FCM dal browser e lo salverai 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).

Richiedere le autorizzazioni per mostrare le notifiche

Se l'utente non ha ancora concesso all'app l'autorizzazione a mostrare notifiche, non ti verrà fornito un token dispositivo. In questo caso, chiami il metodo requestPermission(), che mostrerà una finestra di dialogo del browser che richiede questa 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 per l'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 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 un 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 "Test"

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

Se l'app è in background, nel browser dovrebbe apparire una notifica, come in questo esempio:

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.

Quando hai configurato il 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 in qualsiasi raccolta del tuo data store.

rules_version = '2';

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

Aggiorna le regole per applicare limitazioni 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;
    }
  }
}

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.

Quando hai configurato il progetto Firebase all'inizio di questo codelab, hai scelto di utilizzare la regola di sicurezza di Cloud Storage predefinita che consente solo agli utenti autenticati di utilizzare Cloud Storage. Nella Console Firebase, nella scheda Regole della sezione Spazio di 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 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;
    }
  }
}

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

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

Scopri di più

• firebase.google.com

16. [Facoltativo] Applicare 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.

Innanzitutto, devi attivare Controllo app e reCAPTCHA.

Abilitazione di reCAPTCHA Enterprise

1. Nella console Cloud, individua 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 Controllo app, quindi sulla scheda Metodo di accesso per andare a Controllo app.
3. Fai clic su Registrati e inserisci la chiave di reCaptcha Enterprise quando richiesto, quindi fai clic su Salva.
4. Nella visualizzazione API, seleziona Archiviazione e fai clic su Applica. Fai lo stesso per Cloud Firestore.

App Check dovrebbe essere ora applicato. 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 token di reCAPTCHA Enterprise.

Poi 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 Visualizzazione 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 ora funzionare nella tua app.