Global Windows Azure Bootcamp : Cedric Derue Rhinos have tea on azure. (sponsor Annuel du MUG-Lyon: Viseo)

493 views
403 views

Published on

Global Windows Azure Bootcamp : Cedric Derue Rhinos have tea on azure

Sponsor Annuel: Viseo

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Global Windows Azure Bootcamp : Cedric Derue Rhinos have tea on azure. (sponsor Annuel du MUG-Lyon: Viseo)

  1. 1. Rhinos have tea on Azure Cédric Derue – GWAB 2014
  2. 2.  Senior consultant @ Altran  Skills: Zend Framework 2 ASP.NET MVC JavaScript NoSQL  Twitter: @cderue About me
  3. 3.  You love JavaScript,  You love hybrid mobile app programming. Who this session is for? Choose your mobile development path
  4. 4. Mobile development paths Multiple platforms Single platform Partial capability Full capability HTML5 Web developer skills Instant updates Unrestricted distribution Hybrid Web developer skills Access to native platform App store distribution Native Advanced UI interactions Fatest performance App store distribution
  5. 5.  Sencha Touch 2 overview  Sencha Touch Extensions for Azure  Azure Mobile Services overview  Access to data stored in Azure Mobile Services  Custom logic  Authentification  Demo Agenda
  6. 6. Sencha Touch is a high-performance, HTML5 mobile app platform with over 50 built-in components, themes for every mobile platform, and a built-in MVC system. Why Sencha Touch 2?
  7. 7. Sencha Touch 2 components
  8. 8.  Sencha Touch  Framework  Sencha Architect  IDE  Sencha Cmd  CLI Sencha is not only a framework
  9. 9. Exploring Sencha Touch Extensions for Azure
  10. 10. Objectives  Manage tasks in Azure Mobile Services  Authenticate users with theirs social accounts  Push notifications MyFixIt Sencha app
  11. 11. Workflow
  12. 12.  Move to Sencha Touch SDK directory > cd /path/to/sencha-touch-sdk  Generate a new app skeleton > sencha generate app MyApp /path/to/myapp Initialize a new Sencha Touch app
  13. 13. --.sencha --touch/ --app/ |--controller |--model |--profile |--store |--view --resources |--css |--sass --index.html --app.json --packager.json Understanding Sencha Touch 2 app structure MVC Architecture
  14. 14.  Using default syntax > sencha app build [production|testing|native|package]  Using Ant > sencha ant [production|testing|native|package] build Building a Sencha Touch 2 app
  15. 15.  Start the local web server > sencha web start  Browse localhost at port 1841 http://localhost:1841 Launching a Sencha Touch 2 app in browser
  16. 16. First sign of life
  17. 17.  Using Sencha Cmd > sencha package get touch-azure  Downloading on Sencha Market https://market.sencha.com/extensions/sencha- touch-extensions-for-windows-azure  Add as a dependency within your app Adding the Azure extensions
  18. 18. "requires": [ "touch-azure" ] > sencha app build Add a dependency to your app.json
  19. 19. Observing the result
  20. 20. Ext.application({ name: 'MyFixIt', requires: [ 'Ext.azure.Azure' ] }); Reference Azure extensions in your app
  21. 21. Accelerate the deployment of your mobile backend services to:  Store your data in the cloud with SQL Azure  Expose custom logic by API  Authenticate users  Push notifications  Consume tiers API Azure Mobile Services overview
  22. 22. Create a new Azure Mobile Service
  23. 23. Observing the result
  24. 24. Exploring Azure Mobile Services
  25. 25. Generate Access Keys
  26. 26.  Create any data tables your Sencha Touch application may require for application data storage. Add a new table to your mobile service
  27. 27. var SendGrid = require('sendgrid').SendGrid; function insert(item, user, request) { request.execute({ success: function() { // Proceed insertion request.respond(); // Send the email in the background sendEmail(item); } }); function sendEmail(item) { var sendgrid = new SendGrid('<username>', '<password>'); sendgrid.send({ to: '<email>', from: '<from>', subject: 'New to-do item', text: 'A new to-do was added: ' + item.text }, function(success, message) { if (!success) console.error(message); }); } } Send SMS from custom API
  28. 28. Configure Azure in your Sencha app Ext.application({ azure: { appKey: 'myazureservice-access-key', appUrl: 'myazure-service.azure-mobile.net' }, launch: function() { // Call Azure initialization Ext.Azure.init(this.config.azure); } });
  29. 29. Configure your social identities
  30. 30. Ext.application({ azure: { authIdentities : [ 'microsoft', 'facebook', 'twitter', 'google' ] } }); Activate authentication on Sencha Touch
  31. 31. Hybrid app: why and how?
  32. 32.  Install PhoneGap > npm install -g phonegap  Add support to PhoneGap > sencha phonegap init <AppID>  Target your device in phonegap.local.properties  phonegap.platforms=<ios android blackberry wp8>  phonegap.build.remote=<false|true> phonegap.build.remote.username=<username> phonegap.build.remote.password=<password> Build into an hybrid app with PhoneGap
  33. 33.  Build and emlulate > sencha app build -run native  Build only > sencha app build native Let’s build and emulate your app
  34. 34. What else?  Azure Storage  Push notifications
  35. 35. It’s time to demonstrate
  36. 36. http://www.windowsazure.com/en- us/documentation/articles/mobile-services- html-get-started-data/ http://www.windowsazure.com/en- us/pricing/details/mobile-services/ Resources
  37. 37. The Azure effects on the body This is Cloud François!
  38. 38. Thank you!

×