Dev híbrido Ionic
•
1 gostou•473 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Dev híbrido Ionic
Semelhante a Dev híbrido Ionic (20)
Dev híbrido Ionic
- 2. • 10+ XP TI • Java, JavaScript, Sencha, Angular, Phonegap/Ionic • Blog: http://loiane.com • Cursos: http://loiane.training
- 4. PRECISO DE UM APLICATIVO
- 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
- 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
- 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
- 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
- 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
- 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)
- 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!
- 135. Quer aprender mais sobre Cordova e Angular 2? /loianegroner