creating mobile apps with php & symfony2

Creating Mobile Apps with PHP & Symfony2

Pablo Godel @pgodel

http://joind.in/8675Symfony Live, Portland, May 22 2013

Thursday, May 23, 13

http://joind.in/8675


⁃ 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 codecontributions 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



•Devices are more powerful & versatile

Mobile Apps - Why



•Devices are more powerful & versatile• Internet access is faster and more reliable

Mobile Apps - Why



•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



•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


Some numbers...

Mobile Apps - Why


•Estimated 6.5 billion mobile subscriptions globally (over 90%)

Mobile Apps - Why



•1.7 billion mobile phones sold in 2012

Mobile Apps - Why



•1.7 billion mobile phones sold in 2012•1 billion users in China alone

Mobile Apps - Why



•1.7 billion mobile phones sold in 2012•1 billion users in China alone•321M subscriptions in the US (over 100%)

Mobile Apps - Why



•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


How did we get here?

Mobile Apps - Why


Let’s see some history...

Mobile Apps - History


First commercial cellular network launched in

Japan )1G - first generation(

1979



The “mobile” telephone

Motorola DynaTAC -

aka “The Boot”cost: US$ 3995weight: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



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




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



http://github.com/symfony

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 Silex\Application();

$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




•Twig makes it easy to build templates for mobile devices





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





•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



http://forecast.io

http://forecast.io

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/



http://code.google.com/p/iui/

http://code.google.com/p/iui/

http://jquerymobile.com/

http://jquerymobile.com/

http://jqtouch.com/

http://jqtouch.com/

http://dhtmlx.com/touch/

http://dhtmlx.com/touch/

http://www.the-m-project.org/

http://www.the-m-project.org/

http://www.sencha.com/products/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

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 •Accessible (works on screen readers)•Events, plugins, themes




•Based on jQuery•Light (40KB)•HTML5 •Accessible (works on screen readers)•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•Links and buttons•Navigation bars




•Page management•Transitions•Dialog windows•Links and buttons•Navigation bars•Header / Footer




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




•Page management•Transitions•Dialog windows•Links and buttons•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">

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

</div>

<div data-role="page" id="bar">

! <div data-role="content">!! ! <p><a href="#foo">Back to foo</a></p>!! </div>

</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|icstalk: pattern: /talk/{slug} defaults: { _controller: DemoBundle:Talk:talk }

jQuery Mobile & Symfony / Routing



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 }



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 }



m_home: pattern: /m defaults: { _controller: DemoBundle:Mobile:index }

jQuery Mobile & Symfony / Routing (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



http://mobiledetect.net/

http://mobiledetect.net/

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



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



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


http://m.site.com

http://m.site.com

•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

sunshinephphttp://m.sunshinephp.com/

Control Panel:•https://control.servergrove.com/•https://control.servergrove.com/m

login: [email protected]: demo



http://github.com/pgodel/podisum


http://m.sunshinephp.com

http://m.sunshinephp.com

http://desymfony.qa.servergrove.com




mailto:[email protected]

mailto:[email protected]

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


http://www.phonegap.com/

http://www.phonegap.com/

http://rhomobile.com/

http://rhomobile.com/

http://www.appcelerator.com/

http://www.appcelerator.com/

http://www.anscamobile.com/corona/

http://www.anscamobile.com/corona/


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




the development cycle•APIs can be used by multiple types of clients




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)



Build APIs with Symfony2

- FOSRestBundlehttps://packagist.org/packages/friendsofsymfony/rest-bundle

- ApiDocBundlehttps://packagist.org/packages/nelmio/api-doc-bundle



https://packagist.org/packages/friendsofsymfony/rest-bundle




https://packagist.org/packages/nelmio/api-doc-bundle


Build APIs with Symfony2

- FOSRestBundlehttps://packagist.org/packages/friendsofsymfony/rest-bundle

- ApiDocBundlehttps://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- RMSPushNotificationsBundle- DABSquaredPushNotificationsBundle- ZendService\Google\Gcm- ZendService\Apple\Apns



https://github.com/ZhukV/AppleApnPushBundle

https://github.com/ZhukV/AppleApnPushBundle

https://github.com/richsage/RMSPushNotificationsBundle

https://github.com/richsage/RMSPushNotificationsBundle

https://github.com/DABSquared/DABSquaredPushNotificationsBundle

https://github.com/DABSquared/DABSquaredPushNotificationsBundle

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!'); }


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



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!" );


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');


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/QrCodehttps://github.com/endroid/EndroidQrCodeBundlehttps://github.com/mkoppanen/php-zbarcode


https://github.com/endroid/QrCode

https://github.com/endroid/QrCode

https://github.com/endroid/EndroidQrCodeBundle




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, notifications and more

Mobile Apps - Hybrid Apps


Questions?

Mobile Apps


Twitter: @pgodel IRC Freenode: pgodel

Source: https://github.com/pgodel/podisumSlides: http://slideshare.net/pgodel

Mobile Apps - Thanks!Feedback Please:


Thank you!


https://github.com/desymfony/desymfony

https://github.com/desymfony/desymfony

http://slideshare.net/pgodel

http://slideshare.net/pgodel



creating mobile apps with php & symfony2

Technology

internal page

source order