TALLER 3
Evaluación Unidad N°III
UNIDAD DE APRENDIZAJE III
PROGRAMACIÓN HÍBRIDA
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Aprendizajes esperados
Aprendizajes esperados en el taller:
AE1. Diseñar y desarrollar ventanas modales en una aplicación Ionic.
AE2. Aplicar pipes de Angular para filtrar y transformar datos de manera apropiada.
AE3. Utilizar la cámara del dispositivo móvil para capturar imágenes en una aplicación
Ionic.
AE4. Comprender y aplicar conceptos relacionados con la configuración de una
aplicación para Android, incluyendo la generación y firma de un APK.
[Link] 2
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Instrucciones generales
Una vez realizada la lectura comprensiva del material de estudio, es
fundamental la realización de este taller, el que tiene por objetivo medir la
correcta internalización y aplicación de los conceptos abordados en las
mencionadas unidades.
El desarrollo de este trabajo es individual, no se permitirán entregas de
talleres en duplas o en grupos.
Contenidos asociados al taller:
1. Ventanas modales
2. Pipes
3. Capacitor HTTP
4. Barra de búsqueda
5. Cámara
Instrucciones específicas
El taller propuesto requiere articular contenidos
abordados en la Unidad, a través de las siguientes
acciones:
Al final de este documento podrás encontrar la pauta de evaluación y los in
[Link] 3
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Entregables
1. Informe en Word o PDF que explique con sus propias palabras los fragmentos
más significativos del código de acuerdo con los criterios de evaluación. Más abajo
en el documento se presenta la estructura sugerida.
2. Proyecto comprimido en ZIP o enlace dentro del informe. Puede usar
plataformas como GitHub, Google Drive, OneDrive, u otras similares. Si comprime
su proyecto es esencial no incluir las carpetas node_modules, .angular
y .git antes de adjuntar el trabajo, su inclusión haría que el tamaño del
proyecto sea considerablemente grande.
[Link] 4
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Actividad 1 - Prototipo
Instrucciones
En esta primera etapa, se le solicita desarrollar la estructura inicial del
proyecto, dividiendo el problema en componentes más pequeños y
diseñando las interfaces gráficas para el usuario. La aplicación que va a
construir permitirá registrar distintos destinos posibles para vacacionar.
A continuación, se detallan los puntos clave a considerar:
1. La primera página debe mostrar una lista de destinos previamente escogidos
por el usuario.
2. Se debe mostrar una foto del destino, el nombre del lugar turístico, el país y
una serie de botones
3. Se debe poder registrar el valor del viaje de ida y vuelta cuando se pulsa el
botón. Puede usar la moneda de su gusto, ejemplo, dólar, peso chileno, euro,
etc. El formulario para el ingreso de esta información debe ser desplegado a
través de una ventana modal. Finalmente, el monto debe ser formateado
usando pipes.
4. El botón de la cámara fotográfica debe permitir capturar una fotografía y
reemplazar la imagen actual del destino.
5. El botón del tacho de basura debe permitir eliminar un destino turístico previa
confirmación a través de una ventana modal.
6. Puede escoger el método de persistencia a su gusto, por ejemplo, memoria
(array), preferencias o base de datos.
[Link] 5
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Figura 1 Pantalla propuesta para el inicio Figura 2 Modal propuesto para cambiar el costo del viaje
[Link] 6
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Actividad 2 – Barra de Búsqueda
Instrucciones
En esta segunda etapa, se le pide implementar un buscador de destinos
turísticos que esté conectado con el web Service de OpenTripMap:
1. Utilice ion-search-bar para la barra de búsqueda
2. Utilice un tiempo de debounce para evitar llamadas innecesarias a la API mientras
escribe
3. Consiga una API Key desde el sitio Open Trip Map
4. Estudie la documentación para utilizar los endpoints que le servirán para la
implementación:
a. /{lang}/places/autosuggest
b. /{lang}/places/xid/{xid}
5. Instale y utilice Capacitor HTTP para consumir los servicios web
6. Cada vez que el usuario escriba algún término relacionado con un destino turístico
debe realizar la búsqueda en los web services de Open Trip Map. Cuando muestre
los resultados debe incorporar un botón que permita incorporar ese destino a la
lista de los deseados.
[Link] 7
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Figura 3 API de Open Trip Map
[Link] 8
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Figura 4 Ejemplo de ion-search-bar funcionando
[Link] 9
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Actividad 3 – Android
Instrucciones
En esta última etapa, debe probar la aplicación en Android Studio y realizar la
publicación del archivo AAB. Debe documentar el proceso realizado en el
informe.
[Link] 1
0
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Estructura sugerida para el informe:
1. Diseño
1.1. Pantallas
1.2. Ventanas Modales
1.3. Pipes utilizados
2. Cámara
3. Barra de Búsqueda y Web Service
4. Publicación para Android
5. Reflexión final (qué problemas tuve, cómo puedo mejorar, en qué necesito ayuda)
Información Importante
Esta actividad será evaluada por el profesor de la asignatura, por lo que
se sugiere, para su realización, considerar los Criterios de Evaluación
detallados al final de este documento. El puntaje total de este taller es de
100 puntos, y el puntaje mínimo de aprobación es de 60 puntos.
[Link] 1
1
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Formalidades
• Tipo de letra: Arial 12
• Interlineado: 1,15
• Formato - Entrega del taller en archivo Word o PDF, que lleve como nombre:
SuNombre_SuApellido.
• Subir archivo a la plataforma
[Link] 1
2
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
Pauta de evaluación
Criterios de Evaluación Indicadores de Logro Puntaje
Instala el plugin de la cámara 5
correctamente
Integra la funcionalidad de
la cámara para capturar Captura una fotografía usando el plugin 10
imágenes y mostrarlas en
la aplicación. Muestra la fotografía capturada
10
con la cámara correctamente
Implementa al menos un
pipe de Angular para Utiliza un pipe para formatear el valor
10
presentar datos de manera del viaje ida y vuelta de manera correcta
efectiva en la aplicación.
Utiliza una ventana modal para
Crea al menos dos recuperar el valor del viaje de ida y 10
ventanas modales que se
vuelta
integren de manera
coherente en una Confirma la eliminación de un registro
10
aplicación Ionic. usando una ventana modal
Utiliza componente ion-search-bar
5
correctamente
Recupera correctamente los datos con el
Realiza peticiones tanto 10
síncronas como asíncronas
término de búsqueda
a servicios web externos Recupera correctamente los datos de
para conseguir información detalle de los destinos turísticos 10
desde internet.
Agrega el botón y la funcionalidad para
agregar un destino nuevo a la lista de 5
deseados
Genera un APK funcional de
la aplicación, incluyendo la Documenta adecuadamente las pruebas y
firma del mismo para su la generación del archivo AAB en el 5
instalación en dispositivos informe
Android.
Adjunta el código o proporciona un enlace 5
al proyecto, siguiendo buenas prácticas
como: mantener un código ordenado con
una correcta indentación, la inclusión de
comentarios explicativos, utilización de
nombres significativos para variables y
[Link] 1
3
ESCUELA DE INFORMÁTICA Y TELECOMUNICACIONES
métodos, y se asegura de que la carpeta
node_modules no esté incluida.
Adjunta el informe en formato Word o
PDF, asegurando mantener una ortografía
impecable. El informe explica de manera
detallada los fragmentos de código
relevantes. Se asegura de que el código
incorporado esté ordenado y sea
5
fácilmente legible, con un resaltado de
sintaxis adecuado. La estructura del
informe debe ser coherente, abordando
en detalle tanto los problemas que pudo
solucionar como aquellos que no pudo
resolver.
Puntaje Total 100
[Link] 1
4
