BeagaJS 2013: Sencha Touch + PhoneGap
9 gostaram2,375 visualizações
O documento aborda o desenvolvimento de aplicativos móveis usando Sencha Touch e PhoneGap, destacando características como o acesso nativo a funcionalidades do dispositivo e a integração de APIs. Apresenta um fluxo de trabalho para a criação e testes de aplicativos, além de discutir as diferenças entre abordagens nativas, híbridas e web. Também enfatiza práticas recomendadas e desafios comuns na produção e publicação de aplicativos nas lojas.
![app.json
"js": [
{
"path": "touch/sencha-touch.js"
},
{
"path": "cordova-2.5.0.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
],](https://image.slidesharecdn.com/beagajs-130302123953-phpapp01/85/BeagaJS-2013-Sencha-Touch-PhoneGap-26-320.jpg)
![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);
! }
! },](https://image.slidesharecdn.com/beagajs-130302123953-phpapp01/85/BeagaJS-2013-Sencha-Touch-PhoneGap-27-320.jpg)
!["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"
}
]](https://image.slidesharecdn.com/beagajs-130302123953-phpapp01/85/BeagaJS-2013-Sencha-Touch-PhoneGap-49-320.jpg)
BeagaJS 2013: Sencha Touch + PhoneGap
- 1. Dev Mobile Multiplataforma e Open Source com Sencha Touch e PhoneGap Loiane Groner
- 2. Loiane Groner Java JUG Leader Sencha Community Leader 7+ XP Java 4+ XP Sencha Software Developer Manager @ Citibank http://loiane.com @loiane
- 4. 1 Sencha Touch
- 5. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web
- 6. Tem Acesso Nativo?
- 7. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Sencha Packager* Orientation PhoneGap Push Notifications Emulator
- 8. Sencha Touch não tem Acelerômetro Compass File
- 9. 2 Phone Gap
- 11. 3 Sencha Touch + PhoneGap
- 12. UIWebView WebView HTML 5 CSS 3 Stores JS APIs JS
- 14. Mock Up Store Dispositivo Desenvolvimento Testes Simulação
- 15. M O C K U P
- 16. Resultado
- 17. Mãos à Obra!
- 18. sencha generate app Contatos ../beagajs/Contatos
- 20. Testes Locais
- 26. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.5.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
- 27. 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); ! } ! },
- 28. ./create ContatosIOS com.loiane.beagajs ../../../ContatosIOS
- 30. Emuladores
- 31. R I P P L E
- 32. Ferramentas de Debug
- 33. iWebInspector
- 34. Weinre
- 35. Build
- 36. XCode Eclipse build.phonegap.com
- 39. sencha app build
- 40. 4 Storage
- 42. REST
- 43. JSON-P
- 45. Local Storage Web SQL (SQLite)
- 49. "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" } ]
- 50. 6 Nativo x Web
- 52. Acesso Device Nativo Sim Web Parcial
- 53. Acesso Velocidade Device Nativo Sim Sim Web Parcial ?
- 54. Acesso Tempo Velocidade Device Desenvolvimento Nativo Sim Sim Caro Web Parcial ? Sussa
- 55. Acesso Tempo App Velocidade Device Desenvolvimento Store Nativo Sim Sim Caro Sim Web Parcial ? Sussa Não
- 56. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store Platform Nativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não Sim
- 57. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store Platform Nativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim ? Já vamos discutir Sussa* Já vamos discutir
- 58. Acesso Tempo App Cross Velocidade Device Desenvolvimento Store Platform Nativo Sim Sim Caro Sim Não Web Parcial ? Sussa Não Sim Híbrido Sim ? Sussa* Sim Sim
- 59. App Híbrida?
- 61. Desenvolva Desenvolva
- 62. Desenvolva Desenvolva Teste Teste
- 63. Desenvolva Desenvolva Teste Teste Build Build
- 64. { Desenvolva Desenvolva Desenvolva Híbrido Teste Teste Teste Build Build Build Build
- 65. ?
- 66. Our biggest mistake was betting too much on HTML5
- 67. In your face!
- 68. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
- 71. Sussa*
- 72. Plugins
- 73. SQLite nativo BarCode Scanner etc
- 74. 7 Produção
- 75. Issues App Store
- 76. 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 Web Agregador de links Pinch, Zoom #fail App Intuitiva
- 78. Exemplos de Apps
- 79. Obrigada! http://loiane.com @loiane