![Entornos de desarrollo](http://jamj2000.github.io/hlc-fullstack/hlc-fullstack.png) [![cc-by-sa](http://jamj2000.github.io/hlc-fullstack/cc-by-sa.png)](http://creativecommons.org/licenses/by-sa/4.0/) IES Luis Vélez de Guevara - Écija - Spain <hr> <a name="indice"></a> # Índice #### [Apuntes](#apuntes) #### [Cuestiones](#cuestiones) #### [Prácticas](#practicas) <pre> </pre> <pre> </pre> #<a name="apuntes"></a>[Apuntes](#indice) 1. Elabora los apuntes de esta Unidad y guárdalos en GitHub en un repositorio llamado 'Apuntes_HLC_Fullstack'. <hr> <pre> </pre> #<a name="cuestiones"></a>[Cuestiones](#indice) 1. ¿Qué significan las siglas PWA? <hr> 1. Busca informacción en Internet acerca de las PWA y las características que deben poseer. <hr> 1. ¿Para que sirve el archivo `manifest.json` de una PWA? <hr> 1. ¿En qué directorio debe alojarse el archivo `manifest.json`? <hr> 1. ¿Qué es la app shell? ¿Qué archivos debería formar parte de ella? Explica la respuesta. <hr> 1. ¿Qué es un `service worker`? ¿Cuál es su finalidad? <hr> 1. ¿Cuáles son los eventos básicos que atiente el `service worker`? Explica la respuesta. <hr> <pre> </pre> #<a name="practicas"></a>[Prácticas](#indice) Siguiendo el desarrollo de la aplicación iniciada en los temas anteriores, realiza la adaptación del frontend a dispositivos móviles. Los requisitos a tener en cuenta son: - La aplicación podrá instalarse en dispositivos móviles y de escritorio. - Funcionará en dispositivos móviles y de escritorio como si de una app nativa se tratase. - Se gestionará el caso del uso off-line. - El rendimiento será equiparable al de una app nativa. ## Práctica 1 **Progressive Web App**. - Genera el archivo de manifiesto oportuno, indicando colores e iconos de aplicación. - Determina los archivos que serán cacheados como parte de la app shell. - Implementa el cacheo de la app shell para gestionar las conexiones offline. - Genera el código correspondiente del `Service Worker`. - Realiza las pruebas correspondientes para comprobar el adecuado funcionamiento. ## Práctica 2 **Despliegue en Heroku + mLab** - Crea una cuenta gratuita en Heroku y otra en mLab. - Crea una base de datos MongoDB en mLab y apunta los parámetros que se te indican. - Crea una aplicación en Heroku y configura las variables de entorno necesarias. - Edita la configuración dependiendo de si la aplicación es desplegada en un entorno de desarrollo o en un entorno de producción. - Despliega la aplicación en Heroku. - Realiza las pruebas para comprobar el correcto funcionamiento y su adaptación a dispositivos móviles. Tutorial a seguir: https://github.com/jamj2000/tienda0#despliegue-en-heroku--mlab <pre> </pre>