O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Conheça o Firebase para web

Neste codelab, você aprenderá alguns dos fundamentos do Firebase para criar aplicativos da web interativos. Você criará e implantará um aplicativo de RSVP de evento e de bate-papo de livro de visitas usando vários produtos Firebase.

59abdefbcc23bbbe.png

O que você aprenderá

  • Autentique usuários com Firebase Authentication e FirebaseUI.
  • Sincronize dados usando o Cloud Firestore.
  • Escreva regras de segurança do Firebase para proteger um banco de dados.
  • Implante um aplicativo da web no Firebase Hosting.

O que você precisará

  • Um navegador de sua escolha, como o Chrome.
  • Acesso a stackblitz.com (sem conta ou login necessário).
  • Uma conta do Google, como uma conta do gmail. Recomendamos a conta de e-mail que você já usa para sua conta do GitHub. Isso permite que você use recursos avançados no StackBlitz.
  • O código de amostra do codelab. Veja a próxima etapa para obter o código.

Neste codelab, você cria e implanta um aplicativo usando StackBlitz , um editor on-line que possui vários fluxos de trabalho do Firebase integrados a ele. Stackblitz não requer instalação de software ou conta StackBlitz especial.

StackBlitz permite que você compartilhe projetos com outras pessoas. Outras pessoas que têm a URL do projeto StackBlitz podem ver seu código e bifurcar seu projeto, mas não podem editar seu projeto StackBlitz.

  1. Acesse este URL para obter o código inicial: https://stackblitz.com/edit/firebase-gtk-web-start
  2. Na parte superior da página StackBlitz, clique em Fork : f5135360aef481cc.png

Agora você tem uma cópia do código inicial como seu próprio projeto StackBlitz. Como você não fez login, sua conta se chama @anonymous , mas o projeto tem um nome exclusivo, junto com um URL exclusivo. Todos os seus arquivos e alterações são salvos neste projeto StackBlitz.

Os materiais iniciais para este codelab fornecem alguma estrutura para o aplicativo da web, incluindo algumas folhas de estilo e alguns contêineres HTML para o aplicativo. Posteriormente neste codelab, você conectará esses contêineres ao Firebase.

Para começar, vamos nos familiarizar um pouco mais com a interface StackBlitz.

  1. No StackBlitz, abra o arquivo index.html .
  2. Localize o event-details-container description-container e tente editar alguns detalhes do evento.

Conforme você edita o texto, o recarregamento automático da página no StackBlitz exibe os novos detalhes do evento. Legal, certo?

<!-- ... -->

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

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

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

  </section>

  <hr>

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

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



<!-- ... -->

A visualização do seu aplicativo deve ser semelhante a esta:

Visualização do aplicativo

908cc57ce3a5b5fe.png

Exibir as informações do evento é ótimo para seus convidados, mas apenas mostrar os eventos não é muito útil para ninguém. Vamos adicionar algumas funcionalidades dinâmicas a este aplicativo. Para isso, você precisa conectar o Firebase ao seu aplicativo. Para começar a usar o Firebase, você precisará criar e configurar um projeto do Firebase.

Crie um projeto Firebase

  1. Faça login no Firebase .
  2. No Firebase console, clique em Adicionar projeto (ou Criar um projeto ) e nomeie seu projeto do Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. Clique nas opções de criação do projeto. Aceite os termos do Firebase, se solicitado. Pule a configuração do Google Analytics, porque você não usará o Analytics para este aplicativo.

Para saber mais sobre os projetos do Firebase, consulte Noções básicas sobre os projetos do Firebase .

O aplicativo que você está construindo usa vários produtos Firebase que estão disponíveis para aplicativos da web:

  • Firebase Authentication e Firebase UI para permitir facilmente que seus usuários façam login no seu aplicativo.
  • Cloud Firestore para salvar dados estruturados na nuvem e receber notificação instantânea quando os dados forem alterados.
  • Regras de segurança do Firebase para proteger seu banco de dados.
  • Firebase Hosting para hospedar e disponibilizar seus ativos.

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

Ativar login de e-mail para Firebase Authentication

Para permitir que os usuários façam login no aplicativo da web, você usará o método de login de e- mail / senha para este codelab:

  1. No Firebase console, clique em Desenvolver 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 a guia Método de login ).
  3. Clique em E-mail / senha na lista de provedores de login , defina o botão Ativar para a posição ativado e clique em Salvar . 4c88427cfd869bee.png

