Programacion Multiplataforma Nativa Evaluación Iii-A: Competencia Asociada: Unidad de Competencia

Semana 6
PROGRAMACION MULTIPLATAFORMA NATIVA

EVALUACIÓN III-A
Competencia asociada: Desarrollar aplicaciones Mobile utilizando estándares de

la industria
Unidad de Competencia: Desarrolla aplicaciones multiplataforma utilizando React

y servicios web
Consideraciones importantes
1. La evaluación es un encargo.
2. Usted posee un periodo en envío limitado para poder realizar el encargo.
3. La copia o plagio de algún encargo y/o evaluación será sancionada con nota 1.
Instrucciones
El siguiente caso será utilizado para todo el desarrollo de la asignatura, en donde

en las siguientes unidades, usted deberá desarrollar el frontend de la aplicación
multiplataforma con dos frameworks de JavaScript (React y Angular
respectivamente). Recuerde que la finalidad de este tipo de evaluaciones es dar
un acercamiento a un caso real, en donde usted deba desarrollar una app desde
el backend hasta la distribución de la misma.
El producto final de la evaluación de la Unidad III de la asignatura es la

construcción de un frontend con Angular, que sea capaz de comunicarse con el
backend desarrollado en la evaluación de la Unidad I, por medio de peticiones
AJAX.
Semana 6
Los puntos para desarrollar serán los siguientes:
- Configurar el enrutamiento y definir las rutas de navegación de los

componentes con un archivo app.routing.ts
- Crear un servicio que permita la conexión a la API RestFul del backend con
la app de Angular
- Crear componentes necesarios para la administración de los pacientes
- Validar el ingreso de datos y utilizar directivas de control *ngIf y *ngFor
- Redireccionar páginas
- Utilización de TypeScript para el desarrollo de la lógica de las clases de los
componentes y del proyecto en sí.
- Utilización de los Hook de los componentes de Angular.
Observación Importante: al momento de subir el desarrollo del proyecto a

plataforma, por favor, no considerar la carpeta node_modules del proyecto, ya que
aumenta considerablemente el tamaño del proyecto.
Caso de estudio
El Hospital El Alerce necesita generar un nuevo sistema multiplataforma de

respaldo con el framework de Angular, en caso de que el proyecto con React deje
de funcionar por algún motivo. Esta nueva aplicación, también debe permitir el
ingreso de datos de pacientes que serán atendidos en una visita médica express
dentro de un asilo de ancianos. Para esto, se le ha pedido a usted como parte del
departamento de desarrollo de software, crear un nuevo sistema que permita
ingresar, modificar, eliminar, listar y buscar pacientes.
La primera iteración del proyecto se baso en el desarrollo del backend con

conexión a la persistencia de datos con Node.JS, MongoDB y express.js.
En la segunda etapa, se construyo un frontend con React que permitía enviar y

recibir datos hacia el backend, con validaciones incluidas.
En esta tercera etapa, y a modo de petición del cliente, usted deberá crear un
proyecto con Angular, en donde se deberán crear los siguientes componentes con
las siguientes rutas de acceso:
Semana 6
Cada uno de los componentes deben llevar una interfaz de usuario respectiva en
caso de ser necesario.
Además debe existir un menú de navegación, con los enlaces para los
componentes Home, NuevoRegistro, ListarRegistros y BuscarRegistro. Este último
debe ser invocado dentro del mismo menú de navegación.
El menú de navegación deberá ser invocado dentro del app.component.html,

arriba del router-outlet.
Para realizar las peticiones AJAX al backend, debe existir un servicio, que permita
la conexión. Este será un archivo que contendrá cada uno de los métodos con los
cuales se harán las llamadas.
Los componentes que sean para la administración de los datos del paciente
deberán invocar a este servicio de pacientes, por medio de métodos creados en la
clase del componente.
Los componentes NuevoRegistro, ActualizarRegistro y BusquedaRegistro deben

llevar el o los campos necesarios (labels, textbox, angular-file-uploader) en la
interfaz de usuario para poder realizar la tarea asociada al componente.
Los componentes de ingreso y actualización de datos de pacientes deberán estar

validados desde el frontend con *ngIf. Los campos para validar serán rut, nombre,
edad, sexo y enfermedad. Si uno o más de estos campos está vacío, el ingreso o
modificación de los datos no podrá llevarse a cabo.
Si la validación es satisfactoria, entonces se deberá redirigir al componente de

listado de pacientes, de lo contrario, se deberá mostrar una alerta con JavaScript
mostrando un mensaje de error.
Semana 6
El componente de búsqueda personalizada debe permitir filtrar por los campos de
sexo, fechaIngreso y enfermedad.
El componente de listar pacientes mostrará la fotografía, nombre y apellido del

