Skip to content

1. Introdução

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

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

Aqui, propomos apresentar duas estruturas utilizando um exemplo cliente/servidor:

  • AngularJS utilizado para o cliente. Por uma questão de simplicidade, será doravante referido como Angular;
  • Spring 4 utilizado para o servidor. Por uma questão de simplicidade, será doravante referido como Spring;

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

  • um nível intermédio de 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;
  • experiência na utilização do Maven para configurar projetos Java;
  • uma compreensão básica da comunicação HTTP numa aplicação web;
  • tags HTML comuns;
  • conhecimentos básicos de JavaScript;

Outros 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 saber mais sobre as duas estruturas, pode consultar as seguintes referências:

As fontes utilizadas 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 questão terá a seguinte arquitetura:

Image

  • Em [1], um servidor web entrega páginas estáticas a um navegador. Estas páginas contêm uma aplicação AngularJS construída com base no padrão MVC (Model–View–Controller). O modelo aqui abrange tanto as vistas como o domínio, representado aqui 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 a consulta do servidor Spring 4 [2]. O servidor 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. Ferramentas utilizadas

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

  • Spring Tool Suite para o servidor Spring: disponível para download gratuito;
  • WebStorm para o cliente Angular: está disponível uma versão de avaliação de um mês para download gratuito;
  • Wampserver para gerir a base de dados MySQL 5: disponível para download gratuito;

A instalação destas e de outras ferramentas é descrita na Secção 6.

1.3. Funcionalidades da aplicação

O código de exemplo está disponível |AQUI| como um ficheiro ZIP para download.

  • O servidor está contido nas pastas [rdvmedecins-metier-dao-v2] e [rdvmedecins-webapi-v3];
  • O cliente encontra-se na pasta [rdvmedecins-angular-v2];
  • O script SQL para gerar a 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 utilizando o script SQL [dbrdvmedecins.sql]. Utilizamos a ferramenta [PhpMyAdmin] do WampServer:

  • Em [1], selecione a ferramenta [phpMyAdmin] do WampServer;
  • Em [2], selecione a opção [Importar];
  • em [3], selecione o ficheiro [database/dbrdvmedecins.sql];
  • em [4], execute-o;
  • em [5], a base de dados é criada.

1.3.2. Servidor Web / Implementação JSON

Utilizando o Spring Tool Suite (STS), importe os dois projetos Maven do servidor Spring 4:

  • Em [1] e [2], importe os projetos Maven;
  • em [3], especificamos a pasta pai para os dois projetos a serem importados;
  • em [3], os projetos importados. Os projetos podem conter erros. Cada um deles deve utilizar um compilador >=1.7:
 

Por conseguinte, é necessária uma versão da JVM >=1.7:

 

Assim que não houver mais erros da JVM, podemos executar o projeto [rdvmedecins-webapi-v3]:

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

Em seguida, obtemos os seguintes registos na consola do 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)
  • 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:

  • Em [1], selecione a opção [Abrir diretório];
  • em [2], selecione a pasta [rdvmedecins-angular-v2];
  • em [3], a árvore de pastas;
  • Em [4], selecione a página principal da aplicação [app.html];
  • em [5], abra-a num navegador moderno;
  • em [6], a página de início de sessão da aplicação. Trata-se de uma aplicação de agendamento de consultas médicas. Esta aplicação já foi abordada no documento Introdução às estruturas JSF2, PrimeFaces e PrimeFaces Mobile;
  • em [7], uma caixa de seleção que permite ativar ou desativar o modo [debug]. Este modo é indicado pela presença do quadro [8], que exibe o modelo da vista atual;
  • em [9], um tempo de espera artificial em milissegundos. O valor padrão é 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-lhe ver a gestão de espera implementada pela aplicação;
  • em [10], o URL do servidor Spring 4. Com base no que precedeu, este é [http://localhost:8080];
  • em [11] e [12], o nome de utilizador e a palavra-passe do utilizador que 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 é incluída exclusivamente para demonstrar 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: francês (padrão) e inglês.
  • em [1], faz o login;
  • depois de iniciar sessão, pode escolher o médico com quem deseja marcar uma consulta [2] e a data da consulta [3];
  • Em [4], solicita a visualização da agenda do médico selecionado para o dia escolhido;
  • Assim que a agenda do médico for apresentada, pode marcar um horário [5];
  • Em [6], selecione o paciente para a consulta e confirme a sua seleção em [7];

Assim que a consulta for confirmada, será automaticamente redirecionado para a agenda, onde a nova consulta já estará listada. Esta consulta pode ser eliminada posteriormente [7].

As principais funcionalidades já foram descritas. São simples. As que não foram descritas são funções de navegação para regressar a uma visualização anterior. Vamos concluir com as definições de idioma:

  • em [1], pode alternar do francês para o inglês;
  • em [2], a visualização muda para inglês, incluindo o calendário;
https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público sob os termos da Creative Commons Atribuição – Não comercial – Partilha igual 3.0 Unported.