AngularFire web codelab

1. Visão Geral

Neste codelab, você aprenderá a usar o AngularFire para criar aplicativos da Web implementando e implantando um cliente de chat usando produtos e serviços do Firebase.

O que você aprenderá

• Crie um aplicativo da web usando Angular e Firebase.
• Sincronize dados usando Cloud Firestore e Cloud Storage para Firebase.
• Autentique seus usuários usando o Firebase Authentication.
• Implante seu aplicativo da Web no Firebase Hosting.
• Envie notificações com o Firebase Cloud Messaging.
• Colete os dados de desempenho do seu aplicativo da web.

O que você precisará

• O editor de texto/IDE de sua escolha, como WebStorm , Atom , Sublime ou VS Code
• O gerenciador de pacotes npm , que normalmente vem com o Node.js
• Um terminal/console
• Um navegador de sua escolha, como o Chrome
• O código de amostra do codelab (consulte a próxima etapa do codelab para saber como obter o código).

2. Obtenha o código de amostra

Clone o repositório GitHub do codelab na linha de comando:

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

Alternativamente, se você não tiver o git instalado, você pode baixar o repositório como um arquivo ZIP .

Importar o aplicativo inicial

Usando seu IDE, abra ou importe o diretório 📁 angularfire-start do repositório clonado. Este diretório 📁 angularfire-start contém o código inicial para o codelab, que será um aplicativo da Web de bate-papo totalmente funcional.

3. Crie e configure um projeto do Firebase

Criar um projeto do Firebase

1. Faça login no Firebase .
2. No console do Firebase, clique em Adicionar projeto e nomeie seu projeto do Firebase como FriendlyChat . Lembre-se do ID do projeto do Firebase.
3. Desmarque Ativar o Google Analytics para este projeto
4. Clique em Criar projeto .

O aplicativo que você criará usa produtos Firebase disponíveis para aplicativos da web:

• Firebase Authentication para permitir facilmente que seus usuários façam login em seu aplicativo.
• Cloud Firestore para salvar dados estruturados na nuvem e receber notificações instantâneas quando os dados forem alterados.
• Armazenamento em nuvem para Firebase para salvar arquivos na nuvem.
• Firebase Hosting para hospedar e atender seus ativos.
• Firebase Cloud Messaging para enviar notificações push e exibir notificações pop-up do navegador.
• Monitoramento de desempenho do Firebase para coletar dados de desempenho do usuário para seu aplicativo.

Alguns desses produtos precisam de configuração especial ou precisam ser habilitados usando o Firebase console.

Adicionar um app da Web do Firebase ao projeto

1. Clique no ícone da web para criar um novo app da Web do Firebase.
2. Registre o aplicativo com o apelido Friendly Chat e marque a caixa ao lado de Também configurar Firebase Hosting para este aplicativo . Clique em Registrar aplicativo .
3. Na próxima etapa, você verá um objeto de configuração. Copie apenas o objeto JS (não o HTML ao redor) em firebase-config.js

Ativar login do Google para Autenticação do Firebase

Para permitir que os usuários façam login no aplicativo da Web com suas contas do Google, você usará o método de login do Google .

Você precisará ativar o login do Google :

1. No console do Firebase, localize a seção Build no painel esquerdo.
2. Clique em Autenticação e, em seguida, clique na guia Método de login (ou clique aqui para ir diretamente para lá).
3. Ative o provedor de login do Google e clique em Salvar .
4. Defina o nome público do seu aplicativo como Friendly Chat e escolha um e-mail de suporte do projeto no menu suspenso.
5. Configure sua tela de consentimento OAuth no Google Cloud Console e adicione um logotipo:

Ativar Cloud Firestore

O aplicativo da web usa o Cloud Firestore para salvar mensagens de bate-papo e receber novas mensagens de bate-papo.

Você precisará ativar o Cloud Firestore:

1. Na seção Build do Firebase console, clique em Firestore Database .
2. Clique em Criar banco de dados no painel Cloud Firestore.

3. Selecione a opção Iniciar no modo de teste e clique em Avançar após ler o aviso de isenção de responsabilidade sobre as regras de segurança.

O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Você tornará nosso banco de dados mais seguro posteriormente neste codelab.

