Aprendendo Na Prática: Aplicativos
Web com HTML5, Angular.js, Twitter
Bootstrap e Node.js
Tags: Node.js, HTML5, Angular.js...
Apresentação
Um pouco sobre mim
 Daniel Souza Makiyama
 E-mail: daniel.makiyama@gmail.com
 Graduado em Ciência da Computação pela FE...
Um pouco sobre você
 Qual é o seu nome?
 Qual sua experiência profissional?
 Qual é a sua experiência com desenvolvimen...
Plano de Curso
 O futuro da Web
 Interface de usuário também é
coisa de programador
 Sopa de Frameworks
 Por onde Come...
Plano de Curso
 Aplicação PhoneCat
(fonte: tutorial do site angularjs.org)
 Template Estático
 Templates Angular
 Filt...
Motivação / Oportunidade
 Javascript é a linguagem
com maior demanda atual
no mercado;
 Bolsas de iniciação
científica:
...
Qual é o futuro da web?
fonte: Application Foundations for The Open Web Platform (http://tinyurl.com/nnxbt4x acessado em 0...
Interface de Usuário também é coisa de
Programador
Estrutura
Organização Testes
Modularização
com o aumento da
complexidad...
Sopa de Frameworks
fonte: Javascript The Right Way (http://jstherightway.org/ acessado em 05/01/2015)
...e isso não repres...
Por onde começar?
+ +
Instalando o Node.js
http://nodejs.org/download/
Windows Installer (.msi) 32-bit
Instalando a IDE Atom
https://atom.io/
Windows Installer para Windows 7
(o Atom não precisa de instalação)
Hello Node!
 Inicialmente crie em seudiretoriohellonode um arquivo entitulado hello.js;
 Abra o Atom e arraste o arquivo...
O prompt de comando
 Localize no menu iniciar o ‘node.js command
prompt’, abra o programa;
 Navegue até a pasta do arqui...
O prompt de comando
 Abra o navegador de sua preferência e digite
http://127.0.0.1:8000/ . Você verá a mensagem:
Hello No...
Instalando o Angular.js
 Digite ‘npm install angular’ para instalar o
angular.js na sua pasta (existem outras maneiras
de...
Hello Angular!
 Crie um arquivo com o nome
index.html na pasta
helloangular;
 Abra o Atom e arraste o arquivo
index.html...
Hello Angular!
 Abra o prompt de comando do
node.js, navegue até a pasta
helloangular e digite o comando
‘npm install htt...
Hello Angular!
 Abra o navegador de sua preferência e digite
http://localhost:8000/ . Você verá um campo
de texto e uma m...
Instalando o Twitter Bootstrap
 Vamos utilizar o Yeoman para instalar o
bootstrap(existem outras maneiras de instalar
o b...
Instalando o Twitter Bootstrap
 Vamos verificar a estrutura criada pelo
gerador, começando pela raiz;
 Package.json => p...
Instalando o Twitter Bootstrap
 Bower.json => dependências de front-end;
 .yo-rc.json => configurações Yeoman;
 .jshint...
Instalando o Twitter Bootstrap
 testspec => pasta de testes;
 test.js => implementação de testes;
 Implemente o código ...
Instalando o Twitter Bootstrap
 app => pasta da aplicação;
 index.html => página inicial da aplicação;
 Acesse o prompt...
Testes com o Bootstrap
fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)
>>
 pratique...
Instalando o GIT
fonte: git (http://git-scm.com/ acessado em 05/01/2015)
http://git-scm.com/download/
Windows Installer
Recapitulando
Aula anterior. Objetivo: existem inúmeras
possíveis configurações de projetos web
Framework de padrões para
...
O que é o Angular.js?
O HTML é mestre em lidar com conteúdo estático, mas ainda
falha no dinamismo.
AngularJS permite exte...
Ajustes Possíveis Problemas de Permissão e
tamanho do caminho dos pacotes npm
Apagar sua pasta, criar novamente ex: c:dsm ...
Aplicação PhoneCat
 Abra o prompt de comando e clone o
repositório do tutorial ‘git clone --
depth=14
https://github.com/...
Aplicação PhoneCat
 Digite o comando ‘npm start’ para iniciar o
servidor na porta 8000 (como definido no
arquivo packages...
Aplicação PhoneCat
 Reinicie o Atom e arraste o arquivo
package.json do dir. angular-phonecat
para ele. O projeto angular...
Aplicação PhoneCat
 Pare o processo automático de testes com
ctrl+c e ‘S’. Execute o comando ‘git
checkout –f step-0’ par...
Angular
Aplicação PhoneCat
 O ng-app ativa o injetor do angular, responsável
pela injeção de dependências. O injetor tamb...
Aplicação PhoneCat – template estático
 Execute o comando ‘git checkout –f step-1’
para ir ao step-1 do tutorial;
 Local...
Aplicação PhoneCat – templates angular
 Execute o comando ‘git checkout –f step-2’
para ir ao step-2 do tutorial. Acesse ...
Aplicação PhoneCat – templates angular
 Acesse o arquivo app/js/controllers.js;
 angular.module define o módulo phonecat...
Aplicação PhoneCat – templates angular
 Acesse o arquivo test/unit/controllersSpec.js;
 testes unitários do controller ‘...
Aplicação PhoneCat – templates angular
 Abra o console na pasta do projeto e execute
‘npm test’. O único teste será execu...
Aplicação PhoneCat – filtrando repetidores
 Execute o comando ‘git checkout –f step-3’ para
ir ao step-3 do tutorial. Ace...
Aplicação PhoneCat – filtrando repetidores
 A função ’filter’ utiliza a variável ‘query’ para criar
um novo array com ite...
Aplicação PhoneCat – filtrando repetidores
 Acesse o arquivo em teste2escenarios.js .
Neste arquivo está a implementação ...
Aplicação PhoneCat – filtrando repetidores
 Coloque a variável {{query}} no <title> antes de
‘Google Phone Gallery’;
 Cr...
Aplicação PhoneCat – vinculação dupla de dados
 Execute o comando ‘git checkout –f step-4’ para
ir ao step-4 do tutorial....
Aplicação PhoneCat – vinculação dupla de dados
 Foi incluído teste unitário para a nova variável.
Verifique o status da s...
objeto
Aplicação PhoneCat – xhr e injeção de dependências
 Execute o comando ‘git checkout –f step-5’ para
ir ao step-5 d...
Aplicação PhoneCat – xhr e injeção de dependências
 Acesse o arquivo test/unit/controllersSpec.js. O
método ‘inject’ é ut...
Aplicação PhoneCat – Links de Template e Imagens
 Execute o comando ‘git checkout –f step-6’ para
ir ao step-6 do tutoria...
Aplicação PhoneCat – Rotas e Visões Múltiplas
 Execute o comando ‘git checkout –f step-7’ para
ir ao step-7 do tutorial. ...
$route service
Aplicação PhoneCat – Rotas e Visões Múltiplas
 Abra o app/index.html. Com o serviço de rotas, a
URL e o ng...
Aplicação PhoneCat – Rotas e Visões Múltiplas
 Abra o arquivo app/js/controllers.js. Note que foi
criado um módulo chamad...
Aplicação PhoneCat – Mais templates
 Execute o comando ‘git checkout –f step-8’ para
ir ao step-8 do tutorial. Na pasta a...
Aplicação PhoneCat – Mais templates
 Abra o arquivo ‘test/unit/controllersSpec.js’ e
verifique novos testes para a visão ...
Aplicação PhoneCat – Filtros Customizados
 Execute o comando ‘git checkout –f step-9’ para
ir ao step-9 do tutorial.
 Ab...
Aplicação PhoneCat – Filtros Customizados
 Execute o comando ‘git checkout –f step-10’ para
ir ao step-10 do tutorial.
 ...
Aplicação PhoneCat – Rest
 Execute o comando ‘git checkout –f step-11’ para
ir ao step-11 do tutorial. Abra o arquivo
bow...
Aplicação PhoneCat – Aplicando Animações
 Execute o comando ‘git checkout –f step-12’ para
ir ao step-12 do tutorial, Abr...
Aplicação PhoneCat – Aplicando Animações
 Veja o passo a passo de uma animação de ‘hide’
: https://docs.angularjs.org/gui...
Aplicação PhoneCat – Aplicando Animações
 Abra o arquivo ‘app/partials/phone-list.html’, veja
a classe ‘phone-listing’ qu...
Aplicação PhoneCat – Aplicando Animações
 Para simular o funcionamento inclua o serviço
$interval no controller PhoneList...
Aplicação PhoneCat – Aplicando Animações
 Também é possível realizar animações com
keyframe CSS3;
 A animação é definida...
Aplicação PhoneCat – Aplicando Animações
 Abra o arquivo ‘app/js/animations.js’, veja que foi
criada uma animação para a ...
Base de Conhecimento de Frameworks Web
Engenharia de Software
Arquitetura Web;
Método : programação
e técnicas de IHC;
Base de Conhecimento de Frameworks Web
Questão da Pesquisa
Grande volume de
frameworks web;
 Curva de aprendizagem:
vale...
Base de Conhecimento de Frameworks Web
Objetivo
Classificar frameworks web e criar uma base
e conhecimento para a tomada d...
Base de Conhecimento de Frameworks Web
Como participar?
Motivação
 Hands-On : IHC e Estudo de Diversos Frameworks Web;
...
Dúvidas
?
Próximos SlideShares
Carregando em…5
×

Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstrap e Node.js

2.693 visualizações

Publicada em

Interface de Usuário também é coisa de Programador, o objetivo deste treinamento é vivenciar um ambiente de desenvolvimento empregando estas tecnologias, abordando conceitos de testes unitários, integrados, padrões e boas práticas de desenvolvimento

Publicada em: Tecnologia

Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstrap e Node.js

  1. 1. Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstrap e Node.js Tags: Node.js, HTML5, Angular.js e Twitter Bootstrap
  2. 2. Apresentação
  3. 3. Um pouco sobre mim  Daniel Souza Makiyama  E-mail: daniel.makiyama@gmail.com  Graduado em Ciência da Computação pela FEI;  Cursando Mestrado em Ciência da Computação pela UFABC;  Microsoft Certified Professional (Desenvolvimento Web em ASP.NET 4.5);  Sócio-Fundador da Donuts4u Desenvolvimento e Comunicação Via Web.
  4. 4. Um pouco sobre você  Qual é o seu nome?  Qual sua experiência profissional?  Qual é a sua experiência com desenvolvimento web?  O que você espera aprender no curso de Aplicativos Web com HTML5, Angular.js, Twitter Bootstrap e Node.js?
  5. 5. Plano de Curso  O futuro da Web  Interface de usuário também é coisa de programador  Sopa de Frameworks  Por onde Começar?  Instalando o Node.js  Instalando a IDE ATOM  Hello Node!  O prompt de comando  Instalando o Angular.Js  Hello Angular!  Instalando o Twitter Bootstrap  Testes com o Bootstrap  Instalando o GIT
  6. 6. Plano de Curso  Aplicação PhoneCat (fonte: tutorial do site angularjs.org)  Template Estático  Templates Angular  Filtrando Repetidores  Vinculação dupla de dados  XHRs e Injeção de Dependências  Links de Template e Imagens  Rotas e Visões Múltiplas  Mais templates  Filtros  Tratador de Eventos  REST e Serviços Customizados  Animações  Participação em Pesquisa: Base de Conhecimento de Frameworks Web  Pesquisa Qualitativa: Impressões e Feedback
  7. 7. Motivação / Oportunidade  Javascript é a linguagem com maior demanda atual no mercado;  Bolsas de iniciação científica:  Arquiteturas e Frameworks Web  Pesquisa sobre arquiteturas e frameworks da internet e suas aplicações; fonte: linguagem vs salário / demanda (http://tinyurl.com/ppbu65x acessado em 05/01/2014) (pesquisa realizada de Janeiro à Junho de 2014 nos Estados Unidos, Grã-Bretanha e Austrália
  8. 8. Qual é o futuro da web? fonte: Application Foundations for The Open Web Platform (http://tinyurl.com/nnxbt4x acessado em 05/01/2014)  Experiência única em qualquer contexto;  Integração total entre dispositivos;  Modularização e reuso de interfaces;  Mídias e comunicação em tempo real;  Maior usabilidade e acessibilidade;  Novos serviços de api aberta;  Segurança e privacidade;
  9. 9. Interface de Usuário também é coisa de Programador Estrutura Organização Testes Modularização com o aumento da complexidade, como gerenciar a qualidade? AutomaçãoCodificação
  10. 10. Sopa de Frameworks fonte: Javascript The Right Way (http://jstherightway.org/ acessado em 05/01/2015) ...e isso não representa nem a metade dos frameworks disponíveis!
  11. 11. Por onde começar? + +
  12. 12. Instalando o Node.js http://nodejs.org/download/ Windows Installer (.msi) 32-bit
  13. 13. Instalando a IDE Atom https://atom.io/ Windows Installer para Windows 7 (o Atom não precisa de instalação)
  14. 14. Hello Node!  Inicialmente crie em seudiretoriohellonode um arquivo entitulado hello.js;  Abra o Atom e arraste o arquivo hello.js vazio para o mesmo;  Implemente o seguinte código no arquivo e salve;
  15. 15. O prompt de comando  Localize no menu iniciar o ‘node.js command prompt’, abra o programa;  Navegue até a pasta do arquivo hello.js e digite ‘node hello.js’ para iniciar o servidor web node.js;  Verifique a mensagem ‘Servidor executando em http://127.0.0.1:8000/
  16. 16. O prompt de comando  Abra o navegador de sua preferência e digite http://127.0.0.1:8000/ . Você verá a mensagem: Hello Node!  Voltem ao prompt de comando e digitem ctrl+c para parar o servidor;
  17. 17. Instalando o Angular.js  Digite ‘npm install angular’ para instalar o angular.js na sua pasta (existem outras maneiras de instalar o angular);  O comando copia os arquivos da última versão do angular.js para o diretório node_modules/angular/ fonte: NPM (https://www.npmjs.com/package/angular acessado em 05/01/2015)
  18. 18. Hello Angular!  Crie um arquivo com o nome index.html na pasta helloangular;  Abra o Atom e arraste o arquivo index.html recém criado para o mesmo;  Implemente o código ao lado no arquivo e salve; fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)
  19. 19. Hello Angular!  Abra o prompt de comando do node.js, navegue até a pasta helloangular e digite o comando ‘npm install http-server –g’ para instalar o servidor http-server globalmente;  Inicialize o servidor digitando http-server –a 0.0.0.0 –p 8000; fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)
  20. 20. Hello Angular!  Abra o navegador de sua preferência e digite http://localhost:8000/ . Você verá um campo de texto e uma mensagem ‘Hello’;  Digite qualquer texto na caixa de texto e automaticamente o texto é exibido no <h2> (no exemplo ao lado digitamos ‘Angular!!!!’);  Volte ao prompt de comando e digite ctrl+c para parar o servidor; fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015)
  21. 21. Instalando o Twitter Bootstrap  Vamos utilizar o Yeoman para instalar o bootstrap(existem outras maneiras de instalar o bootstrap). Digite ‘npm install -g yo’ para instalar o bootstrap globalmente;  Digite ‘yo webapp’ para criar uma nova aplicação web;  Mantenha a opção padrão ‘Bootstrap’ e pressione a tecla <espaço>. O gerador Yeoman criará diversos arquivos básicos para uma aplicação web (demora um pouquinho); fonte: webapp (https://github.com/yeoman/generator-webapp acessado em 05/01/2015)
  22. 22. Instalando o Twitter Bootstrap  Vamos verificar a estrutura criada pelo gerador, começando pela raiz;  Package.json => pacotes npm  devDependencies => referências;  engines => versão do node.js e/ou npm;  Gruntfile.js => executador de tarefas  serve => inicializa servidor, injeta dependências (bower), auto-prefixos de css, auto-refresh; fonte: gruntjs (http://gruntjs.com/ acessado em 05/01/2015) ...
  23. 23. Instalando o Twitter Bootstrap  Bower.json => dependências de front-end;  .yo-rc.json => configurações Yeoman;  .jshintrc => configurações jshintrc;  .gitignore => pastas/extensões a serem ignorado(a)s no commit;  .gitattributes => atributos dos arquivos a serem comitados, por caminho;  .editorconfig => configurações para IDEs;  .bowerrc => configurações do bower; fonte: bower (http://bower.io/ acessado em 05/01/2015)
  24. 24. Instalando o Twitter Bootstrap  testspec => pasta de testes;  test.js => implementação de testes;  Implemente o código ao lado no arquivo e salve;  Acesse o prompt de comando e execute o comando ‘grunt test’ para rodar o teste implementado; fonte: mocha (http://mochajs.org/ acessado em 05/01/2015)
  25. 25. Instalando o Twitter Bootstrap  app => pasta da aplicação;  index.html => página inicial da aplicação;  Acesse o prompt de comando e execute o comando ‘grunt serve’ para inicializar o servidor. Automaticamente a página inicial da aplicação é apresentada no navegador; fonte: gruntjs (http://gruntjs.com/ acessado em 05/01/2015)
  26. 26. Testes com o Bootstrap fonte: http-server (https://www.npmjs.com/package/http-server acessado em 05/01/2015) >>  pratique: crie uma table com class table e table-striped e veja o resultado.  foi possível verificar o livereload?
  27. 27. Instalando o GIT fonte: git (http://git-scm.com/ acessado em 05/01/2015) http://git-scm.com/download/ Windows Installer
  28. 28. Recapitulando Aula anterior. Objetivo: existem inúmeras possíveis configurações de projetos web Framework de padrões para desenvolvimento mobile-first Executador de Tarefas, automatiza atividades manuais envolvendo diversos pacotes Framework para criação e execução de testes Javascript Ferramenta geradora de código (facilita a construção de código) Aula de hoje: Projeto Phonecat: Estrutura básica recomendada pelo site do AngularJS.org Gestores de pacotes
  29. 29. O que é o Angular.js? O HTML é mestre em lidar com conteúdo estático, mas ainda falha no dinamismo. AngularJS permite extender o vocabulário do HTML para sua aplicação. O ambiente resultante é expressivo, fácil de usar e rápido de desenvolver. fonte: git (http://todomvc.com/examples/angularjs/#/ acessado em 05/01/2015)
  30. 30. Ajustes Possíveis Problemas de Permissão e tamanho do caminho dos pacotes npm Apagar sua pasta, criar novamente ex: c:dsm e criar a pasta c:npm Abrir o notepad como administrador; Acessar o arquivo npmrc em : C:program filesnodejsnode_modulesnpm e colocar: prefix=c:npm e salvar; Navegar até o diretório do seu projeto cd dsm, baixar o projeto do GIT git clone --depth=14 https://github.com/angular/angular-phonecat.git; Abrir o console na pasta do projeto (angular-phonecat) e rodar git config --global url.”https://”.insteadOf git:// ;
  31. 31. Aplicação PhoneCat  Abra o prompt de comando e clone o repositório do tutorial ‘git clone -- depth=14 https://github.com/angular/angular- phonecat.git’  Navegue no prompt até a pasta angular-phonecat recém criada e execute ‘npm install’ para instalar todas as ferramentas especificadas no arquivo package.json; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  32. 32. Aplicação PhoneCat  Digite o comando ‘npm start’ para iniciar o servidor na porta 8000 (como definido no arquivo packages.json;  O servidor apresenta como diretório raiz a pasta phonecatangular-phonecat. Clique na pasta ‘app’ para acessar a aplicação;  Navegue um pouco na aplicação. É um catálogo de smartphones; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  33. 33. Aplicação PhoneCat  Reinicie o Atom e arraste o arquivo package.json do dir. angular-phonecat para ele. O projeto angular-phonecat será aberto no Atom;  Abra um novo console, acesse a pasta da aplicação e digite ‘npm test’ para rodar os testes. Os testes unitários executados estão presentes no diretório angular- phonecattestunit;  gere um erro no teste it(‘should fetch phone detail’... e verifique se o console de teste é atualizado; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  34. 34. Aplicação PhoneCat  Pare o processo automático de testes com ctrl+c e ‘S’. Execute o comando ‘git checkout –f step-0’ para voltar o projeto ao step-0 do tutorial;  Como o servidor ainda está rodando em outro console acesse localhost:8000/, clique no diretório app. Na página dê ctrl+F5 para eliminar cache. Aparecerá página com ‘Nothing here yet’;  No Atom abra o arquivo app/index.html e verifique as funções do angular na página;  multiplicar 3 inputs HTML. O que ocorre antes do preenchimento, e depois? fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  35. 35. Angular Aplicação PhoneCat  O ng-app ativa o injetor do angular, responsável pela injeção de dependências. O injetor também cria o escopo raiz, contexto para o modelo da aplicação;  Angular compila o modelo de objetos do documento html (DOM) e processa as expressões;  Ao receber ações do usuário, Angular verifica modificações no modelo, caso existam, Angular executa novamente os vínculos afetados; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) ng-app escopo raiz template html expressões (vínculos) Ação usuário (mouse, teclado) visão modelo modifica
  36. 36. Aplicação PhoneCat – template estático  Execute o comando ‘git checkout –f step-1’ para ir ao step-1 do tutorial;  Localize e abra o arquivo appindex.html e verifique o conteúdo estático incluído;  transforme o conteúdo dos itens nas tags <details> e <summary> do HTML5. Informe a class ‘nav nav-pills’ na <ul>. Finalize apresentando o total de telefones usando a tag <div> com class ‘alert alert- info’; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  37. 37. Aplicação PhoneCat – templates angular  Execute o comando ‘git checkout –f step-2’ para ir ao step-2 do tutorial. Acesse o arquivo app/index.html;  ng-app define o módulo phonecatApp que possui o controller PhoneListCtrl;  ng-controller permite anexar o controller PhoneListCtrl à tag <body>. O modelo é definido no controller;  ng-repeat permite o loop dos itens do modelo de acordo com o template especificado dentro da <li> com os vínculos {{phone.name}} e {{phone.snippet}}; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  38. 38. Aplicação PhoneCat – templates angular  Acesse o arquivo app/js/controllers.js;  angular.module define o módulo phonecatApp, sem dependências ‘[]’ e atribui à variável phonecatApp;  phonecatApp define o controller ‘PhoneListCtrl’;  PhoneListCtrl anexa os dados dos smartphones ao escopo ($scope), atribuindo os mesmos à variável ‘phones’;  Este escopo está definido a todos os vínculos localizados dentro da tag de <body>, onde a diretiva ng- controller=“PhoneListCtrl” é definida;  Graças ao escopo, a visão e o modelo estão sempre sincronizados: http://plnkr.co/edit/zZfUQN?p=preview; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  39. 39. Aplicação PhoneCat – templates angular  Acesse o arquivo test/unit/controllersSpec.js;  testes unitários do controller ‘PhoneListCtrl’;  beforeEach => inicializa módulo ‘phonecatApp’ antes da execução dos testes;  it => define cada teste;  inject => injeta o serviço controller no teste, que permite obter o controller pelo nome;  O escopo é mock (simula o comportamento do objeto real neste contexto);  A verificação é feita através da função expect do framework jasmine; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  40. 40. Aplicação PhoneCat – templates angular  Abra o console na pasta do projeto e execute ‘npm test’. O único teste será executado com sucesso;  Crie uma nova variável no arquivo de app/js/controller.js chamada ‘itemName’ com nome ‘Lista de Telefones’;  Na página app/index.html crie uma <h2> que apresente a mensagem ‘Olá Lista de Telefones’ com a variável ‘itemName’;  Crie um novo teste para verificar se a variável ‘itemName’ está preenchida corretamente no controller: expect(scope.itemName).toBe(‘Lista de Telefones’);  Crie uma tabela conforme a imagem ao lado e corrija o código para apresentar os números multiplicados por 2, por linha; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  41. 41. Aplicação PhoneCat – filtrando repetidores  Execute o comando ‘git checkout –f step-3’ para ir ao step-3 do tutorial. Acesse o arquivo app/index.html;  Verifique na index.html que foi incluído um input com nome query e a sentença ‘| filter:query’ no repetidor;  Vinculação: no carregamento da página a variável query do input é ligada ao modelo, ou seja, ao escopo do controller ‘PhoneListCtrl’;  Devido à sintaxe ‘filter:query’ no repetidor, qualquer alteração na variável ‘query’ faz com que o repetidor atualize o DOM para refletir as mudanças;  crie uma variável chamada query no controller PhoneListCtrl e preencha com o valor ‘Nex’; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) Index.html Escopo do PhoneListCtrl query phones
  42. 42. Aplicação PhoneCat – filtrando repetidores  A função ’filter’ utiliza a variável ‘query’ para criar um novo array com itens que contém este conteúdo. O filtro verifica o conteúdo em todas as propriedades de cada item do array;  busque pela palavra ‘next’ e ‘motorola’ comprove que a busca varre não só a variável ‘name’, mas também a propriedade ‘snippet’;  A função ‘filter’ possui diversas opções:  troque a variável query por um objeto com {name: query}. Coloque uma negação em query (‘!’) e veja o resultado;  substitua a variável query pela função filterName, implemente a função no controller e teste. A função deve filtrar pela propriedade snippet; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) a função é executada n vezes, para cada item do array, em cada execução, o item do array é passado como primeiro parâmetro (item) dica... dica...
  43. 43. Aplicação PhoneCat – filtrando repetidores  Acesse o arquivo em teste2escenarios.js . Neste arquivo está a implementação de um teste de integração que verifica a funcionalidade de filtro;  Para executá-lo, abra o prompt de comando, navegue até a pasta do projeto e digite o comando: ‘npm run protractor’. O navegador é aberto automaticamente e é possível visualizar o teste sendo executado; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  44. 44. Aplicação PhoneCat – filtrando repetidores  Coloque a variável {{query}} no <title> antes de ‘Google Phone Gallery’;  Crie um teste integrado conforme a imagem ao lado; Veja que o valor não aparece pois a tag <title> não está na região definida pelo escopo do controller ‘PhoneListCtrl’ (<body>);  Mova o ng-controller=‘PhoneListCtrl’ para a tag <html> e verifique novamente a página;  Para evitar mostrar {{query}} poucos milisegundos após o carregamento da página, utilize ng-bind-template;  Com o protector o modelo do Angular e o DOM da aplicação fica acessível através da propriedade ‘element’. Crie um <h3> na app/index.html e inclua a variável {{query}} nele. Crie um teste integrado para verificar se o valor da query está presente no <h3>; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) dica...
  45. 45. Aplicação PhoneCat – vinculação dupla de dados  Execute o comando ‘git checkout –f step-4’ para ir ao step-4 do tutorial. Acesse o arquivo app/index.html;  Neste step foi incluído um combobox com propriedade ‘orderProp’;  No filtro foi incluído ‘orderBy:orderProp’ ao filtro. Este encadeamento permitirá que, além de filtrar, o resultado do filtro também seja ordenado;  No controller, a propriedade ‘age’ também foi adicionada ao array de telefones;  O valor padrão do campo de ordenação é ‘age’; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  46. 46. Aplicação PhoneCat – vinculação dupla de dados  Foi incluído teste unitário para a nova variável. Verifique o status da sua console de testes unitários (npm test);  Foi incluído teste de integração que verifica a ordenação. Lembrando que no momento ainda não estamos utilizando dados remotos, portanto não é possível preencher o array de telefones com dados de teste para implementar o teste integrado. Rode os testes (npm run protractor);  Reverta a ordenação adicionando um ‘-’ antes dos valores do combobox. Porque apareceu uma opção vazia no combobox? fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  47. 47. objeto Aplicação PhoneCat – xhr e injeção de dependências  Execute o comando ‘git checkout –f step-5’ para ir ao step-5 do tutorial. Acesse o arquivo app/phones/phones.json. Este arquivo possui uma lista de telefones no formato JSON;  Abra o arquivo app/js/controllers.js. $http é um serviço do Angular que permite realizar requisições HTTP. Serviços são injetados no controllers;  Uma requisição ‘get’ retorna um objeto ‘promise’ (compromisso) com um método ‘success’, desta forma é possível tratar a resposta assíncrona;  Não é necessário fazer parse do json;  Serviços do Angular possuem prefixo ‘$’. Por questões de minificação, o nome dos serviços é apresentado no formato string; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) injetor serviços $http $scope ... fábricas instâncias
  48. 48. Aplicação PhoneCat – xhr e injeção de dependências  Acesse o arquivo test/unit/controllersSpec.js. O método ‘inject’ é utilizado para injetar instâncias dos serviços $rootScope, $controller e $httpBackend na função beforeEach do Jasmine (isolamento);  Neste método o escopo é inicializado e o httpBackend é ‘mockado’, ou seja, é definido o retorno esperado para a url acessada no controller;  Adicione uma tag <pre>{{phones | filter:query | orderBy:orderProp | json}}</pre> para visualizar os telefones em formato JSON;  No callback do carregamento dos telefones, limite o número de telefones a um único item (use o método splice). Arrume o teste unitário; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  49. 49. Aplicação PhoneCat – Links de Template e Imagens  Execute o comando ‘git checkout –f step-6’ para ir ao step-6 do tutorial. Acesse o arquivo app/index.html e verifique os links da lista de telefones ‘#/phones/{{phone.id}}’;  Porque no caso da tag img utilizamos ng-src ao invés de colocar as 2 chaves ‘{{}}’?  Abra o arquivo test/e2e/scenarios.js e verifique o novo teste criado. Execute o teste ‘npm run protractor’;  Substitua o ‘ng-src’ por um ‘src’ comum. Verifique as requisições na ferramenta de desenvolvedor do Chrome; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  50. 50. Aplicação PhoneCat – Rotas e Visões Múltiplas  Execute o comando ‘git checkout –f step-7’ para ir ao step-7 do tutorial. Acesse o arquivo bower.json e verifique que foi incluído a dependência “angular-route”. Rode ‘npm install’;  Inclua um link ‘<a href="#/phones">voltar</a>’ na página app/partials/phone-detail.html. Navegue na aplicação e verifique que o link no navegador muda, mas a página não dá refresh;  Na função de config são definidos os ‘provedores’ de cada serviço, onde é possível controlar a criação e comportamento em tempo de execução do serviço;  Abra o arquivo app/js/app.js. Veja que o módulo ngRoute e o módulo phonecatControllers são definidos como dependências do módulo da aplicação; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) objeto injetor serviços $route ... instâncias $routeProvider atalhos: factory, value providers O script precisa ser incluído no template layout <=
  51. 51. $route service Aplicação PhoneCat – Rotas e Visões Múltiplas  Abra o app/index.html. Com o serviço de rotas, a URL e o ng-view ficam vinculados.  Voltando ao arquivo app/js/app.js, verifique que caso o link seja ‘/phones’, o ng-view renderiza ‘partials/phone-list.html’, caso o link seja ‘phones/:phoneId’, o ng-view renderiza ‘partials/phone-detail.html’;  O provedor de rotas é injetado no método de configuração e as rotas são definidas no método ‘when’ do provider;  Note a rota ‘/phones/:phoneId’, informações precedidas por ‘:’ são extraídas da URL e agregadas ao parâmetro $routeParams disponível no controller; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) Index.html ngView $routeProvider Index.html
  52. 52. Aplicação PhoneCat – Rotas e Visões Múltiplas  Abra o arquivo app/js/controllers.js. Note que foi criado um módulo chamado ‘phonecatControllers’ para armazenar os dois controllers;  No controller ‘PhoneDetailCtrl’ é injetado o objeto ‘$routeParams’ que possui a propriedade ‘phoneId’ obtida via rota => querystring;  Acesse o arquivo de testes de integração. Entenda e execute os testes (npm run protractor). Em ‘should display placeholder...’, troque ‘by.binding’ por ‘by.model’, porque não funciona?  Inclua ‘{{orderProp}}’ em app/index.html; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  53. 53. Aplicação PhoneCat – Mais templates  Execute o comando ‘git checkout –f step-8’ para ir ao step-8 do tutorial. Na pasta app/phones/ é possível verificar além do arquivo phones.json outros arquivos, um para cada modelo de telefone com detalhes em formato json;  Abra o arquivo ‘app/js/controllers.js’ e no controller ‘PhoneDetailCtrl’ verifique a requisição aos arquivos com detalhes dos telefones;  Abra o arquivo ‘app/partials/phone-detail.html’. Veja que não é mais necessário especificar o ng- controller. O mesmo é vinculado ao template através da rota;  Abra o arquivo ‘test/unit/controllersSpec.js’ e verifique novos testes para a visão de detalhes; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  54. 54. Aplicação PhoneCat – Mais templates  Abra o arquivo ‘test/unit/controllersSpec.js’ e verifique novos testes para a visão de detalhes. Retire a linha que atribui valor para ‘phoneId’ e execute o teste;  Abra o arquivo ‘test/e2e/scenarios.js’ e verifique o teste ‘should display nexus-s page’;  Escreva um teste integrado que verifique que são apresentadas 4 thumbnails na página de detalhes do ‘Nexus S’; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  55. 55. Aplicação PhoneCat – Filtros Customizados  Execute o comando ‘git checkout –f step-9’ para ir ao step-9 do tutorial.  Abra o arquivo ‘app/js/filters.js’, verifique o filtro ‘checkmark’ que a partir de uma variável booleana apresenta o caracter ✓ para verdadeiro ou ✘para falso. Este arquivo deve ser incluído na index.html para que funcione;  Abra o arquivo ‘app/partials/phone-detail.html’ e veja o filtro customizado aplicado à 2 variáveis;  Abra o arquivo ‘test/unit/filtersSpec.js’ e verifique as injeções de dependência. No caso de filtros, o sufixo ‘Filter’ deve ser adicionado ao nome do filtro quando injetado;  No arquivo ‘app/partials/phone-detail.html’, experimente filtros como: uppercase, limitTo( você pode encadear filtros); fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  56. 56. Aplicação PhoneCat – Filtros Customizados  Execute o comando ‘git checkout –f step-10’ para ir ao step-10 do tutorial.  Abra o arquivo ‘app/js/controllers.js’. A função tratadora de eventos ‘setImage’ altera o valor da propriedade ‘mainImageUrl’;  Abra o arquivo ‘app/partials/phone-detail.html’ e verifique o atributo ‘ng-click’ que utiliza a função ‘setImage’ para tratar o evento de clique nas imagens;  Abra o arquivo ‘test/e2e/scenarios.js’ e verifique dois novos métodos que verificam este mecanismo recém implementado;  Abra o arquivo ‘test/unit/controllersSpec.js’ e veja a nova função ‘xyzPhoneData’. Retire o item ‘images’ e veja o teste falhar. Porque? Teste o funcionamento do ‘ng-mouseover’; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  57. 57. Aplicação PhoneCat – Rest  Execute o comando ‘git checkout –f step-11’ para ir ao step-11 do tutorial. Abra o arquivo bower.json e veja a nova referência ‘ngResource’(implementação RESTful);  Abra o arquivo ‘app/js/services.js’ onde foi implementado o serviço de acesso a dados dos telefones;  Abra o arquivo ‘app/js/app.js’ e visualize a nova dependência: ‘phonecatServices’;  Abra o arquivo ‘app/js/controllers.js’ e verifique os controllers ainda mais simplificados e sem dependência do serviço $http;  Verifique as alterações nos testes unitários (referências, código e funções usadas), ex: toEqualData; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) O script precisa ser incluído no template layout <=
  58. 58. Aplicação PhoneCat – Aplicando Animações  Execute o comando ‘git checkout –f step-12’ para ir ao step-12 do tutorial, Abra o arquivo bower.json: jquery e ng-animate serão utilizados; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) O script precisa ser incluído no template layout <= Muitas animações podem ser feitas em CSS3, mas coisas mais complexas precisam de Javascript. Para entender animações em Angular é necessário primeiro entender ‘transitions’ em HTML5: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 Transições também funcionam quando novas classes são incluídas via javascript: http://jsfiddle.net/makiyamad/c7zsvyuo/6/ Transições funcionam toda vez que a(s) propriedade(s) monitorada(s) é(são) alterada(s), não necessariamente porque uma classe foi alterada no elemento em questão: http://jsfiddle.net/makiyamad/4s3posav/1/
  59. 59. Aplicação PhoneCat – Aplicando Animações  Veja o passo a passo de uma animação de ‘hide’ : https://docs.angularjs.org/guide/animations . Veja o css utilizado: fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  60. 60. Aplicação PhoneCat – Aplicando Animações  Abra o arquivo ‘app/partials/phone-list.html’, veja a classe ‘phone-listing’ que foi adicionada ao <li>;  Abra o arquivo ‘app/css/animations.css’. No caso de animações no ng-repeat:  ng-enter aplicado quando um novo item é adicionado à lista e renderizado na página;  ng-move aplicado quando o item é movido na lista;  ng-leave aplicado quando o item é removido da lista; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) este css define que nos 3 tipos de transições deve ser executada uma animação ex: o estado ng-leave é o estado de animação iniciada e o ng-enter-active marca o estado final da animação;
  61. 61. Aplicação PhoneCat – Aplicando Animações  Para simular o funcionamento inclua o serviço $interval no controller PhoneListCtrl, aumente o tempo da animação no css para 5 segundos e com a ferramenta do desenvolvedor abra o console e monitore.  Você verá algo semelhante à imagem abaixo, que comprova que a sequência ng-enter > ng-enter- active ou ng-leave > ng-leave-active é executada antes de mostrar ou remover um elemento de um repeater; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  62. 62. Aplicação PhoneCat – Aplicando Animações  Também é possível realizar animações com keyframe CSS3;  A animação é definida através da cláusula ‘@keyframes’ e utilizada na classe através do atributo ‘animation’;  Para verificar esta animação clique em um telefone na página principal de telefones, você verá o efeito de fade-out e fade-in.  Na tela de detalhes de um telefone, clique na seta de voltar do próprio navegador. É impressionante verificar o fade-out e fade-in também é executado e não há refresh;  Inclua o link voltar no phone-details.html, veja a mesma animação ao clicar nele; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015)
  63. 63. Aplicação PhoneCat – Aplicando Animações  Abra o arquivo ‘app/js/animations.js’, veja que foi criada uma animação para a classe ‘.phone’;  A animação animateup é disparada quando a classe active é adicionada nos elementos com classe phone;  A animação animatedown é disparada quando a classe active é removida dos elementos com classe phone; fonte: tutorial angularjs (https://docs.angularjs.org/tutorial acessado em 05/01/2015) - active active - -500 + 0 + 500 -500 + 0 + 500 active - -500 + 0 + 500 animateup animatedown
  64. 64. Base de Conhecimento de Frameworks Web Engenharia de Software Arquitetura Web; Método : programação e técnicas de IHC;
  65. 65. Base de Conhecimento de Frameworks Web Questão da Pesquisa Grande volume de frameworks web;  Curva de aprendizagem: vale a pena?  Como classificar os frameworks web e promover o conhecimento?  Como tornar o processo de seleção mais pragmático?
  66. 66. Base de Conhecimento de Frameworks Web Objetivo Classificar frameworks web e criar uma base e conhecimento para a tomada de decisão;
  67. 67. Base de Conhecimento de Frameworks Web Como participar? Motivação  Hands-On : IHC e Estudo de Diversos Frameworks Web;  Caso tenha interesse deixe seu e-mail comigo;
  68. 68. Dúvidas ?

×