Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 .

B2519015997dff04abe2568ebb2cf729?s=128

Opensanca

May 27, 2017
Tweet

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/

  5. None
  6. Stack de tecnologias + ==

  7. None
  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

  21. 3

  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)
  29. None
  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

  33. None
  34. Apps instalados: arquivos .ipa e .apk Apps instalados: arquivos .ipa

    e .apk
  35. None
  36. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS

    e Android
  37. None
  38. Apps instalados: arquivos .ipa e .apk Diferenças visuais entre iOS

    e Android
  39. None
  40. None
  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

  44. None
  45. None
  46. Opções da Foto: base64, salvar no álbum e 90% de

    qualidade
  47. None
  48. Atribui base64 à variável imagem

  49. None
  50. Imagem sanitizada pelo Angular 2/4 - segurança

  51. None
  52. None
  53. IONIC NATIVE 3

  54. None
  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
  67. None
  68. http://loiane.com facebook.com/loianegroner twitter.com/loiane https://github.com/loiane youtube.com/loianegroner http://loiane.training