DevConf - Apps Mobile híbridas com Ionic 3 @Loiane Groner

Primeiro Evento organizado pelo Opensanca se trata do DevConf, tivemos a participação da Loiane Groner (https://www.linkedin.com/in/loiane/) abordando sobre Apps Mobile híbridas com Ionic 3 .

Transcript

1. Loiane Groner @loiane github.com/loiane loiane.com loiane.training ionic 3
2. Loiane Groner @loiane github.com/loiane loiane.com loiane.training 10+ XP TI Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic
3. Disponível (inglês) na amazon.com.br
4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
6. Stack de tecnologias + ==
8. App híbrido Seu Código
9. App híbrido Web View Nativa (Browser) Seu Código
10. App híbrido APIs Nativas Web View Nativa (Browser) Seu Código
11. App híbrido APIs Nativas (camera, contatos, sqlite) Web View Nativa (Browser) Seu Código
12. App híbrido App Nativa: .apk, .ipa, etc APIs Nativas (camera, contatos, sqlite) Web View Nativa (Browser) Seu Código
13. Cordova: estrutura do projeto Extensão componente nativo WebView Browser nativo que abre index.html do diretório www Acesso API nativa através de plugins Ionic abstrai com código Angular: Ionic Native Empacotamento para ipa ou apk +
14. Padrão Web Components Ionic 2.x/3.x === Componentes Angular Tags ion-* Código Angular + EcmaScript + TypeScript Conceitos Angular: Components, Services, Pipes, Injeção de Dependência, Data Binding, etc Não usa o roteamento do Angular Navegação por Stack (Pilha) +
15. App Ionic CSS + tags HTML do Ionic
16. App Ionic Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
17. App Ionic Acesso APIs Nativas (plugins com Apache Cordova: Ionic Native) Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
18. App Ionic Empacotamento App Nativo: .apk, .ipa Acesso APIs Nativas (plugins com Apache Cordova: Ionic Native) Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
19. App Ionic Empacotamento App Nativo: .apk, .ipa Acesso APIs Nativas (plugins com Apache Cordova: Ionic Native) Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
20. https://ionicframework.com/docs/components
22. Calma, calma… Não criemos pânico!
23. Ionic 1.x -> AngularJS 1.x Ionic 2.x -> Angular 2.x Ionic 3.x -> Angular 4.x Versionamento Semântico Major.Minor.Patch
24. Hands On!
25. https://nodejs.org
26. Ionic CLI Cordova CLI Angular CLI Extras + Customizações + + ==
27. npm install -g cordova ionic@latest ionic start minhaApp Instalar Ionic CLI
28. COMPONENTES E PÁGINAS DIRETIVAS NAVEGAÇÃO PILHA SERVIÇOS TEMPLATE DATA BINDING INJEÇÃO DEPENDÊNCIA MÓDULOS Angular 2.x/4.x + Ionic 2.x/3.x PLUGINS CORDOVA (IONIC NATIVE)
30. Show me the C de!
31. Show me the C de! https://github.com/loiane/ionic2-intro-example
32. https://github.com/loiane/ionic2-pokedex Pokédex
34. Apps instalados: arquivos .ipa e .apk Apps instalados: arquivos .ipa e .apk
36. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
38. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
41. Ionic Native
42. Plugins populares do Cordova distribuídos na lib do Ionic: Camera Bluetooth SqLite Facebook Push entre outros +
43. https://github.com/loiane/ionic3-camera-example
46. Opções da Foto: base64, salvar no álbum e 90% de qualidade
48. Atribui base64 à variável imagem
50. Imagem sanitizada pelo Angular 2/4 - segurança
53. IONIC NATIVE 3
55. https://ionic3-intro-example.firebaseapp.com
56. https://ionic3-intro-example.firebaseapp.com
57. https://ionic3-intro-example.firebaseapp.com
58. Básico sobre Apache Cordova Para builds e uso de plugins nativos camera, geolocation, notificação push, etc Angular (2.x/4.x) + TypeScript É a base de todo o código components, services, pipes, etc EcmaScript 2015 (ES6) e Orientação a Objetos Componentes Ionic Listas, botões, modais, etc O que preciso aprender pra desenvolver com ionic?
59. Básico sobre Apache Cordova Para builds e uso de plugins nativos camera, geolocation, notificação push, etc Angular (2.x/4.x) + TypeScript É a base de todo o código components, services, pipes, etc EcmaScript 2015 (ES6) e Orientação a Objetos Componentes Ionic Listas, botões, modais, etc O que preciso aprender pra desenvolver com ionic? Tem curso grátis no meu canal do YouTube Tem curso grátis no meu canal do YouTube!
60. Futuro…
61. https://twitter.com/maxlynch/status/839879789666308103
62. https://twitter.com/maxlynch/status/861597030132596737
63. https://twitter.com/maxlynch/status/865540354522480643
64. Ferramentas…
65. https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack
66. Quer aprender mais sobre Cordova e Angular (2.x e 4.x)? /loianegroner
68. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training