= Aloja un sitio web dinámico en Google Firebase usando Node.js y Cloud Firestore DB =
Tushar Kapoor: (https://www.tusharck.com/)
URL de demostración de Git: httpsgithub.com/tusharck/firebase-demo
= ¿Por qué Firebase Hosting? =
Firebase es una plataforma de aplicaciones integral basada en la infraestructura de Google, por lo tanto, proporciona una manera segura, rápida, gratuita (opciones pagas también disponibles para recursos adicionales) y fácil de alojar su contenido en la aplicaciones web o móviles
== Características y beneficios clave del nivel gratuito: ==
- Da dominio personalizado gratis&
SSL(SSL proporciona una capa de seguridad estándar para conexiones https
- Cloud Firestore: una base de datos flexible y escalable para la sincronización de datos en tiempo real entre las aplicaciones de los clientes
- Otras funciones: Funciones en la nube, Mensajería en la nube (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions and Test Lab (La funcionalidad y los recursos de estos productos se pueden aumentar comprando un plan pago, pero los servicios de nivel gratuito son muy buenos. Para ver los planes, consulte los precios de Firebase)
- Escalado automático de recursos
= Pasos para alojar su sitio web dinámico en Firebase =
== Requisitos ==
**1. Cuenta de Google**Si no tiene una cuenta de Google, debe registrarse para obtener una. Puede hacerlo yendo a httpsaccounts.google.com/SignUp. **2. Node.js y npm** Mac/Windows Puede descargar el instalador desde httpsnodejs.org/en/download/. linux
Siga los pasos a continuación para instalar Node.js:
1. Abra una terminal
2. Ejecute los siguientes comandos:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
instalación_13.x| sudo bash -sudo apt install nodejs ** He usado Nota: ** **
setup_13.xporque en el momento del tutorial, la última versión era
**13**puede consultar la última versión en httpsnodejs.org/en/
Para verificar si Node.js y npm se instalaron correctamente, ejecute los siguientes comandos, que generarán la versión instalada:
nodo -v
npm-v
**3. Firebase-CLI (Command-Line InterfaceEstas son las herramientas para administrar, ver e implementar los proyectos de Firebase
npm install -g firebase-herramientas
= Paso 1: Crear proyecto de Firebase =
- Vaya a httpsfirebase.google.com y
Iniciar sesióndesde la esquina superior derecha
- Haga clic en
Ir a la consola, desde la esquina superior derecha
- Luego haga clic en
Crear proyecto, como se muestra a continuación
4. Lo siguiente es ingresar el nombre de tu proyecto, y presiona continuar
5. Presione continuar para habilitar Google Analytics para su proyecto de Firebase (si no lo desea, entonces marque para deshabilitarlo)
6. Seleccione la ubicación más cercana para Google Analytics
7. Haga clic en
**Crear proyecto y esperar a que se cargue. Entonces verás algo como a continuación
= Paso 2: inicializar el inicio de sesión de Firebase =
- Abra una línea de comando/terminal, luego cree y vaya a un nuevo directorio
mkdir mi-proyecto-firebasecd mi-proyecto-firebase
2. Para alojar un sitio web en Firebase, inicie sesión en Firebase con el siguiente comando. Después de ejecutar el comando, se abrirá una ventana del navegador que le pedirá que inicie sesión en firebase con sus credenciales de Google. Ingrese las credenciales allí y Firebase iniciará sesión en su sistema
inicio de sesión de base de fuego
= Paso 3: Inicialice el proyecto Firebase en su sistema =
- Ahora tenemos que inicializar el proyecto que creamos en la consola Firebase en el sistema. Para hacer ejecutar el siguiente comando
inicio de base de fuego
2. Presione la tecla hacia abajo y luego seleccione
**dos cosas **presionando la tecla **barra espaciadora
- Funciones
- Alojamiento
Entonces
**pulsa Enter** para continuar
3. Luego seleccione
luego presiona enter
**Usar un proyecto existente**
4. Pulse Intro en la
**my-firebase-project** **o el nombre del proyecto que usasteo el nombre del proyecto que usaste
5. Seleccione
**Javascript** y presiona enter
6. Puedes decir
**No** a ¿Desea usar ESLint para detectar errores probables y aplicar estilo?
7. Tipo
**Sí** para instalar las dependencias con npm
8. Aquí tenemos que hacer dos tareas:
- Debe seleccionar el directorio en el que residirán su sitio web y sus activos. Por defecto es
pubic puede presionar enter para continuar o puede cambiar a su nombre de directorio deseado
- Tipos
Sí para la página de una sola aplicación para que sus URL dinámicas puedan redirigirse a su destino adecuado
9. Pruebe la aplicación firebase en su sistema local ejecutando el siguiente comando. Luego ve a
**httplocalhost:5000** para ver su sitio web básico funcionando
servicio de base de fuego: solo alojamiento, funciones
Debería ver algo como esto a continuación después de abrir el
**httplocalhost:5000** URL
10. Cerrar servidor desde la terminal
= Paso 4: Instalar paquetes y crear un directorio de vistas para un sitio web dinámico =
- Aquí cambiaremos dentro del directorio de funciones para hacerlo.
funciones de discos compactos
**2. Install Express ** Es un marco de aplicación web Node.js mínimo y flexible
npm expreso --guardar
**3. Install Handle Bars**Es un motor de plantillas para Node.js utilizado para la interfaz dinámica del sitio web
manillar npm i --save
**4. Instalar consolidar**
npm consolido --guardar
5. Crea una carpeta llamada
**vistas** dentro de la carpeta **funciones** en la que almacenaremos todo el código de la interfaz
mkdir
puntos de vista
6. Vuelva al directorio principal ejecutando el siguiente comando:
cd .
= Paso 5: Configuración de Firestore (base de datos en la nube) =
== Configuración de la base de datos ==
- Vaya a httpsconsole.firebase.google.com/
- Selecciona tu proyecto
- Seleccione
Base de datosdesde el panel de la izquierda
4. Haga clic en
**Crear base de datos**
5. Seleccione Iniciar en modo de prueba porque, de lo contrario, no podrá acceder a la base de datos desde su sistema. Cambiaremos esta configuración una vez que hayamos terminado con el desarrollo del sitio web.
Luego haga clic
**Siguiente** después de hacerlo
6. Seleccione la ubicación de su Firestore DB
**Después de configurar esta ubicación, no podrá cambiarla más tarde. Nota: **
== Crear datos ==
- Haga clic en iniciar colección
2. Introduzca el
** ID de colección que puede probar por ahora
3. Introduzca los datos de la muestra. Ingresar
**sample_doc **como **ID del documento. **Ingrese **Encabezado** dentro del ** Campo. Me gusta Cloud** dentro del **Valor Luego haga clic en **Guardar**
= Paso 6: Desarrollar el contenido dinámico del sitio web =
Dividiremos la porción en dos partes, en la primera, veremos cómo obtener los datos de Firestore y usarlos en el sitio web. En la segunda parte, veremos cómo enviar los datos del formulario.
**Primero, descargaremos las credenciales para acceder a Firestore**
2. Haga clic en
**configuración** en el panel izquierdo y vaya a **Configuración del proyecto**
3. Ir a
**Cuentas de servicio** y haga clic en **Generar nueva clave privada
4. Haga clic en
**Generar clave Aparecerá una ventana emergente para descargar la clave. Guarde la clave dentro de la carpeta de **funciones** de su sitio web
== Obteniendo de Firestore ==
- Abierto
index.jdentro de la carpeta functions
2. Necesitamos definir algunas de las bibliotecas que queremos usar en nuestra aplicación. Estas son las mismas bibliotecas que instalamos anteriormente.
funciones const = require('firebase-functionsconst express = require('expressconst engine = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Aquí establecemos algunas cosas:
- Inicializar la aplicación usando express
- Pondremos nuestro motor como manillar
- Luego le diremos al express que nuestro código front-end estará dentro de la carpeta de vistas
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Autorice su aplicación para acceder a su Firestore DB
*Nota:*
1. Cambiar
**YOUR_SDK_NAMEjson con el archivo que descargaste para obtener **credenciales para acceder a Firestore2. Cambie la URL de la base de datos a la URL de su base de datos. Para ver la URL, puede ir a **Configuración >Cuenta de servicio**
var serviceAccount = requerir
YOUR_SDK_NAME.jsonadmin.initializeApp({credencial: admin.credential.cert(serviceAccount), URL de la base de datos: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Función para obtener datos de Firestore
- El ID de la colección es
muestra
- El ID del documento es
muestra_doc
Definimos lo anterior al ingresar los datos de la muestra.
función asíncrona getFirestoreconst firestore_con = esperar admin.firestoreconst writeResult = firestore_con.collection('muestradoc('muestra_docgetthen(doc =>{
if (!doc.exists) { console.log('No existe tal documento}
else {return doc.data
.catch(err =>{ console.log('Error al obtener el documento', errreturn writeResult
}
**Usamos Nota: ** **async** porque tenemos que esperar a que se complete la operación de promesa entre la base de datos y nuestro sitio web
6. Crea la ruta y envía el resultado al front-end
app.getasync (solicitud, respuesta) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Crear
**index.hbs** dentro de la carpeta **views**. hbs es un archivo de manillares Nota: **
8. Escriba este código HTML básico dentro
**index.hbs** para ver el resultado obtenido
Tushar Chand Kapoor
