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
2
• 10+ XP TI
• Java, JavaScript, Sencha, Angular,
Phonegap/Ionic
• Blog: http://loiane.com
• Cursos: http://loiane.training
• Meus livros:
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
+ ES2015/16 + 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
+ ES2015/16 + T...
O QUE É IONIC?
Empacotamento do App Nativo (ipa,
apk) com Apache Cordova
Acesso APIs Nativas (plugins com
Apache Cordova: ...
ANGULAR 2
▸WebComponents + padrões web
▸Baseado em Componentes
▸TypeScript
▸EcmaScript 2015/2016
▸Components, Services + O...
COMPONENTES
E PÁGINAS
DIRETIVAS
NAVEGAÇÃO
SERVIÇOS
TEMPLATE
DATA BINDING
INJEÇÃO
DEPENDÊNCIA
MÓDULOS
Blocos Principais
Ang...
COMPONENTE
{…}
TEMPLATE
<..>
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
COMPONENTE
{…}
TEMPLATE
<..>
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B
Binding de
Propriedades
Binding de
Eventos
COMPONENTE
{…}
TEMPLATE
<..>
DIRETIVAS
{..}
SERVIÇOS
SERVIÇO A
SERVIÇO B MÓDULO X
MÓDULO A
MÓDULO B
Binding de
Propriedade...
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 cordova ionic@latest
ionic start minhaApp --v2
CUSTOMIZAÇÃO CSS
▸ Baseado em Componente
▸ Baseado na App
▸ Baseado no Sistema
Operacional
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
Páginas são as Views do
aplicativo
Páginas são as Views do
aplicativo
Componentes são
usados para organizar o
código em blocos
menores
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...
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
DevFest BH: Ionic 2
Nächste SlideShare
Wird geladen in …5
×

DevFest BH: Ionic 2

480 Aufrufe

Veröffentlicht am

Palestra sobre Ionic 2 + Pokedex apresentada no dia 05 de Novembro em Belo Horizonte no DevFest BH 2016.

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

DevFest BH: Ionic 2

  1. 1. Loiane Groner @loiane github.com/loiane loiane.com loiane.training 2
  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. IONIC 1 ▸ Criado em 2013
  5. 5. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile
  6. 6. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile ▸ Fornece componentes e diretivas que parecem nativos
  7. 7. IONIC 1 ▸ Criado em 2013 ▸ Bootstrap para apps mobile ▸ Fornece componentes e diretivas que parecem nativos ▸ Organização de código com Angular 1
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. IONIC 2 ▸Reescrita do Ionic 1
  13. 13. IONIC 2 ▸Reescrita do Ionic 1 ▸Organização do código em Angular 2
  14. 14. IONIC 2 ▸Reescrita do Ionic 1 ▸Organização do código em Angular 2 ▸Mesmos componentes do Ionic 1
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. STACK / DEPENDÊNCIAS
  19. 19. O QUE É IONIC? CSS + tags HTML do Ionic
  20. 20. O QUE É IONIC? Base do código com Angular 2 + ES2015/16 + TypeScript CSS + tags HTML do Ionic
  21. 21. O QUE É IONIC? Acesso APIs Nativas (plugins com Apache Cordova: Ionic Native) Base do código com Angular 2 + ES2015/16 + TypeScript CSS + tags HTML do Ionic
  22. 22. 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 + ES2015/16 + TypeScript CSS + tags HTML do Ionic
  23. 23. ANGULAR 2 ▸WebComponents + padrões web ▸Baseado em Componentes ▸TypeScript ▸EcmaScript 2015/2016 ▸Components, Services + Observables, Pipes, Directives
  24. 24. COMPONENTES E PÁGINAS DIRETIVAS NAVEGAÇÃO SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA MÓDULOS Blocos Principais Angular 2 + Ionic PLUGINS CORDOVA (IONIC NATIVE)
  25. 25. COMPONENTE {…} TEMPLATE <..>
  26. 26. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades
  27. 27. COMPONENTE {…} TEMPLATE <..> Binding de Propriedades Binding de Eventos
  28. 28. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} Binding de Propriedades Binding de Eventos
  29. 29. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Binding de Propriedades Binding de Eventos
  30. 30. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B MÓDULO X MÓDULO A MÓDULO B Binding de Propriedades Binding de Eventos
  31. 31. IONIC 2 ▸ Dependência do Angular2 + TypeScript
  32. 32. IONIC 2 ▸ Dependência do Angular2 + TypeScript ▸ ES6 (ES2015) / ES7 (ES2016)
  33. 33. IONIC 2 ▸ Dependência do Angular2 + TypeScript ▸ ES6 (ES2015) / ES7 (ES2016) ▸ Ionic Native entra no lugar no ngCordova
  34. 34. 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
  35. 35. 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)
  36. 36. COMPONENTES ▸ Action Sheets ▸ Alerts ▸ Buttons ▸ Cards ▸ Icons ▸ Lists ▸ Search Bar ▸ Tabs ▸ Alert ▸ Modal ▸ IonRefresher ▸ Keyboard ▸ entre outros
  37. 37. https://nodejs.org
  38. 38. INSTALAÇÃO E USO npm install -g cordova ionic@latest ionic start minhaApp --v2
  39. 39. CUSTOMIZAÇÃO CSS ▸ Baseado em Componente ▸ Baseado na App ▸ Baseado no Sistema Operacional
  40. 40. Decorator pra indicar que é um componente
  41. 41. Decorator pra indicar que é um componente Seletor: tag HTML que será usada para usar esse componente
  42. 42. 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
  43. 43. Imports das classes usadas
  44. 44. Construtor com DI: Injeção de Dependência
  45. 45. h2 | p: tags HTML "normais"
  46. 46. h2 | p: tags HTML "normais" ion-componente tags HTML do Ionic 2
  47. 47. Sistema de módulos do Angular 2
  48. 48. E dá pra fazer app real?
  49. 49. na prática com Pokédex
  50. 50. Apps instalados: arquivos .ipa e .apk Apps instalados: arquivos .ipa e .apk
  51. 51. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  52. 52. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  53. 53. PokemonList
  54. 54. PokemonList PokemonListItem
  55. 55. PokemonList
  56. 56. PokemonList Cada Item da lista - loop
  57. 57. Ao clicar/tap abre página de detalhes
  58. 58. Ao clicar/tap abre página de detalhes E passamos o objeto pokemon para o detalhe
  59. 59. Se existir tipos de Pokemon - array tem mais de 1 elemento
  60. 60. Loop for nos tipos do Pokemon
  61. 61. E aplicamos CSS pra ficar bonito!
  62. 62. Se o campo de busca estiver vazio, retorna a lista de pokemons
  63. 63. Senão, filtramos os pokemons que tem a string de busca no nome
  64. 64. Criamos um serviço que irá fornecer os dados (provider)
  65. 65. Criamos um serviço que irá fornecer os dados (provider)
  66. 66. No Componente injetamos o serviço no construtor
  67. 67. Programação reativa: fluxos: .map .do .catch
  68. 68. Programação reativa: fluxos: .map .do .catch http://reactivex.io
  69. 69. Também pode cachear a informação e retornar Observable de variável
  70. 70. Fazemos a “inscrição" no Observable pra receber o resultado
  71. 71. Botão “Voltar" é adicionado automaticamente
  72. 72. Botão “Voltar" é adicionado automaticamente
  73. 73. Botão “Voltar" é adicionado automaticamente Stack Pokemo nList Stack PokemonLi st Push PokemonDetail Pilha PokemonList Pop Botão Voltar (Back) (empilha) (desempilha)
  74. 74. Cada seção dos detalhes é um componente auxiliar pra ajudar na organização do projeto
  75. 75. Páginas são as Views do aplicativo
  76. 76. Páginas são as Views do aplicativo Componentes são usados para organizar o código em blocos menores
  77. 77. ionic platform add ios
  78. 78. Projeto do Xcode (IDE do iOS)
  79. 79. Nosso código HTML + JS + CSS Projeto do Xcode (IDE do iOS)
  80. 80. https://github.com/loiane/ionic2-pokedex Pokédex
  81. 81. PRA FINALIZAR…
  82. 82. IONIC NATIVE ▸ Plugins populares do Cordova distribuídos na lib do Ionic: ▸ Camera ▸ Bluetooth ▸ SqLite ▸ Facebook ▸ Push ▸ entre outros
  83. 83. Imagem sanitizada pelo Angular 2 - segurança
  84. 84. Opções da Foto: base64, salvar no álbum e 90% de qualidade
  85. 85. Atribui base64 à variável imagem
  86. 86. 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
  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 ▸ Angular 2 + TypeScript ▸ É a base de todo o código ▸ components, services, pipes, etc ▸ EcmaScript 2015/2016 também
  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 ▸ EcmaScript 2015/2016 também ▸ Componentes Ionic ▸ Listas, botões, modais, 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 ▸ EcmaScript 2015/2016 também ▸ 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!
  90. 90. https://ionicframework.com/docs/v2
  91. 91. https://github.com/IonicBrazil/ionic2-docs
  92. 92. Quer aprender mais sobre Cordova e Angular 2? /loianegroner
  93. 93. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×