BeagaJS 2013: Sencha Touch + PhoneGap

3,159 views

Published on

Palestra apresentada em 2 de março no evento BeagaJS. Palestra Desenvolvimento Mobile Multiplataforma e Open Source com PhoneGap e Sencha Touch

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

No Downloads
Views
Total views
3,159
On SlideShare
0
From Embeds
0
Number of Embeds
701
Actions
Shares
0
Downloads
108
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

BeagaJS 2013: Sencha Touch + PhoneGap

  1. 1. Dev Mobile Multiplataforma e Open Source comSencha Touch e PhoneGap Loiane Groner
  2. 2. Loiane GronerJava JUG LeaderSencha Community Leader 7+ XP Java 4+ XP SenchaSoftware DeveloperManager @ Citibank http://loiane.com @loiane
  3. 3. Autora TécnicaInternacional
  4. 4. 1 Sencha Touch
  5. 5. Primeiro framework Javascript paradesenvolvimento de apps mobile ricas usando padrões web
  6. 6. Tem Acesso Nativo?
  7. 7. Acesso NativoApp in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar) Sencha Packager*Orientation PhoneGapPush Notifications Emulator
  8. 8. Sencha Touch não temAcelerômetro Compass File
  9. 9. 2 Phone Gap
  10. 10. 3Sencha Touch + PhoneGap
  11. 11. UIWebView WebViewHTML 5 CSS 3 Stores JS APIs JS
  12. 12. Workflow deDesenvolvimento
  13. 13. Mock Up Store DispositivoDesenvolvimento Testes Simulação
  14. 14. MOCKUP
  15. 15. Resultado
  16. 16. Mãos à Obra!
  17. 17. sencha generate app Contatos../beagajs/Contatos
  18. 18. Testes Locais
  19. 19. TestesAutomatizados
  20. 20. http://bryntum.com
  21. 21. Hora de Integrar!
  22. 22. app.json"js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.5.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
  23. 23. navigator.contacts.find( MyContacts.proxy.ContactsProxy! fields,! function(deviceContacts) {! //loop over deviceContacts and create Contact model instances! var contacts = [];! for (var i = 0; i < deviceContacts.length; i++) {! var deviceContact = deviceContacts[ i ];! ! ! ! ! console.log(deviceContact);! ! ! ! ! var phone = deviceContact.phoneNumbers[0];! ! ! ! ! if (phone){! ! ! ! ! ! phone = phone.value;! ! ! ! ! } else{! ! ! ! ! ! phone = "";! ! ! ! ! }! ! ! ! ! console.log("phone " + phone);! var contact = Ext.create(MyContacts.model.Contact,{! id: deviceContact.id,! givenName: deviceContact.name.givenName,! familyName: deviceContact.name.familyName,! phoneNumber: phone,! birthday: new Date(deviceContact.birthday),! notes: deviceContact.note! });! contact.deviceContact = deviceContact;! contacts.push(contact);! }! //return model instances in a result set operation.setResultSet( ! Ext.create(Ext.data.ResultSet, { ! records: contacts, ! total : contacts.length }) );! //announce success! operation.setSuccessful();! operation.setCompleted(); console.log(operation complete);! //finish with callback! if (typeof callback == "function") {! callback.call(scope || thisProxy, operation);! }! },
  24. 24. ./create ContatosIOScom.loiane.beagajs../../../ContatosIOS
  25. 25. Emuladores
  26. 26. RIPPLE
  27. 27. Ferramentas de Debug
  28. 28. iWebInspector
  29. 29. Weinre
  30. 30. Build
  31. 31. XCode Eclipsebuild.phonegap.com
  32. 32. MelhoresPráticas
  33. 33. sencha app build
  34. 34. 4 Storage
  35. 35. REST
  36. 36. JSON-P
  37. 37. CORShttp://enable-cors.org/
  38. 38. Local StorageWeb SQL (SQLite)
  39. 39. 5Multiplataforma
  40. 40. "css": [ { "path": "../../resources/css/base.css", "update": "delta" }, { "path": "resources/css/sencha-touch.css", "platform": [chrome, safari, ios], "update": "delta" }, { "path": "resources/css/android.css", "platform": [android], "update": "delta" }, { "path": "resources/css/bb.css", "platform": [blackberry], "update": "delta" }, { "path": "resources/css/wp.css", "platform": [ie10], "update": "delta" }]
  41. 41. 6Nativo x Web
  42. 42. Acesso DeviceNativo SimWeb Parcial
  43. 43. Acesso Velocidade DeviceNativo Sim SimWeb Parcial ?
  44. 44. Acesso Tempo Velocidade Device DesenvolvimentoNativo Sim Sim CaroWeb Parcial ? Sussa
  45. 45. Acesso Tempo App Velocidade Device Desenvolvimento StoreNativo Sim Sim Caro SimWeb Parcial ? Sussa Não
  46. 46. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim NãoWeb Parcial ? Sussa Não Sim
  47. 47. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* Já vamos discutir
  48. 48. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store PlatformNativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não SimHíbrido Sim ? Sussa* Sim Sim
  49. 49. AppHíbrida?
  50. 50. Desenvolva Desenvolva
  51. 51. Desenvolva Desenvolva Teste Teste
  52. 52. Desenvolva Desenvolva Teste Teste Build Build
  53. 53. {Desenvolva Desenvolva Desenvolva Híbrido Teste Teste Teste Build Build Build Build
  54. 54. ?
  55. 55. Our biggest mistakewas betting too much on HTML5
  56. 56. In your face!
  57. 57. “So, when Mark Zuckerberg saidHTML5 wasnt ready, we took a littleoffense to the comment.”
  58. 58. Sussa*
  59. 59. Plugins
  60. 60. SQLite nativoBarCode Scanner etc
  61. 61. 7 Produção
  62. 62. IssuesApp Store
  63. 63. Parece uma diferente App Aprenda a web desenvolver Parece para mobile, app iOS não web App Buttons, única Hyperlink iOS Human Interface Design Guidelines Eventos Touch, não WebAgregador de links Pinch, Zoom #fail App Intuitiva
  64. 64. Exemplos de Apps
  65. 65. Obrigada! http://loiane.com @loiane

×