Developing iPhone and iPad apps that leverage Windows Azure

3,895 views

Published on

My presentation from MIX11 showing how to build applications on iPhone and iPad devices that leverage the cloud (Windows Azure)

  • Be the first to comment

Developing iPhone and iPad apps that leverage Windows Azure

  1. 1.
  2. 2. Developing iPhone and iPad apps that Leverage Windows Azure<br />Simon Guest<br />Director, Mobility Solutions<br />Neudesic, LLC<br />simon.guest@neudesic.com <br />
  3. 3. I go to a lot of conferences…<br />
  4. 4. Intro Section<br />Some of them are a little boring…<br />Some of them are more interesting than others…<br />
  5. 5. Introduction<br />MIX is always interesting!<br />
  6. 6. Intro Section<br />“There’s an app for that!”<br />“There’s an app for that!”<br />Share stuff<br />Access agenda<br />Keep up to date<br />
  7. 7. Uploading stuff<br />Accessing agenda<br />Keeping up to date<br />3<br />2<br />1<br />Use Cloud for Storage<br />Receive Notifications<br />Access Applications<br />
  8. 8.
  9. 9. 1<br />
  10. 10.
  11. 11. Blob Storage<br />Table Storage<br />
  12. 12. <ul><li>Most suitable for binary data (images, video, audio)
  13. 13. Container-based approach
  14. 14. 8k metadata for each blob</li></ul>Blob Storage<br />Table Storage<br />
  15. 15. Blob Storage<br />Table Storage<br /><ul><li>Most suitable for structured data
  16. 16. Dynamic schema
  17. 17. Partitioning to enable scale</li></li></ul><li>Blob Storage<br />
  18. 18. Blob Storage<br />
  19. 19. Blob Storage<br />
  20. 20. REST Endpoint:<br />http://[account].blob.core.windows.net<br /><ul><li>List, Create, and Delete Containers
  21. 21. List, Put, Get, Delete Blobs</li></ul>photos<br />Blob Storage<br />
  22. 22. REST request for listing all containers<br />REST Endpoint:<br />http://[account].blob.core.windows.net<br />GET http://iostest.blob.core.windows.net/?comp=list&include=metadata<br />x-ms-date: Thu, 14 Apr 2011 20:30:00 GMT<br />x-ms-version: 2009-09-19<br />x-ms-blob-type: BlockBlob<br />Authorization: SharedKeyiostest:[ComputedHash]<br />Blob Storage<br />
  23. 23. …but how do I get that computed hash?<br />REST Endpoint:<br />http://[account].blob.core.windows.net<br />To calculate the computed hash:<br />AccountKey: /9seXadQ9HwOpXUO1jKxFN8q…<br />Request: GETnnnnnnnnnnnnx-ms-blob-type:BlockBlobnx-ms-date:Thu, 14 Apr 2011 20:30:00 GMTnx-ms-version:2009-09-19n/iostest/ncomp:listninclude:metadata<br />Hash = HMACSHA256(UTF8Encode(Request), Base64Decode(AccountKey))<br />Blob Storage<br />Account Key: <br />/9seXadQ9HwOpXUO1jKxFN8q…<br />
  24. 24. Making the call<br />GET http://iostest.blob.core.windows.net/?comp=list&include=metadata<br />x-ms-date: Thu, 14 Apr 2011 20:30:00 GMT<br />x-ms-version: 2009-09-19<br />x-ms-blob-type: BlockBlob<br />Authorization: SharedKeyiostest:[ComputedHash]<br /><?xml version="1.0" encoding="utf-8"?><br /><EnumerationResultsAccountName="http://myaccount.blob.core.windows.net/"><br /> <Prefix>c</Prefix><br /> <MaxResults>3</MaxResults><br /> <Containers><br /> <Container><br /> <Name>container1</Name><br /> <Url>http://iostest.blob.core.windows.net/photos</Url><br /> <Properties><br /> <Last-Modified>Sun, 14 Apr 2011 20:09:03 GMT</Last-Modified><br /> </Properties><br /> </Container><br /> </Containers><br />REST Endpoint:<br />http://[account].blob.core.windows.net<br />Blob Storage<br />
  25. 25. REST request (PUT) for adding a new photo<br />REST Endpoint:<br />http://[account].blob.core.windows.net<br />PUT http://iostest.blob.core.windows.net/photos/party.jpg<br />x-ms-date: Thu, 14 Apr 2011 20:30:00 GMT<br />x-ms-version: 2009-09-19<br />x-ms-blob-type: BlockBlob<br />Authorization: SharedKeyiostest:[ComputedHash]<br />{...binary representation of photo...}<br />Blob Storage<br />
  26. 26. Using Blob Storage from iOS<br />demo <br />
  27. 27. REST Endpoint:<br />http://[account].table.core.windows.net<br /><ul><li>List, Create, and Delete Tables
  28. 28. List, Put, Get, Delete Table Entities</li></ul>photodata<br />Table Storage<br />
  29. 29. REST request for listing all tables<br />REST Endpoint:<br />http://[account].table.core.windows.net<br /><ul><li>List, Create, and Delete Tables
  30. 30. List, Put, Get, Delete Table Entities</li></ul>GET http://iostest.blob.core.windows.net/Tables<br />x-ms-date: Thu, 14 Apr 2011 20:30:00 GMT<br />x-ms-version: 2009-09-19<br />DataServiceVersion: 1.0;NetFx<br />MaxDataServiceVersion: 2.0;NetFx<br />Authorization: SharedKeyiostest:[ComputedHash]<br /><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"><br /> <title type="text">Tables</title><br /> <id>http://iostest.tables.core.windows.net/Tables</id><br /> <updated>2011-04-04T17:18:54.7062347Z</updated><br /> <link rel="self" title="Tables" href="Tables" /><br /> <entry><br /> <id>http://myaccount.tables.core.windows.net/Tables(’photodata')</id><br /> <title type="text"></title><br /> <updated>2009-01-04T17:18:54.7062347Z</updated><br /> <author><br /> <name /><br /> </author><br /> <link rel="edit" title="Tables" href="Tables(’photodata')" /><br /> <m:properties><br /> <d:TableName>photodata</d:TableName><br /> </m:properties><br /> </content><br /> </entry><br /></feed><br />photodata<br />Table Storage<br />
  31. 31. REST request for inserting an entity<br />REST Endpoint:<br />http://[account].table.core.windows.net<br /><ul><li>List, Create, and Delete Tables
  32. 32. List, Put, Get, Delete Table Entities</li></ul>PUT http://iostest.blob.core.windows.net/Tables<br />x-ms-date: Thu, 14 Apr 2011 20:30:00 GMT<br />x-ms-version: 2009-09-19<br />DataServiceVersion: 1.0;NetFx<br />MaxDataServiceVersion: 2.0;NetFx<br />Authorization: SharedKeyiostest:[ComputedHash]<br /><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"><br /> <title /><br /> <updated>2011-04-10T23:46:19.3857256Z<updated/><br /> <author><br /> <name /><br /> </author><br /> <id /><br /> <content type="application/xml"><br /> <m:properties><br /><d:Description>My coworker is drunk</d:Description><br /> <d:DrinkCountm:type="Edm.Int32”>10</d:DrinkCount><br /></m:properties><br /> </content><br /></entry><br />photodata<br />Table Storage<br />
  33. 33. Using Table Storage from iOS<br />demo <br />
  34. 34. J!ResQ – Japanese Earthquake Rescue<br />case study<br />
  35. 35. 13,333 death toll. 15,000 missing. (4/13/11)<br />
  36. 36.
  37. 37.
  38. 38.
  39. 39.
  40. 40. Municipality<br />Pinpointed photo using Bing Maps<br />Situational<br />Analysis<br />http://www.j-resq.com<br />
  41. 41. Scenario 1 - Takeaways<br />Recommendations:<br /><ul><li>Use blob storage for images, videos, audio
  42. 42. Use table storage for structured, non relational data
  43. 43. Wrap REST calls in library</li></ul>Watch out for:<br /><ul><li>Blob storage doesn’t offer hierarchical structure
  44. 44. REST signatures can be a little complex and differ between the two storage types</li></li></ul><li>2<br />
  45. 45. “Where is my next session?”<br />
  46. 46. Pages<br />Web Role<br />Ability to host ASP.NET (MVC) application in Windows Azure<br />
  47. 47. 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)<br />HTTP Request<br />HTTP Response<br />Pages<br />Windows 7 / IE8.0<br />Web Role<br />
  48. 48. 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.5<br />HTTP Request<br />HTTP Response<br />Pages<br />Web Role<br />iPhone OS 4.3.1<br />
  49. 49. 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.10<br />HTTP Request<br />HTTP Response<br />Pages<br />Web Role<br />iPad OS 4.3.1<br />
  50. 50. if (useragent<br />contains ”MSIE”)<br />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)<br />Windows 7 / IE8.0<br />Pages<br />if (useragentcontains ”iPhone”)<br />Web Role<br />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.5<br />Pages<br />iPhone OS 4.3.1<br />
  51. 51. if (useragent contains ”MSIE”)<br />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)<br />if (Response.Headers[“User-Agent”].Contains(“iPhone”))<br />{<br />return View(“iPhone”);<br />}<br />if (Response.Headers[“User-Agent”].Contains(“iPad”))<br />{<br />return View(“iPad”);<br />}<br />if (Response.Headers[“User-Agent].Contains...<br />Windows 7 / IE8.0<br />View<br />CSS<br />Controller<br />if (useragentcontains”iPhone”)<br />Web Role<br />ASP.NETMVC<br />ViewEngine<br />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.5<br />View<br />CSS<br />iPhone OS 4.3.1<br />
  52. 52. Using ASP.NET View Engine<br />demo <br />
  53. 53. “Great! …but it still looks like my original webpage”<br />
  54. 54. if (useragent contains ”MSIE”)<br />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)<br />Windows 7 / IE8.0<br />View<br />CSS<br />Controller<br />if (useragentcontains”iPhone”)<br />Web Role<br />ASP.NETMVC<br />ViewEngine<br />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.5<br />View<br />CSS<br />iPhone OS 4.3.1<br />
  55. 55. Mobile Web Frameworks<br />iUI<br />http://iui-js.org<br />jQTouch<br />http://jqtouch.com<br />jQueryMobile<br />http://jquerymobile.com<br />
  56. 56. if (useragent contains ”MSIE”)<br />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)<br />Windows 7 / IE8.0<br />View<br />CSS<br />Controller<br />if (useragentcontains”iPhone”)<br />Web Role<br />ASP.NETMVC<br />ViewEngine<br />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.5<br />View<br />CSS<br />iPhone OS 4.3.1<br />
  57. 57. Using jQueryMobile<br />demo <br />
  58. 58. Accessing the Camera?<br />Local storage?<br />“Looking good! But this is still a mobile web app. How about…”<br />Getting location via GPS?<br />Uploading to the AppStore?<br />
  59. 59. Device-Integrated Web Frameworks<br />Appcelerator<br />http://appcelerator.com<br />Unify<br />http://unify.github.com/unify<br />PhoneGap<br />http://phonegap.com<br />
  60. 60. WebViewController<br />Native shell upload to AppStore<br />if (useragent contains ”MSIE”)<br />JavaScript bridge<br />View<br />CSS<br />Controller<br />iPhone OS 4.3.1<br />Native Libraries (ObjC)<br />if (useragentcontains”iPhone”)<br />Web Role<br />ASP.NETMVC<br />ViewEngine<br />View<br />CSS<br />Web Storage<br />Local HTML<br />
  61. 61. Integrating the App with PhoneGap<br />demo <br />
  62. 62. Scenario 2 - Takeaways<br />Recommendations:<br /><ul><li>Mobile Web sites let you target multiple devices
  63. 63. ASP.NET MVC with ViewEnginesupport. V3 for improved HTML5 attributes
  64. 64. Hybrid approach with PhoneGap</li></ul>Watch out for:<br /><ul><li>Many different UI frameworks – choose carefully, think about longevity</li></li></ul><li>3<br />
  65. 65. “Looks like we have a session change”<br />
  66. 66. AppRegistration<br />Apple Push Notification Service<br />gateway.sandbox.push.apple.com<br />Native Application<br />iPad/iPhone OS 4.3.1<br />User Acceptance<br />
  67. 67. Token Length<br />Payload Length<br />JSON formatted<br />AppRegistration<br />Send Message Payload<br />0<br />0<br />32<br />deviceToken<br />0<br />34<br />message<br />Apple Push Notification Service<br />gateway.sandbox.push.apple.com<br />Native Application<br /><ul><li>Azure Role optimized for backgroundtasks</li></ul>Worker Role<br />iPad/iPhone OS 4.3.1<br />User Acceptance<br />
  68. 68. AppRegistration<br />Send Message Payload<br />Apple Push Notification Service<br />gateway.sandbox.push.apple.com<br />Native Application<br />Worker Role<br />Windows Azure Queue<br />iPad/iPhone OS 4.3.1<br />User Acceptance<br />
  69. 69. AppRegistration<br />Send Message Payload<br />Apple Push Notification Service<br />gateway.sandbox.push.apple.com<br />Native Application<br />Worker Role<br />RequestChangedSession<br />Details<br />Windows Azure Queue<br />iPad/iPhone OS 4.3.1<br />Web Role<br />SessionUpdatedthrough Web<br />User Acceptance<br />Update Queue<br />Receive Message, LaunchApp<br />
  70. 70. Sending Push Notifications to iOSfrom Windows Azure<br />demo <br />
  71. 71. Scenario 3 - Takeaways<br />Recommendations:<br /><ul><li>APN useful for updating users of events
  72. 72. Worker Role, Azure Queue, and Web Role can be used in conjunction with APN
  73. 73. Can also be used with PhoneGap shell</li></ul>Watch out for:<br /><ul><li>Use Worker Role to maintain persistent connection to APN (to prevent DOS)</li></li></ul><li>Conclusion<br />Historically not much interaction between iOS and Windows Azure<br />
  74. 74. Conclusion<br />Historically not much interaction between iOS and Windows Azure<br />3<br />2<br />1<br />Use Cloud for Storage<br />Receive Notifications<br />Access Applications<br />Possibilities for building iPhone/iPad apps that leverage Windows Azure<br />
  75. 75. Simon Guest<br />Director, Mobility Solutions<br />simon.guest@neudesic.com<br />© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

×