Ativar Cloud Firestore

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

Habilite o Cloud Firestore:

  1. Na seção Desenvolver do Firebase console, clique em Banco de dados .
  2. No Cloud Firestore , clique em Criar banco de dados . 3ce19fd6467e51c5.png
  1. Selecione a opção Iniciar no modo de teste . Leia 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. Clique em Avançar . 56369cebb9300eb.png
  1. Selecione o local para o seu banco de dados (você pode apenas usar o padrão). Observe que este local não pode ser alterado posteriormente. 32f815f4648c3174.png
  2. Clique em Concluído .

Agora que você criou seu projeto do Firebase e ativou alguns serviços, precisa informar o código que deseja usar o Firebase, bem como qual projeto do Firebase usar.

Adicione as bibliotecas do Firebase

Para que seu aplicativo use o Firebase, você precisa adicionar as bibliotecas do Firebase ao aplicativo. Existem várias maneiras de fazer isso, conforme descrito na documentação do Firebase . Por exemplo, você pode adicionar as bibliotecas do CDN do Google ou pode instalá-las localmente usando npm e empacotá-las em seu aplicativo se estiver usando o Browserify.

StackBlitz fornece empacotamento automático, para que você possa adicionar as bibliotecas do Firebase usando instruções de importação.

Para construir este aplicativo, você usa as bibliotecas Firebase Authentication, FirebaseUI e Cloud Firestore. Para este codelab, as seguintes linhas já estão incluídas na parte superior do arquivo index.js :

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

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

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

import * as firebaseui from "firebaseui";

Adicionar um aplicativo da web Firebase ao projeto

  1. De volta ao console do Firebase, navegue até a página de visão geral do seu projeto clicando em Visão geral do projeto no canto superior esquerdo.
  2. No centro da página de visão geral do seu projeto, clique no ícone da web b286f3d215e1f578.png para criar um novo aplicativo da web do Firebase. c167e9526fad2825.png
  3. Registre o aplicativo com o apelido Web App .
  4. Para este codelab, não marque a caixa ao lado de Também configurar o Firebase Hosting para este aplicativo . Você usará o painel de visualização do StackBlitz por enquanto.
  5. Clique em Registrar aplicativo . c85ac8aa351e2560.png
  6. Copie oobjeto de configuração doFirebase para a área de transferência. ed1e598c6132f734.png
  7. Clique em Continuar para o console .

Adicione o objeto de configuração do Firebase ao seu aplicativo:

  1. De volta ao StackBlitz, vá para o arquivo index.js .
  2. Localize a linha de comentário Add Firebase project configuration object here e cole seu snippet de configuração logo abaixo do comentário.
  3. Adicione a chamada de função initializeApp para configurar o Firebase usando sua configuração exclusiva de projeto do Firebase.
// ...

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Agora que você adicionou o Firebase ao aplicativo, pode configurar um botão RSVP que registra as pessoas que usam o Firebase Authentication .

Autentique seus usuários com login de e-mail e FirebaseUI

Você precisará de um botão RSVP que solicita que o usuário faça login com seu endereço de e-mail. Você pode fazer isso conectando o FirebaseUI a um botão RSVP. O FirebaseUI é uma biblioteca que oferece uma IU pré-construída sobre o Firebase Auth.

FirebaseUI requer uma configuração (consulte as opções na documentação ) que faz duas coisas:

  1. Informa ao FirebaseUI que você deseja usar o método de login por e- mail / senha .
  2. Lida com o retorno de chamada para um login bem-sucedido e retorna falso para evitar um redirecionamento. Você não quer que a página seja atualizada, porque está construindo um aplicativo da web de uma única página.

Primeiro, adicione o código para inicializar a FirebaseUI:

  1. No StackBlitz, vá para o arquivo index.js . Observe que a configuração FirebaseUI já foi fornecida.
  2. Na parte inferior do index.js, adicione a instrução de inicialização FirebaseUI, assim:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

Em seguida, adicione um botão RSVP ao HTML:

  1. No StackBlitz, vá para o arquivo index.html .
  2. Adicione o HTML para um botão RSVP dentro do event-details-container do event-details-container conforme mostrado no exemplo abaixo.

Tenha o cuidado de usar os mesmos valores de id conforme mostrado abaixo porque, para este codelab, já existem ganchos para esses IDs específicos no arquivo index.js .

Observe que, no arquivo index.html , há um contêiner com o ID firebaseui-auth-container . Este é o ID que você passará para FirebaseUI para manter seu login.

