Download - Rhinos have tea_on_azure
Rhinos have tea on Azure
Cédric Derue – GWAB 2014
Senior consultant @ Altran
Skills:
Zend Framework 2
ASP.NET MVC
JavaScript
NoSQL
Twitter: @cderue
About me
You love JavaScript,
You love hybrid mobile app programming.
Who this session is for?
Choose your
mobile
development path
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
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
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?
Sencha Touch 2 components
Sencha Touch Framework
Sencha Architect IDE
Sencha Cmd CLI
Sencha is not only a framework
Exploring Sencha Touch Extensions for Azure
Objectives
Manage tasks in Azure Mobile Services
Authenticate users with theirs social accounts
Push notifications
MyFixIt Sencha app
Workflow
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
--.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
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
Start the local web server
> sencha web start
Browse localhost at port 1841
http://localhost:1841
Launching a Sencha Touch 2 app in browser
First sign of life
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
"requires": [
"touch-azure"
]
> sencha app build
Add a dependency to your app.json
Observing the result
Ext.application({
name: 'MyFixIt',
requires: [ 'Ext.azure.Azure' ]
});
Reference Azure extensions in your app
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
Create a new Azure Mobile Service
Observing the result
Exploring Azure Mobile Services
Generate Access Keys
Create any data tables your Sencha Touch
application may require for application data
storage.
Add a new table to your mobile service
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
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); } });
Configure your social identities
Ext.application({
azure: {
authIdentities : [
'microsoft',
'facebook',
'twitter',
'google'
]
}
});
Activate authentication on Sencha Touch
Hybrid app: why and how?
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
Build and emlulate
> sencha app build -run native
Build only
> sencha app build native
Let’s build and emulate your app
What else?
Azure Storage Push notifications
It’s time to demonstrate
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
The Azure effects on the body
This is Cloud François!
Thank you!