28
A Hitchhiker's Guide to Azure Mobile Apps

Azure mobile apps

Embed Size (px)

Citation preview

Page 1: Azure mobile apps

A Hitchhiker's Guideto

Azure Mobile Apps

Page 2: Azure mobile apps

@DavidGiard

David GiardMicrosoft Technical Evangelist• @DavidGiard• DavidGiard.com• TechnologyAndFriends• [email protected]

Page 3: Azure mobile apps

@DavidGiard

Agenda• Why Azure Mobile Apps?• Mobile Architecture• Common Data Access• Customization• Dynamic Data• Client Code• Identity and Permissions• Scaling• API Scripts• Notifications

Page 4: Azure mobile apps

@DavidGiard

Why Azure Mobile Apps?• Create and maintain back-end data store• Frees you from plumbing code• Handles API Changes• Cross-Platform solution• Choose JavaScript or .NET

Page 5: Azure mobile apps

@DavidGiard

Why Azure Mobile Apps?• Integrate with• Web Apps• Logic Apps• API Apps

• All features of Web Apps

Page 6: Azure mobile apps

@DavidGiard

Mobile ArchitecturePhone

Data

Tablet or PC

iPhone

iPadAndroid

JavaScript

RESTAPIPhone

Page 7: Azure mobile apps

@DavidGiard

Permissions

Pieces of Azure Mobile Apps

SQL Server table

READ

INSERT

UPDATE

DELETE

IdentityClient Code

Page 8: Azure mobile apps

@DavidGiard

RESThttps://Giard.azurewebsites.net/Tables/Table1https://mymobileapp-code.azurewebsites.net/Tables/Table1• GET, PUT, POST, DELETE, PATCH• Extend GET with oData Query syntax

Page 9: Azure mobile apps

@DavidGiard

RESTHTTP Verb Action SQLGET Read Data SELECT…POST Create Data INSERT…DELETE Delete Data DELETE…PUT or PATCH Update Data UPDATE…

Page 10: Azure mobile apps

@DavidGiard

REST

ClientEndpoint

Request

Response

VERB(GET)

Data(JSON)

Page 11: Azure mobile apps

@DavidGiard

REST

ClientEndpoint

Request

VERB(POST)

Data(JSON)

Response

Page 12: Azure mobile apps

@DavidGiard

oData Query SyntaxExtension Description

$filter WHERE clause

$inlinecount # items in table

$orderby SORT clause

$select Columns to return

$skip #records to skip

$top #records to return

../Tables/Table1?$filter=state eq IL

../Tables/Table1?$filter=state eq IL&$orderby=LastName

Page 13: Azure mobile apps

@DavidGiard

Dynamic Schema • Automatically adds columns if matching data submitted• Useful during development• Turn off during production

Page 14: Azure mobile apps

@DavidGiard

Permissions

Page 15: Azure mobile apps

@DavidGiard

Demo

Page 16: Azure mobile apps

@DavidGiard

Identity – Single Sign-On

Client

Azure Mobile App API

Twitteror Facebook

or Google or Microsoft

Sign In

Request

TOKEN

Page 17: Azure mobile apps

@DavidGiard

Identityfunction insert(item, user, request) { item.CreatedBy = user.userId; request.execute();}

function read(query, user, request) { query.where ({CreatedBy:user.userId}); request.execute();}

Page 18: Azure mobile apps

@DavidGiard

Demo

Page 19: Azure mobile apps

@DavidGiard

Scaling

Page 20: Azure mobile apps

@DavidGiard

Scaling

Page 21: Azure mobile apps

@DavidGiard

API Scripts

Page 22: Azure mobile apps

@DavidGiard

API Scripts

exports.post = function(request, response) { // Use "request.service" to access features of your Mobile App, e.g.: // var tables = request.service.tables; // var push = request.service.push;

response.send(statusCodes.OK, { message : 'Hello World!' });};

exports.get = function(request, response) { response.send(statusCodes.OK, { message : 'Hello World!' });};

<Mobile App URL>/api/<API Name>

https://giard.azure-mobile.net/api/MyApie.g.,

Page 23: Azure mobile apps

@DavidGiard

Demo

Page 24: Azure mobile apps

@DavidGiard

Push Notifications

Page 25: Azure mobile apps

@DavidGiard

Push Notifications

App

Push ServiceAPN (Apple)

GCM (Google)WNS (Windows 8)

MPNS (Windows Phone)

Azure Mobile Apps

var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual><binding template="ToastText01">' + '<text id="1">Sample Toast</text></binding></visual></toast>'; var push = request.service.push;

push.wns.send(null, payload, 'wns/toast', { success: function (pushResponse) { console.log("Sent push:", pushResponse); } });}

Page 26: Azure mobile apps

@DavidGiard

Azure Mobile Apps

Push Notifications

Push ServiceAPN (Apple)

GCM (Google)WNS (Windows 8)

MPNS (Windows Phone)

NotificationHub

subscribe

tinyurl.com/PushNoti

Page 27: Azure mobile apps

@DavidGiard

Push Notification on Windows 8 & WP81. Create Mobile App2. Write Client App

1. Associate app with store2. Get Package SID and Client ID from Live Services. Copy to Mobile App.3. Register notifications channel in OnLaunched (App.xaml.cs)4. Enable Toast notifications (Package.appxmanifest)

3. Update service to send Push Notification

tinyurl.com/Win8Push

Page 28: Azure mobile apps

@DavidGiard

So Long and Thanks!David Giard• @DavidGiard• DavidGiard.com• TechnologyAndFriends.com• channel9.msdn.com/niners/dgiard