Instalación y Configuración de Google Cloud y Firebase para Apps
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:
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
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.
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:
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.
Si tienen el siguiente problema en el punto numero 10, cuando ejecutan el Script que carga los datos a firestore
Cannot find module firebase-admin
Lo solucionan agregando la siguiente dependencia en el package.json que se encuentra en la carpeta Script,
"@firebase/component": "0.1.0
Luego que lo agreguen deben ejecutar npm install para que se agregue la dependencia a su proyecto.
en el archivo package.json
incluir --> "@firebase/component": "0.1.0",
{"name":"firestore_upload","version":"1.0.0","description":"Upload Data to Firestore Cloud Database","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"pvpablo","license":"ISC","dependencies":{"@firebase/component":"0.1.0","@google-cloud/storage":"^5.4.0","firebase-admin":"^9.0.0","moment":"^2.27.0"}}```
l
Lo complicado lo deja en escrito y no hace una clase, la teoría debe ser escrito y la práctica en video así entender los que no tienen base de que es esto ya están perdidos
Complicado pero se logro ejecutar :D
Mención especial a la comunidad que sin sus comentarios no hubiera podido lograrlo.
Resumen.
antes del punto 9
falta una dependencia, yo lo corregí ejecutando en la raíz del proyecto
npm install firebase-admin (en la terminal)
si llegas al final y no te cargan las imágenes, en el punto 10 debes ejecutar antes
gcloud auth login
gcloud config set project <PROJECT_ID>
y ya luego
SET SET PROJECT_ID="<PROJECT_ID>"
SET DATABASE_URL=“https://<PROJECT_ID>.firebaseio.com” (windows).
y corres el script
-todo esto en la terminal
y Listo :D
Muchas muchas gracias! Me paso lo mismo y con algunos tropiezos pero ya quedó! :D
También consideren cual terminal manejan, yo estaba en WSL y ahí no me dejó crear las variables de entorno.
La cerré y abrí PowerShell, ahí si me dejó, y los siguientes pasos los seguí haciendo en esta terminal.
Me quedé en el punto 9 jajaja. Supongo que debo crear el archivo .env.local en la terminal pero tampoco encuentro el .env.template.
En el paso 7 cuando usas Windows, antes de escribir
firebase login
debes verificar las directiva de ejecución de PowerShell esto lo haces escribiendo el siguiente comando en la terminal
Get-ExecutionPolicy-List
Si esto, te da como resultado:
Scope ExecutionPolicy
----- ---------------
MachinePolicy Undefined
UserPolicy Undefined
Process Undefined
CurrentUser Undefined
LocalMachine Undefined
Entonces debes escribir la siguiente lìnea de comando
No puedo visualizar las variables de configuración de mi app en Firebase. Hasta ese punto he seguido todos los pasos de la guía, excepto realizar el deploy. ¿Es necesario el deploy para ver las variables de configuración o qué me faltaría realizar?
Gracias.
Hola Juan,
Para visualizar las variables de configuración de tu app, esta explicado en el punto numero 9, de ahí se necesita DATABASE_URL y PROJECT, luego las guardas en una variable de entorno como en el punto numero 10
Exacto, de ahí mágicamente muestra que en la parte de settings del proyecto aparecen las variables de configuración, pero si no haces el deploy de la webapp jamás aparecen y se requieren más que el DATABASE_URL y el PROJECT_ID:
De dónde las saco si no hago el deploy de una webapp?
Hola , me quede atorado en el paso 8, al momento de poner el comando firebase use --add en la terminal de Google Cloud SDK Shell para seleccionar el proyecto previamente creado, me dice que no se reconoce como un comando, ya busqué en Firebase intente agregar npm y me arrojo Warnings y Errors, baje Node.js y sigue sin darme la opción del comando. Alguien que me pueda guiar? Se los agradezco de antemano. Saludos!
Hola Gilbram,
Entra a la carpeta en la cual esta el proyecto y ahí ejecutas el comando firebase use --add ... si lo haces por fuera de la carpeta creo que te saca error
Ya hice todo lo que comentan aqui, pero al momento de subir las imagenes cuando ejecuto el node index.js me nada un error que dice Invalid bucket name: '"platzi-storefront-2a01a".appspot.com' y de ahi no paso la aplicacion ya se ve pero en blanco sin imagenes, alguien me puede ayudar?
después de
firebase init
en el paso 7, me salen estas opciones
¿Cuál escojo?
Hola, he leído los comentarios de los compañeros he instalado el firebase/component y guardado las variable con SET SET PROJECT_ID="<PROJECT_ID>"
SET DATABASE_URL="https://<PROJECT_ID>.firebaseio.com" pero al aplicar el node index.js me sale una lista larga de errores
espero me puedan ayudar
Estoy igual :(
tienes que ejecutar estos comandos previamente
gcloud auth login
gcloud config set project <PROJECT_ID>
Done :) . Hay que asegurarse que las variables de entorno esten bien definidas para que el script no de errores.
Ya hice todo lo que comentan aqui, pero al momento de subir las imagenes cuando ejecuto el node index.js me nada un error que dice Invalid bucket name: '"platzi-storefront-2a01a".appspot.com' y de ahi no paso la aplicacion ya se ve pero en blanco sin imagenes, alguien me puede ayudar?
Bien, solo creo que en el paso 10 faltó mencionar que hay que hacer:
gcloud auth login
gcloud config set project <PROJECT_ID>
Después de esta lectura quedé con ganas de profundizar y ver el curso de Firebase
Luego de realizar todos los pasos, me carga ok la pagina, pero no veo los producos. En firebase storage veo que los productos estan cargados correctamente. A alguien mas le paso?. Borre todo y volvi a realizar todo el proceso de cero nuevamente y me sigue sucediendo. A Alguien mas le paso?
Hola Marcelo,
Debes agregar una dependencia mas en el package.json, la dependencia es la siguiente “@firebase/component”: "0.1.0 revisa un comentario que hice y ahí detallo de como lo puedes solucionar
A mi también me salia el mismo error, el problema es que no se subieron las imágenes, yo lo hice manualmente y funciono.
Hola. En que parte del tutorial se habilita la webapp? En el paso 7 solo se habilita el hosting sin iniciar ni levantar nada (dice que se hará en pasos posteriores) y en el paso 9 piden que vayamos a settings del proyecto y que tomemos los parámetros de nuestra app para meterlos en el archivo .env.local pero no hay nada en settings porque no hay webapp.
Hay algún curso en el que se lleve a cabo este proyecto de la tienda de platzi?
Disculpen la pregunta (tal vez tonta), ¿El paso 1 donde lo realizo?, pueden ayudarme con los pasos para ejecutar el paso 1?
Gracias.
El paso 1 es que en el link que colocan, tienes que descargar el instalador de Google Cloud SDK y los instalas tal cual como si fuera un programa normal
¿Cuál es la diferencia entre el comando gcloud auth application-default login y gcloud init?
¿Es necesario ejecutar ambos?
Hola Juan,
con gcloud auth application-default login es para autenticarse con tu cuenta de gmail donde esta alojado el proyecto, y con gcloud init se inicializa las configuración del proyecto.
