Tek13 - Creating Mobile Apps with PHP and Symfony

Creating Mobile Apps with
PHP & Symfony
Pablo Godel @pgodel
http://joind.in/8159
Tek13, Chicago, May 15 2013
Wednesday, May 15, 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
•Devices are more powerful & versatile
•Internet access is faster and more reliable
•Users demand services and applications at all times &
and the go
•Don’t give advantages in an ultra-competitive market
•Your competition is already using it or implementing it
Mobile Apps - Why

Some numbers...
Mobile Apps - Why

•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, 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...

Symfony?
Mobile Apps - Symfony

What is 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

Silex
The PHP/‘Symfony’ micro-framework
http://silex.sensiolabs.org/

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

Proyects using Symfony2 components:
• Silex: BrowerKit, CssSelector, DomCrawler, EventDispatcher, HttpFoundation,
HttpKernel, Routing, Form, Translation, Validator
• Goutte: BrowserKit, DomCrawler, CssSelector, Process, ClassLoader, Finder
• Behat: Console, DependencyInjection, EventDispatcher, Finder, Yaml, Config,
Translation
• Doctrine2: Console, Yaml Propel2: Console, ClassLoader, Yaml
• PHPUnit: Yaml
• FLOW3: Yaml
• Midguard CMS: most of them in their next version?
• phpBB 4: most of them
• Drupal 8: ClassLoader, HttpFoundation, HttpKernel, and more
• EZ Publish
• Laravel
• Composer
• ...

Do you know or used
symfony 1.x?

Forget it...

The only thing in
common between
symfony 1.x & Symfony2
is the name...

OK... the web folder too...

Why Symfony?

•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

1.Native applications
2.SMS applications & Voice applications
3.Web aplicaciones
4.Hybrid applications (mix native, web, others)
Mobile Apps - Types

Native Applications
Mobile Apps - Types

•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

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
•An API can be used for other types of clients
(ej. Desktop como Adobe AIR)
•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 Silex
- responsible-service-provider
- silex-skeleton-rest

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

SMS (and voice) Applications
Mobile Apps - SMS Apps

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

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

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

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

jQuery Mobile

•Based on jQuery
•Light (40KB)
•HTML5
•Accesible (works on screen readers)
•Events, plugins, themes
•Lots of documentation
jQuery Mobile - Features

•Page management
•Transitions
•Dialog windows
•Links and buttons
•Navigation bars
•Header / Footer
•Forms
•Lists
jQuery Mobile - Features

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 & Symfony

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

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

Testing

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

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
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client

Hybrid Applications
Mobile Apps - Hybrid Apps

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

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

Tek13 - Creating Mobile Apps with PHP and Symfony

More Related Content

What's hot

Viewers also liked

Similar to Tek13 - Creating Mobile Apps with PHP and Symfony

More from Pablo Godel

Recently uploaded

In this document

Tek13 - Creating Mobile Apps with PHP and Symfony