4. Defina o local onde seus dados do Cloud Firestore são armazenados. Você pode deixar isso como padrão ou escolher uma região perto de você. Clique em Concluído para provisionar o Firestore.

Ativar armazenamento em nuvem

O aplicativo da web usa Cloud Storage para Firebase para armazenar, carregar e compartilhar fotos.

Você precisará ativar o Cloud Storage:

1. Na seção Build do Firebase console, clique em Storage .
2. Se não houver um botão Começar , isso significa que o armazenamento em nuvem já está ativado e você não precisa seguir as etapas abaixo.
3. Clique em Começar .
4. Leia o aviso sobre as regras de segurança do seu projeto Firebase e clique em Avançar .

Com as regras de segurança padrão, qualquer usuário autenticado pode gravar qualquer coisa no Cloud Storage. Você tornará nosso armazenamento mais seguro posteriormente neste codelab.

4. O local do Cloud Storage é pré-selecionado com a mesma região que você escolheu para seu banco de dados do Cloud Firestore. Clique em Concluído para concluir a configuração.

4. Instale a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para atender seu aplicativo da Web localmente, bem como implantar seu aplicativo da Web em seu projeto do Firebase.

1. Instale a CLI executando o seguinte comando npm:

npm -g install firebase-tools

2. Verifique se a CLI foi instalada corretamente executando o seguinte comando:

firebase --version

Certifique-se de que a versão do Firebase CLI seja v4.1.0 ou posterior.

3. Autorize a Firebase CLI executando o seguinte comando:

firebase login

Você configurou o modelo de app da Web para extrair a configuração do seu app para Firebase Hosting do diretório local do seu app (o repositório que você clonou anteriormente no codelab). Mas para puxar a configuração, você precisa associar seu aplicativo ao seu projeto Firebase.

4. Certifique-se de que sua linha de comando esteja acessando o diretório angularfire-start local do seu aplicativo.
5. Associe seu aplicativo ao seu projeto do Firebase executando o seguinte comando:

firebase use --add

6. Quando solicitado, selecione o ID do projeto e atribua um alias ao projeto do Firebase.

Um alias é útil se você tiver vários ambientes (produção, preparação, etc.). No entanto, para este codelab, vamos usar apenas o alias de default .

7. Siga as instruções restantes em sua linha de comando.

5. Instale o AngularFire

Antes de executar o projeto, certifique-se de ter o Angular CLI e o AngularFire configurados.

1. Em um console, execute o seguinte comando:

npm install -g @angular/cli

2. Em seguida, em um console do diretório angularfire-start , execute o seguinte comando Angular CLI:

ng add @angular/fire

Isso instalará todas as dependências necessárias para o seu projeto.

3. Quando solicitado, selecione os recursos que foram configurados no Firebase Console ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ) e siga as instruções no console.

6. Execute o aplicativo inicial localmente

Agora que você importou e configurou seu projeto, está pronto para executar o aplicativo da web pela primeira vez.

1. Em um console do diretório angularfire-start , execute o seguinte comando Firebase CLI:

firebase emulators:start

2. Sua linha de comando deve exibir a seguinte resposta:

✔  hosting: Local server: http://localhost:5000

Você está usando o emulador do Firebase Hosting para exibir nosso aplicativo localmente. O aplicativo da Web agora deve estar disponível em http://localhost:5000 . Todos os arquivos localizados no subdiretório src são servidos.

3. Usando seu navegador, abra seu aplicativo em http://localhost:5000 .

Você deve ver a interface do usuário do aplicativo FriendlyChat, que (ainda!) não está funcionando:

O aplicativo não pode fazer nada agora, mas com a sua ajuda, fará em breve! Até agora, você só definiu a IU para você.

Vamos agora construir um chat em tempo real!

7. Importe e configure o Firebase

Configurar Firebase

Você precisará configurar o SDK do Firebase para informar qual projeto do Firebase você está usando.

1. Acesse as configurações do seu projeto no console do Firebase
2. No cartão "Seus aplicativos", selecione o apelido do aplicativo para o qual você precisa de um objeto de configuração.
3. Selecione "Config" no painel de trecho do Firebase SDK.

Você descobrirá que um arquivo de ambiente /angularfire-start/src/environments/environment.ts foi gerado para você.

