Desenvolvimento de
aplicativos híbridos
Wennder dos Santos
• Software developer
• Microsoft MVP
• Escreve no blog http://wenndersantos.net
• Publica vídeos em htt...
Agenda dia 1
1. Aplicativos híbridos
• O que são? Como funcionam?
• Web View
• Plugins
2. O estado dos aplicativos híbrido...
Agenda dia 1
3. Frameworks, frameworks e frameworks
• Phonegap
• Cordova
• TACO
• IONIC
4. Cordova
• Relação com o Phonega...
Agenda dia 1
5. Emuladores
• Google
• Genymotion
• Visual Studio Emulator For Android
• Executando uma aplicação no emulad...
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 dias
deverá 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
• Agi...
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 e
frameworks
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 Sup...
Relação com o Phonegap
2011: Adobe compra a Nitobi
Phonegap é doado para a Apache Software
Foundation
Apache Callback ....
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ápida
executando 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
• ...
AngularJS
• Um dos principais frameworks de JS no momento
• Altamente testável
• Modularizado
• Angular components (1.5)
•...
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 ferramentas
Quem realmente faz o quê?
Cordova IONIC Angular
• Framework javascript que
empodera o html através
de dir...
O problema das fabricantes
• Cada uma quer fazer sua implementação de browser
• As implementações podem apresentar
comport...
Existe uma luz
no fim do túnel
Crosswalk
https://crosswalk-project.org/
Wennder dos Santos
wennder.santos@outlook.com
@wenndersantos
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Próximos SlideShares
Carregando em…5
×

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

155 visualizações

Publicada em

Slides usados do primeiro dia do curso: Desenvolvimento de aplicativos híbridos.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
155
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Empresas de tecnologia que estão entrando no mundo do desenvolvimento movél, querem a forma mais fácil de fazer. Essas empresas estão acostumadas a desenvolver um único código para rodar em qualquer lugar (web / desktop).
  • Empresas que não tem como produto / serviço fim a tecnologia, querem algo rápido e barato.
  • Curso: Desenvolvimento de aplicativos híbridos (dia 1)

    1. 1. Desenvolvimento de aplicativos híbridos
    2. 2. 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
    3. 3. Agenda dia 1 1. 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
    4. 4. Agenda dia 1 3. 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
    5. 5. Agenda dia 1 5. 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
    6. 6. 1 – Aplicativos híbridos
    7. 7. Para todo problema, existe uma ferramenta certa para resolvê-lo
    8. 8. Como resolver a seguinte demanda
    9. 9. Um app
    10. 10. •Tirar foto •GPS •Armazenamento local •Comunicação com Backend
    11. 11. Deve suportar Android
    12. 12. Deve suportar iOS
    13. 13. Deve suportar Windows Phone
    14. 14. Em 35 dias deverá estar nas LOJAS!
    15. 15. Você já passou por isso?
    16. 16. E agora?
    17. 17. Como resolver?
    18. 18. Aplicativos híbridos
    19. 19. O que são aplicativos híbridos? • HTML, CSS, JS • Acesso aos recursos nativos • “Casca nativa” • Roda em uma WebView • Agilidade no desenvolvimento
    20. 20. Como funciona por “debaixo dos panos”?
    21. 21. 2 – O estado dos aplicativos híbridos
    22. 22. Porque eu escolheria desenvolver um app híbrido e não um nativo?
    23. 23. http://slides.com/vcavalcante/porqueapphibridostdc2016#/
    24. 24. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    25. 25. Ok, estou convencido. Vou usar híbrido para todos os meus apps.
    26. 26. Calma. Lembra que existem ferramentas para resolver cada tipo de problema
    27. 27. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    28. 28. Como começar com desenvolvimento de apps híbridos?
    29. 29. 3 – Frameworks, frameworks e frameworks
    30. 30. Phonegap http://phonegap.com/
    31. 31. Cordova https://cordova.apache.org/
    32. 32. IONIC http://ionicframework.com/
    33. 33. TACO – Tools for Apache Cordova http://taco.tools/
    34. 34. Mas, é OpenSource. Posso confiar?
    35. 35. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    36. 36. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    37. 37. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    38. 38. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    39. 39. Quem está usando?
    40. 40. Feedly
    41. 41. Instagram
    42. 42. Apple App & Book Stores
    43. 43. Parece que está funcionando para algumas pessoas
    44. 44. 4 - Cordova
    45. 45. 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
    46. 46. Relação com o Phonegap 2011: Adobe compra a Nitobi Phonegap é doado para a Apache Software Foundation Apache Callback ... Apache Cordova
    47. 47. Fonte: http://pt.slideshare.net/cordovajp/the-state-of-hybrid-app-development
    48. 48. Principais comandos http://bit.ly/cordova-comandos
    49. 49. Criando um app cordova create cordova-app
    50. 50. Conhecendo a estrutura de pastas
    51. 51. Valide layout de forma rápida executando o app no browser cordova platform add browser cordova run browser
    52. 52. 5 - Emuladores
    53. 53. Google https://developer.android.com/studio/run/emulator.html
    54. 54. Genymotion https://www.genymotion.com/
    55. 55. Visual Studio Emulator for Android https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx
    56. 56. Executando a aplicação no emulador cordova platform add android cordova run android
    57. 57. Isso tudo é muito legal, mas...
    58. 58. Não quero um site “cru” no dispositivo. Quero layout e comportamentos de um app.
    59. 59. 6 - IONIC
    60. 60. Por quê usar? • Construído em cima do Angular • Facilidade em escrever layouts / comportamentos mais próximos do nativo • Testável
    61. 61. AngularJS • Um dos principais frameworks de JS no momento • Altamente testável • Modularizado • Angular components (1.5) • Google, Microsoft, etc.
    62. 62. Pré-processadores de css • Empodere seu css • Produtividade • Váriaveis, mixins, aninhamente, etc.
    63. 63. Criando uma aplicação com IONIC ionic start ionic-app tabs
    64. 64. Livereloading Ionic serve -l
    65. 65. Remote debug Chrome://inspect
    66. 66. Controle de dependências • Cordova save • Cordova prepare • Ionic save • Ionic state
    67. 67. Splash screen e ícone Ionic resources
    68. 68. NgCordova http://ngcordova.com/
    69. 69. Demo: acessando a câmera https://github.com/WennderSantos/curso-app-hibrido-demo-camera
    70. 70. Três ferramentas Quem 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.
    71. 71. 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? 
    72. 72. Existe uma luz no fim do túnel
    73. 73. Crosswalk https://crosswalk-project.org/
    74. 74. Wennder dos Santos wennder.santos@outlook.com @wenndersantos

    ×