Your SlideShare is downloading. ×
Rhinos have tea_on_azure
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rhinos have tea_on_azure

77

Published on

This presentation shows how to build Sencha Touch apps connected with Microsoft Azure.

This presentation shows how to build Sencha Touch apps connected with Microsoft Azure.

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

  • Be the first to like this

No Downloads
Views
Total Views
77
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. Rhinos have tea on Azure Cédric Derue – GWAB 2014
  • 2.  Senior consultant @ Altran  Skills: Zend Framework 2 ASP.NET MVC JavaScript NoSQL  Twitter: @cderue About me
  • 3.  You love JavaScript,  You love hybrid mobile app programming. Who this session is for? Choose your mobile development path
  • 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.  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. 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. Sencha Touch 2 components
  • 8.  Sencha Touch  Framework  Sencha Architect  IDE  Sencha Cmd  CLI Sencha is not only a framework
  • 9. Exploring Sencha Touch Extensions for Azure
  • 10. Objectives  Manage tasks in Azure Mobile Services  Authenticate users with theirs social accounts  Push notifications MyFixIt Sencha app
  • 11. Workflow
  • 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. --.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.  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.  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. First sign of life
  • 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. "requires": [ "touch-azure" ] > sencha app build Add a dependency to your app.json
  • 19. Observing the result
  • 20. Ext.application({ name: 'MyFixIt', requires: [ 'Ext.azure.Azure' ] }); Reference Azure extensions in your app
  • 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. Create a new Azure Mobile Service
  • 23. Observing the result
  • 24. Exploring Azure Mobile Services
  • 25. Generate Access Keys
  • 26.  Create any data tables your Sencha Touch application may require for application data storage. Add a new table to your mobile service
  • 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. 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. Configure your social identities
  • 30. Ext.application({ azure: { authIdentities : [ 'microsoft', 'facebook', 'twitter', 'google' ] } }); Activate authentication on Sencha Touch
  • 31. Hybrid app: why and how?
  • 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.  Build and emlulate > sencha app build -run native  Build only > sencha app build native Let’s build and emulate your app
  • 34. What else?  Azure Storage  Push notifications
  • 35. It’s time to demonstrate
  • 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. The Azure effects on the body This is Cloud François!
  • 38. Thank you!

×