1. Información general
En este laboratorio de programación, aprenderá a usar AngularFire para crear aplicaciones web mediante la implementación y el despliegue de un cliente de chat con los productos y servicios de Firebase.
lo que aprenderás
- Cree una aplicación web con Angular y Firebase.
- Sincroniza datos usando Cloud Firestore y Cloud Storage para Firebase.
- Autentica a tus usuarios usando Firebase Authentication.
- Implementa tu aplicación web en Firebase Hosting.
- Envía notificaciones con Firebase Cloud Messaging.
- Recopile los datos de rendimiento de su aplicación web.
Lo que necesitarás
- El IDE/editor de texto de su elección, como WebStorm , Atom , Sublime o VS Code
- El administrador de paquetes npm , que generalmente viene con Node.js
- Una terminal/consola
- Un navegador de su elección, como Chrome
- El código de muestra del laboratorio de programación (Consulte el siguiente paso del laboratorio de programación para saber cómo obtener el código).
2. Obtenga el código de muestra
Clona el repositorio de GitHub del codelab desde la línea de comandos:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternativamente, si no tiene git instalado, puede descargar el repositorio como un archivo ZIP .
Importar la aplicación de inicio
Usando su IDE, abra o importe el directorio 📁 angularfire-start
desde el repositorio clonado. Este 📁 directorio angularfire-start
contiene el código de inicio para el codelab, que será una aplicación web de chat completamente funcional.
3. Crea y configura un proyecto de Firebase
Crear un proyecto de Firebase
- Inicie sesión en Firebase .
- En la consola de Firebase, haga clic en Agregar proyecto y luego nombre su proyecto de Firebase como FriendlyChat . Recuerde el ID del proyecto para su proyecto de Firebase.
- Desmarque Habilitar Google Analytics para este proyecto
- Haga clic en Crear proyecto .
La aplicación que va a compilar utiliza productos de Firebase que están disponibles para aplicaciones web:
- Firebase Authentication para permitir que sus usuarios inicien sesión fácilmente en su aplicación.
- Cloud Firestore para guardar datos estructurados en la nube y recibir notificaciones instantáneas cuando cambien los datos.
- Cloud Storage para Firebase para guardar archivos en la nube.
- Firebase Hosting para alojar y servir sus activos.
- Firebase Cloud Messaging para enviar notificaciones automáticas y mostrar notificaciones emergentes del navegador.
- Firebase Performance Monitoring para recopilar datos de rendimiento del usuario para su aplicación.
Algunos de estos productos necesitan una configuración especial o deben habilitarse mediante la consola Firebase.
Agregar una aplicación web de Firebase al proyecto
- Haga clic en el icono de la web
para crear una nueva aplicación web de Firebase.
- Registre la aplicación con el apodo Friendly Chat , luego marque la casilla junto a Configurar también Firebase Hosting para esta aplicación . Haga clic en Registrar aplicación .
- En el siguiente paso, verá un objeto de configuración. Copie solo el objeto JS (no el HTML circundante) en firebase-config.js
Habilitar el inicio de sesión de Google para la autenticación de Firebase
Para permitir que los usuarios inicien sesión en la aplicación web con sus cuentas de Google, utilizará el método de inicio de sesión de Google .
Deberá habilitar el inicio de sesión de Google :
- En Firebase console, busque la sección Build en el panel izquierdo.
- Haga clic en Autenticación , luego haga clic en la pestaña Método de inicio de sesión (o haga clic aquí para ir directamente allí).
- Habilite el proveedor de inicio de sesión de Google , luego haga clic en Guardar .
- Establezca el nombre público de su aplicación en Friendly Chat y elija un correo electrónico de soporte del proyecto en el menú desplegable.
- Configure su pantalla de consentimiento de OAuth en Google Cloud Console y agregue un logotipo:
Habilitar Cloud Firestore
La aplicación web usa Cloud Firestore para guardar mensajes de chat y recibir nuevos mensajes de chat.
Deberá habilitar Cloud Firestore:
- En la sección Crear de la consola Firebase, haga clic en Base de datos de Firestore .
- Haga clic en Crear base de datos en el panel de Cloud Firestore.
- Seleccione la opción Iniciar en modo de prueba , luego haga clic en Siguiente después de leer el descargo de responsabilidad sobre las reglas de seguridad.
El modo de prueba garantiza que pueda escribir libremente en la base de datos durante el desarrollo. Hará que nuestra base de datos sea más segura más adelante en este laboratorio de código.
- Establezca la ubicación donde se almacenan sus datos de Cloud Firestore. Puede dejar esto como predeterminado o elegir una región cercana a usted. Haga clic en Listo para aprovisionar Firestore.
Habilitar almacenamiento en la nube
La aplicación web usa Cloud Storage para Firebase para almacenar, cargar y compartir imágenes.
Deberá habilitar el almacenamiento en la nube:
- En la sección Compilación de la consola Firebase, haga clic en Almacenamiento .
- Si no hay un botón Comenzar , significa que el almacenamiento en la nube ya está habilitado y no necesita seguir los pasos a continuación.
- Haga clic en Comenzar .
- Lea el descargo de responsabilidad sobre las reglas de seguridad para su proyecto de Firebase y luego haga clic en Siguiente .
Con las reglas de seguridad predeterminadas, cualquier usuario autenticado puede escribir cualquier cosa en Cloud Storage. Hará que nuestro almacenamiento sea más seguro más adelante en este laboratorio de programación.
- La ubicación de Cloud Storage está preseleccionada con la misma región que eligió para su base de datos de Cloud Firestore. Haga clic en Listo para completar la configuración.
4. Instala la interfaz de línea de comandos de Firebase
La interfaz de línea de comandos (CLI) de Firebase le permite usar Firebase Hosting para servir su aplicación web localmente, así como para implementar su aplicación web en su proyecto de Firebase.
- Instale la CLI ejecutando el siguiente comando npm:
npm -g install firebase-tools
- Verifique que la CLI se haya instalado correctamente ejecutando el siguiente comando:
firebase --version
Asegúrese de que la versión de Firebase CLI sea v4.1.0 o posterior.
- Autorice Firebase CLI ejecutando el siguiente comando:
firebase login
Configuró la plantilla de la aplicación web para extraer la configuración de su aplicación para Firebase Hosting desde el directorio local de su aplicación (el repositorio que clonó anteriormente en el laboratorio de programación). Pero para extraer la configuración, debe asociar su aplicación con su proyecto de Firebase.
- Asegúrese de que su línea de comando esté accediendo al directorio
angularfire-start
local de su aplicación. - Asocie su aplicación con su proyecto de Firebase ejecutando el siguiente comando:
firebase use --add
- Cuando se le solicite, seleccione su ID de proyecto , luego asigne un alias a su proyecto de Firebase.
Un alias es útil si tiene varios entornos (producción, puesta en escena, etc.). Sin embargo, para este laboratorio de código, solo usemos el alias de default
.
- Siga las instrucciones restantes en su línea de comando.
5. Instalar AngularFire
Antes de ejecutar el proyecto, asegúrese de tener configurados Angular CLI y AngularFire.
- En una consola, ejecute el siguiente comando:
npm install -g @angular/cli
- Luego, en una consola desde el directorio
angularfire-start
, ejecute el siguiente comando de Angular CLI:
ng add @angular/fire
Esto instalará todas las dependencias necesarias para su proyecto.
- Cuando se le solicite, seleccione las funciones que se configuraron en Firebase Console (
ng deploy -- hosting
,Authentication
,Firestore
,Cloud Functions (callable)
,Cloud Messaging
,Cloud Storage
) y siga las indicaciones en la consola.
6. Ejecute la aplicación de inicio localmente
Ahora que ha importado y configurado su proyecto, está listo para ejecutar la aplicación web por primera vez.
- En una consola desde el directorio
angularfire-start
, ejecute el siguiente comando Firebase CLI:
firebase emulators:start
- Su línea de comando debería mostrar la siguiente respuesta:
✔ hosting: Local server: http://localhost:5000
Está utilizando el emulador de Firebase Hosting para servir nuestra aplicación localmente. La aplicación web ahora debería estar disponible en http://localhost:5000 . Se sirven todos los archivos que se encuentran en el subdirectorio src
.
- Usando su navegador, abra su aplicación en http://localhost:5000 .
Debería ver la interfaz de usuario de su aplicación FriendlyChat, que (¡todavía!) no funciona:
La aplicación no puede hacer nada en este momento, pero con tu ayuda, ¡lo hará pronto! Hasta ahora solo ha diseñado la interfaz de usuario para usted.
¡Ahora construyamos un chat en tiempo real!
7. Importar y configurar Firebase
Configurar base de fuego
Deberá configurar el SDK de Firebase para indicarle qué proyecto de Firebase está usando.
- Vaya a la configuración de su proyecto en la consola de Firebase
- En la tarjeta "Tus aplicaciones", selecciona el apodo de la aplicación para la que necesitas un objeto de configuración.
- Seleccione "Configuración" en el panel de fragmentos del SDK de Firebase.
Encontrará que se generó un archivo de entorno /angularfire-start/src/environments/environment.ts
.
- Copie el fragmento de código del objeto de configuración, luego agréguelo a
angularfire-start/src/firebase-config.js
.
medio 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 fuego angular
Encontrará que las características que ha seleccionado en la consola se enrutaron automáticamente en el archivo /angularfire-start/src/app/app.module.ts
. Esto permite que su aplicación use las características y funcionalidades de Firebase. Sin embargo, para desarrollar en un entorno local, debe conectarlos para usar la suite Emulator.
- En
/angularfire-start/src/app/app.module.ts
, busque la secciónimports
y modifique las funciones proporcionadas para conectarse a la suite Emulator en entornos que no son de producción.
// ...
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();
}),
// ...
aplicación.módulo.ts
Durante este laboratorio de código, utilizará Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging y Performance Monitoring, por lo que está importando todas sus bibliotecas. En sus aplicaciones futuras, asegúrese de importar solo las partes de Firebase que necesita para acortar el tiempo de carga de su aplicación.
8. Configurar el inicio de sesión de usuario
AngularFire ahora debería estar listo para usar, ya que se importa e inicializa en app.module.ts
. Ahora vas a implementar el inicio de sesión de usuario mediante Firebase Authentication .
Autentica a tus usuarios con Google Sign-In
En la aplicación, cuando un usuario hace clic en el botón Iniciar sesión con Google , se activa la función login
. (¡Ya configuró eso para usted!) Para este laboratorio de código, desea autorizar a Firebase a usar Google como proveedor de identidad. Utilizará una ventana emergente, pero hay varios otros métodos disponibles en Firebase.
- En el directorio
angularfire-start
, en el subdirectorio/src/app/services/
, abrachat.service.ts
. - Busque la función
login
. - Reemplace toda la función con el siguiente código.
chat.servicio.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
La función logout
se activa cuando el usuario hace clic en el botón Cerrar sesión .
- Vuelva al archivo
src/app/services/chat.service.ts
. - Encuentra la función
logout
. - Reemplace toda la función con el siguiente código.
chat.servicio.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);
})
}
Seguimiento del estado de autenticación
Para actualizar nuestra interfaz de usuario en consecuencia, necesita una forma de verificar si el usuario ha iniciado sesión o no. Con Firebase Authentication, puede recuperar información observable sobre el estado del usuario que se activará cada vez que cambie el estado de autenticación.
- Vuelva al archivo
src/app/services/chat.service.ts
. - Encuentre la asignación de variables
user$
. - Reemplace toda la asignación con el siguiente código.
chat.servicio.ts
// Observable user
user$ = user(this.auth);
El código anterior llama al user
de la función AngularFire que devuelve un usuario observable. Se activará cada vez que cambie el estado de autenticación (cuando el usuario inicie o cierre sesión). En este punto, actualizará la interfaz de usuario para redirigir, mostrar al usuario en el encabezado de navegación, etc. Todas estas partes de la interfaz de usuario ya se han implementado.
Prueba de iniciar sesión en la aplicación
- Si su aplicación todavía se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute
firebase emulators:start
en la línea de comando para comenzar a servir la aplicación desde http://localhost:5000 y luego ábrala en su navegador. - Inicie sesión en la aplicación utilizando el botón de inicio de sesión y su cuenta de Google. Si ve un mensaje de error que indica
auth/operation-not-allowed
, verifique que haya habilitado Google Sign-in como proveedor de autenticación en Firebase console. - Después de iniciar sesión, se debe mostrar su foto de perfil y nombre de usuario:
9. Escribe mensajes en Cloud Firestore
En esta sección, escribirá algunos datos en Cloud Firestore para que pueda completar la interfaz de usuario de la aplicación. Esto se puede hacer manualmente con la consola de Firebase , pero lo hará en la propia aplicación para demostrar una escritura básica de Cloud Firestore.
Modelo de datos
Los datos de Cloud Firestore se dividen en colecciones, documentos, campos y subcolecciones. Almacenará cada mensaje del chat como un documento en una colección de nivel superior llamada messages
.
Agregar mensajes a Cloud Firestore
Para almacenar los mensajes de chat que escriben los usuarios, usará Cloud Firestore .
En esta sección, agregará la funcionalidad para que los usuarios escriban nuevos mensajes en su base de datos. Un usuario que haga clic en el botón ENVIAR activará el fragmento de código a continuación. Agrega un objeto de mensaje con el contenido de los campos de mensaje a su instancia de Cloud Firestore en la colección messages
. El método add()
agrega un nuevo documento con una ID generada automáticamente a la colección.
- Vuelva al archivo
src/app/services/chat.service.ts
. - Encuentra la función
addMessage
. - Reemplace toda la función con el siguiente código.
chat.servicio.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;
}
}
Probar el envío de mensajes
- Si su aplicación todavía se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute
firebase emulators:start
en la línea de comando para comenzar a servir la aplicación desde http://localhost:5000 y luego ábrala en su navegador. - Después de iniciar sesión, ingrese un mensaje como "¡Hola!" y luego haga clic en ENVIAR . Esto escribirá el mensaje en Cloud Firestore. Sin embargo, aún no verá los datos en su aplicación web real porque aún necesita implementar la recuperación de datos (la siguiente sección del laboratorio de código).
- Puede ver el mensaje recién agregado en su Firebase Console. Abra la interfaz de usuario de su suite Emulator. En la sección Crear , haga clic en Base de datos de Firestore (o haga clic aquí y debería ver la colección de mensajes con su mensaje recién agregado:
10. Leer mensajes
Sincronizar mensajes
Para leer mensajes en la aplicación, deberá agregar un observable que se activará cuando cambien los datos y luego crear un elemento de interfaz de usuario que muestre mensajes nuevos.
Agregará código que escuche los mensajes recién agregados desde la aplicación. En este código, recuperará la instantánea de la colección messages
. Solo mostrará los últimos 12 mensajes del chat para evitar mostrar un historial muy largo al cargar.
- Vuelva al archivo
src/app/services/chat.service.ts
. - Encuentra la función
loadMessages
. - Reemplace toda la función con el siguiente código.
chat.servicio.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 escuchar mensajes en la base de datos, crea una consulta en una colección utilizando la función collection
para especificar en qué colección se encuentran los datos que desea escuchar. En el código anterior, está escuchando los cambios dentro de los messages
colección, que es donde se almacenan los mensajes de chat. También está aplicando un límite escuchando solo los últimos 12 mensajes usando limit(12)
y ordenando los mensajes por fecha usando orderBy('timestamp', 'desc')
para obtener los 12 mensajes más nuevos.
La función collectionData
usa instantáneas bajo el capó. La función de devolución de llamada se activará cuando haya cambios en los documentos que coincidan con la consulta. Esto podría ser si un mensaje se elimina, modifica o agrega. Puede leer más sobre esto en la documentación de Cloud Firestore .
Prueba sincronizando mensajes
- Si su aplicación todavía se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute
firebase emulators:start
en la línea de comando para comenzar a servir la aplicación desde http://localhost:5000 y luego ábrala en su navegador. - Los mensajes que creó anteriormente en la base de datos deben mostrarse en la interfaz de usuario de FriendlyChat (consulte a continuación). Siéntete libre de escribir nuevos mensajes; deberían aparecer al instante.
- (Opcional) Puede intentar eliminar, modificar o agregar nuevos mensajes manualmente directamente en la sección Firestore de la suite Emulator; cualquier cambio debe reflejarse en la interfaz de usuario.
¡Felicidades! ¡Está leyendo documentos de Cloud Firestore en su aplicación!
11. Enviar imágenes
Ahora agregará una característica que comparte imágenes.
Si bien Cloud Firestore es bueno para almacenar datos estructurados, Cloud Storage es más adecuado para almacenar archivos. Cloud Storage para Firebase es un servicio de almacenamiento de archivos/blobs y lo usará para almacenar cualquier imagen que un usuario comparta usando nuestra aplicación.
Guardar imágenes en el almacenamiento en la nube
Para este laboratorio de programación, ya agregó un botón que activa un cuadro de diálogo de selección de archivos. Después de seleccionar un archivo, se llama a la función saveImageMessage
y puede obtener una referencia al archivo seleccionado. La función saveImageMessage
logra lo siguiente:
- Crea un mensaje de chat de "marcador de posición" en el feed de chat, para que los usuarios vean una animación de "Cargando" mientras carga la imagen.
- Carga el archivo de imagen en Cloud Storage a esta ruta:
/<uid>/<file_name>
- Genera una URL legible públicamente para el archivo de imagen.
- Actualiza el mensaje de chat con la URL del archivo de imagen recién cargado en lugar de la imagen de carga temporal.
Ahora agregará la funcionalidad para enviar una imagen:
- Vuelva al archivo
src/index.js
. - Encuentra la función
saveImageMessage
. - Reemplace toda la función con el siguiente código.
índice.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);
}
}
Prueba de envío de imágenes
- Si su aplicación todavía se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute
firebase emulators:start
en la línea de comando para comenzar a servir la aplicación desde http://localhost:5000 y luego ábrala en su navegador. - Después de iniciar sesión, haga clic en el botón de carga de imágenes en la parte inferior izquierda
y seleccione un archivo de imagen usando el selector de archivos. Si está buscando una imagen, siéntase libre de usar esta bonita imagen de una taza de café .
- Debería aparecer un nuevo mensaje en la interfaz de usuario de la aplicación con la imagen seleccionada:
Si intenta agregar una imagen sin iniciar sesión, debería ver un error que le indica que debe iniciar sesión para agregar imágenes.
12. Mostrar notificaciones
Ahora agregará compatibilidad con las notificaciones del navegador. La aplicación notificará a los usuarios cuando se publiquen nuevos mensajes en el chat. Firebase Cloud Messaging (FCM) es una solución de mensajería multiplataforma que le permite entregar mensajes y notificaciones de manera confiable sin costo alguno.
Agregar el trabajador de servicio de FCM
La aplicación web necesita un trabajador de servicio que reciba y muestre notificaciones web.
El proveedor de mensajería ya debería haberse configurado cuando se agregó AngularFire, asegúrese de que exista el siguiente código en la sección de importaciones de /angularfire-start/src/app/app.module.ts
provideMessaging(() => {
return getMessaging();
}),
aplicación/aplicación.módulo.ts
El trabajador del servicio simplemente necesita cargar e inicializar el SDK de Firebase Cloud Messaging, que se encargará de mostrar las notificaciones.
Obtener tokens de dispositivo FCM
Cuando se han habilitado las notificaciones en un dispositivo o navegador, se le otorgará un token de dispositivo . Este token de dispositivo es lo que usa para enviar una notificación a un dispositivo o navegador en particular.
Cuando el usuario inicia sesión, llama a la función saveMessagingDeviceToken
. Ahí es donde obtendrá el token del dispositivo FCM del navegador y lo guardará en Cloud Firestore.
chat.servicio.ts
- Busque la función
saveMessagingDeviceToken
. - Reemplace toda la función con el siguiente código.
chat.servicio.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);
};
}
Sin embargo, este código no funcionará inicialmente. Para que su aplicación pueda recuperar el token del dispositivo, el usuario debe otorgarle permiso a su aplicación para mostrar notificaciones (el siguiente paso del laboratorio de código).
Solicitar permisos para mostrar notificaciones
Cuando el usuario aún no haya otorgado permiso a su aplicación para mostrar notificaciones, no se le otorgará un token de dispositivo. En este caso, llame al método requestPermission()
, que mostrará un cuadro de diálogo del navegador solicitando este permiso ( en los navegadores compatibles ).
- Vuelva al archivo
src/app/services/chat.service.ts
. - Busque la función
requestNotificationsPermissions
. - Reemplace toda la función con el siguiente código.
chat.servicio.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.');
}
}
Consigue tu token de dispositivo
- Si su aplicación todavía se está sirviendo, actualice su aplicación en el navegador. De lo contrario, ejecute
firebase emulators:start
en la línea de comando para comenzar a servir la aplicación desde http://localhost:5000 y luego ábrala en su navegador. - Después de iniciar sesión, debería aparecer el cuadro de diálogo de permiso de notificaciones:
- Haga clic en Permitir.
- Abra la consola JavaScript de su navegador. Debería ver el siguiente mensaje:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- Copie el token de su dispositivo. Lo necesitará para la siguiente etapa del laboratorio de programación.
Envía una notificación a tu dispositivo
Ahora que tiene el token de su dispositivo, puede enviar una notificación.
- Abra la pestaña Cloud Messaging de Firebase console .
- Haga clic en "Nueva Notificación"
- Ingrese un título de notificación y un texto de notificación.
- En el lado derecho de la pantalla, haga clic en "enviar un mensaje de prueba"
- Ingrese el token del dispositivo que copió de la consola de JavaScript de su navegador, luego haga clic en el signo más ("+")
- Haga clic en "prueba"
Si su aplicación está en primer plano, verá la notificación en la consola de JavaScript.
Si su aplicación está en segundo plano, debería aparecer una notificación en su navegador, como en este ejemplo:
13. Reglas de seguridad de Cloud Firestore
Ver las reglas de seguridad de la base de datos
Cloud Firestore utiliza un lenguaje de reglas específico para definir los derechos de acceso, la seguridad y las validaciones de datos.
Al configurar el proyecto de Firebase al comienzo de este laboratorio de código, eligió usar las reglas de seguridad predeterminadas del "modo de prueba" para no restringir el acceso al almacén de datos. En Firebase console , en la pestaña Reglas de la sección Base de datos , puede ver y modificar estas reglas.
En este momento, debería ver las reglas predeterminadas, que no restringen el acceso al almacén de datos. Esto significa que cualquier usuario puede leer y escribir en cualquier colección de su almacén de datos.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Actualizará las reglas para restringir cosas usando las siguientes reglas:
firestore.reglas
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;
}
}
}
Las reglas de seguridad deberían actualizarse automáticamente en su suite Emulator.
Ver las reglas de seguridad de Cloud Storage
Cloud Storage para Firebase usa un lenguaje de reglas específico para definir los derechos de acceso, la seguridad y las validaciones de datos.
Al configurar el proyecto de Firebase al comienzo de este laboratorio de código, eligió usar la regla de seguridad predeterminada de Cloud Storage que solo permite que los usuarios autenticados usen Cloud Storage. En Firebase console , en la pestaña Reglas de la sección Almacenamiento , puede ver y modificar las reglas. Debería ver la regla predeterminada que permite que cualquier usuario que haya iniciado sesión lea y escriba cualquier archivo en su depósito de almacenamiento.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
Actualizará las reglas para hacer lo siguiente:
- Permita que cada usuario escriba solo en sus propias carpetas específicas
- Permitir que cualquier persona lea desde Cloud Storage
- Asegúrate de que los archivos subidos sean imágenes.
- Restrinja el tamaño de las imágenes que se pueden cargar a un máximo de 5 MB
Esto se puede implementar usando las siguientes reglas:
reglas.de.almacenamiento
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. Implementa tu aplicación usando Firebase Hosting
Firebase ofrece un servicio de alojamiento para servir sus activos y aplicaciones web. Puede implementar sus archivos en Firebase Hosting mediante Firebase CLI. Antes de implementar, debe especificar en su archivo firebase.json
qué archivos locales deben implementarse. Para este laboratorio de código, ya lo ha hecho por usted porque este paso fue necesario para servir nuestros archivos durante este laboratorio de código. La configuración de alojamiento se especifica en el atributo hosting
:
base de fuego.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"
}
}
Esta configuración le indica a la CLI que desea implementar todos los archivos en el directorio ./public
( "public": "./public"
).
- Asegúrese de que su línea de comando esté accediendo al directorio
angularfire-start
local de su aplicación. - Implemente sus archivos en su proyecto de Firebase ejecutando el siguiente comando:
ng deploy
Luego seleccione la opción Firebase y siga las indicaciones en la línea de comando.
- La consola debe mostrar lo siguiente:
=== 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
- Visite su aplicación web que ahora está completamente alojada en una CDN global mediante Firebase Hosting en dos de sus propios subdominios de Firebase:
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
Como alternativa, puede ejecutar firebase open hosting:site
en la línea de comandos.
Visite la documentación para obtener más información sobre cómo funciona Firebase Hosting .
Vaya a la sección Hospedaje de Firebase console de su proyecto para ver información y herramientas de hospedaje útiles, incluido el historial de sus implementaciones, la funcionalidad para revertir a versiones anteriores de su aplicación y el flujo de trabajo para configurar un dominio personalizado.
15. ¡Felicitaciones!
¡Utilizó Firebase para crear una aplicación web de chat en tiempo real!
lo que has cubierto
- Autenticación de base de fuego
- Tienda de fuego en la nube
- SDK de Firebase para almacenamiento en la nube
- Mensajería en la nube de Firebase
- Supervisión del rendimiento de Firebase
- Alojamiento de base de fuego