curso: desenvolvimento de aplicativos híbridos (dia 1)
TRANSCRIPT
![Page 2: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/2.jpg)
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
![Page 3: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/3.jpg)
Agenda dia 11. 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
![Page 4: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/4.jpg)
Agenda dia 13. 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
![Page 5: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/5.jpg)
Agenda dia 15. 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
![Page 19: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/19.jpg)
Aplicativos híbridos
![Page 20: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/20.jpg)
O que são aplicativos híbridos?
• HTML, CSS, JS• Acesso aos recursos nativos• “Casca nativa”• Roda em uma WebView• Agilidade no desenvolvimento
![Page 22: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/22.jpg)
![Page 23: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/23.jpg)
![Page 26: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/26.jpg)
http://slides.com/vcavalcante/porqueapphibridostdc2016#/
![Page 27: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/27.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 30: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/30.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 38: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/38.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 39: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/39.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 40: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/40.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 41: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/41.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 43: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/43.jpg)
Feedly
![Page 44: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/44.jpg)
![Page 45: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/45.jpg)
Apple App & Book Stores
![Page 49: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/49.jpg)
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
![Page 50: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/50.jpg)
Relação com o Phonegap2011: Adobe compra a NitobiPhonegap é doado para a Apache Software
FoundationApache Callback ... Apache Cordova
![Page 51: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/51.jpg)
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
![Page 52: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/52.jpg)
Principais comandos
http://bit.ly/cordova-comandos
![Page 55: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/55.jpg)
Valide layout de forma rápidaexecutando o app no browser
cordova platform add browser
cordova run browser
![Page 57: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/57.jpg)
https://developer.android.com/studio/run/emulator.html
![Page 59: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/59.jpg)
Visual Studio Emulator for Android
https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx
![Page 60: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/60.jpg)
Executando a aplicação no emulador
cordova platform add android
cordova run android
![Page 62: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/62.jpg)
Não quero um site “cru” no dispositivo.
Quero layout e comportamentos de um app.
![Page 64: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/64.jpg)
Por quê usar?• Construído em cima do Angular• Facilidade em escrever layouts /
comportamentos mais próximos do nativo• Testável
![Page 65: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/65.jpg)
AngularJS• Um dos principais frameworks de JS no
momento• Altamente testável• Modularizado• Angular components (1.5)• Google, Microsoft, etc.
![Page 66: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/66.jpg)
Pré-processadores de css• Empodere seu css• Produtividade• Váriaveis, mixins, aninhamente,
etc.
![Page 70: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/70.jpg)
Controle de dependências• Cordova save• Cordova prepare
• Ionic save• Ionic state
![Page 73: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/73.jpg)
Demo: acessando a câmera
https://github.com/WennderSantos/curso-app-hibrido-demo-camera
![Page 74: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/74.jpg)
Três ferramentasQuem 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.
![Page 75: Curso: Desenvolvimento de aplicativos híbridos (dia 1)](https://reader036.vdocuments.mx/reader036/viewer/2022081421/5899e7001a28ab96418b5759/html5/thumbnails/75.jpg)
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?