Sencha�Touch�2�and�Sencha.io�
how�to�use�cloud�services�in�your�app
Nils Dehl, Senior Developer (@nilsdehl)
Nils�Dehl
Senior Developer
Trainer
Meetup Frankfurt
Conference Talks
Sencha Forum: mrsunshine
Conference Photographer
!ickr.com/photos/nils-dehl
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
Customer-Portfolio
Sencha�Touch�2
Sencha.io
Sencha.io�Services
LoginDataMessagingDeploymentSrc
Login
Sencha.io
Sencha Forum
Data
sync local data in the cloud
access from multi devices
of!ine handling
Messaging
send messages
receive messages
one to one
one to many
Deployment
version management
management tools
usergroup management
app delivery through the Sencha app repository
myapp.senchafy.com
Src
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding
Demo�App
How�to�use�Sencha.io
Sencha.io�settings
How�to�implement�the�Sencha.io�in�your�app
x
Setup
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', ],
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();},
Login�
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);},
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 });},
Share�data�between�user�devices
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' } }});
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() {} }); } } });},
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 });},
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(); }}
Share�between�users�of�usergroup
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 }); } });},
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 }); }},
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();},
Manipulate�images�with�Src
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>' }});
d dkdevelopmentkommunikationdesign
thank�you.
? ??
@nilsdehl
flickr.com/photos/nils-dehl/
Recommended
