creación de aplicaciones móviles con php y symfony2

Creación de aplicaiones móviles con

PHP y Symfony2

Quién es Pablo Godel? Aplicaciones Móviles

Pablo Godel

PHP Barcelona Conference 2011

Friday, October 28, 2011

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


http://news.php.net/php.general.es/3




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



•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


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

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


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>


1997



WAP/WML


Programador:


WAP/WML


Usuario:


WAP/WML



2007...


•Revolución en el

mercado de

telefonía móvil

•Cliente Web Safari


iPhone2007



iPhone App Store2007



Primer dispositivo Android2008



iPad2010


¿Qué significa todo esto?



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


Generación móvil


¿Symfony?

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


¿Qué es Symfony?




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


http://fabien.potencier.org


21 componentes de alta calidad




• DependencyInjection• EventDispatcher• HttpFoundation• DomCrawler• ClassLoader• CssSelector• HttpKernel• BrowserKit• Templating• Translation• Serializer• Validator • Security • Routing • Console • Process • Config • Finder • Locale • Yaml• Form

Componentes:

Todos en GitHub: http://github.com/symfonyFriday, October 28, 2011

http://github.com/symfony

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


http://symfony2bundles.org







• 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

Características


¿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


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


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/

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



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(



Symfony2 Bundle para crear una API

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

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


https://github.com/FriendsOfSymfony/RestBundle

https://github.com/FriendsOfSymfony/RestBundle

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/



http://www.easyapns.com/

http://www.easyapns.com/

Aplicaciones 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

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



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.



Proveedores de SMS gateway:

•Twiliohttp://twilio.com)lanzanzando servicio internacional pronto(

•Clickatellhttp://www.clickatell.com

•SMSpublihttp://www.smspubli.com



http://twilio.com

http://twilio.com

http://www.clickatell.com/

http://www.clickatell.com/

http://www.smspubli.com/

http://www.smspubli.com/

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



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


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


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


jQuery Mobile



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.


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


jQuery Mobile - Características


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>

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>

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

</div></body>

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>



jQuery Mobile - Ventanas de dialogo



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>




jQuery Mobile - Forms


jQuery Mobile - Listas




jQuery Mobile y Symfony



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'}) }}">© {{ '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



http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css

http://code.jquery.com/jquery-1.6.1.min.js

http://code.jquery.com/jquery-1.6.1.min.js

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

{% 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 %}


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.mhtml.twig


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


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 }



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 }


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 }




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, )); }




Testing



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


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: [email protected]: Demo2010


http://desymfony.qa.servergrove.com








mailto:[email protected]

mailto:[email protected]

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

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


¿Preguntas?



MUCHAS GRACIAS!

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

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

Twitter: @pgodelIRC Freenode: pgodel



http://joind.in/XXX

http://joind.in/XXX

https://github.com/desymfony/desymfony

https://github.com/desymfony/desymfony

http://slideshare.net/pgodel

http://slideshare.net/pgodel

creación de aplicaciones móviles con php y symfony2

Documents