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.

Ionic 3

679 Aufrufe

Veröffentlicht am

Palestra apresentada no DevConf 2017 em São Carlos no dia 27/05/17 sobre desenvolvimento de aplicativos híbridos com Ionic 3.

Veröffentlicht in: Technologie
  • Login to see the comments

Ionic 3

  1. 1. Loiane Groner @loiane github.com/loiane loiane.com loiane.training ionic 3
  2. 2. Loiane Groner @loiane github.com/loiane loiane.com loiane.training 10+ XP TI Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic
  3. 3. Disponível (inglês) na amazon.com.br
  4. 4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
  5. 5. Stack de tecnologias + ==
  6. 6. App híbrido Seu Código
  7. 7. App híbrido Web View Nativa (Browser) Seu Código
  8. 8. App híbrido APIs Nativas Web View Nativa (Browser) Seu Código
  9. 9. App híbrido APIs Nativas (camera, contatos, sqlite) Web View Nativa (Browser) Seu Código
  10. 10. App híbrido App Nativa: .apk, .ipa, etc APIs Nativas (camera, contatos, sqlite) Web View Nativa (Browser) Seu Código
  11. 11. 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 +
  12. 12. 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) +
  13. 13. App Ionic CSS + tags HTML do Ionic
  14. 14. App Ionic Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
  15. 15. App Ionic Acesso APIs Nativas (plugins com Apache Cordova: Ionic Native) Base do código com Angular + EcmaScript + TypeScript CSS + tags HTML do Ionic
  16. 16. 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
  17. 17. 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
  18. 18. https://ionicframework.com/docs/components
  19. 19. 3
  20. 20. Calma, calma… Não criemos pânico!
  21. 21. Ionic 1.x -> AngularJS 1.x Ionic 2.x -> Angular 2.x Ionic 3.x -> Angular 4.x Versionamento Semântico Major.Minor.Patch
  22. 22. Hands On!
  23. 23. https://nodejs.org
  24. 24. Ionic CLI Cordova CLI Angular CLI Extras + Customizações + + ==
  25. 25. npm install -g cordova ionic@latest ionic start minhaApp Instalar Ionic CLI
  26. 26. 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)
  27. 27. Show me the C de!
  28. 28. Show me the C de! https://github.com/loiane/ionic2-intro-example
  29. 29. https://github.com/loiane/ionic2-pokedex Pokédex
  30. 30. Apps instalados: arquivos .ipa e .apk Apps instalados: arquivos .ipa e .apk
  31. 31. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  32. 32. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS e Android
  33. 33. Ionic Native
  34. 34. Plugins populares do Cordova distribuídos na lib do Ionic: Camera Bluetooth SqLite Facebook Push entre outros +
  35. 35. https://github.com/loiane/ionic3-camera-example
  36. 36. Opções da Foto: base64, salvar no álbum e 90% de qualidade
  37. 37. Atribui base64 à variável imagem
  38. 38. Imagem sanitizada pelo Angular 2/4 - segurança
  39. 39. IONIC NATIVE 3
  40. 40. https://ionic3-intro-example.firebaseapp.com
  41. 41. https://ionic3-intro-example.firebaseapp.com
  42. 42. https://ionic3-intro-example.firebaseapp.com
  43. 43. 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?
  44. 44. 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!
  45. 45. Futuro…
  46. 46. https://twitter.com/maxlynch/status/839879789666308103
  47. 47. https://twitter.com/maxlynch/status/861597030132596737
  48. 48. https://twitter.com/maxlynch/status/865540354522480643
  49. 49. Ferramentas…
  50. 50. https://marketplace.visualstudio.com/items?itemName=loiane.ionic-extension-pack
  51. 51. Quer aprender mais sobre Cordova e Angular (2.x e 4.x)? /loianegroner
  52. 52. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training

×