paciente.
Debe existir separación por capas dentro del proyecto. Los componentes deberán
ser creado dentro de una carpeta componentes, los modelos de las clases a
utilizar deberán estar una carpeta models, y por último, el o lo servicios de
pacientes a crear también deberán estar en la carpeta aparte.
Además, dentro del componente de información detallada de un registro

especifico, debe haber dos links, uno que redireccione al componente de
actualización y otro que ejecute la eliminación del registro.
El modelo de datos especificado es el siguiente:
- Nombre de la clase: Paciente

- Atributos:
o rut: string
o nombre: string
o edad: int
o sexo: string
o fotoPersonal: string
o fechaIngreso: date
o enfermedad: string
o revisado: boolean
Para los casos de búsqueda y listar pacientes, deberá utilizar comunicación entre
componentes.
En el componente de listado, para listar cada uno de los registros, deberá utilizar
la directiva *ngFor.
Para subir las imágenes de los pacientes, deberá utilizar la dependencia de

angular-file-uploader y realizar las configuraciones necesarias en el botón, para
que permita subir archivos .jpg, .png, .gif y .jpeg. Además, no se puede subir más
de una foto por registro y el peso máximo es de 20 MB.
Semana 6
Criterios de evaluación
Indicadores de logro PUNTAJE
Construye el enrutador app.routing.ts para todos los componentes 5

Construye el menú de navegación en base a las necesidades del cliente 5
Construye el servicio de producto. service.ts con conexión al backend 5
Construye los métodos para agregar, actualizar, eliminar, listar, buscar y obtener 5
por id dentro del servicio de pacientes
Utiliza un archivo Global dentro de la carpeta de services para definir la URL de 5
consumo de la API.
Construye los componentes solicitados, tanto la clase y lógica como la interfaz 10
de usuario de los mismos
Utiliza directivas de control *ngIf y *ngFor 5
Separa en capas el proyecto (components, models y services) 5
Utiliza la etiqueta de router-outlet dentro de app.component.html para invocar a 5
los componentes del proyecto
Valida el ingreso de datos por interfaz de los componentes de NuevoRegistro, 5
ActualizarRegistro y BuscarRegistro
Dentro del componente Home lista los último 5 registros de la persistencia 5
Dentro del componente de ListarRegistros se muestran todos los registros de la 5
persistencia
Hace uso del Hook ngOnInit() en los componentes de Home, DetalleRegistro, 5
ListarRegistros, ActualizarRegistro y BusquedaRegistro
Utiliza angular-file-uploader para subir imágenes al servidor y aplica la 5
configuración entregada para la etiqueta
Traspasa datos entre componentes por medio de propiedades @Input() 5
La aplicación que desarrolla, permite realizar las operaciones de administración 10
de datos solicitadas
Obtiene imágenes desde el backend en base al valor de la propiedad imagen del 5
objeto Paciente.
Utiliza el objeto Paciente entregado. 5
Total 100

Programacion Multiplataforma Nativa Evaluación Iii-A: Competencia Asociada: Unidad de Competencia

Cargado por

Copyright:

Formatos disponibles

Programacion Multiplataforma Nativa Evaluación Iii-A: Competencia Asociada: Unidad de Competencia

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programacion Multiplataforma Nativa Evaluación Iii-A: Competencia Asociada: Unidad de Competencia

Cargado por

Copyright:

Formatos disponibles

Semana 6

PROGRAMACION MULTIPLATAFORMA NATIVA

Competencia asociada: Desarrollar aplicaciones Mobile utilizando estándares de

Unidad de Competencia: Desarrolla aplicaciones multiplataforma utilizando React

2. Usted posee un periodo en envío limitado para poder realizar el encargo.

El siguiente caso será utilizado para todo el desarrollo de la asignatura, en donde

El producto final de la evaluación de la Unidad III de la asignatura es la

- Configurar el enrutamiento y definir las rutas de navegación de los

Observación Importante: al momento de subir el desarrollo del proyecto a

El Hospital El Alerce necesita generar un nuevo sistema multiplataforma de

La primera iteración del proyecto se baso en el desarrollo del backend con

En la segunda etapa, se construyo un frontend con React que permitía enviar y

El menú de navegación deberá ser invocado dentro del app.component.html,

Los componentes NuevoRegistro, ActualizarRegistro y BusquedaRegistro deben

Los componentes de ingreso y actualización de datos de pacientes deberán estar

Si la validación es satisfactoria, entonces se deberá redirigir al componente de

El componente de listar pacientes mostrará la fotografía, nombre y apellido del

Además, dentro del componente de información detallada de un registro

El modelo de datos especificado es el siguiente:

- Nombre de la clase: Paciente

Para subir las imágenes de los pacientes, deberá utilizar la dependencia de

Indicadores de logro PUNTAJE

Construye el enrutador app.routing.ts para todos los componentes 5

También podría gustarte