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í.

Jesús Perales

Read more posts by this author.

Subscribe to Jesús Perales

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!