<!-- ... -->

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

Visualização do aplicativo

ab9ad7d61bb7b28c.png

  1. Configure um ouvinte no botão RSVP e chame a função de início FirebaseUI. Isso informa ao FirebaseUI que você deseja ver a janela de login. Adicione o seguinte código ao final do index.js :
// ... 
// At the bottom

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

Teste o login no aplicativo

  1. Na janela de visualização do StackBlitz, clique no botão RSVP para entrar no aplicativo.
  • Para este codelab, você pode usar qualquer endereço de e-mail, até mesmo um endereço de e-mail falso, já que não está configurando uma etapa de verificação de e-mail para este codelab.
  • Se você vir uma mensagem de erro informando auth/operation-not-allowed ou The given sign-in provider is disabled for this Firebase project , verifique se você ativou E-mail / senha como provedor de login no console do Firebase.
  1. Acesse o painel de autenticação no console do Firebase. Na guia Usuários , você deve ver as informações da conta que inseriu para entrar no aplicativo.

Visualização do aplicativo

3024f90b52ad55fe.png

682fc0eca86a99fc.png

Adicionar estado de autenticação à IU

Agora certifique-se de que a IU reflete o fato de que você está conectado.

Você usará o callback do listener de estado do Firebase Authentication, que é notificado sempre que o status de login do usuário muda. Se houver um usuário no momento, você mudará o botão RSVP para um botão de logout.

  1. No StackBlitz, vá para o arquivo index.js .
  2. Adicione o seguinte código na parte inferior:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. No listener de botão, verifique se há um usuário atual e faça logout. Para fazer isso, substitua o startRsvpButton.addEventListener pelo seguinte:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

Agora o botão deve mostrar LOGOUT e voltar para RSVP quando for clicado.

Visualização do aplicativo

4c540450924f1607.png

Saber que os usuários estão chegando é ótimo, mas vamos dar aos convidados algo mais para fazer no aplicativo. E se eles pudessem deixar mensagens em um livro de visitas? Eles podem compartilhar por que estão ansiosos para vir ou quem eles esperam encontrar.

Para armazenar as mensagens de bate-papo que os usuários escrevem no aplicativo, você usará o Cloud Firestore .

Modelo de dados

O Cloud Firestore é um banco de dados NoSQL e os dados armazenados no banco de dados 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 guestbook .

b447950f9f993789.png

Adicionar mensagens ao Firestore

Nesta seção, você adicionará a funcionalidade para que os usuários gravem novas mensagens no banco de dados. Primeiro, você adiciona o HTML para os elementos da IU (campo de mensagem e botão de envio) e, em seguida, adiciona o código que conecta esses elementos ao banco de dados.

Para adicionar os elementos da IU de um campo de mensagem e um botão de envio, faça o seguinte:

  1. No StackBlitz, vá para o arquivo index.html .
  2. Localize o guestbook-container do guestbook-container e adicione o seguinte HTML para criar um formulário com o campo de entrada de mensagem e o botão enviar.
<!-- ... -->

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

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

 </section>

<!-- ... -->

Visualização do aplicativo

4a892284443cf73d.png

Um usuário clicando no botão ENVIAR irá acionar o trecho de código abaixo. Ele adiciona o conteúdo do campo de entrada da mensagem à coleção de guestbook de guestbook do banco de dados. Especificamente, o método add adiciona o conteúdo da mensagem a um novo documento (com um ID gerado automaticamente) à coleção de guestbook .

  1. No StackBlitz, vá para o arquivo index.js .
  2. Na parte inferior do arquivo, adicione o código a seguir.

Observe que firebase.auth().currentUser.uid é uma referência ao ID exclusivo gerado automaticamente que o Firebase Authentication fornece para todos os usuários conectados.

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

Mostrar o livro de visitas apenas para usuários conectados

Você não quer que qualquer pessoa veja o bate-papo dos convidados. Uma coisa que você pode fazer para proteger o bate-papo é permitir que apenas usuários conectados vejam o livro de visitas. Dito isso, para seus próprios aplicativos, você também desejará proteger seu banco de dados com as regras de segurança do Firebase . (Há mais informações sobre regras de segurança posteriormente no codelab.)

  1. No StackBlitz, vá para o arquivo index.js .
  2. Edite o ouvinte onAuthStateChanged para ocultar e mostrar o livro de visitas.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
 if (user){
   startRsvpButton.textContent = "LOGOUT";
   // Show guestbook to logged-in users
   guestbookContainer.style.display = "block";
 }
 else{
   startRsvpButton.textContent = "RSVP";
   // Hide guestbook for non-logged-in users
   guestbookContainer.style.display = "none";
 }
});

