creacion de aplicaciones moviles con symfony2

•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 )antes de 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 y Symfony

•Advertencia! No soy experto en aplicaciones móviles, pero si he creado algunas con Symfony2.

Quién es Pablo Godel?"

¿Por qué?

Quién es Pablo Godel? Aplicaciones Móviles - 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 confiable

•El público demanda servicios y aplicaciones

en todo momento

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

•No se pueden dar ventajas en el mercado

ultra-competitivo

•Tus competidores ya lo están haciendo o

implementando

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

Algunos números...

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

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

•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

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

Teléfonos celulares por Paises

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

¿Cómo llegamos hasta aquí?

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

Un poco de historia...

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

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

Primera red celular )1G - primera generación(

comercial del mundo lanzada en Japón1979

El teléfono “móvil”

Motorola DynaTAC -

también conocido como

LA BOTA - costaba

US$ 3995 y pesaba 793

gramos!

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

1983 Motorola DynaTAC

Estandard común para conectar distintas redes y aplicaciones en dispositivos

•Cliente WAP•Servidor envia 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>

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

1997

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

WAP/WML

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

WAP/WML

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

WAP/WML

Programador: “Renuncio!”

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

WAP/WML

Usuario: “Esto no sirve!”

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

WAP/WML

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

2007...

•Revolución en el

mercado de

telefonía móvil

•Cliente Web Safari

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

iPhone2007

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

iPhone App Store2007

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

Primer dispositivo Android2008

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

iPad2010

¿Qué significa todo esto?

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

La PC no está muerta

Generación móvil

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

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

Generación móvil

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

Generación móvilY esto es sólo el comienzo...

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

1.Aplicaciones nativas2.Aplicaciones SMS3.Aplicaciones web4.Aplicaciones híbridas )mezcla de nativas & web(

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

Aplicaciones Nativas

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

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

Quién es Pablo Godel? Aplicaciones Móviles Aplicacionesnativas

PHP y Symfony?No... Symfony no corre en el teléfono, todavía!

Quién es Pablo Godel? Aplicaciones Móviles Aplicacionesnativas

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

Quién es Pablo Godel? Aplicaciones Móviles Aplicacionesnativas

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(

Quién es Pablo Godel? Aplicaciones Móviles Aplicacionesnativas

Bundles para crear una API

- ViewBundle - EverzetRestfulControllersBundle

Ambos se convirtieron en

- RestBundlehttps://github.com/FriendsOfSymfony/RestBundle

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesNativas

Notificaciones PUSH

Un servidor envía mensajes a la red celular

con destino teléfono/aplicación- El servidor puede estar desarrollado con

SymfonyEjemplo en PHP: http://easyapns.com/

Quién es Pablo Godel? Aplicaciones Móviles Aplicacionesnativas

Aplicaciones SMS

Quién es Pablo Godel? Aplicaciones Móviles

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Recibo de SMS1.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ía3.El mensaje llega al gateway registrado para procesar el short code4.El gateway convierte el mensaje y lo envía por internet utilizando

HTTP/HTTPS5.Nuestro servidor recibe el "request" con la siguiente información:

⁃ número de télefono

⁃ operador / carrier

⁃ contenido del mensaje6.Procesamos el mensaje7.Si es necesario enviamos una respuesta

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Envío de SMS

1.Generamos el contenido del mensaje2.Se envía el mensaje al gateway con la siguiente información

⁃ número de teléfono

⁃ operador / carrier )opcional(

⁃ contenido del mensaje3.El gateway recibe el mensaje y responde si puede aceptarlo4.Una vez que el mensaje es enviado, es posible recibir un acuse de

recibo. Este aviso puede ser un “request” aparte.

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Consideraciones útiles:• Short codes son adminstrados por CSCA )Common Short Code

Assoc(

• Short codes: compartidos y dedicados

⁃ compartido: el mensaje debe incluir un "keyword" para definir

como procesarlo

• Short codes: números aleatorios o "elegidos / de vanidad"

• Costo: entre $500 y $1000 por mes

• Costo por mensaje recibido y enviado

• Reglas definidas de comportamiento )código de conducta de MMA(

• Comandos standard: join, stop, stop all

• Aplicaciones son llamadas campañas y deben ser aprobadas antes

de ser lanzadas

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Consideraciones técnicas:

•Protocolos/Formatos: XML, SOAP, XML-RPC

•Un mensaje recibido no puede ser recibido

nuevamente, en consecuencia es importante

guardar copia antes de ser procesado

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

Proveedores de SMS gateway:

•Twiliohttp://twilio.com

•Clickatellhttp://www.clickatell.com

•SMSpublihttp://www.smspubli.com

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS

MMS son mensajes multimedia con texto, imágenes, video y audioUsos comunes:

- Procesamiento de fotos- Envío de código de barras 2D

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesSMS/MMS

Aplicaciones Web

Quién es Pablo Godel? Aplicaciones Móviles

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/

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile - Características

jQuery Mobile - Manejo de páginas

<body>

<!-- Start of first page --><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><!-- /content -->

</div><!-- /page -->

</body>

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile - Manejo de páginas

<body>

<!-- Start of first page --><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><!-- /content -->

</div><!-- /page -->

<!-- Start of second page --><div data-role="page" id="bar">

! <div data-role="content">!! ! <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><!-- /content -->

</div><!-- /page --></body>

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

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>

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile - Ventanas de dialogo

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

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>

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile - Forms

jQuery Mobile - Forms

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile - Listas

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile y Symfony

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Plantillas

<!DOCTYPE html><html><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'}) }}">&copy; {{ '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>

layout_movil.html.twig

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

{% extends "DesymfonyBundle::layout_movil.html.twig" %}

{% block pageid 'ponencia' %}{% 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 %}

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

ponencia.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><!-- /header -->

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

header.mhtml.twig

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Rutas

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile y Symfony / Rutas

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|icsm_ponencia: pattern: /m/ponencia/{slug} defaults: { _controller: DesymfonyBundle:Ponencia:ponencia, _format: mhtml }m_ponentes: pattern: /m/ponentes defaults: { _controller: DesymfonyBundle:Ponente:index, _format: mhtml }

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

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|icsm_ponencia: pattern: /m/ponencia/{slug} defaults: { _controller: DesymfonyBundle:Ponencia:ponencia, movil: true }m_ponentes: pattern: /m/ponentes defaults: { _controller: DesymfonyBundle:Ponente:index, movil: true }

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

jQuery Mobile y Symfony / Rutas opción 2

jQuery Mobile y Symfony / Rutas opción 3

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Controladores y acciones

jQuery Mobile y Symfony / Controlador & Acción

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

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

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

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

Testing

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

•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

jQuery Mobile y Symfony

DEMO !

Quién es Pablo Godel? Aplicaciones Móviles AplicacionesWeb

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.compassword: Demo2010

Aplicaciones Híbridas

Quién es Pablo Godel? Aplicaciones Móviles

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

Quién es Pablo Godel? Aplicaciones Móviles Aplicacioneshíbridas

PhoneGap

DEMO !

Quién es Pablo Godel? Aplicaciones Móviles Aplicacioneshíbridas

¿Preguntas?

Quién es Pablo Godel? Aplicaciones Móviles

MUCHAS GRACIAS!

Fuentes: https://github.com/pgodel/desymfony/tree/movilhttps://github.com/desymfony/desymfony

Slides: http://slideshare.net/pgodelTwitter: @pgodel

IRC Freenode: pgodel

Quién es Pablo Godel? Aplicaciones Móviles