Creación de aplicaciones móviles con PHP y Symfony2

Aplicaciones Móviles
Quién es Pablo Godel?

Creación de aplicaiones
móviles con
PHP y Symfony2
Pablo Godel

PHP Barcelona Conference 2011

Friday, October 28, 2011

Quién es Pablo Godel?"

• Argentino, viviendo en Miami, EE.UU. desde 1999
• Programador PHP, Symfony, entre otros
• Fundador de la lista de PHP en español
http://news.php.net/php.general.es/3 )Julio 2000(
• Pasé el control a php.net con más de 1000 subscriptos
• Co-fundador de ServerGrove Networks
⁃ fundada en 2005
⁃ servicios de hosting especializado en PHP, Symfony,
Zend Framework, entre otros


Quién es Pablo Godel?"


Aplicaciones Móviles -
Quién es Pablo Godel? Por qué?

¿Por qué?



• Cada vez más personas tienen acceso a
Internet en el télefono móvil
• Los dispositivos son cada vez más potentes y
versátiles
• El acceso a Internet es más rápido y conﬁable
• El público demanda servicios y aplicaciones
en todo momento



• No se pueden dar ventajas en el mercado
ultra-competitivo
• Tus competidores ya lo están haciendo o
implementando



Algunos números...



• 5.300 millones de usuarios a nivel mundial
• 370 millones de teléfonos móviles vendidos en
Q1 2011 a nivel mundial
• + 850 millones de usuarios en China
• 54 millones de usuarios en España )2010(
• 300 mil aplicaciones móviles con 10.900
millones de instalaciones



Teléfonos celulares
por Paises

Fuente:
http://www.nationmaster.com/graph/med_mob_pho-media-mobile-phones



¿Cómo llegamos hasta aquí?



Un poco de historia...


Quién es Pablo Godel? Historia
1979 Primera red celular )1G - primera generación(
comercial del mundo lanzada en Japón


1983 Motorola DynaTAC

El teléfono “móvil”
Motorola DynaTAC -
también conocido como
LA BOTA - costaba
US$ 3995 y pesaba 793
gramos!


1997 WAP - Wireless Application Protocol

Estandard común para conectar distintas redes y
aplicaciones en dispositivos
• Cliente WAP
• Servidor envia WML )XML(
<?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



WAP/WML

Programador:



WAP/WML

Usuario:



2007...


2007 iPhone

• Revolución en el
mercado de
telefonía móvil
• Cliente Web Safari


2007 iPhone App Store


2008 Primer dispositivo Android


2010 iPad



¿Qué signiﬁca todo esto?



Generación móvil
La PC no está muerta



Generación móvil
Pero el consumo de información pasó a
teléfonos y tabletas



Generación móvil
Y esto es sólo el comienzo...


Quién es Pablo Godel? Symfony

¿Symfony?



¿Qué es Symfony?



Deﬁnición por Fabien Potencier:
⁃ Symfony2 es un grupo de componentes
independientes, reusables y cohesivos, para
solucionar problemas comunes de
desarrollo web.
⁃ Symfony2 es también un framework full-
stack, gracias a estos componentes

Fuente: http://fabien.potencier.org/



21 componentes
de alta calidad


Componentes: • DependencyInjection
• EventDispatcher
• HttpFoundation
• DomCrawler
• ClassLoader
• CssSelector
• HttpKernel
• BrowserKit
• Templating
• Translation
• Serializer
• Validator
• Security
• Routing
• Console
• Process
• Config
• Finder
• Locale
• Yaml
• Form
Todos en GitHub: http://github.com/symfony

Proyectos usando componentes de Symfony2:

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

Fuente: http://fabien.potencier.org/



¿Conoces o usaste
symfony 1.x?



Mejor olvídate...



Lo único en común entre
symfony 1.x y Symfony2
es el nombre...



Bueno, la carpeta web
también...



Características
• Escrito completamente desde cero para PHP 5.3 o superior.
• Basado en los estandares del protocolo HTTP
• API sólido y estable.
• Extensible mediante creación de bundles (en sf1 eran llamados plugins)
• Configuración flexible con archivos Yaml, XML, anotaciones, y/o código PHP.
• Toda la configuración es convertida a PHP y cacheada.
• Creación y manejo de formularios
• Muchos unit tests
• Código auditado por compañia de seguridad profesional gracias a las
donaciones de la comunidad Symfony.



Comunidad Symfony

• 312 personas han contribuido a Symfony2 hasta la
fecha
• ~2500 pull requests en GitHub
• 705 bundles en http://symfony2bundles.org
• Canales IRC en Freenode: #symfony-es, #symfony
y #symfony-dev
• Listas de discusión: symfony-es, symfony y
symfony-devs en Google Groups



Características

• Excelente integración con:
• Doctrine2 ORM y ODM
• Propel2
• Assetic - manejo de assets (css, js, imágenes, etc)
• Twig - motor de plantillas
• Swiftmailer - envío de emails



¿Por qué Symfony?



• Gracias a la base sólida se pueden crear buenas
APIs HTTP / Restful
• Twig facilita la creación de plantillas para
dispositivos móviles
• Es posible re-utilizar mucho código para distintas
aplicaciones o dispositivos gracias a las plantillas,
los controladores y el ruteo


Quién es Pablo Godel? Tipos

1.Aplicaciones nativas
2.Aplicaciones SMS
3.Aplicaciones web
4.Aplicaciones híbridas )mezcla de nativas & web(


Quién es Pablo Godel? Tipos

Aplicaciones Nativas


Aplicaciones
Quién es Pablo Godel? nativas

• iPhone - Objective-C
• Android - Java
• Windows Mobile - .NET
• Frameworks multi-plataform
⁃ PhoneGap http://phonegap.com

⁃ rhomobile http://rhomobile.com

⁃ Appceledator http://appcelerator.com

⁃ Corona http://anscamobile.com/corona/


Aplicaciones

PHP o Symfony no corren en estos
dispositivos pero las aplicaciones
nativas comúnmente necesitan
conectarse a un servidor.

Usos comunes:
• envío de mensajes
• carga de datos de una DB
• autenticación/autorización
• chats

Aplicaciones

Consideraciones:
• Diseñar API )RESTful, HTTP, XML-RPC(
temprano en el ciclo de desarrollo
• Una API se puede utilizar para otro tipo de
clientes )ej. Desktop como Adobe AIR(
• Reutilizar controladores y aprovechar el
_format para generar distintos formatos de
contenido )XML, json, etc(


Aplicaciones
Quién es Pablo Godel? Nativas

Symfony2 Bundle para crear una API

- FOSRestBundle
https://github.com/FriendsOfSymfony/FOSRestBundle


Aplicaciones

Notiﬁcaciones PUSH

Un servidor envía mensajes a la red celular
con destino teléfono/aplicación
- El servidor puede estar desarrollado con
Symfony
Ejemplo en PHP: http://easyapns.com/



Aplicaciones SMS


Aplicaciones
Quién es Pablo Godel? SMS

Symfony puede recibir y enviar mensajes de
texto a través de un gateway

Usos comunes:
- Envío de alertas
- Chats
- Pagos electrónicos
- Avisos publicitarios


Aplicaciones


Aplicaciones

Recibo de SMS
1.El usuario envía un mensaje de texto a un "short code" )ej. 12334(
2.El mensaje se rutea a través del proveedor de telefonía
3.El mensaje llega al gateway registrado para procesar el short code
4.El gateway convierte el mensaje y lo envía por internet utilizando
HTTP/HTTPS
5.Nuestro servidor recibe el "request" con la siguiente información:
⁃ número de télefono
⁃ operador / carrier
⁃ contenido del mensaje
6.Procesamos el mensaje
7.Si es necesario enviamos una respuesta


Aplicaciones

Envío de SMS

1.Generamos el contenido del mensaje
2.Se envía el mensaje al gateway con la siguiente información
⁃ número de teléfono
⁃ operador / carrier )opcional(
⁃ contenido del mensaje
3.El gateway recibe el mensaje y responde si puede aceptarlo
4.Una vez que el mensaje es enviado, es posible recibir un acuse de
recibo. Este aviso puede ser un “request” aparte.


Aplicaciones

Proveedores de SMS gateway:
• Twilio
http://twilio.com
)lanzanzando servicio internacional pronto(
• Clickatell
http://www.clickatell.com
• SMSpubli
http://www.smspubli.com


Aplicaciones
Quién es Pablo Godel? SMS/MMS

MMS son mensajes multimedia con texto,
imágenes, video y audio
Usos comunes:
- Procesamiento de fotos
- Envío de código de barras 2D



Aplicaciones Web


Aplicaciones
Quién es Pablo Godel? Web

Frameworks HTML / Javascript
• iui
http://code.google.com/p/iui/ )uno de los primeros(

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


Aplicaciones
jQuery Mobile


Aplicaciones
jQuery Mobile

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


Aplicaciones
jQuery Mobile - Características

• Basado en jQuery
• Liviano )12KB comprimido(
• HTML5
• Accesible )funciona con lectores de
páginas(
• Eventos, plugins y themes
• Patrocinado por Mozilla, Adobe, Palm,
Nokia, Blackberry entre otros.


Aplicaciones
jQuery Mobile - Características

• Manejo de páginas
• Transiciones
• Ventanas de dialogo
• Enlances y botones
• Barras de navegación
• Encabezados / Pies de páginas
• Formularios
• Listas


Aplicaciones
jQuery Mobile - Manejo de páginas

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

Aplicaciones
jQuery Mobile - Manejo de páginas

<body>


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

! ! <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 data-role="page" id="bar">

! ! <p>I'm first in the source order so I'm shown as the page.</p>! !
! ! <p><a href="#foo">Back to foo</a></p>!

</div>
</body>

Aplicaciones
jQuery Mobile - Transiciones

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


Aplicaciones
jQuery Mobile - Ventanas de dialogo


Aplicaciones
jQuery Mobile - Barras de navegacion

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


Aplicaciones
jQuery Mobile - Forms


Aplicaciones
jQuery Mobile - Listas


Aplicaciones

jQuery Mobile y Symfony


Aplicaciones


Aplicaciones

Plantillas


Aplicaciones
<!DOCTYPE html>
<html>
layout_movil.html.twig
<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{% block title %}Jornadas de Symfony{% endblock %} | Desymfony.com</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="{% block pageid '' %}" class="type-{% block pagetype 'interior' %}">
{% block header %}
{% endblock %}
{% block contenido %}
{% endblock %}
{% block footer %}
<div data-role="footer" class="ui-bar" data-theme="b">
<a href="{{ path('m_estatica', { 'pagina': 'copyright'}) }}">© {{ 'now' | date('Y') }} - desymfony</a>
<a href="{{ path('m_estatica', { 'pagina': 'privacidad'}) }}"> Privacidad</a>
<a href="{{ path('m_estatica', { 'pagina': 'condiciones'}) }}"> Condiciones de uso</a>
</div>
{% endblock %}
</div>
</body>
</html>

Aplicaciones
{% extends "DesymfonyBundle::layout_movil.html.twig" %}
{% block pageid 'ponencia' %} ponencia.mhtml.twig
{% block pagetype 'interior' %}
{% block header %}
{% include 'DesymfonyBundle:Movil:header.mhtml.twig' with {'titulo':
ponencia.titulo} %}
{% endblock %}
{% block contenido %}
<div data-role="content">
<div class="content-primary">
<h2>{{ ponencia.titulo }}</h2>
<p>{{ ponencia.descripcion }}</p>
<ul data-role="listview" data-inset="true">
<li><strong>Fecha</strong><p class="ui-li-aside">{{ ponencia.fecha | date("d M") }}</p></li>
<li><strong>Hora</strong><p class="ui-li-aside">{{ ponencia.hora | date("H:i") }} -
{{ ponencia.horaFinalizacion | date("H:i") }}</p></li>
<li><strong>Idioma</strong><p class="ui-li-aside">{{ idiomas[ponencia.idioma] }}</p></li>
<li><a href="{{ path('m_ponentes') }}"><strong>Ponente</strong><p class="ui-li-aside">
{{ ponencia.ponente }}</p></a></li>
</ul>
</div>
</div>
{% endblock %}

Aplicaciones

header.mhtml.twig

<div data-role="header" data-theme="b">
<h1>{{titulo}}</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>

Aplicaciones

Rutas


Aplicaciones
jQuery Mobile y Symfony / Rutas

portada:
pattern: /
defaults: { _controller: DesymfonyBundle:Default:index }
ponencias:
pattern: /ponencias.{_format}
defaults: { _controller: DesymfonyBundle:Ponencia:index, _format: html }
requirements:
_format: html|xml|ics
ponencia:
pattern: /ponencia/{slug}
defaults: { _controller: DesymfonyBundle:Ponencia:ponencia }
estatica:
pattern: /sitio/{pagina}
defaults: { _controller: DesymfonyBundle:Default:estatica }
requirements:
pagina: contacto|copyright|condiciones|privacidad


Aplicaciones
jQuery Mobile y Symfony / Rutas

m_portada:
pattern: /m
defaults: { _controller: DesymfonyBundle:Default:index, _format: mhtml }
m_ponencias:
pattern: /m/ponencias.{_format}
defaults: { _controller: DesymfonyBundle:Ponencia:index, _format: mhtml }
requirements:
_format: mhtml|html|xml|ics
m_ponencia:
pattern: /m/ponencia/{slug}
defaults: { _controller: DesymfonyBundle:Ponencia:ponencia, _format: mhtml }
m_ponentes:
pattern: /m/ponentes
defaults: { _controller: DesymfonyBundle:Ponente:index, _format: mhtml }


Aplicaciones
jQuery Mobile y Symfony / Rutas opción 2

m_portada:
pattern: /m
defaults: { _controller: DesymfonyBundle:Default:index, movil: true }
m_ponencias:
pattern: /m/ponencias.{_format}
defaults: { _controller: DesymfonyBundle:Ponencia:index, movil: true }
requirements:
_format: html|xml|ics
m_ponencia:
pattern: /m/ponencia/{slug}
defaults: { _controller: DesymfonyBundle:Ponencia:ponencia, movil: true }
m_ponentes:
pattern: /m/ponentes
defaults: { _controller: DesymfonyBundle:Ponente:index, movil: true }


Aplicaciones
jQuery Mobile y Symfony / Rutas opción 3

m_portada:
pattern: /m
defaults: { _controller: DesymfonyBundle:Movil:index }


Aplicaciones

Controladores y acciones


Aplicaciones
jQuery Mobile y Symfony / Controlador & Acción

public function indexAction()
{
$em = $this->get('doctrine')->getEntityManager();
$ponenciasDiaUno = $em->getRepository('DesymfonyBundle:Ponencia')-
>ﬁndTodasDeFecha('2011-07-01');
$ponenciasDiaDos = $em->getRepository('DesymfonyBundle:Ponencia')-
>ﬁndTodasDeFecha('2011-07-02');

$format = $this->get('request')->getRequestFormat();

return $this->render('DesymfonyBundle:Default:index.'.$format.'.twig', array(
'ponenciasDiaUno' => $ponenciasDiaUno,
'ponenciasDiaDos' => $ponenciasDiaDos,
));
}


Aplicaciones

Testing


Aplicaciones

• Podemos utilizar los functional
tests de Symfony2 ya que el
contenido es HTML
• Si utilizamos el modo AJAX para
transiciones y carga dinámica,
no podemos usar los functional
tests
• Alternativas: Selenium RC
• Behat )BDD(


Aplicaciones
jQuery Mobile y Symfony

DEMO !
Aplicación desymfony:
• http://desymfony.qa.servergrove.com
• http://desymfony.qa.servergrove.com/m

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

login: demo@servergrove.com
password: Demo2010


Aplicaciones Híbridas


Aplicaciones
Quién es Pablo Godel? híbridas

Aplicaciones que combinan aspectos de
aplicaciones nativas y web

Framework PhoneGap

- Desarrollo de aplicación con HTML y JavaScript
- Integración con XCode
- Compila en código nativo
- Acceso a acelerómetro, cámara, geolocation,
notiﬁcaciones



¿Preguntas?



MUCHAS GRACIAS!

Comentarios & sugerencias:
http://joind.in/4330

Fuentes: https://github.com/desymfony/desymfony
Slides: http://slideshare.net/pgodel

Twitter: @pgodel
IRC Freenode: pgodel


Creación de aplicaciones móviles con PHP y Symfony2

Más contenido relacionado

Destacado (20)

Similar a Creación de aplicaciones móviles con PHP y Symfony2 (20)

Más de Pablo Godel (20)

Creación de aplicaciones móviles con PHP y Symfony2