Sencha Touch 2 and Sencha.iohow to use cloud services in your appNils Dehl, Senior Developer (@nilsdehl)
Nils Dehl Senior Developer Trainer Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine Conference Photographer
flickr.co         m/photo                s/nils-de                            hl
dkd Internet Service GmbH owner-managed full-service internet agency Frankfurt Germany development, communication & design...
Customer-Portfolio
Sencha Touch 2
Sencha.io
Sencha.ioServicesLoginDataMessagingDeploymentSrc
Login Sencha.io Sencha Forum Facebook Twitter
Data sync local data in the cloud access from multi devices offline handling
Messaging send messages receive messages one to one one to many
Deployment version management management tools usergroup management app delivery through the Sencha app repository myapp.s...
Src src.sencha.io resize images   altering sizes   percentage sizing data URLs domain sharding
Demo App
How to use Sencha.io
Sencha.iosettings
How to implement theSencha.io in your appx
Setup
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/sen...
Init / SetupioSetup: function() {     // Calling this method is optional. It assumes the defaults if not called.     Ext.i...
Login
Get app .io usergroup/** * get the app usergroup object from the server */ioGetGroup: function() {     Ext.io.Io.getGroup(...
Login / AuthenticatedoLogin: function() {    var formValues = this.getLoginView().getValues();     // the io usergroup obj...
Share data betweenuser devices
Use proxy type syncstorage in themodelExt.define(Photos.model.Photo, {     extend: Ext.data.Model,     config: {         f...
Add to store and syncaddPhoto: function(button) {    var form = button.up(formpanel),         values = form.getValues(),  ...
Listen on user messagesaddUserMessageReceiver: function() {   Ext.io.Io.getCurrentUser({        callback: function(cb, isA...
Listen on user messagesonUserReceivedMessage: function(cb, bool, sender, message) {   var store = null,        view = this...
Share between usersof usergroup
publish to message queueshareInTheCloud: function(data, user) {     Ext.io.Io.getQueue({          params: {               ...
Subscribe to message queueonLoginStatusChanged: function(status) {    if (status) {          Ext.io.Io.getQueue({         ...
handle received dataonUserReceivedMessage: function(cb, bool, sender, message) {   var store = Ext.getStore(shareditems), ...
Manipulate imageswith Src
Sencha.io SrcExt.define(Photos.view.Photo, {    extend: Ext.Container,    xtype: photodetail,    config: {        cls: bg ...
dkd     development     kommunikation     designthank you.
???
@nilsdehlflickr.com/photos/nils-dehl/
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
SenchaTouch 2 and Sencha.io
Upcoming SlideShare
Loading in …5
×

SenchaTouch 2 and Sencha.io

5,898 views

Published on

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 sizes

and 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.

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,898
On SlideShare
0
From Embeds
0
Number of Embeds
1,228
Actions
Shares
0
Downloads
84
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

SenchaTouch 2 and Sencha.io

  1. 1. Sencha Touch 2 and Sencha.iohow to use cloud services in your appNils Dehl, Senior Developer (@nilsdehl)
  2. 2. Nils Dehl Senior Developer Trainer Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine Conference Photographer
  3. 3. flickr.co m/photo s/nils-de hl
  4. 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. 5. Customer-Portfolio
  6. 6. Sencha Touch 2
  7. 7. Sencha.io
  8. 8. Sencha.ioServicesLoginDataMessagingDeploymentSrc
  9. 9. Login Sencha.io Sencha Forum Facebook Twitter
  10. 10. Data sync local data in the cloud access from multi devices offline handling
  11. 11. Messaging send messages receive messages one to one one to many
  12. 12. Deployment version management management tools usergroup management app delivery through the Sencha app repository myapp.senchafy.com
  13. 13. Src src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
  14. 14. Demo App
  15. 15. How to use Sencha.io
  16. 16. Sencha.iosettings
  17. 17. How to implement theSencha.io in your appx
  18. 18. Setup
  19. 19. 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, ],
  20. 20. Init / SetupioSetup: function() { // Calling this method is optional. It assumes the defaults if not called. Ext.io.Io.setup({ // app id string configured 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();},
  21. 21. Login
  22. 22. 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);},
  23. 23. Login / AuthenticatedoLogin: 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 });},
  24. 24. Share data betweenuser devices
  25. 25. Use proxy type syncstorage in themodelExt.define(Photos.model.Photo, { extend: Ext.data.Model, config: { fields: [ { name: title }, ... ], proxy: { type: syncstorage, id: photos } }});
  26. 26. Add to store and syncaddPhoto: 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() {} }); } } });},
  27. 27. Listen on user messagesaddUserMessageReceiver: 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 });},
  28. 28. Listen on user messagesonUserReceivedMessage: 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(); }}
  29. 29. Share between usersof usergroup
  30. 30. publish to message queueshareInTheCloud: 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 }); } });},
  31. 31. Subscribe to message queueonLoginStatusChanged: 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 }); }},
  32. 32. handle received dataonUserReceivedMessage: 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();},
  33. 33. Manipulate imageswith Src
  34. 34. Sencha.io SrcExt.define(Photos.view.Photo, { extend: Ext.Container, xtype: photodetail, config: { cls: bg photodetail, scrollable: true, styleHtmlContent: true, tpl: <div class="image"> + <img src="http://src.sencha.io/280/{url}" /> + </div> }});
  35. 35. dkd development kommunikation designthank you.
  36. 36. ???
  37. 37. @nilsdehlflickr.com/photos/nils-dehl/

×