1. Introducción

El PDF del documento está disponible |AQUÍ|.

Los ejemplos del documento están disponibles |AQUÍ|.

A continuación, proponemos presentar dos marcos de trabajo utilizando un ejemplo de cliente/servidor:

AngularJS, utilizado para el cliente. Para simplificar, en lo sucesivo se denominará Angular;
Spring 4, utilizado para el servidor. Para simplificar, en lo sucesivo se denominará Spring;

Para comprender este documento se requieren ciertos requisitos previos:

un nivel intermedio de Java EE;
conocimiento de JPA (Java Persistence API), que se utilizará para acceder a una base de datos;
conocimiento de al menos una versión anterior de Spring para comprender la filosofía de este marco;
experiencia en el uso de Maven para configurar proyectos Java;
una comprensión básica de la comunicación HTTP en una aplicación web;
etiquetas HTML comunes;
conocimientos básicos de JavaScript;

A medida que avance el caso práctico, se irán introduciendo y explicando otros conocimientos necesarios.

Este documento no es un curso y está incompleto en muchos aspectos. Para obtener más información sobre los dos marcos, puede consultar las siguientes referencias:

[ref1]: el libro «Pro AngularJS», de Adam Freeman, publicado por Apress. Es un libro excelente. El código fuente de los ejemplos de este libro está disponible de forma gratuita en [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: la documentación oficial de AngularJS [https://docs.angularjs.org/guide]
[ref3]: el libro «Spring Data» de O'Reilly [http://shop.oreilly.com/product/0636920024767.do], que trata sobre el uso del marco [Spring Data] para acceder a datos, ya sea de bases de datos relacionales o no relacionales (NoSQL);
[ref4]: el libro «Pro Spring 3», publicado por Apress. Se trata del predecesor de Spring 4, pero ya se tratan los conceptos principales;
[ref5]: la documentación de referencia de Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

Las fuentes utilizadas para este documento son las citadas anteriormente, además del indispensable [http://stackoverflow.com/] para las numerosas sesiones de depuración.

1.1. La arquitectura de la aplicación

La aplicación que nos ocupa tendrá la siguiente arquitectura:

En [1], un servidor web envía páginas estáticas a un navegador. Estas páginas contienen una aplicación AngularJS construida sobre el patrón MVC (Modelo-Vista-Controlador). El modelo abarca aquí tanto las vistas como el dominio, representado aquí por la capa [Servicios];
el usuario interactuará con las vistas que se le presentan en el navegador. Sus acciones requerirán en ocasiones consultar el servidor Spring 4 [2]. El servidor procesará la solicitud y devolverá una respuesta JSON (JavaScript Object Notation) [3]. Esta respuesta se utilizará para actualizar la vista que se presenta al usuario.

1.2. Herramientas utilizadas

En este documento se utilizan las siguientes herramientas de desarrollo:

Spring Tool Suite para el servidor Spring: disponible como descarga gratuita;
WebStorm para el cliente Angular: hay una versión de prueba de un mes disponible para su descarga gratuita;
Wampserver para gestionar la base de datos MySQL 5: disponible para su descarga gratuita;

La instalación de estas y otras herramientas se describe en la sección 6.

1.3. Características de la aplicación

El código de ejemplo está disponible |AQUÍ| como archivo ZIP descargable.

El servidor se encuentra en las carpetas [rdvmedecins-metier-dao-v2] y [rdvmedecins-webapi-v3];
El cliente se encuentra en la carpeta [rdvmedecins-angular-v2];
El script SQL para generar la base de datos MySQL5 se encuentra en la carpeta [database];

1.3.1. Creación de la base de datos

Para probar la aplicación, primero creamos la base de datos utilizando el script SQL [dbrdvmedecins.sql]. Utilizamos la herramienta [PhpMyAdmin] de WampServer:

En [1], selecciona la herramienta [phpMyAdmin] de WampServer;
En [2], seleccione la opción [Importar];

en [3], seleccione el archivo [database/dbrdvmedecins.sql];
en [4], ejecútelo;
en [5], se crea la base de datos.

1.3.2. Servidor web / Implementación de JSON

Utilizando Spring Tool Suite (STS), importe los dos proyectos Maven del servidor Spring 4:

En [1] y [2], importe los proyectos Maven;
en [3], especificamos la carpeta principal para los dos proyectos que se van a importar;

en [3], los proyectos importados. Los proyectos pueden contener errores. Cada uno de ellos debe utilizar un compilador >=1.7:

Por lo tanto, se requiere una versión de JVM >=1.7:

Una vez que ya no haya errores de la JVM, podemos ejecutar el proyecto [rdvmedecins-webapi-v3]:

En [4], [5] y [6], ejecutamos el proyecto [rdvmedecins-webapi-v3] como una aplicación Spring Boot;

A continuación, obtenemos los siguientes registros en la consola de STS:

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.0.0.RELEASE)

2014-06-05 12:22:34.049  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot                : Starting Boot on Gportpers3 with PID 9296 (D:\data\istia-1314\polys\istia\angularjs-spring4\rdvmedecins-webapi\target\classes started by ST)
2014-06-05 12:22:34.122  INFO 9296 --- [           main] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@4b4bee22: startup date [Thu Jun 05 12:22:34 CEST 2014]; root of context hierarchy
2014-06-05 12:22:35.083  INFO 9296 --- [           main] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'org.springframework.boot.autoconfigure.AutoConfigurationPackages': replacing [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null] with [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
...
 s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080/http
2014-06-05 12:22:41.630  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot : Started Boot in 8.0 seconds (JVM running for 8.944)

Líneas 13-14: La aplicación se ha iniciado en un servidor Tomcat.

1.3.3. Implementación del cliente Angular

Abrimos la carpeta [rdvmedecins-angular-v2] con WebStorm:

En [1], selecciona la opción [Abrir directorio];
en [2], selecciona la carpeta [rdvmedecins-angular-v2];

en [3], el árbol de carpetas;
En [4], selecciona la página principal de la aplicación [app.html];
en [5], ábrela en un navegador moderno;

en [6], la página de inicio de sesión de la aplicación. Se trata de una aplicación de gestión de citas para médicos. Esta aplicación ya se ha tratado en el documento Introducción a los marcos JSF2, PrimeFaces y PrimeFaces Mobile;
en [7], una casilla de verificación que permite activar o desactivar el modo [debug]. Este modo se indica mediante la presencia del marco [8], que muestra el modelo de la vista actual;
en [9], un tiempo de espera artificial en milisegundos. El valor predeterminado es 0 (sin espera). Si N es el valor de este tiempo de espera, cualquier acción del usuario se ejecutará tras un tiempo de espera de N milisegundos. Esto permite ver la gestión de la espera implementada por la aplicación;
en [10], la URL del servidor Spring 4. Según lo anterior, es [http://localhost:8080];
en [11] y [12], el nombre de usuario y la contraseña del usuario que desea utilizar la aplicación. Hay dos usuarios: admin/admin (nombre de usuario/contraseña) con un rol (ADMIN) y user/user con un rol (USER). Solo el rol ADMIN tiene permiso para utilizar la aplicación. El rol USER se incluye únicamente para demostrar la respuesta del servidor en este caso de uso;
en [13], el botón que permite conectarse al servidor;
en [14], el idioma de la aplicación. Hay dos: francés (predeterminado) e inglés.

en [1], inicias sesión;

una vez que hayas iniciado sesión, puedes elegir el médico con el que deseas concertar una cita [2] y la fecha de la cita [3];
En [4], solicitas ver la agenda del médico seleccionado para el día elegido;

Una vez que se muestre el horario del médico, puedes reservar una franja horaria [5];

En [6], seleccione el paciente para la cita y confirme su selección en [7];

Una vez confirmada la cita, se le redirigirá automáticamente al calendario, donde aparecerá la nueva cita. Esta cita se puede eliminar más tarde [7].

Ya se han descrito las funciones principales. Son sencillas. Las que no se han descrito son funciones de navegación para volver a una vista anterior. Concluyamos con la configuración del idioma:

en [1], se cambia del francés al inglés;

en [2], la vista cambia al inglés, incluido el calendario;