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 através de um exemplo de cliente/servidor:

AngularJS utilizado para o cliente. Para simplificar, será doravante designado por Angular;
Spring 4 utilizado para o servidor. Para simplificar, será doravante designado por Spring;

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

um nível intermédio em Java EE;
conhecimento de JPA (Java Persistence API), que será utilizado para aceder a uma base de dados;
conhecimento de, pelo menos, uma versão anterior do Spring para compreender a filosofia deste framework;
a utilização do Maven para configurar projetos Java;
conhecimentos básicos sobre as interações HTTP numa aplicação web;
as tags mais comuns da linguagem HTML;
conhecimentos básicos da linguagem JavaScript;

Os restantes conhecimentos necessários serão apresentados e explicados à medida que o estudo de caso for avançando.

Este documento não é um curso e está incompleto em muitos aspetos. Para aprofundar os conhecimentos sobre os dois frameworks, podem ser utilizadas 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, [http://shop.oreilly.com/product/0636920024767.do], que apresenta a utilização do framework [Spring Data] para o acesso a dados, quer se trate de bases de dados relacionais ou não (NoSQL);
[ref4]: o livro «Pro Spring 3», publicado pela Apress. Trata-se da versão anterior ao Spring 4, mas os conceitos principais 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 a este documento são as acima referidas, 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 análise terá a seguinte arquitetura:

em [1], um servidor web fornece páginas estáticas a um navegador. Estas páginas contêm uma aplicação AngularJS construída com base no modelo MVC (Modelo – Vista – Controlador). O modelo, neste caso, é simultaneamente o das vistas e o do domínio, aqui representado pela camada [Services];
O utilizador irá interagir com as vistas que lhe são apresentadas no navegador. As suas ações irão, por vezes, exigir uma consulta ao servidor Spring 4 [2]. Este irá processar o pedido e devolver uma resposta JSON (JavaScript Object Notation) [3]. Esta resposta será utilizada para atualizar a vista apresentada ao utilizador.

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: está disponível para download gratuito uma versão de avaliação válida por um mês;
Wampserver para a gestão da base de dados MySQL 5: disponível para download gratuito;

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

1.3. As funcionalidades da aplicação

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

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 a geração da base de dados MySQL5 encontra-se na pasta [database];

1.3.1. Criação da base de dados

Para testar a aplicação, começamos por criar a base 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 ficheiro [database/dbrdvmedecins.sql];
em [4], executa-se o ficheiro;
em [5], a base de dados é criada.

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;
em [3], indicamos a pasta pai dos dois projetos a importar;

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 >=1.7:

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

no [4], [5] e [6], executamos o projeto [rdvmedecins-webapi-v3] como uma aplicação Spring Boot;

Obtenemos então os seguintes registos na consola 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 num 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 estrutura de pastas;
em [4], seleciona-se a página principal [app.html] da aplicação;
em [5], abre-se num navegador recente;

em [6], a página inicial da aplicação. Trata-se de uma aplicação para marcação de consultas médicas. Esta aplicação já foi abordada 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 caracteriza-se pela presença do quadro [8], que exibe o modelo da vista atual;
em [9], um tempo de espera artificial em milissegundos. O valor predefinido é 0 (sem espera). Se N for o valor desse tempo de espera, qualquer ação do utilizador será executada após um tempo de espera de N milissegundos. Isto permite observar a gestão da espera implementada pela aplicação;
em [10], o URL do servidor Spring 4. Seguindo o que foi referido anteriormente, trata-se do [http://localhost:8080];
em [11] e [12], o identificador e a palavra-passe de quem pretende utilizar a aplicação. Existem dois utilizadores: admin/admin (login/palavra-passe) com uma função (ADMIN) e user/user com uma função (USER). Apenas a função ADMIN tem permissão para utilizar a aplicação. A função USER existe apenas para mostrar a resposta do servidor neste caso de utilização;
em [13], o botão que permite ligar-se ao servidor;
em [14], o idioma da aplicação. Existem dois: o francês, por predefinição, e o inglês.

em [1], efetua-se a ligação;

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

assim que obtiver a agenda do médico, pode-se reservar um horário [5];

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

Assim que a consulta for validada, é-se redirecionado automaticamente para a agenda, onde a nova consulta já se encontra registada. Esta consulta poderá ser posteriormente eliminada com o código [7].

As principais funcionalidades foram descritas. São simples. As que não foram descritas são funções de navegação para regressar a uma vista anterior. Terminemos com a gestão do idioma:

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

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