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

78
Desenvolvimento de aplicativos híbridos

Upload: wennder-santos

Post on 07-Feb-2017

265 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Desenvolvimento de aplicativos híbridos

Page 2: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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)

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)

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)

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 6: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

1 – Aplicativos híbridos

Page 7: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Para todo problema,existe uma ferramenta certa

para resolvê-lo

Page 8: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Como resolver a seguinte demanda

Page 10: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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

Page 11: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Deve suportar Android

Page 12: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Deve suportar iOS

Page 13: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Deve suportar Windows Phone

Page 14: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Em 35 diasdeverá estar nas LOJAS!

Page 15: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Você já passou por isso?

Page 16: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

E agora?

Page 18: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Como resolver?

Page 19: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Aplicativos híbridos

Page 20: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

O que são aplicativos híbridos?

• HTML, CSS, JS• Acesso aos recursos nativos• “Casca nativa”• Roda em uma WebView• Agilidade no desenvolvimento

Page 21: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Como funciona por “debaixo dos panos”?

Page 22: Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Page 23: Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Page 24: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

2 – O estado dos aplicativos híbridos

Page 25: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Porque eu escolheria desenvolver um app

híbrido e não um nativo?

Page 26: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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

Page 28: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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

Page 29: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Calma.Lembra que existem ferramentas

para resolver cada tipo de problema

Page 31: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Como começar com desenvolvimento de

apps híbridos?

Page 32: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

3 – Frameworks, frameworks eframeworks

Page 33: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Phonegap

http://phonegap.com/

Page 34: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Cordova

https://cordova.apache.org/

Page 35: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

IONIC

http://ionicframework.com/

Page 36: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

TACO – Tools for Apache Cordova

http://taco.tools/

Page 37: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Mas, é OpenSource. Posso confiar?

Page 42: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Quem está usando?

Page 43: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Feedly

Page 44: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Instagram

Page 45: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Apple App & Book Stores

Page 46: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Parece que está funcionando para algumas pessoas

Page 47: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

4 - Cordova

Page 49: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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)

Relação com o Phonegap2011: Adobe compra a NitobiPhonegap é doado para a Apache Software

FoundationApache Callback ... Apache Cordova

Page 52: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Principais comandos

http://bit.ly/cordova-comandos

Page 53: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Criando um app

cordova create cordova-app

Page 54: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Conhecendo a estrutura de pastas

Page 55: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Valide layout de forma rápidaexecutando o app no browser

cordova platform add browser

cordova run browser

Page 56: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

5 - Emuladores

Page 57: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Google

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

Page 58: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Genymotion

https://www.genymotion.com/

Page 59: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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)

Executando a aplicação no emulador

cordova platform add android

cordova run android

Page 61: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Isso tudo é muito legal, mas...

Page 62: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Não quero um site “cru” no dispositivo.

Quero layout e comportamentos de um app.

Page 63: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

6 - IONIC

Page 64: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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)

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)

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

etc.

Page 67: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Criando uma aplicação com IONIC

ionic start ionic-app tabs

Page 68: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Livereloading

Ionic serve -l

Page 69: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Remote debug

Chrome://inspect

Page 70: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Controle de dependências• Cordova save• Cordova prepare

• Ionic save• Ionic state

Page 71: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Splash screen e ícone

Ionic resources

Page 72: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

NgCordova

http://ngcordova.com/

Page 73: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Demo: acessando a câmera

https://github.com/WennderSantos/curso-app-hibrido-demo-camera

Page 74: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

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)

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?

Page 76: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Existe uma luz no fim do túnel

Page 77: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Crosswalk

https://crosswalk-project.org/

Page 78: Curso: Desenvolvimento de aplicativos híbridos (dia 1)

Wennder dos [email protected]

@wenndersantos