Como Convertir Una Aplicacion Angular A Una Aplicacion Web Progresi

UNIVERSIDAD MAYOR DE SAN SIMON FACULTAD DE CIENCIAS Y TECNOLOGIA DIRECCIÓN DE POSGRADO

“COMO CONVERTIR UNA APLICACIÓN ANGULAR A UNA APLICACIÓN WEB PROGRESIVA”

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES EMPRESARIALES VERSIÓN II

POSTULANTE

: SERGIO DANNY FLORES MONTERO

TUTOR

: ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia 2019

2

Agradecimientos A mis padres y hermano por todo el apoyo incondicional y brindarme su colaboración en todo momento, estos me permitieron llegar hasta donde estoy ahora. Porque los hijos somos el reflejo de todo el amor, dedicación y empeño que nos dan los padres. A mi tutor y a Digital Harbor por brindarme los conocimientos, colaboración y concederme esta oportunidad de superación. A mis amigos quienes siempre han estado a lado mío durante este diplomado. ¡Muchas gracias!

3

Índice de contenidos 1

Generalidades ................................................................................................................ 10 1.1

Antecedentes generales .......................................................................................... 10

1.2

Antecedentes específicos ....................................................................................... 10

2

Metodología .................................................................................................................. 11

3

Tendencia Primero Móvil (Mobile-first)....................................................................... 11

4

3.1

Sistemas operativos................................................................................................ 11

3.2

Navegadores........................................................................................................... 12

3.3

Tecnología de escritorio vs tecnología móvil ........................................................ 13

3.4

Otros datos relevantes ............................................................................................ 14

Aplicación web progresiva ............................................................................................ 19 4.1

Definición .............................................................................................................. 19

4.2

Fundamentos de una aplicación web progresiva ................................................... 19

4.3

Ejemplos de aplicaciones web progresivas en el mundo real ................................ 20

4.4

Ventajas de una aplicación web progresiva ........................................................... 21

4.4.1

Disponibilidad independiente de la conexión................................................. 21

4.4.2

Tiempos de carga rápidos ............................................................................... 21

4.4.3

Notificaciones Push ........................................................................................ 21

4.4.4

Acceso directo a la pantalla de inicio ............................................................. 21

4.4.5

Interfaz nativa. ................................................................................................ 22

4.5

5

Tecnologías que aprovechan las aplicaciones web progresivas ............................ 22

4.5.1

Primero Móvil ................................................................................................ 22

4.5.2

Service Worker ............................................................................................... 23

Aplicación web progresiva con angular ........................................................................ 24 5.1

Definición .............................................................................................................. 24

5.2

Por qué usar Angular ............................................................................................. 25

5.3

Fundamentos .......................................................................................................... 25

5.3.1

Arquitectura .................................................................................................... 25

5.3.2

Módulos .......................................................................................................... 26

5.3.3

Componentes .................................................................................................. 26 4

5.3.4

Plantillas, directivas y enlace de datos ........................................................... 27

5.3.5

Servicios e inyección de dependencia ............................................................ 27

5.3.6

Enrutamiento .................................................................................................. 28

5.4

Comportamiento del Service Worker. ................................................................... 28

5.4.1 6

Requisitos previos .......................................................................................... 29

Aplicación del caso de estudio creación de una aplicación web progresiva con angular 29

7

6.1

Instalando Node y NPM ........................................................................................ 29

6.2

Instalando Chrome. ................................................................................................ 31

6.3

Instalando Angular CLI ......................................................................................... 32

6.4

Creando y ejecutando la aplicación angular .......................................................... 32

6.5

Añadiendo Bootstrap ............................................................................................. 35

6.6

Desplegando la aplicación web progresiva ............................................................ 42

Conclusiones ................................................................................................................. 45

5

