O documento apresenta uma introdução sobre o desenvolvimento de aplicativos com o framework Ionic. Apresenta as principais ferramentas de desenvolvimento web modernas como Node.js, pré-processadores CSS e task runners. Também mostra o roadmap do workshop com os tópicos que serão abordados como estrutura inicial de projeto, criação de controllers e listagem de posts.

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. 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. 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. F E R R A M E N TA S
4

5. F E R R A M E N TA S
• Node.js
• Gerenciamento de dependências
• Pré processadores css
• Task runners
5

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. 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. 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. M A S E N O C L I E N T- S I D E ?
• Bower
9
Bower
https://bower.io

10. B O W E R
10
bower.json

11. B O W E R
11

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. 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. E X E M P L O C O M S A S S
14

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. 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. CO N F I G U R A N D O
A M B I E N T E
17

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. 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. F I N D M Y P E T
P R O J E T O D O C U R S O

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. D ATA - B I N D I N G
• jQuery Way
43

44. D ATA - B I N D I N G
• Temos dois tipos de data-binding
44

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. N A P R ÁT I C A
58
Eu conserto coisas feitas de
madeira !!!

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. 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. N A P R ÁT I C A
61
Agora eu tenho alguem que cuida
das serras !!!

62. N A P R ÁT I C A
62
DI
Mas como eu vou
pegar o material que eu
preciso agora ?

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. 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. 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. 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. B A C K - E N D
• Armazenamento
• Push notifications
• Analytics
• Dashboard/UI gerenciamento
• Social integration
• Administração
67

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. 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. 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. 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. R E F E R E N C I A A O S P O S T S
new Firebase(FirebaseURL+ ‘/posts');
72

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. 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. 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. 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