Architecture app

1,908 views

Published on

Hybrid mobile application architecture considerations

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,908
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Architecture app

  1. 1. Mobile Web Architecture Structure, architecture and capabilities of hybrid mobile applications
  2. 2. Contact Me • Ynon Perek • ynon@ynonperek.com • http://ynonperek.com
  3. 3. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
  4. 4. Why is mobile different?
  5. 5. Questions To Ask for Mobile • How does my solution: • Affects battery life ? • Affects network traffic ? • Deal with interruptions ? • Deal with connectivity ? • Respects user’s privacy ?
  6. 6. Choosing Mobile Technology
  7. 7. Problems With Native • Too many different programming languages
  8. 8. Problems With Native • Too many different programming languages • “Same app”, different code
  9. 9. Web is not perfect either • Code runs in a browser: • Slower • Restricted by the browser
  10. 10. Web vs. Native Native Web Browser App App
  11. 11. Hybrid Apps Web Content Native App Wrapper
  12. 12. Demo: Implementing A 
 Hybrid Solution
  13. 13. Hybrid Architecture Web Content Native Wrapper 3rd party extensions Server + DB
  14. 14. Takeaways • Hybrid architecture provides the good AND bad from both worlds • Understanding the platform is necessary
  15. 15. Hybrid Apps + • Most of the app is written once • Only native parts are written again and again • “Feels” native • Developer controls native code => can use native APIs
  16. 16. Hybrid Apps • Complex code • Requires knowledge in many programming languages • Data is transferred between environments • Hard to debug
  17. 17. Let’s Analyse A Hybrid App • Hystagram is a hybrid version of instagram with minimal functionality • Supports: • Taking photos • Watching photos • Uploading photos to server
  18. 18. Processes and scopes Process Take a photo Upload photo to server View photo stream Scope Why
  19. 19. Processes and scopes Process Take a photo Upload photo to server View photo stream Scope Why Native Need to show a camera overlay
  20. 20. Processes and scopes Process Take a photo Upload photo to server View photo stream Scope Why Native Need to show a camera overlay Native Upload must continue when app is not active
  21. 21. Processes and scopes Process Scope Why Native Need to show a camera overlay Upload photo to server Native Upload must continue when app is not active View photo stream Web Because we can Take a photo
  22. 22. Introducing Phonegap
  23. 23. Introducing Phonegap • An open source connection layer between web content and native • Extensible • Supported platforms: 
 iOS, Android, Blackberry, WebOS, Windows Phone, Symbian, Bada
  24. 24. Q&A
  25. 25. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
  26. 26. The Web Side Users and Sessions Location Camera Video Audio
  27. 27. Web 101 HTTP Request HTTP Response
  28. 28. HTTP and state • HTTP is stateless • This means server has no way to know two requests originated from the same client
  29. 29. Cookies • Bits of data saved on a device and sent to the server with each HTTP request • Used to store state • Demo
  30. 30. Session Management Login: user, pass Client Server DB
  31. 31. Session Management Login: user, pass Verify: user, pass Client Server DB
  32. 32. Session Management Login: user, pass Client Save session Server DB Session id
  33. 33. Session Management Login: user, pass Save session Client Set Cookie: Session id Server DB Session id
  34. 34. Session Management Options • Session id on client, Session data on server • Encrypted session data on client, key on server • RESTful
  35. 35. RESTful Web Services • Server provides resources • Resources are in known conventional URLs
  36. 36. RESTful Web Services /collection /collection/item GET Returns an array of items Returns details for a specific item POST Create a new item PUT DELETE Modify an existing item Delete the collection Delete an item
  37. 37. RESTful authentication • Client uses a private authentication token to access restricted resources • Demo: 
 https://developers.facebook.com/tools/explorer
  38. 38. What You Should Use
  39. 39. What You Should Use • For web clients, cookies are the easiest • If possible, prefer to store only session id in the cookie • For other clients, consider a token
  40. 40. Q&A
  41. 41. Geolocation • Detect where your user is now • Show nearby places • Display location aware data • Enable location specific features
  42. 42. Technologies • GPS • A-GPS • Cell Information • WiFi Positioning
  43. 43. GPS • Global Positioning System • Accuracy error: 2-10m • Requires clear sky view • Time to position: 
 5 seconds - 5 minutes
  44. 44. A-GPS • Uses both GPS chip and network information to get location • Much faster to get location
  45. 45. Cell Information • Uses cell towers to calculate a device’s location • Accuracy: A block or up to some km • Time to location: immediate
  46. 46. WiFi Positioning • Detect location using a list of wireless routers in your area • Relies on existing router databases
  47. 47. Permissions • Browser asks user permissions before sharing location • Best practice: Request location just before using it
  48. 48. Location Failures • Location services don’t always work • Why ? • What do you do when you’re lost ?
  49. 49. Location API 1 navigator.geolocation.getCurrentPosition(
 successCallback, 
 2 3 6 7 failureCallback, 4 { 5 timeout: 0, maximumAge: 60000, enableHighAccuracy: false 8 });
  50. 50. Using A Map
  51. 51. Show Me The Map • Both iOS and Android have built in maps applications • Open the built-in maps application using a simple link • Demo
  52. 52. Built-In Maps + • Great UI • User feels “at home”
  53. 53. Built-In Maps - • User leaves the app
  54. 54. When To Use • Use built-in maps app for navigation • Use embedded maps for geo-data related to your app
  55. 55. Map APIs • Google Maps • Open Street maps • Demo:
 https://developers.google.com/maps/ documentation/javascript/examples/map-simple
  56. 56. Q&A
  57. 57. Taking Photos
  58. 58. getUserMedia • Desktop browsers support the new getUserMedia API • Demo: http://shinydemos.com/photo-booth/
  59. 59. getUserMedia Browser Support
  60. 60. Using The Camera • iOS >= 6; Android >= 3 • <input type="file" field opens camera app Normal <input> capture="camera" accept="image/*" id="takePictureField">

  61. 61. What You Can Do • Take a picture and send it to server • Analyse picture on the client - Demo • Apply filters or edit - Demo
  62. 62. What You Still Can’t Do • Can’t check if camera is available • No camera overlay
  63. 63. Q&A
  64. 64. VIDEO THE EASY WAY
  65. 65. Video Tag • HTML5 introduces a <video> tag to embed videos in a web page. • Different browsers support different video formats. The <video> tag can specify multiple formats.
  66. 66. Video Formats • Video formats are like languages • The same video can be encoded in different formats • A browser must “speak the language” to be able to play the video
  67. 67. Video Converter • Miro is a free open source video player and converter • http://www.getmiro.com
  68. 68. Browser Support • HTML5 spec does not define a video codec to use • h.264 is the most widely supported. Plays on iPhone and Android
  69. 69. The Markup <video poster=”star.png”> <source src=”zebra.mp4” /> </video> !
  70. 70. Limitations: Autoplay “ Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.” Issue 159336: On Android, html5 video autoplay attribute does not work.
  71. 71. Limitations: Play Inline “ Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen ” Videos play inline for Android >= 3
  72. 72. Playing Audio HTML5 Audio Audio API
  73. 73. Audio Tag • New addition of HTML5 • Simple to use • Both HTML tag and JS api
  74. 74. Audio Tag <audio src="scifi002.mp3" controls="YES"></audio>
  75. 75. Audio Tag JS API audio.src = “http://static1.grsites.com/archive/sounds/scifi/scifi002.mp3"; 
 audio.pause();
 audio.currentTime = 0;
 audio.play();

  76. 76. Audio Tag • Demo • Play a gun fire sound when button is clicked
  77. 77. Audio Tag Limitations on Mobile • Not accurate (has short delays) • Starts to load sound after user interaction • Can’t control the audio data
  78. 78. Audio API • A new improved API for playing sounds • Timing considerations built-in
  79. 79. Audio API Browser Support
  80. 80. Audio API Architecture Audio Context Source Destinatio n
  81. 81. Audio Context Source Gain (volume) Destinatio n
  82. 82. Quiz How do you implement cross fade ?
  83. 83. Cross Fade Audio Context Source Gain (volume) Destinatio n Source Gain (volume)
  84. 84. Audio API: What You Can Do • Apply audio filters (using filter nodes) • Change volume (using gain nodes) • Merge multiple audio sources to one destination • Play with accurate timing
  85. 85. Audio API Demo • Same game as before • This time no delays in playing the audio • More complex demo:
 http://labs.dinahmoe.com/ToneCraft/#
  86. 86. Recording Audio • getUserMedia() will allow audio recording • Not yet supported on mobile
  87. 87. Q&A
  88. 88. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
  89. 89. User’s Perspective
  90. 90. Marketer’s Perspective “ For the first time in human history, you can tap almost two billion people on the shoulder. ”
  91. 91. Developer’s Perspective • What is a notification ?
  92. 92. Developer’s Perspective • What is a notification ? • User visible information reflecting some event
  93. 93. Developer’s Perspective • Why should I use notifications ?
  94. 94. Developer’s Perspective • Why should I use notifications ? • Ensure time-sensitive delivery when your app isn’t running
  95. 95. Developer’s Perspective • How does push compared to poll ?
  96. 96. Developer’s Perspective • How does push compared to poll ? • Pushes are server driven and immediate, polls are app driven and latent
  97. 97. Keep In Mind • Push notifications are not reliable • (even if the APN server gets them)
  98. 98. Types Of Notifications • Badges (iOS only) • Alerts
  99. 99. Push Service Architecture Your Server User’s Device Push Notification Server
  100. 100. Getting A Token
  101. 101. Sending A Notification
  102. 102. Demo App • A simple push chat room hybrid app • HTML layer handles user interface • Native layer receives notifications
  103. 103. Server: Sending A Notification my $notifier = $APNS->notify({ cert => "cert.pem", key => "key.pem", passwd => "1234" }); ! $notifier->devicetoken($device_token); $notifier->message("message"); $notifier->sound('default'); $notifier->custom({ custom_key => 'custom_value' }); $notifier->sandbox(1); ! $notifier->write;
  104. 104. APNS Best Practices • Keep the connection open • Use multiple connections to the gateway • Be polite with your users
  105. 105. Q&A
  106. 106. Thanks For Listening • Ynon Perek • ynon@ynonperek.com • http://ynonperek.com
  107. 107. Photos Used In The Slides • Choices (slide 6):
 http://www.flickr.com/photos/danmoyle/ 11715566974/sizes/l/ • Man with camera (slide 43):
 http://bit.ly/1gb5ZZM

×