Índice de figuras Figura 1. Datos Estadísticos de Sistemas Operativos Actuales ............................................ 12 Figura 2. Datos Estadísticos de Navegadores Web Destacados ........................................... 13 Figura 3. Datos Estadisticos de Tecnologias Moviles vs Escritorio..................................... 14 Figura 4. Penetración de internet mayor al 50% .................................................................. 15 Figura 5. Venta de Smartphone disminuye en -4% y el Sistema Operativo líder es Android Seguido por IOS ................................................................................................................... 16 Figura 6. Usuarios Conectados a Internet por Regiones ...................................................... 17 Figura 7. Paises especificos Destacados con Conexion a Internet ....................................... 18 Figura 8. Relacion entre Navegador, Service Worker y La Web Internet............................ 23 Figura 9. Navegador con el Service Worker Almacenando Datos en la Cache sin conexion a Internet .................................................................................................................................. 24 Figura 10. Página Oficial para Instalación de NodeJS ......................................................... 30 Figura 11. Página de Descarga Oficial de Google Chrome .................................................. 31 Figura 12. Instalación de Nuevo Proyecto Angular ............................................................. 33 Figura 13. Estructura de Archivos de Aplicacion Angular .................................................. 34 Figura 14. Pantalla de Verificación de Creación de Nuevo Proyecto Angular .................... 35 Figura 15. Pagina Principal de La librería Animate CSS ..................................................... 36 Figura 16. Estructura de los Componentes, Servicios y Rutas del Proyecto ........................ 37 Figura 17.Creacion de Archivos al Agregar el Paquete de @angular/pwa .......................... 38 Figura 18. Comparación de los archivos creados para la Aplicación web progresiva. ........ 39 Figura 19. Comparación de la configuración el archivo angular.json .................................. 39 Figura 20. Configuración del archivo ngsw-config.json ...................................................... 40 Figura 21. Comparación después de Añadir el Service Worker a el archivo app.module.ts 41 Figura 22. Realizando el comando BUILD para que podamos Realizar los Archivos de producción del Proyecto ....................................................................................................... 41 Figura 23. Estructura de la Carpeta lista para llevar a Producción....................................... 42 Figura 24. Inicializando el Servidor ligero de Node "http-server" ....................................... 43

6

Figura 25. Ventana del navegador mostrando que el Service Worker está Instalado Correctamente....................................................................................................................... 43 Figura 26. Pantalla del Navegador Mostrando la Pestaña del Archivo Manifest. ................ 44 Figura 27. Verificando que la Aplicación Web Progresiva Funciona Correctamente. ........ 44

7

Resumen La presente monografía está centrado en mejorar la experiencia de usuario utilizando páginas web en dispositivos móviles o aplicaciones de escritorio. Analizando desde una perspectiva de experiencia de usuario, y tomando en cuenta que los dispositivos móviles son actualmente de uso universal, junto con la necesidad de evolución de las aplicaciones web, se planteó como objetivo construir una aplicación web progresiva, añadiendo una serie de características nuevas a una aplicación web ya existente desarrollada en angular, para que esta se comporte como una aplicación web nativa. Para realizar lo anteriormente nombrado, se debe identificar conceptos, características y principios de una aplicación web progresiva, para seguidamente realizar un análisis de experiencia basadas de una aplicación web angular normal a una con la tecnología de las aplicaciones web progresivas. Como herramientas de desarrollo primordial se empleó el uso de Angular CLI, librerías CSS, JavaScript en el Service Worker y algunas configuraciones que una aplicación web progresiva debe cumplir.

8

Introducción Actualmente muchas empresas utilizan una aplicaciones web con presencia Online y una gran mayoría de los visitantes utilizan su dispositivo móvil para acceder a sitios Web, lamentablemente una página web tradicional carece de algunas características que podrían hacerla más atractivas para que los usuarios regresen. Por otro lado para introducirnos al área de los dispositivos móviles es decir una aplicación nativa en nuestra empresa, requiere un costo extra en producción para cada Sistema Operativo, las aplicaciones suelen ser más pesadas, se debe descargar de las tiendas de aplicaciones además existen procesos y permisos de instalación, etc. Es por eso que se pone como propuesta, la realización de una Aplicación Web progresiva con Angular CLI la cual soportara las mejoras en la cache con el Service Worker para poder permitir un funcionamiento offline, poder visualizar desde el dispositivo móvil aplicando características responsivas con frameworks especializados es esa área. Por tanto el resultado de la presente monografía estará enfocado en convertir una aplicación web Angular normal a una aplicación web progresiva básica;

la cual demostrara el

funcionamiento, características nuevas, ventajas y desventajas de las Aplicaciones web progresivas, también se podrá observar la diferencia en cuanto la experiencia al usarla. Al mismo tiempo esta monografía ayudara a la comprensión de conceptos, características, pasos a seguir, aplicaciones, estadísticas y restricciones que deben tomar en cuenta las personas interesadas en implementar una aplicación web progresiva.

9

1 1.1

Generalidades Antecedentes generales

Una página web es un documento digital de carácter multimediático, es decir que es capaz de incluir audio, video y sus combinaciones, la cual puede ser accedida por un navegador web y una conexión activa a internet, existen millones de páginas web en el mundo, a través del navegador se puede acceder a toda su funcionalidad, actualmente se pudo observar que la tecnología va cambiando muchos usuarios visitan las páginas web desde sus dispositivos móviles, lo cual obligo a la web a solucionar y mejorar la web, implementando material responsivo, rapidez, botones intuitivos y otras opciones relevantes en un dispositivo móvil.

1.2

Antecedentes específicos

