Revin Guillen: Deploying and managing applications with Sencha Space

In this session, the presenter will focus on the basic deployment features of Sencha Space: Managing users, apps, and devices. The presentation will begin with a discussion of real-world customer pain points before going into a series of demos on Space functionality. Advanced Topics may include: Composing complex apps in Space with the Invoke API

Transcript

1. View Slide

2. Revin Guillen
   Sencha
   

   View Slide

3. From the Dream…
   

   View Slide

4. …to the Pain
   

   View Slide

5. View Slide

6. “The Next IE6”
   Is IE8 the next IE6? – Quora
   www.quora.com > … > Web Browsers > Internet Explorer
   I am concerned that the decision by Microsoft to not support Internet Explorer 9 on
   Windows XP will mean that a large number of users will be stuck on IE8 for …
   Microsoft begs Web devs not to make WebKit the new IE6
   arstechnica.com/…microsoft-begs-web-devs-not-to-make-…
   Internet Explorer 10 is a fast browser with good standards compliance,
   And the version of Internet Explorer 10 included with Windows Phone 8 …
   Is Google Chrome The New IE6 For Web Designers…
   www.webdesignerdepot.com/…is-google-chrome-the-new-ie-6-for-web-…
   …you about the market share being a big difference, but IE7 being the
   Next IE6: Seriously? …… And no, it is not the next IE6 for web developers.
   Adobe Flash: evolve or become the next IE6
   www.majordojo.com/2010/.../adobe-flash-evolve-or-become-the-next-ie6....
   Adobe Flash: evolve or become the next IE6. 29 Apr 2010. A couple of weeks ago I
   commented upon Apple's decision to not support Flash on any of their mobile ...
   

   View Slide

7. What if…?
   

   View Slide

8. View Slide

9. Sencha Space
   •  Runtime Of Unusual Strength
   •  Managed app platform
   •  Modern web runtime
   •  Plus user authentication
   •  Plus security & encryption
   •  Plus hardware access
   •  Securely sandboxed & centrally managed
   

   View Slide

10. Why Sencha Space?
    •  Hardware access
    •  Consistent APIs
    •  Write once, run any-Space
    •  Optimized for Business
    •  End-to-end Data Security
    •  Per-app VPN
    •  Authentication & Authorization
    •  Identity Management
    •  Over-the-air Deployment
    •  Simplified Maintenance
    •  Offline Enablement
    

    View Slide

11. View Slide

12. Admin Console
    •  Define applications
    •  Manage users & groups
    •  Enforce per-app API
    access policy
    •  Activity Reports &
    Audit Support
    

    View Slide

13. Space Client
    •  Manages HTML5 apps
    •  Enforces policies from
    Admin Console
    •  Provides developer API
    •  Secures & segregates
    application data
    

    View Slide

14. What is a Space App?
    •  HTML + CSS + JavaScript
    •  includes space.js
    

    View Slide

15. App Stores
    

    View Slide

16. Rich APIs
    

    View Slide

17. Hardware APIs
    Orientation
    Camera
    Barcode
    

    View Slide

18. Orientation API
    Ext.space.Orientation.on({  
         orientationchange:  function(o)  {  
               //  o  ==  {  alpha:  a,  beta:  b,  gamma:  c  }  
         }  
    });  
    

    View Slide

19. Camera API
    Ext.space.Camera.capture({  
         source:  "camera",          //  or  "album",  "library"  
         destination:  "file",    //  or  "data"  
         collection:  "photos",  //  file  collection  
         encoding:  "jpg",            //  or  "png"  
         quality:  "80%",              //  percentage  string  
         width:  "1920",                //  pixels  
         height:  "1080"                //  pixels  
    }).then(function(file)  {  file.view();  });  
    

    View Slide

20. Barcode API
    Ext.space.Barcode.scan().then(function(barcodes)  {  
         barcodes.forEach(function(code,  idx)  {  
               console.log(idx  +  ":  "  +  code);  
         });  
    });  
    

    View Slide

21. Storage APIs
    Secure local storage
    Secure files
    Secure SQL
    

    View Slide

