Introducción a la programación en Facebook

¿De modo que te han pedido que hagas una aplicación para Facebook y no sabes por dónde empezar? ¿Has llegado a la documentación oficial y te pierdes entre tanto Open Graph, SDK, plugins, dialogs y Graph API? Don’t panic! En este artículo vamos a ver paso a paso cómo empezar a programar en el nuevo sistema de Facebook. ¡Al lío!

Leer más

¿Por qué dicen que #democraciarealya es una iniciativa del PSOE?

Aviso – Lee esto antes

Tras escribir este artículo he visto que el encargado del dominio democreaciarealya.es ya había escrito un post en Barrapunto desmintiendo lo que dicen sobre él:
http://barrapunto.com/~manje/bitacora

Esta noche estamos viendo en varios medios de comunicación, afines a la derecha, decir que tanto la iniciativa #democraciarealya como #acampadasol fueron gestadas por el PSOE. ¿Por qué lo dicen? ¿Cómo pueden pensar algo así cuando no hace más que gritarse “no LES votes”?

Dicen “El titular del dominio democraciarealya es el dirigente de una escisión de Izquierda Unida, que ahora forma parte de la web redsocialista, por tanto las acampadas de Sol son iniciativa del PSOE y se están gestando desde el 1 de marzo de este año, no se trata de algo espontáneo“. Veamos en qué se basa su sesudo estudio ;)

Gracias a los datos whois del dominio democraciarealya.es, han averiguado el nombre del contacto administrativo y técnico; se trata de Manuel J R E. Primer fallo: Manuel J. es el contacto administrativo y técnico, no el titular. Éste es el Colectivo de Educador@s en Barrio Arrabal. Pero ok, asumamos que Manuel J. es el titular.

Si buscamos su nombre en Google, en el cuarto resultado vemos lo siguiente:

¿Qué es una Red de blogs? Se trata de una página que muestra automáticamente todos los artículos de aquellos blogs que estén vinculados a esta red. En concreto este artículo proviene de este otro blog, y habla de que Manuel J. R. E. ha realizado una página web para compartir noticias de Jerez.

Segundo fallo: que su nombre aparezca en esa red de blogs, no lo vincula con el PSOE. Es como decir que José María Aznar es socialista, porque su nombre también aparece en la web redblogsocialistas.org. Como en “Red de Blogs Socialistas” ha salido publicada una noticia que habla de la nueva página web que ha creado Manuel J. R. E. (persona de contacto administrativo y técnico de democraciarealya.es), entonces concluyen que Manuel es socialista.

Luego llama la atención la precisión con la fecha en que “el PSOE inició todo esto”: el 1 de marzo. ¿Por qué el 1 y no el 26 de febrero? Simple y llanamente se limitan a decir la fecha de alta del dominio democraciarealya.es :) Esto es de una candidez mental tal que uno no puede evitar sonreir.

Por último, tratan de deslegitimar las declaraciones de los acampados en que dicen que esto es un movimiento espontáneo. ¿No se han enterado de que una cosa es la manifestación ORGANIZADA del 15M, y otra la acampada espontánea que surgió minutos después por parte de unas 50 personas de las que acudieron? Por tanto tercer fallo: Confundir el movimiento #democraciarealya con @acampadasol. No hay más que leer la propia web de democraciarealya:

Democracia real YA apoya las acampadas espontáneas convocadas para esta misma semana. Convocatorias también desprovistas de símbolos políticos o sindicales y promovidas por asistentes a las manifestaciones del domingo, pero no convocadas directamente por Democracia real YA ni por los organizadores de las manifestaciones del 15 de mayo.

Así es. En esto se basan los sesudos informes que presentan los medios de desinformación que manipulan a la ciudadanía. Lo peor de todo, nuestras personas más mayores los creen.

Copiad y pegad este artículo donde queráis. Que no deslegitimen este movimiento de todos nosotros.

Edit: Efectivamente, el titular del dominio (colabore o no con #democraciarealya), formó parte de las listas de Izquierda Andaluza. De modo que es evidente que no tuvo vinculación alguna con el PSOE.

Manifiesto Acampada Sol

Aunque esta página es un blog personal sobre todo tecnológico, esta vez haré un RT de post de @acampadasol:


¿Quiénes somos?

Somos personas que hemos venido libre y voluntariamente, que después de la manifestación decidimos reunirnos para seguir reivindicando la dignidad y la conciencia política y social.

No representamos a ningún partido ni asociación.

Nos une una vocación de cambio.

Estamos aquí por dignidad y por solidaridad con los que no pueden estar aquí.

¿Por qué estamos aquí?

Estamos aquí porque queremos una sociedad nueva que dé prioridad a la vida por encima de los intereses económicos y políticos. Abogamos por un cambio en la sociedad y en la conciencia social.

Demostrar que la sociedad no se ha dormido y que seguiremos luchando por lo que nos merecemos mediante la vía pacífica.

Apoyamos a los compañer@s que detuvieron tras la manifestación, y pedimos su puesta en libertad sin cargos.

Lo queremos todo, lo queremos ahora, si estás de acuerdo con nosotros: ¡ÚNETE!

Es mejor arriesgar y perder que perder por no haber arriesgado

Más información:

Twitter: @acampadasol #acampadasol #spanishrevolution #nonosvamos

Web: www.tomalaplaza.net

Facebook: Spanish Revolution.

Bibliotecas JavaScript: Motores de física

Hoy hemos visto en el Google I/O la noticia de que Angry Birds estará disponible para el navegador Google Chrome. ¿Cómo es esto posible? Gracias al objeto canvas :D Ahora que HTML5 ha llegado para quedarse, y que incluso Internet Explorer ofrece soporte para el elemento canvas, poco a poco se irán popularizando las animaciones y juegos en el navegador, sin necesidad de Flash. Uno de los elementos clave son los motores de física; consiste en una serie de bibliotecas que permiten modelar sistemas donde exista gravedad, y se puedan definir objetos rígidos o dinámicos, con coeficientes de fricción, elasticidad, etc. Suena bien, ¿verdad? :)

