Creating Mobile Apps With PHP & Symfony2

Creating Mobile Apps with
PHP & Symfony2
Pablo Godel @pgodel
http://joind.in/8675
Symfony 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?!

⁃ 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?!

⁃ Very active open source supporter through code
contributions and usergroups/conference sponsoring
Community is our Teacher

Why?
Mobile Apps - Why

•More & more people have access to Internet through
mobile devices
Mobile Apps - Why

mobile devices
•Devices are more powerful & versatile
Mobile Apps - Why

mobile devices
•Internet access is faster and more reliable
Mobile Apps - Why

mobile devices
•Users demand services and applications on the go at all
times
Mobile Apps - Why

mobile devices
•Users demand services and applications on the go at all
times
•Don’t give advantages in an ultra-competitive market
Mobile Apps - Why

Some numbers...
Mobile Apps - Why

•Estimated 6.5 billion mobile subscriptions globally (over
90%)
Mobile Apps - Why

90%)
•1.7 billion mobile phones sold in 2012
Mobile Apps - Why

90%)
•1 billion users in China alone
Mobile Apps - Why

90%)
•321M subscriptions in the US (over 100%)
Mobile Apps - Why

90%)
•321M subscriptions in the US (over 100%)
•Devices range from phone and tablets to door locks,
thermostats, TVs, Cars, etc.
Mobile Apps - Why

How did we get here?
Mobile Apps - Why

Let’s see some history...
Mobile Apps - History

First commercial cellular network launched in
Japan )1G - ﬁrst generation(
1979

The “mobile” telephone
Motorola DynaTAC -
aka “The Boot”
cost: US$ 3995
weight:793g / 28 ounces
1983 Motorola DynaTAC

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

WAP/WML

Developer:
WAP/WML

User:
WAP/WML

2007...

•Revolutionized
the market of
mobile telephony
•Safari Web Client
iPhone2007

iPhone App Store2007

First Android Device2008

iPad2010

So what does all
this mean?

The PC is not dead
The Mobile Generation

The PC is not dead, yet?

Information is now consumed on phones and tablets

And this is just the beginning...

Mobile Apps - Symfony

Deﬁnition 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

25 high quality
components
http://symfony.com/doc/current/components/index.html

• 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

Silex
The PHP/‘Symfony’ micro-framework
http://silex.sensiolabs.org/
// web/index.php
require_once __DIR__.'/../vendor/autoload.php';
$app = new SilexApplication();
$app->get('/hello/{name}', function ($name) use ($app) {
return 'Hello '.$app->escape($name);
});
$app->run();

Why Symfony?

•Provides solid base to build good HTTP &
RESTful APIs

RESTful APIs
•Twig makes it easy to build templates for
mobile devices

RESTful APIs
mobile devices
•Re-use code for different devices thanks to
templates, controllers and routing

RESTful APIs
mobile devices
•Re-use code for different devices thanks to
templates, controllers and routing
•Bundles + Composer = Endless possibilities!

&
Mobile Web Applications
Mobile Apps - Web Apps

http://forecast.io

Frameworks HTML / Javascript
• iui
http://code.google.com/p/iui/ (one of the ﬁrst 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/

jQuery Mobile

Supports:
- IOS (iPhone/iPad)
- Android
- Blackberry
- Windows Phone
- palm webOS
- symbian
jQuery Mobile

•Based on jQuery
jQuery Mobile - Features

•Based on jQuery
•Light (40KB)

•Based on jQuery
•Light (40KB)
•HTML5

•Based on jQuery
•Light (40KB)
•HTML5
•Accessible (works on screen readers)

•Based on jQuery
•Light (40KB)
•HTML5
•Events, plugins, themes

•Based on jQuery
•Light (40KB)
•HTML5
•Events, plugins, themes
•Lots of documentation

•Page management

•Page management
•Transitions

•Page management
•Transitions
•Dialog windows

•Page management
•Transitions
•Dialog windows
•Links and buttons

•Page management
•Transitions
•Dialog windows
•Navigation bars

•Page management
•Transitions
•Dialog windows
•Navigation bars
•Header / Footer

•Page management
•Transitions
•Dialog windows
•Navigation bars
•Header / Footer
•Forms

•Page management
•Transitions
•Dialog windows
•Navigation bars
•Header / Footer
•Forms
•Lists

jQuery Mobile - Page management
<body>

<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>
</div>
</body>

<body>

<div data-role="page" id="foo">
! ! <p>View internal page called <a href="#bar">bar</a></p>!
</div>

<div data-role="page" id="bar">
! ! <p><a href="#foo">Back to foo</a></p>!
</div>
</body>
jQuery Mobile - Page management

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>

jQuery Mobile - Dialogs

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>

jQuery Mobile - Forms

jQuery Mobile - Lists

&
jQuery Mobile

Templates

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

{% 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

<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

{% extends "layout.html.twig" %}
{% block content %}
{% include “header.html.twig’ %}
<div data-role="content">
<1-- ... -->
</div>
</div>
index.html.twig

Routing

home:
pattern: /
defaults: { _controller: DemoBundle:Default:index }
talks:
pattern: /talks.{_format}
defaults: { _controller: DemoBundle:Talk:index, _format: html }
requirements:
_format: html|xml|ics
talk:
pattern: /talk/{slug}
defaults: { _controller: DemoBundle:Talk:talk }
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 }

(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 }

m_home:
pattern: /m
defaults: { _controller: DemoBundle:Mobile:index }
(option 3)

Controllers & Actions

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(
// ...
));
}

