Já se perguntou como funciona o WhatsApp? Ou como diferentes usuários se conectam e trocam mensagens em chats? Criar um aplicativo de bate-papo simplificado pode ser uma ótima maneira de entender as principais funcionalidades por trás dos aplicativos de bate-papo.
Construir um aplicativo de bate-papo pode parecer uma tarefa assustadora, no entanto, o Firebase simplifica o processo. Ele permite inicializar rapidamente qualquer aplicativo, eliminando a necessidade de um back-end personalizado ou configuração de banco de dados.
O que é banco de dados em nuvem do Firebase
O Firebase é uma plataforma de desenvolvimento baseada em nuvem que oferece uma variedade de serviços de back-end, como banco de dados em tempo real, autenticação e hospedagem. No centro de seus serviços de banco de dados, está um banco de dados em nuvem NoSQL que utiliza um modelo de documento para armazenar dados em tempo real.
Configurar o Firebase Project e o React Client
Você pode verificar o código do aplicativo de chat disponível neste Repositório GitHub e é gratuito para uso sob a licença MIT. Certifique-se de configurar o Firebase antes de executar o aplicativo.
Para começar, acesse Firebase e inscreva-se em uma conta. No painel do usuário, clique em Criar Projeto para montar um novo projeto.
Depois de criar seu projeto, selecione e clique no ícone de código na página de visão geral do projeto para registrar seu aplicativo. O registro no Firebase permite que você acesse e utilize seus recursos para criar seu aplicativo da web React.
Observe as instruções para integrar o SDK do Firebase ao seu projeto em Adicionar Firebase SDK.
Próximo, criar um aplicativo React e instale o Firebase SDK em seu aplicativo. Além disso, importe o react-firebase-hooks pacote que simplifica o trabalho com o Firebase In React.
npm instalar firebase react-firebase-hooksConfigurar o Firebase em seu aplicativo React
Na tua origem diretório, crie um novo arquivo e nomeie-o, firebase-config.js. Copie as variáveis de ambiente do painel do projeto Firebase e cole-as neste arquivo.
importar {inicializarAplicativo} de"firebase/aplicativo";
importar { getFirestore } de'@firebase/firestore';
importar { getAuth, GoogleAuthProvider } de"firebase/autenticação";const firebaseConfig = {
Chave API: "CHAVE API",
domínio de autenticação: "authDomain",
ID do projeto: "código do projeto",
armazenamentoBalde: "balde de armazenamento",
messageSenderId: "ID do remetente de mensagens",
appId: "ID do aplicativo"
};
const app = initializeApp (firebaseConfig);
const db = getFirestore (aplicativo);
const auth = getAuth (aplicativo)
const provedor = novo GoogleAuthProvider();
exportar {db, auth, provedor}
Usando a configuração do seu projeto Firebase, você inicializa as funções de autenticação do Firebase, Firestore e Firebase para uso em seu aplicativo.
Configurar um banco de dados do Firestore
Este banco de dados armazenará dados do usuário e mensagens de bate-papo. Vá até a página de visão geral do seu projeto e clique em Criar banco de dados botão para configurar seu Cloud Firestore.
Defina o modo e o local do banco de dados.
Por fim, atualize as regras do banco de dados Firestore para permitir operações de leitura e gravação do aplicativo React. Clique no Regras guia e altere o Leia e escreva regra para verdadeiro.
Depois de configurar o banco de dados, você pode criar uma coleção de demonstração - este é um banco de dados NoSQL no Firestore. As coleções são compostas de documentos como registros.
Para criar uma nova coleção, clique no botão Iniciar coleção botão e forneça um ID de coleção — um nome de tabela.
Integre a autenticação de usuário do Firebase
O Firebase fornece recursos prontos para uso autenticação e autorização soluções fáceis de implementar, como provedores de login social ou provedor de senha de e-mail personalizado.
Na página de visão geral do seu projeto, selecione Autenticação da lista de produtos exibidos. A seguir, clique no Método de login de configuração botão para configurar o provedor do Google. Selecione Google na lista de Provedores, habilite-o e preencha o e-mail de suporte do projeto.
Criar um componente de login
Depois de configurar o provedor no Firebase, vá para a pasta do projeto e crie uma nova pasta, componentes, no /src diretório. Dentro de componentes pasta, crie um novo arquivo: SignIn.js.
No SignIn.js arquivo, adicione o código abaixo:
importar Reagir de'reagir';
importar { entrarComPopup } de"firebase/autenticação";
importar { autent, provedor } de'../firebase-config'
funçãoEntrar() {
const signInWithGoogle = () => {
signInWithPopup (autenticação, provedor)
};
retornar (
exportarpadrão Entrar
- Esse código importa a autenticação e os objetos do provedor do Google que você inicializou no arquivo de configuração do Firebase.
- Em seguida, define um Entrar função que implementa o signInWithPopup método do Firebase que leva no autenticação e fornecedor componentes como parâmetros. Esta função autenticará os usuários com seus logins sociais do Google.
- Por fim, retorna um div contendo um botão que, ao ser clicado, chama o Faça login no Google função.
Criar um componente de bate-papo
Este componente abrigará o principal recurso do seu aplicativo de bate-papo, a janela de bate-papo. Crie um novo arquivo dentro do componentes pasta e nomeie-a Chat.js.
Adicione o código abaixo no Chat.js Arquivo:
importar Reagir, { useState, useEffect } de'reagir'
importar { banco de dados, autenticação } de'../firebase-config'
importar Enviar mensagem de'./Enviar mensagem'
importar { coleção, consulta, limite, orderBy, onSnapshot } de"firebase/firestore";funçãoBater papo() {
const [mensagens, setMessages] = useState([])
const { userID } = auth.currentUser
useEffect(() => {
const q = consulta(
coleção (db, "mensagens"),
ordenar por("criado em"),
limite(50)
);
const dados = onSnapshot (q, (QuerySnapshot) => {
deixar mensagens = [];
QuerySnapshot.forEach((documento) => {
mensagens.push({ ...doc.data(), eu ia: doc.id });
});
setMessages (mensagens)
});
retornar() => dados;
}, []);
retornar (
- Este código importa o banco de dados, os componentes de autenticação inicializados no firebase-config.js file e métodos personalizados do Firestore que facilitam a manipulação dos dados armazenados.
- Ele implementa o coleção, consulta, limite, ordenar por, e no instantâneo Métodos do Firestore para consultar e capturar um instantâneo dos dados atualmente armazenados na coleção de mensagens do Firestore, ordenados pelo momento em que foram criados e lê apenas as 50 mensagens mais recentes.
- Os métodos do Firestore são encapsulados e executados dentro de um useEffect gancho para garantir que as mensagens sejam renderizadas imediatamente, toda vez que você pressionar o botão enviar, sem atualizar a janela da página. Depois que os dados são lidos, eles são armazenados no estado de mensagens.
- Em seguida, ele verifica a diferença entre mensagens enviadas e recebidas — se o ID do usuário armazenado com a mensagem corresponder o ID do usuário para o usuário conectado e, posteriormente, define o nome da classe e aplica o estilo apropriado para o mensagem.
- Por fim, ele processa as mensagens, uma sair botão e o Enviar mensagem componente. O sair botão ao clicar manipulador chama o auth.signOut() fornecido pelo Firebase.
Criar um componente de envio de mensagem
Crie um novo arquivo, SendMessage.js arquivo e adicione o código abaixo:
importar Reagir, { useState } de'reagir'
importar { banco de dados, autenticação } de'../firebase-config'
importar { coleção, addDoc, servidorTimestamp} de"firebase/firestore";funçãoEnviar mensagem() {
const [msg, setMsg] = useState('')
const messageRef = coleção (db, "mensagens");
const enviarMsg = assíncrono (e) => {
const { uid, fotoURL } = auth.currentUser
aguardam addDoc (messagesRef, {
texto: mensagem,
criadoAt: serverTimestamp(),
uid: uid,
fotoURL: fotoURL
})
setMsg('');
};retornar (
'Mensagem...'
tipo="texto" valor={msg}
onChange={(e) => setMsg (e.target.value)}
/>
exportarpadrão Enviar mensagem
- Semelhante ao Chat.js componente, importe os métodos do Firestore e o banco de dados inicializado e os componentes de autenticação.
- Para enviar mensagens, o Enviar mensagem função implementa o addDoc Método Firestore que cria um novo documento no banco de dados e armazena os dados passados.
- O addDoc O método aceita dois parâmetros, o objeto de dados e um objeto de referência que indica qual coleção você deseja armazenar os dados. O método de coleta Firestore especifica a coleção para armazenar dados.
- Por fim, ele renderiza um campo de entrada e um botão na página da Web para permitir que os usuários enviem mensagens ao banco de dados.
Importar os componentes no arquivo App.js
Por último, em seu App.js arquivo, importe o Entrar e Bater papo componentes para renderizá-los em seu navegador.
Na tua App.js arquivo, exclua o código clichê e adicione o código abaixo:
importar Bater papo de'./components/Chat';
importar Entrar de'./components/SignIn';
importar { aut } de'./firebase-config.js'
importar { useAuthState } de'react-firebase-hooks/auth'
funçãoAplicativo() {
const [usuário] = useAuthState (autenticação)
retornar (
<>
{do utilizador? <Bater papo />: <Entrar />}
</>
);
}
exportarpadrão Aplicativo; Este código renderiza o Entrar e Bater papo componentes condicionalmente, verificando o status de autenticação de um usuário. O status de autenticação é desestruturado do componente de autenticação Firebase com a ajuda do useAuthState gancho do react-firebase-hooks pacote.
Ele verifica se um usuário está autenticado e processa o Bater papo componente caso contrário o Entrar componente é renderizado. Por fim, adicione qualquer estilo CSS, ative o servidor de desenvolvimento para salvar as alterações e acesse o navegador para ver os resultados finais.
Funcionalidades sem servidor do Firebase
O Firebase fornece uma variedade de recursos além de um banco de dados e autenticação em tempo real. Você pode usar suas funcionalidades sem servidor para inicializar e escalar rapidamente qualquer aplicativo. Além disso, o Firebase integra-se perfeitamente com aplicativos da Web e móveis, facilitando a criação de aplicativos multiplataforma.
