Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
• 10+ XP TI
• Java, JavaScript, Sencha, Angular,
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training
• Meus livros:
PRECISO DE UM APLICATIVO
Objective-C
Swift
Objective-C
Swift
Java
API Android
Objective-C
Swift
.NET
API WP
Java
API Android
Aplicativo
Híbrido
Seu Código
O QUE É UM APP HÍBRIDO?
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?
APIs Nativas
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?
App Nativa: .apk, .ipa, etc
APIs Nativas
Web View Nativa (Browser)
Seu Código
O QUE É UM APP HÍBRIDO?
IONIC 1
▸ Criado em 2013
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização ...
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização ...
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização ...
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização ...
IONIC 1
▸ Criado em 2013
▸ Bootstrap para apps mobile
▸ Fornece componentes e diretivas que parecem nativos
▸ Organização ...
IONIC 2
▸Reescrita do Ionic 1
IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima...
IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima...
IONIC 2
▸Reescrita do Ionic 1
▸Organização do código em Angular 2
▸Mesmos componentes do Ionic 1
▸Experiência mais próxima...
STACK / DEPENDÊNCIAS
O QUE É IONIC?
CSS + tags HTML do Ionic
O QUE É IONIC?
Base do código com Angular 2 +
TypeScript
CSS + tags HTML do Ionic
O QUE É IONIC?
Acesso APIs Nativas (plugins com
Apache Cordova: Ionic Native)
Base do código com Angular 2 +
TypeScript
CS...
O QUE É IONIC?
Empacotamento do App Nativo (ipa, apk)
com Apache Cordova
Acesso APIs Nativas (plugins com
Apache Cordova: ...
ANGULAR 2
▸WebComponents
▸Baseado em Componentes
▸TypeScript + Decorators
▸Components, Services + Observables,
Pipes, Dire...
IONIC 2
▸ Dependência do Angular2 + TypeScript
IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova
IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova
▸ ...
IONIC 2
▸ Dependência do Angular2 + TypeScript
▸ ES6 (ES2015) / ES7 (ES2016)
▸ Ionic Native entra no lugar no ngCordova
▸ ...
COMPONENTES
▸ Action
Sheets
▸ Alerts
▸ Buttons
▸ Cards
▸ Icons
▸ Lists
▸ Search Bar
▸ Tabs
▸ Alert
▸ Modal
▸ IonRefresher
...
https://nodejs.org
INSTALAÇÃO E USO
npm install -g ionic@latest
ionic start minhaApp --v2
CUSTOMIZAÇÃO CSS
▸ Baseado em Componente
▸ Baseado na App
▸ Baseado no Sistema
Operacional
DEMO
Decorator pra
indicar que é um
componente
Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar esse
componente
Decorator pra
indicar que é um
componente
Seletor:
tag HTML que será
usada para usar esse
componente
Arquivo que
contém o ...
Imports das classes
usadas
Construtor
com DI: Injeção de
Dependência
h2 | p: tags HTML
"normais"
h2 | p: tags HTML
"normais"
ion-componente
tags HTML do Ionic 2
Sistema de módulos do
Angular 2
E dá pra fazer app real?
na prática com Pokédex
Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:
arquivos .ipa e .apk
Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android
Apps
instalados:
arquivos .ipa e .apk
Diferenças visuais
entre iOS e Android
PokemonList
PokemonList
PokemonListItem
PokemonList
PokemonList
Cada Item da
lista - loop
Ao clicar/tap
abre página de
detalhes
Ao clicar/tap
abre página de
detalhes
E passamos o
objeto pokemon
para o detalhe
Se existir tipos de
Pokemon - array tem
mais de 1 elemento
Loop for nos tipos do
Pokemon
E aplicamos CSS pra
ficar bonito!
Se o campo
de busca estiver vazio,
retorna a lista de
pokemons
Senão, filtramos os
pokemons que tem a string
de busca no nome
Criamos um serviço que irá
fornecer os dados (provider)
Criamos um serviço que irá
fornecer os dados (provider)
No Componente injetamos o
serviço no construtor
Programação reativa: fluxos:
.map
.do
.catch
Programação reativa: fluxos:
.map
.do
.catch
http://reactivex.io
Também pode cachear a
informação e retornar
Observable de variável
Fazemos a “inscrição" no
Observable pra receber o
resultado
Botão “Voltar" é
adicionado automaticamente
Botão “Voltar" é
adicionado automaticamente
Botão “Voltar" é
adicionado automaticamente
Stack
Pokemo
nList
Stack
PokemonLi
st
Push
PokemonDetail
Pilha
PokemonList
Pop...
Cada seção dos
detalhes é um componente
auxiliar pra ajudar na
organização do projeto
ionic platform add ios
Projeto do Xcode
(IDE do iOS)
Nosso código
HTML + JS + CSS
Projeto do Xcode
(IDE do iOS)
https://github.com/loiane/ionic2-pokedex
Pokédex
PRA FINALIZAR…
IONIC NATIVE
▸ Plugins populares do Cordova distribuídos na lib do
Ionic:
▸ Camera
▸ Bluetooth
▸ SqLite
▸ Facebook
▸ Push
...
Imagem
sanitizada pelo
Angular 2 -
segurança
Opções da Foto: base64,
salvar no álbum e 90% de
qualidade
Atribui base64 à
variável imagem
O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ c...
O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ c...
O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ c...
O QUE PRECISO APRENDER PRA DESENVOLVER COM IONIC?
▸ Básico sobre Apache Cordova
▸ Para builds e uso de plugins nativos
▸ c...
https://ionicframework.com/docs/v2
https://github.com/IonicBrazil/ionic2-docs
Quer aprender mais sobre Cordova e
Angular 2?
/loianegroner
http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://l...
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Ionic 2 na pratica!
Nächste SlideShare
Wird geladen in …5
×

Ionic 2 na pratica!

441 Aufrufe

Veröffentlicht am

Palestra sobre Ionic Framework v2 na prática com Pokedex.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Ionic 2 na pratica!

  1. 1. Loiane Groner @loiane github.com/loiane loiane.com loiane.training
  2. 2. • 10+ XP TI • Java, JavaScript, Sencha, Angular, Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
  3. 3. • Meus livros:
  4. 4. PRECISO DE UM APLICATIVO
  5. 5. Objective-C Swift
  6. 6. Objective-C Swift Java API Android
  7. 7. Objective-C Swift .NET API WP Java API Android
  8. 8. Aplicativo Híbrido
  9. 9. Seu Código O QUE É UM APP HÍBRIDO?
  10. 10. Web View Nativa (Browser) Seu Código O QUE É UM APP HÍBRIDO?
  11. 11. APIs Nativas Web View Nativa (Browser) Seu Código O QUE É UM APP HÍBRIDO?
  12. 12. App Nativa: .apk, .ipa, etc APIs Nativas Web View Nativa (Browser) Seu Código O QUE É UM APP HÍBRIDO?
  13. 13. IONIC 1 ▸ Criado em 2013
  14. 14. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile
  15. 15. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile ▸ Fornece componentes e diretivas que parecem nativos
  16. 16. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile ▸ Fornece componentes e diretivas que parecem nativos ▸ Organização de código com Angular 1
  17. 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 ▸ Projeto base Cordova (Phonegap): acesso nativo através de plugins e geração de executável para app stores
  18. 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 ▸ Mais de 1 milhão de apps publicadas
  19. 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 ▸ Suporte para iOS e Android
  20. 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 ▸ Suporte para Windows Phone 8 via template especial Visual Studio
  21. 21. IONIC 2 ▸Reescrita do Ionic 1
  22. 22. IONIC 2 ▸Reescrita do Ionic 1 ▸Organização do código em Angular 2
  23. 23. IONIC 2 ▸Reescrita do Ionic 1 ▸Organização do código em Angular 2 ▸Mesmos componentes do Ionic 1
  24. 24. 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
  25. 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 ▸Melhoria de performance
  26. 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 ▸Suporte para iOS, Android e Windows Phone 10
  27. 27. STACK / DEPENDÊNCIAS
  28. 28. O QUE É IONIC? CSS + tags HTML do Ionic
  29. 29. O QUE É IONIC? Base do código com Angular 2 + TypeScript CSS + tags HTML do Ionic
  30. 30. 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
  31. 31. 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
  32. 32. ANGULAR 2 ▸WebComponents ▸Baseado em Componentes ▸TypeScript + Decorators ▸Components, Services + Observables, Pipes, Directives ▸Usa imports do ES2015 (ES6)
  33. 33. IONIC 2 ▸ Dependência do Angular2 + TypeScript
  34. 34. IONIC 2 ▸ Dependência do Angular2 + TypeScript ▸ ES6 (ES2015) / ES7 (ES2016)
  35. 35. IONIC 2 ▸ Dependência do Angular2 + TypeScript ▸ ES6 (ES2015) / ES7 (ES2016) ▸ Ionic Native entra no lugar no ngCordova
  36. 36. 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
  37. 37. 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)
  38. 38. COMPONENTES ▸ Action Sheets ▸ Alerts ▸ Buttons ▸ Cards ▸ Icons ▸ Lists ▸ Search Bar ▸ Tabs ▸ Alert ▸ Modal ▸ IonRefresher ▸ Keyboard ▸ entre outros
  39. 39. https://nodejs.org
  40. 40. INSTALAÇÃO E USO npm install -g ionic@latest ionic start minhaApp --v2
  41. 41. CUSTOMIZAÇÃO CSS ▸ Baseado em Componente ▸ Baseado na App ▸ Baseado no Sistema Operacional
  42. 42. DEMO
  43. 43. Decorator pra indicar que é um componente
  44. 44. Decorator pra indicar que é um componente Seletor: tag HTML que será usada para usar esse componente
  45. 45. 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
  46. 46. Imports das classes usadas
  47. 47. Construtor com DI: Injeção de Dependência
  48. 48. h2 | p: tags HTML "normais"
  49. 49. h2 | p: tags HTML "normais" ion-componente tags HTML do Ionic 2
  50. 50. Sistema de módulos do Angular 2
  51. 51. E dá pra fazer app real?
  52. 52. na prática com Pokédex
  53. 53. Apps instalados: arquivos .ipa e .apk Apps instalados: arquivos .ipa e .apk
  54. 54. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  55. 55. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  56. 56. PokemonList
  57. 57. PokemonList PokemonListItem
  58. 58. PokemonList
  59. 59. PokemonList Cada Item da lista - loop
  60. 60. Ao clicar/tap abre página de detalhes
  61. 61. Ao clicar/tap abre página de detalhes E passamos o objeto pokemon para o detalhe
  62. 62. Se existir tipos de Pokemon - array tem mais de 1 elemento
  63. 63. Loop for nos tipos do Pokemon
  64. 64. E aplicamos CSS pra ficar bonito!
  65. 65. Se o campo de busca estiver vazio, retorna a lista de pokemons
  66. 66. Senão, filtramos os pokemons que tem a string de busca no nome
  67. 67. Criamos um serviço que irá fornecer os dados (provider)
  68. 68. Criamos um serviço que irá fornecer os dados (provider)
  69. 69. No Componente injetamos o serviço no construtor
  70. 70. Programação reativa: fluxos: .map .do .catch
  71. 71. Programação reativa: fluxos: .map .do .catch http://reactivex.io
  72. 72. Também pode cachear a informação e retornar Observable de variável
  73. 73. Fazemos a “inscrição" no Observable pra receber o resultado
  74. 74. Botão “Voltar" é adicionado automaticamente
  75. 75. Botão “Voltar" é adicionado automaticamente
  76. 76. Botão “Voltar" é adicionado automaticamente Stack Pokemo nList Stack PokemonLi st Push PokemonDetail Pilha PokemonList Pop Botão Voltar (Back) (empilha) (desempilha)
  77. 77. Cada seção dos detalhes é um componente auxiliar pra ajudar na organização do projeto
  78. 78. ionic platform add ios
  79. 79. Projeto do Xcode (IDE do iOS)
  80. 80. Nosso código HTML + JS + CSS Projeto do Xcode (IDE do iOS)
  81. 81. https://github.com/loiane/ionic2-pokedex Pokédex
  82. 82. PRA FINALIZAR…
  83. 83. IONIC NATIVE ▸ Plugins populares do Cordova distribuídos na lib do Ionic: ▸ Camera ▸ Bluetooth ▸ SqLite ▸ Facebook ▸ Push ▸ entre outros
  84. 84. Imagem sanitizada pelo Angular 2 - segurança
  85. 85. Opções da Foto: base64, salvar no álbum e 90% de qualidade
  86. 86. Atribui base64 à variável imagem
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. 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!
  91. 91. https://ionicframework.com/docs/v2
  92. 92. https://github.com/IonicBrazil/ionic2-docs
  93. 93. Quer aprender mais sobre Cordova e Angular 2? /loianegroner
  94. 94. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×