Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ionic workshop

614 views

Published on

Workshop de Ionic ministrado no CATI 2015 e ERI-MT 2015

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ionic workshop

  1. 1. I O N I C W O R K S H O P D E S E N V O LV E N D O A P L I C A T I V O S C O M I O N I C F R A M E W O R K 1
  2. 2. AlvaroViebrantz Analista de TI - Sefaz-MT CTO na Startup Procurix Founder na Startup Deliverix Ciência da Computação - UFMT Cuiabá, MT, Brasil alvarowolfx @alvinhuuu
  3. 3. R O A D M A P • Ferramentas de Desenvolvimento Web Modernas • Ambiente • Projeto FindMyPet • Estrutura Inicial • Primeiro Controller • Listagem de Posts • Criação de Post 3
  4. 4. F E R R A M E N TA S 4
  5. 5. F E R R A M E N TA S • Node.js • Gerenciamento de dependências • Pré processadores css • Task runners 5
  6. 6. N O D E . J S • Javascript server side • Aplicações inteiras com javascript • Aplicações isomórficas - http://isomorphic.net • Foi adotado para o desenvolvimento de várias ferramentas de terminal • NPM - Node package manager 6 https://nodejs.org
  7. 7. G E R E N C I A M E N T O D E D E P E N D Ê N C I A S 7 jQuery Bootstrap Minha aplicação web getBootstrap.com jquery.com depende depende
  8. 8. G E R E N C I A M E N T O D E D E P E N D Ê N C I A S • Já temos ferramentas em várias linguagens • Maven - Java • Composer - PHP • Sbt - Scala • Lein - Clojure • pip - Python 8
  9. 9. M A S E N O C L I E N T- S I D E ? • Bower 9 Bower https://bower.io
  10. 10. B O W E R 10 bower.json
  11. 11. B O W E R 11
  12. 12. P R É P R O C E S S A D O R E S C S S • Extendem o que conhecemos do css: • Variáveis • Herança • Mixins • Nesting • Modularização 12
  13. 13. VÁ R I A S L I N G U A G E N S 13 E extensões http://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/ http://bourbon.io/
  14. 14. E X E M P L O C O M S A S S 14
  15. 15. TA S K R U N N E R S • Executam atividades de forma automatizada • Minificação • Compilação • Concatenação de arquivos • Resolução de dependências • Deploy 15
  16. 16. O S M A I S FA M O S O S TA S K R U N N E R S 16 http://gulpjs.com http://gruntjs.com
  17. 17. CO N F I G U R A N D O A M B I E N T E 17
  18. 18. A R R U M A N D O O A M B I E N T E • Instalação Node.js • https://nodejs.org • Instalação do Ionic • npm install -g ionic cordova 18
  19. 19. A R R U M A N D O O A M B I E N T E • Instalação Android Studio e Android SDK • Android tools no PATH • Ionic Sublime Snippets • Preciso do package manager do Sublime Text 19
  20. 20. F I N D M Y P E T P R O J E T O D O C U R S O
  21. 21. O Q U E É O P R O J E T O • Pequena rede social de animais perdidos • Listagem de animais perdidos • Criar nova postagem • Foto • Titulo e Descrição • Recompensa • Geo localização 21
  22. 22. I N I C I A N D O O P R O J E T O 22 • Para criar um projeto ionic: • ionic start nomeDoApp nomeDoTemplate • blank: Projeto em branco apenas com estrutura de arquivos. • tabs: Projeto com navegação em abas. • sidemenu: Projeto com navegação de menu lateral.
  23. 23. I N I C I A N D O O P R O J E T O • Utilizar o Ionic-cli • Criar projeto em branco • ionic start find-my-pet blank • Configurar Sass • ionic setup sass • Demo dos comandos básicos 23
  24. 24. P R I M E I R O C O N T R O L L E R M Ã O N A M A S S A 24
  25. 25. E X P R E S S Õ E S • Pequenos trechos em javascript envolvidos em {{ expressão }} • Exemplos • 1 + 2 • user.name • items[index] • Internamente o framework utiliza o serviço $parse 25
  26. 26. C O N T R O L L E R • Controla uma parte da pagina, conectando a view com o model da sua aplicação. • Temos a diretiva ng-controller para referenciar um controller em uma parte da aplicação • View e Controller são ligados pelo $scope • Toda informação deve ser colocada no $scope para ser utilizada na view • Podemos dizer que o $scope é uma dependência dos controller 26
  27. 27. I N J E Ç Ã O D E D E P E N D Ê N C I A E M A N G U L A R J S • Todo components do angular pode receber suas dependências de 3 formas. • Via nome dos argumentos 27 moduleObject.controller(“ControllerName”, ControllerFunction) function ControllerFunction($scope)
  28. 28. I N J E Ç Ã O D E D E P E N D Ê N C I A E M A N G U L A R J S • Passando um array com as dependências na declaração do componente 28 moduleObject.controller(“ControllerName”, [“$scope”, ControllerFunction]) function ControllerFunction(whateverName){}
  29. 29. I N J E Ç Ã O D E D E P E N D Ê N C I A E M A N G U L A R J S • Via atributo $inject 29 moduleObject.controller(“ControllerName”,ControllerFunction) ControllerFunction.$inject = [“$scope”]; function ControllerFunction(whateverName){}
  30. 30. D I R E T I VA N G - R E P E AT • Itera em uma coleção de items e repete o html filho para cada iteração • Sintaxe da expressão repeat • variável in expression • (chave, valor) in expression • Pode ser aplicado um filtro antes da iteração (veremos mais tarde detalhes sobre filtros) • Gera as variáveis $index, $first, $last, $middle, $even e $odd para serem utilizadas na view 30
  31. 31. P R I M E I R O C O N T R O L L E R • Criar o modulo findmypet • Criar o controller PostController • PostController recebe $scope como parâmetro • PostController passa uma mensagem para a view 31 app.controller(“PostController”, PostController)
  32. 32. P R I M E I R O C O N T R O L L E R • Criar uma lista fictícia de postagens • Titulo • Recompensa • Descrição • Foto com lorempixel • http://lorempixel.com/300/150/animals/{id} 32
  33. 33. C O M P O N E N T E D E L I S TA G E M • Ionic possui 3 componentes principais de listagem • List • Card • Collection • Vamos alterar nossa listagem para usar cards 33
  34. 34. C O M P O N E N T E D E L I S TA G E M • ion-card ou class card • class item-text • class item-image • class item-text-wrap • Cards podem ter ações 34
  35. 35. D I R E T I VA N G - C L I C K • Cria um bind entre uma função no controller e um evento de click na view • Cards podem ter ações • Adicionar ações de curtir e ligar para a pessoa • Apenas logar o evento (console.log ou $log) 35
  36. 36. F I N A L I Z A N D O P R I M E I R O C O N T R O L L E R • Deixar a lista redonda com dados fake • Eventos de teste 36 Todo mundo ok ?
  37. 37. C R I A R N O V O P O S T M O D A L E T E M P L A T E E X T E R N O 37
  38. 38. M O D A L • Um modal é um painel de conteúdo que fica temporariamente a frente da tela principal. Geralmente usada para que o usuário veja detalhes rapidamente de algum item, faça edições ou faça alguma escolha em uma lista mais complexa. 38
  39. 39. M O D A L • $ionicModal service e ion-modal-view directive • $ionicModal.fromTemplate • Caminho do template do modal • $scope • retorna o modal em uma Promise 39
  40. 40. C I C L O D E V I D A D O M O D A L • Com a instância do modal pronta podemos : • Mostrar com modal.show() • Remover com modal.remove() • Fechar com modal.hide() • De preferência a remover ele para não ficar
 lixo na memória 40
  41. 41. C H A M A N D O M O D A L • Criar botão na header bar • Criar template do modal • Injetar o service $ionicModal no controller • Criar modal com $ionicModal • Mostrar instancia do modal 41
  42. 42. C R I A N D O U M N O V O P O S T E N T R A D A D E D A D O S 42
  43. 43. D ATA - B I N D I N G • jQuery Way 43
  44. 44. D ATA - B I N D I N G • Temos dois tipos de data-binding 44
  45. 45. D I R E T I VA N G - M O D E L • Cria um bind entre um componente de entrada na view para o controller 45
  46. 46. VA L I D A Ç Õ E S • Todo formulário em conjunto com a diretiva ng-model possibilita a validação da entrada dos dados • Sintaxe: formulario.atributo.<estado> ou formulario.<estado> • Várias validações built-in : required, number, min, max, minlength, maxlength, pattern • Pode ser extendida 46 https://docs.angularjs.org/guide/forms https://docs.angularjs.org/api/ng/directive/input Estado Significado $error Contém erros $pristine Os dados são novos $touched e $dirty Já foi alterada a informação $valid Os dados são válidos $invalid Os dados são inválidos
  47. 47. I O N I C C O M P O N E N T E S D E E N T R A D A
  48. 48. C R I A N D O U M N O V O P O S T • Criar entrada de dados para: • Titulo - Validar tamanho e requerido • Usar validação + ng-show/if/hide • Descrição • Recompensa - Mobile Input Range • Criar botões de camera e galeria 48 https://docs.angularjs.org/guide/forms https://docs.angularjs.org/api/ng/directive/input
  49. 49. P R I M E I R A L I B E X T E R N A M A S C A R A D E T E L E F O N E 49
  50. 50. G E R E N C I A M E N T O D E D E P E N D E N C I A S C O M B O W E R • Precisamos de uma mascara de entrada de dados • Não reinvente a roda • angular-input-masks é uma ótima lib • bower install —save angular-input-masks 50
  51. 51. D E C L A R A N D O D E P E N D E N C I A • Adicionar ui.utils.masks como dependencia do app • Adicionar no index.html os arquivos necessários • Agora é hora de testar !!! 51
  52. 52. A D I C I O N A R E N T R A D A D E T E L E F O N E • Usar diretiva ui-br-phone-number • Fazer mesma validação do titulo • Finalizar cadastro de novos posts 52
  53. 53. F I N A L I Z A N D O C R I A Ç Ã O D E P O S T S 53 Todo mundo ok ?
  54. 54. M E L H O R A N D O E S T R U T U R A D O P R O J E T O U M P O U C O M A I S A N G U L A R L I K E 54
  55. 55. S E R V I C E S • Nós já aprendemos a utilizar os controllers, porém eles estão com muitas responsabilidades • Quando estamos desenvolvendo alguma aplicação web, podemos ter várias camadas: • Conversa com o servidor • Acessar uma api Restful qualquer • Armazenar dados na sessão ou armazenamento local. • Já vimos até um serviço de Log ( $log service ) • Um Service pode ser qualquer coisa que possa ser reaproveitado
 por sua aplicação 55
  56. 56. U M A H I S T Ó R I A S O B R E I N J E Ç Ã O D E D E P E N D Ê N C I A S • Código modular • Separação de responsabilidades • Reuso • Manutenção 56
  57. 57. I N J E Ç Ã O D E D E P E N D Ê N C I A S • IoC - Inversion of Control • DI - Dependency Injection • SoC - Separation of Concerns 57 IoC DI SoC Objetos não vão atrás de suas dependências Responsável por gerenciar as dependências Conceito de separação de responsabilidades
  58. 58. N A P R ÁT I C A 58 Eu conserto coisas feitas de madeira !!!
  59. 59. N A P R ÁT I C A 59 Quando vou consertar algo, geralmente preciso de algo para cortar madeira(dependência). Mas dá muito trabalho arranjar tudo isso, queria focar apenas no meu trabalho. SoC
  60. 60. N A P R ÁT I C A 60 Que tal se alguem me arranjasse uma serra ? Eu sei apenas usar serras, alguém pode montar uma pra mim e me entregar !!! IoC
  61. 61. N A P R ÁT I C A 61 Agora eu tenho alguem que cuida das serras !!!
  62. 62. N A P R ÁT I C A 62 DI Mas como eu vou pegar o material que eu preciso agora ?
  63. 63. O N D E F I C A M O S S E R V I C E S 63 View Directive Controller Service Service
  64. 64. M Ã O N A M A S S A • Separar em um service/factory tudo que manipula posts • Criar service/factory de Usuario • Manter o usuário que está usando a aplicação • Gerar um token e guardar no LocalStorage 64
  65. 65. P R E C I S A M O S D E U M B A C K - E N D F I R E B A S E T O T H E R E S C U E 65
  66. 66. B A C K - E N D • Precisamos de um lugar para armazenar nossos dados • Geralmente é uma péssima prática conectar sua aplicação diretamente a algum banco de dados • Sempre haverá para seu aplicativo um back-end que possa ser atualizada e mantida facilmente por você 66
  67. 67. B A C K - E N D • Armazenamento • Push notifications • Analytics • Dashboard/UI gerenciamento • Social integration • Administração 67
  68. 68. B A A S - B A C K E N D A S A S E R V I C E • Fornecem backend e gerenciamento facilitado • parse.com • Firebase • StackMob • IBM Mobile Cloud Services • Amazon Mobile SDK 68
  69. 69. VA M O S U S A R O F I R E B A S E • Foco em realtime • Armazenamento baseado em JSON • Sincronizado em tempo real para cada cliente. • Autenticação de Usuários • Static Hosting 69
  70. 70. I N T E G R A N D O C O M A N G U L A R • Instalar firebase e AngularFire • bower install —save firebase angularfire • Adicionar dependencia • Adicionar no index.html os arquivos necessários 70
  71. 71. C R I A R C O N S TA N T E A N G U L A R • app.constant(“FirebaseURL”, urlDoFirebase) https://scorching-fire-4975.firebaseio.com/ 71
  72. 72. R E F E R E N C I A A O S P O S T S new Firebase(FirebaseURL+ ‘/posts'); 72
  73. 73. A N G U L A R F I R E • Services responsáveis por manter sincronizado o firebase e o $scope $firebaseArray $firebaseObject 73
  74. 74. A D I C I O N A N D O P O S T S • PostsRef.push() • Cria novo item na referencias a lista de posts • item.setWithPriority(objeto, ordenação) • Nosso caso o inverso da data atual 
 ( 0 - Date.now()) 74
  75. 75. F E E D B A C K D E C A R R E G A M E N T O • Utilizar $ionicLoading • Modal simples de carregamento • Bloqueia ação do usuário enquanto carrega os dados 75
  76. 76. F I N A L I Z A R I N T E G R A Ç Ã O C O M B A C K E N D Tudo ok ? 76

×