22. Secure Local Storage API
    var  things  =  Ext.space.SecureLocalStorage.get("things");  
     
    things.set("monsters",  {  eels:  "shrieking"  })  
         .then(function()  {…});  
     
    things.get("monsters").then(function(obj){  
         //  obj.eels  ==  "shrieking"  
    });  
    

    View Slide

23. Secure Local Storage API
    things.remove("someKey").then(function(success)  {…});  
     
    things.has("someKey").then(function(hasKey)  {…});  
     
    things.forEach(function(key,  value)  {  
         //  operate  on  each  
    }).then(function()  {  
         //  done  
    });  
    

    View Slide

24. Secure Local Storage API
    things.count().then(function(numberOfItems)  {…});  
     
    things.clear().then(function()  {…});  
    

    View Slide

25. Secure Files API
    var  files  =  Ext.space.SecureFiles.get("myCollection");  
     
    files.get("users.txt").then(function(contents)  {…});  
     
    var  info  =  {  name:  "places.txt",  type:  "text/plain"  };  
    files.set(info,  "Florin,  Guilder").then(function(file)  {  
         //  file  saved  
    });
    

    View Slide

26. Secure Files API
    //  fetch  every  file  in  the  collection  
    files.query().then(function(theFiles)  {…});  
     
    //  filtered  fetch:  text  files  created  in  the  last  week  
    var  dt  =  new  Date((new  Date).getTime()  –  60480000);  
    files.query({  createdAfter:  dt,  type:  "text/plain"})  
         .then(function(theFiles)  {…});  
    

    View Slide

27. Secure Files API
    //  compress  a  collection  into  an  archive  
    files.compress({  archiveName:  "things.zip"  })  
         .then(function(archive)  {…});  
     
    //  download  directly  into  the  collection  
    files.download({  url:  "http://example.com/map.pdf"  })  
         .then(function(file)  {…});  
    

    View Slide

28. Secure Files API
    //  upload  a  file  to  a  web  form  
    someFile.upload({  
         url:  "…",                      //  form  URL  
         fileFieldName:  "…",  //  form  field  for  the  file  
         params:  {…},                //  optional  extra  POST  data  
         headers:  {…}                //  optional  extra  request  headers  
    }).then(function(response)  {  
         //  response.statusCode,  .headers,  .body  
    });  
    

    View Slide

29. Secure SQL API
    //  create  a  database  
    var  db  =  Ext.space.SecureSql.get("myDatabaseName");
    

    View Slide

30. Secure SQL API
    //  set  up  version  1  of  the  DB  schema  
    db.createSchema(1,  function(tx)  {  
         tx.query("CREATE  TABLE  [etc…]");  
         tx.query("CREATE  TABLE  [etc…]");  
    });
    

    View Slide

31. Secure SQL API
    db.insert(  
         "myTableName",  
         ["fieldA",  "fieldB"],  //  column  names  
         ["valueA",  "valueB"]    //  values  
    ).then(function(insertId)  {…});  
     
    INSERT  INTO  myTableName  (fieldA,  fieldB)  
                 VALUES  ("valueA",  "valueB");  
    

    View Slide

32. Secure SQL API
    db.insertMany(  
         tableName,  
         ["fieldA",  "fieldB"],  //  column  names  
         records                              //  array  of  value  arrays  
    ).then(function()  {…});
    

    View Slide

33. Secure SQL API
    db.query(  
         "SELECT  id,  name  FROM  users  WHERE  email  =  ?",  
         ["roberts@pirate-­‐ship-­‐revenge.org"]  
    ).then(function(rows)  {  
         //  rows[0].id  
         //  rows[0].name  ==  "Dread  Pirate  Roberts"  
    });
    

    View Slide

34. Secure SQL API
    var  tx  =  db.createTransaction();  
     
    //  queries,  each  with  optional  success  &  error  handlers  
    tx.query(…).then(…).error(…);  
    tx.insert(…).then(…).error(…);  
    tx.query(…).then(…).error(…);  
     
    //  run  the  whole  thing  
    tx.execute().then(…).error(…);  
    

    View Slide

