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 adelante se denominará Angular;
  • Spring 4, utilizado para el servidor. Para simplificar, en adelante 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 marco de trabajo;
  • el uso de Maven para configurar proyectos de Java;
  • conocimientos básicos sobre las interacciones HTTP en una aplicación web;
  • las etiquetas comunes 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 de estudio.

Este documento no es un curso y es incompleto en muchos aspectos. Para profundizar en ambos marcos de trabajo, se pueden consultar 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 de forma gratuita 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 acceder a datos, ya sean de bases de datos relacionales o no (NoSQL);
  • [ref4]: el libro «Pro Spring 3», publicado por Apress. Es la versión anterior a Spring 4, pero ya incluye 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 en las que se basa este documento son las mencionadas 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 se analizará 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 presentan en el navegador. Sus acciones requerirán, en ocasiones, realizar consultas al servidor Spring 4 [2]. Este procesará la solicitud y devolverá una respuesta JSON (JavaScript en notación de objetos) [3]. Esta respuesta se utilizará para actualizar la vista que se muestra al usuario.

1.2. Las herramientas utilizadas

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

  • Spring Tool Suite para el servidor Spring: se puede descargar de forma gratuita;
  • WebStorm para el cliente Angular: se puede descargar gratis una versión de prueba válida por un mes;
  • Wampserver para la administración de la base de datos MySQL 5: se puede descargar de forma gratuita;

La instalación de estas y otras herramientas se describe en el párrafo 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 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 con el script SQL [dbrdvmedecins.sql]. Utilizamos la herramienta [PhpMyAdmin] de WampServer:

  • en [1], seleccionamos la herramienta [phpMyAdmin] de WampServer;
  • en [2], se elige la opción [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] junto con WebStorm:

  • en [1], elegimos la opción [Open Directory];
  • en [2], seleccionamos el archivo [rdvmedecins-angular-v2];
  • en [3], la estructura de carpetas;
  • en [4], se selecciona la página principal [app.html] de la aplicación;
  • en [5], la abrimos en un navegador reciente;
  • en [6], la página de inicio de la aplicación. Se trata de una aplicación para programar citas médicas. Esta aplicación ya se ha tratado en el documento Introducción a los marcos de trabajo JSF2, PrimeFaces y PrimeFaces Mobile;
  • en [7], una casilla de selección que permite activar o desactivar el modo [debug]. Este último se caracteriza por la presencia del marco [8] que muestra el modelo de la vista actual;
  • en [9], un tiempo de espera artificial en milisegundos. Su 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 observar 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 (nombre de usuario/contraseña) con un rol (ADMIN) y user/user con un rol (USER). Solo el rol ADMIN tiene permiso para usar la aplicación. El rol USER solo está ahí para mostrar qué 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], nos conectamos;
  • Una vez que inicias sesión, puedes elegir el médico con el que quieres 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 seleccionado;
  • una vez obtenida la agenda del médico, se puede reservar un horario [5];
  • en [6], se selecciona al paciente para la cita y se confirma esta selección en [7];

Una vez validada la cita, se regresa automáticamente al calendario, donde ya aparece registrada la nueva cita. Esta cita se podrá eliminar posteriormente con [7].

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

  • en [1], se cambia del francés al inglés;
  • a [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 – Sin uso comercial – Compartir igual 3.0 sin modificaciones.