Primeros pasos con Spring #5, interfaz web

Primeros pasos con Spring #5, interfaz web

Ahora vemos como todo va tomando forma y lo único que nos queda para terminar nuestra aplicación es una interfaz de usuario.

Nuestra API REST, puede ser consumida por una aplicación para Android , IOS, aplicación web, etc.

En nuestro caso la aplicación web que usaremos esta basada en Bootstrap y Angular, es un fork de un ejemplo del MEAN Stack(Mongodb, Express, Angular y Node), nosotros sustituimos toda la parte del backend por Java, esta aplicación web fue desarrollada por Carlos Azaustre.

Primero que nada tenemos que ir a descargar el código fuente de la aplicación que se encuentra aquí, descomprimimos el archivo ZIP y buscamos la carpeta public que contendrá dos archivos index.html y main.js.

1

Copiamos estos dos archivos a la carpeta webapp de nuestra aplicación.

2

Nos aparecerá una alerta y seleccionaremos Copy files y presionaremos el botón OK.

3

Una vez que tengamos los archivos en nuestro workspace, abriremos el archivo main.js y dentro de la función mainController declararemos una variable llamada apiUrl que contendrá la siguiente cadena "/todo/api/todos/".

4

Ahora sera necesario reemplazar todas las cadenas '/api/todos' por nuestra variable apiUrl, estas se encuentran en las lineas 10, 21 y 34.

5

En la linea 24 observamos que al ejecutarse la petición por post a nuestra API correctamente la información que nos devuelve reemplaza la lista de Todos almacenada en la variable $scope, pero nuestra API solo devuelve el Todo agregado, a diferencia de la API original, así que es necesario cambiar $scope.todos = data; por $scope.todos.push(data);, la documentación del método push la podemos encontrar aquí.

6

Para terminar de adaptar el script a nuestra API modificaremos la función anónima contenida en la variable $scope.deleteTodo.

Recordemos que nuestra API al borrar un elemento retorna el elemento eliminado, entonces debemos actualizar la lista de Todos que tenemos en la variable $scope.todos quitando el Todo devuelto al ejecutarse correctamente la petición.

Para buscar un elemento dentro de un arreglo en Javascript utilizaremos una función auxiliar llamada findAndRemove, puedes copiarla y pegarla de aquí.

function findAndRemove(array, property, value) {
	  array.forEach(function(result, index) {
	    if(result[property] === value) {
	      array.splice(index, 1);
	    }    
	  });
}

7

Esta función recibe como parámetros, un arreglo, el nombre de la propiedad del elemento a buscar y el elemento a buscar en el arreglo, así que la utilizaremos para borrar de la vista el elemento eliminado en la base de datos, reemplazando la linea 36 $scope.todos = data; por findAndRemove($scope.todos, 'id', data.id);.

8

Como podemos ver pasamos el arreglo de Todos, el nombre de la propiedad a buscar en el arreglo y el Todo eliminado.

También debemos abrir el archivo index.html y cambiar la linea 21 ng-click="deleteTodo(todo._id)"> por ng-click="deleteTodo(todo.id)">.

9

Después tenemos que cambiar la linea 22 {{ todo.text }} por {{ todo.name }}.

10

Y por ultimo la linea 35 ng-model="formData.text"> por ng-model="formData.name">

Con esto solo toca levantar nuestro servidor y visitar la url http://localhost:8080/todo/ y probar nuestra aplicación.

11

Podemos observar el log de nuestro servidor que esta ejecutando las consultas necesarias.

12

En este punto nuestra aplicación ya es funcional y es posible verla en ejecución, vimos como adaptar una interfaz web ya hecha reutilizando el código que encontramos en Github y así no partimos desde cero.

Quizá no se explico que es Angular ni sus principios para no desviarnos del tema (Spring) pero es un framework con el que estoy trabajando y me gustaría dedicarle algunos artículos posteriormente, pueden revisar que hace el código en el post original aquí y aprender un poco sobre Angular.

Parce que nuestra aplicación ya está terminada, pero aun falta cambiar la base de datos a una real, aplicar un cache, integrar validaciones JSR 303 y un largo etc, podemos decir que ya es funcional.

El código hasta este punto lo podemos descargar aquí.