Introducción al proyecto

Esta guía asume que tienes una cuenta de Google y que estás autenticado en tu navegador con esa cuenta. En caso de que no tengas una cuenta de Google, puedes crearla de manera gratuita en este enlace.

Para llevar a cabo el setup del proyecto tendrás que realizar los siguientes pasos:

1 - Instalar el SDK de Google Cloud

Google Cloud cuenta con un SDK que te permite interactuar con Google Cloud Platform. Desde crear máquinas virtuales hasta desplegar modelos de Machine Learning. Lo importante de esta librería es que nos permite automatizar la creación de recursos de nube a partir de línea de comandos y hace que tus despliegues sean versionables, portables y confiables.

El SDK está disponible para la mayoría de los sistemas operativos más populares. Lleva a cabo la instalación del SDK según tu sistema operativo siguiendo estas instrucciones:

https://cloud.google.com/sdk/docs/quickstart

2 - Generar credenciales de acceso por defecto

Todas las interacciones con la nube de Google se hacen de manera segura utilizando TLS e identidades con permisos acotados. Es decir, si quieres que un backend sea capaz de interactuar con un modelo de Machine Learning, puedes crear una identidad para esta aplicación (denominada una cuenta de servicio) y asignar los permisos apropiados para llevar a cabo su objetivo.

En este caso, vamos a utilizar la identidad de tu cuenta de Google para formar las peticiones que se originen desde tu máquina local. El SDK de Google Cloud te permite crear credenciales que son utilizadas por las librerías de cliente de cada uno de los servicios que vamos a utilizar (como storage, firebase, etc). En tu terminal ejecuta el siguiente comando:

gcloud auth application-default login

Este comando te llevará a la página de sign-in de Google donde puedes elegir la cuenta que deseas utilizar. Termina el flujo presentado y al final deberás recibir confirmación de que estás autenticado con el Google Cloud SDK. Es posible que también recibas una alerta por correo electrónico notificando del intento de sign-in.

3 - Crear un proyecto en la consola de Firebase

Firebase es la plataforma de desarrollo de aplicaciones móviles de Google Cloud. Su misión es hacer que los desarrolladores de apps tengan éxito. Firebase también cuenta con un sabor para aplicaciones web, que será el que vamos a usar en este curso.

Visita console.firebase.google.com y selecciona la opción de ‘Add Project’. Selecciona un nombre de proyecto representativo, en mi caso utilizare ‘Platzi Grocery Storefront’

A continuación deshabilita el uso de Google Analytics en el proyecto. Lo configuraremos después.

Finalmente selecciona la opción de Create project. En unos segundos tu proyecto estará listo y serás direccionado a la consola de Firebase.

4 - Habilitar Firestore y Cloud Storage

Firebase es considerado como un Backend as a Service (BaaS). Esto significa que cuenta con ciertos servicios, como una capa de almacenamiento y una capa de cómputo serverless, que te permite enfocarte en la creación de tu app en lugar de la administración de servidores.

En la consola de Firebase, selecciona la opción de Cloud Firestore en el menú izquierdo. Una vez que la página cargue, darle click al botón Create Database localizado en el banner superior.

Al seleccionar Create database deberás elegir un perfil para aplicar ciertas reglas de seguridad base. Si estuvieras desarrollando una aplicación de cero, probablemente empezarías en modo prueba para poder interactuar con tu base de datos en las primeras iteraciones de desarrollo. En este caso vamos a empezar en modo producción y vamos a aplicar reglas de seguridad a la medida en un paso posterior.

Finalmente, debes de elegir la ubicación de tu base de datos. Por defecto, la opción que se presenta es nam5 (us-central), misma que es bastante atractiva porque tus datos vivirán en un esquema multi-regional, mejorando la postura de confiabilidad de toda tu app.

Puedes seleccionar otra región, quizás porque cuentas con despliegues existentes en otras regiones de Google Cloud o porque otra región puede quedar más cerca de tu base de usuario objetivo. En mi caso dejaré la opción por defecto. Algo importante que mencionar es que no puedes cambiar la ubicación de la base de datos una vez seleccionada. Si quieres cambiar la ubicación deberás crear un proyecto nuevo.

5 - Habilitar Firebase Authentication

En la consola de Firebase, selecciona la opción de ‘Authentication’ en el menú izquierdo. Una vez que la página cargue, darle click al botón ‘Get Started’ localizado en el banner superior.

En las opciones desplegadas, expande la autenticación usando Google como proveedor, habilita el motor de autenticación y provee un mail de soporte. Normalmente aparece una opción para utilizar el mismo correo que utilizaste para crear tu cuenta de Google Cloud.

Una vez que des click en Save deberías de ver el motor de autenticación habilitado.

6 - Clonar el repositorio

Visita el repositorio en la siguiente URL y clona el código utilizando git clone

URL: https://github.com/pvpablo/grocery-store-showcase

git clone https://github.com/pvpablo/grocery-store-showcase.git

7 - Habilitar Firebase Hosting

