Share
Embed
Slide 1
Slide 1 text
Sencha Touch 2 and Sencha.io
how to use cloud services in your app
Nils Dehl, Senior Developer (@nilsdehl)
Slide 2
Slide 2 text
Nils Dehl
Senior Developer
Trainer
Meetup Frankfurt
Conference Talks
Sencha Forum: mrsunshine
Conference Photographer
Slide 3
Slide 3 text
ickr.com/photos/nils-dehl
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Customer-Portfolio
Slide 6
Slide 6 text
Sencha Touch 2
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Sencha.io
Slide 12
Slide 12 text
Sencha.io
Services
Login
Data
Messaging
Deployment
Src
Slide 13
Slide 13 text
Login
Sencha.io
Sencha Forum
Facebook
Twitter
Slide 14
Slide 14 text
Data
sync local data in the cloud
access from multi devices
of ine handling
Slide 15
Slide 15 text
Messaging
send messages
receive messages
one to one
one to many
Slide 16
Slide 16 text
Deployment
version management
management tools
usergroup management
app delivery through the Sencha app repository
myapp.senchafy.com
Slide 17
Slide 17 text
Src
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding
Slide 18
Slide 18 text
Demo App
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
How to use Sencha.io
Slide 21
Slide 21 text
Sencha.io
settings
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
How to implement the
Sencha.io in your app
x
Slide 27
Slide 27 text
Setup
Slide 28
Slide 28 text
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',
],
Slide 29
Slide 29 text
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();
},
Slide 30
Slide 30 text
Login
Slide 31
Slide 31 text
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);
},
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
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
});
},
Slide 34
Slide 34 text
Share data between
user devices
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
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'
}
}
});
Slide 37
Slide 37 text
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() {}
});
}
}
});
},
Slide 38
Slide 38 text
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
});
},
Slide 39
Slide 39 text
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();
}
}
Slide 40
Slide 40 text
Share between users
of usergroup
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
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
});
}
});
},
Slide 43
Slide 43 text
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
});
}
},
Slide 44
Slide 44 text
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();
},
Slide 45
Slide 45 text
Manipulate images
with Src
Slide 46
Slide 46 text
Sencha.io Src
Ext.de ne('Photos.view.Photo', {
extend: 'Ext.Container',
xtype: 'photodetail',
con g: {
cls: 'bg photodetail',
scrollable: true,
styleHtmlContent: true,
tpl: '
' +
'
' +
'
'
}
});
Slide 47
Slide 47 text
d d
k
development
kommunikation
design
thank you.
Slide 48
Slide 48 text
? ?
?
Slide 49
Slide 49 text
@nilsdehl
flickr.com/photos/nils-dehl/