Teste o envio de mensagens

  1. Certifique-se de que você esteja conectado ao aplicativo.
  2. Insira uma mensagem como "Olá!" E clique em ENVIAR .

Esta ação grava a mensagem em seu banco de dados do Cloud Firestore. No entanto, você ainda não verá a mensagem em seu aplicativo da web real porque ainda precisa implementar a recuperação dos dados. Você fará isso a seguir.

Mas você pode ver a mensagem recém-adicionada no console do Firebase.

No console do Firebase, no painel Banco de dados , você deve ver a coleção de guestbook com a mensagem recém-adicionada. Se você continuar enviando mensagens, sua coleção de livros de visitas conterá muitos documentos, como este:

Console do Firebase

713870af0b3b63c.png

Sincronizar mensagens

É ótimo que os convidados possam escrever mensagens no banco de dados, mas ainda não as possam ver no aplicativo.

Para exibir mensagens, você precisará adicionar ouvintes que são acionados quando os dados são alterados e, em seguida, criar um elemento de IU que mostra novas mensagens.

Você adicionará um código que escuta as mensagens recém-adicionadas do aplicativo. Primeiro, adicione uma seção no HTML para mostrar as mensagens:

  1. No StackBlitz, vá para o arquivo index.html .
  2. Em guestbook-container , adicione uma nova seção com o ID do guestbook .
<!-- ... -->

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

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

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

 </section>

<!-- ... -->

Em seguida, registre o ouvinte que escuta as alterações feitas nos dados:

  1. No StackBlitz, vá para o arquivo index.js .
  2. Na parte inferior do arquivo, adicione o seguinte código para percorrer todos os documentos (mensagens do livro de visitas) no banco de dados:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((snaps) => {
 // Reset page
 guestbook.innerHTML = "";
 // Loop through documents in database
 snaps.forEach((doc) => {
   // Create an HTML entry for each document and add it to the chat
   const entry = document.createElement("p");
   entry.textContent = doc.data().name + ": " + doc.data().text;
   guestbook.appendChild(entry);
 });
});

Para ouvir mensagens no banco de dados, crie uma consulta em uma coleção específica usando a função .collection . O código acima ouve as mudanças na coleção de guestbook , que é onde as mensagens de bate-papo são armazenadas. As mensagens também são ordenadas por data, usando .orderBy('timestamp', 'desc') para exibir as mensagens mais recentes no topo.

A função .onSnapshot tem um parâmetro: uma função de retorno de chamada. A função de retorno de chamada é acionada quando há alguma alteração nos documentos que correspondem à consulta. Isso pode acontecer se uma mensagem for excluída, modificada ou adicionada. Para obter mais informações, consulte a documentação do Cloud Firestore .

Testar mensagens de sincronização

O Cloud Firestore sincroniza dados de forma automática e instantânea com clientes inscritos no banco de dados.

  1. As mensagens que você criou anteriormente no banco de dados devem ser exibidas no aplicativo. Sinta-se à vontade para escrever novas mensagens; eles devem aparecer instantaneamente.
  2. Se você abrir seu espaço de trabalho em várias janelas ou guias, as mensagens serão sincronizadas em tempo real entre as guias.
  3. (Opcional) Você pode tentar excluir, modificar ou adicionar manualmente novas mensagens diretamente na seção Banco de dados do console do Firebase; todas as alterações devem aparecer na IU.

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

Avaliação do aplicativo p

e30df0a9614bae7d.png

Você inicialmente configurou o Cloud Firestore para usar o modo de teste, o que significa que seu banco de dados está aberto para leituras e gravações. No entanto, você só deve usar o modo de teste durante os estágios iniciais de desenvolvimento. Como prática recomendada, você deve configurar regras de segurança para seu banco de dados à medida que desenvolve seu aplicativo. A segurança deve ser parte integrante da estrutura e do comportamento do seu aplicativo.

As regras de segurança permitem que você controle o acesso a documentos e coleções em seu banco de dados. A sintaxe de regras flexíveis permite criar regras que correspondem a qualquer coisa, desde todas as gravações em todo o banco de dados até operações em um documento específico.

