Developing iPhone and iPad apps that leverage Windows Azure

Developing iPhone and iPad apps that Leverage Windows AzureSimon GuestDirector, Mobility SolutionsNeudesic, LLCsimon.guest@neudesic.com

I go to a lot of conferences…

Intro SectionSome of them are a little boring…Some of them are more interesting than others…

IntroductionMIX is always interesting!

Intro Section“There’s an app for that!”“There’s an app for that!”Share stuffAccess agendaKeep up to date

Uploading stuffAccessing agendaKeeping up to date321Use Cloud for StorageReceive NotificationsAccess Applications

Most suitable for binary data (images, video, audio)

8k metadata for each blobBlob StorageTable Storage

Blob StorageTable StorageMost suitable for structured data

Partitioning to enable scaleBlob Storage

REST Endpoint:http://[account].blob.core.windows.netList, Create, and Delete Containers

List, Put, Get, Delete BlobsphotosBlob Storage

REST request for listing all containersREST Endpoint:http://[account].blob.core.windows.netGET http://iostest.blob.core.windows.net/?comp=list&include=metadatax-ms-date: Thu, 14 Apr 2011 20:30:00 GMTx-ms-version: 2009-09-19x-ms-blob-type: BlockBlobAuthorization: SharedKeyiostest:[ComputedHash]Blob Storage

…but how do I get that computed hash?REST Endpoint:http://[account].blob.core.windows.netTo calculate the computed hash:AccountKey: /9seXadQ9HwOpXUO1jKxFN8q…Request: GET\n\n\n\n\n\n\n\n\n\n\n\nx-ms-blob-type:BlockBlob\nx-ms-date:Thu, 14 Apr 2011 20:30:00 GMT\nx-ms-version:2009-09-19\n/iostest/\ncomp:list\ninclude:metadataHash = HMACSHA256(UTF8Encode(Request), Base64Decode(AccountKey))Blob StorageAccount Key: /9seXadQ9HwOpXUO1jKxFN8q…

Making the callGET http://iostest.blob.core.windows.net/?comp=list&include=metadatax-ms-date: Thu, 14 Apr 2011 20:30:00 GMTx-ms-version: 2009-09-19x-ms-blob-type: BlockBlobAuthorization: SharedKeyiostest:[ComputedHash]<?xml version="1.0" encoding="utf-8"?><EnumerationResultsAccountName="http://myaccount.blob.core.windows.net/"> <Prefix>c</Prefix> <MaxResults>3</MaxResults> <Containers> <Container> <Name>container1</Name> <Url>http://iostest.blob.core.windows.net/photos</Url> <Properties> <Last-Modified>Sun, 14 Apr 2011 20:09:03 GMT</Last-Modified> </Properties> </Container> </Containers>REST Endpoint:http://[account].blob.core.windows.netBlob Storage

REST request (PUT) for adding a new photoREST Endpoint:http://[account].blob.core.windows.netPUT http://iostest.blob.core.windows.net/photos/party.jpgx-ms-date: Thu, 14 Apr 2011 20:30:00 GMTx-ms-version: 2009-09-19x-ms-blob-type: BlockBlobAuthorization: SharedKeyiostest:[ComputedHash]{...binary representation of photo...}Blob Storage

Using Blob Storage from iOSdemo

REST Endpoint:http://[account].table.core.windows.netList, Create, and Delete Tables

List, Put, Get, Delete Table EntitiesphotodataTable Storage

REST request for listing all tablesREST Endpoint:http://[account].table.core.windows.netList, Create, and Delete Tables

List, Put, Get, Delete Table EntitiesGET http://iostest.blob.core.windows.net/Tablesx-ms-date: Thu, 14 Apr 2011 20:30:00 GMTx-ms-version: 2009-09-19DataServiceVersion: 1.0;NetFxMaxDataServiceVersion: 2.0;NetFxAuthorization: SharedKeyiostest:[ComputedHash]<feed xml:base="http://iostest.tables.core.windows.net/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom"> <title type="text">Tables</title> <id>http://iostest.tables.core.windows.net/Tables</id> <updated>2011-04-04T17:18:54.7062347Z</updated> <link rel="self" title="Tables" href="Tables" /> <entry> <id>http://myaccount.tables.core.windows.net/Tables(’photodata')</id> <title type="text"></title> <updated>2009-01-04T17:18:54.7062347Z</updated> <author> <name /> </author> <link rel="edit" title="Tables" href="Tables(’photodata')" /> <m:properties> <d:TableName>photodata</d:TableName> </m:properties> </content> </entry></feed>photodataTable Storage