Actualmente en la web nos encontramos en una etapa de cambio constante donde los usuarios buscan la comodidad, rapidez, portabilidad, etc. Al observar el masivo uso de los dispositivos móviles tanto en visitas a sitios web como al adquirir aplicaciones nativas. La web se vio obligado a evolucionar y así buscar satisfacer a los clientes con una mejor experiencia de uso, para ello se innovo con la creación de la tecnología de las aplicaciones web progresivas. Las aplicaciones web progresivas no son una tecnología nueva pero ultimadamente están más de moda después que Microsoft anunciara que Windows las soportara de forma nativa. También están disponibles en Google Chrome, Firefox y Safari para dispositivos móviles. Estas no dependen de ningún sistema operativo, sino que toman lugar en una página web en un navegador, las páginas de Twitter, Facebook e Instagram son buenos ejemplos de aplicaciones web progresivas que están funcionando actualmente. Para la creación de páginas web existe un framework llamado Angular, que tiene sus propios mecanismos de configuración, tanto para crear una web normal, como una aplicación web progresiva que intentara mejorar progresivamente la experiencia de usuario.

10

2

Metodología

Para el presente trabajo se utilizara los siguientes métodos de investigación: Método bibliográfico, debido a que se realizara la lectura y compilación de libros, páginas web oficiales relacionadas al tema de estudio. Método analítico, debido a que se procederá a revisar y analizar ordenadamente los documentos relacionadas al tema de estudio para la redacción del presente trabajo. Método empírico o de campo, debido a que se utilizara un ejemplo de aplicación observada en el caso de estudio como convertir una aplicación angular a una aplicación web progresiva.

3

Tendencia Primero Móvil (Mobile-first)

La tendencia a la filosofía primero móvil está basado en estadísticas que muestran que el uso de tecnología móvil que corresponde a 51.1 % frente al 48.99 % a la de escritorio, la utilización en América Latina de los sistemas operativos móviles alcanza al 35% con tendencia a seguir creciendo, actualmente más de la mitad de las personas en el mundo ya están conectadas a internet y por ultimo pero no menos importante la innovación en tecnología móvil se ha estancado provocando que la tendencia de ventas de dispositivos móviles disminuya en un -4% debiendo así buscar innovación en el área. 3.1

Sistemas operativos

Tomando datos de latino américa que es la zona donde habitamos, según (GlobalStats, 2019, pp. /os-market-share/all/south-america). Enfocándonos en los 3 primeros puestos tenemos en: 

1ro -Windows con 58.33 %.



2do - Android con 27.04 %



3ro – OS X con 8.32 % 11

Lo cual nos muestra como el sistema Operativo móvil Android, va manteniendo e incrementando y esa tendencia en que todo se está convirtiendo en móvil, recalcando que aún no se sobre paso a lo que es los equipos de escritorio.

Figura 1. Datos Estadísticos de Sistemas Operativos Actuales Fuente: (GlobalStats, 2019)

3.2

Navegadores