Você pode escrever regras de segurança para o Cloud Firestore no Firebase console:

  1. Na seção Desenvolver do Firebase console, clique em Banco de dados e selecione a guia Regras (ou clique aqui para ir diretamente para a guia Regras ).
  2. Você deve ver as seguintes regras de segurança padrão, junto com um aviso sobre as regras serem públicas.

7767a2d2e64e7275.png

Identificar coleções

Primeiro, identifique as coleções nas quais o aplicativo grava dados.

Em match /databases/{database}/documents , identifique a coleção que você deseja proteger:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

Adicionar regras de segurança

Como você usou o UID de autenticação como um campo em cada documento do livro de visitas, você pode obter o UID de autenticação e verificar se qualquer pessoa que tentar gravar no documento possui um UID de autenticação correspondente.

Adicione as regras de leitura e gravação ao seu conjunto de regras, conforme mostrado abaixo:

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

Agora, para o livro de visitas, apenas usuários conectados podem ler mensagens (qualquer mensagem!), Mas você só pode criar uma mensagem usando seu ID de usuário. Também não permitimos que as mensagens sejam editadas ou excluídas.

Adicionar regras de validação

Adicione validação de dados para garantir que todos os campos esperados estejam presentes no documento:

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

Redefinir ouvintes

Como seu aplicativo agora só permite que usuários autenticados façam login, você deve mover a consulta do firestore do livro de visitas dentro do ouvinte de autenticação. Caso contrário, ocorrerão erros de permissão e o aplicativo será desconectado quando o usuário fizer logout.

  1. Puxe a coleção de onSnapshot visitas no ouvinte de onSnapshot para uma nova função chamada subscribeGuestbook . Além disso, atribua os resultados da função onSnapshot à variável guestbookListener .

O ouvinte do Firestore onSnapshot retorna uma função de cancelamento de assinatura que você poderá usar para cancelar o ouvinte do instantâneo posteriormente.

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((snaps) => {
   // Reset page
   guestbook.innerHTML = "";
   // Loop through documents in database
   snaps.forEach((doc) => {
     // Create an HTML entry for each document and add it to the chat
     const entry = document.createElement("p");
     entry.textContent = doc.data().name + ": " + doc.data().text;
     guestbook.appendChild(entry);
   });
 });
};
  1. Adicione uma nova função abaixo chamada unsubscribeGuestbook . Verifique se a variável guestbookListener não é nula e chame a função para cancelar o ouvinte.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. Por fim, adicione as novas funções ao retorno de chamada onAuthStateChanged (use as duas etapas a seguir).
  2. Adicione subscribeGuestbook() na parte inferior de if (user) .
  3. Adicione unsubscribeGuestbook() na parte inferior da instrução else .
// ...
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

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

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

O Firebase oferece um serviço de hospedagem para servir os ativos do seu aplicativo da web. Você pode implantar seus arquivos e configuração de hospedagem no Firebase Hosting usando a interface de linha de comando (CLI) do Firebase. Mas para este codelab, você está usando StackBlitz , que integrou a Firebase CLI em seu espaço de trabalho!

Você pode usar a integração do Firebase do StackBlitz para informar ao StackBlitz em qual projeto do Firebase você gostaria de implantar ativos:

  1. Se você ainda não se inscreveu no GitHub no StackBlitz, clique em Entrar no canto superior direito e insira as credenciais da sua conta GitHub.

99a41778bb3c194c.png

  • Se você já tem uma conta GitHub, faça login usando sua conta GitHub.
  • Se você ainda não tem uma conta GitHub, crie uma conta GitHub usando o mesmo endereço de e-mail usado para fazer login no Firebase.
  1. Agora deve haver um ícone do Firebase no painel esquerdo.

2981c2e3ad13c2c1.png 3. Clique em Entrar no Google . Faça login usando o mesmo endereço de e-mail que você usou para fazer login no Firebase. 4. Na lista de projetos do Firebase, selecione seu projeto Firebase-Web-Codelab .

A implantação no Firebase Hosting com StackBlitz é literalmente uma operação de um clique:

  1. No espaço de trabalho StackBlitz, clique em Implementar no lado esquerdo da página. Sim, é isso. Um passo! 8fe6c0bfc04c8935.png

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

Vá para a seção de hospedagem do Firebase console do seu projeto para ver ferramentas e informações úteis de 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.

Registre o status RSVP de um participante

