Embed Size (px)
Citation preview
I O N I C W O R K S H O PD 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
Alvaro ViebrantzAnalista de TI - Sefaz-MTCTO na Startup ProcurixFounder na Startup DeliverixCiência da Computação - UFMT
Cuiabá, MT, Brasil
alvarowolfx
@alvinhuuu
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
F E R R A M E N TA S
4
F E R R A M E N TA S
• Node.js
• Gerenciamento de dependências
• Pré processadores css
• Task runners
5
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
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
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
B O W E R
10
bower.json
B O W E R
11
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
VÁ R I A S L I N G U A G E N S
13
E extensõeshttp://sass-lang.com/ http://lesscss.org/ https://learnboost.github.io/stylus/
http://bourbon.io/
E X E M P L O C O M S A S S
14
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
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
C O N F I G U R A N D O A M B I E N T E
17
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
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
F I N D M Y P E TP R O J E T O D O C U R S O
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
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.
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
P R I M E I R O C O N T R O L L E RM Ã O N A M A S S A
24
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
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
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)
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){}
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){}
D I R E T I VA NG-REPEAT
• 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
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)
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
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
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
D I R E T I VA NG-CL ICK
• 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
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 ?
C R I A R N O V O P O S TM O D A L E T E M P L A T E E X T E R N O
37
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
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
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
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
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
D ATA - B I N D I N G
• jQuery Way
43
D ATA - B I N D I N G
• Temos dois tipos de data-binding
44
D I R E T I VA NG-MODEL
• Cria um bind entre um componente de entrada na view para o controller
45
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
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
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
P R I M E I R A L I B E X T E R N AM A S C A R A D E T E L E F O N E
49
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
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
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
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 ?
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
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 reaproveitadopor sua aplicação
55
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
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
N A P R ÁT I C A
58
Eu conserto coisas feitas de madeira !!!
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
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
N A P R ÁT I C A
61
Agora eu tenho alguem que cuida das serras !!!
N A P R ÁT I C A
62
DI
Mas como eu vou pegar o material que eu
preciso agora ?
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
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
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
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
B A C K - E N D
• Armazenamento
• Push notifications
• Analytics
• Dashboard/UI gerenciamento
• Social integration
• Administração
67
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
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
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
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
R E F E R E N C I A A O S P O S T S
new Firebase(FirebaseURL+ ‘/posts');
72
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
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
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
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
![[Cordova] Empezando con Ionic](https://img.pdfslide.tips/doc/110x75/5881a2c31a28ab1a398b5a43/cordova-empezando-con-ionic.jpg)