4. Copie o snippet de objeto de configuração e adicione-o a angularfire-start/src/firebase-config.js .

ambiente.ts

export const environment = {
  firebase: {
    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",
  },
};

Importar AngularFire

Você descobrirá que os recursos selecionados no console foram roteados automaticamente no arquivo /angularfire-start/src/app/app.module.ts . Isso permite que seu aplicativo use recursos e funcionalidades do Firebase. No entanto, para desenvolver em um ambiente local, você precisa conectá-los para usar o pacote Emulator.

1. Em /angularfire-start/src/app/app.module.ts , localize a seção imports e modifique as funções fornecidas para conectar-se ao conjunto do emulador em ambientes de não produção.

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

Durante este codelab, você usará Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging e Performance Monitoring para importar todas as bibliotecas deles. Em seus aplicativos futuros, certifique-se de importar apenas as partes do Firebase necessárias para reduzir o tempo de carregamento do seu aplicativo.

8. Configure o login do usuário

O AngularFire agora deve estar pronto para uso, pois foi importado e inicializado em app.module.ts . Agora você implementará o login do usuário usando o Firebase Authentication .

Autentique seus usuários com o Login do Google

No aplicativo, quando um usuário clica no botão Entrar com o Google , a função login é acionada. (Você já configurou isso para você!) Para este codelab, você deseja autorizar o Firebase a usar o Google como provedor de identidade. Você usará um pop-up, mas vários outros métodos estão disponíveis no Firebase.

1. No diretório angularfire-start , no subdiretório /src/app/services/ , abra chat.service.ts .
2. Encontre a função login .
3. Substitua toda a função pelo código a seguir.

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

A função logout é acionada quando o usuário clica no botão Logout .

1. Volte para o arquivo src/app/services/chat.service.ts .
2. Encontre a função logout .
3. Substitua toda a função pelo código a seguir.

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

Rastrear o estado de autenticação

Para atualizar nossa IU de acordo, você precisa de uma maneira de verificar se o usuário está conectado ou desconectado. Com o Firebase Authentication, você pode recuperar observáveis ​​no estado do usuário que serão acionados sempre que o estado de autenticação for alterado.

1. Volte para o arquivo src/app/services/chat.service.ts .
2. Encontre a atribuição de variável user$ .
3. Substitua toda a atribuição pelo código a seguir.

chat.service.ts

// Observable user
user$ = user(this.auth);

O código acima chama o user da função AngularFire que retorna um usuário observável. Ele será acionado sempre que o estado de autenticação for alterado (quando o usuário entrar ou sair). É neste ponto que você atualizará a IU para redirecionar, exibirá o usuário na navegação de cabeçalho e assim por diante. Todas essas partes da interface do usuário já foram implementadas.

Teste o login no aplicativo

1. Se seu aplicativo ainda estiver sendo exibido, atualize-o no navegador. Caso contrário, execute firebase emulators:start na linha de comando para começar a exibir o aplicativo em http://localhost:5000 e, em seguida, abra-o em seu navegador.
2. Faça login no aplicativo usando o botão de login e sua conta do Google. Se você vir uma mensagem de erro informando auth/operation-not-allowed , verifique se ativou o Google Sign-in como um provedor de autenticação no console do Firebase.
3. Após o login, sua foto de perfil e nome de usuário devem ser exibidos:

9. Escreva mensagens no Cloud Firestore

Nesta seção, você gravará alguns dados no Cloud Firestore para preencher a IU do aplicativo. Isso pode ser feito manualmente com o console do Firebase , mas você fará isso no próprio aplicativo para demonstrar uma gravação básica do Cloud Firestore.

Modelo de dados

Os dados do Cloud Firestore são divididos em coleções, documentos, campos e subcoleções. Você armazenará cada mensagem do bate-papo como um documento em uma coleção de nível superior chamada messages .

Adicionar mensagens ao Cloud Firestore

Para armazenar as mensagens de bate-papo escritas pelos usuários, você usará o Cloud Firestore .

Nesta seção, você adicionará a funcionalidade para que os usuários escrevam novas mensagens em seu banco de dados. Um usuário que clicar no botão ENVIAR acionará o snippet de código abaixo. Ele adiciona um objeto de mensagem com o conteúdo dos campos de mensagem à sua instância do Cloud Firestore na coleção messages . O método add() adiciona um novo documento com um ID gerado automaticamente à coleção.