No momento, seu aplicativo apenas permite que as pessoas comecem a bater papo se estiverem interessadas no evento. Além disso, a única maneira de saber se alguém está vindo é postar no chat. Vamos nos organizar e informar às pessoas quantas pessoas virão.

Você adicionará um botão de alternância para registrar as pessoas que desejam participar do evento e, em seguida, coletará uma contagem de quantas pessoas comparecerão.

  1. No StackBlitz, vá para o arquivo index.html .
  2. Em guestbook-container , adicione um conjunto de botões SIM e NÃO , assim:
<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

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

Visualização do aplicativo

73ca99ca35c13ee7.png

Em seguida, registre o ouvinte para cliques de botão. Se o usuário clicar em SIM , use seu UID de autenticação para salvar a resposta no banco de dados.

  1. No StackBlitz, vá para o arquivo index.js .
  2. Na parte inferior do arquivo, adicione o seguinte código para ouvir o status RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. Crie uma nova coleção chamada attendees , em seguida, registre uma referência de documento se o botão RSVP for clicado.
  2. Defina essa referência como true ou false dependendo de qual botão é clicado.

Primeiro, para rsvpYes :

// ...

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

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

Então, o mesmo para rsvpNo , mas com o valor false :

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

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

Adicionar regras

Como você já tem algumas regras configuradas, os novos dados que você está adicionando com os botões serão rejeitados. Você precisará atualizar as regras para permitir a adição à coleção de attendees .

Para a coleção dos attendees , como você usou o UID de autenticação como o nome do documento, você pode pegá-lo e verificar se o uid do remetente é o mesmo que o documento que eles estão escrevendo. Você permitirá que todos leiam a lista de participantes (já que não há dados privados lá), mas apenas o criador deve ser capaz de atualizá-la.

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

Adicionar regras de validação

Adicione validação de dados para garantir que todos os campos esperados estejam presentes no documento:

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

    }
  }
}

(Opcional) Agora você pode visualizar os resultados de clicar nos botões. Acesse o painel do Cloud Firestore no Firebase console.

Leia o status RSVP

Agora que você registrou as respostas, vamos ver quem está vindo e refletir isso na IU.

  1. No StackBlitz, vá para o arquivo index.html .
  2. No description-container , adicione um novo elemento com o ID do number-attending .
<!-- ... -->

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

<!-- ... -->

Em seguida, registre o ouvinte para a coleção de attendees e conte o número de respostas SIM :

  1. No StackBlitz, vá para o arquivo index.js .
  2. Na parte inferior do arquivo, adicione o código a seguir para ouvir o status RSVP e contar cliques SIM .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. Por fim, vamos destacar o botão correspondente ao status atual. Verifique se o UID de autenticação atual tem uma entrada na coleção de attendees e, em seguida, defina a classe como clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((doc) => {
   if (doc && doc.data()){
     const attendingResponse = doc.data().attending;

     // Update css classes for buttons
     if (attendingResponse){
       rsvpYes.className="clicked";
       rsvpNo.className="";
     }
     else{
       rsvpYes.className="";
       rsvpNo.className="clicked";
     }
   }
 });
}
  1. Além disso, vamos fazer uma função para cancelar a assinatura. Isso será usado quando o usuário fizer logout.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. Chame as funções do ouvinte de autenticação.
// ...

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

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

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

}
});
  1. Tente fazer login como vários usuários e veja o aumento da contagem a cada clique adicional do botão SIM .

Visualização do aplicativo

3df607d3e0b3c35.png

Você usou o Firebase para criar um aplicativo da web interativo e em tempo real!

O que cobrimos

  • Firebase Authentication
  • FirebaseUI
  • Cloud Firestore
  • Regras de segurança do Firebase
  • Firebase Hosting

Próximos passos

  • Quer saber mais sobre outros produtos Firebase? Talvez você queira armazenar arquivos de imagem que os usuários carregam? Ou enviar notificações para seus usuários? Confira o codelab da web do Firebase para ver um codelab que se aprofunda em muitos outros produtos do Firebase para a web.
  • Quer saber mais sobre o Cloud Firestore? Talvez você queira aprender sobre subcoleções e transações? Vá para o codelab da Web do Cloud Firestore para ver um codelab que se aprofunda no Cloud Firestore. Ou confira esta série do YouTube para conhecer o Cloud Firestore !

Saber mais

Como foi?

Adoraríamos receber seu feedback! Por favor, preencha um formulário (muito) curto aqui .