Programación Aplicaciones Móviles (PGY4221) Experiencia 2 Semana 6: Aplicar datos a Mi App Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Temáticas INTRODUCCIÓN A LA SEMANA ....................................................................................................................... 3 RESULTADO DE APRENDIZAJE (RA) – INDICADOR DE LOGRO (IL)....................................................................... 3 PALABRAS CLAVES ......................................................................................................................................... 4 ROUTE GUARDS (GUARDIANES DE RUTAS) ...................................................................................................... 5 ANGULAR ROUTE GUARDS .................................................................................................................................... 5 CREACIÓN DE ROUTE GUARDS ............................................................................................................................... 6 ADJUNTAR LOS ROUTE GUARDS A UNA RUTA ........................................................................................................... 8 PERSISTENCIA ............................................................................................................................................... 9 CIERRE DE LA SEMANA ................................................................................................................................ 10 REFERENCIAS .............................................................................................................................................. 11 APUNTES .................................................................................................................................................... 12 2 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Introducción a la semana En esta semana realizarás la actividad sumativa de la Experiencia 2 que consiste en una actividad con encargo llamada “Aplicar datos a mi App”, en donde deberás integrar la aplicación semestral iniciado la experiencia anterior con una Persistencia de datos y a un servicio API Rest mediante peticiones Http, junto con programar una navegación compleja siguiendo los estándares de la industria y lineamientos de la documentación oficial. Una vez desarrollada la solución, deberás comprimir el proyecto en un ZIP o RAR, excluyendo las carpetas e2e y node_modules y enviarlo de forma digital al AVA, igualmente deberás presentar tu proyecto. Resultado de Aprendizaje (RA) – Indicador de Logro (IL) Resultado de Aprendizaje (RA) Indicador de Logro (IL) RA 2. Desarrolla una nueva versión híbrida de la IL4. Mejora la usabilidad y las prestaciones del aplicación móvil, considerando el uso de equipo a través del enrutamiento en la prestaciones, el manejo de interfaces y API's que navegación de la aplicación conforme a los permitan la optimización de códigos y un requerimientos del cliente. correcto desarrollo de sus funciones. IL5. Añade API's para la programación de consultas síncronas. IL6. Programa, consultas asíncronas con persistencia de datos. IL7. Añade plugins a la aplicación, considerando la documentación del desarrollador del plugin. IL8. Considera la performance en el uso de los componentes del dispositivo, modelando el estado y los datos de la aplicación. 3 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Palabras claves Persistencia SQLite LocalStorage Native Storage APIs Plugins Native Camara Plugins Native Geolocalizacion 4 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Route Guards (Guardianes de Rutas) Veamos cómo usar protectores de ruta con enrutamiento angular para evitar el acceso a ciertas rutas si no se cumplen ciertas condiciones. Un ejemplo común de esto es impedir el acceso a ciertas páginas si el usuario no está logueado, y en eso nos estaremos enfocando. Angular Route Guards La idea básica detrás de un guardián de ruta es que usted adjunta un servicio que actúa como "route Guards" a una ruta en particular. Ese servicio tiene un método canActivate que regresará dependiendo de si se le debe permitir al usuario ir a esa ruta o no. Si el método canActivate devuelve falso, el usuario no podrá acceder a la ruta. Los route guards (protectores de ruta) hacen que el proceso de proteger ciertas rutas y redirigir al usuario sea bastante simple y, en mi opinión, más manejable que usar protectores de navegación como ionViewCanEnter en componentes individuales. El resultado final se parece a esto: Figura 1: Routes Nota. Microsoft. (s.f.). Visual Studio Code (1.74). [Software]. VS Code https://code.visualstudio.com/ Todo lo que tenemos que hacer es agregar una propiedad adicional a las definiciones de ruta para determinar si la ruta se puede activar. Dado que las rutas en el ejemplo anterior tienen carga diferida, también podríamos usar canLoad en lugar de canActivate para evitar por completo la carga de los children para esa ruta (en lugar de solo evitar el acceso). 5 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Es importante tener en cuenta que la mayoría de las cosas que implementamos en el lado del cliente (es decir, no en un servidor) son más para la experiencia del usuario que para la seguridad. El código del lado del cliente es accesible/modificable por el usuario, por lo que nunca debe usar guardias de ruta para proteger la información que no desea que el usuario vea (al igual que no debe usar únicamente el código del lado del cliente para validar/desinfectar el código del usuario de datos introducidos). Piense en los route guards como un guardia de seguridad amigable que dirige el tráfico: pueden mantener a las personas alejadas de donde se supone que no deben estar y dirigirlas a donde deben ir, pero cualquier persona con intenciones maliciosas podría pasar fácilmente junto al guardia. Cualquier cosa en su aplicación que deba mantenerse segura solo debe ser accesible a través de un servidor con el que se comunica su aplicación. Creación de Route Guards Crear un route guards es tan simple como crear un servicio que implemente un método canActivate. Por ejemplo, podríamos generar un servicio AuthGuard con el siguiente comando: Figura 2: AuthGuard Nota. Microsoft. (s.f.). Visual Studio Code (1.74). [Software]. VS Code https://code.visualstudio.com/ Luego, todo lo que necesita hacer es hacer que este método canActivate regrese verdadero o falso puedes hacer lo que quiera para determinar ese valor: 6 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Figura 3: Método canActivate Nota. Microsoft. (s.f.). Visual Studio Code (1.74). [Software]. VS Code https://code.visualstudio.com/ En este ejemplo, acabamos de configurar un objeto ficticio llamado authInfo que tiene un authenticated valor falso. En una situación de la vida real, simplemente extraeríamos esta información de autenticación de lo que sea responsable de autenticar al usuario. Luego verificamos ese valor, y si el usuario no está autenticado, lo enviamos de regreso a la página de inicio de sesión y regresamos false; de lo contrario, simplemente regresamos, lo true que permitirá que la navegación continúe. Aunque no lo estamos usando, también lo hemos inyectado ActivatedRouteSnapshot, lo que le permitirá acceder a detalles sobre la ruta por la que navega el usuario. Es posible que necesite detalles sobre la ruta, como los parámetros que se proporcionaron, para determinar si permite o no que un usuario continúe. 7 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Adjuntar los Route Guards a una Ruta Todo lo que queda por hacer una vez que crea el protector de ruta es importarlo al archivo que contiene sus rutas y adjuntarlo a cualquier ruta que desee proteger con él: Figura 4: Importar rutas Nota. Microsoft. (s.f.). Visual Studio Code (1.74). [Software]. VS Code https://code.visualstudio.com/ El enfoque que utiliza el enrutamiento angular para los protectores de ruta/navegación es bastante similar al final a la forma en que lo habría hecho ionViewCanEnter; en última instancia, es solo una función que devuelve true o false. Sin embargo, creo que el beneficio de este enfoque es que está un poco más organizado y es más fácil aplicar protecciones a varias rutas. 8 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Persistencia Hay ocasiones en las que la aplicación requiere que los datos que hubiera resultado de la historia de previas ejecuciones, se mantengan, es decir que sean persistentes (por ejemplo que fotos añadidas en anteriores ejecuciones se vean en los listados de futuras ejecuciones del programa), mientras que hay otras ocasiones en las que la aplicación requiere que los datos de anteriores ejecuciones no se mantengan y se empiece desde cero tras cada nueva ejecución, es decir los datos no sean persistentes (por ejemplo que al principio el listado de fotos esté vacío y se muestren sólo las fotos que se han tomado en la última sesión). Una buena forma de practicar un paso a paso de cómo generar persistencia en Ionic es revisar la guía de la semana 4, pues ahí te encontrarás con los comandos de instalación de SQLite en tu proyecto y además el código que debes implementar para generar persistencia de datos. 9 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Cierre de la semana En esta semana podrás demostrar lo aprendido en la semana 4 y 5, donde te darás cuenta que pudiste agregar seguridad a tu aplicación a través de los route guards, impidiendo que los usuarios no autorizados puedan acceder a información de tu aplicación, también pudiste desplegar y consumir una APIs desde tu aplicación móvil, esto abre un sinfín de posibilidades para generar los CRUD de tu aplicación en una base de datos fuera de tu dispositivo y así desde tu aplicación móvil acceder a los datos del backend. Los recursos nativos de Cámaras y Geolocalización de tu dispositivo pueden ser incorporados en la usabilidad de las reglas de negocio de tu aplicación si así lo requiriere. 10 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Referencias Eliteionic (s.f.). Guardias de ruta Angular. https://eliteionic-com.translate.goog/tutorials/preventaccess-to-pages-in-ionic-with-angular-routeguards/?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=sc Ionic framework (s.f.). Install camera. https://ionicframework.com/docs/native/camera 11 Programación Aplicaciones Móviles (PGY4221) Semana 6: Aplicar datos a Mi App Apuntes ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 12 Facilitador disciplinar: Sergio Fuentes Asesor par: Victor Rosendo Reservados todos los derechos Fundación Instituto Profesional Duoc UC. No se permite copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Fundación Instituto Profesional Duoc UC La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual. 13
