Creacion de aplicaciones moviles con symfony2

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

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: “Renuncio!”


WAP/WML
Usuario: “Esto no sirve!”


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? 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
Aplicaciones Móviles
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 y Symfony?
No... Symfony no corre en el teléfono, todavía!

Aplicaciones

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

Bundles para crear una API

- ViewBundle
- EverzetRestfulControllersBundle

Ambos se convirtieron en
- RestBundle
https://github.com/FriendsOfSymfony/RestBundle

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/

Quién es Pablo Godel?

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

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 deﬁnir
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 deﬁnidas 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

Aplicaciones

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

Aplicaciones

Proveedores de SMS gateway:
• Twilio
http://twilio.com
• 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" %}
ponencia.mhtml.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 %}

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

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

Aplicaciones
Quién es Pablo Godel? híbridas

PhoneGap

DEMO !


¿Preguntas?


MUCHAS GRACIAS!

Fuentes: https://github.com/pgodel/desymfony/tree/movil
https://github.com/desymfony/desymfony
Slides: http://slideshare.net/pgodel
Twitter: @pgodel
IRC Freenode: pgodel

Creacion de aplicaciones moviles con symfony2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Creacion de aplicaciones moviles con symfony2

Ähnlich wie Creacion de aplicaciones moviles con symfony2 (20)

Mehr von Pablo Godel

Mehr von Pablo Godel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Creacion de aplicaciones moviles con symfony2