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!