This talk will cover how you can use Sencha's sencha.io cloud services in your Sencha Touch 2 mobile web app. Sencha provides several service to create, store and share data in the cloud. In this talk we go through the following services: * Sencha.io Login: provides a set of APIs for user registration and login. * Sencha.io Data: synchronizes data with the cloud. * Sencha.io Messaging: enables reliable one-to-one and one-to-many messaging. * Sencha.io Src: dynamically resize images for the ever increasing number of mobile screen sizes and will see how to use and implement the services in detail. The implementation will be explained by the code of an Sencha Touch 2 app using the sencha.io services.

1. Sencha Touch 2 and Sencha.io
how to use cloud services in your app
Nils Dehl, Senior Developer (@nilsdehl)

2. Nils Dehl
Senior Developer
Trainer
Meetup Frankfurt
Conference Talks
Sencha Forum: mrsunshine
Conference Photographer

3. flickr.co
m/photo
s/nils-de
hl

4. 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

5. Customer-Portfolio

6. Sencha Touch 2

11. Sencha.io

12. Sencha.io
Services
Login
Data
Messaging
Deployment
Src

13. Login
Sencha.io
Sencha Forum
Facebook
Twitter

14. Data
sync local data in the cloud
access from multi devices
offline handling

15. Messaging
send messages
receive messages
one to one
one to many

16. Deployment
version management
management tools
usergroup management
app delivery through the Sencha app repository
myapp.senchafy.com

17. Src
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding

18. Demo App

20. How to use Sencha.io

21. Sencha.io
settings

26. How to implement the
Sencha.io in your app
x

27. Setup

28. 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',
],

29. Init / Setup
ioSetup: function() {
// Calling this method is optional. It assumes the defaults if not called.
Ext.io.Io.setup({
// app id string configured 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();
},

30. Login

31. 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);
},

33. 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
});
},

34. Share data between
user devices

36. Use proxy type syncstorage in the
model
Ext.define('Photos.model.Photo', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'title'
},
...
],
proxy: {
type: 'syncstorage',
id: 'photos'
}
}
});

37. 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() {}
});
}
}
});
},

38. 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
});
},

39. 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();
}
}

40. Share between users
of usergroup

42. 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
});
}
});
},

43. 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
});
}
},

44. 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();
},

45. Manipulate images
with Src

46. Sencha.io Src
Ext.define('Photos.view.Photo', {
extend: 'Ext.Container',
xtype: 'photodetail',
config: {
cls: 'bg photodetail',
scrollable: true,
styleHtmlContent: true,
tpl: '<div class="image">' +
'<img src="http://src.sencha.io/280/{url}" />' +
'</div>'
}
});

47. dkd
development
kommunikation
design
thank you.

48. ???

49. @nilsdehl
flickr.com/photos/nils-dehl/