1. Volte para o arquivo src/app/services/chat.service.ts .
2. Encontre a função addMessage .
3. Substitua toda a função pelo código a seguir.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

Teste o envio de mensagens

1. Se seu aplicativo ainda estiver sendo exibido, atualize-o no navegador. Caso contrário, execute firebase emulators:start na linha de comando para começar a exibir o aplicativo em http://localhost:5000 e, em seguida, abra-o em seu navegador.
2. Depois de fazer login, digite uma mensagem como "Olá!" e clique em ENVIAR . Isso gravará a mensagem no Cloud Firestore. No entanto, você ainda não verá os dados em seu aplicativo da Web real porque ainda precisa implementar a recuperação dos dados (a próxima seção do codelab).
3. Você pode ver a mensagem recém-adicionada no Firebase Console. Abra a interface do usuário do pacote do emulador. Na seção Build , clique em Firestore Database (ou clique aqui e você verá a coleção de mensagens com sua mensagem recém-adicionada:

10. Leia as mensagens

Sincronizar mensagens

Para ler mensagens no aplicativo, você precisará adicionar um observável que será acionado quando os dados forem alterados e, em seguida, criar um elemento de interface do usuário que mostre novas mensagens.

Você adicionará um código que escuta as mensagens recém-adicionadas do aplicativo. Nesse código, você recuperará o instantâneo da coleção messages . Você exibirá apenas as últimas 12 mensagens do bate-papo para evitar a exibição de um histórico muito longo ao carregar.

1. Volte para o arquivo src/app/services/chat.service.ts .
2. Encontre a função loadMessages .
3. Substitua toda a função pelo código a seguir.

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

Para ouvir as mensagens no banco de dados, você cria uma consulta em uma coleção usando a função collection para especificar em qual coleção os dados que você deseja ouvir estão. No código acima, você está ouvindo as alterações nas messages coleção, que é onde as mensagens de chat são armazenadas. Você também está aplicando um limite ouvindo apenas as últimas 12 mensagens usando limit(12) e ordenando as mensagens por data usando orderBy('timestamp', 'desc') para obter as 12 mensagens mais recentes.

A função collectionData usa instantâneos sob o capô. A função de retorno de chamada será acionada quando houver alguma alteração nos documentos que correspondam à consulta. Isso pode ocorrer se uma mensagem for excluída, modificada ou adicionada. Você pode ler mais sobre isso na documentação do Cloud Firestore .

Teste a sincronização de mensagens

1. Se seu aplicativo ainda estiver sendo exibido, atualize-o no navegador. Caso contrário, execute firebase emulators:start na linha de comando para começar a exibir o aplicativo em http://localhost:5000 e, em seguida, abra-o em seu navegador.
2. As mensagens que você criou anteriormente no banco de dados devem ser exibidas na interface do usuário do FriendlyChat (veja abaixo). Sinta-se à vontade para escrever novas mensagens; eles devem aparecer instantaneamente.
3. (Opcional) Você pode tentar excluir, modificar ou adicionar novas mensagens manualmente diretamente na seção Firestore do pacote do emulador; quaisquer alterações devem ser refletidas na interface do usuário.

Parabéns! Você está lendo documentos do Cloud Firestore em seu aplicativo!

11. Envie imagens

Agora você adicionará um recurso que compartilha imagens.

Embora o Cloud Firestore seja bom para armazenar dados estruturados, o Cloud Storage é mais adequado para armazenar arquivos. Cloud Storage for Firebase é um serviço de armazenamento de arquivo/blob, e você o usará para armazenar todas as imagens que um usuário compartilhar usando nosso aplicativo.

Salvar imagens no Cloud Storage

Para este codelab, você já adicionou um botão que aciona uma caixa de diálogo do seletor de arquivos. Depois de selecionar um arquivo, a função saveImageMessage é chamada e você pode obter uma referência ao arquivo selecionado. A função saveImageMessage realiza o seguinte:

1. Cria uma mensagem de chat de "espaço reservado" no feed de chat, para que os usuários vejam uma animação "Carregando" enquanto você carrega a imagem.
2. Carrega o arquivo de imagem no Cloud Storage para este caminho: /<uid>/<file_name>
3. Gera um URL publicamente legível para o arquivo de imagem.
4. Atualiza a mensagem de bate-papo com o URL do arquivo de imagem recém-carregado no lugar da imagem de carregamento temporário.

Agora você adicionará a funcionalidade para enviar uma imagem:

1. Volte para o arquivo src/index.js .
2. Encontre a função saveImageMessage .
3. Substitua toda a função pelo código a seguir.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You 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);
  }
}

