A Hitchhikers Guide to Azure Mobile Apps David

  • Slides: 29
Download presentation
A Hitchhiker's Guide to Azure Mobile Apps

A Hitchhiker's Guide to Azure Mobile Apps

David Giard Microsoft Technical Evangelist • @David. Giard • David. Giard. com • Technology.

David Giard Microsoft Technical Evangelist • @David. Giard • David. Giard. com • Technology. And. Friends • d. [email protected] com @David. Giard

Agenda • • • Why Azure Mobile Apps? Mobile Architecture Common Data Access Customization

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

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

Why Azure Mobile Apps? • Integrate with • Web Apps • Logic Apps • API Apps • All features of Web Apps @David. Giard

Why Azure Mobile Services? • Frees you from plumbing code • Handles API Changes

Why Azure Mobile Services? • Frees you from plumbing code • Handles API Changes • Cross-Platform solution • Choose Java. Script or. NET @David. Giard

Mobile Architecture Phone REST API Phone Data Tablet or PC i. Pad Java. Script

Mobile Architecture Phone REST API Phone Data Tablet or PC i. Pad Java. Script i. Phone Android @David. Giard

Pieces of Azure Mobile Apps Permissions READ Client Code Identity INSERT UPDATE SQL Server

Pieces of Azure Mobile Apps Permissions READ Client Code Identity INSERT UPDATE SQL Server table DELETE @David. Giard

REST https: //Giard. azurewebsites. net/Tables/Table 1 https: //mymobileapp-code. azurewebsites. net/Tables/Table 1 • GET, PUT,

REST https: //Giard. azurewebsites. net/Tables/Table 1 https: //mymobileapp-code. azurewebsites. net/Tables/Table 1 • GET, PUT, POST, DELETE, PATCH • Extend GET with o. Data Query syntax @David. Giard

REST HTTP Verb GET POST DELETE Action Read Data Create Data Delete Data SQL

REST HTTP Verb GET POST DELETE Action Read Data Create Data Delete Data SQL SELECT… INSERT… DELETE… PUT or PATCH Update Data UPDATE… @David. Giard

REST VERB (POST) Client Request Data (JSON) Endpoint Response @David. Giard

REST VERB (POST) Client Request Data (JSON) Endpoint Response @David. Giard

REST VERB (GET) Request Client Endpoint Response Data (JSON) @David. Giard

REST VERB (GET) Request Client Endpoint Response Data (JSON) @David. Giard

o. Data Query Syntax Extension Description $filter WHERE clause $inlinecount # items in table

o. Data Query Syntax Extension Description $filter WHERE clause $inlinecount # items in table $orderby SORT clause $select Columns to return $skip #records to skip $top #records to return. . /Tables/Table 1? $filter=state eq IL&$orderby=Last. Name @David. Giard

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

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

Permissions @David. Giard

Permissions @David. Giard

Demo @David. Giard

Demo @David. Giard

Identity – Single Sign-On In n g Si Client Twitter or Facebook or Google

Identity – Single Sign-On In n g Si Client Twitter or Facebook or Google or Microsoft TOKEN Request Azure Mobile App API @David. Giard

Identity @David. Giard

Identity @David. Giard

Identity function insert(item, user, request) { item. Created. By = user. Id; request. execute();

Identity function insert(item, user, request) { item. Created. By = user. Id; request. execute(); } function read(query, user, request) { query. where ({Created. By: user. Id}); request. execute(); } @David. Giard

Demo @David. Giard

Demo @David. Giard

Scaling @David. Giard

Scaling @David. Giard

Scaling @David. Giard

Scaling @David. Giard

API Scripts @David. Giard

API Scripts @David. Giard

API Scripts <Mobile Service URL>/api/<API Name>. , e. g https: //giard. azure-mobile. net/api/My. Api

API Scripts <Mobile Service URL>/api/<API Name>. , e. g https: //giard. azure-mobile. net/api/My. Api exports. post = function(request, response) { // Use "request. service" to access features of your mobile service, e. g. : // var tables = request. service. tables; // var push = request. service. push; }; response. send(status. Codes. OK, { message : 'Hello World!' }); exports. get = function(request, response) { response. send(status. Codes. OK, { message : 'Hello World!' }); }; @David. Giard

Demo @David. Giard

Demo @David. Giard

Push Notifications @David. Giard

Push Notifications @David. Giard

Push Notifications var payload = '<? xml Azure version="1. 0" encoding="utf-8"? ><toast><visual><binding template="Toast. Text

Push Notifications var payload = '<? xml Azure version="1. 0" encoding="utf-8"? ><toast><visual><binding template="Toast. Text 01">' + App '<text Mobile id="1">Sample Toast</text></binding></visual></toast>'; Services var push = request. service. push; } push. wns. send(null, payload, 'wns/toast', { success: function (push. Response) { console. log("Sent push: ", push. Response); Push Service } APN (Apple) GCM (Google) }); WNS (Windows 8) MPNS (Windows Phone) @David. Giard

Push Notifications Azure Mobile Services e Notification Hub Push Service APN (Apple) GCM (Google)

Push Notifications Azure Mobile Services e Notification Hub Push Service APN (Apple) GCM (Google) WNS (Windows 8) MPNS (Windows Phone) rib sc b su tinyurl. com/Push. Noti @David. Giard

Push Notification on Windows 8 & WP 8 1. Create Mobile Service 2. Write

Push Notification on Windows 8 & WP 8 1. Create Mobile Service 2. Write Client App 1. 2. 3. 4. Associate app with store Get Package SID and Client ID from Live Services. Copy to Mobile Service. Register notifications channel in On. Launched (App. xaml. cs) Enable Toast notifications (Package. appxmanifest) 3. Update service to send Push Notification tinyurl. com/Win 8 Push @David. Giard

So Long and Thanks! David Giard • @David. Giard • David. Giard. com •

So Long and Thanks! David Giard • @David. Giard • David. Giard. com • Technology. And. Friends. com • channel 9. msdn. com/niners/dgiard @David. Giard