Rhinos have tea on Azure provides an overview of building hybrid mobile apps using Sencha Touch and Azure Mobile Services. The session covers Sencha Touch frameworks and components, connecting a Sencha app to Azure for data storage, authentication and push notifications, and building the app into a hybrid mobile app using PhoneGap. The demo app allows users to manage tasks by storing and retrieving data from an Azure Mobile Services table and authenticating with social login identities.

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!