tek13 - creating mobile apps with php and symfony

Creating Mobile Apps with PHP & Symfony

Pablo Godel @pgodel

http://joind.in/8159Tek13, Chicago, May 15 2013

Wednesday, May 15, 13

http://joind.in/8159


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




Symfony?

Mobile Apps - Symfony


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





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



http://github.com/symfony

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 usedsymfony 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 applications2.SMS applications & Voice applications3.Web aplicaciones4.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


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/

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

•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

- 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


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




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

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

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

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




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•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">

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

Mobile Apps - Web AppsjQuery 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|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( // ... )); }



Extras


•Detect Mobile devices http://mobiledetect.net/

•Symfony2 + MobileDetectBundle•Silex + MobileDetectServiceProvider


http://mobiledetect.net/

http://mobiledetect.net/

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

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 appTwig templatesMobile 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, notifications 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/podisumSlides: http://slideshare.net/pgodel

Mobile Apps - Thanks!




https://github.com/desymfony/desymfony

https://github.com/desymfony/desymfony

http://slideshare.net/pgodel

http://slideshare.net/pgodel

tek13 - creating mobile apps with php and symfony

Technology

internal page

source order