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

Facebook

Twitter

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/