SenchaTouch 2 and Sencha.io

  • 5,347 views
Uploaded on

This talk will cover how you can use Sencha's sencha.io cloud services in your Sencha Touch 2 mobile web app. …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,347
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
80
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sencha Touch 2 and Sencha.iohow to use cloud services in your appNils Dehl, Senior Developer (@nilsdehl)
  • 2. Nils Dehl Senior Developer Trainer Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine Conference Photographer
  • 3. flickr.co m/photo s/nils-de hl
  • 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
  • 7. Sencha.io
  • 8. Sencha.ioServicesLoginDataMessagingDeploymentSrc
  • 9. Login Sencha.io Sencha Forum Facebook Twitter
  • 10. Data sync local data in the cloud access from multi devices offline handling
  • 11. Messaging send messages receive messages one to one one to many
  • 12. Deployment version management management tools usergroup management app delivery through the Sencha app repository myapp.senchafy.com
  • 13. Src src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
  • 14. Demo App
  • 15. How to use Sencha.io
  • 16. Sencha.iosettings
  • 17. How to implement theSencha.io in your appx
  • 18. Setup
  • 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. 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. Login
  • 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. 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. Share data betweenuser devices
  • 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. 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. 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. 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. Share between usersof usergroup
  • 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. 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. 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. Manipulate imageswith Src
  • 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. dkd development kommunikation designthank you.
  • 36. ???
  • 37. @nilsdehlflickr.com/photos/nils-dehl/