Desenvolvimento de sistema computacional utilizando AngularJs

Transcrição

1 Desenvolvimento de sistema computacional utilizando AngularJs Willian Nelson R. de Oliveira 1, Jaime William Dias 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil nelson willian123@hotmail.com, jaime@unipar.br Resumo. Vivemos em um mundo excessivamente tecnológico, com softwares cada vez mais eficientes e um mercado consumidor extremamente exigente, nesse cenário, os desenvolvedores que realmente se preocupam com a qualidade de um produto computacional precisam manter-se atualizados sobre novas tecnologias que facilitem seu trabalho. Um exemplo de tecnologia que estudamos em livros, artigos científicos e blogs é o AngularJS, um framework para a execução de Single Page Application (Aplicação Página única), e o objetivo deste artigo é desenvolver um sistema computacional utilizando AngularJS. 1. Introdução Angular JS foi originalmente desenvolvido em 2009 por Miško Hevery e Adam Abrons como um software por trás de um serviço de armazenamento JSON online que teria preço estimado por megabyte para aplicações pré-construídas (easy-to-make) às empresas [Branas 2014]. Esse aplicativo foi disponibilizado em GetAngular.com e teve alguns inscritos antes de os dois decidirem abandonar a ideia comercial e distribuir Angular como uma framework open-source. Abrons deixou o projeto, mas Hevery, que trabalha no Google, continuou seu desenvolvimento e manteve o framework em conjunto com alguns colegas do Google: Igor Minár e Vojta Jína. O Angular JS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio [Angularjs.org 2016]. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way databinding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes. 2. Metodologia O artigo cientifico foi desenvolvido com a ajuda de livros, artigos e blogs de autores importantes como por exemplo Hevery, M., Branas, R. e Lau, D., que ajudaram a elevar a qualidade desse projeto. O trabalho preocupou-se em avaliar a funcionalidade e utilidade da Framework AngularJs e através de um exemplo, conseguimos expor as vantagens da utilização dessa framework.

2 3. Angular JS AngularJs trata se de um framework Java script open source (Código aberto) para aplicação web, foi desenvolvido por Misko Hevery em um projeto pessoal com o objetivo de aprimorar o desempenho de aplicações Web. Pouco tempo depois, Hevery entrou para o Google e aplicou sua framework no projeto Google feedback, diminuindo o número de linhas do código e aumentou sua performance. Google feedback é uma ferramenta que está presente em todos os produtos da Google como: Google+, Chrome, Hangouts e entre outros, onde você pode enviar impressões do que está acontecendo nos produtos como: erros, críticas e com isso o suporte vai poder observar se usuário final está gostando ou não dos produtos. Atualmente, o Google é o principal contribuinte para o código do AngularJs [Branas 2014]. AngularJs segue o padrão MVC (Model-View-Controller) que é implementado em Java Script e HTML (Linguagem de Marcação de Hipertexto) que serve basicamente para produzir páginas na web. A View é definida no HTML enquanto o Model e o Controller são implementados no Java Script. O HTML nasceu e sempre se manteve com uma essência estática [Vicente 2014] View A View(Visão) é um aplicativo AngularJs simplesmente criado com HTML. Usando um exemplo bem simples, podemos ver que o HTML pode existir dentro de uma única página, no entanto, quase toda a aplicação irá mover rapidamente após o único View. Tome esta página HTML como um ponto de partida: Figura 1. Exemplo de código HTML. Como mostra a figura 1, é um exemplo de código HTML que apresenta uma página sem a aplicação de uma View em AngularJS; para o seu funcionamento, o angular precisa passar por algumas etapas como: referenciar no projeto do framework e definir a aplicação AngularJs. Observa-se na Figura 2, como é bem simples referenciar o AngularJS em um projeto, simplesmente cria-se uma tag script no projeto, em seguida buscamos no site dele a referência do CDN. Agora, para iniciar a aplicação, temos que declarar a diretiva ng-app que pode ser declarada na tag html.

