Subida de archivos

5.4 Subida de archivos

La subida de archivos en la aplicación se realiza mediante los eventos dedrag and dropy mediante acceso al sistema de ficheros del sistema operativo através de un botón en la interfaz del usuario. La subida de archivos se debe implementar para escritorio y para dispositivos móviles. Para móviles no se va a poder explicar el proceso de subida porque no se ha llegado a implementar. Podemos comentar de esta que el acceso al sistema de ficheros del dispositivo móvil es diferente al de escritorio y se tiene pensado utilizarCordova Framework. Cordova es unframeworkpara el desarrollo de aplicaciones móviles que permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas web genéricas como JavaScript, HTML5 y CSS3, resultando aplicaciones híbridas. Cordova da acceso las APIs nativas del dispositivo.

Figura 5.4: Página de subida/visualización de los archivos del archivador digital.

Fuente: Propia

En el siguiente subcapítulo, se hablará de la subida de archivos implementada para escritorio.

5.4.1 Escritorio

El proceso de subida de archivos en el escritorio para los eventos dedrag and drop como para el acceso directo al sistema de ficheros del sistema operativo es el mismo.

Se debe comentar antes, que la única diferencia que existe, reside en el trato de los eventos de arrastrar y soltar los archivos o carpetas dentro de la aplicación. No se debe olvidar que la aplicación es un navegador web. En el otro tipo de subida, acceso directo al sistema de ficheros, esto no sucede.

Gracias a Angular, para captar los eventos dedragleave, draveover y drop, basta con indicarlo en el trozo de código HTML correspondiente en el que se quiera tener drag and drop. Por ejemplo, si se tiene una etiquetadivHTML y se desea que el área que ocupa en la página seadrag and dropse indicaría de la siguiente forma:

<div

(dragover)="onDragOverArea($event)"

(dragleave)="onDragLeaveArea($event)"

(drop)="processDrop($event)">

</div>

Cuando, en la aplicación, se capturan los eventos dedragoverydragleavese ejecu-tan las funcionesonDragOverArea(event)yonDragLeaveArea(event)respectivamente.

El objetivo principal de estas dos funciones, cada una llamada por su propio evento, es llamar a la siguiente función:

preventAndStop(event): void { event.stopPropagation();

event.preventDefault();

}

La funciónpreventAndStop(event), tiene que controlar el evento que se produce en el navegador web, deteniendo su propagación y previniendo que no se ejecute la acción por defecto que tiene el navegador con dicho evento. Por ejemplo, si el usuario desea arrastrar un archivo de extensión PDF en la aplicación, lo normal es que el navegador interprete que se quiere leer el archivo, por lo tanto lo mostrará al usuario. Como no queremos que esto ocurra se debe de controlar la propagación de estos dos eventos y prevenir la ejecución de la acción por naturaleza, ya que, su fin o respuesta no es la que se busca. Recordar, que el objetivo solo es subir el conjunto de archivos arrastrados al servidor.

En el ejemplo anterior, el archivo PDF no se muestra al usuario hasta que no se produce el evento dedrop. Por lo tanto, el lector puede deducir que el eventodrop, que se produce en el navegador, también se tiene controlar. Lo que quiere decir que, enprocessDrop(event), que es la función que se llama si se produce el evento dedrop, también se debe de ejecutar la funciónpreventAndStop(event).

5.4. Subida de archivos

Como ya se ha comentado, una vez se han arrastrado los archivos, el usuario pro-cede a soltarlos y para eso se tiene el eventodrop. Este evento ejecuta la función processDrop(event), que tiene el objetivo de, a parte realizar lo que se ha explicado anteriormente, proceder a la subida de los archivos que han sido arrastrados y soltados en la aplicación.

Una vez se ha soltado el conjunto de archivos en el área dedrag and drop, se procede a lapresubida de archivostal que:

1. Se recorre el conjunto de items — archivos para el usuario — que proporciona el evento. Cada item del evento se convierte a archivo para poder obtener los metadatos del archivo o directorio. Si se trata de un archivo, la información que interesa es la ruta del archivo, el nombre, el tamaño y el tipo o extensión. En el caso de un directorio solo interesa la ruta y el nombre del directorio. Ahora sí, con el conjunto de archivos y directorios pasamos al paso 2.

