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/