EA975 - Laboratório de Engenharia de Software Turmas K/L - 2017 Aula 1 O que vamos desenvolver? Vamos desenvolver uma aplicação distribuída, empregando a arquitetura 3-Tier segundo o estilo REST/HTTP (Respresentational State Transfer) e implementada em Javascript sobre o framework MEAN (MongoDB-Express-AngularJS-Node.js). Aplicação distribuída: seus componentes executam em diferentes nós de processamento dispersos em diferentes domínios administrativos. Arquitetura 3-Tier: os componentes da arquitetura executam em 3 diferentes camadas horizontais (tier): cliente, servidor e serviços de retaguarda. Estilo REST/HTTP (RESTful): os métodos HTTP GET, POST, PUT e DELETE são utilizados para acessar, inserir, modificar e remover informações no domínio do servidor. Framework: esqueleto de uma aplicação onde diversos componentes já estão implementados. EA975/2017 - Prof. Eleri Cardozo 2
Arquiteturas 3-Tier Camada do Cliente Protocolo Cliente/ Servidor Camada do Servidor Protocolo de Acesso aos Serviços Camada de Serviços de Retaguarda Interface com o usuário ou com outras aplicações Lógica da aplicação (stateless/stateful) Persistência de dados Serviços na nuvem Aplicações legadas Exemplo de tecnologias de implementação: HTTP JDBC EA975/2017 - Prof. Eleri Cardozo 3 Framework MEAN EA975/2017 - Prof. Eleri Cardozo 4 fonte: https://rkreferenceblog.files.wordpress.com/2016/02/mean-diagram-3.png
AJAX AJAX (Asynchronous Javascript and XML) é um conjunto de funções em Javascript que suportam interação com servidores HTTP. AJAX permite um código Javascript executando em um navegador web realizar requisições HTTP (GET, POST, etc.) de maneira assíncrona (ou seja, a interface não é "congelada" enquanto a requisição HTTP é processada). AJAX é suportado por todos os navegadores atuais e foi concebido para dar "dinamismo" às interfaces web. Exemplo: EA975/2017 - Prof. Eleri Cardozo 5 JSON JSON (Javascript Object Notation) é um padrão de troca de informações entre aplicações. É uma alternativa menos "verbosa" ao XML. JSON é adotado pelas grandes corporações da internet. XML: <disciplina> <sigla>ea975</sigla> <nome>lab. Eng. de Software</nome> <turmas> <turma>k</turma> <turma>l</turma> </turmas> <sala>le-27</sala> <vagas>40</vagas> <professor> <nome>eleri Cardozo</nome> <matricula>245429</matricula> </professor> </disciplina> JSON: {disciplina: { sigla: EA975, turmas: [K, L], sala: LE-27, vagas: 40, professor: { nome: Eleri Cardozo, matricula: 245429 } } } EA975/2017 - Prof. Eleri Cardozo 6
AngularJS AngularJS é um desenvolvimento patrocinado pela Google que tem por objetivo facilitar o processamento de objetos JSON recebidos em uma interação HTTP. AngularJS permite gerar requisições HTTP de maneira mais simplificada que o AJAX nativo, bem como processar o conteúdo de uma resposta no formato JSON, por exemplo, apresentar no navegador uma tabela HTML cujos campos são gerados dinamicamente a partir de objetos JSON. AngularJS é integralmente escrito em Javascript e, portanto, suportado por todos os navegadores atuais. AngularJS é uma alternativa ao DOM (Document Object Model) que é mais voltado para interações baseadas em XML. Vamos utilizar o AngularJS para implementar nossa Camada do Cliente. EA975/2017 - Prof. Eleri Cardozo 7 REST REST (Representational State Transfer) é um estilo arquitetural proposto por Roy Fielding em 2000 (e redescoberto uma década depois). REST define recursos identificados por URI/URL e mantidos em servidores stateless. Cada recurso tem um estado associado que pode se alterar ao longo do tempo. REST prevê ainda que a arquitetura é organizada em camadas horizontais (tiers). Arquiteturas que seguem o estilo REST são comumente implementadas em 3 camadas (3-tier) com interação cliente-servidor via HTTP. As seguintes requisições HTTP são empregadas: POST: cria um recurso com seu respectivo estado inicial no servidor; GET: acessa o estado de um recurso mantido no servidor; PUT: altera o estado de um recurso mantido no servidor; DELETE: remove um objeto mantido no servidor. Normalmente o estado dos objetos é persistente em banco de dados. Operações HTTP POST, GET, PUT e DELETE são mapeadas em operações CRUD (Create, Retrieve, Update, Remove) no banco de dados. EA975/2017 - Prof. Eleri Cardozo 8
Node.js e Express Node.js é um servidor HTTP escrito em Javascript a partir do V8, o interpretador Javascript do Google Chrome. Node.js trabalha com diversos módulos (extensões), por exemplo: express: módulo de processamento de requisições REST/HTTP; mongoose: interface para o banco de dados MongoDB; body-parser: interpretador JSON do conteúdo de uma requisição HTTP POST e PUT. Express permite definir callbacks (funções chamadas assincronamente) para o processamento de requisições HTTP de acordo com o recurso (URL) sendo acessado. Facilita a codificação de servidores REST/HTTP. Vamos utilizar Node.js+Express (e outros módulos) para implementar nossa Camada do Servidor. EA975/2017 - Prof. Eleri Cardozo 9 JSON e Banco de Dados Os bancos de dados comumente utilizam armazenamento dos dados em tabelas e linguagem de consulta SQL (Structured Query Language). Propostas de modos de armazenamento e linguagens de consulta alternativos têm surgido nas duas últimas décadas. Por exemplo, a Oracle, líder de mercado em banco de dados, oferece o Oracle XML DB, um banco de dados com armazenamento nativo em XML e linguagens de consulta orientadas a XML (XQuery e XPath). Entretanto, claramente o formato XML está sendo substituído pelo JSON nos serviços oferecidos na internet. Então, por que não armazenar no banco de dados documentos no formato JSON ao invés de tabelas ou documentos XML? EA975/2017 - Prof. Eleri Cardozo 10
MongoDB JSON não possui uma linguagem de descrição de documentos como o XML Schema nem linguagens de consulta como o XPath. MongoDB é um banco de dados para armazenamento de objetos no formato JSON. Não é necessário definir previamente os formatos dos objetos que serão armazenados. A linguagem de consulta é simples: são passados os campos dos objetos JSON que queremos acessar. Exemplos: {nome: Eleri Cardozo} {$or: [{nome: Eleri Cardozo}, {nome: Albert Einstein}]} {vagas: {$gt 20}} No MongoDB todo objeto armazenado possui uma chave de acesso única (atributo _id). Node.js possui um módulo para interagir com o MongoDB, o mongoose. Vamos utilizar o MongoDB para implementar nossa Camada de Serviços de Retaguarda. EA975/2017 - Prof. Eleri Cardozo 11 O que fazer agora? Detalhar, por meio de um texto livre, uma aplicação com restrições descritas no slide 2. Cuidados: Conceba uma aplicação simples que resulte em poucos casos de uso (mas pelo menos um caso de uso por membro do grupo). Esboce com lápis e papel como seria a interface do usuário desta aplicação. Se a figura começar a ficar confusa, repense a aplicação. Conceba uma apliação que não demande conhecimentos específicos do usuário final (no máximo o preenchimento de um formulário no navegador). Conceba uma aplicação que seja "autônoma", ou seja, não dependa de outras aplicações ou serviços para funcionar. EA975/2017 - Prof. Eleri Cardozo 12