Se quiere, en el proyecto trabajado en sesiones anteriores, agregar una vista en la que se muestren los usuarios inscritos en la aplicación de TODOs, incluyendo sus datos básicos y su fotografía. El acceso a dicha información se hará a través de una librería provista por un tercero.
Parte I. Backend.
-
En el pom.xml agregue el siguiente repositorio de dependencias (el cual contiene la librería requerida):
<repositories> <repository> <id>ECI internal repository</id> <url>http://profesores.is.escuelaing.edu.co/hcadavid/mvnmirror</url> </repository> </repositories>
1.1. Si utiliza gradle agregue la dependencia al builg.gradle (app)
```
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
maven { url "http://profesores.is.escuelaing.edu.co/hcadavid/mvnmirror" }
}
-
En el mismo archivo, agregue la siguiente dependencia:
<dependency> <groupId>edu2.eci.cosw.stubs</groupId> <artifactId>FakeClientsLibrary</artifactId> <version>1.0</version> </dependency>
2.2. Si utiliza Gradle agregue la dependencia al builg.gradle (app)
dependencies { compile('org.springframework.boot:spring-boot-starter-security') compile('org.springframework.boot:spring-boot-starter-web') compile('edu2.eci.cosw.stubs:FakeClientsLibrary:1.0') testCompile('org.springframework.boot:spring-boot-starter-test') }
3. Cree un API REST para el recurso 'clientes', de manera que maneje las URIs:
* /clients <- obtiene todos los clientes
* /clients/{id} <- obtiene un cliente en particular
* /clients/{id}/picture <- obtiene la fotografía del cliente
Para lo anterior, tenga en cuenta:
* Debe configurar la aplicación para que las anteriores rutas no sean protegidas.
* En la librería suministrada (como dependencia de Maven), la clase __ClientServicesStub__ tiene los siguientes métodos:
```java
/**
* Consultar el conjunto completo de clientes
* @return el conjunto de clientes
*/
public Set<Client> getAllClients();
/**
* Consultar un determiando cliente
* @param id identificador del cliente
* @return el cliente
* @throws CliendLoadException si el identificador no existe
*/
public Client getClientById(int id) throws CliendLoadException;
/**
* Consultar la fotografía de un determinado cliente
* @param id el identificador del cliente
* @return el InputStream que permite consutar los bytes de la foto
* del cliente
* @throws CliendLoadException
*/
public InputStream getClientPicture(int id) throws CliendLoadException;
```
* Para que un recurso REST tenga una representación diferente a la estándar (JSON), en particular un archivo, el método correspondiente del controlador REST debe retornar algo de tipo:
```
ResponseEntity<InputStreamResource>
```
Con lo anterior, el controlador puede construir la respuesta (en este caso con una imagen), usando la clase ResponseEntity:
```
ResponseEntity.ok().contentType(MediaType.parseMediaType("image/jpg")).body(new InputStreamResource(EL_INPUT_STREAM_DE_LA_IMAGEN));
```
Y en caso de error (por ejemplo si no se puede consultar la imagen), retornar un objeto ResponseEntity vacío que tenga el código NOT_FOUND de HTTP:
```
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
```
Parte II. Front-end.
-
Para el front-end se van a usar las siguientes librerías de JavaScript (se está actualizando la versión y se está incluyendo angular-material). Haga la actualización correspondiente con bower:
"dependencies": { "angular": "^1.6.1", "angular-route": "^1.6.1", "angular-animate": "^1.6.1", "angular-aria": "^1.6.1", "angular-material": "^1.1.3" } ``` 2. Rectifique en en la página html raíz se esté importando el estilo de angular-material (esto va en la sección de la página). Si hay referencias a otros estilos que no se usen (por ejemplo "html5-boilerplate") elimínelos).
```
-
Como hay una nueva librería (con una dependencia), la misma debe cargarse desde la página principal. Agregue lo siguiente donde están las demás importaciones en la página principal:
```
-
Modifique la configuración del módulo principal (el definido en app.js), para que ahora importe 'ngMaterial'.
-
Cree una nueva vista (con su respectivo controlador) llamada 'Directorio de clientes', para el directorio de clientes de la aplicación.
-
En el módulo de servicios creado en el ejercicio anterior, agregue uno de tipo 'fábrica' que retorne el $recurso asociado al recurso del API REST '/clients'. Como esto retorna un arreglo de objetos, es necesario definirlo de la siguiente forma:
.factory('Clients', function($resource){
return $resource('/clients',{},{
get: {
method: 'GET',
isArray: true
}
});
})
```
-
En el controlador de su nueva vista inyecte el servicio antes creado ('Clients') y '$mdDialog' (un objeto de angular-material para crear ventanas emergentes).
-
En el controlador agregue un atributo (asociado a $scope) que contenga la lista de clientes. Haga que dicho atributo sea inicializado con el listado de los clientes obtenidos mediante en servicio 'Clients' inyectado.
-
En la vista cree una tabla que muestre todos los clientes, con las siguientes columnas:
- Identificación
- Nombre
- Fotografía
- Botón 'detalles'
-
Use la directiva ng-repeat para que la tabla sea poblada.
-
Haga que el campo de foto (que debería ser un elemento de tipo 'image') tenga como fuente (src) un recurso '/clientes/{id}/picture' (del API REST), donde {id} es reemplazado por el valor que tenga la tabla en la fila correspondiente. Por ejemplo, si ng-repeat usa como variable 'cl':
Opcional
Cambie el diálogo por uno de tipo 'custom dialog', y haga una página de detalle que muestre toda la información del cliente.