2. Se reunen en un objeto JSON, el identificador del archivador, el identificador del usuario, el conjunto de archivos, la cuota de espacio que le queda al usuario y la ruta del directorio del archivador en la que se van a subir los archivos.

3. Aquí entra en juego elipcRenderer— si el lector no lo recuerda, se habló de este en el Capítulo 3.4 —. ElipcRenderer, mediante la funciónsendlanza un evento llamadocheckDropFilespasándole como argumento el objeto del paso 2.

4. ElipcMain— si el lector no lo recuerda, se habló de este en el Capítulo 3.4 —, capta el eventocheckDropFilesy lanza la funciónprocessDropFiles (event, arg) que se encarga de que el conjunto de archivos y directorios del paso 1, solo sea de archivos. Esto se consigue leyendo los directorios y obteniendo los metadatos de los archivos que están dentro de los directorios que se han arrastrado. Cuando se ha terminado de leer todos los directorios, el conjunto de archivos se inserta en una base de datos local de SQLite. Ha este paso se le puede llamar presubida.

Por ahora, los archivos no están subidos al servidor, por esta razón se llama presu-bida. Lo que se ha hecho hasta el momento ha sido almacenar los metadatos, de cada archivo que se ha de subir al servidor, en una base de datos local SQLite de la aplica-ción. El equipo de desarrollo de Glyphstock se ha decantado por tomar esta decisión, ya que, si el usuario cierra la aplicación, ya sea por voluntad o por equivocación, el proceso de subida no se cancele. Se ha de comentar también, que el proceso de subida se hace en segundo plano, mediante la comunicación bidireccional entre elipcMain y elipcRenderer, a causa de que la aplicación podría bloquearse o no funcionar con fluidez de cara al usuario.

Para que el lector termine de "masticar"lapresubida de archivos, a continuación, se le presenta un diagrama de flujo del proceso de presubida.

Figura 5.5: Diagrama de flujo de la presubida de archivos arrastrados.

Fuente: Propia

Por último, ya es el momento de subir los archivos al servidor. La aplicación cada vez que se ejecuta lanza el eventostartUpload, tal que así:ipcRenderer.send(’startUpload’, arg). A partir de aquí:

1. ElipcMainmediante la captura del eventostartUploadtal que asíipcMain.on(’startUpload’, (event, arg)), ordena a la base de datos local que vaya dando salida a todos los

archivos que contiene.

2. Por motivos de confidencialidad, no se puede exponer en este documento el proceso previo que siguen los archivos una vez son encontrados en el sistema para ser enviados al servidor, por esta razón el lector debe pasar directamente al paso 3.

3. Por cada archivo leído del sistema, se hace una peticiónPostHTTP de subida al servidor, finalizando aquí el proceso de subida de los archivos.

5.4. Subida de archivos

Figura 5.6: Diagrama de flujo de la subida de archivos almacenados en la base de datos local.

Fuente: Propia

Para acabar este subcapítulo, se ha de comentar que desde la aplicación solo se puede visualizar los metadatos de los archivos y directorios pero nunca se van a po-der modificar o manipular. Al igual que desde el servidor, ya que los archivos están estructurados de tal manera que son ilegibles por cualquier usuario incógnito.

C

APÍTULO

6

C ONCLUSIONES

Para concluir este documento, en este capítulo se van a comentar las conclusiones y enseñanzas que conllevan la realización de este Trabajo de Fin de Grado.

Cuando empecé a desarrollar la aplicación no había nada implementado respecto a esta. De hecho, el proyecto estaba vacío. Por lo tanto, he desarrollado, con la ayuda del equipo de programadores de Glyphstock, toda la aplicación cliente GlyphstockApp que servirá principalmente de medio de subida de archivos y recuperación de estos para el usuario particular y PyME.

Implementar esta aplicación ha sido todo un reto, sobre todo en el módulo que se encarga de la subida de archivos. Me he topado con un nuevo, para mí, paradigma de programación orientado a eventos totalmente diferente de la programación secuencial.

