Download - SenchaTouch 2 and Sencha.io
![Page 1: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/1.jpg)
Sencha�Touch�2�and�Sencha.io�
how�to�use�cloud�services�in�your�app
Nils Dehl, Senior Developer (@nilsdehl)
![Page 2: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/2.jpg)
Nils�Dehl
Senior Developer
Trainer
Meetup Frankfurt
Conference Talks
Sencha Forum: mrsunshine
Conference Photographer
![Page 3: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/3.jpg)
!ickr.com/photos/nils-dehl
![Page 4: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/4.jpg)
dkd�Internet�Service�GmbH
owner-managed full-service internet agency
Frankfurt Germany
development, communication & design
specialized in TYPO3
Ruby on Rails
Sencha Touch / ExtJS
42 employees
+ 350 projects
![Page 5: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/5.jpg)
Customer-Portfolio
![Page 6: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/6.jpg)
Sencha�Touch�2
![Page 7: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/7.jpg)
![Page 8: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/8.jpg)
![Page 9: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/9.jpg)
![Page 10: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/10.jpg)
![Page 11: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/11.jpg)
Sencha.io
![Page 12: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/12.jpg)
Sencha.io�Services
LoginDataMessagingDeploymentSrc
![Page 13: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/13.jpg)
Login
Sencha.io
Sencha Forum
![Page 14: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/14.jpg)
Data
sync local data in the cloud
access from multi devices
of!ine handling
![Page 15: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/15.jpg)
Messaging
send messages
receive messages
one to one
one to many
![Page 16: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/16.jpg)
Deployment
version management
management tools
usergroup management
app delivery through the Sencha app repository
myapp.senchafy.com
![Page 17: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/17.jpg)
Src
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding
![Page 18: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/18.jpg)
Demo�App
![Page 19: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/19.jpg)
![Page 20: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/20.jpg)
How�to�use�Sencha.io
![Page 21: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/21.jpg)
Sencha.io�settings
![Page 22: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/22.jpg)
![Page 23: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/23.jpg)
![Page 24: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/24.jpg)
![Page 25: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/25.jpg)
![Page 26: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/26.jpg)
How�to�implement�the�Sencha.io�in�your�app
x
![Page 27: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/27.jpg)
Setup
![Page 28: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/28.jpg)
Load�Sencha.io�in�app.js
Ext.Loader.setPath({ 'Ext': 'sdk/src', ... 'Ext.io': 'libs/sencha-io-0.1.0/src/io', 'Ext.cf': 'libs/sencha-io-0.1.0/src/cf', ...});Ext.application({ requires: [ 'Ext.io.Io', 'Ext.io.data.Proxy', ],
![Page 29: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/29.jpg)
Init�/�Setup
ioSetup: function() { // Calling this method is optional. It assumes the defaults if not called. Ext.io.Io.setup({ // app id string con"gured on http://developer.sencha.io/apps appId: this.getIoAppId(), // the server URL. Defaults to http://msg.sencha.io url: 'http://msg.sencha.io', // logging level. Should be one of "none", "debug", // "info", "warn" or "error". Defaults to "error". logLevel: 'error', // the transport type to use for communicating with the server. // Should be one of "polling" (HTTP polling) or "socket" // (SocketIO). Defaults to "polling". transportName: 'socket' });},ioInit: function() { Ext.io.Io.init();},
![Page 30: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/30.jpg)
Login�
![Page 31: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/31.jpg)
Get�app�.io�usergroup
/** * get the app usergroup object from the server */ioGetGroup: function() { Ext.io.Io.getGroup({ id: this.getIoGroupId(), success: this.ioSetGroup, failure: function() { console.log("PHODO IO get group failure"); }, scope: this });},/** * set the io group object reference in auth module */ioSetGroup: function(group, options) { this.setIoGroup(group);},
![Page 32: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/32.jpg)
![Page 33: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/33.jpg)
Login�/�Authenticate
doLogin: function() { var formValues = this.getLoginView().getValues(); // the io usergroup object contains the authenticate method this.getIoGroup().authenticate({ params: { username: formValues.username ? formValues.username : '', password: formValues.password ? formValues.password : '' }, callback: function(opts, isAuth, user) { if (isAuth) { this.setIoUser(user); this.loginSuccess(); } else { this.loginFailure('Login Failure'); } }, scope: this });},
![Page 34: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/34.jpg)
Share�data�between�user�devices
![Page 35: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/35.jpg)
![Page 36: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/36.jpg)
Use�proxy�type�syncstorage�in�the�model
Ext.de"ne('Photos.model.Photo', { extend: 'Ext.data.Model', con"g: { "elds: [ { name: 'title' }, ... ],
proxy: { type: 'syncstorage', id: 'photos' } }});
![Page 37: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/37.jpg)
Add�to�store�and�sync
addPhoto: function(button) { var form = button.up('formpanel'), values = form.getValues(), store = Ext.getStore('photos'); store.add(values); store.sync(); // send message to all devices of the user to sync stores there as well Ext.io.Io.getCurrentUser({ callback: function(cb, isAuth, user) { if (isAuth) { user.send({ message: { event: 'photo-added' }, callback: function() {} }); } } });},
![Page 38: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/38.jpg)
Listen�on�user�messages
addUserMessageReceiver: function() { Ext.io.Io.getCurrentUser({ callback: function(cb, isAuth, user) { if (!isAuth) { console.log("no user, we need to auth.", user); this.redirectTo('login');
} else { // Listen on user messages user.receive({ callback: this.onUserReceivedMessage, scope: this }); } }, scope: this });},
![Page 39: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/39.jpg)
Listen�on�user�messages
onUserReceivedMessage: function(cb, bool, sender, message) { var store = null, view = this.getDataView();
if (message.event === 'photo-added') { store = Ext.getStore('photos') ; store.load(); store.sort(); store.sync(); }}
![Page 40: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/40.jpg)
Share�between�users�of�usergroup
![Page 41: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/41.jpg)
![Page 42: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/42.jpg)
publish�to�message�queue
shareInTheCloud: function(data, user) { Ext.io.Io.getQueue({ params: { name: 'share' }, callback: function(options, success, queue) { queue.publish({ message: { event: 'share', content: data, fromMailHash: Ext.cf.util.Md5.hash(user.data.email) }, callback: function() {}, scope: this }); } });},
![Page 43: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/43.jpg)
Subscribe�to�message�queue
onLoginStatusChanged: function(status) { if (status) { Ext.io.Io.getQueue({ params: { name: 'share' }, callback: function(options, success, queue) { queue.subscribe({ callback: this.onUserReceivedMessage, scope: this }); }, scope: this }); }},
![Page 44: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/44.jpg)
handle�received�data
onUserReceivedMessage: function(cb, bool, sender, message) { var store = Ext.getStore('shareditems'), record = { from: message.fromMailHash, imageurl: message.content.url, date: Ext.Date.format(new Date(), 'U') }; store.add(record); store.sort(); store.sync();},
![Page 45: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/45.jpg)
Manipulate�images�with�Src
![Page 46: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/46.jpg)
Sencha.io�Src
Ext.de"ne('Photos.view.Photo', { extend: 'Ext.Container', xtype: 'photodetail', con"g: { cls: 'bg photodetail', scrollable: true, styleHtmlContent: true, tpl: '<div class="image">' + '<img src="http://src.sencha.io/280/{url}" />' + '</div>' }});
![Page 47: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/47.jpg)
d dkdevelopmentkommunikationdesign
thank�you.
![Page 48: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/48.jpg)
? ??
![Page 49: SenchaTouch 2 and Sencha.io](https://reader034.vdocument.in/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/49.jpg)
@nilsdehl
flickr.com/photos/nils-dehl/