Post on 07-Feb-2017
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
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
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
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
Aplicativos híbridos
O que são aplicativos híbridos?
• HTML, CSS, JS• Acesso aos recursos nativos• “Casca nativa”• Roda em uma WebView• Agilidade no desenvolvimento
http://slides.com/vcavalcante/porqueapphibridostdc2016#/
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Feedly
Apple App & Book Stores
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
Relação com o Phonegap2011: Adobe compra a NitobiPhonegap é doado para a Apache Software
FoundationApache Callback ... Apache Cordova
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Principais comandos
http://bit.ly/cordova-comandos
Valide layout de forma rápidaexecutando o app no browser
cordova platform add browser
cordova run browser
https://developer.android.com/studio/run/emulator.html
Visual Studio Emulator for Android
https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx
Executando a aplicação no emulador
cordova platform add android
cordova run android
Não quero um site “cru” no dispositivo.
Quero layout e comportamentos de um app.
Por quê usar?• Construído em cima do Angular• Facilidade em escrever layouts /
comportamentos mais próximos do nativo• Testável
AngularJS• Um dos principais frameworks de JS no
momento• Altamente testável• Modularizado• Angular components (1.5)• Google, Microsoft, etc.
Pré-processadores de css• Empodere seu css• Produtividade• Váriaveis, mixins, aninhamente,
etc.
Controle de dependências• Cordova save• Cordova prepare
• Ionic save• Ionic state
Demo: acessando a câmera
https://github.com/WennderSantos/curso-app-hibrido-demo-camera
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.
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?