Desenvolvimento de aplicativos híbridos
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
1 – Aplicativos híbridos
Como resolver a seguinte demanda
Um app
•Tirar foto•GPS•Armazenamento local•Comunicação com Backend
Deve suportar Android
Deve suportar iOS
Deve suportar Windows Phone
Em 35 diasdeverá estar nas LOJAS!
Você já passou por isso?
E agora?
Como resolver?
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
Como funciona por “debaixo dos panos”?
2 – O estado dos aplicativos híbridos
http://slides.com/vcavalcante/porqueapphibridostdc2016#/
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
Ok, estou convencido.Vou usar híbrido para todos os meus apps.
Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
3 – Frameworks, frameworks eframeworks
Mas, é OpenSource. Posso confiar?
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
Quem está usando?
Feedly
Apple App & Book Stores
Parece que está funcionando para algumas pessoas
4 - Cordova
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
Conhecendo a estrutura de pastas
Valide layout de forma rápidaexecutando o app no browser
cordova platform add browser
cordova run browser
5 - Emuladores
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
Isso tudo é muito legal, mas...
Não quero um site “cru” no dispositivo.
Quero layout e comportamentos de um app.
6 - IONIC
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?
Existe uma luz no fim do túnel
Top Related