45

Crear una API con Firebase Cloud Functions

27309Puntos

hace 5 años

Con Firebase Cloud Functions podemos ejecutar código sin necesidad de construir un robusto Backend, esto nos permite tener código almacenado en la nube de Google, sin necesidad de preocuparnos por escalar nuestros propios servidores o complicarnos con grandes configuraciones. Teniendo en cuenta esto, crearemos una función que expone los datos de una base de datos en Firebase.

NOTA: Antes de iniciar este recurso es necesario tener una cuenta verificada de Firebase, si no tienes una cuenta, crea una desde firebase.com.

Aprenderemos:

  1. Configurar nuestro proyecto
  2. Instalar y configurar un proyecto con Firebase Cloud Functions
  3. Crear una base de datos realtime con Firebase
  4. Exponer la información de la base de datos por medio de Firebase Cloud Functions
  5. Subir nuestro proyecto a producción.

Configurar nuestro proyecto

Nos dirigimos a nuestra carpeta de desarrollo y creamos un proyecto nuevo.

mkdir firebase-api && cd firebase-api

Preparar nuestro proyecto con git

git init

Inicializamos nuestro proyecto con npm

npm init -y

Ahora que tenemos nuestro proyecto es necesario dirigirnos a console.firebase.com y creamos un nuevo proyecto, en mi caso le asigne el nombre de: “arepa-dev-api”, puedes elegir el nombre que más se adapte a ti.

Instalación de Firebase

Para poder utilizar todas las bondades de Firebase en nuestro proyecto es necesario tener instalado Firebase-tools. En nuestra consola y con permisos de administrador instalamos firebase-tools de forma global.

npm install -g firebase-tools

Una vez instalado este paquete iniciamos sesión desde la terminal/consola.

firebase login

Esto nos pedirá abrir un navegador e iniciar sesión con nuestra cuenta en firebase para autorizar el uso de firebase-tools en nuestro equipo.

Configuración de Firebase Cloud Functions

Dentro de nuestro proyecto ejecutamos el siguiente comando:

firebase init

Nos permite configurar nuestro proyecto, para este recurso necesitamos seleccionar “Functions” y a continuación nos da la opción de crear un proyecto o elegir uno existente, elegimos el que creamos recientemente, en mi caso “arepa-dev-api”.

Otras configuraciones:

¿Qué idioma le gustaría usar para escribir Funciones en la Nube? Javascript
¿Desea utilizar ESLint para detectar posibles errores y aplicar el estilo? Y
Las funciones de archivo / package.json ya existen. Sobrescribir Y
¿Quieres instalar dependencias con npm ahora? Y

Una vez que termine la instalación y configuración ahora podemos exponer los datos de Firebase Realtime Database.

Crear una base de datos con Firebase

En la consola de Firebase y dentro de nuestro proyecto habilitaremos el uso de Firebase Database y elegimos la opción de Realtime Database.

Ahora vamos a crear un archivo en la raíz del proyecto al cual llamaremos db.json.

touch db.json

Con nuestro editor de código favorito, editamos este archivo y añadimos los datos: Descargar datos de ejemplo.

Subir la base de datos a Firebase:

firebase database:set /me data.json  -P arepa-dev-api
Donde:

/me - Es el objeto donde vivirá la información
-P arepa-dev-pi -es el proyecto en mi caso “arepa-dev-api” y aquí debes de poner el nombre de tu proyecto.

Ejecutado el comando y nos pedirá confirmar que sobreescribirá los datos, aceptamos.

Crear función para mostrar los datos

Con nuestro editor de código favorito (En mi caso utilizo VSCode) abrimos el proyecto y nos dirigimos a la carpeta “Functions” que nos creo el asistente de firebase y buscamos el archivo “index.js”.

Para este paso necesitamos descargar el archivo “firebase-config.json” desde firebase.com, nos dirigimos al proyecto y en Configuración / Cuentas de servicio / Firebase Admin SDK / Generar nueva llave privada. Descargamos el archivo lo renombrados “firebase-config.json” y colocamos en la raíz del proyecto.

// Importamos functions desde firebasebase-funcionsconst functions = require('firebase-functions');
// Importamos firebase-admin para conectarnos con la base de datosconst firebase = require('firebase-admin');
// Importamos el archivo de configuración que descargamosconst config = require('./firebase-config.json');
// inicializamos nuestra aplicación
firebase.initializeApp({
  credential: firebase.credential.cert(config),
  databaseURL: 'https://arepa-dev-api.firebaseio.com'// URL de nuestro proyecto
});

// creamos la función que obtiene los recursos de nuestra firebase database 
exports.api = functions.https.onRequest((req, res) => {
  res.header('Content-Type', 'application/json');
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  if (req.method === 'GET') {
    const data = firebase.database().ref('/me') // Hacemos referencia a la base de datos
    data.on('value', (snapshot) => {
      res.json(snapshot.val()); // El elemento resultante lo exponemos en un archivo JSON
    });
  }
});

