FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
2 likes•941 views
This document discusses Sencha Touch and PhoneGap for building mobile applications. It begins with an introduction to Sencha Touch, describing it as the first JavaScript framework for building rich mobile apps using web standards. It outlines the core components and features of Sencha Touch like lists, forms, events and stores. The document then provides an overview of PhoneGap/Cordova, describing it as a platform that allows writing native mobile apps using HTML, CSS and JavaScript. It discusses PhoneGap's capabilities for accessing device features like the camera, contacts and compass. The document proposes a workflow for developing Sencha Touch and PhoneGap applications together, covering mockups, development, testing, and deployment to app stores. It compares advantages of native,
![Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
grouper: {
groupFn: function(record) {
return record.get('lastName')[0];
}
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store,
grouped: true
});](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-21-320.jpg)
![Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
form.submit({
url: 'url/to/submit/to',
method: 'POST',
success: function() {
alert('form submitted successfully!');
}
});](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-23-320.jpg)
![function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
checkConnection();
Conexão](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-55-320.jpg)
![$ phonegap build ios
[phonegap] detecting iOS SDK environment...
[phonegap] using the local environment
[phonegap] compiling iOS...
[phonegap] successfully compiled iOS app](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-67-320.jpg)
![$ phonegap run android
[phonegap] detecting Android SDK environment...
[phonegap] using the local environment
[phonegap] compiling Android...
[phonegap] successfully compiled Android app
[phonegap] trying to install app onto device
[phonegap] no device was found
[phonegap] trying to install app onto emulator
[phonegap] successfully installed onto emulator](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-68-320.jpg)
![app.json
"js": [
{
"path": "touch/sencha-touch.js"
},
{
"path": "cordova-2.9.0.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
],](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-84-320.jpg)
![navigator.contacts.find(
! 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);
! }
! },
MyContacts.proxy.ContactsProxy](https://image.slidesharecdn.com/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-85-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/conenco2013-130920194445-phpapp01/85/FAESA-CONENCO-2013-Sencha-Touch-2-PhoneGap-104-320.jpg)
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
- 1. Sencha Touch + Phone Gap Loiane Groner
- 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
- 11. #changeBrazil
- 12. Aplicações
- 14. Mobile
- 15. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
- 16. Sencha Touch 1
- 17. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
- 19. O que tem no Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
- 20. Componentes Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio -Video - GeoLocation Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video Components
- 21. Ext.define('Contact', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'lastName'] } }); var store = Ext.create('Ext.data.Store', { model: 'Contact', sorters: 'lastName', grouper: { groupFn: function(record) { return record.get('lastName')[0]; } }, data: [ { firstName: 'Tommy', lastName: 'Maintz' }, { firstName: 'Rob', lastName: 'Dougan' }, { firstName: 'Ed', lastName: 'Spencer' }, { firstName: 'Jamie', lastName: 'Avins' }, { firstName: 'Aaron', lastName: 'Conran' }, { firstName: 'Dave', lastName: 'Kaneda' }, { firstName: 'Jacky', lastName: 'Nguyen' }, { firstName: 'Abraham', lastName: 'Elias' }, { firstName: 'Jay', lastName: 'Robinson'}, { firstName: 'Nigel', lastName: 'White' }, { firstName: 'Don', lastName: 'Griffin' }, { firstName: 'Nico', lastName: 'Ferrero' }, { firstName: 'Jason', lastName: 'Johnston'} ] }); Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>', store: store, grouped: true });
- 22. Forms
- 23. Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ] }); form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); } });
- 24. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
- 25. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
- 26. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
- 28. REST
- 29. JSON-P
- 30. Local Storage Web SQL (SQLite)
- 32. Temas Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 Use CSS3 & SASS - Flexible themes - Highly optimized e.g. Theming $base-color: #ff6699 CSS3 com Sass e Compass
- 34. Demo 1
- 36. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications Sencha Packager* PhoneGap Emulator
- 37. Sencha Touch não tem Acelerômetro Compass File
- 39. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
- 40. $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/
- 41. Phone Gap 2
- 42. •2008: início •2008:suporte a iPhone, Android e Blackberry 4 •2009: suporte a Symbian e webOS •2011: suporte a Windows Phone 7 •2011: Projeto sob Apache - novo nome
- 43. A partir do Phonegap 1.5.0
- 44. Apache Cordova •Cordova é o projeto Open Source •PhoneGap é a implementação •http://incubator.apache.org/cordova/
- 45. O que é Phonegap / Cordova? •Chromeless webkit browser •Plataforma mobile HTML 5 (wrapper) •Acesso Nativo
- 47. Phonegap é WORA? Write Once, Run Anywhere?
- 50. function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + 'n' + 'Acceleration Y: ' + acceleration.y + 'n' + 'Acceleration Z: ' + acceleration.z + 'n' + 'Timestamp: ' + acceleration.timestamp + 'n'); }; function onError() { alert('onError!'); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); Acceleration
- 51. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } Capturar Foto
- 52. function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } Capturar Foto com Edição
- 53. function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Biblioteca</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Album de Fotos</button> Busca Foto do Dispositivo
- 54. function onSuccess(heading) { alert('Heading: ' + heading.magneticHeading); }; function onError(error) { alert('CompassError: ' + error.code); }; navigator.compass.getCurrentHeading(onSuccess, onError); Compass/Bússula
- 55. function checkConnection() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; alert('Connection type: ' + states[networkState]); } checkConnection(); Conexão
- 56. function onDeviceReady() { var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Version: ' + device.version + '<br />'; } Propriedades do Dispositivo
- 57. var ref = window.open('http://loiane.com', '_blank', 'location=yes'); ref.addEventListener('loadstart', function() { alert('start: ' + event.url); }); ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); }); ref.addEventListener('exit', function() { alert(event.type); }); In App Browser
- 58. navigator.notification.alert( 'Alerta!', // message alertDismissed, // callback 'Titulo', // title 'Botão' // buttonName ); Notification - Alert
- 59. function showConfirm() { navigator.notification.confirm( 'Confirmar?', // message onConfirm, // callback to invoke with index of button pressed 'Titulo', // title 'OK,Cancel' // buttonLabels ); } Notification - Confirm
- 60. // Beepa 3 vezes function playBeep() { navigator.notification.beep(3); } Notification - Beep Não funciona no iOS
- 61. // Vibra por 2 segundos function vibrate() { navigator.notification.vibrate(2000); } Notification - Vibrar
- 62. Demo 2
- 65. $ sudo npm install -g phonegap
- 66. $ phonegap create hello com.example.hello HelloWorld
- 67. $ phonegap build ios [phonegap] detecting iOS SDK environment... [phonegap] using the local environment [phonegap] compiling iOS... [phonegap] successfully compiled iOS app
- 68. $ phonegap run android [phonegap] detecting Android SDK environment... [phonegap] using the local environment [phonegap] compiling Android... [phonegap] successfully compiled Android app [phonegap] trying to install app onto device [phonegap] no device was found [phonegap] trying to install app onto emulator [phonegap] successfully installed onto emulator
- 70. HTML 5 CSS 3 JS UIWebView WebView APIs JS Stores
- 75. M O C K U P
- 76. Resultado
- 77. $ sencha generate app Contatos ../Contatos
- 79. Testes Locais
- 84. app.json "js": [ { "path": "touch/sencha-touch.js" }, { "path": "cordova-2.9.0.js" }, { "path": "app.js", "bundle": true, "update": "delta" } ],
- 85. navigator.contacts.find( ! 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); ! } ! }, MyContacts.proxy.ContactsProxy
- 86. $ ./create ContatosIOS com.loiane ../../../ContatosIOS
- 88. Emuladores
- 89. R I P P L E
- 91. iWebInspector
- 92. Weinre
- 93. Build
- 94. $ sencha app build $ sencha app build native $ sencha app package run packager.json
- 100. sencha app build
- 101. Multiplataforma 4
- 104. "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" } ]
- 105. Nativo x Web 5
- 110. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Sim Sim ? Caro Parcial Sussa Sim Não
- 111. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não
- 112. Nativo Web Acesso Device Velocidade Tempo Desenvolvimento App Store Cross Platform Sim Sim ? Caro Parcial Sussa Sim Não Sim Não Híbrido Sim ? Sussa* Sim Sim ? Sussa* Já vamos discutir Já vamos discutir
- 113. App Híbrida?
- 119. ?
- 120. Our biggest mistake was betting too much on HTML5
- 121. In your face!
- 122. “So, when Mark Zuckerberg said HTML5 wasn't ready, we took a little offense to the comment.”
- 125. Sussa*
- 126. Plugins
- 128. Issues App Store
- 129. Parece uma App Parece app iOS diferente web Aprenda a desenvolver para mobile, não web App únicaButtons, iOS Human Interface Design Guidelines Eventos Touch, não Web Pinch, Zoom #fail Agregador de links App Intuitiva Hyperlink