En este post te mostraré un software muy simple que he creado recientemente. Es para compartir archivos por internet y enviarlos de manera rápida y simple.
La principal función de esta app para transferir y compartir archivos es su funcionamiento para subir archivos en conexiones lentas.
Básicamente es como una alternativa open source y gratuita a WeTransfer, File.io, Firefox Send, etcétera.
A lo largo de este post te enseñaré cómo funciona, cómo puedes tenerla gratis (ya que usa Firebase en su plan gratuito) y cómo montarla en un servidor gratuitamente.
Nota: puedes ver cómo luce la app al descargar un archivo en este enlace.
En ocasiones mi internet es muy lento, realmente lento (no diré cuál es mi ISP porque no quiero hablar mal de Telmex), tanto que incluso un archivo de 10 Megabytes tarda aproximadamente 15 minutos en subirse.
Pero eso no es lo peor; lo peor es que cuando va en un 90 % u 85 %, la subida se reinicia. Entonces decidí usar el servicio de Firebase con su método uploadBytesResumable
y hacer una simple app que sirve para compartir archivos.
Veamos el módulo principal que el de la subida del archivo. Elegimos cualquier archivo de cualquier peso y le damos clic a Subir. Se va a mostrar la barra de progreso:
He probado desconectando el internet, y en ese caso la subida se pausa pero no se cancela. Cuando termina, podemos ver los archivos que tenemos subidos.
En esta app que se parece a WeTransfer podemos ver los archivos que hemos compartido en donde tenemos varias opciones, que son: eliminar el archivo, abrir el enlace de descarga en una nueva pestaña y copiar el enlace al portapapeles:
Básicamente sirve para eso: subir y transferir archivos a usuarios.
Si abrimos el enlace en una nueva pestaña o copiamos el mismo, tendremos el enlace de descarga. Ese enlace ya podemos enviarlo y compartirlo:
La alerta que aparece la coloqué yo para ahorrarme decirle eso a mis clientes cada que les envío archivos. Obviamente se puede modificar.
Esta aplicación utiliza la autenticación de Firebase. Todo necesita autentificación, excepto el método get
de los datos de un archivo.
Para el caso de los archivos se usa un UUID versión 4 y se guardan en una carpeta con ese UUID. Ese UUID no es predecible, ya que es criptográficamente seguro.
Si el UUID se quiere obtener se necesita tener el ID del documento, y no se pueden obtener todos los datos porque la regla list
está restringida a los usuarios con auth.
En pocas palabras: los usuarios no autenticados solo pueden ver el archivo que les enviaste.
Después de haber publicado la app, agregué la opción de contar las descargas del archivo (colocando la fecha de descarga en la hora local).
De este modo podemos ver cuántas veces han descargado el archivo que compartimos.
Lo único que cambia son las reglas, pero eso está actualizado más abajo en donde están las reglas generales.
Los detalles de las descargas están en otra colección para que los usuarios (sin saberlo) agreguen el registro de que han descargado nuestro archivo pero no puedan modificar al archivo en sí.
Como te dije anteriormente: esta aplicación para compartir archivos es open source y gratuita. El almacenamiento no te costará nada ya que puedes usar el plan gratuito de Firebase.
Si quieres tu propia versión puedes acceder al código fuente en: https://github.com/parzibyte/transferencia-archivos
Una vez que tengas el código fuente asegúrate de contar con NPM y Node. Abre una terminal en el proyecto e instala las dependencias con npm install
.
Luego crea un nuevo proyecto de Firebase con Firestore y Storage, crea un archivo .env
basándote en el .env.example
y configura las claves API. Un ejemplo de las credenciales está en este tutorial.
Ahora ejecuta npm run serve
y podrás acceder a la app en localhost:8080. Puedes hacer los cambios que creas pertinentes y después compilar la app para producción con npm run build
.
Al ejecutar el comando anterior tendrás la app ya compilada para producción. En este punto puedes convertirla en PWA con Workbox como se indica en este tutorial, ejecutando workbox generateSW workbox-config.js
.
Ya sea que hayas elegido convertirla a PWA o no, puedes alojar el CSS, JS y HTML en cualquier servidor. Si quieres uno gratuito yo recomiendo las GitHub Pages.
En cuanto a la configuración de Firebase debes configurar la autenticación con correo y contraseña, y debes agregar los usuarios desde la consola. También debes configurar Storage y Firestore.
Las reglas de Storage son:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow get;
allow read, write: if request.auth != null;
}
}
}
Y las de Firestore son:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /descargasArchivos/{id}{
allow get,update;
}
match /{document=**} {
allow get;
allow list, write: if request.auth != null;
}
}
}
Obviamente tú puedes configurarlas y cambiarlas de acuerdo a lo que necesites.
Esta app es muy simple pero funciona para el único propósito que tiene. Recuerda que también hice algo parecido a Google Drive con PHP y MySQL por si quieres algo parecido a eso.
Por aquí te dejo más software que he creado y publicado.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.