Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SourceDevCon 2012 - SenchaTouch 2 and Sencha.io

SourceDevCon 2012 - SenchaTouch 2 and Sencha.io

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

Nils Dehl

May 07, 2012
Tweet

More Decks by Nils Dehl

Other Decks in Technology

Transcript

  1. Sencha Touch 2 and Sencha.io how to use cloud services

    in your app Nils Dehl, Senior Developer (@nilsdehl)
  2. 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
  3. 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', ],
  4. 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(); },
  5. 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); },
  6. 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 }); },
  7. 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' } } });
  8. 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() {} }); } } }); },
  9. 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 }); },
  10. 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(); } }
  11. 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 }); } }); },
  12. 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 }); } },
  13. 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(); },
  14. 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>' } });