Creating Mobile Apps with PHP & Symfony2
Pablo Godel @pgodel
http://joind.in/8675Symfony Live, Portland, May 22 2013
Thursday, May 23, 13
⁃ Born in Argentina, living in the US since 1999⁃ PHP & Symfony developer⁃ Founder of the original PHP mailing list in spanish ⁃ Master of the parrilla⁃ Co-founder of ServerGrove
Who am I?!
Thursday, May 23, 13
Thursday, May 23, 13
Thursday, May 23, 13
⁃ Founded ServerGrove Networks in 2005
⁃ Provider of web hosting specialized in PHP, Symfony, ZendFramework, MongoDB and others
⁃ Servers in USA and Europe!
Who am I?!
Thursday, May 23, 13
⁃ Very active open source supporter through codecontributions and usergroups/conference sponsoring
Community is our Teacher
Thursday, May 23, 13
Why?
Mobile Apps - Why
Thursday, May 23, 13
•More & more people have access to Internet through mobile devices
Mobile Apps - Why
Thursday, May 23, 13
•More & more people have access to Internet through mobile devices
•Devices are more powerful & versatile
Mobile Apps - Why
Thursday, May 23, 13
•More & more people have access to Internet through mobile devices
•Devices are more powerful & versatile• Internet access is faster and more reliable
Mobile Apps - Why
Thursday, May 23, 13
•More & more people have access to Internet through mobile devices
•Devices are more powerful & versatile• Internet access is faster and more reliable•Users demand services and applications on the go at all
times
Mobile Apps - Why
Thursday, May 23, 13
•More & more people have access to Internet through mobile devices
•Devices are more powerful & versatile• Internet access is faster and more reliable•Users demand services and applications on the go at all
times•Don’t give advantages in an ultra-competitive market
Mobile Apps - Why
Thursday, May 23, 13
Some numbers...
Mobile Apps - Why
Thursday, May 23, 13
•Estimated 6.5 billion mobile subscriptions globally (over 90%)
Mobile Apps - Why
Thursday, May 23, 13
•Estimated 6.5 billion mobile subscriptions globally (over 90%)
•1.7 billion mobile phones sold in 2012
Mobile Apps - Why
Thursday, May 23, 13
•Estimated 6.5 billion mobile subscriptions globally (over 90%)
•1.7 billion mobile phones sold in 2012•1 billion users in China alone
Mobile Apps - Why
Thursday, May 23, 13
•Estimated 6.5 billion mobile subscriptions globally (over 90%)
•1.7 billion mobile phones sold in 2012•1 billion users in China alone•321M subscriptions in the US (over 100%)
Mobile Apps - Why
Thursday, May 23, 13
•Estimated 6.5 billion mobile subscriptions globally (over 90%)
•1.7 billion mobile phones sold in 2012•1 billion users in China alone•321M subscriptions in the US (over 100%)•Devices range from phone and tablets to door locks,
thermostats, TVs, Cars, etc.
Mobile Apps - Why
Thursday, May 23, 13
How did we get here?
Mobile Apps - Why
Thursday, May 23, 13
Let’s see some history...
Mobile Apps - History
Thursday, May 23, 13
First commercial cellular network launched in
Japan )1G - first generation(
1979
Mobile Apps - History
Thursday, May 23, 13
The “mobile” telephone
Motorola DynaTAC -
aka “The Boot”cost: US$ 3995weight:793g / 28 ounces
1983 Motorola DynaTAC
Mobile Apps - History
Thursday, May 23, 13
Common Standard to connect networks and apps
•WAP client•Server sends WML (XML)
WAP - Wireless Application Protocol
<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml" ><wml> <card id="main" title="First Card"> <p mode="wrap">This is a sample WML page.</p> </card></wml>
1997
Mobile Apps - History
Thursday, May 23, 13
WAP/WML
Mobile Apps - History
Thursday, May 23, 13
WAP/WML
Mobile Apps - History
Thursday, May 23, 13
WAP/WML
Mobile Apps - History
Thursday, May 23, 13
Developer:
WAP/WML
Mobile Apps - History
Thursday, May 23, 13
User:
WAP/WML
Mobile Apps - History
Thursday, May 23, 13
2007...
Mobile Apps - History
Thursday, May 23, 13
•Revolutionized the market of mobile telephony
•Safari Web Client
iPhone2007
Mobile Apps - History
Thursday, May 23, 13
iPhone App Store2007
Mobile Apps - History
Thursday, May 23, 13
First Android Device2008
Mobile Apps - History
Thursday, May 23, 13
iPad2010
Mobile Apps - History
Thursday, May 23, 13
So what does all this mean?
Mobile Apps - History
Thursday, May 23, 13
The PC is not dead
The Mobile Generation
Mobile Apps - History
Thursday, May 23, 13
The PC is not dead, yet?
The Mobile Generation
Mobile Apps - History
Thursday, May 23, 13
Information is now consumed on phones and tablets
The Mobile Generation
Mobile Apps - History
Thursday, May 23, 13
And this is just the beginning...
The Mobile Generation
Mobile Apps - History
Thursday, May 23, 13
Mobile Apps - Symfony
Thursday, May 23, 13
Mobile Apps - Symfony
Definition by Fabien Potencier:
⁃ Symfony2 is a reusable set of standalone, decoupled, and cohesive PHP components
that solve common web development
problems.
⁃ Based on these components, Symfony2 is
also a full-stack web framework.
http://fabien.potencier.org/article/49/what-is-symfony2
Thursday, May 23, 13
25 high quality components
http://symfony.com/doc/current/components/index.html
Mobile Apps - Symfony
Thursday, May 23, 13
• DependencyInjection• EventDispatcher• HttpFoundation• DomCrawler• ClassLoader• CssSelector• HttpKernel• BrowserKit• Templating• Translation• Serializer• Validator • Security • Routing • Console • Process • Config • Finder • Locale • Yaml• Form• ...
Components:
GitHub: http://github.com/symfony
Mobile Apps - Symfony
Thursday, May 23, 13
Mobile Apps - Symfony
Silex
The PHP/‘Symfony’ micro-framework
http://silex.sensiolabs.org/
// web/index.php
require_once __DIR__.'/../vendor/autoload.php';
$app = new Silex\Application();
$app->get('/hello/{name}', function ($name) use ($app) { return 'Hello '.$app->escape($name);});
$app->run();
Thursday, May 23, 13
Why Symfony?
Mobile Apps - Symfony
Thursday, May 23, 13
•Provides solid base to build good HTTP & RESTful APIs
Mobile Apps - Symfony
Thursday, May 23, 13
•Provides solid base to build good HTTP & RESTful APIs
•Twig makes it easy to build templates for mobile devices
Mobile Apps - Symfony
Thursday, May 23, 13
•Provides solid base to build good HTTP & RESTful APIs
•Twig makes it easy to build templates for mobile devices
•Re-use code for different devices thanks to templates, controllers and routing
Mobile Apps - Symfony
Thursday, May 23, 13
•Provides solid base to build good HTTP & RESTful APIs
•Twig makes it easy to build templates for mobile devices
•Re-use code for different devices thanks to templates, controllers and routing
•Bundles + Composer = Endless possibilities!
Mobile Apps - Symfony
Thursday, May 23, 13
&Mobile Web Applications
Mobile Apps - Web Apps
Thursday, May 23, 13
http://forecast.io
Mobile Apps - Web Apps
Thursday, May 23, 13
Frameworks HTML / Javascript • iui http://code.google.com/p/iui/ (one of the first ones)
• JQuery Mobile http://jquerymobile.com/ (Open source)
• JQTouch http://jqtouch.com/ (Open source)
• DHTMLX Touch http://dhtmlx.com/touch/ (Open source)
• The M Project http://www.the-m-project.org/ (Open source)
• Sensa Touch http://www.sencha.com/products/touch/
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile
Mobile Apps - Web Apps
Thursday, May 23, 13
Supports:- IOS (iPhone/iPad)- Android- Blackberry- Windows Phone- palm webOS- symbian
jQuery Mobile
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery•Light (40KB)
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery•Light (40KB)•HTML5
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery•Light (40KB)•HTML5 •Accessible (works on screen readers)
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery•Light (40KB)•HTML5 •Accessible (works on screen readers)•Events, plugins, themes
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Based on jQuery•Light (40KB)•HTML5 •Accessible (works on screen readers)•Events, plugins, themes•Lots of documentation
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows•Links and buttons
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows•Links and buttons•Navigation bars
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows•Links and buttons•Navigation bars•Header / Footer
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows•Links and buttons•Navigation bars•Header / Footer•Forms
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
•Page management•Transitions•Dialog windows•Links and buttons•Navigation bars•Header / Footer•Forms•Lists
jQuery Mobile - Features
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Page management
<body>
<!-- Start of first page --><div data-role="page" id="foo">
! <div data-role="content">!! ! <p>I'm first in the source order so I'm shown as the page. </p>!!! ! <p>View internal page called <a href="#bar">bar</a></p>!! </div><!-- /content -->
</div><!-- /page -->
</body>
Mobile Apps - Web Apps
Thursday, May 23, 13
<body>
<!-- Start of first page --><div data-role="page" id="foo">
! <div data-role="content">!! ! <p>View internal page called <a href="#bar">bar</a></p>!! </div><!-- /content -->
</div><!-- /page -->
<!-- Start of second page --><div data-role="page" id="bar">
! <div data-role="content">!! ! <p><a href="#foo">Back to foo</a></p>!! </div><!-- /content -->
</div><!-- /page --></body>
jQuery Mobile - Page management
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Transitions
<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
<a href="foo.html" data-rel="dialog" data-transition="slidedown">Open dialog</a>
<a href="foo.html" data-rel="dialog" data-transition="flip">Open dialog</a>
<a href="foo.html" data-rel="dialog" data-transition="fade">Open dialog</a>
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Dialogs
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Navigation bars
<div data-role="header" data-position="inline">! <a href="index.html" data-icon="delete">Cancel</a>! <h1>Edit Contact</h1>! <a href="index.html" data-icon="check">Save</a></div>
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Forms
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Forms
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile - Lists
Mobile Apps - Web Apps
Thursday, May 23, 13
&jQuery Mobile
Mobile Apps - Web Apps
Thursday, May 23, 13
Templates
Mobile Apps - Web Apps
Thursday, May 23, 13
<!DOCTYPE html><html><head> <title>Podisum by ServerGrove</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
{% block content %}{% endblock %}
</body></html>
layout.html.twig
Mobile Apps - Web Apps
Thursday, May 23, 13
{% extends "layout.html.twig" %}
{% block content %} <div data-role="page" id="home"> <div data-role="header"> <h1>Podisum</h1> </div> <div data-role="content">
<1-- ... --> </div> </div>
index.html.twig
Mobile Apps - Web Apps
Thursday, May 23, 13
<div data-role="header" data-theme="b"> <h1>{{title}}</h1> <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-ajax="false">Home</a></div>
header.html.twig
Mobile Apps - Web Apps
Thursday, May 23, 13
{% extends "layout.html.twig" %}
{% block content %}{% include “header.html.twig’ %}
<div data-role="content"><1-- ... -->
</div> </div>
index.html.twig
Mobile Apps - Web Apps
Thursday, May 23, 13
Routing
Mobile Apps - Web Apps
Thursday, May 23, 13
home: pattern: / defaults: { _controller: DemoBundle:Default:index }talks: pattern: /talks.{_format} defaults: { _controller: DemoBundle:Talk:index, _format: html } requirements: _format: html|xml|icstalk: pattern: /talk/{slug} defaults: { _controller: DemoBundle:Talk:talk }
jQuery Mobile & Symfony / Routing
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile & Symfony / Routing
home: pattern: /m defaults: { _controller: DemoBundle:Default:index,_format:mhtml }talks: pattern: /m/talks defaults: { _controller: DemoBundle:Talk:index, _format:mhtml }talk: pattern: /m/talk/{slug} defaults: { _controller: DemoBundle:Talk:talk, _format:mhtml }
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile & Symfony / Routing (option 2)
home: pattern: /m defaults: { _controller: DemoBundle:Default:index, mobile:true }talks: pattern: /m/talks defaults: { _controller: DemoBundle:Talk:index, mobile:true }talk: pattern: /m/talk/{slug} defaults: { _controller: DemoBundle:Talk:talk, mobile:true }
Mobile Apps - Web Apps
Thursday, May 23, 13
m_home: pattern: /m defaults: { _controller: DemoBundle:Mobile:index }
jQuery Mobile & Symfony / Routing (option 3)
Mobile Apps - Web Apps
Thursday, May 23, 13
Controllers & Actions
Mobile Apps - Web Apps
Thursday, May 23, 13
jQuery Mobile & Symfony / Controller & Action
public function indexAction() { $em = $this->get('doctrine')->getEntityManager(); // ...
$format = $this->get('request')->getRequestFormat();
return $this->render('DemoBundle:Default:index.'.$format.'.twig', array( // ... )); }
Mobile Apps - Web Apps
Thursday, May 23, 13
Detect Mobile Devices
•http://mobiledetect.net/
•Symfony2 + MobileDetectBundle
•Silex + MobileDetectServiceProvider
Mobile Apps - Web Apps
Thursday, May 23, 13
Mobile Apps - Web AppsMobileDetectBundle
public function indexAction() { $em = $this->get('doctrine')->getEntityManager(); // ...
$mobileDetector = $this->get('mobile_detect.mobile_detector');
$tpl = $mobileDetector->isMobile() ? ‘mhtml’ : ‘html’;
return $this->render('DemoBundle:Default:index.'.$tpl.'.twig', array( // ... )); }
Thursday, May 23, 13
Mobile Apps - Web AppsMobileDetectBundle
{% if is_mobile() %}{% if is_tablet() %}{% if is_device('iphone') %} # magic methods is[...]
{% extends is_mobile() ? "MyBundle:Layout:mobile.html.twig" : "MyBundle:Layout:full.html.twig" %}
Thursday, May 23, 13
Mobile Apps - Web AppsMobileDetectBundle
mobile_detect: redirect: mobile: is_enabled: true host: http://m.site.com status_code: 301 action: redirect tablet: ~ switch_device_view: ~
Thursday, May 23, 13
•Symfony2 functional tests for HTML pages
•For AJAX other testing methods may be used:•Selenium RC•Behat
Mobile Apps - Web Apps
Testing
Thursday, May 23, 13
DEMOS !
Podisum: http://github.com/pgodel/podisum
sunshinephphttp://m.sunshinephp.com/
Control Panel:•https://control.servergrove.com/•https://control.servergrove.com/m
login: [email protected]: demo
Mobile Apps - Web Apps
Thursday, May 23, 13
Podisum http://github.com/pgodel/podisum
•Generates summaries of Logstash events•Silex app•Twig templates•Mobile version
Mobile Apps - Web Apps
Thursday, May 23, 13
Podisum
Mobile Apps - Web Apps
Thursday, May 23, 13
Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client
Mobile Apps - Web Apps
Thursday, May 23, 13
Mobile Apps
&Native Applications
Thursday, May 23, 13
• iPhone - Objective-C•Android - Java•Windows Mobile - .NET•Frameworks multi-platform⁃ PhoneGap http://phonegap.com⁃ rhomobile http://rhomobile.com⁃ Appceledator http://appcelerator.com⁃ Corona http://anscamobile.com/corona/
Mobile Apps - Native Apps
Thursday, May 23, 13
Mobile Apps - Native Apps
PHP does not run in these devices but native apps need to retrieve and store data from servers.
Thursday, May 23, 13
Common uses:•send emails & messages in general• loading of profile data•authentication & authorization•chats
Mobile Apps - Native Apps
PHP does not run in these devices but native apps need to retrieve and store data from servers.
Thursday, May 23, 13
Some considerations:•Design API (RESTful, HTTP, XML-RPC) early on at
the development cycle
Mobile Apps - Native Apps
Thursday, May 23, 13
Some considerations:•Design API (RESTful, HTTP, XML-RPC) early on at
the development cycle•APIs can be used by multiple types of clients
Mobile Apps - Native Apps
Thursday, May 23, 13
Some considerations:•Design API (RESTful, HTTP, XML-RPC) early on at
the development cycle•APIs can be used by multiple types of clients •Re-use controllers and use _format to generate
different content types (XML, JSON, etc)
Mobile Apps - Native Apps
Thursday, May 23, 13
Build APIs with Symfony2
- FOSRestBundlehttps://packagist.org/packages/friendsofsymfony/rest-bundle
- ApiDocBundlehttps://packagist.org/packages/nelmio/api-doc-bundle
Mobile Apps - Native Apps
Thursday, May 23, 13
Build APIs with Symfony2
- FOSRestBundlehttps://packagist.org/packages/friendsofsymfony/rest-bundle
- ApiDocBundlehttps://packagist.org/packages/nelmio/api-doc-bundle
Mobile Apps - Native Apps
Build APIs with Silex
- responsible-service-provider
- silex-skeleton-rest
Thursday, May 23, 13
Push Notifications
Server sends messages to mobile devices- AppleApnPushBundle- RMSPushNotificationsBundle- DABSquaredPushNotificationsBundle- ZendService\Google\Gcm- ZendService\Apple\Apns
Mobile Apps - Native Apps
Thursday, May 23, 13
Mobile Apps - Native AppsRMSPushNotificationsBundle
public function pushAction() { $message = new iOSMessage(); $message->setMessage('Oh my! A push notification!'); $message->setDeviceIdentifier('test012fasdf482asdfd63f6d7bc6d4293aedd5fb448fe505eb4asdfef8595a7');
$this->container->get('rms_push_notifications')->send($message);
return new Response('Push notification sent!'); }
Thursday, May 23, 13
Mobile Apps - SMS Apps
&SMS (and voice) Applications
Thursday, May 23, 13
Mobile Apps - SMS Apps
Thursday, May 23, 13
Symfony can send/receive text messages
Common uses:- Alerts- Chats- Electronic payments- Ads- Two-factor authentication
Mobile Apps - SMS Apps
Thursday, May 23, 13
SMS Gateway providers:•Twilio•Nexmo•Clickatell•BulkSMS
Mobile Apps - SMS Apps
Thursday, May 23, 13
Mobile Apps - SMS AppsVreshTwilioBundle
$twilio = $this->get('twilio.api');
$message = $twilio->account->sms_messages->create( '9991231234', // From a valid Twilio number '8881231234', // Text this number "Hello monkey!" );
Thursday, May 23, 13
Mobile Apps - Voice AppsTwilio-php SDK
$client = new Services_Twilio($sid, $token);$call = $client->account->calls->create( '9991231234', // From a valid Twilio number '8881231234', // Call this number
// Read TwiML at this URL when a call connects (hold music) 'http://twimlets.com/holdmusic?Bucket=com.twilio.music.ambient');
Thursday, May 23, 13
MMS are multimedia messages with text, images, video, audio.Common uses:- Photo processing- Sending/scanning 2D barcodes
Mobile Apps - SMS/MMS Apps
https://github.com/endroid/QrCodehttps://github.com/endroid/EndroidQrCodeBundlehttps://github.com/mkoppanen/php-zbarcode
Thursday, May 23, 13
Mobile Apps - Hybrid Apps
&Hybrid Applications
(mix native, web, others)
Thursday, May 23, 13
Applications that combine web, sms, voice and native aspects
Framework PhoneGap
- Build apps with HTML & JavaScript- Integrates with XCode- Compiles app into native code- Access to accelerometer, camera, geolocation, notifications and more
Mobile Apps - Hybrid Apps
Thursday, May 23, 13
Questions?
Mobile Apps
Thursday, May 23, 13
Twitter: @pgodel IRC Freenode: pgodel
Source: https://github.com/pgodel/podisumSlides: http://slideshare.net/pgodel
Mobile Apps - Thanks!Feedback Please:
http://joind.in/8675
Thank you!
Thursday, May 23, 13