Detect Mobile Devices
•http://mobiledetect.net/
•Symfony2 + MobileDetectBundle
•Silex + MobileDetectServiceProvider

MobileDetectBundle
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(
// ...
));
}

MobileDetectBundle
{% 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" %}

MobileDetectBundle
mobile_detect:
redirect:
mobile:
is_enabled: true
host: http://m.site.com
status_code: 301
action: redirect
tablet: ~
switch_device_view: ~

•Symfony2 functional tests for HTML pages
•For AJAX other testing methods may be used:
•Selenium RC
•Behat
Testing

DEMOS !
Podisum:
http://github.com/pgodel/podisum
sunshinephp
http://m.sunshinephp.com/
Control Panel:
•https://control.servergrove.com/
•https://control.servergrove.com/m
login: demo@servergrove.com
password: demo

Podisum http://github.com/pgodel/podisum
•Generates summaries of Logstash events
•Silex app
•Twig templates
•Mobile version

Podisum

Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client

Mobile Apps
&
Native Applications

•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

PHP does not run in these
devices but native apps need to
retrieve and store data from
servers.

Common uses:
•send emails & messages in general
•loading of proﬁle data
•authentication & authorization
•chats
PHP does not run in these
devices but native apps need to
retrieve and store data from
servers.

Some considerations:
•Design API (RESTful, HTTP, XML-RPC) early on at
the development cycle

•APIs can be used by multiple types of clients

•APIs can be used by multiple types of clients
•Re-use controllers and use _format to generate
different content types (XML, JSON, etc)

Build APIs with Symfony2
- FOSRestBundle
https://packagist.org/packages/friendsofsymfony/rest-
bundle
- ApiDocBundle
https://packagist.org/packages/nelmio/api-doc-bundle

Build APIs with Symfony2
- FOSRestBundle
https://packagist.org/packages/friendsofsymfony/rest-
bundle
- ApiDocBundle
https://packagist.org/packages/nelmio/api-doc-bundle
Build APIs with Silex
- responsible-service-provider
- silex-skeleton-rest

Push Notifications
Server sends messages to mobile devices
- AppleApnPushBundle
- RMSPushNotiﬁcationsBundle
- DABSquaredPushNotiﬁcationsBundle
- ZendServiceGoogleGcm
- ZendServiceAppleApns

RMSPushNotificationsBundle
public function pushAction()
{
$message = new iOSMessage();
$message->setMessage('Oh my! A push notification!');
$message-
>setDeviceIdentifier('test012fasdf482asdfd63f6d7bc6d4293aedd5f
b448fe505eb4asdfef8595a7');
$this->container->get('rms_push_notifications')-
>send($message);
return new Response('Push notification sent!');
}

Mobile Apps - SMS Apps
&
SMS (and voice) Applications

Symfony can send/receive text messages
Common uses:
- Alerts
- Chats
- Electronic payments
- Ads
- Two-factor authentication

SMS Gateway providers:
•Twilio
•Nexmo
•Clickatell
•BulkSMS

VreshTwilioBundle
$twilio = $this->get('twilio.api');
$message = $twilio->account->sms_messages->create(
'9991231234', // From a valid Twilio number
'8881231234', // Text this number
"Hello monkey!"
);

Mobile Apps - Voice Apps
Twilio-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'
);

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/QrCode
https://github.com/endroid/EndroidQrCodeBundle
https://github.com/mkoppanen/php-zbarcode

Mobile Apps - Hybrid Apps
&
Hybrid Applications
(mix native, web, others)

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,
notiﬁcations and more
Mobile Apps - Hybrid Apps

Questions?
Mobile Apps

Twitter: @pgodel
IRC Freenode: pgodel
Source: https://github.com/pgodel/podisum
Slides: http://slideshare.net/pgodel
Mobile Apps - Thanks!
Feedback Please:
http://joind.in/8675
Thank you!

Creating Mobile Apps With PHP & Symfony2

More Related Content

Viewers also liked

Similar to Creating Mobile Apps With PHP & Symfony2

More from Pablo Godel

Recently uploaded

Creating Mobile Apps With PHP & Symfony2