En la consola de Firebase, selecciona la opción de Hosting en el menú izquierdo. Una vez que la página cargue, darle click al botón Get Started localizado en el banner superior.

El flujo desplegado te pedirá instalar firebase-tools, un SDK específico de Firebase que nos permite entre otras cosas desplegar versiones de tus apps, reglas de seguridad, etc. Para llevar a cabo la instalación de firebase-tools necesitas tener npm previamente instalado. En caso de no tenerlo te recomiendo instalar node.js que lo trae en paquete (y que de todas formas usaremos más adelante).

El siguiente paso en el flujo es autenticarse con el SDK de Firebase. Este paso es similar al que hicimos previamente para el SDK de Google Cloud. En tu terminal ejecuta el siguiente comando y sigue las instrucciones:

firebase login

El paso para iniciar firebase lo haremos más adelante, por lo que no es necesario que lo hagas ahora.

El último paso para habilitar firebase hosting es desplegar la aplicación. Lo haremos posteriormente, por ahora puedes seleccionar la opción de continuar.

Una vez que lleves a cabo estos pasos, verás algunos dominios que automáticamente se habilitaron para tu aplicación. Estas son URLs seguras que puedes usar para acceder a tu aplicación una vez que la despliegues. También existe la opción de conectar un dominio propio, pero queda fuera del alcance del curso.

8 - Inicializar Firebase

Firebase tiene la opción de utilizar diferentes ambientes (DEV, QA, Staging, etc.). En la terminal utiliza el siguiente comando y selecciona el proyecto que creaste previamente.

firebase use --add.

La línea de comandos te pedirá un nombre para este proyecto, utiliza la palabra default.

9 - Crear archivo .env.local

En el directorio raíz del proyecto crea un nuevo archivo llamado .env.local y copia el contenido del archivo .env.template. Luego de esto, dirígete a la sección de Project Settings en la consola de Firebase, ubicado en el menú contextual izquierdo en el ícono del engrane:

En la parte inferior del tab general encontrarás variables de configuración para tu app. Sustituye estos valores en el archivo .env.local que creaste previamente.

El resultado se debe ver de esta manera:

Estas variables son sensibles, por lo que se recomienda que no las compartas, subas a un repositorio o hagas públicas por algún motivo.

10 - Carga de fixtures

Para cargar catálogos base y las imágenes de referencia de la aplicación preparé un script de carga. Previamente a correr este script de carga debes crear dos variables de ambiente. Dependiendo de tu sistema operativo la creación de las variables de ambiente puede variar.

export PROJECT_ID="<PROJECT_ID>"
export DATABASE_URL="https://<PROJECT_ID>.firebaseio.com"

Donde tienes que reemplazar <PROJECT_ID> por el ID único de tu proyecto.

Ejecuta el script de carga con el siguiente comando:

cd script
node index.js

11 - Configurar reglas de seguridad

Firebase utiliza un modelo de reglas para determinar si ciertas acciones sobre tu modelo de datos deben ser permitidas. Un ejemplo común es asegurar que un usuario únicamente pueda crear órdenes de compra para sí mismo y no para otros compradores. Puedes explorar más acerca de las reglas de seguridad en este enlace.

En la raíz del proyecto, ejecuta los siguientes comandos:

firebase deploy --only storage
firebase deploy --only firestore:rules

12 - Crea índices de consultas

Para garantizar el rendimiento de tus queries, Firestore puede requerir la creación de ciertos índices sobre tu modelo de datos. Cuando un índice es necesario en tu modelo de datos Firestore te avisará mostrando un error. Puedes conocer más acerca de índices en este enlace.

Para nuestra aplicación necesitamos crear dos índices compuestos. Uno sobre la colección de stats y otro sobre la colección de orders.

En la consola de Firebase, selecciona la opción de Cloud Firestore en el menú izquierdo. Una vez que la página cargue, selecciona el tab de Indexes. Los índices que debes de crear son los siguientes:

Para crear un índice selecciona el botón de Add Index o +Create Index y llena el formulario de la siguiente manera:

Repite la misma operación para el índice de la colección de stats. Los índices pueden tardar un par de minutos en construirse, mientras tanto puedes disfrutar de un buen café o ver algún video cool en Youtube. Cuando los índices se terminen de construir quedarán etiquetados como habilitados.

12 - Correr la aplicación localmente

Para correr la aplicación de manera local debes ejecutar los siguientes comandos en la raíz del proyecto:

npm install
npm run serve

13 - Desplegar la aplicación a Firebase Hosting (opcional)

Para desplegar la aplicación en Firebase Hosting debes ejecutar los siguientes comandos:

npm run build
firebase deploy --only hosting

Consulta el app utilizando las URLs seguras que Firebase genera automáticamente para tí. Puedes consultar las URLs en el tab de Firebase Hosting.

14 - ¡Dale star al repo y ayúdame a mejorarlo!

También puedes activar las notificaciones para futuros cambios o enviar tus pull requests si consideras que puede mejorar.