Uno de los motores más populares es box2d. De hecho, es el que utiliza el propio Angry Birds. Y por supuesto existen ports de esta biblioteca para muchísimos lenguajes de programación, incluido, claro está, el pequeño gran JavaScript. En concreto la versión JavaScript está extraída automáticamente de la versión de ActionScript. Si quieres ver algunos ejemplos en vivo, entra a la web de box2d-js. Lo que ahora vamos a hacer, lo puedes ver aquí abajo (prueba a hacer clic sobre el lienzo).

Dejemos de hablar, y vamos a mancharnos las manos :)

Aviso sobre este artículo

El código en el que he basado este artículo está extraído de savagelook.com. Te recomiendo que entres y lo revises, ya que su ejemplo es más completo que la versión que yo aquí expongo.

Del mismo modo, es muy recomendable el manual de uso de box2d que han hecho en Box2DFlash.

Paso 1 – Preparando el entorno

Lo primero que tenemos que hacer es crear el código HTML. box2djs depende de dos bibliotecas:

  1. Prototype, como framework javascript.
  2. excanvas, para añadir soporte canvas a Internet Explorer.

Además, crearemos ya el objeto canvas, al que le estableceremos el ancho y alto, y sus propiedades CSS. Nos quedará el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="lib/prototype-1.6.0.2.js"></script>
<script src="lib/box2djs.min.js"></script>
</head>
<body>
<canvas id="canvas-world" style="position:absolute; top:0; left:0;background-color:#F5F5F5;width:800px; height:500px;"></canvas>
</body>
</html>

Ver demo. Como vemos, no ocurre gran cosa. Tan sólo vemos una gran caja gris

Paso 2 – Crear el mundo

En este paso vamos a crear el mundo en el que todo sucederá. Vamos a ver el código JavaScript que hace lo define:

            var world;
            var ctx;
            var canvasWidth;
            var canvasHeight;

            // Función que crea el mundo.
            function createWorld() {
                var worldAABB = new b2AABB();
                worldAABB.minVertex.Set(-1000, -1000);
                worldAABB.maxVertex.Set(1000, 1000);
                var gravity = new b2Vec2(0, 300);
                var doSleep = true;
                world = new b2World(worldAABB, gravity, doSleep);

                return world;
            }

            // Punto de entrada principal. Cuando se cargue la ventana:
            Event.observe(window, 'load', function() {
                world = createWorld();
       		ctx = $('canvas-world').getContext('2d');

       		var canvasElm = $('canvas-world');
       		canvasWidth = parseInt(canvasElm.width);
       		canvasHeight = parseInt(canvasElm.height);
       		var canvasTop = parseInt(canvasElm.style.top);
       		var canvasLeft = parseInt(canvasElm.style.left);
            });

En primer lugar definimos cuatro variables globales que utilizaremos en el resto de la aplicación. Después, definimos la función createWorld(), y finalmente vinculamos el evento “load” de la ventana, al código de la función anónima. Este código por ahora hace una llamada a createWorld(), extrae el lienzo 2d del canvas, y calcula su ancho/alto y sus coordenadas. Pero vamos a ver qué hace createWorld():

La primera línea crea un nuevo objeto de tipo b2AABB. Estos objetos definen un espacio en 2 dimensiones. En las dos líneas siguientes establecemos los extremos donde este espacio termina. En concreto nuestro espacio, worldAABB, va desde las coordenadas (-1000,-1000) hasta las coordenadas (1000,1000).

Después creamos un vector gravitacional. El primer valor, 0, corresponde a la gravedad horizontal. El segundo, 300, la gravedad vertical. Es decir, podemos crear una gravedad lateral :D

Otra opción que definimos es la posibilidad de que los objetos se “duerman” cuando entren en reposo. Esto lo hacemos asignando true a la variabel doSleep.

Finalmente creamos el objeto mundo, de la clase b2World, pasándole como parámetros al constructor las variables que acabábamos de crear.

Ver demo. En este caso, de nuevo no ocurre nada. Tan sólo hemos definido el modelo virtual, sin atarlo al canvas.

