Your SlideShare is downloading. ×
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,862
views

Published on

Palestra apresentada na UFG em 12 de novembro de 2013

Palestra apresentada na UFG em 12 de novembro de 2013

Published in: Technology

0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,862
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desenvolvimento híbrido de apps mobile com HTML5 Loiane Groner http://loiane.com
  • 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. packpub.com ou amazon.com
  • 4. Porque Mobile?
  • 5. 2005
  • 6. 2013
  • 7. #changeBrazil
  • 8. Porque Multiplataforma?
  • 9. App Nativa
  • 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. $99 anuais $25 $0 $19 - $99 anuais
  • 12. Você precisa aprender…
  • 13. Boa Sorte!
  • 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. 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. joApp Wink Toolkit
  • 17. joApp Wink Toolkit
  • 18. Web App
  • 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. • Tem o JQuery como base
  • 21. • Tem o JQuery como base • Estrutura Multi-Page
  • 22. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples
  • 23. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas
  • 24. • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas • Web Page App
  • 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. http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  • 27. • Primeiro Framework HTML5 Mobile do Mercado!
  • 28. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app
  • 29. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples
  • 30. • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC
  • 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. • 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. • 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. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/myapp
  • 35. App Client Side Nativa
  • 36. sencha app package run <configFile.json>
  • 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. App Híbrida
  • 39. Porque Híbrido?
  • 40. E vos declaro Apps Mobile Híbridas
  • 41. PhoneGap
  • 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. http://nodejs.org/
  • 44. $ sudo npm install -g phonegap
  • 45. $ phonegap create hello com.example.hello HelloWorld
  • 46. $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  • 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. Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build
  • 49. +
  • 50. http://www.sencha.com/apps/ http://phonegap.com/app/
  • 51. Build Otimizado Agrega Valor!
  • 52. http://browserdiet.com/
  • 53. Demo
  • 54. Threads
  • 55. #FAIL
  • 56. <div id="jogador">
  • 57. http://phonegap.com/app/fruit-salad/
  • 58. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  • 59. Obrigada! http://loiane.com

×