Crear proyecto Maven

Hay varias formas de crear el proyecto pero lo mas recomendable es utilizar el asistente en linea de Spring.

Vamos a la ruta https://start.spring.io/ Escribimos el Group y el Artifact. En la sección de Search for dependencies agregamos las dependencias Web, Thymeleaf y DevTools. Clic en Generate Project y guardar el archivo en una ruta local.

Descomprimir el archivo y copiarlo al workspace de Eclipse. Abrir eclipse, Clic derecho en el Explorador de Proyectos.

Import -> Import… -> Maven -> Existing Maven Projects

Clic en el botón Next.

Seleccionamos el proyecto kanban con el botón Browse… Clic en Finish.

Se muestra el proyecto en el Explorador de Proyectos.

Archivo pom.xml

Se agregan automáticamente las dependencias:

spring-boot-starter-web Indica que es una aplicación Web. Agrega la funcionalidad de @Controller, @RequestMapping, etc
spring-boot-starter-thymeleaf Plantillas de servidor para Web.
spring-boot-devtools Elimina la necesidad de reiniciar cada que se hace un cambio. Se recomienda solo para ambientes de desarrollo.

Clase principal

Es necesario una clase main como punto de inicio de la aplicación. Esta es com.proyecto.KanbanApplication. La anotación @SpringBootApplication indica en donde inicia la aplicación.

Controladores

Para manejar peticiones Web es necesario crear controladores, los cuales manejan la solicitud a partir de una ruta de acceso. Creamos la clase ControllerIndex en el paquete com.proyecto.controller. Agregamos las anotaciones @Controller y @RequestMapping.

@Controller Indica que es un controlador
@RequestMapping Indica que Controller o método de un Controller tiene que direccionar cada llamada del cliente

Copiar archivos del proyecto anterior

Tomamos los archivos del proyecto anterior y los copiamos al proyecto de SpringBoot. Copiamos las carpetas css y js en la ruta scr/main/resource/static y el archivo kanban.html en scr/main/resource/templates.

Configurar application.properties

En este archivo application.properties que se encuentra en src/main/resource se pueden configurar muchos parámetros. Puede consultarlos en http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html. Solo vamos a agregar,

server.contextPath=/kanba Contexto de la aplicación
server.port=8090 Puerto de la aplicación

Ejecutar aplicación

Para ejecutar la aplicación abrimos la clase com.proyecto.KanbanApplication. Clic con el botón derecho.

Run As -> Java Application.

Se inicia la aplicación.

El siguiente mensaje indica que la aplicación se levanto correctamente, además muestra el puerto.

Abrimos un explorador de Internet y tecleamos http://localhost:8090/kanban.

Json desde el Servidor

Creamos el Controller ControllerColumn. Este mostrara todas las columnas en formato Json. Los datos de retorno están hardcore, posteriormente veremos como extraerlos de una Base de Datos.

Si tecleamos en el explorador http://localhost:8090/kanban/column se muestra los datos en json.

Creamos el Controller ControllerKanbanWeb. Este llama a kanbanWeb.xml con el mapeo /Web.

Duplicamos el archivo kanban.html en la ruta src/main/resource/ y lo nombramos kanbanWeb.html

Abrimos el archivo kanbanWeb.html y cambiamos la ruta del archivo kanban.js a kanbanWeb.js.

Duplicamos el archivo kanban.js en la ruta src/main/resource/static y lo nombramos kanbanWeb.js

Abrimos el archivo kanbanWeb.js y realizamos los siguientes cambios.

  1. Eliminamos las funciones Column y Article, Así como la creación de los arreglos column y articles.
  2. Crear la función buildsKanban que construye las columnas y los articulos de kanban.
  3. Hacer una llamada ajax para consumir el controller column y llame  a la funcion buildsKanban.

     

Abrimos un explorador de Internet y tecleamos http://localhost:8090/kanban/Web. Nos muestra la aplicación Kanban pero consumiendo los datos desde un servidor.

Se puede descargar el proyecto completo de https://github.com/arielolivagh/kanbanWeb

 

 

 

Categories: Java, Programacion, SpringBoot

Leave a Reply


API REST 5. Hypermedia

Contenido1 Introducción2 Programar hypermedia2.1 Crear Entity2.1.1 PersonaHateoas2.1.2 GrupoHateoas2.1.3 PaisHateoas2.2 Crear […]

API REST 4. Calidad al implementar aplicacion Web

Contenido1 Introducción1.1 Nivel 1. Uso correcto de URIs1.2 Nivel 2. […]

API REST 3. Publicar y consumir

Contenido1 Descripción2 Publicar y Consumir2.1 Usando CRUD2.1.1 Crear Persona2.1.2 Consultar […]

API REST 2. Conectarse a Base de Datos MySQL

Contenido1 Descripción2 Crear la Base de Datos3 Agregar dependencias4 Crear […]

API REST 1. Spring

Contenido1 Descripción2 Pasos2.1 Instalar eclipse2.2 Instalar librerías de Spring2.3 Importar […]