Paso 3 – Crear un suelo

En nuestro ejemplo va a haber un suelo. En resumen, tan sólo es una caja con posición fija ocupando toda la parte inferior visible. Este es el código que lo define:

            // Añade un suelo al mundo
            function createGround(world) {
                var groundSd = new b2BoxDef();
                groundSd.extents.Set(400, 30);
                groundSd.restitution = 0.0;
                var groundBd = new b2BodyDef();
                groundBd.AddShape(groundSd);
                groundBd.position.Set(400, 470);
                return world.CreateBody(groundBd);
            }

Además, añadimos una llamada a createGround(world) antes del return de la función createWorld(). Vamos a ver en qué consiste la creación del suelo:

Primero creamos un objeto b2BoxDef, que no es más que un objeto que define una forma rectangular. A continuación establecemos su tamaño (400 x 30), y su elasticidad (0.0). El factor de elasticidad 0.0 es el mínimo. Cuanto más alto, más elástico será el material de la forma que estamos definiendo.

A continuación creamos un cuerpo físico, al que le añadimos la forma que acabamos de crear. Por último establecemos las coordenadas en las que lo colocamos (400, 470), y lo añadimos al mundo.

Ver demo. Todavía no ocurre nada. Tan sólo hemos añadido la definición y las características del suelo, pero nuestro mundo todavía no se ha arrancado, ni se ha vinculado al canvas.

Paso 4 – Dibujando en el lienzo

Bien, ya vamos avanzando :) En este paso vamos a implementar el código encargado de dibujar en el canvas nuestro mundo virtual. Veamos cómo es:

            function drawWorld(world, context) {
                for (var b = world.m_bodyList; b; b = b.m_next) {
                    for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
                        drawShape(s, context);
                    }
                }
            }

            function drawShape(shape, context) {
                context.strokeStyle = '#ffffff';
                context.fillStyle = "black";
                context.beginPath();
                switch (shape.m_type) {
                    case b2Shape.e_polyShape:
                        {
                            var poly = shape;
    				        var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
                            context.moveTo(tV.x, tV.y);

                            for (var i = 0; i < poly.m_vertexCount; i++) {
                                var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
                                context.lineTo(v.x, v.y);
                            }
                            context.lineTo(tV.x, tV.y);
                        }
                        break;
                }

                context.fill();
                context.stroke();
            }

Si nunca has trabajado con canvas, este es un buen momento para que revises algún artículo. Por ejemplo, este de Mozilla, o este de Thinkvitamin.

Por un lado tenemos la función drawWorld, que se encarga de recorrer cada uno de los objetos del mundo, y cada una de las formas que contienen los objetos, para finalmente llamar a la función drawShape, que dibujará en el lienzo canvas la forma.

Por otro lado tenemos drawShape, que es la función que dibuja cada forma. En primer lugar establecemos los colores de línea (stroke) y de relleno (fill). Posteriormente indicamos que vamos a comenzar a dibujar en el lienzo. A continuación dibujamos la forma que corresponda; por ahora tan sólo dibujamos polígonos.

Para cada polígono, calculamos las coordenadas de su primer vértice. A continuación, dibujamos líneas entre cada uno de los siguientes vértices que encontremos, hasta finalmente, cerrar el polígono.

Y por último indicamos al contexto del lienzo que renderice el relleno y las líneas.

Ver demo. ¡Cómo es posible! ¡Todavía no ocurre nada! Esto es porque falta la función que da vida y que arranca al sistema. ¡Vamos al siguiente paso!

Paso 5 – Arrancando el sistema

Ya ha llegado el momento; vamos a unir nuestro sistema, con nuestro canvas, y a hacer que funcione en el tiempo. Para ello vamos a añadir una nueva función:

            function step(cnt) {
                var timeStep = 1.0/60;
                var iteration = 1;
                world.Step(timeStep, iteration);
                ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                drawWorld(world, ctx);
                setTimeout('step(' + (cnt || 0) + ')', 10);
            }

Y vamos a hacer que la función anónima que se ejecuta al cargar la página, invoque a esta función, añadiendo al final:

step();

¿Qué hace step()? Cada vez que se invoca, realiza una nueva iteración en el sistema. En primer lugar establece los frames per second del sistema físico. Por convenio suele utilizarse a 60Hz, es decir, 1.0/60. En cada uno de estos instantes, se realizará una simulación con las equaciones físicas.

A continuación definimos el número de iteraciones por cada instante. Cuanto más bajo sea el valor, más precisión, así como mayor consumo de recursos.

En la tercera línea, indicamos al mundo que avance un nuevo paso. Es en este momento cuando se realizan todos los cálculos para ver en qué estado se encuentra cada objeto del sistema.

Después, limpiamos el lienzo, ya que en la siguiente línea hacemos una llamada a drawWorld para dibujar todo el sistema.

Finalmente establecemos un timeout para volver a ejecutar un paso (step()) en los siguientes 10 milisegundos.

Ver demo. ¡Viva! Al fin se ve algo :D No es gran cosa, pero ya tenemos dibujado el suelo en nuestro lienzo.

