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

⁃ 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

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(

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>

WAP/WML

Developer:

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

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

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

Push Notifications

Server sends messages to mobile devices- AppleApnPushBundle- RMSPushNotificationsBundle- DABSquaredPushNotificationsBundle- ZendService\Google\Gcm- ZendService\Apple\Apns

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

Web Applications

Mobile Apps - Web Apps

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/

jQuery Mobile

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

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

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

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: demo@servergrove.compassword: demo

Podisum http://github.com/pgodel/podisum

Generates summaries of Logstash events Silex appTwig templatesMobile version

Podisum

Apache access_log Logstash

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!

tek13 - creating mobile apps with php and symfony

internal page

source order

Technology

php framewarks - symfony

czechitas - školení php/symfony microkernel

tdd with bdd in php and symfony

Čtvrtkon #44 - symfony php framework

nashville php symfony presentation

desarrollo rápido con php y symfony (i): introducción a...

php, cloud and microsoft symfony live 2010

symfony components 2.0 on php 5.3

symfony: php framework for web projects

practical symfony | symfony | web php...

[php] symfony framework

php symfony and software lifecycle

php symfony, vale a pena

your code sucks, let's fix it! - php|tek13

php 7 et symfony 3

symfony: simplifier vos développement web professionnels...

symfony: simplify your professional web development with php...

php con symfony

programacion php con symfony

mieux développer en php avec symfony