Ahora tenemos nuestro archivo configurado y listo, es momento de enviar a producción.

Enviar a producción

Firebase CLI nos provee un comando con el cual podemos enviar a producción el proyecto que acabamos de crear.

firebase deploy

Al ejecutar este comando puede tardar un poco, seamos pacientes y esperemos la construcción del proyecto. Cuando este listo la consola nos mostrara un mensaje donde podremos ver la URL de nuestra función para ser utilizada donde la necesitemos.

En mi caso la URL donde expongo la información de mi base de datos es la siguiente: https://us-central1-arepa-dev-api.cloudfunctions.net/api

En la consola de Firebase en el apartado de “Functions” encontraras la información de la función que acabamos de crear, como acceder, logs, salud de la función, así como el consumo.

Si necesitas realizar un cambio en la información, solo debes de editar el archivo db.json de tu proyecto y volver a ejecutar el comando de “firebase dabatese:set /me -P {PROYECTO}”.

Probar nuestra API

Recomiendo utilizar PostMan para probar la función y ver los datos expuestos de tu base de datos.

postman-firebase-cloud-functions.png

En Conclusión

Aprendimos a crear un proyecto donde configuramos y exponemos la información almacenada en Firebase Realtime Database, por medio de una Cloud Function. Si quieres aprender más de cómo crear fenomenales proyectos sin tanta configuración de servidores te invito a tomar el curso de Firebase Cloud Functions.

Te dejo el repositorio en Github para que puedas probar este recurso: Firebase-api

Oscar
Oscar
gndx

27309Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
73Puntos

Hola, soy nueva con esta herramienta y tratando de seguir con el tutorial me encuentro con este error al ejecutar firebase deploy, alguien me podría apoyar…Gracias!!! 2019-04-15 (1).png

2
27309Puntos
5 años

Hola, @ely-monroy ¿tienes el proyecto en github? puedes pasarme tu URL y te ayudo a encontrar el error.

0
15564Puntos
5 años

Hola Amigo! Probé tu api y al igual que la mía no cargan gan los datos en mi app. pero la del tutorial si carga , me parece curioso es que al final de las url la que si carga termina em “/me” y al igual que la mía terminan en “api”, sabes que puede ser ? gracias!

1
9276Puntos
5 años

Hola me parece que ya lo resolviste?, yo le he hecho un GET a tu API desde Postman, también usé AJAX y Fetch y si trae los datos.

con Fetch

fetch('https://us-central1-marius-api.cloudfunctions.net/api')
    .then(function(response) {return response.json()
    })
    .then(function(data) {
        console.log(data)
    })
    .catch(function() {
        console.log('algo salio mal')
    });

con AJAX

functiongetDataFirebase() {
    let URL = 'https://us-central1-marius-api.cloudfunctions.net/api'const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            let response = JSON.parse(this.responseText)
            console.log(response)
        }
    }
    xhr.open('GET', URL, true);
    xhr.send();
}

getDataFirebase();
1
15564Puntos
5 años

Hola! que genial, aun no lo resuelvo al parecer es un tema de intercambio de recursos de origen cruzado o CORS según lo que me arroja la consola del navegador, he echo algunos pero no me carga los datos, estaré agradecido si alguno me puede iluminar xD… 😦

1
15564Puntos
5 años

Index.js de mi api

1
15564Puntos
5 años

Screenshot Navegador !

1
9276Puntos
5 años

🤔 me parece que no estas haciendo fetch a la URL correcta.
Ve a https://console.firebase.google.com/ , ingresa a tu proyecto, ve a la opción […] Functions donde veras un Dashboard y verifica que la URL de la columna Trigger es la misma a la que haces la petición.
Saludos.

3
21631Puntos

Excelente tutorial-entradaBlog! Muchas gracias, directo y fácil de entender.

2
15564Puntos
5 años

Hola, queria preguntarte porque no me carga el db.json en la consola de la database? despues que ejecuto deploy

2
9276Puntos
5 años

Pueba ejecutando primero

 firebase use--add
2
6940Puntos

Excelente aporte, espero verte en talent land 😄

1
27309Puntos
5 años

Hay estaremos en talent land 😃

2
9456Puntos

Que buen tutorial, tengo una duda.
Si tengo un archivo .json con miles de elementos (4mb), ¿Si lo subo a Firebase la carga puede ser más rápida?
Yo lo uso directamente en la misma carpeta y los llamo usando Fetch, pero se demora mucho en responder.

2
11444Puntos

Súper! Hay bastante por aprender! necesito más de 24 horas en un día!

https://us-central1-api-cv-3b8cb.cloudfunctions.net/api

1
15564Puntos
5 años
Screenshot 2019-06-10 14.27.37.png

Hola, Al ejecutar el comando firebase database:set //me db.json -P api-portfolio me da el error que aparece la imanen … sabes que puede ser te agradezco ! tambien ya lo ejecute con sudo

2
30833Puntos
5 años

Con firebase use --add, agregar el proyecto a la configuracion y luego agregar el json de los datos