Paso 6 – Añadiendo más objetos al mundo

El paso anterior ha estado bien, pero vamos a hacer que nuestro mundo sea más rico en detalles. En concreto vamos a añadir unos polígonos que escriban el mensaje “Hola Mundo!” :) Esta es la función que lo crea:

            function createBox(world, x, y, width, height, fixed) {
                if (typeof(fixed) == 'undefined') fixed = true;
                var boxSd = new b2BoxDef();
                if (!fixed) boxSd.density = 1.0;
                boxSd.restitution = 0.0;
                boxSd.friction = 1.0;
                boxSd.extents.Set(width, height);
                var boxBd = new b2BodyDef();
                boxBd.AddShape(boxSd);
                boxBd.position.Set(x,y);
                return world.CreateBody(boxBd);
            }

            function createHelloWorld() {
                // H
                createBox(world, 50, 420, 10, 20, false);
                createBox(world, 90, 420, 10, 20, false);
                createBox(world, 70, 395, 30, 5, false);
                createBox(world, 50, 370, 10, 20, false);
                createBox(world, 90, 370, 10, 20, false);

                // O
        	createBox(world, 140, 435, 20, 5, false);
        	createBox(world, 155, 405, 5, 25, false);
       		createBox(world, 125, 405, 5, 25, false);
        	createBox(world, 140, 375, 20, 5, false);

        	// L
       		createBox(world, 200, 435, 20, 5, false);
       		createBox(world, 185, 400, 5, 30, false);

       		// A
       		createBox(world, 240, 410, 5, 30, false);
       		createBox(world, 278, 425, 5, 15, false);
       		createBox(world, 265, 405, 20, 5, false);
       		createBox(world, 280, 390, 5, 10, false);
       		createBox(world, 260, 375, 25, 5, false);

        	// M
        	createBox(world, 390, 355, 40, 5, false);
       		createBox(world, 360, 400, 10, 40, false);
       		createBox(world, 420, 400, 10, 40, false);
       		createBox(world, 390, 400, 5, 40, false);

       		// U
       		createBox(world, 460, 435, 20, 5, false);
       		createBox(world, 445, 405, 5, 30, false);
       		createBox(world, 475, 405, 5, 30, false);

       		// N
                createBox(world, 495, 415, 5, 30, false);
                createBox(world, 525, 415, 5, 30, false);
        	createBox(world, 510, 375, 20, 5, false);

       		// D
       		createBox(world, 558, 435, 18, 5, false);
       		createBox(world, 545, 405, 5, 25, false);
       		createBox(world, 575, 405, 5, 25, false);
       		createBox(world, 558, 375, 18, 5, false);

       		// O
        	createBox(world, 610, 435, 20, 5, false);
        	createBox(world, 595, 405, 5, 25, false);
       		createBox(world, 625, 405, 5, 25, false);
       		createBox(world, 610, 375, 20, 5, false);

       		// !
       		createBox(world, 650, 430, 10, 10, false);
       		createBox(world, 650, 380, 10, 40, false);
            }

Definimos en primer lugar la función createBox(). A partir de 6 parámetros crea una nueva caja en el mundo. En concreto los parámetros son: (1) objeto mundo, (2) coordenada x, (3) coordenada y, (4) ancho, (5) altura, y (6) si tiene o no posición fija.

Su código es prácticamente equivalente al código que usamos para crear el objeto suelo. Además, establecemos la densidad de los objetos que no tienen posición fija, y un coeficiente de rozamiento.

Luego tenemos la función createHelloWorld, que tan sólo crea rectángulos.

Por último, vamos a añadir una llamada a createHelloWorld(); antes de step(), en la función anónima que se ejecuta al cargar la ventana.

Ver demo. La cosa ya va cambiando :) Ahora tenemos ya un montón de cajas, que hasta vemos cómo se tambalean.

Paso 7 – Creando círculos

Nuestro programa ya sabe cómo crear rectángulos en el sistema (createBox()), y cómo dibujarlos en el canvas. Ahora vamos a añadir la opción de crear círculos, y de dibujarlos. Primero, vamos a añadir esta función:

            function createBall(world, x, y) {
                var ballSd = new b2CircleDef();
                ballSd.density = 1.0;
                ballSd.radius = 20;
                ballSd.restitution = 0.5;
                ballSd.friction = 0.5;
                var ballBd = new b2BodyDef();
                ballBd.AddShape(ballSd);
                ballBd.position.Set(x,y);
                return world.CreateBody(ballBd);
            }

Como vemos, es prácticamente igual que createBox(). En este caso al crear el objeto forma, no hemos elegido la clase b2BoxDef, sino b2CircleDef. Y además no tenemos la opción de especificar el tamaño, sino que todas las esferas tendrán el mismo radio, como vemos en “ballSd.radius = 20;”.

