Este documento fornece informações sobre Ionic Framework e seu uso para desenvolvimento de aplicativos híbridos. Em três frases: Ionic é um framework para construção de aplicativos híbridos usando HTML, CSS e Angular/JavaScript, permitindo acesso a recursos nativos via plugins. Ele fornece componentes para criação de interfaces semelhantes aos aplicativos nativos. Ionic depende de Angular, Cordova e outros frameworks para funcionamento e geração de aplicativos para dispositivos móveis.

1. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training

2. • 10+ XP TI
• Java, JavaScript, Sencha, Angular,
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training

3. • Meus livros:

4. PRECISO DE UM APLICATIVO

6. Objective-C
Swift

7. Objective-C
Swift
Java
API Android

8. Objective-C
Swift
.NET
API WP
Java
API Android

9. Aplicativo
Híbrido

10. Seu Código
O QUE É UM APP HÍBRIDO?

11. Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?

12. APIs Nativas
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?

13. App Nativa: .apk, .ipa, etc
APIs Nativas
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?

14. IONIC 1
▸ Criado em 2013

15. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile

16. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos

17. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização de código com Angular 1

18. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização de código com Angular 1
▸ Projeto base Cordova (Phonegap): acesso nativo através de
plugins e geração de executável para app stores

19. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização de código com Angular 1
▸ Projeto base Cordova (Phonegap): acesso nativo através de
plugins e geração de executável para app stores
▸ Mais de 1 milhão de apps publicadas

20. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização de código com Angular 1
▸ Projeto base Cordova (Phonegap): acesso nativo através de
plugins e geração de executável para app stores
▸ Mais de 1 milhão de apps publicadas
▸ Suporte para iOS e Android

21. IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização de código com Angular 1
▸ Projeto base Cordova (Phonegap): acesso nativo através de
plugins e geração de executável para app stores
▸ Mais de 1 milhão de apps publicadas
▸ Suporte para iOS e Android
▸ Suporte para Windows Phone 8 via template especial Visual
Studio

22. IONIC 2
▸Reescrita do Ionic 1

23. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2

24. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1

25. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima do nativo

26. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima do nativo
▸Melhoria de performance

27. IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima do nativo
▸Melhoria de performance
▸Suporte para iOS, Android e Windows
Phone 10

29. STACK / DEPENDÊNCIAS

30. O QUE É IONIC?
CSS + tags HTML do Ionic

31. O QUE É IONIC?
Base do código com Angular 2 +
TypeScript
CSS + tags HTML do Ionic

32. O QUE É IONIC?
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular 2 +
TypeScript
CSS + tags HTML do Ionic

33. O QUE É IONIC?
Empacotamento do App Nativo (ipa, apk)
com Apache Cordova
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular 2 +
TypeScript
CSS + tags HTML do Ionic

34. ANGULAR 2
▸WebComponents
▸Baseado em Componentes
▸TypeScript + Decorators
▸Components, Services + Observables,
Pipes, Directives
▸Usa imports do ES2015 (ES6)

36. IONIC 2
▸ Dependência do Angular2 + TypeScript

37. IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)

38. IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova

39. IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova
▸ Não usa o roteamento do Angular 2

40. IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova
▸ Não usa o roteamento do Angular 2
▸ Navegação por stack (pilha)

41. COMPONENTES
▸ Action
Sheets
▸ Alerts
▸ Buttons
▸ Cards
▸ Icons
▸ Lists
▸ Search Bar
▸ Tabs
▸ Alert
▸ Modal
▸ IonRefresher
▸ Keyboard
▸ entre outros

42. https://nodejs.org

43. INSTALAÇÃO E USO
npm install -g ionic@latest
ionic start minhaApp --v2

46. CUSTOMIZAÇÃO CSS
▸ Baseado em Componente
▸ Baseado na App
▸ Baseado no Sistema
Operacional

48. DEMO

52. Decorator pra
indicar que é um
componente

53. Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar esse
componente

54. Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar esse
componente
Arquivo que
contém o template:
código HTML

55. Imports das classes
usadas

56. Construtor
com DI: Injeção de
Dependência

58. h2 | p: tags HTML
"normais"

59. h2 | p: tags HTML
"normais"
ion-componente
tags HTML do Ionic 2

60. Sistema de módulos do
Angular 2

61. E dá pra fazer app real?

64. na prática com Pokédex

66. Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:
arquivos .ipa e .apk

68. Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android

70. Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android

74. PokemonList

75. PokemonList
PokemonListItem

76. PokemonList

77. PokemonList
Cada Item da
lista - loop

79. Ao clicar/tap
abre página de
detalhes

80. Ao clicar/tap
abre página de
detalhes
E passamos o
objeto pokemon
para o detalhe

83. Se existir tipos de
Pokemon - array tem
mais de 1 elemento

84. Loop for nos tipos do
Pokemon

85. E aplicamos CSS pra
ficar bonito!

87. Se o campo
de busca estiver vazio,
retorna a lista de
pokemons

88. Senão, filtramos os
pokemons que tem a string
de busca no nome

92. Criamos um serviço que irá
fornecer os dados (provider)

93. Criamos um serviço que irá
fornecer os dados (provider)

95. No Componente injetamos o
serviço no construtor

97. Programação reativa: fluxos:
.map
.do
.catch

98. Programação reativa: fluxos:
.map
.do
.catch
http://reactivex.io

100. Também pode cachear a
informação e retornar
Observable de variável

102. Fazemos a “inscrição" no
Observable pra receber o
resultado

104. Botão “Voltar" é
adicionado automaticamente

105. Botão “Voltar" é
adicionado automaticamente

106. Botão “Voltar" é
adicionado automaticamente
Stack
Pokemo
nList
Stack
PokemonLi
st
Push
PokemonDetail
Pilha
PokemonList
Pop
Botão Voltar
(Back)
(empilha)
(desempilha)

111. Cada seção dos
detalhes é um componente
auxiliar pra ajudar na
organização do projeto

113. ionic platform add ios

115. Projeto do Xcode
(IDE do iOS)

116. Nosso código
HTML + JS + CSS
Projeto do Xcode
(IDE do iOS)

118. https://github.com/loiane/ionic2-pokedex
Pokédex

119. PRA FINALIZAR…

120. IONIC NATIVE
▸ Plugins populares do Cordova distribuídos na lib do
Ionic:
▸ Camera
▸ Bluetooth
▸ SqLite
▸ Facebook
▸ Push
▸ entre outros

123. Imagem
sanitizada pelo
Angular 2 -
segurança

125. Opções da Foto: base64,
salvar no álbum e 90% de
qualidade

127. Atribui base64 à
variável imagem

129. O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notificação push, etc

130. O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notificação push, etc
▸ Angular 2 + TypeScript
▸ É a base de todo o código
▸ components, services, pipes, etc

131. O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notificação push, etc
▸ Angular 2 + TypeScript
▸ É a base de todo o código
▸ components, services, pipes, etc
▸ Componentes Ionic
▸ Listas, botões, modais, etc

132. O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ camera, geolocation, notificação push, etc
▸ Angular 2 + TypeScript
▸ É a base de todo o código
▸ components, services, pipes, etc
▸ Componentes Ionic
▸ Listas, botões, modais, etc
Tem curso
grátis no meu canal
do YouTube
Tem curso
grátis no meu canal
do YouTube!

133. https://ionicframework.com/docs/v2

134. https://github.com/IonicBrazil/ionic2-docs

135. Quer aprender mais sobre Cordova e
Angular 2?
/loianegroner

137. http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training