These are the slides for a three hour primer for PHP developers. It covers the whole spectrum from the mobile web to apis for native apps, as well as topics such as generating QR codes and sending push notifications from PHP to android and apple devices.

1. http://www.egeniq.com
info@egeniq.com
@egeniq
Mobile for PHP Developers
a 3 hour primer
Ivo Jansch
php|tek, May 2011

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: 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

49. layouts/scripts/layout_mobile.phtml
49

50. views_mobile/scripts/index/index.phtml
50

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

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

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

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

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