Teste de envio de imagens

1. Se seu aplicativo ainda estiver sendo exibido, atualize-o no navegador. Caso contrário, execute firebase emulators:start na linha de comando para começar a exibir o aplicativo em http://localhost:5000 e, em seguida, abra-o em seu navegador.
2. Após o login, clique no botão de upload de imagem no canto inferior esquerdo e selecione um arquivo de imagem usando o seletor de arquivos. Se você está procurando uma imagem, sinta-se à vontade para usar esta bela imagem de uma xícara de café .
3. Uma nova mensagem deve aparecer na interface do usuário do aplicativo com a imagem selecionada:

Se você tentar adicionar uma imagem enquanto não estiver conectado, verá um erro informando que você deve fazer login para adicionar imagens.

12. Mostrar notificações

Agora você adicionará suporte para notificações do navegador. O aplicativo notificará os usuários quando novas mensagens forem postadas no chat. O Firebase Cloud Messaging (FCM) é uma solução de mensagens multiplataforma que permite entregar mensagens e notificações de forma confiável e sem nenhum custo.

Adicione o service worker do FCM

O aplicativo da web precisa de um service worker que receba e exiba notificações da web.

O provedor de mensagens já deveria ter sido configurado quando o AngularFire foi adicionado, verifique se o seguinte código existe na seção de importações de /angularfire-start/src/app/app.module.ts

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

app/app.module.ts

O service worker simplesmente precisa carregar e inicializar o Firebase Cloud Messaging SDK, que se encarregará de exibir as notificações.

Obter tokens de dispositivo FCM

Quando as notificações forem ativadas em um dispositivo ou navegador, você receberá um token de dispositivo . Este token de dispositivo é o que você usa para enviar uma notificação para um determinado dispositivo ou navegador específico.

Quando o usuário entra, você chama a função saveMessagingDeviceToken . É aí que você obterá o token do dispositivo FCM no navegador e o salvará no Cloud Firestore.

chat.service.ts

2. Encontre a função saveMessagingDeviceToken .
3. Substitua toda a função pelo código a seguir.

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

No entanto, esse código não funcionará inicialmente. Para que seu app consiga recuperar o token do dispositivo, o usuário precisa conceder permissão ao app para mostrar notificações (a próxima etapa do codelab).

Solicitar permissões para mostrar notificações

Quando o usuário ainda não concedeu permissão ao seu aplicativo para mostrar notificações, você não receberá um token de dispositivo. Nesse caso, você chama o método requestPermission() , que exibirá uma caixa de diálogo do navegador solicitando essa permissão ( em navegadores compatíveis ).

1. Volte para o arquivo src/app/services/chat.service.ts .
2. Encontre a função requestNotificationsPermissions .
3. Substitua toda a função pelo código a seguir.

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.');
    }
}

Obtenha o token do seu dispositivo

1. Se seu aplicativo ainda estiver sendo exibido, atualize-o no navegador. Caso contrário, execute firebase emulators:start na linha de comando para começar a exibir o aplicativo em http://localhost:5000 e, em seguida, abra-o em seu navegador.
2. Após o login, a caixa de diálogo de permissão de notificações deve aparecer:
3. Clique em Permitir .
4. Abra o console JavaScript do seu navegador. Você deve ver a seguinte mensagem: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. Copie o token do seu dispositivo. Você precisará dele para a próxima etapa do codelab.

Envie uma notificação para o seu dispositivo

Agora que você tem o token do dispositivo, pode enviar uma notificação.

1. Abra a guia Cloud Messaging do console do Firebase .
2. Clique em "Nova Notificação"
3. Insira um título de notificação e um texto de notificação.
4. No lado direito da tela, clique em "enviar uma mensagem de teste"
5. Insira o token do dispositivo que você copiou do console JavaScript do seu navegador e clique no sinal de mais ("+")
6. Clique em "teste"