35. Application APIs
    Fullscreen
    Child web view
    Application list
    Application focus
    Push notifications
    Custom event logging
    Invoke
    

    View Slide

36. Fullscreen API
    Ext.space.Fullscreen.enter().then(function()  {…});  
    Ext.space.Fullscreen.leave().then(function()  {…});  
     
    Ext.space.Fullscreen.onToggle()  
         .then(function(isFullscreen)  {  
               if  (isFullscreen)  {…}  
         });  
     
    Ext.space.Fullscreen.isEnabled;  //  true/false
    

    View Slide

37. Child Web View API
    var  child  =  window.open("http://example.com/");  
     
    child.open("http://example.com/another/page.html");  
    child.close();  
     
    //  loadstart,  loadstop,  loaderror,  close  events  
    child.on("loadstop",  function(evt)  {  
         //  evt.url  has  finished  loading;  do  something…  
    });  
    

    View Slide

38. Child Web View API
    //  close  all  open  children  
    Ext.space.Window.closeAll();
     
    //  list  all  open  child  web  views  
    Ext.space.Window.getChildren()  
         .then(function(children)  {…});
    

    View Slide

39. Application List API
    Ext.space.Applications.list()  
         .then(function(list)  {  
               //  open  them  all!  
               list.forEach(function(app)  {  
                     Ext.space.Applications.open(app);  
               });  
         }  
    );  
    

    View Slide

40. Application Focus API
    Ext.space.Focus.onToggle(function(isForeground)  {  
         if  (isForeground)  {  
               //  something…  
         }  else  {  
               //  something  else…  
         }  
    });  
    

    View Slide

41. Notifications API
    Ext.space.Notification.onBadgeChange(function(badge)  {…});  
     
    Ext.space.Notification.onData(function(data)  {…});  
     
    Ext.space.Notification.onAlert(function(alert)  {  
         //  alert.message,  alert.icon,  alert.tags  
    });  
     
    

    View Slide

42. Notifications API
    var  note  =  {  
         message:  "Hello!  My  name  is  Inigo  Montoya.  "  +  
                           "You  killed  my  father.  Prepare  to  die.",  
         icon:  "http://example.com/inigo.png",  
         tags:  ["revenge",  "speech",  "#fencing4eva"]  
    };  
     
    Ext.space.Notification.showAlert(note).then(function()  {…});  
    

    View Slide

43. Notifications (well, Badge) API
    Ext.space.Notification.getBadge(function(badge)  {…});  
     
    Ext.space.Notification.setBadge(10).then(function(data)  {…});  
     
    //  clear  the  badge  by  passing  null  or  nothing  
    Ext.space.Notification.setBadge().then(function(data)  {…});  
    

    View Slide

44. Custom Event Logging API
    Ext.space.Logger.logEvent({  
         category:  "video",  
         action:  "play",  
         label:  "Princess  Bride",  //  optional  
         extra:  "…"                              //  optional  
    });  
    

    View Slide

45. Invoke API
    Direct Inter-Application
    Communication
    

    View Slide

46. Invoke API
    Ext.space.Invoke("chat").then(function(connection)  {  
         connection.send({  
               type:  "presence",  
               user:  "fezzik@senchacon.com",  
               online:  true  
         },  true).then(function(invokeAnswer)  {…});  
    });
    

    View Slide

47. Ext.space.Invoke.onMessage(function(senderId,  message)  {  
         var  promise  =  new  Ext.Promise();  
         if  (message.type  ==  "presence")  {  
               getUserData(message.user).then(function(result)  {  
                     promise.fulfill(result);  
               });  
         }  else  {  
               promise.reject("Message  not  understood.");  
         }  
         return  promise;  
    });  
    

    View Slide

48. Dan Gallo
    Sales Engineer
    Sencha
    @DanielJGallo
    

    View Slide

49. Inventory App - Scenario
    •  A grocery supplies company owns a number of warehouses, and
    they need a mobile/tablet app for members of staff to lookup
    details of their large stock, exceeding 230,000 items
    •  The app needs to work offline, due to limited or no network
    connectivity in the warehouses or out in the field
    

    View Slide

