Building a cross-platform chat app with Microsoft Azure Mobile Services

14 may 2014, TimisoaraTimisoara .Net Meetup #1

Flavius Radu DemianSoftware developer, Avaelgo

I really like programming, especially web and mobile

Please feel free to ask questions any time and don’t be shy

Knowledge is power

flaviusdemian91@yahoo.com | flavius.demian@gmail.com | @slowarad

Expectations

Learn how to use mobile services

Learn when to use mobile services

Learn the strengths and limitations of mobile services

Learn that mobile services wants to be friend with everyone

Make you curious => go home and play with it

Agenda

Overview

Storage

Custom API

Authentication & Authorization

Scheduler

Agenda

Diagnostics & Logging

Scale

Cool Third Party Add-Ons

Design of the chat app

Review

A visual representation

Overview

Mobile Services allows you to accelerate your mobile app development by providing a turnkey way to structure storage, authenticate users, and send push notifications.

With SDKs for Windows, Android, iOS, and HTML as well as a powerful and flexible REST API, Mobile Services lets you to build connected applications for any platform and deliver a consistent experience across devices.

Overview

Clients for: Windows Store, Windows Phone 8, iOS, Android, Javascript

You can add a cloud backend to your app in minutes without the need for server code

The backend login can be written in node.js or c# (preview)

The SDK’s are open source (on github) , it’s integrated with GIT

Overview

Easily build a backend for mobile apps and not only

Easily manipulate data (filters)

Easily authenticate users

Send push notifications

Integrate your favorite services and great community

Server side logic

Node.js

Is a software platform for scalable server-side and networking applications Applications are written in JavaScript can be run within the Node.js runtime on Windows, Mac OS X and Linux with no changes

It is written in

Storage

Windows Azure SQL Database

Dynamic schema on/off

REST API generated per table -> Data centric platform

Access your data through :Portal, SQL Management Studio, Rest API

Storage

JSON to SQL data types conversions

“Data Centric” Server Logic

Backend runs Node JS on small azure VM’s

“Interceptors” exposed for all CRUD requests to all tables

You get access to a predefined set of node modules :

request, console, push.*, tables, statusCodes, azure, mssql

Custom API

You can write your own API very easily and quickly

If you need you can add extra Node JS packages

exports.get = function(req, res) { /* code here */ }

exports.post = function(req, res) {/* code here */ }

Small demo time part 1

Login in the portal and create a mobile service

Set GIT credentials and get repository

Create some tables, show interceptors

Create a custom API

See list of predefined packages -> click here

Push notifications

The notification provider server maintains a "persistent IP connection" with your device in order to deliver notifications when the app needs to 'say' something to you.

Payload limited, specific to platform

The global push object is used to send push notifications

Success and Error callbacks are provided

Push notifications

Platform specific providers:

Push notifications overview

1) The app requests a channel from the Notifications Provider

2) The app sends the channel url to Mobile Services which stores it

3) When a notification is sent, Mobile Services executes something like this:

push.mpns.send(channelUri….)

Windows Phone case study

4) The notification goes through the Notifications Provider which forwards it to the device

Authentication & Authorization

You can make provide quick auth in your app with

Facebook Twitter Google Microsoft

and Windows Azure Active Directory

Authorization

Table level authorization for CRUD operation

Everyone -> any request by anyone is accepted

Anyone with Application Key -> app key is sent on the request distributed (default)

Authenticated Users -> users authenticated with one of the mentioned identity providers

Authorization

Table level authorization for CRUD operation (*cont)

Scripts and Admins -> registers scripts or requests via the master key

The application key is not secure and should not be used to authenticate users of your app, especially in production

Scheduler

It runs jobs on simple or complex recurring schedules such as:

1) Send broadcast push notifications

2) Processing or resizing stored images

3) Invoking a Web Service over HTTP/s

4) Post a message to a Windows Azure Storage Queue, etc

Diagnostics and Logging

View diagnostics directly in the portal including :1) API calls2) CPU time 3) Data Out

LoggingConsole.* operations like console.log and console.error provide an easy means to debug your server side scripts.

Scale

Compute - scale between shared and reserved mode

Increase/decrease your instance count

Storage ability to scale out your mobile service tenant(s) to a dedicated SQL DB

Ability to scale up your SQL DB from web through business to 150GB. Since Microsoft Build it is up to 500GB .

Small demo time part 2

Push notifications

Authentication

Authorization

Diagnostics

Logging

Scale

Code cheat sheet - client

public MobileServiceClient MobileService = new MobileServiceClient(“dns”,“key"); public IMobileServiceTable<UserEntity> Users = App.MobileService.GetTable<UserEntity>();

public MobileServiceUser MobileServicesUser = await App.MobileService.LoginAsync(provider);

await UsersTable.InsertAsync(App.CurrentUser);

result = await App.MobileService.InvokeApiAsync<T>(“link”, HttpMethod.Get, extraParams);

App.MobileService.Logout();

Code cheat sheet – server (interceptor)

function insert(item, user, request) { console.log("item is: " + JSON.stringify(item));

var sql = "SELECT name FROM UserEntity WHERE providerIdLong = ? AND identityProvider = ?"; mssql.query(sql, [item.providerIdLong, item.identityProvider], { success: function(results) { if( results.length == 0){ results = null; } completeUserProfile(item, user, request, results); }, error: function(err) {

request.respond(statusCodes.BAD_REQUEST, { message: err }); } });}

Code cheat sheet – server (Api)

exports.get = function(req, res) { var userTable = req.service.tables.getTable('userEntity'); var userToExclude = req.query.userId; userTable.read({ success: function (items) { if (items.length > 0) { var finalResults = [], currentEntry = null; items.forEach(function(item) { if( item.providerIdLong != userToExclude){ currentEntry = new Object(); currentEntry.name = item.name;

finalResults.push(currentEntry); } }); res.send(statusCodes.OK, finalResults); } } }); };

Code cheat sheet – server (push)

if (entry.deviceType === "Android") //Android{

var payload = new Object();payload.content = item.content;payload.fromId = item.fromId;payload.fromPicture = item.fromPicture;payload.fromName = item.fromName;push.gcm.send(entry.registrationId, JSON.stringify(payload), {

success: function(response) { console.log('Android Push notification sent: ', response);}, error: function(error) { console.log('Android Error sending push notification android: ', error);}

});}

Cool Third Party Add-Ons

Real time communication Emails SMS

Let’s talk about the chat app

Design - Functionalities

Integrate Microsoft Azure Mobile ServicesIntegrate with social media providersStore data to cloud after auth ( user and channel related data )Retrieve the rest of the users you can talk to (custom API)Send message functionalityReceive message functionalityLogout functionality

Design – send push to web

connect

connect

connectmessage

message

message

to web

message

forward message to web

connect

Design - Database

Tables: users, channels, messages

ChannelChannelUri

RegistrationId

UserProviderId

DeviceType

MessageFromId

ToId

DeviceType

FromName

FromPicture

UserProviderId

Name

Picture

AccessToken

AccessTokenSecret

Let’s show some code

But first let’s see a short teaser

Review of Azure Mobile Services

Create a scalable and secure backend for your Windows, Android and iOS apps

Store data in the cloud

Easily authenticate users

Send push notifications

Review of Azure Mobile Services

Consume your favorite services

Monitor, alert, and auto scale

Cheap and FREE in some cases -> click here

Preview: No availability Service Level Agreement

Paid: General Availability: 99.9%

Thanks

Any questions?