Se seu aplicativo estiver em primeiro plano, você verá a notificação no console JavaScript.

Se seu aplicativo estiver em segundo plano, uma notificação deverá aparecer em seu navegador, como neste exemplo:

13. Regras de segurança do Cloud Firestore

Exibir regras de segurança do banco de dados

O Cloud Firestore usa uma linguagem de regras específica para definir direitos de acesso, segurança e validações de dados.

Ao configurar o projeto do Firebase no início deste codelab, você optou por usar as regras de segurança padrão do "modo de teste" para não restringir o acesso ao armazenamento de dados. No console do Firebase , na guia Regras da seção Banco de dados , você pode visualizar e modificar essas regras.

Neste momento, você deve ver as regras padrão, que não restringem o acesso ao armazenamento de dados. Isso significa que qualquer usuário pode ler e gravar em qualquer coleção em seu armazenamento de dados.

rules_version = '2';

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

Você atualizará as regras para restringir as coisas usando as seguintes regras:

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

As regras de segurança devem ser atualizadas automaticamente para o seu pacote de emulador.

Veja as regras de segurança do Cloud Storage

Cloud Storage for Firebase usa uma linguagem de regras específica para definir direitos de acesso, segurança e validações de dados.

Ao configurar o projeto Firebase no início deste codelab, você optou por usar a regra de segurança padrão do Cloud Storage que permite apenas que usuários autenticados usem o Cloud Storage. No console do Firebase , na guia Regras da seção Armazenamento , você pode visualizar e modificar as regras. Você deve ver a regra padrão que permite que qualquer usuário conectado leia e grave qualquer arquivo em seu depósito de armazenamento.

rules_version = '2';

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

Você atualizará as regras para fazer o seguinte:

• Permitir que cada usuário grave apenas em suas próprias pastas específicas
• Permitir que qualquer pessoa leia do Cloud Storage
• Certifique-se de que os arquivos enviados são imagens
• Restrinja o tamanho das imagens que podem ser carregadas a no máximo 5 MB

Isso pode ser implementado usando as seguintes regras:

armazenamento.regras

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

14. Implante seu aplicativo usando o Firebase Hosting

O Firebase oferece um serviço de hospedagem para atender seus ativos e aplicativos da web. Você pode implantar seus arquivos no Firebase Hosting usando a Firebase CLI. Antes de implantar, você precisa especificar em seu arquivo firebase.json quais arquivos locais devem ser implantados. Para este codelab, você já fez isso porque esta etapa foi necessária para fornecer nossos arquivos durante este codelab. As configurações de hospedagem são especificadas no atributo hosting :

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

Essas configurações informam à CLI que você deseja implantar todos os arquivos no diretório ./public ( "public": "./public" ).

1. Certifique-se de que sua linha de comando esteja acessando o diretório angularfire-start local do seu aplicativo.
2. Implante seus arquivos em seu projeto do Firebase executando o seguinte comando:

ng deploy

Em seguida, selecione a opção Firebase e siga as instruções na linha de comando.

3. O console deve exibir o seguinte:

=== 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

4. Visite seu aplicativo da web que agora está totalmente hospedado em uma CDN global usando o Firebase Hosting em dois de seus próprios subdomínios do Firebase:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

Como alternativa, você pode executar firebase open hosting:site na linha de comando.

Visite a documentação para saber mais sobre como o Firebase Hosting funciona .

Acesse a seção Hospedagem do Firebase console do seu projeto para ver informações e ferramentas úteis sobre hospedagem, incluindo o histórico de suas implantações, a funcionalidade de reverter para versões anteriores do seu aplicativo e o fluxo de trabalho para configurar um domínio personalizado.

15. Parabéns!

Você usou o Firebase para criar um aplicativo da Web de bate-papo em tempo real.

O que você cobriu

• Autenticação do Firebase
• Cloud Firestore
• SDK do Firebase para armazenamento em nuvem
• Firebase Cloud Messaging
• Monitoramento de desempenho do Firebase
• Hospedagem Firebase

Próximos passos

Saber mais

• firebase.google.com