¿Alguna vez te has preguntado cómo funciona WhatsApp? ¿O cómo los diferentes usuarios se conectan e intercambian mensajes en los chats? La creación de una aplicación de chat simplificada puede ser una excelente manera de comprender las funcionalidades principales detrás de las aplicaciones de chat.
Crear una aplicación de chat puede parecer una tarea abrumadora; sin embargo, Firebase simplifica el proceso. Le permite iniciar rápidamente cualquier aplicación, eliminando la necesidad de un backend personalizado o una configuración de base de datos.
¿Qué es la base de datos en la nube de Firebase?
Firebase es una plataforma de desarrollo basada en la nube que ofrece una variedad de servicios de backend, como una base de datos en tiempo real, autenticación y alojamiento. En el centro de sus servicios de base de datos, se encuentra una base de datos en la nube NoSQL que utiliza un modelo de documento para almacenar datos en tiempo real.
Configurar el proyecto Firebase y el cliente React
Puede consultar el código de la aplicación de chat disponible en este repositorio GitHub y su uso es gratuito bajo la licencia MIT. Asegúrese de configurar Firebase antes de ejecutar la aplicación.
Para empezar, dirígete a base de fuego y registrarse para obtener una cuenta. En el panel de usuario, haga clic en Crear proyecto para montar un nuevo proyecto.
Después de crear su proyecto, seleccione y haga clic en el icono de código en la página de descripción general del proyecto para registrar su aplicación. Registrarse en Firebase le permite acceder y utilizar sus recursos para crear su aplicación web React.
Tome nota de las instrucciones para integrar el SDK de Firebase a su proyecto en Agregar el SDK de Firebase.
Próximo, crear una aplicación React e instale el SDK de Firebase en su aplicación. Además, importe el reaccionar-firebase-ganchos paquete que simplifica el trabajo con Firebase In React.
npm instalar firebase reaccionar-firebase-ganchosConfigure Firebase en su aplicación React
En tus origen directorio, cree un nuevo archivo y asígnele un nombre, firebase-config.js. Copie las variables de entorno del panel de su proyecto de Firebase y péguelas en este archivo.
importar {iniciarAplicación} de"base de fuego/aplicación";
importar { getFirestore } de'@firebase/firestore';
importar { getAuth, proveedor de autenticación de Google } de"base de fuego/autorización";constante firebaseConfig = {
Clave API: "CLAVE API",
dominio de autenticación: "authDomain",
Projecto ID: "Projecto ID",
cubo de almacenamiento: "cubo de almacenamiento",
Id del remitente de mensajería: "Id. de remitente de mensajería",
ID de aplicación: "Identificación de la aplicación"
};
constante aplicación = initializeApp (firebaseConfig);
constante db = getFirestore (aplicación);
constante auth = getAuth (aplicación)
constante proveedor = nuevo proveedor de autenticación de Google();
exportar {db, autenticación, proveedor}
Con la configuración de su proyecto de Firebase, inicializa las funciones de autenticación de Firebase, Firestore y Firebase para su uso dentro de su aplicación.
Configurar una base de datos de Firestore
Esta base de datos almacenará datos de usuario y mensajes de chat. Dirígete a la página de resumen de tu proyecto y haz clic en Crear base de datos botón para configurar su Cloud Firestore.
Defina el modo y la ubicación de la base de datos.
Por último, actualice las reglas de la base de datos de Firestore para permitir operaciones de lectura y escritura desde la aplicación React. Clickea en el Normas pestaña y cambiar la Lee y escribe regla para verdadero.
Una vez que haya terminado de configurar la base de datos, puede crear una colección de demostración: esta es una base de datos NoSQL en Firestore. Las colecciones están formadas por documentos a modo de registros.
Para crear una nueva colección, haga clic en el Iniciar colección y proporcione un ID de colección, un nombre de tabla.
Integrar la autenticación de usuario de Firebase
Firebase ofrece servicios listos para usar autenticacion y autorizacion soluciones que son fáciles de implementar, como proveedores de inicio de sesión social o el proveedor de contraseña de correo electrónico personalizado.
En la página de descripción general de su proyecto, seleccione Autenticación de la lista de productos mostrados. A continuación, haga clic en el Configurar el método de inicio de sesión botón para configurar el proveedor de Google. Seleccione Google de la lista de proveedores, actívelo y complete el correo electrónico de soporte del proyecto.
Crear un componente de inicio de sesión
Una vez que haya terminado de configurar el proveedor en Firebase, diríjase a la carpeta de su proyecto y cree una nueva carpeta, componentes, en el /src directorio. Dentro de componentes carpeta, cree un nuevo archivo: Iniciar sesión.js.
En el Iniciar sesión.js archivo, agregue el siguiente código:
importar Reaccionar de'reaccionar';
importar { iniciar sesión con ventana emergente } de"base de fuego/autorización";
importar { autorización, proveedor } de'../firebase-config'
funciónIniciar sesión() {
constante iniciar sesión con Google = () => {
signInWithPopup (autorización, proveedor)
};
devolver (
exportarpor defecto Iniciar sesión
- Este código importa la autenticación y los objetos del proveedor de Google que inicializaste en el archivo de configuración de Firebase.
- Luego define un Iniciar sesión función que implementa la iniciar sesión con ventana emergente método de Firebase que toma en el autenticación y proveedor componentes como parámetros. Esta función autenticará a los usuarios con sus inicios de sesión sociales de Google.
- Finalmente, devuelve un div que contiene un botón que, cuando se hace clic, llama al inicia sesión con Google función.
Crear un componente de chat
Este componente albergará la característica principal de su aplicación de chat, la ventana de chat. Cree un nuevo archivo dentro del componentes carpeta y asígnele un nombre Chat.js.
Agregue el código a continuación en el Chat.js Archivo:
importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar'
importar { db, autorización } de'../firebase-config'
importar Enviar mensaje de'./Enviar mensaje'
importar { colección, consulta, límite, orderBy, onSnapshot } de"base de fuego/almacén de fuego";funciónCharlar() {
constante [mensajes, establecerMensajes] = useState([])
constante { ID de usuario } = auth.currentUser
usarEfecto(() => {
constante q = consulta(
colección (bd, "mensajes"),
ordenar por ("Creado en"),
límite(50)
);
constante data = onSnapshot (q, (QuerySnapshot) => {
dejar mensajes = [];
QuerySnapshot.forEach((doc) => {
mensajes.push({ ...doc.datos(), identificación: doc.id });
});
setMessages (mensajes)
});
devolver() => datos;
}, []);
devolver (
- Este código importa la base de datos, los componentes de autenticación inicializados en el firebase-config.js file y métodos personalizados de Firestore que facilitan la manipulación de los datos almacenados.
- Implementa el recopilación, consulta, límite, ordenar por, y en Instantánea Métodos de Firestore para consultar y capturar una instantánea de los datos almacenados actualmente en la colección de mensajes de Firestore, ordenados por el momento en que se crearon, y solo lee los 50 mensajes más recientes.
- Los métodos de Firestore están empaquetados y se ejecutan dentro de un efecto de uso gancho para garantizar que los mensajes se muestren de inmediato, cada vez que presione el botón Enviar, sin actualizar la ventana de la página. Una vez que se leen los datos, se almacenan en el estado de mensajes.
- Luego verifica para diferenciar entre mensajes enviados y recibidos, si la ID de usuario almacenada con el mensaje coincide el ID de usuario para el usuario que inició sesión y, a partir de entonces, establece el nombre de la clase y aplica el estilo apropiado para el mensaje.
- Por último, presenta los mensajes, un desconectar botón, y el Enviar mensaje componente. El desconectar botón al hacer clic el controlador llama al auth.firmar() método proporcionado por Firebase.
Crear un componente de envío de mensajes
Crear un nuevo archivo, EnviarMensaje.js y agregue el siguiente código:
importar Reaccionar, { estado de uso } de'reaccionar'
importar { db, autorización } de'../firebase-config'
importar { colección, addDoc, servidorTimestamp} de"base de fuego/almacén de fuego";funciónEnviar mensaje() {
constante [mensaje, establecerMensaje] = usarEstado('')
constante ref.mensajes = colección (db, "mensajes");
constante enviarMensaje = asíncrono (e) => {
constante { uid, photoURL } = auth.currentUser
esperar addDoc (mensajesRef, {
texto: mensaje,
creado en: servidorTimestamp(),
uido: uido,
URL de la foto: URL de la foto
})
establecerMensaje('');
};devolver (
'Mensaje...'
tipo ="texto" valor={mensaje}
onChange={(e) => setMsg (e.target.value)}
/>
exportarpor defecto Enviar mensaje
- Similar a Chat.js componente, importe los métodos de Firestore y la base de datos inicializada y los componentes de autenticación.
- Para enviar mensajes, el Enviar mensaje La función implementa el addDoc Método Firestore que crea un nuevo documento en la base de datos y almacena los datos pasados.
- El addDoc El método toma dos parámetros, el objeto de datos y un objeto de referencia que indica en qué colección desea almacenar los datos. El método de recopilación de Firestore especifica la recopilación para almacenar datos.
- Por último, presenta un campo de entrada y un botón en la página web para permitir a los usuarios enviar mensajes a la base de datos.
Importe los componentes en el archivo App.js
Por último, en su Aplicación.js archivo, importe el Iniciar sesión y Charlar componentes para representarlos en su navegador.
En tus Aplicación.js archivo, elimine el código repetitivo y agregue el siguiente código:
importar Charlar de'./componentes/Chat';
importar Iniciar sesión de'./componentes/Iniciar sesión';
importar { autorización } de'./firebase-config.js'
importar { usar estado de autenticación } de'react-firebase-hooks/auth'
funciónaplicación() {
constante [usuario] = useAuthState (autorización)
devolver (
<>
{¿usuario? <Charlar />: <Iniciar sesión />}
</>
);
}
exportarpor defecto aplicación; Este código hace que el Iniciar sesión y Charlar componentes condicionalmente comprobando el estado de autenticación de un usuario. El estado de autenticación se desestructura del componente de autenticación de Firebase con la ayuda del usarAuthState gancho de la reaccionar-firebase-ganchos paquete.
Comprueba si un usuario está autenticado y presenta la Charlar componente de lo contrario el Iniciar sesión se renderiza el componente. Finalmente, agregue cualquier estilo CSS, active el servidor de desarrollo para guardar los cambios y diríjase a su navegador para ver los resultados finales.
Funcionalidades sin servidor de Firebase
Firebase proporciona una gama de características más allá de una base de datos y autenticación en tiempo real. Puede usar sus funcionalidades sin servidor para iniciar y escalar rápidamente cualquier aplicación. Además, Firebase se integra a la perfección con las aplicaciones web y móviles, lo que facilita la creación de aplicaciones multiplataforma.
