Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5

5,254
-1

Published on

Palestra apresentada na UFG em 12 de novembro de 2013

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,254
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5

  1. 1. Desenvolvimento híbrido de apps mobile com HTML5 Loiane Groner http://loiane.com
  2. 2. Me, Myself & I •Gerente de Desenv Projetos e Sencha coach @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. packpub.com ou amazon.com
  4. 4. Porque Mobile?
  5. 5. 2005
  6. 6. 2013
  7. 7. #changeBrazil
  8. 8. Porque Multiplataforma?
  9. 9. App Nativa
  10. 10. App Nativa Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# App Nativa Arquivos Banco de Imagens/ Dados Documentos UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Backend
  11. 11. $99 anuais $25 $0 $19 - $99 anuais
  12. 12. Você precisa aprender…
  13. 13. Boa Sorte!
  14. 14. Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim*
  15. 15. Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim* Interpretado Não é o foco da palestra
  16. 16. joApp Wink Toolkit
  17. 17. joApp Wink Toolkit
  18. 18. Web App
  19. 19. Server Side Web Execut a UI e Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# Web Browser Arquivos Banco de Imagens/ Dados Documentos Dispositivo um nas dor Ape riza de ren Backend
  20. 20. • Tem o JQuery como base
  21. 21. • Tem o JQuery como base • Estrutura Multi-Page
  22. 22. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples
  23. 23. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas
  24. 24. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas • Web Page App
  25. 25. • JQuery (jquery.com) • JQuery Mobile (jquerymobile.com) • Editor de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (o de sua preferência!) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  26. 26. http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  27. 27. • Primeiro Framework HTML5 Mobile do Mercado!
  28. 28. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app
  29. 29. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples
  30. 30. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC
  31. 31. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass)
  32. 32. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass) • Web Page App , Client Side App, Hybrid App
  33. 33. • Sencha Touch • Sencha • Editor SDK (sencha.com) Cmd (sencha.com) de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (Safari, Chrome, IE 10) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  34. 34. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/myapp
  35. 35. App Client Side Nativa
  36. 36. sencha app package run <configFile.json>
  37. 37. Client Side Web Web Browser JavaScript Arquivos Imagens/ Documentos Lógica de negó cio Web Server ttp:/ h / Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  38. 38. App Híbrida
  39. 39. Porque Híbrido?
  40. 40. E vos declaro Apps Mobile Híbridas
  41. 41. PhoneGap
  42. 42. App Híbrida App Nativa Código Nativo Interpretador Lógica de negó cio Web Server / ttp:/ h Java/ PHP/ Ruby/C# :// tp ht Ponte JavaScript UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Banco de Imagens/ Dados Documentos Backend
  43. 43. http://nodejs.org/
  44. 44. $ sudo npm install -g phonegap
  45. 45. $ phonegap create hello com.example.hello HelloWorld
  46. 46. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  47. 47. $ phonegap run android     [phonegap] detecting Android SDK environment...     [phonegap] using the local environment     [phonegap] compiling Android...     [phonegap] successfully compiled Android app     [phonegap] trying to install app onto device     [phonegap] no device was found     [phonegap] trying to install app onto emulator     [phonegap] successfully installed onto emulator
  48. 48. Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build
  49. 49. +
  50. 50. http://www.sencha.com/apps/ http://phonegap.com/app/
  51. 51. Build Otimizado Agrega Valor!
  52. 52. http://browserdiet.com/
  53. 53. Demo
  54. 54. Threads
  55. 55. #FAIL
  56. 56. <div id="jogador">
  57. 57. http://phonegap.com/app/fruit-salad/
  58. 58. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  59. 59. Obrigada! http://loiane.com

×