El sistema ya sabe añadir y reconocer círculos. Ahora vamos a indicarle cómo dibujarlos. En el switch de la función drawShape() que añadimos en el paso 4, vamos a añadir un nuevo caso:

                    case b2Shape.e_circleShape:
                        {
            				var circle = shape;
            				var pos = circle.m_position;
            				var r = circle.m_radius;
            				var segments = 16.0;
            				var theta = 0.0;
            				var dtheta = 2.0 * Math.PI / segments;
    				        context.moveTo(pos.x + r, pos.y);

    				        for (var i = 0; i <= segments; i++) {
            					var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
            					var v = b2Math.AddVV(pos, d);
            					context.lineTo(v.x, v.y);
            					theta += dtheta;
                            }
                            context.moveTo(pos.x, pos.y);
                            var ax = circle.m_R.col1;
                            var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
                            context.lineTo(pos2.x, pos2.y);
                        }
                        break;

Ahora en la función drawShape(), en caso de que le proporcionen un círculo, sabrá cómo dibujarlo. En concreto lo hará dividiéndolo en 16 segmentos, y con un poco de trigonometría, se calculará el vector de cada segmento, y sus coordenadas finales.

Además, tras dibujar el círculo, se añadirá un radio, que nos permitirá observar cómo realmente gira el círculo.

Ver demo. Nada nuevo, ya que todavía no hemos creado en ningún momento un círculo.

Paso 8 – Creando objetos con el ratón

Ahora vamos a ver cómo crear nuevos objetos al vuelto, haciendo clic con el ratón. Veremos también cómo impactan con los que ya hay, y cómo efectivamente se ve que se respetan las leyes físicas ;)

Vamos a añadir este código antes de la llamada a step() en la función anónima:

                Event.observe('canvas-world', 'click', function(e) {
                    if (Math.random() > 0.5) {
                        createBox(world, e.clientX, e.clientY, 10, 10, false);
                    } else {
                        createBall(world, Event.pointerX(e), Event.pointerY(e));
                    }
                });

Al hacer clic en el canvas, habrá un 50% de probabilidades de que se cree o bien una caja, o bien un círculo. Lo interesante es que se creará donde hayamos hecho clic, y desde ahí caerá :)

Ver demo final. Si quieres, también puedes descargarte el código completo, con el ejemplo final documentando cada línea.

Por supuesto, ahora se pueden añadir imágenes de fondo al canvas, o añadir sprites a nuestros objetos. Y desde luego también se pueden añadir sonidos. Aquí tienes un ejemplo prácticamente igual que el que acabamos de hacer, pero con sonidos y texturas:

Rutas en bici + Android

Hola :) Ahora que parece que el buen tiempo ha llegado para quedarse, es el momento de volver a coger la bici. Aprovechando mi nuevo teléfono, tengo la oportunidad de poder llevar un perfecto seguimiento de las rutas que hago.

Añadir rutas

Memorizar todos los caminos puede ser un poco complicado. Pero por suerte estos teléfonos traen GPS integrado. ¿Cómo podemos importar previamente nuestras rutas? Con Google Maps es muy sencillo. En primer lugar, definimos cómodamente la ruta en Google Earth desde nuestro PC:

Una vez definida la ruta, la guardamos a un fichero .kmz, pulsando sobre “Guardar lugar como…”

Ahora, desde Google Maps, y habiendo iniciado sesión con nuestra cuenta de Google, accedemos a “Mis mapas” > “Crear un mapa nuevo” > “Importar”, y seleccionamos el fichero .kmz. Establecemos un título y listo, ya tenemos la ruta lista para consultar en cualquier momento.

Ya desde Android, accedemos a Maps, pulsamos sobre el botón “Capas”, y desde ahí en “Más capas” > “Mis mapas”, podremos seleccionar cualquiera de nuestras rutas. ¡Y ya está! :) De esta forma ya no te perderás por los caminos.

Seguimientos

Existen muchas aplicaciones que realizan un seguimiento de los recorridos. Yo utilizo Endomondo, y me funciona de maravilla. De nuevo, mediante GPS, realiza un completo seguimiento del recorrido, velocidades, tiempos, realiza pausas automáticas, guarda un histórico, calorías quemadas, etc. Lo arrancas, y no es necesario que vuelvas a preocuparte hasta que finalices la ruta :) Por supuesto, sirve igualmente para recorridos a pie.

Destacaría de esta plataforma, respecto a otras, su facilidad de uso, la gran comunidad de usuarios que hay detrás, que es multiplataforma (Symbian, Android, iOs, Blackberry), altamente social y gratuito (pese a que existe una versión de pago por 2.95€).

Ahora que la batería de mi teléfono está cargada, me retiro. ¡Me espera una pequeña ruta de 20Km!

Edit. 10/04/2011 a las 19:48.
Soy un lila; hacía bastante viento (rachas de 45km/h), de modo que al final no he llegado a los 20Km. Pero como muestra de la utilidad de “compartir rutas” de Endomondo, aquí está mi práctica de hoy:

Y aquí las rachas de viento registradas hoy en el observatorio de Toledo:

Introducción a Doctrine 2

