Siguiendo el proyecto donde lo dejamos, 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.
Copiamos estos dos archivos a la carpeta webapp de nuestra aplicación.
Nos aparecerá una alerta y seleccionaremos Copy files y presionaremos el botón OK.
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/".
Ahora sera necesario reemplazar todas las cadenas '/api/todos' por nuestra variable apiUrl, estas se encuentran en las lineas 10, 21 y 34.
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í.
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);
}
});
}
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);.
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)">.
Después tenemos que cambiar la linea 22 {{ todo.text }} por {{ todo.name }}.
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.
Podemos observar el log de nuestro servidor que esta ejecutando las consultas necesarias.
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, pero no esta terminada.
El código hasta el final de este articulo lo podemos descargar aquí.