¿Qué encontrarás aquí?
¿Qué es Google Firebase?
El desarrollo web actual utiliza, en general, una arquitectura cliente-servidor. Eso quiere decir que un cliente (el navegador que un usuario tiene en su ordenador) realiza una petición a un servidor (un ordenador con sistema operativo de servidor que se ejecuta de forma ininterrumpida). Cuando el servidor recibe la petición (por ejemplo, muéstrame la web www.algoritmosalvaje.com) el servidor envía la web al cliente y el cliente muestra la web. Así funciona Internet en 2021. Esto evidentemente tiene mayor complejidad, pero de forma simple lo expresaremos así.
Google Firebase es una plataforma en la nube que nos ofrece backend as a service (BaaS), es decir, nos hace muy sencillas ciertas funcionalidades backend, como notificaciones push, analíticas de la web, integración con redes sociales, almacenamiento en la nube etc. Decir que Google Firebase ofrece tanto BaaS para web como para aplicaciones móviles, tanto en iOS como en Android.
Google Firebase te ofrece:
· Funciones de desarrollo, facilitando tareas propias del desarrollo en entorno servidor. Así, ofrece bases de datos en tiempo real (estas BBDD son No SQL y almacenan los datos como JSON), sistema de autenticación de usuarios (tanto con usuario y contraseña como mediante perfiles de otras plataformas externas como redes sociales, cuenta de Google…), un sistema de reporte de errores, un sistema de almacenamiento en la nube personalizable, notificaciones push, hosting con certificados de seguridad SSL y HTTP2, configuración remota y dinámica de la aplicación sin actualización de la misma…
· Herramientas destinadas al crecimiento del tráfico de la aplicación/web, indexando la web en el buscador de Google, uso de links inteligentes y dinámicos que según los parámetros te redirigirán a un sitio u otro de la web facilitando una experiencia de usuario óptima, Ads para facilitar al administrador de la web realizar campañas de publicidad con Google, permite al usuario invitar a sus contactos a visitar la web etc.
· Facilidad para monetizar la web/aplicación, por supuesto con servicios publicitarios de Google.
· Firebase Analytics: te permite medir los eventos de la web, conocer de forma detallada a los usuarios de tu web (género, edad, origen geográfico, dispositivo de acceso…).
¿Cuándo es aconsejable utilizar Google Firebase?
Creo que Firebase es aconsejable para cualquier página web que utilice un Frontend con un Backend no SQL y especialmente si necesitas que los datos estén actualizados en tiempo real. Es especialmente destacable que, bien usando la versión de pago o la gratuita, Google te facilita soporte gratuito a través de email, además de tutoriales, documentación etc.
A medida que la web vaya creciendo en tráfico, eso sí, te tocará pagar. A partir de un determinado nº de usuarios simultáneos y a medida que se te vaya acabando el espacio de almacenamiento de la BBDD, tendrás que pasar a algún plan de pago de Firebase. Ahí ya verás tú si te interesa invertir x dinero en Firebase o si prefieres utilizar alguna otra plataforma que ofrezca también BaaS. En general, sólo deberás pagar cuándo tu web haya crecido mucho, y eso significa que probablemente también tendrás ingresos. Ahí ya tendrás que valorar calculadora en mano si te sale más rentable invertir en Google Firebase o si te sale más rentable migrar tu web/app a otra plataforma.
¿Cómo desplegar un proyecto en Google Firebase?
Primeros pasos para el despliegue.
Para desplegar un proyecto en Google Firebase, lo primero que tienes que tener es tu proyecto acabado. Yo, por ejemplo, tengo mi proyecto acabado y utilizaré como entorno de desarrollo Visual Studio Code.
Con estos prerrequisitos, me hago una cuenta en Google Firebase y creo un nuevo proyecto. Puedes añadir Google Analytics y configurarlo, aunque en mi caso, al ser un proyecto de prueba, no lo voy a necesitar.
Trabajando en la consola de Firebase.
Una vez tengas creado el proyecto, puedes acceder a él en la consola de Firebase. Tranquilo, no hablamos de ninguna terminal de comandos, sino del panel de control de Firebase, una cómoda interfaz gráfica para que manejes funcionalidades directamente relacionadas con tu proyecto.
Ahora, accede al proyecto y en el proyecto clicka en el icono (debajo del nombre del proyecto) que pone «1 aplicación» (la imagen que hemos puesto justo arriba de estas líneas). Al clickar ahí, se te abrirá una pequeña interfaz dónde podrás clickar en el icono de configuración para acceder a la configuración de Google Firebase. Accederás a la configuración general, dónde podrás introducir el sobrenombre de la web (un identificador interno que sólo tú podrás ver en Firebase). Tras ello, puedes configurar (aunque también puedes configurarlo más adelante) Firebase Hosting. Vincularás tu aplicación web a un sitio de Hosting de Firebase, y cada sitio de hosting sólo puede vincularse a una app web de Firebase.
Configuración de environment.
Ahora, me voy a Visual Studio Code y creo una carpeta que se llame environment. En esta carpeta voy a crear un fichero que se llamará environment.prod.ts. En este fichero es dónde pondremos los parámetros de configuración de Firebase.
Literalmente, has de poner exactamente ese mismo código (te lo dejo también en texto para que lo puedas copiar y pegar):
export const environment={
production: true,
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",
};Sólo debes de sustituir PROJECT_ID por el id de tu proyecto (el identificador interno que te mencioné antes). Con esto configuras todos los servicios habilitados, y los valores se propagan de forma automática.
Desplegando desde Firebase CLI.
Para desplegar en Firebase, una vez vinculado Firebase Hosting con tu proyecto, como mencioné anteriormente, necesitarás utilizar Firebase CLI, que es una herramienta de línea de comandos. Para ello, necesitarás instalar Firebase CLI. Se puede instalar de dos formas, pero a mí me gusta especialmente instalarlo a través del NPM. Importante que Firebase CLI requiere versiones de Node.js mínimo 8.0.0 o posteriores (de 2017 en adelante). Una vez que hayas instalado Node.js (que es una instalación super sencilla), abres la terminal de comandos de Visual Studio Code y ejecutas el siguiente comando: npm install -g firebase-tools. Esto te habilitará el comando firebase de manera global y si te da error probablemente será debido a un tema de permisos de npm.
Ahora que ya tenemos Firebase CLI instalado, inicializarás el proyecto de Firebase desde la raíz del directorio local escribiendo en la terminal de Visual Studio Code firebase init. Al ejecutar este comando estás vinculando tu directorio local con Firebase, estás generando un archivo firebase.json (que es un archivo obligatorio para Firebase Hosting)… E importante, en firebase.json, “hosting”, en el atributo “public”, es dónde Firebase Hosting buscará el directorio raíz público que contiene los archivos públicos estáticos (HTML, CSS, JS…). Digamos, que aquí es dónde tienes que poner la ruta de la página de inicio o home de tu web, y es dónde importas todo lo necesario para que tu web funcione.
En este caso, yo lo que hice fue crearme una carpeta public para meter todo el contenido de mi web.
Es relevante mencionar que Google Firebase te va a proporcionar subdominios gratuitos en los dominios web.app y firebaseapp.com. Imaginemos que mi web tiene como project-id de nombre algoritmosalvaje. Los subdominios podrían ser algoritmosalvaje.web.app o algoritmosalvaje.firebaseapp.com.
Ahora, para desplegar la web, ejecutaremos en el directorio raíz de la web, en la terminal de VS Code, el siguiente comando firebase deploy. Ahora ya, tanto en algoritmosalvaje.web.app como en algoritmosalvaje.firebaseapp.com podría acceder a mi web.
Es relevante comentar que Firebase Hosting te permite configurar conductas de hosting personalizadas para las solicitudes que recibe tu sitio web: desde hacer una página 404 personalizada, crear redirecciones, te permite agregar headers… Un conjunto de funcionalidades que hacen que merezca la pena aprender a manejar bien Firebase Hosting.
¿Alguna duda? Espero que este artículo te haya sido de gran ayuda. Cualquier cosa, puedes comentarnos por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en el siguiente artículo.