Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Mobile for PHP Developers, 2012 edition

Ivo Jansch
January 27, 2012
Programming
1.2k
10

Mobile for PHP Developers, 2012 edition

3 hour tutorial explaining mobile development to an audience of PHP/web developers. Topics range from device detection to building APIs for native apps. Delivered as a 3 hour tutorial at the PHPBenelux 2012 conference (#phpbnl12)

Ivo Jansch

January 27, 2012

Transcript

121 slides

  1. http://www.egeniq.com [email protected] @egeniq phpbenelux, January 2012 Ivo Jansch Mobile for

    PHP Developers a 3 hour primer

  2. About Me @ijansch Developer Author Entreprenerd PHP 2

  3. About Egeniq Startup Mobile Tech Knowledge Geeks Development 3

  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: 400.000 apps (jan 12) ‣Apple App

    Store: 500.000 apps (okt 11) ‣Web: 3.000.000 websites optimized for mobile (may 11) Sources: ‣ http://www.pcworld.com/article/247247/android_market_tops_400000_apps.html ‣ http://www.bizreport.com/2010/10/dotmobi-2000-growth-in-number-of-mobile-ready-websites.html# ‣ http://www.apple.com/iphone/built-in-apps/app-store.html 17

  18. Predictions 18

  19. Part 2 Browser Based Mobile Apps 19

  20. Source: freewebmasterhelp.com 10 years ago 20

  21. Source: Mobiforge.com A little over 4 years ago 21

  22. 4.5 years ago 22

  23. 2 ways to render a regular website: ‣Keyhole ‣Scaled Dealing

    with a smaller screen 23

  24. Keyhole 24

  25. Scaled 25

  26. A pixel is not a pixel 26 640 1020

  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 28 640 320 iPhone

    3 iPhone 4 480 960

  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 • Renamed

    to ‘Scientia Mobile Database API’ ‣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. Exercise! ‣Create a page that displays the Sneezing Panda video

    on devices that support Flash. ‣Display ‘Sad Panda’! on devices that don’t. • Examples of device that can show flash: browser • Example of device that can’t: iPhone • Tip to simulate mobile devices: http://techie-buzz.com/ tips-and-tricks/emulate-mobile-browser-in-firefox.html • Don’t have a laptop? Team up! 47

  48. 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 48

  49. Zend Framework mobile site 2 ways for mobile layout: ‣Separate

    files ‣Separate folders Detection in bootstrap 49

  50. layouts/scripts/layout_mobile.phtml 50

  51. views_mobile/scripts/index/index.phtml 51

  52. Bootstrap.php 52

  53. Result Try it at http://egeniq.com/demo/zf/public 53

  54. Zend_Http_UserAgent ‣Since Zend Framework 1.11 ‣Can work with WURFL or

    Device Atlas 54

  55. Dealing With Mobile Browsers ‣Considerations: • Don’t redirect to homepage

    • Offer ‘classic’ option • Don’t make assumptions on physical screen size 55

  56. Part 3 A few words on front end design 56

  57. UI Design ‣Hover = evil ‣‘Finger Friendly Design’ ‣‘Touch Driven

    Development’ ‣Screens are getting bigger and (!) smaller 57

  58. Scalable websites http://www.niemanlab.org/2010/09/nyts-opinion-pages-continue-the-march-toward-app- inspired-design/ 58

  59. HTML5 is easy ‣<!doctype html> - period. ‣<script> or <style>

    - period. ‣Semantics: header, footer, section, article tags 59

  60. HTML5 is powerful ‣localStorage ‣<video> ‣<canvas> ‣<svg> ‣<input type=”number”> and

    many other form fields ‣ navigator.geolocation.getCurrentPosition(); 60

  61. Browsers love HTML5 Browsers supporting HTML5: ‣Firefox ‣Safari ‣Opera ‣All

    the mobile browsers ‣IE (sort of, no support for <article> until IE9) 61

  62. Things to consider ‣Don’t just scale the layout, scale content

    too ‣Consider ‘scenario based content management’ 62

  63. jQTouch 63

  64. jQTouch ‣iPhone experience in HTML5 ‣http://jqtouch.com/ (beta 4) ‣ jQuery

    / Zepto based ‣MIT License ‣Give it a try: http://jqtouch.com/preview/ demos/main 64

  65. Alternatives ‣jQuery Mobile • 1.0 was released on November 16,

    2011 • http://jquerymobile.com/ ‣Zepto • jQuery interface compatible, optimized for mobile WebKit • http://zeptojs.com/ ‣Sencha Touch • From the makers of jqTouch • Tablet support • http://www.sencha.com/products/touch/ 65

  66. Simple tricks Making phone calls from a web page: 66

  67. Simple tricks Open Maps application: 67

  68. You already know PHP Your PHP skills + HTML5 =

    easy mobile websites 68

  69. Exercise! ‣Get jqTouch ‣Modify demo to include #phpbnl12 menu item

    ‣Add tutorial schedule 69

  70. Part 4 Doing Cool Stuff With PHP And Native Apps

    70

  71. QR Codes ‣http://phpqrcode.sourceforge.net 71

  72. QR Codes: URLs 72

  73. QR Codes: MECARDs 73

  74. QR Codes: MECARDs 74

  75. 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 75

  76. Tiqr Diagram 76

  77. Tiqr Integration 77

  78. Device Notifications ‣A way to get attention ‣Use with caution

    78

  79. 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 79

  80. Notifications 80 Apple Push Notification Services Your App Your Server

    deviceToken message payload signature message payload

  81. Notifications 81

  82. Notifications - Android 82

  83. Notifications - Android 83

  84. 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! 84

  85. Token Exchange 85 Apple Push Notification Services Your App Your

    Server deviceToken message payload signature message payload Token Exchange deviceToken notificationToken notificationToken deviceToken notificationToken http://tokenexchange.googlecode.com

  86. Exercise! ‣Let me scan your contact details • Use MECARD

    format • Use phpQRCode library (http:// phpqrcode.sourceforge.net/) • (Note: requires GD extension in PHP) 86

  87. Part 5 APIs for Native Apps 87

  88. PHP’s role in native apps iPhone App Android App Blackberry

    App API 88

  89. Optimize APIs for mobile ‣Content optimization ‣Scalability ‣Longevity ‣Security ‣Client/Server

    considerations 89

  90. Content Optimization ‣Consider CPU and memory constraints • Prefer JSON

    over XML • Compress data • Keep responses small • But not too small (connection / routing overhead) 90

  91. Content Optimization ‣To REST or not to REST ‣RESTful API

    design: • http://someapi/pages • http://someapi/pages/1 • http://someapi/pages/1/comments • http://someapi/pages/1/comments/3 ‣Scenario Driven API design: • http://someapi/dashboard 91

  92. Content Optimization ‣Rest: • Developer friendly (intuitive, logical) • Light,

    but also heavy • Easy to maintain, loosely coupled ‣Scenario driven: • Mobile friendly (optimized for few connections and data) • Specific datasets, fewer calls • Tighter coupled to application functionality 92

  93. Scalability ‣AppStore featured/top listings Slashdot effect ‣Consider the 80/20 rule

    of app popularity though 93

  94. Scalability Case: RTLNieuws 365 94

  95. Scalability Case: RTLNieuws 365 ‣API: • LAMP + Varnish •

    Scenario Driven Design • Content pre-generation ‣ Cron + Command Line PHP • Very important: caching headers and ‘TTL’ ‣Controlled launch process: • Soft launch: sneaky talkshow plug at 23pm day before • Build up buzz throughout launch day • News item in 19.30 RTL News 95

  96. Scalability Case: RTLNieuws 365 96

  97. Scalability Case: RTLNieuws 365 ‣News item had > 1 million

    TV viewers ‣40.000 installs on day 1 • 30% of which in 5 minutes following news item ‣~ 100.000 apps installed in week 1 ‣No 1 app store position for 8 days in a row 97

  98. Scalability Case: RTLNieuws 365 ‣Setup: • 1 * PHP api

    server live • 1 * PHP api server hot standby • 2 * varnish + 1 * spare varnish ‘just in case’ • 1 * mysql live • 1 * mysql hot standby ‣Conclusion: PHP + Varnish = Awesome APIs 98

  99. 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 99

  100. 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 100

  101. 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 101

  102. API Security ‣TLS/SSL ‣Basic Auth ‣OAuth, XAuth ‣PKI / TLSAuth

    ‣Signed URLs 102

  103. Signed URLs ‣Prevent parameter tampering ‣Allow API use by specific

    client only ‣Simple but effective way to protect API 103

  104. Signed URLs 104 Client API Sign Params With Signature Verify

    Signature W Params + Signature

  105. Signed URLs 105 W

  106. Signed URLs 106 W

  107. Signed URLs 107 W

  108. 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 108

  109. 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 109

  110. Part 6 Web vs Native: Best of Both Worlds 110

  111. 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 111

  112. Cross Compilers = Instant Coffee 112

  113. Part 7 Random bits if time permits 113

  114. 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 114

  115. Running PHP on the device First: Why??! ‣PHP For Android

    (PFA) • http://phpforandroid.net/ ‣PAMP for Symbian • http://wiki.opensource.nokia.com/projects/PAMP 115

  116. 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

    116

  117. ‘Lemon ADE’ AST editor 117

  118. Resources for PHP/Mobile • http://www.egeniq.com/blog • http://mobile.phpmagazine.net/ • http://thoomtech.com/iphone/ objc-for-php-developers-part-1/

    118

  119. Thank you! Questions? http://www.egeniq.com [email protected] @egeniq http://joind.in/4746 http://www.egeniq.com [email protected] @ijansch

  120. 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/

  121. 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

More Decks by Ivo Jansch

See All by Ivo Jansch
Waardengedreven Digitaliseren
ijansch
0
200
Generative AI
ijansch
0
230
AI in Software Development
ijansch
1
310
Native Development Without Double Cost
ijansch
0
120
Open Source Overheidswerk - Best Practices en Uitdagingen
ijansch
0
280
Software Ontwikkeling Tijdens een Pandemie
ijansch
0
200
Cross platform app development - current state
ijansch
0
220
What it takes to build an app
ijansch
0
150
Scenario Driven API Design (CodeByTheSea)
ijansch
0
180

Other Decks in Programming

See All in Programming
AmebaブログはKMPから卒業します
kmars0605
0
350
Web3Dライブラリを作ってVue Custom Rendererの仕組みを理解しよう / lets learn vue custom renderer by making 3d library
drumath2237
1
130
あなたの await、OS まで届いてる？ strace で覗く JavaScript の非同期
hasutosasaki
1
2.3k
AI駆動開発4年目の現在地（『あなたはFDEになるべきか？』イベント資料）
kumaiu
0
610
[DroidKnights 2026] Workflow AX: From Auto-Documented Policies to E2E Testing
raeminkang
0
570
선언형 햅틱 라이브러리 진동을 소개합니다
l2hyunwoo
1
310
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
jame2408
1
370
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
310
まずはコードより業務と向き合う：テーブル解体のためにPdMを呼んだ話
sakawe_ee
0
220
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
bicstone
2
630
flutter_test のその先へ — Flutter アプリの LLM 機能に「評価」という品質保証を
kosukesaigusa
0
200
Engineering Biometric UX Across Android Versions | DroidKnights 2026
ryunen344
1
200

Featured

See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
750
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
590
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
340
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
6
920
Everyday Curiosity
cassininazir
0
400
How to Talk to Developers About Accessibility
jct
2
620
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.4k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
640
The Language of Interfaces
destraynor
162
27k