QCON SP 2012
1 like466 views
The document discusses mobile hybrid applications, which use both web and native technologies together. It begins by covering mobile web apps and native mobile apps. Mobile hybrid apps are then introduced as apps that use primarily web technologies like HTML, CSS, and JavaScript within a native container. This allows accessing native device capabilities while developing using web technologies. Frameworks for building hybrid apps like PhoneGap, Titanium, and Cordova are also mentioned.
QCON SP 2012
- 1. Aplicações Móveis Híbridas: usando Web e Nativo juntos cristiano@lab360.com.br (@cbsanchez) wladimir@lab360.com.br (@wlads) Tuesday, 22 May 2012 1
- 2. Agenda • Aplicações Mobile Web • Aplicações Mobile Nativas • Aplicações Mobile Híbridas Tuesday, 22 May 2012 2
- 3. 1. Aplicações Mobile Web Tuesday, 22 May 2012 3
- 4. No início era o nativo Tuesday, 22 May 2012 4
- 5. Sir Tim Berners-Lee e então Berners-Lee criou a web Tuesday, 22 May 2012 5
- 6. e desde 1991 • HTML, CSS e JavaScript • Pearl, PHP e ASP • Java • .NET • Applet Tuesday, 22 May 2012 6
- 7. hoje na web • Sistemas corporativos • Google Docs • e-Learning • Twitter, Facebook, GitHub, Basecamp, Netflix... Tuesday, 22 May 2012 7
- 8. mas nós queríamos mais • WML e WMLScript • XHTML MP • JavaME • Nativos Martin Cooper Tuesday, 22 May 2012 8
- 9. Fonte: Wikipedia Tuesday, 22 May 2012 9
- 10. e chega o iPhone Steve Jobs Tuesday, 22 May 2012 10
- 11. Tuesday, 22 May 2012 11
- 12. HTML + CSS + JAVASCRIPT Tuesday, 22 May 2012 12
- 13. ainda em desenvolvimento! • Chrome • Firefox • Safari • IE • Chrome Frame Tuesday, 22 May 2012 13
- 14. e o que promete? • Novas API’s • Multimídia embutido • Uso off-line • Depuração de erros Tuesday, 22 May 2012 14
- 15. http://www.html5rocks.com/en/ http://html5demos.com/ Tuesday, 22 May 2012 15
- 16. Semântica Tuesday, 22 May 2012 16
- 17. Canvas Tuesday, 22 May 2012 17
- 18. Canvas • 2D APIs • 3D APIs (WebGL) • Inline SVG Tuesday, 22 May 2012 18
- 19. Geolocation Tuesday, 22 May 2012 19
- 20. Storage Tuesday, 22 May 2012 20
- 21. Áudio e Vídeo Tuesday, 22 May 2012 21
- 22. CSS3 • seletores, atributos, targets • instruções • webfonts • linhas e colunas • transforms e animations Tuesday, 22 May 2012 22
- 23. CSS3 Tuesday, 22 May 2012 23
- 24. JavaScript • Ele sempre esteve entre nós! • Nova API DOM (getElementBy...) • History API • FileSystem API • Geolocation Tuesday, 22 May 2012 24
- 25. web mobile apps? • Afinal de contas, é HTML • Portável • Padrão aberto • Porque é possível Tuesday, 22 May 2012 25
- 26. e ainda... • Device orientation • Multi-touch • Desenvolvimento produtivo • Comunidade • Separation of Concerns Tuesday, 22 May 2012 26
- 27. ...e por último Tuesday, 22 May 2012 27
- 28. SoC • html estrutura • css view/estilo • javascript lógica Tuesday, 22 May 2012 28
- 29. alguns (bons) exemplos • Financial Times • Basecamp • http://www.apple.com/webapps/ Tuesday, 22 May 2012 29
- 30. Financial Times Tuesday, 22 May 2012 30
- 31. 2. Aplicações Mobile Nativas Tuesday, 22 May 2012 31
- 32. Native mode (wikipedia) • The term native mode or native code is used in computing in two related senses: • to describe something running on a computer natively or in native mode meaning that it is running without any external support as contrasted to running in emulation (i.e. browser) • Native operating system, native instruction set, etc., in application to a computer processor means that the corresponding item was implemented specifically for the given model of the computer or microprocessor, as opposed to emulation or compatibility mode. Tuesday, 22 May 2012 32
- 33. Conceito • Native App: • An application that is specifically written for a device platform. Tuesday, 22 May 2012 33
- 34. Devices • Feature-phones • Smart-phones What else? • Tablets • TV Tuesday, 22 May 2012 34
- 35. Plataformas Nativas • Plataformas e suas Linguagens de Programação • iOS => Objective-C, C • Android => Java • BlackBerry => Java • Windows Mobile (Nokia) => .Net Tuesday, 22 May 2012 35
- 36. Tuesday, 22 May 2012 36
- 37. Tuesday, 22 May 2012 37
- 38. Tuesday, 22 May 2012 38
- 39. Tuesday, 22 May 2012 39
- 40. Android => Java + Dalvik • Java é uma linguagem familiar para muitos desenvolvedores, muitas vezes é a primeira linguagem • Gustav’s Moto: “Anybody can cook” • Android fornece uma excelente API Tuesday, 22 May 2012 40
- 41. Objective-C • Objective-C criada na decada de 90 (NeXT) e possui uma vasta API => produtos Apple • Runtime C orientado a objetos • Ganhou muita popularidade com o lançamento do iPhone e do iOS SDK Tuesday, 22 May 2012 41
- 42. C/C++ • Diversos Devices • Possivel desenvolver em C/C++ para iOS e Android • Projetos Open-Source!!! • UI??? Tuesday, 22 May 2012 42
- 43. Características Apps Nativas • Aparência Nativa (Native look & feel): impossível para Web por definição • APIs: video, alarm clock, file access, push notification, ... • Integração com aplicações: maps, mail, camera, youtube, gallery, agenda, ... Tuesday, 22 May 2012 43
- 44. Características Apps Nativas • Integração com SO: concorrência, system events • Melhor Performance e uso da Bateria • Web engines, plugins (e.g. <video> codecs) • Desenvolvimento: debugging Tuesday, 22 May 2012 44
- 45. Características Apps Nativas • Uso “off-line” • In-App Purchase: CC cadastrado + billing (e.g. High Noon) • Tratamento de diferentes tamanhos e resoluções de tela (i.e. Android) Tuesday, 22 May 2012 45
- 46. Human Interface Guidelines Fonte: http://developer.android.com/guide/practices/ui_guidelines/index.html http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf Tuesday, 22 May 2012 46
- 47. Armazenamento (off-line) Tuesday, 22 May 2012 47
- 48. Principais Características “ordenadas” para App Nativas 1. offline mode 2. uso dos recursos (+hardware) do device 3. experiência de uso 4. centralização das aplicacoes (base de potenciais usuários) 5. integração com outras apps 6. notificações (push) e recursos de sistema (e.g. alarme) 7. “monetization” das lojas (busca e faturamento) 8. performance e uso da bateria Tuesday, 22 May 2012 48
- 49. Domínio de Aplicações • GAMES • Acesso a recursos nativos: ACCELEROMETER, CAMERA, COMPASS, CONTACTS, GEOLOCATION, NETWORK, NOTIFICATION, STORAGE • NFC?????? Fonte: Google Images (http://goo.gl/7ZQLS) Tuesday, 22 May 2012 49
- 50. Native UI Kits • Cocoa Touch • Android UI !"#$%&"'( 12&$!"#$( )*&++",( -./0+( Tuesday, 22 May 2012 50
- 51. $$$ • $32,639 for a simple app • 2 months to create • 2 weeks per feature = 4 features • $8,160 per feature Fonte: Pinch/Zoom (Seatle) Tuesday, 22 May 2012 51
- 52. App Store, Market, etc • “o um lugar" para encontrar aplicações Fonte: Google Images (http://goo.gl/cKArV) • modelo de revenue share 70/30 Tuesday, 22 May 2012 52
- 53. Apple Store Preço #Apps Games Total % TOTAL Free 160.705 27,670 188,375 39.97% $0.99 101.451 29,491 130,942 27.78% $1.99 47.028 7,999 55,027 11.68% 79.43% Fonte: http://148apps.biz/app-store-metrics/?mpage=appprice Tuesday, 22 May 2012 53
- 54. Tuesday, 22 May 2012 54
- 55. Cases • Games: angry birds, plats vs zombies • Facebook, Twitter • Shazan • Flipboard • Narizinho, AutoEsporte, Fibria, QuemCarnaval :D Tuesday, 22 May 2012 55
- 56. Cases • “We bet everything on Apple and iOS and then Apple killed us by changing the rules in the middle of the game” • Finantial Times (ft.com) • Primeiro: Nativo • Depois: Web Tuesday, 22 May 2012 56
- 57. Resumindo... • Web - portabilidade - padrões abertos - simplicidade • Nativas - integração hardware/plataforma - APIs novas - experiência + rica Tuesday, 22 May 2012 57
- 58. 3. Aplicações Mobile Híbridas Tuesday, 22 May 2012 58
- 59. Conceito • Hybrid App: • An application using primarily web technologies inside a native container. Tuesday, 22 May 2012 59
- 60. Aplicações Híbridas • WebView • WebKit • JavaScript bridge Tuesday, 22 May 2012 60
- 61. WebView • Android e iOS • Usa o WebKit como engine Tuesday, 22 May 2012 61
- 62. WebKit • Browser Engine • Apple, Google, KDE, Nokia, RIM, Samsung entre outras Tuesday, 22 May 2012 62
- 63. JavaScript Bridge • Nativo pro WebView • WebView pra Nativo • Eventos do browser e JS com callback pro nativo Tuesday, 22 May 2012 63
- 64. JavaScript => Android Tuesday, 22 May 2012 64
- 65. Android => JavaScript Tuesday, 22 May 2012 65
- 66. Formas de Fazer • WebView e recursos nativos • WebView dentro de frame nativo • Transitando entre WebView e nativo Tuesday, 22 May 2012 66
- 67. cross-plataform frameworks • App Inventor • DroidDraw • Rhomobile • Appcelerator/Titanium • SproutCore • MonoTouch • JQuery Mobile • Jo • Sencha Touch • PhoneGap Tuesday, 22 May 2012 67
- 68. Appcelerator/Titanium Tuesday, 22 May 2012 68
- 69. cristiano@lab360.com.br @cbsanchez wladimir@lab360.com.br @wlads @lab_360 Tuesday, 22 May 2012 69