¡Hola! Últimamente sigo liado sumergiéndome en el mundo de ASP.NET, de ADO.NET, y sacando tiempo de debajo de las piedras para un pequeño proyecto en mi querido Zend Framework en PHP. Tras ver ADO.NET Entity Framework sentí la necesidad de usar algo igual en PHP; la solución se llama Doctrine :) La primera pregunta que nos deberíamos hacer es, qué es exactamente Doctrine. Respuesta rápida: Es un ORM de PHP. Pero analicémoslo un poco más.

En primer lugar, ¿qué diantres es un ORM? Viene de las siglas Object-relational mapping, que viene a traducirse como Mapeo objeto-relacional. En concreto es una técnica, o patrón arquitectónico, que permite comunicar dos sistemas distintos, típicamente una base de datos relacional con objetos de un lenguaje orientado a objetos, mediante un sistema que “mapea” (vincula) ambos sistemas. Mucha gente (yo mismo) ha creado a mano sus objetos mapeadores que, junto con objetos usando el patrón Active Record, daban un resultado muy similar a lo que un ORM nos ofrece. Pero oye, un ORM hace todo el trabajo sucio por nosotros ;)

Existen ORMs para la mayoría de lenguajes de programación. Por ejemplo, en Java es muy popular Hibernate, en .NET se utiliza ADO.NET Entity Framework, y en PHP el más usado es Doctrine (hay más). Doctrine está inspirado en Hibernate.

Pero veamos algunas de las características que nos ofrece un ORM como Doctrine 2:

  • Muy sencillo de configurar. De hecho, no es necesario mantener complejos ficheros de configuración XML.
  • Tiene su propio dialecto de SQL, llamado DQL (Doctrine Query Language).
  • Puede generar los modelos (las clases PHP que representan una fila de la BD) a partir de la base de datos. Sólo habría que definir las dependencias entre ellos
  • Del mismo modo, también puede generar la base de datos a partir de los modelos.

¡Fantástico! Él puede crear las tablas, y las consultas por nosotros. Pero veamos ahora lo sencillo que es usarlo:

/* Código de inicialización ... */
$user = new User();
$user->name = "john";
$user->password = "doe";
$em->persist($user);
$em->flush();

Para que este código funcione sólo tenemos que hacer dos cosas:

  1. Creamos el código de inicialización que cree el EntityManager $em. Es el objeto que en última instancia lleva a cabo las acciones.
  2. Definimos las entidades (módulos) especificando en comentarios (o en XML o en YAML) cómo se relaciona con la base de dato

Vamos a ver cómo instalarlo y después haremos un ejemplo sencillo en SQLite.

Instalación

Si bien podemos instalarlo a mano descargándolo desde la página de Doctrine, para esta guía asumiré que se ha instalado con PEAR. Para ello tenemos primer que instalar el canal:

sudo pear channel-discover pear.doctrine-project.org

Y después instalamos el ORM:

sudo pear install pear.doctrine-project.org/DoctrineORM-2.0.1

Ahora lo tenemos instalado. Podemos probar a ejecutar su utilidad de línea de comandos, y nos mostrará esto:

$ doctrine
Doctrine Command Line Interface version 2.0.1
Usage:
[options] command [arguments]
Options:
--help           -h Display this help message.
--quiet          -q Do not output any message.
--verbose        -v Increase verbosity of messages.
--version        -V Display this program version.
--ansi           -a Force ANSI output.
--no-interaction -n Do not ask any interactive question.
Available commands:
help                         Displays help for a command (?)
list                         Lists commands
dbal
:import                      Import SQL file(s) directly to Database.
:run-sql                     Executes arbitrary SQL directly from the command line.
orm
:convert-d1-schema           Converts Doctrine 1.X schema into a Doctrine 2.X schema.
:convert-mapping             Convert mapping information between supported formats.
:ensure-production-settings  Verify that Doctrine is properly configured for a production environment.
:generate-entities           Generate entity classes and method stubs from your mapping information.
:generate-proxies            Generates proxy classes for entity classes.
:generate-repositories       Generate repository classes from your mapping information.
:run-dql                     Executes arbitrary DQL directly from the command line.
:validate-schema             Validate that the mapping files.
orm:clear-cache
:metadata                    Clear all metadata cache of the various cache drivers.
:query                       Clear all query cache of the various cache drivers.
:result                      Clear result cache of the various cache drivers.
orm:schema-tool
:create                      Processes the schema and either create it directly on EntityManager Storage Connection or generate the SQL output.
:drop                        Drop the complete database schema of EntityManager Storage Connection or generate the corresponding SQL output.
:update                      Processes the schema and either update the database schema of EntityManager Storage Connection or generate the SQL output.

Demo básica

Para este apartado, voy a utilizar una demo Sandbox (entorno de pruebas) prácticamente igual que la que usan en la documentación de Doctrine 2. En este artículo encontrarás el código de todos los ficheros necesarios. Además, al final del mismo encontrarás un enlace para poder descargarlo.

El proyecto consiste de sólo 4 ficheros:

  • Entities/Users.php – Modelo de usuarios
  • Entities/Address.php – Modelo de dirección
  • cli-config.php – Fichero PHP que contiene el código de inicialización necesario para usar la utilidad en linea de comandos ‘doctrine’. Cada vez que usemos la utilidad ‘doctrine’, tendremos que tener este fichero.
  • index.php – Código de inicialización típico de una aplicación web que utilice Doctrine 2.

