Curso: Desenvolvimento de aplicativos híbridos (dia 1)

312 visualizações

Publicada em

Slides usados do primeiro dia do curso: Desenvolvimento de aplicativos híbridos.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Curso: Desenvolvimento de aplicativos híbridos (dia 1)

  1. 1. Desenvolvimento de aplicativos híbridos
  2. 2. Wennder dos Santos • Software developer • Microsoft MVP • Escreve no blog http://wenndersantos.net • Publica vídeos em https://youtube.com/wenndersantos • Slides em http://slideshare.net/wenndersantos • Github https://github.com/wenndersantos • @wenndersantos
  3. 3. Agenda dia 1 1. Aplicativos híbridos • O que são? Como funcionam? • Web View • Plugins 2. O estado dos aplicativos híbridos • Por quê apps híbridos? • Devo usar esse tipo de desenvolvimento para tudo? https://github.com/WennderSantos/curso-apps-hibridos
  4. 4. Agenda dia 1 3. Frameworks, frameworks e frameworks • Phonegap • Cordova • TACO • IONIC 4. Cordova • Relação com o Phonegap • Principais comandos • Criando um app • Conhecendo a estrutura de pastas • Executar o app no browser? Sim, valide layout de forma rápida https://github.com/WennderSantos/curso-apps-hibridos
  5. 5. Agenda dia 1 5. Emuladores • Google • Genymotion • Visual Studio Emulator For Android • Executando uma aplicação no emulador 6. IONIC • Por quê usar? • AngularJS • Pré-processadores de css • Criando uma aplicação https://github.com/WennderSantos/curso-apps-hibridos
  6. 6. 1 – Aplicativos híbridos
  7. 7. Para todo problema, existe uma ferramenta certa para resolvê-lo
  8. 8. Como resolver a seguinte demanda
  9. 9. Um app
  10. 10. •Tirar foto •GPS •Armazenamento local •Comunicação com Backend
  11. 11. Deve suportar Android
  12. 12. Deve suportar iOS
  13. 13. Deve suportar Windows Phone
  14. 14. Em 35 dias deverá estar nas LOJAS!
  15. 15. Você já passou por isso?
  16. 16. E agora?
  17. 17. Como resolver?
  18. 18. Aplicativos híbridos
  19. 19. O que são aplicativos híbridos? • HTML, CSS, JS • Acesso aos recursos nativos • “Casca nativa” • Roda em uma WebView • Agilidade no desenvolvimento
  20. 20. Como funciona por “debaixo dos panos”?
  21. 21. 2 – O estado dos aplicativos híbridos
  22. 22. Porque eu escolheria desenvolver um app híbrido e não um nativo?
  23. 23. http://slides.com/vcavalcante/porqueapphibridostdc2016#/
  24. 24. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  25. 25. Ok, estou convencido. Vou usar híbrido para todos os meus apps.
  26. 26. Calma. Lembra que existem ferramentas para resolver cada tipo de problema
  27. 27. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  28. 28. Como começar com desenvolvimento de apps híbridos?
  29. 29. 3 – Frameworks, frameworks e frameworks
  30. 30. Phonegap http://phonegap.com/
  31. 31. Cordova https://cordova.apache.org/
  32. 32. IONIC http://ionicframework.com/
  33. 33. TACO – Tools for Apache Cordova http://taco.tools/
  34. 34. Mas, é OpenSource. Posso confiar?
  35. 35. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  36. 36. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  37. 37. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  38. 38. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  39. 39. Quem está usando?
  40. 40. Feedly
  41. 41. Instagram
  42. 42. Apple App & Book Stores
  43. 43. Parece que está funcionando para algumas pessoas
  44. 44. 4 - Cordova
  45. 45. Relação com o Phonegap 2008: Nitobi Software apresentou o phonegap Suporte para iPhone, Android e BB4 2009 ... 2011 Suporte para Symbian, WebOS e WP7
  46. 46. Relação com o Phonegap 2011: Adobe compra a Nitobi Phonegap é doado para a Apache Software Foundation Apache Callback ... Apache Cordova
  47. 47. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
  48. 48. Principais comandos http://bit.ly/cordova-comandos
  49. 49. Criando um app cordova create cordova-app
  50. 50. Conhecendo a estrutura de pastas
  51. 51. Valide layout de forma rápida executando o app no browser cordova platform add browser cordova run browser
  52. 52. 5 - Emuladores
  53. 53. Google https://developer.android.com/studio/run/emulator.html
  54. 54. Genymotion https://www.genymotion.com/
  55. 55. Visual Studio Emulator for Android https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx
  56. 56. Executando a aplicação no emulador cordova platform add android cordova run android
  57. 57. Isso tudo é muito legal, mas...
  58. 58. Não quero um site “cru” no dispositivo. Quero layout e comportamentos de um app.
  59. 59. 6 - IONIC
  60. 60. Por quê usar? • Construído em cima do Angular • Facilidade em escrever layouts / comportamentos mais próximos do nativo • Testável
  61. 61. AngularJS • Um dos principais frameworks de JS no momento • Altamente testável • Modularizado • Angular components (1.5) • Google, Microsoft, etc.
  62. 62. Pré-processadores de css • Empodere seu css • Produtividade • Váriaveis, mixins, aninhamente, etc.
  63. 63. Criando uma aplicação com IONIC ionic start ionic-app tabs
  64. 64. Livereloading Ionic serve -l
  65. 65. Remote debug Chrome://inspect
  66. 66. Controle de dependências • Cordova save • Cordova prepare • Ionic save • Ionic state
  67. 67. Splash screen e ícone Ionic resources
  68. 68. NgCordova http://ngcordova.com/
  69. 69. Demo: acessando a câmera https://github.com/WennderSantos/curso-app-hibrido-demo-camera
  70. 70. Três ferramentas Quem realmente faz o quê? Cordova IONIC Angular • Framework javascript que empodera o html através de diretivas. • Facilita a organização e estruturação do código. • Ferramenta de linha de comando que extende as funcionalidades do cordova. • Biblioteca css/javscript que permite aplicar layouts e comportamentos mais próximos de aplicações nativas de forma simples • Ferramenta de linha de comando que permite o desenvolvimento de apps para dispositivos móveis usando html, css e javascript.
  71. 71. O problema das fabricantes • Cada uma quer fazer sua implementação de browser • As implementações podem apresentar comportamentos diferentes • Quantas fabricantes de smartphones android existem? 
  72. 72. Existe uma luz no fim do túnel
  73. 73. Crosswalk https://crosswalk-project.org/
  74. 74. Wennder dos Santos wennder.santos@outlook.com @wenndersantos

×