1
10585Puntos

Help Me! cuano uso el comando

firebase database:set /me data.json -P arepa-dev-api

dice lo siguiente:

Error: Path must beginwith /
1
10585Puntos
5 años

ya resolvi, resulta que falta una barra inclina

asi es el comando

firebase database:set /me {nombre_del_archivo_json}.json -P {nombre_proyecto}

en nuestro caso remplazar:

{nombre_del_archivo_json} = db
{nombre_proyecto} = el nombre de tu proyecto en firebase

1
10585Puntos
5 años

:V asi si:

firebase database:set//me {nombre_del_archivo_json}.json -P {nombre_proyecto}
1
9276Puntos
5 años

Hola, que bueno que lo resolviste, pero a mí me funcionó con una sola barra, así 😊:

firebase database:set /me ./server/db.json -P PVU
1
12Puntos

Hola, yo tengo una consulta, hay alguna manera de subir una api ya creada en express o feathersjs a firebase? esto es posible? y perdón por mi ignorancia.

Saludos.

1
2096Puntos

Tengo una pequeña duda… Porqué cuando hago el test en PostMan me sale un error pero cuando lo pongo en el navegador los datos de mi db me los trae correctamente? a que se debe?

1
4779Puntos

Hola compas ya he intentado hacer deploy de varias formas y siempre me sale el mismo error.

Error: Error parsing triggers: Cannot find module ‘firebase-config.json’

Try running “npm install” in your functions directory before deploying.

Having trouble? Try firebase deploy --help

Alguien puede ayudarme a solucionarlo he cambiado el archivo firebase-config.json de la raiz del proyecto a la carpeta functions y no he podido dar solución alguna idea. Gracias

1
1040Puntos

Hubo mucho proceso de debug que hacer,pero el resultado valio la pena jajaja,encontre la solucion al problema al descrubrir el log de errores en firebase.

1
14532Puntos

Excelente gracias por el aporte 😃

1
3Puntos

hola tengo un problema al ejecutar firebase deploy en la consola. me da

=== Deploying to 'curriculum-vitae-d4fd0'...

i  deploying functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint C:\Users\Felipe\Documents\Dev\firebase-api\functions
> tslint -p tslint.json

"tslint" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! functions@ lint: `tslint -p tslint.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Felipe\AppData\Roaming\npm-cache\_logs\2020-05-04T18_13_06_432Z-debug.log
events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm --prefix "%RESOURCE_DIR%" run lint ENOENT
    at notFoundError (C:\Users\Felipe\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:6:26)
    at verifyENOENT (C:\Users\Felipe\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:40:16)
    at ChildProcess.cp.emit (C:\Users\Felipe\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:27:25)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess.cp.emit (C:\Users\Felipe\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:30:37)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) {
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn npm --prefix "%RESOURCE_DIR%" run lint',
  path: 'npm --prefix "%RESOURCE_DIR%" run lint',
  spawnargs: []
}

Error: functions predeploy error: Command terminated with non-zero exit code1```
nose como solucionarlo. ya busque distintas soluciones en varios foros pero ninguna funciona
1
3342Puntos

Holas ✌️
Alguna recomendación para realizar pruebas en local? 🤔
Dicho de otro modo, para realizar el deploy solo al estar 100% seguro de que funciona, porque en scripts/proyectos mas grandes seria algo engorroso 🙃

1
129Puntos

Hola! en esta linea, firebase database:set /me data.json -P arepa-dev-api

Entiendo que /me data.json
ahí sería nombrarlo como el mismo db.json que se creo mucho antes?

1
18817Puntos

A alguien más le sale este error y pueda guiarme para resolverlo?

Al parecer requiere subir del plan gratuito a uno de pago, pero creo que tiene que ver con mi configuración también.


Screen Shot 2020-08-26 at 11.47.04.png
2
18817Puntos
4 años

Encontré la solución a este problema, y efectivamente es por el plan de pago.

Firebase Cloud Functions ya no es gratuito, ahora se basa en pago por uso, todavía cuenta con la capa gratuita pero para habilitarla necesitas validar una tarjeta de crédito.
Estas nuevas modificaciones de uso de Firebase Cloud Functions son recientes (Junio 2020), y al parecer afectan a todos los que usamos Node 10 para hacer el deploy.

Más información acerca de esto:
https://www.reddit.com/r/Firebase/comments/go64nh/are_firebase_cloud_function_now_paid_only/

Los precios y limites entre planes:
https://firebase.google.com/pricing

1
10759Puntos

Tengo un problema, y es que en el paso de:
subir la base de datos a firebase
firebase database:set /me data.json -P arepa-dev-api

Respondo que si a sobreescribir y me salta un error:
An unexpected error has ocurred

A que se debe?

2
4 años

Se debe a que en data.json debes colocar db.json (si es que haz seguido el mismo paso a paso de Oscar o si no entonces el nombre que le colocaste a la base de datos cuando la creaste utilizando el comando touch)