curso: desenvolvimento de aplicativos híbridos (dia 1)

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

Para todo problema,existe uma ferramenta certa

para resolvê-lo

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

Porque eu escolheria desenvolver um app

híbrido e não um nativo?

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.

Calma.Lembra que existem ferramentas

para resolver cada tipo de problema

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

Como começar com desenvolvimento de

apps híbridos?

3 – Frameworks, frameworks eframeworks

Phonegap

http://phonegap.com/

Cordova

https://cordova.apache.org/

IONIC

http://ionicframework.com/

TACO – Tools for Apache Cordova

http://taco.tools/

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

Instagram

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

Criando um app

cordova create cordova-app

Conhecendo a estrutura de pastas

Valide layout de forma rápidaexecutando o app no browser

cordova platform add browser

cordova run browser

5 - Emuladores

Google

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

Genymotion

https://www.genymotion.com/

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.

Criando uma aplicação com IONIC

ionic start ionic-app tabs

Livereloading

Ionic serve -l

Remote debug

Chrome://inspect

Controle de dependências• Cordova save• Cordova prepare

• Ionic save• Ionic state

Splash screen e ícone

Ionic resources

NgCordova

http://ngcordova.com/

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

Crosswalk

https://crosswalk-project.org/

Wennder dos Santoswennder.santos@outlook.com

@wenndersantos