lunes, 22 de agosto de 2011

Aplicacion para gestion de contenido con tags

Este fin de semana desarrollé un prototipo de un sistema de gestión de contenido, concentrándome en las funcionalidades de agregar y quitar tags del contenido.

Aquí les dejo la aplicación para descargar y probar.

El objetivo fue evaluar que tan costoso era implementarlo en Yupp framework, y el resultado fue el siguiente:
  • Aplicación: Yupp/Ajax/jQuery/MySQL
  • Dedicación: 4 horas
  • Funcionalidades principales: crear tags, agregar tags a varios videos (contenido), quitar una tag de un video
  • Funcionalidades de soporte: obtener todas las tags existentes, obtener las tags para cada video

Lo que logré fue algo así:



A continuación les cuento un poco cómo lo hice:

Estructura de la aplicación:
  • bootstrap
    • apps.resman.bootstrap.Bootstrap.script.php
  • controllers
    • apps.resman.controllers.TagsController.class.php
    • apps.resman.controllers.VideoController.class.php
  • javascript
    • jquery-1.6.2.min.js
    • jquery.form-2.84.js
  • model
    • resman.model.Tag.class.php
    • resources
      • resman.model.resources.Video.class.php
  • views
    • video
      • list.view.php
  • app.xml


Como pueden ver, es una aplicación pequeña, con un par de controllers, un par de clases de modelo persistente, una vista y un par de archivos javascript, uno es el famoso framework javascript jQuery y el otro el plugin para gestionar formularios y poder hacer envíos por ajax, en lugar del clásico submit que nos hace tener que recargar toda la página, y hacerlo por ajax mejora enormemente la experiencia del usuario.

En el archivo de bootstrap se crean algunos videos y la etiqueta que guarda todas las etiquetas del sistema (luego explico como es esto). Como esto es una prueba y no es un gestor de contenidos completo se deben crear los videos en el bootstrap. Si fuera un gestor de contenidos completo, tendría funcionalidades para poder crear, modificar y eliminar videos y otros tipos de contenidos como archivos, links, etc.

En el bootstrap tenemos:

// Incluye clases del modelo persistente
YuppLoader::load('resman.model', 'Tag');
YuppLoader::load('resman.model.resources', 'Video');

// Crea videos de prueba
$videos = array();

$videos[] = new Video(array(
  'name'=>'La Coka Nostra - That\'s coke',
  'comment'=>'excelente!',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/HaVf_yrq6Q0" width="560"></iframe>',
  'link'=>'http://youtu.be/HaVf_yrq6Q0'
));
$videos[] = new Video(array(
  'name'=>'Snoop Dog - Vato',
  'comment'=>'hardcore',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/D_9Dfh2Hf-A" width="560"></iframe>',
  'link'=>'http://youtu.be/D_9Dfh2Hf-A'
));
$videos[] = new Video(array(
  'name'=>'Snoop Dog - Drop it like it\'s hot',
  'comment'=>'chambalala',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/LfgMC6F0FVo" width="420"></iframe>',
  'link'=>'http://youtu.be/LfgMC6F0FVo'
));

// Guarda en la base los videos de prueba
foreach ($videos as $video)
{
   $video->save();
}

// Crea la instancia global con todas las tags
$globalTags = new Tag(array('tags'=>''));
$globalTags->save();


Antes comentaba que se crea una instancia de Tag que va a guardar todas las tags que se crean en el sistema, la idea es que desde esas tags se seleccionen las tags que se le van a poner a los videos.


Las tablas que generan las clases del modelo persistente son las siguientes:

Tabla de videos con los 3 videos creados en el bootstrap:


id name comment embedCode link class deleted
1 La Coka Nostra - That's coke excelente! <iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/HaVf_yrq6Q0" width="560"></iframe> http://youtu.be/HaVf_yrq6Q0 Video 0
2 Snoop Dog - Vato hardcore <iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/D_9Dfh2Hf-A" width="560"></iframe> http://youtu.be/D_9Dfh2Hf-A Video 0
3 Snoop Dog - Drop it like it's hot chambalala <iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/LfgMC6F0FVo" width="420"></iframe> http://youtu.be/LfgMC6F0FVo Video 0


Tabla de tags con la tag que tiene todas las tags creadas en el sistema (la que tiene objClass y objId en NULL), y las tags creadas para cada uno de los videos. Todas las tags de cada video se guardan codificadas en la columna "tags", separadas por coma. Estas son las tags que aparecen en la captura de pantalla que puse más arriba.

id objClass objId tags class deleted
1 NULL NULL papa,pepe,popo,pupu,caradura,sampatrucha Tag 0
2 Video 1 popo,sampatrucha,pepe Tag 0
3 Video 2 sampatrucha,caradura,pepe Tag 0
4 Video 3 popo,sampatrucha,caradura Tag 0


Podría repasar toda las funcionalidades, pero aquí les dejo la aplicación para descargar, donde pueden ver el código y probar de instalarla en Yupp Framework 0.4, además el código está lleno de comentarios.

La idea central era mostrar que con aproximadamente 300 líneas de código, entre PHP y Javascript, y en 4 horas, se pueden lograr funcionalidades muy interesantes, que agilizan la experiencia del usuario, y que tienen gran usabilidad.

No hay comentarios:

Publicar un comentario en la entrada