Vamos a echar un vistazo a los ficheros. En primer lugar veamos cómo es el archivo cli-config.php:

<?php
// (1) Autocargamos clases
require_once 'Doctrine/Common/ClassLoader.php';
$classLoader = new \Doctrine\Common\ClassLoader('Doctrine');
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Entities', __DIR__);
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Proxies', __DIR__);
$classLoader->register();

// (2) Configuración
$config = new \Doctrine\ORM\Configuration();

// (3) Caché
$cache = new \Doctrine\Common\Cache\ArrayCache();
$config->setMetadataCacheImpl($cache);
$config->setQueryCacheImpl($cache);

// (4) Driver
$driverImpl = $config->newDefaultAnnotationDriver(array(__DIR__."/Entities"));
$config->setMetadataDriverImpl($driverImpl);

// (5) Proxies
$config->setProxyDir(__DIR__ . '/Proxies');
$config->setProxyNamespace('Proxies');

// (6) Conexión
$connectionOptions = array(
'driver' => 'pdo_sqlite',
'path' => 'database.sqlite'
);

// (7) EntityManager
$em = \Doctrine\ORM\EntityManager::create($connectionOptions, $config);

// (8) HelperSet
$helperSet = new \Symfony\Component\Console\Helper\HelperSet(array(
'db' => new \Doctrine\DBAL\Tools\Console\Helper\ConnectionHelper($em->getConnection()),
'em' => new \Doctrine\ORM\Tools\Console\Helper\EntityManagerHelper($em)
));

¡Que nadie se asuste! Realmente es un código muy sencillo, y prácticamente siempre se usará algo igual o muy parecido. Para superar el medio inicial, vamos a ver detalladamente qué es lo que ha pasado. El proceso de inicialización consta básicamente de dos pasos: Por una parte hay que asegurarse de que las clases de Doctrine pueden cargarse, y por otra hay que crear una instancia del Entity Manager. Siguiendo paso a paso:

  1. En primer lugar autocargamos las clases necesarias (nota: para esto podríamos haber utilizado el autocargador de otro framework). En concreto autocargaremos 3 secciones:
    1. El propio Doctrine, que trae Common, DBAL, ORM y Symfony. Si lo hemos instalado con PEAR, podremos verlo en el directorio /usr/share/php/Doctrine.
    2. Entities, que es el directorio en el que almacenaremos nuestros modelos.
    3. Proxies, otro espacio que es necesario definir. Los proxies son subclases de nuestros modelos que el propio Doctrine crea automáticamente.
  2. Una vez que nos hemos asegurado de que todas las clases pueden cargarse automáticamente, comenzamos a crear nuestro objeto EntityManager. Para ello, lo primero es crear un objeto de tipo Configuration.
  3. El primer parámetro que vamos a configurar es la caché. Podríamos haber usado APC, el sistema de cachés de facto de PHP (aconsejable en un entorno en producción), pero para pruebas usaremos el método ArrayCache.
  4. A continuación establecemos el driver con el que mapearemos nuestra base de datos. Esto es necesario para  hacer que nuestros modelos se correlacionen con nuestras bases de datos. Existen tres drivers disponibles:
    1. XML, desde donde se puede definir como encajar el modelo con la base de datos mediante sintaxis XML.
    2. YAML, al igual que con XML, también se puede definir utilizando YAML.
    3. Anotaciones, que en mi opinión son una maravilla. Mediante etiquetas en comentarios PHP defines cómo se mapean los datos. Más abajo, cuando lleguemos a los modelos, veremos un ejemplo de uso.
  5. Ahora configuramos los proxies. Simplemente establecemos su directorio, y su espacio de nombres.
  6. Conexión. Es aquí donde establecemos dónde se se encuentra nuestra base de datos. Si ésta no existiera, Doctrine la crearía por nosotros. En nuestro ejemplo usaremos SQLite.
  7. Ya está todo listo: hemos configurado la Caché, el Driver para mapear, los proxies y la conexión. Ya podemos crear el objeto EntityManager.
  8. Por último, creamos un objeto de tipo HelperSet, que es el que utilizará la utilidad de línea de comandos para saber cómo conectarse. El objeto HelperSet debe tener dos helpers: db, para identificar la conexión, y em, el EntityManager.

Ya tenemos listo el fichero cli-config.php, que como dijimos, es el que se utiliza para conectar la utilidad de consola ‘doctrine’ con nuestro proyecto.

Ahora vamos a ver los modelos.

Entities/Adress.php
<?php
namespace Entities;

/** @Entity @Table(name="addresses") */
class Address
{
   /**
    * @Id @Column(type="integer")
    * @GeneratedValue(strategy="AUTO")
    */
   private $id;

   /** @Column(type="string", length=255) */
   private $street;

   /** @OneToOne(targetEntity="User", mappedBy="address") */
   private $user;

