Architecture app
2 likes2,142 views
The document discusses mobile web architecture and hybrid mobile applications. It begins with an introduction to hybrid apps and PhoneGap. It then covers various HTML5 features that are useful for building hybrid apps like users and sessions, location services, cameras, videos, audio and push notifications. It explains the hybrid architecture of combining web views with native wrappers. It also provides examples of implementing location services, cameras, audio/video and push notifications in a hybrid mobile app.
Architecture app
- 1. Mobile Web Architecture Structure, architecture and capabilities of hybrid mobile applications
- 3. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
- 4. Why is mobile different?
- 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 ?
- 7. Problems With Native • Too many different programming languages
- 8. Problems With Native • Too many different programming languages • “Same app”, different code
- 9. Web is not perfect either • Code runs in a browser: • Slower • Restricted by the browser
- 11. Hybrid Apps Web Content Native App Wrapper
- 12. Demo: Implementing A Hybrid Solution
- 13. Hybrid Architecture Web Content Native Wrapper 3rd party extensions Server + DB
- 14. Takeaways • Hybrid architecture provides the good AND bad from both worlds • Understanding the platform is necessary
- 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. Hybrid Apps • Complex code • Requires knowledge in many programming languages • Data is transferred between environments • Hard to debug
- 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. Processes and scopes Process Take a photo Upload photo to server View photo stream Scope Why
- 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. 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. 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
- 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. Q&A
- 25. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
- 26. The Web Side Users and Sessions Location Camera Video Audio
- 27. Web 101 HTTP Request HTTP Response
- 28. HTTP and state • HTTP is stateless • This means server has no way to know two requests originated from the same client
- 29. Cookies • Bits of data saved on a device and sent to the server with each HTTP request • Used to store state • Demo
- 30. Session Management Login: user, pass Client Server DB
- 31. Session Management Login: user, pass Verify: user, pass Client Server DB
- 32. Session Management Login: user, pass Client Save session Server DB Session id
- 33. Session Management Login: user, pass Save session Client Set Cookie: Session id Server DB Session id
- 34. Session Management Options • Session id on client, Session data on server • Encrypted session data on client, key on server • RESTful
- 35. RESTful Web Services • Server provides resources • Resources are in known conventional URLs
- 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. RESTful authentication • Client uses a private authentication token to access restricted resources • Demo: https://developers.facebook.com/tools/explorer
- 38. What You Should Use
- 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. Q&A
- 41. Geolocation • Detect where your user is now • Show nearby places • Display location aware data • Enable location specific features
- 43. GPS • Global Positioning System • Accuracy error: 2-10m • Requires clear sky view • Time to position: 5 seconds - 5 minutes
- 44. A-GPS • Uses both GPS chip and network information to get location • Much faster to get location
- 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. WiFi Positioning • Detect location using a list of wireless routers in your area • Relies on existing router databases
- 47. Permissions • Browser asks user permissions before sharing location • Best practice: Request location just before using it
- 48. Location Failures • Location services don’t always work • Why ? • What do you do when you’re lost ?
- 49. Location API 1 navigator.geolocation.getCurrentPosition( successCallback, 2 3 6 7 failureCallback, 4 { 5 timeout: 0, maximumAge: 60000, enableHighAccuracy: false 8 });
- 50. Using A Map
- 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. Built-In Maps + • Great UI • User feels “at home”
- 53. Built-In Maps - • User leaves the app
- 54. When To Use • Use built-in maps app for navigation • Use embedded maps for geo-data related to your app
- 55. Map APIs • Google Maps • Open Street maps • Demo: https://developers.google.com/maps/ documentation/javascript/examples/map-simple
- 56. Q&A
- 57. Taking Photos
- 58. getUserMedia • Desktop browsers support the new getUserMedia API • Demo: http://shinydemos.com/photo-booth/
- 60. Using The Camera • iOS >= 6; Android >= 3 • <input type="file" field opens camera app Normal <input> capture="camera" accept="image/*" id="takePictureField">
- 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. What You Still Can’t Do • Can’t check if camera is available • No camera overlay
- 63. Q&A
- 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. 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. Video Converter • Miro is a free open source video player and converter • http://www.getmiro.com
- 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. The Markup <video poster=”star.png”> <source src=”zebra.mp4” /> </video> !
- 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. 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. Playing Audio HTML5 Audio Audio API
- 73. Audio Tag • New addition of HTML5 • Simple to use • Both HTML tag and JS api
- 74. Audio Tag <audio src="scifi002.mp3" controls="YES"></audio>
- 75. Audio Tag JS API audio.src = “http://static1.grsites.com/archive/sounds/scifi/scifi002.mp3"; audio.pause(); audio.currentTime = 0; audio.play();
- 76. Audio Tag • Demo • Play a gun fire sound when button is clicked
- 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. Audio API • A new improved API for playing sounds • Timing considerations built-in
- 79. Audio API Browser Support
- 80. Audio API Architecture Audio Context Source Destinatio n
- 82. Quiz How do you implement cross fade ?
- 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. Audio API Demo • Same game as before • This time no delays in playing the audio • More complex demo: http://labs.dinahmoe.com/ToneCraft/#
- 86. Recording Audio • getUserMedia() will allow audio recording • Not yet supported on mobile
- 87. Q&A
- 88. Agenda Introduction to Hybrid Apps (+Phonegap) 1 HTML5 Features for Hybrid Apps 2 Push Notifications 3
- 90. Marketer’s Perspective “ For the first time in human history, you can tap almost two billion people on the shoulder. ”
- 91. Developer’s Perspective • What is a notification ?
- 92. Developer’s Perspective • What is a notification ? • User visible information reflecting some event
- 93. Developer’s Perspective • Why should I use notifications ?
- 94. Developer’s Perspective • Why should I use notifications ? • Ensure time-sensitive delivery when your app isn’t running
- 95. Developer’s Perspective • How does push compared to poll ?
- 96. Developer’s Perspective • How does push compared to poll ? • Pushes are server driven and immediate, polls are app driven and latent
- 97. Keep In Mind • Push notifications are not reliable • (even if the APN server gets them)
- 98. Types Of Notifications • Badges (iOS only) • Alerts
- 99. Push Service Architecture Your Server User’s Device Push Notification Server
- 100. Getting A Token
- 102. Demo App • A simple push chat room hybrid app • HTML layer handles user interface • Native layer receives notifications
- 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. APNS Best Practices • Keep the connection open • Use multiple connections to the gateway • Be polite with your users
- 105. Q&A
- 106. Thanks For Listening • Ynon Perek • ynon@ynonperek.com • http://ynonperek.com
- 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