senchatouch 2 and sencha.io
DESCRIPTION
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 sizesand 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.TRANSCRIPT
![Page 1: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/3.jpg)
!ickr.com/photos/nils-dehl
![Page 4: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/5.jpg)
Customer-Portfolio
![Page 6: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/6.jpg)
Sencha�Touch�2
![Page 7: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/7.jpg)
![Page 8: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/8.jpg)
![Page 9: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/9.jpg)
![Page 10: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/10.jpg)
![Page 11: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/11.jpg)
Sencha.io
![Page 12: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/12.jpg)
Sencha.io�Services
LoginDataMessagingDeploymentSrc
![Page 13: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/13.jpg)
Login
Sencha.io
Sencha Forum
![Page 14: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/18.jpg)
Demo�App
![Page 19: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/19.jpg)
![Page 20: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/20.jpg)
How�to�use�Sencha.io
![Page 21: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/21.jpg)
Sencha.io�settings
![Page 22: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/22.jpg)
![Page 23: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/23.jpg)
![Page 24: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/24.jpg)
![Page 25: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/25.jpg)
![Page 26: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/27.jpg)
Setup
![Page 28: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/30.jpg)
Login�
![Page 31: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/32.jpg)
![Page 33: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/34.jpg)
Share�data�between�user�devices
![Page 35: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/35.jpg)
![Page 36: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/40.jpg)
Share�between�users�of�usergroup
![Page 41: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/41.jpg)
![Page 42: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/45.jpg)
Manipulate�images�with�Src
![Page 46: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/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.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/47.jpg)
d dkdevelopmentkommunikationdesign
thank�you.
![Page 48: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/48.jpg)
? ??
![Page 49: SenchaTouch 2 and Sencha.io](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f9106b4c905435d8b5094/html5/thumbnails/49.jpg)
@nilsdehl
flickr.com/photos/nils-dehl/