REST request for inserting an entityREST Endpoint:http://[account].table.core.windows.netList, Create, and Delete Tables

List, Put, Get, Delete Table EntitiesPUT http://iostest.blob.core.windows.net/Tablesx-ms-date: Thu, 14 Apr 2011 20:30:00 GMTx-ms-version: 2009-09-19DataServiceVersion: 1.0;NetFxMaxDataServiceVersion: 2.0;NetFxAuthorization: SharedKeyiostest:[ComputedHash]<entry xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom"> <title /> <updated>2011-04-10T23:46:19.3857256Z<updated/> <author> <name /> </author> <id /> <content type="application/xml"> <m:properties><d:Description>My coworker is drunk</d:Description> <d:DrinkCountm:type="Edm.Int32”>10</d:DrinkCount></m:properties> </content></entry>photodataTable Storage

Using Table Storage from iOSdemo

J!ResQ – Japanese Earthquake Rescuecase study

13,333 death toll. 15,000 missing. (4/13/11)

MunicipalityPinpointed photo using Bing MapsSituationalAnalysishttp://www.j-resq.com

Scenario 1 - TakeawaysRecommendations:Use blob storage for images, videos, audio

Use table storage for structured, non relational data

Wrap REST calls in libraryWatch out for:Blob storage doesn’t offer hierarchical structure

REST signatures can be a little complex and differ between the two storage types2

“Where is my next session?”

PagesWeb RoleAbility to host ASP.NET (MVC) application in Windows Azure

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)HTTP RequestHTTP ResponsePagesWindows 7 / IE8.0Web Role

UserAgent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5HTTP RequestHTTP ResponsePagesWeb RoleiPhone OS 4.3.1

Mozilla/5.0 (iPad; U; CPU OS 4_3_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.3.1 Mobile/7B334b Safari/531.21.10HTTP RequestHTTP ResponsePagesWeb RoleiPad OS 4.3.1

if (useragentcontains ”MSIE”)User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)Windows 7 / IE8.0Pagesif (useragentcontains ”iPhone”)Web RoleUserAgent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5PagesiPhone OS 4.3.1

if (useragent contains ”MSIE”)User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)if (Response.Headers[“User-Agent”].Contains(“iPhone”)){return View(“iPhone”);}if (Response.Headers[“User-Agent”].Contains(“iPad”)){return View(“iPad”);}if (Response.Headers[“User-Agent].Contains...Windows 7 / IE8.0ViewCSSControllerif (useragentcontains”iPhone”)Web RoleASP.NETMVCViewEngineUserAgent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5ViewCSSiPhone OS 4.3.1

“Great! …but it still looks like my original webpage”

if (useragent contains ”MSIE”)User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)Windows 7 / IE8.0ViewCSSControllerif (useragentcontains”iPhone”)Web RoleASP.NETMVCViewEngineUserAgent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5ViewCSSiPhone OS 4.3.1

Mobile Web FrameworksiUIhttp://iui-js.orgjQTouchhttp://jqtouch.comjQueryMobilehttp://jquerymobile.com

Accessing the Camera?Local storage?“Looking good! But this is still a mobile web app. How about…”Getting location via GPS?Uploading to the AppStore?

Device-Integrated Web FrameworksAppceleratorhttp://appcelerator.comUnifyhttp://unify.github.com/unifyPhoneGaphttp://phonegap.com

WebViewControllerNative shell upload to AppStoreif (useragent contains ”MSIE”)JavaScript bridgeViewCSSControlleriPhone OS 4.3.1Native Libraries (ObjC)if (useragentcontains”iPhone”)Web RoleASP.NETMVCViewEngineViewCSSWeb StorageLocal HTML

Integrating the App with PhoneGapdemo

Scenario 2 - TakeawaysRecommendations:Mobile Web sites let you target multiple devices

ASP.NET MVC with ViewEnginesupport. V3 for improved HTML5 attributes

Hybrid approach with PhoneGapWatch out for:Many different UI frameworks – choose carefully, think about longevity3

Developing iPhone and iPad apps that leverage Windows Azure

More Related Content

What's hot (10)

Viewers also liked (20)

Similar to Developing iPhone and iPad apps that leverage Windows Azure (20)

More from Simon Guest (9)

Developing iPhone and iPad apps that leverage Windows Azure

Editor's Notes