3 Figura 2. Referência do CDI. Figura 3. Declaração da diretiva Após a declaração da diretiva,como foi mostrado na figura 3, ao carregar a página HTML, o AngularJs vai procurar o module (modulo) chamado App que foi declarada no ng-app. Os module do AngularJs são os componentes chave para identificação e você pode ter vários modules com responsabilidades diferentes e declarar dependência entre eles. Para declaração dos módulos é bem fácil, basta criar um arquivo app.js e adicionar um script chamado App que também vai ser utilizado para ligar os controles para a aplicação. Figura 4. Declaração da diretiva ng-app Depois do Script adicionado conforme foi mostrado na figura 4, precisa-se referenciar na página principal o arquivo app.js para a diretiva ng-app e o module ser conectado Controller O Controlador (Controller) é responsável por reunir o modelo utilizado pela View e da criação de quaisquer dependências correspondentes necessários para tornar a View ou manipular a entrada do consumo de View. Cada controlador é responsável por uma lógica. Para view saber qual controle que ela vai trabalhar, deve adicionar uma diretiva chamada ng-controller, que pode ser declarada no body do HTML. Agora podemos criar um arquivo firstcontroller.js e adicionar esse simples script conforme mostra a figura 5. Figura 5. Controller Model Model (modelo) para um controlador contém os dados a serem visualizados bem como os dados a ser recolhidos em qualquer campo de entrada ou de outras formas. E também o modelo pode conter várias funções quando uma atividade for invocada como um click no botão.

4 O objeto $ (Cifrão) é injetado no controlador que pode ser utilizado como modelo diretamente. Igual foi mostrado no código anterior, o cifrão foi usado no $scope (escopo). O escopo tem como objetivo de unir controlador com a View onde tem dados do modelo.na figura 6, mostra um exemplo. Figura 6. Escopo com uma mensagem. Para o usuário final conseguir ver a mensagem Hello World, é preciso adicionar no HTML duas abre e fecha chave como mostra a figura 7, e com isso ele vai aparecer no a View. Figura 7. HTML atualizado com as ligações de dados. Depois de todas essas etapas, passando pela view, model e controller, você já tem um projeto em AngularJs. Basta abrir o navegador e digitar o endereço onde está salvo o arquivo. Figura 8. Resultado. A figura 8 ilustra o resultado obtido ao término da configuração de um projeto em AngularJs. Vale lembrar que esse framework vem tornando-se cada vez mais presente nos projetos atuais, pela sua estrutura de código, facilidade de uso e baixo custo (open source), ela é uma ferramenta completamente viável.

5 4. Considerações Finais Esse trabalho teve como foco a pesquisa, analisar e expor o que é AngularJs e como surgiu, mostrando a importância da Framework, é impossível imaginar o mundo moderno sem a utilizações de alguns frameworks. A maioria das pessoas simplesmente usufruem das facilidades cotidianas proporcionadas por esses frameworks sem nem mesmo se dar conta disso. O AngularJs é um recurso cada vez mais importante em vários aspectos do cotidiano como: emprego, educação e etc. Pode se notar que essa framework trouxe melhoria no desempenho dos sistemas web e até mobile. Referências Angularjs.org (2016). What is angular? guide/introductio/. Accessed: as 17:10:30. Branas, R. (2014). AngularJS Essentials. Packt Plublishing Ltd. Diego (2013). Introdução ao angularjs. introducao-ao-angularjs/. Accessed: as 01:03:35. Dietz, F. (2013). AngularJs. Syncfusion. Google (2016). Angularjs. Accessed: as 00:10:55. Guilherme de Oliveira Vicente, D. F. d. S. (2014). Apresentando o angularjs. introducing-angularjs-batarang.html. Accessed: as 10:10:39. Hevery, M. (2016). About misko hevery. Accessed: as 16:10:30. Lau, D. (2013). 10 reasons why you should use angularjs. sitepoint.com/10-reasons-use-angularjs/. Accessed: as 16:10:30. Shyam Seshadry, B. G. (2014). Desenvolvimento com AngularJs. Novatec. Vicente, G. (2014). Apresentando o angular.js. apresentando-o-angular-js-4/. Accessed: as 18:10:40. W3Schools (2016). Angularjs introduction. angular/angular_intro.asp. Accessed: as 14:10:20.