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

  • 4,106 views
Uploaded on

Palestra apresentada na UFG em 12 de novembro de 2013

Palestra apresentada na UFG em 12 de novembro de 2013

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,106
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
18

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