Foro - Perl en Español

A partir de hoy y durante varios días publicaré un pequeño tutorial para los que quieran probrar este framework.
El ambiente de trabajo que he usado para hacerlo ha sido un PC con Arch Linux (https://www.archlinux.org/); Kernel 3.7.8-1; MySQL 5.5; Catalyst 5.90020

Lección 1. Instalación de las herramientas necesarias: Catalyst Framework, MySQL...
Instalación de Catalyst
Si se usa Debian/Ubuntu se puede instalar desde apt-get, aunque no contaríamos con la última versión de Catalyst.
Se recomienda instalar mejor desde cpan.

También se puede instalar ejecutando:

Si queremos que instale los módulos y dependencias necesarias sin tener que estar pendiente de decirle que sí a todo, ejecutamos:

Recuerde que si decide instalar el Catalyst usando cpan se debe tener instaladas primero las herramientas necesarias (make, gcc) para compilar en nuestra distribución preferida de Linux.

Una vez instalado y dependiendo de lo que queramos hacer, es necesario ir añadiendo algunos módulos y complementos. Para este proyecto usaremos:

Los tres primeros módulos para trabajar con la base de datos, los dos siguientes son los complementos que requiere Catalyst para funcionar con DBI. El último es un "sistema de procesamiento de plantillas rápido, flexible y altamente extensible... fue creado específicamente para permitir a los diseñadores web y desarrolladores centrarse en la generación de páginas web sin empantanarse en materia de programación" (http://www.template-toolkit.org/). No es el único del que disponemos en Perl. Están Mason 2 y HTML::Template. Uso TT porque me gusta más

El proceso de instalación puede tardar un buen rato, depende de la velocidad de conexión a Internet así como de la potencia de nuestro PC.

Tras finalizar el proceso de instalación, ya se puede crear una aplicación. Para ello ejecutamos:

El comando catalyst.pl crea la estructura y los archivos necesarios para empezar a trabajar. Una vez ejecutado en nuestra terminal veremos:

Nos cambiamos a la carpeta Proyecto1/ y ejecutamos proyecto1_server.pl que se encuentra dentro de la carpeta script/.

Con esta instrucción tenemos ya disponible la aplicación recién creada accesible desde nuestro navegador web:

http://localhost:3000

Se nos muestra la pagina genérica que trae el framework.

Si no tenemos instalado MySQL, ahora sería el mejor momento para instalarlo. Lo dejamos a elección del lector el método seleccionado para su instalación. Depende, claro, de la distribución de Linux que usemos.

Si desea saber más sobre la instalación de Catalyst, recomendamos leer http://wiki.catalystframework.org/wiki/ ... ngcatalyst

Eso es todo por hoy. En la próxima entrega crearemos una base de datos en Mysql y trataremos de explicar un poco la organización del framework.

Lección 2. Crear BD en MySQL y entender el funcionamiento del Framework
Esta segunda lección se encuentra estructurada en dos apartados. El primero referente a la creación de las tablas en MySQL y el segundo conocer un poco los archivos que instaló Catalyst.

Se va a usar MySQL como servidor de BD ya que hay mucho y muy buenos tutoriales que usan Sqlite, pero poco menos con MySQL.

Creamos la base de datos proyecto1 y dentro de ella las siguientes tablas:


Como se menciono al principio, la lección de hoy tiene dos apartados. En el apartado anterior creamos la base de datos, las tablas y las relaciones con que trabajaremos. En este segundo apartado vamos a conocer un poco más los archivos que nos instaló el framework cuando creamos la aplicación.



Eso es todo por hoy.
En la próxima entrega crearemos la conexión y el modelo para poder trabajar con la base de datos en Mysql. Instalaremos un complemento de tipo CRUD para gestionar los datos en las tablas que hemos creado.

Lección 3. Crear el modelo de la BD e instalar el AutoCRUD

Hoy se van a crear los controladores, los modelos y las vistas necesarias para que funcione nuestra nueva aplicación.

Dentro de la carpeta script/, como vimos anteriormente, hay una serie de archivos y todos tiene el nombre del proyecto como prefijo. Los más usados serán proyecto1_server.pl y proyecto1_create.pl

La aplicación que proponemos es sencilla: se cargan algunos canales RSS (feed) en una tabla y almacenamos todos sus ítem publicados en otra tabla (feed_item); todos los ítem almacenados tendrán una serie de palabras claves (tag); así mismo, cada vez que se consulta un ítem se registrará el número de visitas y votos.

Se puede crear manualmente toda la aplicación para que incluya un CRUD, pero ya que estamos, ¿por qué no reutilizar lo que existe? De hecho esa es la filosofía de este framework.

Siguiendo esa filosofía instalamos el plugin que nos monta una herramienta administrativa de cada tabla que tengamos en nuestra base de datos.

Para ello ejecutamos en nuestra terminal:



Una vez instalado, se tiene que activar, para ello editamos el archivo Proyecto1/lib/Proyecto1.pm y añadimos el plugin AutoCRUD.

use Catalyst qw/ ... AutoCRUD/;

Listo, ya contamos con una interfaz administrativa para todas las tablas, por defecto es accesible en la URL del servidor:3000/autocrud

Si queremos cambiar esa ruta por defecto añadimos en el archivo Proyecto1/proyecto1.conf la nueva ruta, como se muestra a continuación:


Si ingresamos ahora no nos mostrará ninguna tabla ya que aún no hemos creado el modelo de nuestra base de datos. De hecho, hasta ahora no hemos creado nada en nuestra aplicación. Para crear un controlador, un modelo o una vista, ejecutamos script/proyecto1_create.pl controller NOMBRE_DEL_CONTROLADOR que queramos crear. Igual para los modelos y las vistas, como veremos más adelante.

Cuando catalys.pl creó la aplicación nos añadió un primer controlador, el controlador principal, que se encuentra en Proyecto1/lib/Proyecto1/Controller/Root.pm. Se encarga de mostrar el index que se ve cuando se ingresa por primera vez a la aplicación desde el navegador.

Como toda aplicación que vamos a crear requiere de una base de datos lo mejor será crear el modelo de la misma; para ello ejecutamos: script/proyecto1_create.pl model DB DBIC::Schema Proyecto1::Schema \create=static naming=current use_namespaces=1 \ components=TimeStamp dbi:mysql:proyecto1 'usuario' 'clave' '{ AutoCommit => 1 }'

Si volvemos a levantar el servidor de desarrollo (script/proyecto1_server.pl) e ingresamos la ruta http://localhost:3000/autocrud veremos las tablas que componen la base de datos creada anteriormente.

Para ver en la terminal las consultas SQL que realiza la aplicación a la base de datos, se ejecuta antes


El -r (recursivo) indica que escuche y se actualice automáticamente la aplicación. Así, si modificamos algo en los archivos del proyecto lo tendremos disponible desde el navegador sin tener que cancelar y volver a ejecutar.


Eso es todo por hoy.
En la próxima entrega crearemos la vista para el sitio web y un controlador para mostrar los ítem.

Lección 4. Crear la vista para el nuevo sitio web y el controlador para los ítemes

Ya hemos montado una interfaz para "administrar" nuestras tablas, ahora lo interesante sería mostrar la información en una página web y, de ser posible, con una bonita presentación. Bien, crearemos un controlador para mostrar los artículos de cada feed que añadamos y estableceremos algunos comportamientos.

Creamos el controlador y le llamaremos items. Ejecutamos script/proyecto1_create.pl controller items

Ya tenemos dentro de la carpeta /lib/Proyecto1/Controller/ el controlador items.pm. Así mismo, el framework ha creado el correspondiente test en la carpeta t/controller_items.t

Abrimos /lib/Proyecto1/Controller/items.pm y veremos:

El $c->response->body('Matched Proyecto1::Controller::items in items.') es el mensaje que se mostrará en el navegador, es un mensaje creado automáticamente por Catalyst.

Ahora bien, si tratamos de ingresar vía web a la página items no se nos mostrará nada, nos saldrá el bonito 'Page not found' definido en el controlador Root.pm.

Para que podamos ver el mensaje que crea el framework por defecto para cada controlador (Matched Proyecto1::Controller::items in items.), es necesario que se añada la Vista. Catalyst nos permite emplear diversos tipos de vistas, desde las típicas HTML hasta la generación de documentos PDF. Este procedimiento se realiza una sola vez si solo queremos generar páginas HTML; si queremos generar otro tipo de salida sí es necesario añadir la correspondiente vista.

A continuación, crearemos una vista HTML. Disponemos de varias herramientas ("templates") para generar HTML: Template::Toolkit (TT); Mason 2; HTML::Template, entre otros. Nosotros usaremos Template::Toolkit (TT), ya que él por si mismo es un framework para generar HTML y, como dicen ellos en su web, se puede procesar todo tipo de textos: HTML, XML, CSS, JavaScript. Destacar que podemos trabajar de dos maneras con TT: fácil y más fácil. Al ejecutar la fácil (script/proyecto1_create.pl view HTML TT) nos crea la vista y nada más, hay que ir definiendo las estructuras de los directorios donde estarán todos los templates (archivos) HTML, en la medida que el usuario quiera trabajar la visualización. La más fácil es que nos cree las estructuras de directorios y nos instale un diseño de página para mostrar los datos. Usaremos la segunda opción, script/proyecto1_create.pl view HTML TTSite

Con TTSite le hemos dicho que cree toda la "lógica" de la web. Por tanto, ahora tenemos los siguientes directorios y archivos en nuestra aplicación:

Todos las plantillas que usaremos tendrán la extensión tt2. Dentro pondremos código HTML y TT.

Ahora podremos hacer unos pequeños cambios en Root.pm para mostrar la página de inicio que aporta por defecto el TT, así como la página de errores.

Cambiamos $c->response->body( $c->welcome_message ); por $c->stash->{ template } = 'welcome.tt2';

Cambiamos en Root.pm que el manejo de errores use el template que nos ha creado TT; para ello sustituimos:

$c->response->body( 'Page not found' );
$c->response->status(404);

por esto:

$c->stash->{ template } = 'error.tt2';

Hasta este momento parece que no hemos hecho muchas cosas, ya que aún no hemos escrito apenas código en la aplicación y ahora es que llegamos (por fin) a modificar la primera línea. Hemos hecho mucho y por eso creo que este es de los mejores framework que hay en la actualidad para la programación web.

Tiene automatizado una gran cantidad de tareas que con solo una instrucción tenemos un servidor web instalado y ejecutando nuestra aplicación. Sin tener que modificar archivos del servidor web con que se trabaje, y claro que se tendrá en algún momento, si así lo requiere el proyecto, configurar un servidor web.

Dejamos a la libertad del lector explorar el contenido de cada archivo que se han creado con TTSite. Seguro que surgirán dudas, así que no duden en preguntar.

A manera de resumen, esto es todo lo que hemos hecho hasta el momento:

• Añadido modelo, vista y controlador:
  
  • script/proyecto1_create.pl model DB DBIC::Schema Proyecto1::Schema \create=static naming=current use_namespaces=1 \ components=TimeStamp dbi:mysql:proyecto1 'usuario' 'clave' '{ AutoCommit => 1 }'
  • script/proyecto1_create.pl view HTML TTSite
  • script/proyecto1_create.pl controller items
• Hemos usado el servidor web incorporado (built in testserver), al cual se le pueden pasar algunos parámetros como -r para 'restart' de forma automática cuando hacemos cambios en la aplicación. -d para ver el modo depurado por pantalla.
  script/proyecto1_server.pl

Finalmente, tenemos en nuestra aplicación:


La próxima entrega cargaremos y mostraremos los ítemes.

Lección 5. Cargar y Mostrar los ítemes

Ya tenemos casi todo listo para empezar a trabajar en lo que realmente nos interesa y no es otra cosa que ver en nuestra página web los registros que tenemos en nuestra base de datos. Aunque si nos fijamos bien y hemos seguido al pie de la letra este documento, aun no tenemos registros en ninguna tabla de nuestra base. Vamos a nuestra interfaz de administración (AutoCRUD) y agregamos algunos feeds en la tabla de feeds.

Novedades en Perl en Español: noticias-del-sitio/news/digest/forum.xml.gz
Foro Básico: basico/news/digest/forum.xml.gz
Foro Web: cgi/news/digest/forum.xml.gz

Hecho esto, es necesario cargar los ítemes de esos canales. Para ello podemos hacerlo de varias formas, pero para empezar lo haremos como una tarea externa: creamos en la raíz del proyecto la carpeta tareas y un script de Perl que se llame rss_item.pl.

Este script se conectará con nuestra base de datos y se traerá todos los feeds que hemos añadidos e insertará en la tabla feed_item cada ítem de dicho feeds. Se preguntarán por qué lo hacemos así y no lo añadimos dentro de un controlador en la aplicación. La respuesta es que queremos mostrar cómo podemos usar nuestra aplicación como una "librería".

Hay que tener instaladas las siguientes librerías, sino se tienen ya:


Ahora el contenido de rss_item.pl:

Es necesario en el archivo de configuración proyecto1.conf añadir la conexión a la base de datos:

Al ejecutar nos cargará los últimos feeds de los foros.


Ahora mostraremos todos los ítemes de la tabla en una lista. Ya por fin modificamos el controlador items y empezamos a tocar la aplicación. Por norma, toda subrutina en un controlador que quiera enviar o devolver algún resultado en la web, tiene que tener un archivo html asociado, el cual se debe llamar de igual manera.

Modificamos la subrutina index() para que muestre todos los registros que tenga la tabla FeedItem y el resultado lo mande a la template index.tt2.

Creamos la carpeta root/src/items y añadimos el archivo index.tt2 lo siguiente:

Nos conectamos al localhost:3000/items y ¡listo!

Con lo visto hasta ahora es suficiente por hoy, hemos usado la aplicación como una librería para cargar los ítemes, en el controlador nos hemos conectado al modelo para que nos diera todos los registros de la tabla FeedItem y el resultado lo mostramos en la página index.tt2.

Lección 6. Mostrar más información de un ítem

En la lección anterior mostramos un listado de feeds, ahora bien, lo modificaremos para que el título del feed sea un enlace a una página que nos muestre más información.

Para ello modificamos el controlador, la página index de ítemes y agregamos la página de view_items.

Lo primero es modificar el controlador y añadir la subrutina para mostrar el ítem seleccionado.


Lo que acabamos de añadir captura un argumento "Args(1)" y se lo pasa a la instrucción "search" que lo buscará en la tabla de la base de datos.

Ahora modificamos el index y añadimos enlace a la página view_items


Para construir la URL podemos usar el método anterior o simplemente usar la forma en como se hace con HTML de siempre. La opción "| html" es un filtro de TT para escapar caracteres, el cual ayuda a evitar el Cross Site Scripting.

Finalmente la página view_items:


Cosas que se pueden hacer y que trataré en la medida de lo posible mostrar en otras lecciones:

• Paginar los resultados, aunque sigo sin dar con una forma de hacerlo que no resulte tan compleja que las que he visto hasta ahora
• Añadir un diseño gráfico más apropiado a los nuevos tiempos. Por ejemplo el uso de un framework CSS como 90grid o Bootstrap
• Añadir comentarios y votos a los ítemes.