Mobile for PHP developers
19 likes56,117 views
This document is a comprehensive guide for PHP developers on mobile application development, covering topics from mobile technology perspectives to the advantages of browser-based and native apps. It discusses front-end design considerations, APIs for native applications, and essential tools for device detection and notifications. The information is structured in multiple parts, featuring practical tips, statistics, and resources to enhance understanding and implementation in mobile development.
Mobile for PHP developers
- 1. http://www.egeniq.com info@egeniq.com @egeniq Mobile for PHP Developers a 3 hour primer Ivo Jansch php|tek, May 2011
- 4. Contents ‣ Part 1: Putting mobile in perspective ‣ Part 2: Browser based mobile applications ‣ Part 3: A few words on frontend design ‣ Part 4: Cool stuff with PHP and native apps ‣ Part 5: APIs for native apps ‣ Part 6: Web vs Native: best of both worlds ‣ Part 7: Random bits if time permits 4
- 5. Part 1 Let’s think about mobile for a few minutes 5
- 6. The Web Is increasingly portable 6
- 7. It’s revolutionary Much like when the phone lost its wall socket 7
- 8. The Internet Of Things ivo-imac:~ ivo$ ping fridge PING fridge (192.168.1.138): 56 data bytes 8
- 9. The Web versus The Internet 9
- 10. Usage Characteristics ‣ On the go ‣ Short attention span ‣ Avoid typing ‣ To the point / ad hoc ‣ Omnipresent ‣ Context Awareness 10
- 11. ‘Pocket Essentials’ 11
- 12. Usage - ‘Couch Computing’ ‣ Relaxed ‣ Freedom ‣ Consumption ‣ Convergence ‣ Companion 12
- 13. Mobile Technologies ‣ Objective-C (iPhone, iPad, iPod Touch, Apple TV) ‣ Java (Android, Blackberry, Symbian) ‣ HTML5 / Javascript (Any) ‣ PHP (Any) 13
- 14. The App vs. The Browser 14
- 15. Browser based applications ‣ Write once, run anywhere ‣ Online ‣ Requires browser ‣ Page based ‣ ‘Stateless’ 15
- 16. Native Apps ‣ On- and offline ‣ Event based ‣ Native device experience ‣ Convenient access to device features ‣ Stateful ‣ Monetization through App Stores 16
- 17. Some statistics ‣ Android Market: 100.000 apps ‣ Apple App Store: 300.000 apps ‣ Web: 3.000.000 websites optimized for mobile Sources: ‣ http://www.bizreport.com/2010/10/dotmobi-2000-growth-in-number-of-mobile-ready-websites.html# ‣ http://twitter.com/AndroidDev/status/28701488389 ‣ http://www.silobreaker.com/apples-app-store-crosses-300000-apps-5_2263799272514256896 17
- 18. Predictions 18
- 19. Part 2 Browser Based Mobile Apps 19
- 20. 10 years ago Source: freewebmasterhelp.com 20
- 21. A little over 4 years ago Source: Mobiforge.com 21
- 22. 4 years ago 22
- 23. Dealing with a smaller screen 2 ways to render a regular website: ‣ Keyhole ‣ Scaled 23
- 24. Keyhole 24
- 25. Scaled 25
- 26. A pixel is not a pixel 640 1020 26
- 27. A pixel is not a pixel Viewports: ‣ Invented by Apple ‣ Adopted by others ‣ Unofficial standard, registered at whatwg.org 27
- 28. A pixel is not a pixel 320 640 480 960 iPhone 3 iPhone 4 28
- 29. A pixel is not a pixel CSS 2.1 Specification: “If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length.” 29
- 30. Standardization Horror ‣ <meta name=”viewport” content=”width=device-width” /> • iPhone and most others ‣ <meta name=”HandheldFriendly” content=”true” /> • Many feature phones (originally Palm) ‣ <meta name=”MobileOptimized” content=”320” /> • Windows Mobile ‣ <meta name=”viewport” content=”target-densitydpi=device-dpi” /> • Android 30
- 31. A pixel is not a pixel Recommended reading: http://www.quirksmode.org/blog/ by Peter Paul Koch 31
- 32. Device Detection It’s all in the User Agent • Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version / 4.0.5 Mobile/8B117 Safari/6531.22.7 • Mozilla/5.0 (Linux; U; Android 2.1-update1; nl-nl; HTC Hero Build/ERE27) AppleWebKit/ 530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/ 530.17 32
- 33. Device Detection 33
- 34. Don’t Reinvent The Wheel http://detectmobilebrowsers.mobi/ • Downloadable PHP library for device detection • Online code generator • Donationware • Ugly code, well documented 34
- 35. On to a more advanced mechanism ‣ General tip: • don’t rely on device • rely on capabilities ‣ WURFL • Wireless Universal Resource FiLe • Contains info on 500+ capabilities of 14.000+ devices • http://wurfl.sourceforge.net/ • Clients available for many languages 35
- 36. WURFL in PHP: Tera-Wurfl ‣ Download Tera-Wurfl • http://www.tera-wurfl.com ‣ Install in document root • e.g. in /var/www/yoursite/Tera-WURFL • Make sure data/ dir is apache read+writable ‣ Create empty database 36
- 37. Tera-WURFL Setup ‣ Copy TeraWurflConfig.php.example • Edit database settings ‣ Browse to: • http://yoursite/Tera-Wurfl/admin/install.php 37
- 38. Tera-WURFL Setup 38
- 39. Tera-WURFL Setup 39
- 40. Tera-WURFL Administration 40
- 41. Tera-WURFL code samples 41
- 42. Tera-WURFL code samples 42
- 43. Tera-WURFL code samples 43
- 44. Tera-WURFL code samples 44
- 45. Tera-WURFL output 45
- 46. Alternatives ‣ http://www.deviceatlas.com • Commercial database of device properties • Available online, as API and downloadable json file • Free for development • ~99$/year for production 46
- 47. Browser Detection In Practice ‣ Let’s optimize a site with what we’ve learned so far. ‣ Let’s take advantage of ZF’s powerful MVC set up • View scripts determine layout of actions • Layout script wraps everything into main layout • Use Bootstrapper to detect device and setup MVC 47
- 48. Zend Framework mobile site 2 ways for mobile layout: ‣ Separate files ‣ Separate folders Detection in bootstrap 48
- 51. Bootstrap.php 51
- 52. Result Try it at http://egeniq.com/demo/zf/public 52
- 53. Zend_Http_UserAgent ‣ New in Zend Framework 1.11 ‣ Can work with WURFL or Device Atlas 53
- 54. Dealing With Mobile Browsers ‣ Considerations: • Don’t redirect to homepage • Offer ‘classic’ option • Don’t make assumptions on physical screen size 54
- 55. Part 3 A few words on front end design 55
- 56. UI Design ‣ Hover = evil ‣ ‘Finger Friendly Design’ ‣ ‘Touch Driven Development’ ‣ Screens are getting bigger and (!) smaller 56
- 58. HTML5 is easy ‣ <!doctype html> - period. ‣ <script> or <style> - period. ‣ Semantics: header, footer, section, article tags 58
- 59. HTML5 is powerful ‣ localStorage ‣ <video> ‣ <canvas> ‣ <svg> ‣ <input type=”number”> and many other form fields ‣ navigator.geolocation.getCurrentPosition(); 59
- 60. Browsers love HTML5 Browsers supporting HTML5: ‣ Firefox ‣ Safari ‣ Opera ‣ All the mobile browsers ‣ IE (sort of, no support for <article> until IE9) 60
- 61. Things to consider ‣ Don’t just scale the layout, scale content too ‣ Consider ‘scenario based content management’ 61
- 62. jQTouch 62
- 63. jQTouch ‣ iPhone experience in HTML5 ‣ http://jqtouch.com/ (beta 3) ‣ jQuery based ‣ MIT License ‣ Give it a try: http://jqtouch.com/preview/ demos/main 63
- 64. Alternatives ‣ jQuery Mobile • 1.0 alpha was released at October 16, 2010 • http://jquerymobile.com/ ‣ Sencha Touch • From the makers of jqTouch • Tablet support • http://www.sencha.com/products/touch/ 64
- 65. Simple tricks Making phone calls from a web page: 65
- 66. Simple tricks Open Maps application: 66
- 67. You already know PHP Your PHP skills + HTML5 = easy mobile websites 67
- 68. Part 4 Doing Cool Stuff With PHP And Native Apps 68
- 70. QR Codes: URLs 70
- 71. QR Codes: MECARDs 71
- 72. QR Codes: MECARDs 72
- 73. Tiqr demo ‣ Authentication with a smart phone ‣ Components • Client: iPhone, Android • Server: Zend Framework, simpleSAMLphp or plain PHP • Standards: OATH OCRA, SHA-x, HOTP, SAML • License: BSD ‣ http://www.tiqr.org 73
- 74. Tiqr Diagram 74
- 75. Tiqr Integration 75
- 76. Device Notifications ‣ A way to get attention ‣ Use with caution 76
- 77. Notifications ‣ Apple • Push Notifications • http://code.google.com/p/apns-php/ ‣ Android • Cloud To Device Messaging (c2dm) • https://github.com/mwillbanks/ Zend_Service_Google_C2dm/ ‣ BlackBerry • BlackBerry Push Service • CURL 77
- 78. Notifications Apple Push Your Server Notification deviceToken message message Services payload payload signature Your App 78
- 79. Notifications 79
- 80. Notifications - Android 80
- 81. Notifications - Android 81
- 82. Notifications - Notes ‣ For Apple: • Get certificates from the developer portal ‣ For Android • Need to register an account and request a quota ‣ Note: deviceTokens can change! 82
- 83. Token Exchange notificationToken Apple Push Your Server Notification deviceToken message message Services payload payload signature Your App notificationToken deviceToken deviceToken Token notificationToken Exchange http://tokenexchange.googlecode.com 83
- 84. Part 5 APIs for Native Apps 84
- 85. PHP’s role in native apps Android Blackberry iPhone App App App API 85
- 86. Optimize APIs for mobile ‣ Content optimization ‣ Scalability ‣ Longevity ‣ Security ‣ Client/Server considerations 86
- 87. Content Optimization ‣ Consider CPU and memory constraints • Prefer JSON over XML • Compress data • Keep responses small • But not too small (connection / routing overhead) 87
- 88. Scalability ‣ AppStore featured/top listings Slashdot effect ‣ Consider the 80/20 rule of app popularity though 88
- 89. Longevity ‣ Apps have different deployment patterns • No ‘quick fix’ in the application as in web apps ‣ Client/Server asynchronous updates • Backwards compatibility ‣ Versioned API URLs: - http://iportfolio.api.egeniq.com/portfolios/1.0/mvb/collections.json 89
- 90. Longevity ‣ How long do you support your APIs? • Can’t force people to delete their Apps • Provide clean fallback • Synchronized instead of real-time data ‣ Implement status check API calls ‣ API ownership 90
- 91. Longevity - API Ownership ‣ Own DNS records ‣ Own the initial entry point of the app ‣ Don’t hardcode URLs ‣ By the way: also own the developer account 91
- 92. API Security ‣ TLS/SSL ‣ Basic Auth ‣ OAuth? XAuth! ‣ PKI / TLSAuth ‣ Signed URLs 92
- 93. Signed URLs ‣ Prevent parameter tampering ‣ Allow API use by specific client only ‣ Simple but effective way to protect API 93
- 94. Signed URLs Params + Signature Client API Sign Params Verify With Signature Signature W 94
- 95. Signed URLs W 95
- 96. Signed URLs W 96
- 97. Signed URLs W 97
- 98. Client/Server considerations ‣ Image Processing in the API, instead of App • Use Imagick / GD etc. • Trade-off between bandwidth and processing power ‣ Apps support threading / asynchronisity • Fire-and-forget API design • Prepare/getResult call duos ‣ Push features into PHP APIs for reuse 98
- 99. PHP’s role in native apps ‣ PHP has native support for: • Web services • JSON • Compression • Image manipulation ‣ Egeniq’s number 1 choice for App APIs ‣ 25-30% of App development time = API 99
- 100. Part 6 Web vs Native: Best of Both Worlds 100
- 101. HTML5 in the App Store ‣ HTML5 on the server, supports PHP: • IPFaces - http://www.ipfaces.org/ ‣ HTML5 on the device, no (or limited) support for PHP: • AppCelerator - http://appcelerator.com/ • Phonegap - http://phonegap.com 101
- 102. Cross Compilers = Instant Coffee 102
- 103. Part 7 Random bits if time permits 103
- 104. Testing ‣ Various options for testing: • Get your boss to buy you devices • Firefox with user agent plugin • Use Simulators/Emulators • Use a service such as DeviceAnywhere 104
- 105. Running PHP on the device First: Why??! ‣ PHP For Android (PFA) • http://phpforandroid.net/ ‣ PAMP for Symbian • http://wiki.opensource.nokia.com/projects/PAMP 105
- 106. Symfony Mobile • Mime-type based optimisation • http://www.symfony-project.org/blog/2008/06/09/how- to-create-an-optimized-version-of-your-website-for-the- iphone-in-symfony-1-1 106
- 107. ‘Lemon ADE’ AST editor 107
- 108. Resources for PHP/Mobile • http://www.egeniq.com/blog • http://mobile.phpmagazine.net/ • http://thoomtech.com/iphone/ objc-for-php-developers-part-1/ 108
- 109. http://www.egeniq.com info@egeniq.com @egeniq Thank you! Questions? http://joind.in/3412 http://www.egeniq.com ivo@egeniq.com @ijansch
- 110. Credits Pictures used in this presentation are creative commons attribution licensed pictures. Here are the owners and the URLS where the originals can be found: ‘Dow says POO’ by Stepleton - http://www.flickr.com/photos/29407923@N03/2899705638/ ‘The telephone’ by Tylerdurden - http://www.flickr.com/photos/tylerdurden/529028040/ ‘Web’ by Kurtxio - http://www.flickr.com/photos/kurtxio/2182760200/ ‘Heavy cloud, no rain’ by Robynsnest - http://www.flickr.com/photos/robynsnest/12405841/ ‘Wireless fridge’ from http://www.wirelessgoodness.com/tag/srt746awtn/ ‘Army iphone app’ by Soldiersmediacenter - http://www.flickr.com/photos/soldiersmediacenter/4271795260/ ‘Carbon Fibre Wallet’ by Ryan Loos - http://www.flickr.com/photos/rh1n0/4157547404/ ‘Keys’ by Jamison Judd - http://www.flickr.com/photos/jamisonjudd/2419601050/ ‘Phone Girl’ by Steffen - http://www.flickr.com/photos/re-ality/460465894/ ‘Icon_safari_hires’ by Hans Dorsch - http://www.flickr.com/photos/hansdorsch/2861804087/ ‘Thinking’ by Karola - http://www.flickr.com/photos/karola/3623768629/ ‘Jus'a web’ by Jusfi - http://www.flickr.com/photos/jusfi/2921202536/ ‘iPad :)’ by Korosirego - http://www.flickr.com/photos/korosirego/4334862666/ ‘I've got a monkey on my back’ by Keven Law - http://www.flickr.com/photos/kevenlaw/2698946160/ ‘Add a spoonful of coffee’ by Martyn Wright - http://www.flickr.com/photos/35521221@N05/5181647830/ ‘Locked steel’ by Darwinbell - http://www.flickr.com/photos/darwinbell/321434733/ ‘4 Biscuits’ by Barnoid - http://www.flickr.com/photos/barnoid/2025811494/ ‘pining for maui’ by D’Arcy Norman - http://www.flickr.com/photos/dnorman/2223663304/
- 111. Credits Pictures used in this presentation are creative commons attribution licensed pictures. Here are the owners and the URLS where the originals can be found: ‘Seeing my world through a keyhole’ by Kate Ter Haar - http://www.flickr.com/photos/katerha/4592429363/ ‘Dear CNN, please send me push notifi...’ by Alex Valentine - http://www.flickr.com/photos/alexvalentine/5644423659/ Ivo’s portrait in intro, photo by Jelmer de Haas - http://www.jelmerdehaas.com