Skip to content

1. Introducción

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

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

Aquí nos proponemos presentar dos marcos de trabajo mediante 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 conocimientos previos:

  • un nivel intermedio en 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 framework;
  • el uso de Maven para configurar proyectos Java;
  • conocimientos básicos sobre las interacciones HTTP en una aplicación web;
  • las etiquetas habituales del lenguaje HTML;
  • conocimientos básicos del lenguaje Javascript;

Los demás conocimientos necesarios se irán introduciendo y explicando a medida que avance el caso práctico.

Este documento no es un curso y es incompleto en muchos aspectos. Para profundizar en los dos marcos de trabajo, se pueden utilizar las siguientes referencias:

  • [ref1]: el libro «Pro AngularJS», escrito por Adam Freeman y publicado por Apress. Es un libro excelente. Los códigos fuente de los ejemplos de este libro están disponibles gratuitamente en URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
  • [ref2]: la documentación oficial de Angular JS [https://docs.angularjs.org/guide]
  • [ref3]: el libro «Spring Data» de O'Reilly [http://shop.oreilly.com/product/0636920024767.do], que presenta el uso del marco [Spring Data] para el acceso a datos, ya sean bases de datos relacionales o no (NoSQL);
  • [ref4]: el libro «Pro Spring3», de la editorial Apress. Es la versión anterior a Spring 4, pero los conceptos principales ya están ahí;
  • [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 en las que se basa 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 estudiada tendrá la siguiente arquitectura:

Image

  • En [1], un servidor web entrega páginas estáticas a un navegador. Estas páginas contienen una aplicación AngularJS construida sobre el modelo MVC (Modelo – Vista – Controlador). El modelo aquí es tanto el de las vistas como el del dominio, representado aquí por la capa [Services];
  • El usuario interactuará con las vistas que se le muestran en el navegador. Sus acciones requerirán en ocasiones realizar una consulta al servidor Spring 4 [2]. Este procesará la solicitud y devolverá una respuesta JSON (JavaScript Object Notation) [3]. Esta se utilizará para actualizar la vista que se muestra al usuario.

1.2. Herramientas utilizadas

En este documento, las herramientas de desarrollo utilizadas son las siguientes:

  • Spring Tool Suite para el servidor Spring: descargable de forma gratuita;
  • Webstorm para el cliente Angular: se puede descargar gratuitamente una versión de prueba de un mes;
  • Wampserver para la gestión de la base de datos MySQL 5: descargable gratuitamente;

La instalación de estas y otras herramientas se describe en el apartado 6.

1.3. Las funcionalidades de la aplicación

El código del ejemplo está disponible |ICI| en forma de un archivo zip para descargar.

  • 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 la generación de 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 con el script SQL [dbrdvmedecins.sql]. Utilizamos la herramienta [PhpMyAdmin] de WampServer:

  • en [1], seleccionamos la herramienta [phpMyAdmin] de WampServer;
  • en [2], se elige option [Importer];
  • en [3], se selecciona el archivo [database/dbrdvmedecins.sql];
  • en [4], lo ejecutamos;
  • en [5], se crea la base de datos.

1.3.2. Implementación del servidor web / JSON

Con Spring Tool Suite (STS), se importan los dos proyectos Maven del servidor Spring 4:

  • en [1] y [2], importamos los proyectos Maven;
  • en [3], designamos la carpeta principal de los dos proyectos que se van a importar;
  • en [3], los proyectos importados. Es posible que los proyectos presenten errores. Cada uno de ellos debe utilizar un compilador >=1.7:
 

Por lo tanto, se necesita un JVM >=1.7:

 

Cuando ya no haya errores de JVM, se puede 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: 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], seleccionamos option [Open Directory];
  • en [2], se selecciona la carpeta [rdvmedecins-angular-v2];
  • en [3], el árbol de carpetas;
  • en [4], se selecciona la página principal [app.html] de la aplicación;
  • en [5], se abre en un navegador reciente;
  • en [6], la página de inicio de la aplicación. Se trata de una aplicación para concertar citas médicas. Esta aplicación ya se ha tratado en el documento Introducción a los frameworks JSF2, Primefaces y Primefaces móvil;
  • en [7], una casilla de verificación que permite activar o desactivar el modo [debug]. Este último se caracteriza por la presencia del marco [8] que muestra la plantilla de la vista actual;
  • en [9], un tiempo de espera artificial en milisegundos. Su valor por defecto 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], el URL del servidor Spring 4. Si seguimos lo anterior, es [http://localhost:8080];
  • en [11] y [12], el identificador y la contraseña de quien desea utilizar la aplicación. Hay dos usuarios: admin/admin (login/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 solo está ahí para mostrar lo que responde el 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: el francés por defecto y el inglés.
  • en [1], se establece la conexión;
  • una vez conectado, se puede elegir el médico con el que se desea concertar una cita [2] y el día de la misma [3];
  • se solicita en [4] ver la agenda del médico elegido para el día elegido;
  • una vez obtenido el agenda del médico, se puede reservar una franja horaria [5];
  • en [6], se selecciona al paciente para la cita y se valida esta selección en [7];

Una vez validada la cita, se vuelve automáticamente a agenda, donde ya figura la nueva cita. Esta cita podrá eliminarse posteriormente en [7].

Se han descrito las principales funcionalidades. Son sencillas. Las que no se han descrito son funciones de navigation para volver a una vista anterior. Terminemos con la gestión del idioma:

  • en [1], se pasa del francés al inglés;
  • en [2], la vista pasa a inglés, incluido el calendario;
https://stahe.github.io
Este tutorial, escrito por Serge Tahé, se pone a disposición del público bajo los términos de la Creative Commons Reconocimiento – No comercial – Compartir igual 3.0 Unported.