Click here to load reader

BeagaJS 2013: Sencha Touch + PhoneGap

  • View
    3.261

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Text of BeagaJS 2013: Sencha Touch + PhoneGap

  • 1. Dev Mobile Multiplataforma eOpen Source comSencha Touch e PhoneGapLoiane Groner

2. Loiane GronerJava JUG LeaderSencha Community Leader7+ XP Java4+ XP SenchaSoftware DeveloperManager @ Citibank http://[email protected] 3. Autora TcnicaInternacional 4. 1SenchaTouch 5. Primeiro framework Javascript paradesenvolvimento de apps mobile ricasusando padres web 6. Tem AcessoNativo? 7. Acesso NativoApp in PurchasesCmeraContatos (read only)*Connection (online/ofine)Device Info (nome, plataforma, uuid)GeoLocationNotications (vibrar)Sencha Packager*OrientationPhoneGapPush Notications Emulator 8. Sencha Touch no temAcelermetroCompass File 9. 2Phone Gap 10. 3Sencha Touch + PhoneGap 11. UIWebViewWebViewHTML 5 CSS 3 StoresJSAPIs JS 12. Workflow deDesenvolvimento 13. Mock UpStore DispositivoDesenvolvimento Testes Simulao 14. MOCKUP 15. Resultado 16. Mos Obra! 17. sencha generate appContatos../beagajs/Contatos 18. Testes Locais 19. TestesAutomatizados 20. http://bryntum.com 21. Hora de Integrar! 22. app.json"js": [ {"path": "touch/sencha-touch.js" }, { "path": "cordova-2.5.0.js" }, {"path": "app.js","bundle": true,"update": "delta" }], 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. ./create ContatosIOScom.loiane.beagajs../../../ContatosIOS 25. Emuladores 26. RIPPLE 27. Ferramentas deDebug 28. iWebInspector 29. Weinre 30. Build 31. XCode Eclipsebuild.phonegap.com 32. MelhoresPrticas 33. sencha app build 34. 4Storage 35. REST 36. JSON-P 37. CORShttp://enable-cors.org/ 38. Local StorageWeb SQL (SQLite) 39. 5Multiplataforma 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. 6Nativo x Web 42. Acesso DeviceNativoSimWebParcial 43. Acesso Velocidade DeviceNativoSimSimWebParcial ? 44. Acesso Tempo Velocidade Device DesenvolvimentoNativoSimSimCaroWebParcial ?Sussa 45. Acesso TempoApp Velocidade Device DesenvolvimentoStoreNativoSimSimCaroSimWebParcial ?Sussa No 46. Acesso TempoApp Cross Velocidade Device DesenvolvimentoStore PlatformNativoSimSimCaroSimNoWebParcial ?Sussa No Sim 47. Acesso TempoApp CrossVelocidadeDevice Desenvolvimento Store PlatformNativo SimSimCaroSimNo WebParcial ?Sussa No SimHbridoSim? Sussa* Sim Sim?J vamos discutir Sussa*J vamos discutir 48. Acesso TempoApp CrossVelocidadeDevice Desenvolvimento Store PlatformNativo SimSimCaroSimNo WebParcial ?Sussa No SimHbridoSim? Sussa* Sim Sim 49. AppHbrida? 50. Desenvolva Desenvolva 51. Desenvolva DesenvolvaTesteTeste 52. Desenvolva DesenvolvaTesteTesteBuildBuild 53. {Desenvolva Desenvolva DesenvolvaHbridoTesteTesteTesteBuildBuildBuild Build 54. ? 55. Our biggest mistakewas betting too much on HTML5 56. In your face! 57. So, when Mark Zuckerberg saidHTML5 wasnt ready, we took a littleoffense to the comment. 58. Sussa* 59. Plugins 60. SQLite nativoBarCode Scanneretc 61. 7Produo 62. IssuesApp Store 63. Parece uma diferenteAppAprenda a webdesenvolver Parece para mobile,app iOS no webAppButtons,nica Hyperlink iOS Human InterfaceDesign Guidelines Eventos Touch, no WebAgregador delinks Pinch, Zoom#fail App Intuitiva 64. Exemplos de Apps 65. Obrigada! http://[email protected]

Search related