O documento apresenta uma agenda para um curso sobre desenvolvimento de aplicativos híbridos. A agenda inclui tópicos como o que são aplicativos híbridos, frameworks como Phonegap, Cordova e IONIC, e como criar e testar aplicativos usando essas ferramentas.

1. Desenvolvimento de
aplicativos híbridos

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. 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. 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. 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. 1 – Aplicativos híbridos

7. Para todo problema,
existe uma ferramenta certa
para resolvê-lo

8. Como resolver a seguinte
demanda

9. Um app

10. •Tirar foto
•GPS
•Armazenamento local
•Comunicação com Backend

11. Deve suportar Android

12. Deve suportar iOS

13. Deve suportar
Windows Phone

14. Em 35 dias
deverá estar nas LOJAS!

15. Você já passou por isso?

16. E agora?

18. Como resolver?

19. Aplicativos híbridos

20. O que são aplicativos híbridos?
• HTML, CSS, JS
• Acesso aos recursos nativos
• “Casca nativa”
• Roda em uma WebView
• Agilidade no desenvolvimento

21. Como funciona por
“debaixo dos panos”?

24. 2 – O estado dos
aplicativos híbridos

25. Porque eu escolheria
desenvolver um app híbrido
e não um nativo?

26. http://slides.com/vcavalcante/porqueapphibridostdc2016#/

27. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

28. Ok, estou convencido.
Vou usar híbrido para todos
os meus apps.

29. Calma.
Lembra que existem
ferramentas para resolver
cada tipo de problema

30. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

31. Como começar com
desenvolvimento de apps
híbridos?

32. 3 – Frameworks,
frameworks e
frameworks

33. Phonegap
http://phonegap.com/

34. Cordova
https://cordova.apache.org/

35. IONIC
http://ionicframework.com/

36. TACO – Tools for Apache Cordova
http://taco.tools/

37. Mas, é OpenSource.
Posso confiar?

38. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

39. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

40. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

41. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

42. Quem está usando?

43. Feedly

44. Instagram

45. Apple App & Book Stores

46. Parece que está
funcionando para algumas
pessoas

47. 4 - Cordova

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

50. Relação com o Phonegap
2011: Adobe compra a Nitobi
Phonegap é doado para a Apache Software
Foundation
Apache Callback ... Apache Cordova

51. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development

52. Principais comandos
http://bit.ly/cordova-comandos

53. Criando um app
cordova create cordova-app

54. Conhecendo a estrutura de pastas

55. Valide layout de forma rápida
executando o app no browser
cordova platform add browser
cordova run browser

56. 5 - Emuladores

57. Google
https://developer.android.com/studio/run/emulator.html

58. Genymotion
https://www.genymotion.com/

59. Visual Studio Emulator for Android
https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx

60. Executando a aplicação no emulador
cordova platform add android
cordova run android

61. Isso tudo é muito legal,
mas...

62. Não quero um site “cru” no
dispositivo.
Quero layout e
comportamentos de um
app.

63. 6 - IONIC

64. Por quê usar?
• Construído em cima do Angular
• Facilidade em escrever layouts /
comportamentos mais próximos do nativo
• Testável

65. AngularJS
• Um dos principais frameworks de JS no momento
• Altamente testável
• Modularizado
• Angular components (1.5)
• Google, Microsoft, etc.

66. Pré-processadores de css
• Empodere seu css
• Produtividade
• Váriaveis, mixins, aninhamente, etc.

67. Criando uma aplicação com IONIC
ionic start ionic-app tabs

68. Livereloading
Ionic serve -l

69. Remote debug
Chrome://inspect

70. Controle de dependências
• Cordova save
• Cordova prepare
• Ionic save
• Ionic state

71. Splash screen e ícone
Ionic resources

72. NgCordova
http://ngcordova.com/

73. Demo: acessando a câmera
https://github.com/WennderSantos/curso-app-hibrido-demo-camera

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

75. 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? 

76. Existe uma luz
no fim do túnel

77. Crosswalk
https://crosswalk-project.org/

78. Wennder dos Santos
wennder.santos@outlook.com
@wenndersantos