Nunca había utilizado ninguna de las tecnologías que se han empleado en el desarrollo, como Angular, Ionic, Electron y TypeScript en vez de JavaScript — TypeScript es un lenguaje que añade tipado estático y objetos basados en clases y se transpila a JavaS-cript — enfrentándome a cada una de sus respectivas documentaciones. Filosofías o principios de programación, patrones de diseño, etc. Bastantes conceptos nuevos para mí, que han cambiado la forma de abstraerme ante la resolución de un problema. Pero los retos en informática, siempre te proporcionan conocimiento y eso te hace crecer.

A parte de todo lo que haya podido aprender respecto a programación, me ha encantado el trabajo en equipo, aunque fuera un equipo reducido, se aprende mucho comentando cuál sería la mejor opción para alguna parte de código, diferentes puntos de vista e incluso de lo que no te gusta de tus compañeros porque tan solo es el reflejo de una parte de ti que no quieres ver. He podido asistir a reuniones, he presentado la aplicación — aunque fuera en fase de desarrollo — a los diferentes inversores, he participado incluso en reuniones de marketing y Glyphstock ha precisado de mi opinión a la hora de proporcionar ideas en la aplicación. Todo esto me ha hecho vivir el proyecto, muy de cerca. Teniendo la suerte de haber podido "tocar"muchos de los palos que forman un proyecto, no solo el hecho de ’picar’ código y volver a casa.

Actualmente, sigo perteneciendo a la plantilla de trabajadores de Glyphstock y la aplicación está, en su primera versión, en fase de pruebas para salir a producción, por

lo que en Glyphstock estamos con ganas de que la aplicación salga a la luz y ojalá poder ver los frutos que puede dar este proyecto tan interesante.

B IBLIOGRAFÍA

[1] GoodRobot, “What is goodrobot?” 2016. [Online]. Available: http://goodrobot.es/

1.2

[2] Wikipedia, “Innovación o tecnología disruptiva,” 2017. [Online]. Available:

https://es.wikipedia.org/wiki/Tecnolog%C3%ADa_disruptiva 1.2

[3] Glyphstock, “¿qué es glyphstock?” 2017. [Online]. Available: https://www.

glyphstock.com/es/ 1.3

[4] ——, “Glyphstock para grandes empresas,” 2017. [Online]. Available: https:

//www.glyphstock.com/es/grandes-empresas/ 1.3

[5] ——, “Glyphstock para pymes y autónomos,” 2017. [Online]. Available:

https://www.glyphstock.com/es/pymes/ 1.3

[6] ——, “Glyphstock para particulares,” 2017. [Online]. Available: https://www.

glyphstock.com/es/particulares/ 1.3

[7] L. C. D. Marketing, “Cómo elaborar un briefing de mar-keting,” 2013. [Online]. Available: https://laculturadelmarketing.com/

como-elaborar-un-briefing-de-marketing/ 1.3.1

[8] U. T. F. S. María, “Seguridad e integridad de la transferencia de datos,”

2017. [Online]. Available: http://www.profesores.elo.utfsm.cl/~agv/elo322/1s12/

project/reports/AgulloVivancoGuerraSilva.pdf 1.3.2

[9] I. Sommerville,Ïngeniería del software, séptima edición". Pearson Addison Wesley, 2005. 1.4

[10] Electron, “Electron framework,” 2018. [Online]. Available: https://electronjs.org/

2.2.1

[11] Ionic, “Ionic framework,” 2018. [Online]. Available: https://ionicframework.com/

2.2.1

[12] A. Osmani, “El modelo de "shell de app",” 2018. [Online]. Available: https:

//developers.google.com/web/fundamentals/architecture/app-shell?hl=es 2.2.1 [13] G. developers,

“https://developers.google.com/web/progressive-web-apps/,” 2018. [Online]. Available: https://developers.google.com/web/

progressive-web-apps/ 2.2.1

[14] E. Gamma,"Design Patterns: Elements of Reusable Object-Oriented Software". Pear-son AddiPear-son Wesley, 1995. 4.2

[15] I. C. Informática, “Por qué documentar el proyecto software,” 2018. [Onli-ne]. Available: https://indalics.com/consultoria-informatica-estrategia-digital/

documentar-el-proyecto-software 4.5

[16] I. E. T. F. (IETF), “Json web token (jwt),” 2015. [Online]. Available: https:

//tools.ietf.org/html/rfc7519 5.3

In document Glyphstock. Aplicación cliente multiplataforma (sider 59-68)