Tomando datos de latino américa desde enero 2019 según (GlobalStats, 2019, pp. /browsermarket-share#monthly-201901-201905) Enfocándonos en los 3 primeros puestos tenemos en: 

1ro - Chrome con 62.7 %.



2do – Safari Mobile con 15.89 %



3ro - Firefox con 5.07 %

12

Con estos datos podemos observar que los navegadores también están evolucionando a la tecnología móvil en los buscadores esto nos ayudara a poder ver las tendencias que debemos seguir en el futuro.

Figura 2. Datos Estadísticos de Navegadores Web Destacados Fuente: (GlobalStats, 2019)

3.3

Tecnología de escritorio vs tecnología móvil

Tomando datos de todo el planeta del ultimo año 2018 – 2019 según (GlobalStats, 2019, pp. platform-market-share/desktop-mobile/worldwide/#monthly-201801-201903) 

1ro - Mobile con 51.1 %.



2do – Desktop con 48.99 %

En este grafico podemos observar un comportamiento en el que el consumo móvil y el consumo de escritorio están en una competencia bastante reñida, pero considerando que ya meses atrás se encontraban estabilizados, podríamos destacar que el tráfico móvil y de escritorio actualmente está cambiante.

13

Figura 3. Datos Estadísticos de Tecnologías Móviles vs Escritorio Fuente: (GlobalStats, 2019) 3.4

Otros datos relevantes

Los siguientes datos serán obtenidos de Bond Capital que es fondo de inversiones que realiza informes anuales sobre las tendencias de internet, cabe recalcar que la autora de estos estudios es Mary Meeker.

Según (Makeer, 2019) las tendencias de internet son: 

Por primera vez en la historia internet tiene una penetración mayor a 50%, esto quiere decir que más de la mitad de personas del planeta están conectadas a internet.

14

Figura 4. Penetración de internet mayor al 50% Fuente: (Makeer, 2019) 

La venta de Smartphone está disminuyendo en un - 4% el último año, lo que quiere decir que los teléfonos inteligentes no están innovando mejorando la experiencia de usuario (UX), pero otro dato que podemos rescatar es que Android domina el mercado de dispositivos móviles, seguido por IOS.

15

Figura 5. Venta de Smartphone disminuye en -4% y el Sistema Operativo líder es Android Seguido por IOS Fuente: (Makeer, 2019)



Usuarios conectados a internet por regiones, lo interesante de este cuadro es que podemos saber dónde tendríamos un nicho de mercado con posibilidades de éxito o fracaso.

16

Figura 6. Usuarios Conectados a Internet por Regiones Fuente: (Makeer, 2019)

17



Este grafico es más específico donde nos muestra el top de países más conectados a internet y los no conectados, donde podemos observar que china lidera y obtuvo un resultado muy lejano a los demás.

Figura 7. Paises Específicos Destacados con Conexión a Internet Fuente: (Makeer, 2019)

18

4

Aplicación web progresiva

Para la construcción de una aplicación web progresiva enfocada a la aplicación móvil es necesario el estudio de conceptos, fundamentos y tecnologías que se utilizan en una aplicación web progresiva, además de ver las ventajas y aplicaciones del mundo real.

4.1

Definición

Las aplicaciones web progresivas son aquellas aplicaciones web que son rápidas, atractivas, no solo es un framework, herramienta o palabra de moda elegante, sino que es una mentalidad de mejora constante al aprovechar las API modernas de los navegadores, lo que genera satisfacción para cada usuario. (Hajian, 2019, p. 1)

4.2

Fundamentos de una aplicación web progresiva

Según (Hajian, 2019, pp. 1-2) sin importar con que framework se elija trabajar, ni con que el lenguaje que se elija, las aplicaciones web progresivas deben tener características especiales: 

Carga instantánea: La aplicación debe cargarse rápidamente e interactiva.



Conectividad independiente: Ya sea sin red o con una conexión lenta e inestable la aplicación debe continuar funcionando.



Diseño responsivo: Con pensamiento Mobile-first se centra en optimización para dispositivos móviles.



Seguro: La seguridad es una de las prioridades más altas, es por eso que cada PWA debe alojarse en un servidor HTTPS.

19



Progresivo: Independientemente del navegador o dispositivos nuestra aplicación podrá evolucionar y adoptar nuevas características y así brindar mejor experiencia de usuario.

Según (Love, 2018, p. 21) para la creación inicial de las aplicaciones web progresivas se necesitó 3 principales características básicas que son: 

Nuevas características en los navegadores desde el punto de vista de los servicios como el Service Worker.



Las manifestaciones web.



La necesidad de las HTTPS para habilitar las API modernas.

4.3

Ejemplos de aplicaciones web progresivas en el mundo real

(Love, 2018, pp. 23-24) Nos muestra algunos datos sobre una de las primeras empresas que apoyaron y creyeron en las aplicaciones web progresivas, estos datos con el objetivo de poder validar su apoyo a esta tecnología. Una de las primeras empresas que invirtió en las aplicaciones web progresivas es “Flipkart”, se dedica al comercio electrónico con sede en Bengaluru – India. Quienes construyeron su aplicación web progresiva y obtuvieron los siguientes resultados: 

Tiempo en el sitio con Flipkart 3,5 minutos vs móvil PWA 70 segundos.



Los usuarios se quedaban 3 veces más tiempo.



Tasa de reincorporación mayor al 40%



70% de los usuarios agregaron a la pantalla de inicio.



El uso de datos fue 3 veces menor.

20

4.4

Ventajas de una aplicación web progresiva

En el libro de (O'Reilly Media, 2017, pp. 14-17) nombra las siguientes ventajas:

4.4.1

Disponibilidad independiente de la conexión

Las aplicaciones web progresivas no dependen de la conexión del usuario como lo son los sitios web tradicionales, pueden proporcionar una experiencia de usuario con todas las funciones aunque estén fuera de línea, en línea o sufren de conexión no confiable.

4.4.2

Tiempos de carga rápidos

Usando Service Worker podemos crear sitios que se inicien en un instante, ya sea que el usuario tenga una conexión muy rápida, una conexión 2G no confiable o incluso ninguna conexión, los sitios pueden cargarse en milisegundos incluso más rápido que las aplicaciones nativas.

4.4.3

Notificaciones Push

Las aplicaciones web progresivas pueden enviar notificaciones a sus usuarios incluso después de abandonar el sitio, estas notificaciones ofrecen una gran oportunidad para volver a participar con los usuarios, las notificaciones tienen una sensación completamente nativa y son indistinguibles de las notificaciones de aplicaciones nativas.

4.4.4

Acceso directo a la pantalla de inicio

Una vez que el usuario ha mostrado interés en su aplicación web progresiva, el navegador le sugerirá automáticamente que agregue un acceso directo a su pantalla de inicio, esta tampoco se debe distinguir de ninguna aplicación nativa. 21

4.4.5

Interfaz nativa.

Las aplicaciones web progresivas lanzadas desde la pantalla de inicio pueden tener un aspecto totalmente nativo. Pueden tener una pantalla de bienvenida mientras carga, se puede iniciar en modo pantalla completa, sin el navegador e incluso pueden bloquearse en una orientación de pantalla específica.

4.5

Tecnologías que aprovechan las aplicaciones web progresivas

Tomarse unos minutos para entender cómo funcionan las tecnologías es vital y también para así comprender su potencial.

4.5.1

Primero Móvil

Según (Magno, 2013, pp. 29-30) la próxima versión de Twitter Bootstrap framework es Mobile First es una solución elegante para el desarrollo FrontEnd, este hito no es solo técnico sino estratégico, sigue el paradigma actual de diseño para la web, es considerado el diseño del futuro. Los navegadores móviles están implementando el soporte a los nuevos HTML5 y CSS3 ya que vivimos en un momento donde el uso del móvil está aumentando considerablemente. Hay muchas formas de utilizar Bootstrap, puede personalizar y ampliar componentes desde la edición del código fuente, creando así un nuevo diseño para los navegadores porque no necesita definir elementos básicos de la interfaz desde cero, como botones, fuentes, insignias para cubrir los elementos de interfaz más comunes.

22

4.5.2

Service Worker

Los Service Worker introducen una capa, y mediante un script pueden registrarse para controlar una o más páginas de su sitio. Una vez instalado esta se aloja en cualquier ventana o pestaña del navegador, desde este lugar una Service Worker puede escuchar y actuar en los eventos de todas las páginas que están bajo su control en segundo plano. (O'Reilly Media, 2017).

Figura 8. Relación entre Navegador, Service Worker y La Web Internet Fuente: (O'Reilly Media, 2017)

Esto significa que hay una capa entre la página y la web que recibe las respuestas del servidor web y es así que toda la información necesaria puede ser almacenada en un cache del dispositivo.

23

Figura 9. Navegador con el Service Worker Almacenando Datos en la Cache sin conexion a Internet Fuente: (O'Reilly Media, 2017)

Observando esta lógica significa que incluso si el usuario cerró las pestañas que ejecutan su aplicación en su navegador, todavía hay una capa que se comunica con su servidor. Es así que podemos observar que el Service Worker es el corazón de una aplicación web progresiva.

5

Aplicación web progresiva con angular

Una aplicación web Angular es un framework de FrontEnd excepcional, capaz y completo en el que confían muchas empresas para crear y distribuir aplicaciones web, en esta sección observaremos por que el uso de Angular, sus fundamentos, su arquitectura y algunos requerimientos necesarios.

5.1

Definición

Las aplicaciones Angular de una sola página se encuentran en una posición privilegiada para beneficiarse de los Service Worker. Angular a partir de su versión 5.0.0 se envió con una implementación del Service Worker, que está diseñado para optimizar la experiencia de usuario.

24

5.2

Por qué usar Angular

Según (Arizmendi, 2018, pp. 21-22) 

Angular Open-Source Project: Angular es Open-Source es decir podemos conocer su código Fuente e inclusive contribuir a su mejora.



Arquitectura SOA y SPA: Es ideal para crear aplicaciones empresariales orientadas a servicios y las aplicaciones conocidas como de una sola página.



Demanda laboral: La demanda laboral ha crecido exponencialmente en los últimos años, esto también implica que el framework estará en constante evolución.



Reusable, fácil de mantener y Modular (MVC): Estos tres aspectos permite a los desarrolladores ser más productivos, podemos crear nuestros propios componentes reutilizables esto nos permite ser más rápidos en un mundo donde las metodologías agiles predominan.



Integración con otros framework: Angular se puede integrar con otros framework, librerías, bibliotecas, plugings.

5.3

Fundamentos

5.3.1

Arquitectura

Angular de acuerdo a sus autores (Google, angular.io, 2019, p. /guide/architecture) adopta el patrón de diseño MVW (Modelo-Vista- Waterver), lo más importante es que separa claramente las capas de Modelo-Vista-Controlador, además de sus servicios, directivas y filtros.

25

El patrón de diseño MVC es uno de los más populares en la industria de desarrollo de aplicaciones empresariales, el concepto de las tres es el siguiente: 

Modelo, se refiere a la capa de datos.



Vista, es responsable de la presentación de datos.



Controlador, sirve como mediador entre el modelo y la vista, este contiene toda la lógica de la aplicación.

La separación de capas nos permite modular nuestras aplicaciones lo cual hace al código más flexible, más fácil de mantener y manejar.

5.3.2

Módulos

Una aplicación angular normalmente contiene muchos módulos funcionales, cada aplicación angular tiene un módulo raíz llamada appModule, es una característica de angular que cuenta con su propio sistema modular el cual declara un contexto de compilación para un conjunto de capacidades estrechamente relacionadas. Los NgModules pueden importar funcionalidades a otros módulos y a la vez permitir que los otros módulos sean exportados, esta forma de trabajar con módulos ayuda a gestionar el desarrollo de aplicaciones complejas además que permite cargar solo los módulos que se utilizaran lo cual minimiza en el tiempo de ejecución. (Google, angular.io, 2019).

5.3.3

Componentes

Cada aplicación angular consta con al menos un componente que conecta una jerarquía de componentes con el DOM de la web. Cada componente define una clase que contiene datos y lógica de la aplicación, estos se asocian con una plantilla HTML, también un decorador identifica la clase inmediatamente debajo de ella como un componente y proporciona la plantilla y los metadatos específicos “@component” 26

Cabe recalcar que los componentes cuentan con decoradores representados por una arroba que son funciones que modifican las clases de JavaScript de este modo angular define una cantidad de decoradores que adjuntan tipos específicos de metadatos. (Google, angular.io, 2019).

5.3.4

Plantillas, directivas y enlace de datos

Una plantilla es HTML este combinado con angular es modificado por las directivas que proporcionan lógica al programa y van de la mano con el enlace de datos. Existen 2 tipos de enlace de datos: 

Enlace de eventos, permite que su aplicación responda a las entradas de usuario en el entorno de destino y así se actualiza la aplicación.



Enlace de propiedad, permite interpolar los valores que se calculan a partir de los datos de la aplicación en el HTML.

Según la lógica de angular antes que se muestre la vista se evalúa las directivas y resuelve la sintaxis de la plantilla junto con los datos de la aplicación. (Google, angular.io, 2019)

5.3.5

Servicios e inyección de dependencia

Un servicio permite inyectar a otros proveedores como dependencias en su clase, los servicios sirven para los datos o la lógica que no está asociados con una vista y que desean compartir entre componentes, los servicios están encargados de recuperar datos del servidor y validar entradas del usuario. La inyección de dependencia le permite mantener sus clases de componentes limpias y eficientes. (Google, angular.io, 2019)

27

5.3.6

Enrutamiento

Enrutamiento es la forma de dividir la aplicación en distintas áreas generalmente basadas en reglas que se derivan de la URL, este enrutamiento también mantiene el estado de la aplicación y protege áreas de la aplicación en función a ciertas reglas. Angular es posible configurar las rutas por mapeo a los componentes, hay 3 componentes principales que se utiliza para configurar el enrutamiento. (Google, angular.io, 2019). 

Routes, describe las rutas compatibles con la aplicación.



RouterOutlet, es un componente que marca la posición para así ubicar el contenido de cada ruta.



5.4

RouterLink, esta indica que se usa un link para enlazar las rutas.

Comportamiento del Service Worker. 

La aplicación se almacena en el cache así es como todos sus servicios se actualizan juntos.



Cuando los usuarios actualizan su aplicación podrán observar la última versión completa en el cache.



Las actualizaciones suceden en segundo plano y solo se descargan si han cambiado es por eso que siempre están actualizadas.



Conserva el ancho de banda si es posible.

Estas opciones están detalladas en el manifiesto, este archivo manifest se genera a partir de un archivo de configuración generado por el CLI llamado ngsw-config.json. (Google, angular.io, 2019).

28

5.4.1

Requisitos previos

Su aplicación debe ejecutarse en un navegador web que soporte los Service Worker, actualmente estos son compatibles con las últimas versiones de Chrome, Firefox, Edge, Safari, Opera y Samsung internet. Además se reitera que para que los Service Worker se registren correctamente deben acceder a la aplicación a través del protocolo HTTPS y no HTTP, la única excepción a esta regla es cuando la aplicación acceda al local host esto para facilitar el desarrollo local.

6

Aplicación del caso de estudio creación de una aplicación web progresiva con angular

Para la ejecución del caso de estudio el cual es convertir una aplicación web a una aplicación web progresiva con Angular es necesario utilizar Angular CLI y sus requerimientos, librerías CSS o Bootstrap para la parte visual, junto con su Service Worker en la configuración del navegador, aunque no es la única opción para crearla es bastante mantenible, tener en cuenta la estructura y modificaciones realizadas en los archivos del proyecto y finalmente como debemos ejecutar una aplicación web progresiva.

6.1

Instalando Node y NPM

Debemos asegurarnos de tener Node y NPM instalados en nuestra máquina, simplemente ejecutando los siguientes comandos para verificar su versión y verificar que estén instalados. $ node –v $ npm –v Caso contrario puede visitar el sitio web de node en: https://nodejs.org y descargar la última versión basada en su Sistema Operativo.

29

Figura 10. Página Oficial para Instalación de NodeJS Fuente: (Foundation, n.d.)

30

6.2

Instalando Chrome.

Aunque para crear una aplicación web progresiva que funcionara independientemente de los navegadores, nos limitaremos a usar Chrome y sus herramientas de desarrollo y depurar el Service Worker así como otras características de una aplicación web progresiva como el Web App Manifest y nuestro Service Worker. Si desea descargar Chrome puede visitar: https://www.google.com/chrome

Figura 11. Página de Descarga Oficial de Google Chrome

Fuente: (Google, Google, n.d.)

31

6.3

Instalando Angular CLI

El CLI es la interfaz de línea de comandos y angular tiene su propio CLI especializado para recibir órdenes y así crear nuestro proyecto, primeramente debemos instalar el CLI de angular globalmente ejecutando los siguientes comandos en la consola. $ npm install –g @angular/cli Una vez instalado ya podemos generar una nueva aplicación angular.

6.4

Creando y ejecutando la aplicación angular

En esta parte del proyecto creamos un nuevo proyecto Angular normal llamado países, con el siguiente comando:

$ ng new paises

Una vez ejecutado este comando se creara automáticamente la aplicación gracias al Angular CLI como observamos en la siguiente imagen.

32

Figura 12. Instalación de Nuevo Proyecto Angular Fuente: Elaboración Propia

33

Una vez creado el proyecto deberá crear un conjunto de carpetas con las siguientes características:

Figura 13. Estructura de Archivos de Aplicación Angular Fuente: (Elaboración Propia)

Una vez creado el proyecto pasamos a ejecutarlo para verificar si se realiza correctamente con el siguiente comando: $ ng serve –o

Y automáticamente se abrirá el localhost en el puerto 4200 34

Figura 14. Pantalla de Verificación de Creación de Nuevo Proyecto Angular Fuente: (Elaboración Propia)

6.5

Añadiendo Bootstrap

Para añadir la librería de Bootstrap a nuestra aplicación angular teniendo en cuenta siempre la tendencia Mobile-first, deberemos agregar el estilo CSS a nuestro proyecto de la siguiente dirección: https://getbootstrap.com/docs/4.3/getting-started/introduction/ Esto en index.html

35

Luego agregamos la librería anímate.css, en la carpeta assets donde se colocan los archivos estáticos creamos una carpeta llamada “css” y ahí dentro un archivo anímate.css y copiamos el contenido descargado y finalmente lo importamos en el index.css al igual que Bootstrap.

Figura 15. Página Principal de La librería Anímate CSS Fuente: (https://daneden.github.io/animate.css/)

Luego se integrara la lógica del sistema, que son los componentes, servicios, configuración de rutas.

$../paises>ng g c pages/pais $../paises>ng g c pages/paises 36

$../paises>ng g s services/paises $../paises>ng g m AppRouting – flat - crea el modulo en la carpeta app

Figura 16. Estructura de los Componentes, Servicios y Rutas del Proyecto Fuente: (Elaboración Propia)

Una vez ya realizada la logica del negocio en el sistema y tener una aplicación web angular normal se realizara la conversion a una aplicación web progresiva. Para añadir las funcionalidades de una aplicación web progresiva de una forma rapida se debe instalar el paquete oficial con el CLI de angular, este paquete automatiza varias caracteristicas de las aplicaciones web progresivas.

Se debe ejecutar la siguiente instrucción en la consola $../ng add @angular/pwa

37

Esta realizara la instalación descargando paquetes de npm, configuraciones, creara y actualizara algunos archivos. El archivo más importante que creara es el “ngsw-config.json” que es el archivo de configuración del Service Worker

Figura 17. Creacion de Archivos al Agregar el Paquete de @angular/pwa Fuente: (Elaboración propia)

38

Figura 18. Comparación de los archivos creados para la Aplicación web progresiva. Fuente: (Elaboración Propia)

Figura 19. Comparación de la configuración el archivo angular.json Fuente: (Elaboración Propia)

39

En el archivo “ngsw-config.json” podemos configurar comportamientos relacionados con el almacenamiento en cache de los recursos particulares de la aplicación.

Figura 20. Configuración del archivo ngsw-config.json Fuente: (Elaboración Propia)

40

En el archivo “app.module.ts” se añadió el “ServiceWorkerModule” lo que nos permite inyectar y registrar el Service Worker en el navegador.

Figura 21. Comparación después de Añadir el Service Worker a el archivo app.module.ts Fuente: (Elaboración Propia)

En este punto se tiende a pensar que ya las funcionalidades de la aplicación web progresiva están funcionando cosa que no es cierto, lo que debemos hacer es realizar el Build de producción, porque ahí se habilitaran las configuraciones del ng-serviceWorker.

$../ng Build - -prod

Figura 22. Realizando el comando BUILD para que podamos Realizar los Archivos de producción del Proyecto Fuente: (Elaboración Propia)

41

Y automáticamente creara una carpeta en la raíz llamada “dist” que tendrá información adicional realizado por la configuración del CLI de angular esta ya estará lista para subir aun hosting o la despleguemos localmente.

Figura 23. Estructura de la Carpeta lista para llevar a Producción. Fuente: (Elaboración Propia)

6.6

Desplegando la aplicación web progresiva

En esta parte necesitaremos instalar un servidor local para poder ejecutar la aplicación web progresiva, por practicidad instalaremos un servidor ligero de node llamado “http-server” el cual permite desplegar aplicaciones rápidamente simula un simple hosting montado en nuestra máquina. $ npm install http-server –g Y para utilizarlo debemos ubicarnos en la carpeta principal de los archivos de producción, en la consola debemos ejecutar la siguiente instrucción. 42

$ http-server

Figura 24. Inicializando el Servidor ligero de Node "http-server" Fuente: (Elaboración Propia)

Esto automáticamente levantara el servidor con la aplicación web progresiva por defecto en la siguiente dirección: “localhost:8080”

Figura 25. Ventana del navegador mostrando que el Service Worker está Instalado Correctamente. Fuente: (Elaboración Propia)

43

En la pestaña de la aplicación de las herramientas de desarrollo del navegador podremos observar como el estado del Service Worker se encuentra activo. En el apartado de manifest podremos observar el color de la aplicación y los iconos que se cargaron como se observa a continuación:

Figura 26. Pantalla del Navegador Mostrando la Pestaña del Archivo Manifest. Fuente: (Elaboración Propia)

Finalmente una vez se realicen los pasos verificamos que la aplicación se ejecuta correctamente con modo offline y se guardan los datos en la cache del navegador.

Figura 27. Verificando que la Aplicación Web Progresiva Funciona Correctamente. Fuente: (Elaboración Propia) 44

7

Conclusiones

Después de haber concluido con la investigación sobre las aplicaciones web progresivas, considerando conceptos, tecnologías, uso de herramientas para convertir una aplicación normal a una aplicación web progresiva, se puede concluir lo siguiente: 

Tomando en cuenta la investigación estadística de datos relevantes, se pudo evidenciar que el mercado móvil actualmente es considerado como un uso masivo de los usuarios, lo cual determina ser factible la realización de aplicaciones web progresivas actualmente.



Considerando la investigación conceptual realizada se pudo constatar que las tecnologías aprovechadas por las aplicaciones web progresivas como el uso del Service Worker junto con el cache del navegador, la conectividad independiente, carga instantánea, el diseño responsivo y también con la moderna forma de pensar lo que es el mobile-first son una ventaja para que las páginas web puedan migrar y evolucionar a esta tecnología.



En el área de Angular se pudo corroborar que es una herramienta excepcional por su arquitectura, uso de módulos, componentes, sus directivas, el uso de inyección de dependencias y su enrutamiento y también los conceptos del Service Worker.



Sobre el caso de estudio se pudo evidenciar que Angular junto con el Service Worker beneficia considerablemente optimizando la experiencia de usuario a la hora de crear las aplicaciones web progresivas, disponiendo distintas características sobresalientes como el uso sin conexión a internet, la experiencia responsiva y la carga de manera fluida.

45

Bibliografía Arizmendi, P. (2018). AngularJS . Paiminix. Foundation, N. (s.f.). Node JS. Obtenido de https://nodejs.org/es/ GlobalStats. (Mayo de 2019). statcounter. Obtenido de http://gs.statcounter.com/ Google. (2019). angular.io. Obtenido de https://angular.io/ Google. (s.f.). Google. Obtenido de https://www.google.com.mx/chrome/?brand=CHBD&gclid=Cj0KCQjw6cHoBRDdARIsADiTT za_KFQUHYTy9sR5EJynC1G9kLhFlJCwUdvoRTfo2ZWDqaidMPROvigaApzqEALw_wcB&gclsr c=aw.ds Hajian, M. (2019). Progressive Web Apps with Angular . Oslo, Noruega: Apress. Love, C. (2018). Progressive Web Application Development by Example. Birminghan - Inglaterra: Packt. Magno, A. (2013). Mobile First Bootstrap. Birminghan - Inglaterra: Packt Publishing Ltd. Makeer, M. (11 de Junio de 2019). https://www.bondcap.com/. Obtenido de Bond: https://www.bondcap.com/report/itr19/#view/1 O'Reilly Media, I. (2017). Building Progressive Web Apps: Bringing the power of Native to the browser. Sebastopol - California: Tal Ater.

46