   public function getId()
   {
      return $this->id;
   }

   public function getStreet()
   {
      return $this->street;
   }

   public function setStreet($street)
   {
      $this->street = $street;
   }

   public function getUser()
   {
      return $this->user;
   }

   public function setUser(User $user)
   {
      if ($this->user !== $user) {
         $this->user = $user;
         $user->setAddress($this);
      }
   }
}
Entities/User.php
<?php
namespace Entities;

/** @Entity @Table(name="users") */
class User
{
   /**
    * @Id @Column(type="integer")
    * @GeneratedValue(strategy="AUTO")
    */
   private $id;

   /** @Column(type="string", length=50) */
   private $name;

   /**
    * @OneToOne(targetEntity="Address", inversedBy="user")
    * @JoinColumn(name="address_id", referencedColumnName="id")
    */
   private $address;

   public function getId()
   {
      return $this->id;
   }

   public function getName()
   {
      return $this->name;
   }

   public function setName($name)
   {
      $this->name = $name;
   }

   public function getAddress()
   {
      return $this->address;
   }

   public function setAddress(Address $address)
   {
      if ($this->address !== $address) {
         $this->address = $address;
         $address->setUser($this);
      }
   }
}

No me detendré a explicar cómo se definen los modelos. En la propia documentación de Doctrine puedes ver una introducción al mapeo. Lo importante aquí es que, mediante etiquetas en los comentarios, hemos definido la relación entre la entidad User y la entidad Address, y también hemos definido cada una de sus columnas (¡hasta podemos indicar que una columna sea autoincremental!).

Llegados a este punto, tenemos 3 ficheros ya creados: cli-config.php, Entity/User.php y Entity/Address.php. Desde el raíz de nuestro proyecto vamos a ejecutar lo siguiente:

$ doctrine orm:schema-tool:create

Si todo ha ido bien, nos saldrá un mensaje indicándonos que el esquema de base de datos se ha creado correctamente. Y si comprobamos el directorio, veremos que se ha creado un nuevo fichero, database.sqlite, que contiene la definición de nuestras dos tablas.

Usándolo en una aplicación web

Bien, ya hemos definido las entidades, hemos creado la base de datos, y sabemos cómo funciona el código de inicialización de Doctrine 2. Ahora vamos a ver el fichero index.php:

<?php

// (1) Autocargamos clases
require_once 'Doctrine/Common/ClassLoader.php';
$classLoader = new \Doctrine\Common\ClassLoader('Doctrine');
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Entities', __DIR__);
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Proxies', __DIR__);
$classLoader->register();

// (2) Configuración
$config = new \Doctrine\ORM\Configuration();

// (3) Caché
$cache = new \Doctrine\Common\Cache\ArrayCache();
$config->setMetadataCacheImpl($cache);
$config->setQueryCacheImpl($cache);

// (4) Driver
$driverImpl = $config->newDefaultAnnotationDriver(array(__DIR__."/Entities"));
$config->setMetadataDriverImpl($driverImpl);

// (5) Proxies
$config->setProxyDir(__DIR__ . '/Proxies');
$config->setProxyNamespace('Proxies');

// (6) Conexión
$connectionOptions = array(
    'driver' => 'pdo_sqlite',
    'path' => 'database.sqlite'
);

// (7) EntityManager
$em = \Doctrine\ORM\EntityManager::create($connectionOptions, $config);

// (8) Código de prueba
$user = new \Entities\User();
$address = new \Entities\Address();

echo 'Hola mundo!' . PHP_EOL;

// Introduce aquí el código que maneje $user y $address

Si nos fijamos, los 7 primeros puntos son exactamente iguales que en cli-config.php. En el punto 8 creamos dos objetos de nuestro modelo, ya listos para usar. ¡Pero cuidado! Antes de poder hacer cambios en la base de datos SQLite, debes asegúrate de que el usuario de tu servidor web tiene permisos de escritura en el fichero database.sqlite. Ahora podríamos añadir el siguiente código de ejemplo:

$address->setStreet("Calle Río tinto, 12");
$em->persist($address);
$em->flush();

echo "Insertamos dirección<br />" . PHP_EOL;

$user->setName("Pedro");
$user->setAddress($address);
$em->persist($user);
$em->flush();

echo "Insertamos usuario<br />" . PHP_EOL;

Simplemente tenemos que acceder desde nuestro navegador a ese fichero (o también mediante “php index.php”) para que PHP ejecute el código. Una vez hecho, podemos consultar la base de datos mediante sqlite3:

$ sqlite3 database.sqlite
SQLite version 3.6.22
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite> select * from addresses;
1|Calle Río tinto, 12
sqlite> select * from users;
1|1|Pedro

¡Lo ha hecho todo él sólo por nosotros! Así de sencillo resulta trabajar con bases de datos con un ORM :) A partir de aquí empieza lo bueno: ya puedes guardar tus objetos de forma persistente en base de datos, sin tener preocuparte ni por crear las tablas, ni por SQL, ni nada. Céntrate en PHP :)

¡Gracias por leer!

Descargar el código fuente