1. Introdução

O PDF do documento está disponível |AQUI|.

Os exemplos do documento estão disponíveis |AQUI|.

Propomos aqui apresentar dois frameworks por meio de um exemplo de cliente/servidor:

AngularJS, utilizado para o cliente. Para simplificar, será denominado Angular daqui em diante;
Spring 4, utilizado para o servidor. Para simplificar, será denominado Spring daqui em diante;

A compreensão deste documento requer alguns pré-requisitos:

um nível intermediário em Java EE;
conhecimento de JPA (Java Persistence API), que será utilizado para acessar um banco de dados;
conhecimento de pelo menos uma versão anterior do Spring para compreender a filosofia desse framework;
o uso do Maven para configurar projetos em Java;
conhecimento básico das trocas de dados em uma aplicação web;
as tags comuns da linguagem HTML;
conhecimento básico da linguagem JavaScript;

Os demais conhecimentos necessários serão apresentados e explicados ao longo do estudo de caso.

Este documento não é um curso e está incompleto em muitos aspectos. Para aprofundar o conhecimento sobre as duas estruturas, pode-se utilizar as seguintes referências:

[ref1]: o livro “Pro AngularJS”, escrito por Adam Freeman e publicado pela editora Apress. É um excelente livro. Os códigos-fonte dos exemplos deste livro estão disponíveis gratuitamente no URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/];
[ref2]: a documentação oficial do Angular JS [https://docs.angularjs.org/guide]
[ref3]: o livro “Spring Data”, da editora O’Reilly, que apresenta o uso do framework para acessar dados, sejam eles de bancos de dados relacionais ou não;
[ref4]: o livro “Pro Spring 3”, publicado pela editora Apress. Trata-se da versão anterior ao Spring 4, mas os principais conceitos já estão presentes;
[ref5]: a documentação de referência do Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

As fontes que serviram de base para este documento são as citadas acima, além do indispensável [http://stackoverflow.com/] para as inúmeras sessões de depuração.

1.1. A arquitetura da aplicação

A aplicação em estudo terá a seguinte arquitetura:

no [1], um servidor web fornece páginas estáticas a um navegador. Essas páginas contêm uma aplicação AngularJS construída com base no modelo MVC (Modelo – Visão – Controlador). O modelo, neste caso, é tanto o das visualizações quanto o do domínio, representado aqui pela camada [Services];
O usuário irá interagir com as visualizações apresentadas a ele no navegador. Suas ações, por vezes, exigirão uma consulta ao servidor Spring 4 [2]. Este processará a solicitação e retornará uma resposta JSON (JavaScript Object Notation) [3]. Essa resposta será usada para atualizar a visualização apresentada ao usuário.

1.2. As ferramentas utilizadas

Neste documento, as ferramentas de desenvolvimento utilizadas são as seguintes:

Spring Tool Suite para o servidor Spring: disponível para download gratuito;
Webstorm para o cliente Angular: uma versão de avaliação válida por um mês pode ser baixada gratuitamente;
Wampserver para o gerenciamento do banco de dados MySQL 5: disponível para download gratuito;

A instalação dessas e de outras ferramentas está descrita no parágrafo 6.

1.3. As funcionalidades do aplicativo

O código do exemplo está disponível |ICI| na forma de um arquivo zip para download.

o servidor está contido nas pastas [rdvmedecins-metier-dao-v2] e [rdvmedecins-webapi-v3];
o cliente está contido na pasta [rdvmedecins-angular-v2];
o script SQL para geração do banco de dados MySQL5 está na pasta [database];

1.3.1. Criação do banco de dados

Para testar o aplicativo, criamos primeiro o banco de dados com o script SQL [dbrdvmedecins.sql]. Utilizamos a ferramenta [PhpMyAdmin] de WampServer:

no [1], selecionamos a ferramenta [phpMyAdmin] do WampServer;
em [2], escolhe-se a opção [Importer];

no [3], seleciona-se o arquivo [database/dbrdvmedecins.sql];
em [4], execute-o;
em [5], o banco de dados é criado.

1.3.2. Implementação do servidor web / JSON

Com o Spring Tool Suite (STS), importam-se os dois projetos Maven do servidor Spring 4:

em [1] e [2], importamos os projetos Maven;
no [3], indicamos a pasta pai dos dois projetos a serem importados;

no [3], os projetos importados. É possível que os projetos apresentem erros. É necessário que cada um deles utilize um compilador >=1.7:

Portanto, é necessário um JVM com versão >=1.7:

Quando não houver mais erros no JVM, será possível executar o projeto [rdvmedecins-webapi-v3]:

no [4], [5] e [6], executamos o projeto [rdvmedecins-webapi-v3] como um aplicativo Spring Boot;

Assim, obtemos os seguintes logs no console do 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)

linhas 13-14: a aplicação foi iniciada em um servidor Tomcat.

1.3.3. Implementação do cliente Angular

Abrimos a pasta [rdvmedecins-angular-v2] com o WebStorm:

no [1], selecionamos a opção [Open Directory];
no [2], selecionamos a pasta [rdvmedecins-angular-v2];

em [3], a árvore de pastas;
em [4], seleciona-se a página principal [app.html] do aplicativo;
em [5], abre-se em um navegador recente;

em [6], a página inicial do aplicativo. Trata-se de um aplicativo para agendamento de consultas médicas. Esse aplicativo já foi abordado no documento Introdução aos frameworks JSF2, Primefaces e Primefaces Mobile;
em [7], uma caixa de seleção que permite ativar ou desativar o modo [debug]. Este último é caracterizado pela presença do quadro [8], que exibe o modelo da visualização atual;
em [9], um tempo de espera artificial em milissegundos. Seu valor padrão é 0 (sem espera). Se N for o valor desse tempo de espera, qualquer ação do usuário será executada após um tempo de espera de N milissegundos. Isso permite observar o gerenciamento da espera implementado pela aplicação;
em [10], o URL do servidor Spring 4. Seguindo o que foi explicado anteriormente, trata-se do [http://localhost:8080];
em [11] e [12], o identificador e a senha de quem deseja utilizar a aplicação. Há dois usuários: admin/admin (login/senha) com uma função (ADMIN) e user/user com uma função (USER). Apenas a função ADMIN tem permissão para usar o aplicativo. A função USER está presente apenas para mostrar a resposta do servidor nesse caso de uso;
em [13], o botão que permite conectar-se ao servidor;
em [14], o idioma do aplicativo. Há dois: o francês, por padrão, e o inglês.

em [1], realiza-se a conexão;

Depois de fazer login, é possível escolher o médico com quem deseja marcar uma consulta [2] e o dia da consulta [3];
solicita-se, em [4], a visualização da agenda do médico escolhido para o dia selecionado;

assim que a agenda do médico for exibida, é possível agendar um horário [5];

em [6], seleciona-se o paciente para a consulta e confirma-se essa escolha em [7];

Assim que a consulta for confirmada, o usuário é redirecionado automaticamente para a agenda, onde a nova consulta já está registrada. Essa consulta poderá ser excluída posteriormente com o código [7].

As principais funcionalidades já foram descritas. Elas são simples. As que não foram descritas são funções de navegação para retornar a uma visualização anterior. Concluímos com o gerenciamento do idioma:

em [1], alterna-se do francês para o inglês;

para [2], a visualização passa para o inglês, incluindo o calendário;