SourceDevCon 2012 - SenchaTouch 2 and Sencha.io

SenchaTouch2 and Sencha.io how to use cloud services in your app

Transcript

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. ickr.com/photos/nils-dehl
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 of ine 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 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(); },
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.de ne('Photos.model.Photo', { extend: 'Ext.data.Model', con g: { elds: [ { 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.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>' } });
47. d d k development kommunikation design thank you.
48. ? ? ?
49. @nilsdehl flickr.com/photos/nils-dehl/