Titanium Mobile - Campus Party Recife 2

2,759 views

Published on

Slides da minha apresentação na Campus Party Recife 2

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

No Downloads
Views
Total views
2,759
On SlideShare
0
From Embeds
0
Number of Embeds
840
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Titanium Mobile - Campus Party Recife 2

  1. 1. APLICAÇÕES MULTI-PLATAFORMA COM TITANIUM MOBILE
  2. 2. var palestrante; palestrante = { nome : 'Eric Cavalcanti', trabalhaNo : 'CESAR', certificação : 'TCAD', titan : true, contato : 'ecavalcanti@gmail.com', twitter : '@ericoc', blog : 'tips4dev.com' }
  3. 3. Apoiada pela StormVentures, SierraVentures e eBay. Appcelerator Inc. foi fundada em 2007 por especialista em desenvolvimento web. GSMA Global Mobile Awards 2012 Winner Gartner 2012 Magic Quadrant Visionary for Mobile Application Development Platform
  4. 4. O QUE ÉTITANIUM MOBILE? Titanium Mobile é um ambiente open source para desenvolvimento de aplicativos móveis multiplataforma utilizando uma das linguagens mais conhecidas mundialmente, o JavaScript.
  5. 5. LICENÇA SDKs eTitanium Studio – open source e free Licença Apache 2.0 Serviços comerciais de treinamentos, suporte, módulos pagos, programa de certificações
  6. 6. APPCELERATOR PLATFORM
  7. 7. TITANIUM MOBILE 470K! Developers! 55K! Apps! 140M! Devices!
  8. 8. QUEM USA? ... e mais
  9. 9. PLATAFORMA SUPORTADAS
  10. 10. PLATAFORMA SUPORTADAS
  11. 11. Nativa TIPOS DE APLICAÇÕES Mobile Web Híbrida
  12. 12. MOBILE WEB
  13. 13. MOBILE WEB CSS3 JavaScript Geolocalização Câmera Banco de dados {
  14. 14. MOBILE WEB
  15. 15. MOBILE WEB
  16. 16. HÍBRIDA Camada Nativa <html> ... </html> UI webview iOS Objective-C Android Java Windows Phone C# /Visual Basic {
  17. 17. HÍBRIDA Camada Nativa <html> ... </html> UI webview Geolocalização Câmera Banco de dados Contatos Bússola Notificações Microfone Sistemas de arquivos {
  18. 18. HÍBRIDA Camada Nativa <html> ... </html> UI webview .ipa .apk .xap
  19. 19. HÍBRIDA Camada Nativa <html> ... </html> UI webview .ipa .apk .xap
  20. 20. HÍBRIDA
  21. 21. NATIVA iOS Objective-C Android Java Windows Phone C# /Visual Basic .ipa .apk .xap
  22. 22. NATIVA iOS Objective-C Android Java Windows Phone C# /Visual Basic .ipa .apk .xap
  23. 23. NATIVA
  24. 24. Híbrida E OTITANIUM MOBILE? Mobile Web Nativa
  25. 25. E OTITANIUM MOBILE? Nativa ?
  26. 26. COMO FUNCIONA?
  27. 27. Bridge (JavaScript - Nativo) var btn =Ti.UI.createButton(); Titanium JavaScript API UIButton Class button EXEMPLO
  28. 28. TITANIUM MOBILE Código JavaScript + Assets Interpretador JavaScript Titanium Bridge (código nativo) .ipa .apk
  29. 29. TITANIUM MOBILE Código JavaScript + Assets Interpretador JavaScript Titanium Bridge (código nativo) .ipa .apk
  30. 30. POR QUE NATIVA? O usuário já está acostumado em utilizar aplicações nativas em seu dispositivo UI nativa tem melhor performance Aumentamos consideravelmente a probabilidade de aprovação por lojas mais criteriosas
  31. 31. PLATAFORMA ANDROID Action bar
  32. 32. PLATAFORMA IOS
  33. 33. POR QUE NATIVA COM TITANIUM? Não estamos limitados a uma plataforma específica 1 Suporte para as maiores plataformas (iOS, Android, Mobile Web, BB10,Windows 8) 2 Reduz o tempo gasto aprendendo diversas linguagens Conhecimento facilmente transferido 3 Código base único Reduz duplicação de esforço
  34. 34. CÓDIGO NATIVO IOS // Objective-C UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Alert" message:@"Hello World" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show];
  35. 35. // Java/Android AlertDialog.Builder alertDialog = new AlertDialog.Builder(this).create(); alertDialog.setMessage("Hello World"); alertDialog.setButton("OK", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // Fazer alguma coisa } }); alertDialog.show();; CÓDIGO NATIVO ANDROID
  36. 36. COM OTITANIUM alert("Hello World"); ...e multi-plataforma!
  37. 37. SHOWCASE http://www.appcelerator.com/customers/app-showcase/
  38. 38. NBC IPHONE E IPAD
  39. 39. SCOUTMOB IPHONE E ANDROID
  40. 40. ZIP CAR ANDROID
  41. 41. WOTCHAPP! IPHONE, IPAD E ANDROID
  42. 42. GAMESTOP IPHONE E ANDROID
  43. 43. AIRPORTCHATTER IPHONE
  44. 44. CARDDI IPHONE E ANDROID
  45. 45. MAIS EXEMPLOS... http://www.builtwithtitanium.com/
  46. 46. PRÉ-REQUISITOS Mac OS X 10.7 (Lion) ou superior Windows 7 ou superior Ubuntu Linux 12.04 LTS iOS SDK Android SDK Tizen SDK
  47. 47. TITANIUM STUDIO E SDKS Titanium Studio é uma IDE baseada no eclipse que interage com vários scripts Python contidos no Titanium SDK Os scripts interagem com as ferramentas nativas de cada plataforma
  48. 48. OPEN MOBILE MARKETPLACE http://marketplace.appcelerator.com
  49. 49. TIPOS DE PROJETO
  50. 50. TITANIUM CLASSIC Interface definida via código CommonJS Modules
  51. 51. CLASSIC
  52. 52. EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA PLATAFORMA (CLASSIC) if (Ti.Platform.osname == "android") { ... } else { ... } [android, iphone, ipad, mobileweb, tizen]
  53. 53. TITANIUM ALLOY UI declarativa (XML) Framework MVC Widgets Themes
  54. 54. ALLOY APP index.xml index.tss index.js $.index.open();
  55. 55. POR QUE UM FRAMEWORK MVC? Provê uma clara separação de papéis e responsabilidades Melhor organização do código Mais fácil de manter e expandir
  56. 56. MVC Models - fornece a lógica de negócio, contém regras, dados e o estado da aplicação. Views - fornece os componentes de UI para o usuário, apresentando os dados e permitindo que o usuário interaja com o modelo. Controllers - fornece a interação entre os componentes de UI e o modelo.
  57. 57. MVC Controller Model View
  58. 58. MVC Controller Model View Encapsula dados e comportamento
  59. 59. MVC Controller Model View Apresenta informações ao usuário e recebe suas interações
  60. 60. MVC Controller Model View Intermediário entre o Model e aView
  61. 61. ESTRUTURA DO PROJETO
  62. 62. ESTRUTURA DO PROJETO
  63. 63. ESTRUTURA DO PROJETO
  64. 64. ESTRUTURA DO PROJETO
  65. 65. ESTRUTURA DO PROJETO
  66. 66. ALLOY
  67. 67. EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA PLATAFORMA (ALLOY) if (OS_ANDROID) { ... } else { ... } [OS_IOS, OS_ANDROID, OS_MOBILEWEB, ENV_DEV, ENV_TEST, ENV_PRODUCTION]
  68. 68. EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA PLATAFORMA (ALLOY) <Alloy> <Window> <View ns="Ti.Map" id="mapview"> <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/> <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/> <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/> <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/> <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/> </View> </Window> </Alloy>
  69. 69. [android, ios, mobileweb] EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA PLATAFORMA (ALLOY) <Alloy> <Window> <View ns="Ti.Map" id="mapview"> <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/> <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/> <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/> <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/> <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/> </View> </Window> </Alloy> [tablet, handheld]
  70. 70. ALLOYTSS Platform-Specific styles // iPhone "Label[platform=ios formFactor=handheld]": { backgroundColor: "#f00", text: 'iPhone' }, // iPad and iPad mini "Label[platform=ios formFactor=tablet]": { backgroundColor: "#0f0", text: 'iPad' }, // Android handheld and tablet devices "Label[platform=android]": { backgroundColor: "#00f", text: 'Android' }, // Any Mobile Web platform "Label[platform=mobileweb]": { backgroundColor: "#f0f", text: 'Mobile Web' }
  71. 71. • app ◦ assets ■ appicon.png ■ background.png ◦ controllers ◦ styles ■ index.tss ■ window.tss ◦ themes ■ mytheme ■ assets ■ background.png ■ styles ■ app.tss ◦ views ■ index.xml ■ window.xml ALLOYTEMAS
  72. 72. BACKBONE NO ALLOY Models Mantém o controle dos seus dados Collections Gerencia listas/ array desses seus dados Sync/Adapters SQLite, Properties, REST, ACS, CouchDB...
  73. 73. ALLOY MODELS exports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; } }
  74. 74. ALLOY MODELS exports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; } }
  75. 75. ALLOY MODELS exports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; } }
  76. 76. var book = Alloy.createModel('book', {title:'A Game of Thrones', author:'George R.R. Martins'}); book.save(); INSTANCIANDO O MODEL
  77. 77. var library = Alloy.createCollection('book'); library.fetch(); // Grab data from persistent storage INSTANCIANDO A COLLECTION
  78. 78. WIDGETS http://www.danielsefton.com/2013/05/slider-menu-widget-v2-for-titanium-alloy/
  79. 79. MAIS WIDGETS http://alloylove.com/
  80. 80. DEMO
  81. 81. APPCELERATOR CLOUD SERVICES Pre-build Web Backend 25+ API Escalável SDKs:Titanium, iOS,Android,AS3 e REST
  82. 82. TIERS API
  83. 83. CÓDIGO FONTE http://github.com/ecavalcanti/ http://www.slideshare.net/ericoc SLIDES
  84. 84. Obrigado!

×