50. Inventory App - Scenario
    •  The app must be able to scan barcodes and quickly retrieve the
    associated product details, along with a photo of the product
    •  The app must allow the staff member to perform an inventory of
    items at a warehouse, capturing multiple barcodes and storing the
    inventory info on the device
    

    View Slide

51. Application details
    •  Built using Ext JS 5.1, so
    that the grid can be
    leveraged
    •  Real dataset that
    contains over 230,000
    grocery items and
    90,000 product photos
    •  All data stored on the
    device, allowing the
    app to run in an offline
    state
    

    View Slide

52. Demo
    

    View Slide

53. SecureSql
    •  Use of a custom SecureSql proxy
    enables Ext JS Stores to directly
    interact with the encrypted SQLite
    database
    •  Allows buffered stores to select
    pages of data, along with
    performing sorting and filtering
    •  Updates to data can be easily made
    through record.save
    Ext.define('Inventory.model.Base', {
    extend: 'Ext.data.Model',
    requires: [
    'Inventory.data.proxy.SecureSql',
    'Ext.data.identifier.Uuid'
    ],
    identifier: 'uuid',
    proxy: {
    type: 'securesql',
    database: 'InventoryDB'
    }
    });
    

    View Slide

54. Publishing
    "space": {
    "id": 63553,
    "name": "Inventory",
    "host": "https://api.space.sencha.com/json.rpc",
    "file": "${app.output.base}",
    "apiKey": "7KxGphKZwtLv+ha5w2G1Xl5FK2Ajdt4dM4uMC5b354jhm3=",
    "secret": "gf6Gg9Y3QaYKszJJnnnnn8N2TYnaYTaL7S2jaMFTCeLm="
    }
    •  Applications can be deployed as an archive (Zip file) straight to the
    Sencha Space Management Console for simple and secure
    deployment to end users
    •  First, configure the app.json file:
    

    View Slide

55. Publishing
    > sencha config -prop app.version=1.1.3 then app publish
    •  Build your Sencha app for production
    •  Then deploy using the “app publish” command in Sencha Cmd:
    

    View Slide

56. Publishing
    •  Application runtime is then
    securely deployed in Sencha
    Space
    •  Updated app pushed to users
    •  Negates the need to have a
    web server to host the source
    code in an unprotected state
    •  Provides the capability for
    the app to run offline
    

    View Slide

57. Marc Gusmano
    Sales Engineer
    Sencha
    

    View Slide

58. Using Invoke in Sencha Space
    var  success  =  function  (message)  {  
         log('success  '  +  JSON.stringify(message,  null,  2));  
    };  
     
    var  failure  =  function  (error)  {  
         log('  failure  '  +  json.stringify(error,  null,  2));  
    };  
     
    var  send  =  function  (connection)  {  
         connection.send(data,  true).then(  
               success,  
               failure  
         );  
    };  
     
    Ext.space.Invoke.get('map').then(send,  failure);  
    

    View Slide

59. Handling the Invoke Message
                   Ext.onSpaceReady(function(){  
     
                           Ext.space.Invoke.onMessage(function  (senderId,  message)  {  
                                   var  promise  =  new  Ext.Promise();  
                                   mapview.name  =  message.name;  
                                   mapview.setPromise(promise);  
                                   mapview.handleMessage(me,  message);    
                                   return  promise;    
                           });  
     
                   });  
    handler:  function  ()  {  
         try  {  
               mapview.getPromise().fulfill({  name:  mapview.name  });  
         }  
         catch  (err)  {  
               alert(err.message);  
         }  
    }  
    

    View Slide

60. About the Map Application…
    •  Written with Sencha Touch 2.4.1
    •  Utilized Ext.ux.LeafletMap
    •  https://market.sencha.com/extensions/ext-ux-leafletmap
    •  Mapbox.com map tile server (could also have
    offline access to map tiles)
    •  geoJSON for building outline layer
    

    View Slide

61. ?
    

    View Slide

62. !
    

    View Slide

63. View Slide

64. View Slide

65. Thank you!
    sencha.com/products/space/
    space.sencha.io/docs
    github.com/sencha/SpaceExamples
    

    View Slide