Você já se perguntou como funciona o WhatsApp ou qualquer outro aplicativo de mensagens? Ou como diferentes usuários podem se comunicar perfeitamente e trocar mensagens e fotos em conversas? Criar um aplicativo de bate-papo simplificado pode ser uma ótima maneira de entender a funcionalidade básica dos aplicativos de bate-papo.
Construir um aplicativo de bate-papo pode parecer uma tarefa assustadora, mas o Firebase simplifica todo o processo. Ele permite que você inicialize rapidamente qualquer aplicativo, eliminando a necessidade de um back-end dedicado ou configuração de banco de dados. Verificar Melhores aplicativos de bate-papo privado criptografados para usuários do Linux.
Links Rápidos
O que é o Firebase Cloud Database?
Firebase é uma plataforma de desenvolvimento baseada em nuvem que fornece serviços de back-end (BaaS), como um banco de dados em tempo real, autenticação e hospedagem. SDK) que é usado para obter compatibilidade com diferentes sistemas.
É uma plataforma que visa fornecer uma abordagem abrangente para a construção, melhoria e desenvolvimento de sites e aplicativos móveis, por meio de muitas ferramentas que qualquer desenvolvedor precisa para obter serviços que exigirão muito tempo e esforço para serem construídos manualmente, especialmente para aqueles que o fazem. não tem experiência suficiente.
No centro de seus serviços de banco de dados está um banco de dados em nuvem NoSQL que usa um modelo de documento para armazenar dados em tempo real.
Configuração do projeto Firebase e cliente React
Perceber: Você pode verificar o código do aplicativo de chat disponível em Repositório GitHub É gratuito para uso sob a licença MIT. Certifique-se de que o Firebase esteja configurado antes de executar o aplicativo.
Para começar, vá para Firebase E se inscrever para uma conta. No Painel do usuário, clique em Estabelecimento do projeto Para configurar um novo projeto.
Depois de criar seu projeto, selecione um ícone desenvolvimento web na página Visão geral do projeto e clique para registrar sua inscrição. O registro no Firebase permite que você acesse e use seus recursos para criar seu próprio aplicativo da web React.
Anote as instruções para integrar o Firebase SDK ao seu projeto em Complemento SDK do Firebase.
Em seguida, crie seu aplicativo React e instale o Firebase SDK em seu aplicativo. Além disso, importe o pacote react-firebase-hooks, que simplifica o trabalho com o Firebase dentro do React.
npm install firebase react-firebase-hooks
Configure o Firebase em seu aplicativo React
Em seu diretório src personalizado, 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.
import { initializeApp } from “firebase/app”;
import { getFirestore } from ‘@firebase/firestore’;
import { getAuth, GoogleAuthProvider } from “firebase/auth”;
const firebaseConfig = {
apiKey: “API_KEY”,
authDomain: “authDomain”,
projectId: “project ID”,
storageBucket: “storage Bucket”,
messagingSenderId: “messanging sender ID”,
appId: “App ID”
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app)
const provider = new GoogleAuthProvider();
export {db, auth, provider}
Com a configuração do projeto Firebase, você pode configurar as funções de autenticação Firebase, Firestore e Firebase para uso em seu aplicativo.
Configuração do banco de dados do Firestore
O Cloud Firestore é um banco de dados de desenvolvimento móvel, web e de servidor flexível e escalável do Firebase e do Google Cloud. Como o Firebase Realtime Database, ele sincroniza seus dados entre aplicativos clientes por meio de ouvintes em tempo real e oferece suporte offline para telefone e Web para que você possa criar aplicativos responsivos que funcionam independentemente da latência da rede ou da conexão com a Internet. O Cloud Firestore também oferece integração perfeita com outros produtos Firebase e Google Cloud, incluindo a funcionalidade de nuvem.
Este banco de dados armazenará dados do usuário e mensagens de bate-papo. Vá para a página de visão geral do seu projeto e clique no botão Criar um banco de dados Para configurar o Cloud Firestore.
Determine o estilo e a localização do banco de dados.
Por fim, atualize suas regras de banco de dados Firestore para permitir leituras e gravações de seu aplicativo React. Clique na guia Regras e altere a regra de leitura e gravação para Verdadeiro.
Depois de configurar o banco de dados, você pode criar um cluster de teste, que é o banco de dados NoSQL no Firestore. As coleções consistem em documentos como registros.
Para criar um novo grupo, clique no botão início do grupo e forneça o ID do grupo — o nome da tabela.
Integração de autenticação de usuário do Firebase
O Firebase fornece soluções de autenticação e autorização prontas para implementação, como provedores de login social ou um provedor de senha de e-mail personalizado.
Na página de visão geral do projeto, selecione Autenticação Lista de produtos oferecidos. Depois disso, clique no botão Definindo o método de login Para configurar o provedor do Google. Localizar Google Na lista de provedores, ative-o e preencha o e-mail de suporte do projeto.
Criar o componente de login
Depois de configurar o provedor no Firebase, vá até a pasta do seu projeto e crie uma nova pasta, nomeie-a com componentes , no manual / src. Dentro da pasta de componentes, crie um novo arquivo: SignIn.js.
No arquivo SignIn.js, adicione o código abaixo:
import React from ‘react’;
import { signInWithPopup } from “firebase/auth”;
import { auth, provider } from ‘../firebase-config’
function SignIn() {
const signInWithGoogle = () => {
signInWithPopup(auth,provider)
};
return (
<div>
<button onClick={signInWithGoogle}>Sign In With Google</button>
</div>
)
}
export default SignIn
- Este código importa a autenticação e os objetos Google Provider que você configurou no arquivo de configuração do Firebase.
- Em seguida, você define a função de login que o método implementa EntrarComPopup do Firebase, que usa os componentes de autenticação e provedor como parâmetros. Esta função autenticará os usuários com seus logins sociais do Google.
- Finalmente retorna um div contendo um botão que quando clicado chama uma função Faça login no Google.
Criar um bloco de bate-papo
Este componente abrigará o principal recurso do aplicativo de bate-papo que você está criando, que é a janela de bate-papo. Crie um novo arquivo dentro da pasta de componentes e nomeie-o como Chat.js.
Adicione o código abaixo no arquivo Chat.js:
import React, { useState, useEffect } from ‘react’
import { db, auth } from ‘../firebase-config’
import SendMessage from ‘./SendMessage’
import { collection, query, limit, orderBy, onSnapshot } from “firebase/firestore”;
function Chat() {
const [messages, setMessages] = useState([])
const { userID } = auth.currentUser
useEffect(() => {
const q = query(
collection(db, “messages”),
orderBy(“createdAt”),
limit(50)
);
const data = onSnapshot(q, (QuerySnapshot) => {
let messages = [];
QuerySnapshot.forEach((doc) => {
messages.push({ …doc.data(), id: doc.id });
});
setMessages(messages)
});
return () => data;
}, []);
return (
<div>
<button onClick={() => auth.signOut()}>Sign Out</button>
{messages && messages.map((message, id, uid, photoURL) =>
<div
key={id}
className={`msg ${userID === auth.currentUser.uid ? ‘sent’ : ‘received’}`}>
<img src={message.photoURL} />
<p>{message.text}</p>
</div>
)}
<SendMessage />
</div>
)
}
export default Chat
- Esse código importa o banco de dados, os componentes de autenticação configurados no arquivo firebase-config.js e os métodos personalizados do Firestore que facilitam o manuseio dos dados armazenados.
- Você implementa métodos coleção و pergunta و limitar و ordenar por , Além de no instantâneo Do Firestore para consultar e capturar os dados atualmente armazenados na coleção de mensagens do Firestore, classificados por hora de criação e ler apenas as 50 mensagens mais recentes.
- Os métodos Firestore são encapsulados e executados dentro de um Hook useEfeito Para garantir que as mensagens sejam exibidas imediatamente, sempre que você clicar no botão enviar, sem atualizar a janela da página. Depois que os dados são lidos, eles são armazenados no estado de mensagem.
- Em seguida, você verifica a distinção entre mensagens enviadas e recebidas - se o ID do usuário armazenado com a mensagem corresponde ao ID do usuário conectado e, em seguida, define o nome da classe e aplica o estilo apropriado à mensagem.
- Finalmente, mostra Mensagens, um botão Logout e Configurado Enviar mensagem. chamadas de botão Sair com um terapeuta onClick método auth.signOut() fornecido pelo Firebase.
Criar um componente de envio de mensagem
Crie um novo arquivo, o arquivo SendMessage.js, e adicione o código abaixo:
import React, { useState } from ‘react’
import { db, auth } from ‘../firebase-config’
import { collection, addDoc, serverTimestamp} from “firebase/firestore”;
function SendMessage() {
const [msg, setMsg] = useState(‘’)
const messagesRef = collection(db, “messages”);
const sendMsg = async (e) => {
const { uid, photoURL } = auth.currentUser
await addDoc(messagesRef, {
text: msg,
createdAt: serverTimestamp(),
uid: uid,
photoURL: photoURL
})
setMsg(‘’);
};
return (
<div>
<input placeholder=’Message…’
type=”text” value={msg}
onChange={(e) => setMsg(e.target.value)}
/>
<button onClick={sendMsg}>Send</button>
</div>
)
}
export default SendMessage
- Semelhante ao componente Chat.js, importe os métodos Firestore, o banco de dados configurado e os componentes de autenticação.
- Para enviar mensagens, uma função é executada Enviar mensagem método adicionarDoc Firestore que cria um novo documento no banco de dados e armazena os dados passados.
- pegue o método adicionarDoc Dois parâmetros, um objeto de dados e um objeto de referência que indicam qual coleção você deseja armazenar os dados. Como o Firestore coleta define o grupo para armazenar dados.
- Por fim, um campo de entrada e um botão são exibidos na página da Web para permitir que os usuários enviem mensagens ao banco de dados.
Importar componentes em um arquivo App.js
Por fim, em seu arquivo App.js, importe os componentes de login e chat para exibição em seu navegador.
No arquivo App.js, exclua o código padrão e adicione o código abaixo:
import Chat from ‘./components/Chat’;
import SignIn from ‘./components/SignIn’;
import { auth } from ‘./firebase-config.js’
import { useAuthState } from ‘react-firebase-hooks/auth’
function App() {
const [user] = useAuthState(auth)
return (
<>
{user ? <Chat /> : <SignIn />}
</>
);
}
export default App;
Esse código expõe condicionalmente os componentes de login e bate-papo verificando o status de autenticação do usuário. O estado de autenticação é destruído pelo componente de autenticação Firebase com a ajuda do gancho useAuthState do pacote react-firebase-hooks.
Que verifica se o usuário está autenticado e retorna o componente de chat, caso contrário, o componente de login é apresentado. Por fim, adicione qualquer estilo CSS, ative o servidor de desenvolvimento para salvar suas alterações e acesse seu navegador para ver os resultados finais. Verificar Como criar um player de vídeo no React.
Trabalhos sem servidor do Firebase
O Firebase oferece uma variedade de recursos além da autenticação e um banco de dados em tempo real. Você pode usar sua funcionalidade sem servidor para iniciar 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. Você pode ver agora Como criar objetos de arrastar e soltar no React.
