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)
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
Native Apps ‣On- and offline ‣Event based ‣Native device experience ‣Convenient access to device features ‣Stateful ‣Monetization through App Stores 16
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
Standardization Horror ‣ • iPhone and most others ‣ • Many feature phones (originally Palm) ‣ • Windows Mobile ‣ content=”target-densitydpi=device-dpi” /> • Android 30
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
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
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
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
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
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
Dealing With Mobile Browsers ‣Considerations: • Don’t redirect to homepage • Offer ‘classic’ option • Don’t make assumptions on physical screen size 55
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
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
Exercise! ‣Let me scan your contact details • Use MECARD format • Use phpQRCode library (http:// phpqrcode.sourceforge.net/) • (Note: requires GD extension in PHP) 86
Content Optimization ‣Consider CPU and memory constraints • Prefer JSON over XML • Compress data • Keep responses small • But not too small (connection / routing overhead) 90
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
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
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
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
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
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
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
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
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
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
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
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/[email protected]/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/[email protected]/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/
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
ijansch
k_takasaki
yuya4
ohnoeight
mikobaaaaa0920
akkeylab
zoetrope
masayaaoyama
.png){kind=avatar}
headwaters
xztaityozx
nearmugi
10xinc
andpad
tanoku
garrettdimon
quramy
michaelherold
ufuk
mclloyd
jennybc
sstephenson
rmw
trallard
lauravandoore
mraible