Nombre de la Programación de
Sigla Asignatura PGY4121 Tiempo 3H
Asignatura Aplicaciones Móviles
Experiencia de Aprendizaje N° 1 Ionic como framework híbrido
Evaluación Evaluación número 1
Aspectos para considerar en la evaluación
I. Diseña la interfaz de usuario con los componentes respectivos del Framework para dar solución a los
requerimientos del cliente.
● Implementa los Page correspondientes según los requerimientos del proyecto.
● En el Page Iniciar Sesión implementa los componentes UI solicitados según los requerimientos del
cliente.
● En el Page Olvido la contraseña implementa los componentes UI solicitados según los requerimientos
del cliente.
● En la Page Registro implementar los componentes UI solicitados según los requerimientos del cliente.
● En la Page Catalogo implementar los componentes UI solicitados según los requerimientos del cliente.
● En la Page Detalle implementar los componentes UI solicitados según los requerimientos del cliente.
● Implementa restricciones de largo y formato de los componentes UI implementados en los Page según
los requerimientos planteados por el cliente.
● La Interfaz desarrollada tiene un grado de similitud con respecto a los requerimientos planteados por el
cliente.
● Para los datos de la pagina Catalogo, están en un archivo JSON llamado “[Link]”.
● Se deberá hacer entrega del proyecto, borrando las carpetas NODE_MODULES, .ANGULAR. en un RAR
comprimido, con su nombre y apellido, ejemplo: Julio_Herrera.rar.
● Se deberá subir en enlace de GitHub junto con la entrega (el no hacerlo, significa que no se entregará
puntaje en los HITOS de manejo de GIT y GitHub)
II. Maneja state y datos que cambian en el tiempo para la solución de los requerimientos del cliente.
● Utiliza el enrutamiento y NavigationExtras para pasar datos de un Page a otro, rescatando la
información mediante Route y ActiveRoute
III. Utiliza Props y Children para la solución de los requerimientos del cliente.
Genera los enrutamientos de la aplicación utilizando carga diferida de los módulos generados
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
1. DESCRIPCIÓN GENERAL ACTIVIDAD
Página de inicio de sesión
Es la página principal al iniciar la aplicación, esta pagina
deberá contener el título, un subtitulo y un mensaje de
bienvenida.
Con lo anterior, deberá tener dos campos de textos, para
ingresar un usuario y contraseña;
El usuario deberá tener un máximo de 3 caracteres y un
máximo de 8.
La contraseña deberá tener un mínimo de 4 caracteres y el
texto se deberá ver de la siguiente forma “******” al
momento de escribir.
Revisar la documentación de Ionic para saber más.
debajo deberá tener un botón ingresar que enviará a la
página “catalogo”.
A continuación, deberá tener un botón para invitar al
usuario a registrarse, enviándolo a la página de “registro”
Finalizando, con un botón en rojo para invitar al usuario a
recuperar la contraseña, enviando a la pagina de
“recuperación de contraseña”.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
Página de registro
Esta página permite a un usuario registrarse con siguiendo
los siguientes campos:
Usuario: campo que deberá tener como mínimo 3
caracteres y máximo 8.
Correo: campo que permita al usuario ingresar un correo.
Selección de carrera: permite al usuario seleccionar una
carrera de las siguientes opciones: Cocina, Informatica,
Redes, Administración, Otra.
Contraseña: Permite al usuario ingresar una contraseña, al
momento de escribir se deberá ver el texto en “******”
mínimo 4 caracteres.
Debajo dos botones alineados uno al lado de otro, que
permite registrar y Limpiar.
Al momento de registrar se deberá presentar un mensaje
que diga “Usuario registrado”:
La Página deberá presentar el título de la APP en la parte superior, seguido de un botón
volver, que redirecciona a la página principal (iniciar sesión) de la APP.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
Pagina Olvido su contraseña
La pagina de recuperar contraseña, permite a un usuario
solicitar su contraseña, ingresando su correo y usuario
registrado en el sistema.
Los campos son:
Correo: permite al usuario ingresar un correo.
Usuario: permite al usuario ingresar su usuario,
mínimo 3 caracteres, máximo 8 caracteres.
En la parte inferior un boton que permite solicitar y enviar la
información, una vez realizado, se deberá presentar un mensaje
que diga “si los datos coinciden recibirás tu correo”:
La Página deberá presentar el título de la APP en la parte
superior, seguido de un botón volver, que redirecciona a
la página principal (iniciar sesión) de la APP.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
Pagina Catalogo
La pagina catálogo, es la que se muestra después de “iniciar
sesión”, en donde se mostrará una lista con los datos que el
cliente requiere.
La información que se lista será, la primera imagen del producto,
seguido de el titulo y abajo el precio del producto.
Al final de cada fila, se deberá presentar el icono de “>”
invitando al usuario a pinchar para saber mas detalles de cada
elemento listado.
Al pinchar sobre un elemento, se navegará a la ruta llamada
“detalle” que deberá recibir los siguientes parámetros:
parámetros PATH: será el titulo
parámetros Query: precio, descripción y la ID
parámetros Extra: los 3 enlaces de las imágenes en
forma de Array.
La Página deberá presentar el título de la APP en la parte
superior, seguido de un botón salir, que redirecciona a la
página principal (iniciar sesión) de la APP.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
Pagina detalle
Esta pagina muestra la información que es recibida por parámetros, la
información se deberá mostrar siguiendo el esquema a continuación:
Parte superior: Se deberá mostrar el titulo del producto, seguido de un
botón volver, que navega hacia el catálogo de productos.
Usando componente de Ionic, deberán mostrar las tres imágenes del
producto en la parte superior con un Slides, que permite al usuario ver
todas las imágenes del producto.
Seguido, del nombre del producto en grande y en forma pequeña el
precio del producto.
Para finalizar, mostrando la descripción del producto.
Hay que recordar que esta información se deberá recibir por
parámetros y enviada desde la página de “catalogo”.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
APRENDIZAJES E INDICADORES DE LOGRO
Aprendizajes (Procedimentales,
Indicadores de logro
Actitudinales y conceptuales)
Diseña la interfaz de usuario con los componentes respectivos
del Framework para dar solución a los requerimientos del
Crea Aplicaciones móviles híbridas cliente.
utilizando un framework de acuerdo con Maneja state y datos que cambian en el tiempo para la
los requerimientos del cliente solución de los requerimientos del cliente.
Utiliza Props y Children para la solución de los requerimientos
del cliente.
Selecciona los Formularios y componentes condicionales del
Identificar un framework para la Framework para la solución de los requerimientos del cliente.
creación de aplicaciones móviles Distingue States y datos que cambian en el tiempo para la
híbridas entregando solución a los solución de los requerimientos del cliente.
requerimientos del cliente. Reconoce Props y Children para la solución de los
requerimientos del cliente.
Docente Diseñador Ian Cárdenas Castillo Revisor metodológico Manuela Jimenez
