Visual Studio 2013, Xamarin and Microsoft Azure Mobile Services: A Match Made in Heaven

Visual Studio 2013, Xamarin and

Microsoft Azure Mobile Services:

A Match Made in Heaven

Rick G. GaribayVP, Distinguished Engineer, Neudesic

Level: Introductory

About Me

• VP, Distinguished Engineer leading the DPG group at Neudesic

• Working on IoT, Intelligent Transportation and Hospitality & Gaming

• Microsoft MVP, Microsoft Azure

• Co-Author, “Windows Server AppFabric Cookbook” by Packt Pub.

• Chairman, Co-Founder Phoenix Connected Systems User Group

(PCSUG.org)

• twitter: @rickggaribay

• blog: http://rickgaribay.net

• email: rick.garibay@neudesic.com | b-rigari@microsoft.com

Developing

Mobile Apps

Silo Approach:

Build

Apps Multiple

Times

Write Once,

Run Anywhere

Approach

Lowest

Common

Denominator

App Generation

Most Popular Languages

Xamarin Overview

XamarinApproach

Native with

Code

Sharing

Windows APIs

iOSAPIs

100% coverage

AndroidAPIs

100% coverage

How Xamarin Works

C# + .NET Runtime

Native UI

Native Performance

Xamarin.iOS does full Ahead Of Time

(AOT) compilation to produce an ARM

binary for Apple’s App Store.

Xamarin.Android takes advantage of

Just In Time (JIT) compilation on the

Android device.

IDE Options by Platform• Android

– Xamarin Studio

– Visual Studio

• iOS– Xamarin Studio

– Visual Studio

• Windows– Visual Studio

Visual Studio 2013 Support

– Xamarin.Android

– Xamarin.iOS

– Windows Phone

– Windows Store

– Universal Apps

Portable Class Libraries

File/New/Portable Class Library

Meet Tasky

Tasky Demo App

• Create a task

• List tasks

• Complete a task

• Delete a task

Tasky Architecture

Tasky.WindowsPhone Tasky.Android Tasky.iOS

Common

SQLite

DEMO 1

Cross Platform Development with Xamarin & Visual Studio 2013

Tasky Opportunities

• Refactor code to use a single back end

• Move back end to cloud

• Add Authentication & Authorization

• Maximize code sharing and reuse

Azure Mobile Services

What is Azure Mobile Services?Storage

Authentication

Logic

Push

Scheduler

Mobile Services Overview

Windows Store

iOS

Android

Xamarin

Sencha

Windows Phone

iOS

Android

HTML 5/JS

SDKs

Node.js Express

.NET Web API

RE

ST

AP

I

Facebook Twitter Microsoft GoogleActive

Directory

SQLTable

StorageBlob

Storage

WNS & MPNS APNS GCM

Mongo DB

Notification Hubs

Source Control

Azure Mobile Services• One backend for all your devices

– Client SDKs for Windows, Windows Phone, iOS, Android, Cordova, and Xamarin

– Backends can be either .NET or JavaScript

• Store data in the cloud– Using SQL or other backends like Azure Storage Tables and Mongo DB

• Authenticate users– FB, Twitter, Microsoft Account, Google, and AAD

• Push notifications– Built in support for cross-platform, low latency, and high volume push notifications with

notification hubs

DEMO 2

Creating an Azure Mobile Service

Server Side Table Scripts

25

Node.js scripts

Intercept CRUD requests

to tables

Passes through to SQL by

default

Fully customizable

.NET Web API

Visual Studio

.NET Web API

backend in

Visual Studio

MongoDB, Table Storage,

SQL out of the box

Structured Storage

• Powered by SQL Database

• Supports rich querying capabilities

• Dynamic Schematization

• Data management in:– Azure Portal

– SQL Portal (Silverlight)

– SQL Management Studio

– REST API

– Azure CLI Tools

– SQL CLI

• Auto Generated Columns:

– id – unique guid

– __createdAt – date

– __updatedAt – date

– __version – timestamp

• Helps with concurrency and

offline

26

The REST API

Action HTTP Method URL Suffix

Create POST /TodoItem

Read GET /TodoItem?filter=id%3D42

Update PATCH /TodoItem/id

Delete DELETE /TodoItem/id

Base Endpoint: https://MobileService.azure-mobile.net/tables/*

DEMO 3

Storing and accessing data with Azure Mobile Services

Data Authorization

• Per HTTP method auth options:– App Key Required

• Not ideal for production use

– Everyone

– Authenticated Users

– Admins and other scripts• Requires Master Key as header

• 401 Unauthorized response if security check fails

29

User Auth Flow (server)

30

GOOGLE

FACEBOOK

TWITTER

MOBILE SERVICE

DEVICE

MICROSOFT

ACCOUNT

MICROSOFT

ACCOUNT

AAD

The User Object

User.level

– Admin

– Authenticated

– Anonymous

User.userId

– Provider:id or undefined

User.getIdentities()

– UserId

– Provider Access Token / Secret

– Basic user information (i.e. name, username, locale, picture, link)

31

DEMO 4

Adding Authentication with Azure Mobile Services

Code Reuse

UniversalApps

Universal Apps• Easily share code between platforms

Available in VS 2013• Just add Android and iOS

Coming soon to Xamarin Studio• For Mac users

Portable Class Libraries

Pure PCL• Limits expressiveness, but easy to build

• Requires interfaces/plugs to work properly

Advanced PCL:• Combined PCL with NuGet

• Public API remains “pure”

• Implementation is as native and direct as you desire

PCL + NuGet

DEMO 5

Refactoring Tasky for Maximum Reuse

Resources

• Xamarin for Visual Studio

• TaskyPortable Sample on GitHub

• Xamarin + Azure Mobile Services

• Azure Mobile Services PCL State of the Art

About Me

• VP, Distinguished Engineer leading the DPG group at Neudesic

• Working on IoT, Intelligent Transportation and Hospitality & Gaming

• Microsoft MVP, Microsoft Azure

• Co-Author, “Windows Server AppFabric Cookbook” by Packt Pub.

• Chairman, Co-Founder Phoenix Connected Systems User Group

(PCSUG.org)

• twitter: @rickggaribay

• blog: http://rickgaribay.net

• email: rick.garibay@neudesic.com | b-rigari@microsoft.com

Introducing

Xamarin.Forms

New in Xamarin 3.0

Xamarin + Xamarin.FormsWith Xamarin.Forms:

more code-sharing, native controlsTraditional Xamarin approach

Shared UI Code

Xamarin + Xamarin.Forms

Shared UI Code

Quickly and easily build native user

interfaces using shared code

Xamarin.Forms elements map to native

controls and behaviors

Mix-and-match Xamarin.Forms with

native APIs

What’s Included� 40+ Pages, Layouts, and Controls

� Build from code behind or XAML

� Two-way Data Binding

� Navigation

� Animation API

� Dependency Service

� Messaging Center

Pages

Content MasterDetail Navigation Tabbed Carousel

Layouts

Stack Absolute Relative Grid ContentView ScrollView Frame

Login ViewModel

Login Page – Code Behind

Login Page – XAML