Tutorial de Electron: Introducción a Firebase Storage

Bienvenidos a otro artículo del Tutorial Electron. Por esta ocasión hemos querido realizar un inciso en el desarrollo del proyecto con el único fin de dedicarnos a reforzar conceptos. Durante la serie lo haremos en diversas ocasiones para así poder trabajar con el proyecto de una manera mas ágil.

En esta ocasión vamos a hacer un pequeño repaso a uno de los tantos servicios de Google, Firebase Storage el cual vamos a trabajar en el siguiente artículo de la serie pues vamos a implementar la función de imágenes en el chat. Subiremos imágenes a este servicio y las grabaremos la referencia de la misma en la base de datos de Firebase para, de esta manera mostrarlas luego en los mensajes del chat, dando a los usuarios de OpenChat el doble de maneras de comunicarse

Durante el artículo veremos una breve introducción y los métodos más usados aunque, en esta ocasión, añadiremos también otro punto en el que hablaremos sobre como trabajar con este servicio desde NodeJS pues implica diversas peculiaridades con respecto a el método tradicional y es como nosotros lo vamos a usar para, de esta manera, seguir trabajando con el tema de eventos que vimos en el artículo anterior.

¿Qué es Firebase Storage?

Firebase Storage no es más que un servicio en el que se puede almacenar contenido generado por usuarios tales como fotos y vídeos, definición que ellos mismos dan de su producto. El servicio te provee una API simple con la que puedes subir archivos así como descargarlos. También te provee la posibilidad de usar Google Cloud Storage desde el servidor para acceder a estos espacios de almacenamiento, denominados buckets.

Métodos comunes de la API (en Web)

storage.ref()

Este método nos permite crear una referencia a el bucket de Firebase, que es el espacio de almacenamiento de nuestra aplicación en Firebase. Para poder instanciar este deberemos de haber referenciado anteriormente el servicio de Storage: firebase.storage().

// Ejemplos obtenidos de la documentación de Firebase Storage.

// Referencia al objeto Storage
var storage = firebase.storage();

// Referencia al espacio de almacenamiento
var storageRef = storage.ref();

// Referencia a un directorio
var imagesRef = storageRef.child('images');

// Referencia directa a un archivo
var spaceRef = storageRef.child('images/space.jpg');

reference.put(file)
Este método nos permite subir un archivo a Firebase Storage. Es sin duda el método principal pues nos permite tener una primera toma de contacto con el servicio.
A destacar de este método es el hecho de que el parámetro file es un objeto de tipo File. Te dejo información sobre la API de File para que puedas usar este método.

reference.child(fileRef).getDownloadURL()

Con este método podremos hacer lo contrario al anterior. Teniendo la referencia del lugar en el que está almacenado el archivo(fileRef) podremos obtener la URL de descargas. Por ejemplo, si la foto del usuario se llama photo_user.jpg y la carpeta donde guardamos todas las imágenes por defecto es images/, nuestro fileRef será: images/photo_user.jpg. Con la URL que está nos retornará podremos hacer una petición AJAX y obtener de esta manera la imagen.

Si quieres conocer más sobre los métodos de Firebase Storage, los tienes todos aquí.

reference.delete()

Con este método podremos eliminar el archivo, que hemos localizado en la referencia. Es una promesa por lo que podremos añadirle listeners mediante .then() y .catch().

Subir archivos a Firebase Storage desde NodeJS

He querido dedicar un solo espacio a la subida de archivos mediante NodeJS porque tal como he explicado en la introducción es un proceso diferente al de web y puede causarnos algo de confusión, pues no usaremos el módulo de Firebase para la subida.

Para tal subida, vamos a usar el módulo de Google Cloud Storage y nos conectaremos al bucket de Firebase, el cual es el que está preparado para trabajar en NodeJS y puesto que los buckets de Firebase son herencias de los de Google Cloud es la perfecta solución y la única.

Con respecto al método de subidas, tiene una ventaja con respecto a subirlo mediante web la cual no es más que su facilidad. Si recuerdas, vimos en el método que tenemos que pasar por la FileAPI. En este caso es suficiente con que le pasemos la dirección donde está ubicado el archivo en el dispositivo del usuario y automágicamente se procesará la subida.

const Storage = require('@google-cloud/storage')
const storage = new Storage({
  projectId: 'myproyectitoawesome', // Está en la configuración de Firebase.
  keyFileName: '' // La ruta al JSON de Firebase en NodeJS
})

const bucket = storage.bucket('myproyectitoawesome.appspot.com') // La URL que viene en la parte de Storage sin el `gs://`.

bucket.upload('~/Desktop/photo.jpg', (err, file) => {
  if(err) throw err
})

Como ves, una vez importamos el módulo de Storage de Google Cloud tendremos que crear una nueva instancia de este(new Storage) y darle información como el ID del proyecto de Firebase, que podremos encontrar en la configuración del proyecto, localizada en la consola de Firebase. También deberemos colocar la ruta del archivo que en el artículo anterior añadimos en el objeto de configuración de firebase. Con colocar la ruta donde tengamos localizado este es suficiente.

Tras ello, guardamos en la variable bucket nuestro espacio de almacenamiento en Firebase. Para ello, en la consola de administración de Firebase en la parte de Storage deberemos de copiar la URL que nos aparece y remover el prefijo gs://.

Finalmente, si le damos la URL del archivo a el método bucket.upload(fileDir, callback) este se encargará de subir la imagen a Firebase, sin que tengamos que trabajar con ella ni pre procesarla. Tal como hemos definido el callback nos retornaría un error si hay algún problema durante la subida de la imagen(falta de privilegios, error en la configuración…).

Conclusión

Con este artículo hemos obtenido una visión global sobre el servicio de Firebase Storage y cómo trabajar con este servicio en los dos ambientes relacionados con Electron (NodeJS y el Frontend). Si tienes alguna duda solo tienes que dejarla abajo en los comentarios y haremos todo lo posible por ayudarte en el proceso.