< Volver a Proyectos

StudyLater

Demostración de descarga y apertura de archivos

ReactTypeScriptCapacitorAndroid

Demostración de descarga y apertura de archivos

Con la aparición de herramientas como Ionic FrameworkLogo Ionic se ha popularizado el desarrollo de Aplicaciones Hybridas: Apps desarrolladas con tecnologías web, pero que a vista del usuario se comportan como apps nativas. Y uno de los diferenciadores clave que podemos incluir en nuestras aplicaciones Hybridas es la integración con funcionalidades del sistema, tales como Almacenamiento, Cámara, Notificaciones, Sensores, etc.

La idea

La idea al desarrollar StudyLater es la de una aplicación donde se puedan descargar materiales de estudio, como PDFs, y tenerlos organizados y disponibles sin conexión. También la intención fue probar implementar estas funcionalidades a través de Capacitor:

  • Descargar y almacenar archivos
  • Abrir archivos en el visor de PDF del sistema
  • Inicio de sesión con Google de manera nativa

Los retos

Una de las tareas más difíciles fue el descargar archivos. Para empezar, al utilizar la función fetch() para descargar archivos solían aparecer errores de CORS, sobre todo cuando las descargas provienen de sitios sin certificado SSL. Este comportamiento es el esperado dentro de JavaScript en un navegador, pero muchos de los PDFs que un usuario querría descargar están en FTPs públicos, sin HTTPS.

Para resolver esto, tendríamos que descargarlos con un cliente HTTP nativo, usando el plugin Advanced HTTP. Ahora la posibilidad de descargar desde HTTPS dependerá de la configuración de Android. Incluso este plugin ya incluye el método `download()`, y solo necesitaba saber en qué ubicación almacenar los archivos. Esto se resuelve con el plugin File

Para abrir los archivos utilicé el plugin File Opener. Además, para que el *login* de Google se sienta más nativo, utilicé el plugin Google Plus, y solo necesité registrar una aplicación Android en la consola de Firebase

Resultados

Finalmente decidí detallar esta experiencia en un artículo de dev.to, y que pueda servir de guía a cualquier persona que desee implementar una función de descarga en sus apps.

También probé la viabilidad de utilizar Capacitor con otras tecnologías independientes de Ionic. Para construir las interfaces y darle vida a la aplicación utilicé React, así como para el diseño utilicé Bootstrap, aunque quizá no sea muy adecuado para una aplicación móvil, como si lo es para un sitio web responsivo.

Recursos y referencias