Linux, software libre, programación, Ubuntu
September 3, 2010, 9:30 am

Introducción al desarrollo de aplicaciones web con Mono

1 estrella2 estrella3 estrella4 estrella5 estrella (1 votos, media: 5,00 / 5)
Loading ... Loading ...

Cuando oímos hablar de tecnologías libres relacionadas con las aplicaciones web, pocas veces pensamos en Mono. Prueba de ello es que pocos proyectos de importancia se han implementado haciendo uso de la tecnología liderada por Miguel de Icaza. Al igual que la plataforma .NET de Microsoft, Mono además de permitir el desarrollo de aplicaciones locales, es una excelente plataforma para el desarrollo de aplicaciones web. Le falta algo de madurez y una mejora del rendimiento, pero es una opción más a tener en cuenta y a lo largo de este artículo vamos a comentaros las directrices generales para llevarlo a cabo.

Author: Francisco Javier Carazo Gil
Fuente: LINUX+DVD 02/2010 (62) http://lpmagazine.org/es

Introducción al desarrollo de aplicaciones web con Mono

Introducción al desarrollo de aplicaciones web con Mono

A pesar de los recelos que crea la plataforma Mono dentro de la comunidad libre, debido a ser una especie de “adaptación” de la tecnología .NET de Microsoft, creo que es una opción más a tener en cuenta. Desde su nacimiento hasta hoy en día, ha evolucionado fuertemente y ha llegado a ocupar un lugar importante en las aplicaciones de escritorio. Prueba de ello es que Gnome incorpora aplicaciones desarrolladas con Mono en su entorno de escritorio. En la distribución más popular de todas para el escritorio, Ubuntu, podemos encontrarlo en programas como F-Spot, por poner sólo un ejemplo.

Sin embargo, otras vertientes de Mono están poco explotadas. Un caso claro de ello son las tecnologías web. Mono las soporta y para ello utiliza el lenguaje de programación de la familia .NET, ASP.NET. Apache, el servidor web más laureado del software libre, tiene soporte para Mono y podemos aspirar a desarrollar cualquier tipo de aplicación web con esta tecnología.

Los problemas que tiene, al menos por ahora, son la falta de madurez y el rendimiento. Ya hemos dicho que todavía no es muy frecuente el uso de Mono en proyectos web populares, por lo que es posible que tenga todavía errores por pulir en despliegues de cierto tamano. Otro punto a tener en cuenta es el rendimiento. Otros lenguajes interpretados, a mayor o menor nivel, como puedan ser PHP o JSP, están más maduros, depurados y ejecutan en menos tiempo.

Dejando de lado estos problemas, Mono es una alternativa más para este tipo de labores y, por lo tanto, es conveniente conocer qué posibilidades nos ofrece, sabiendo qué limitaciones tenemos y qué pasos hemos de dar para comenzar un proyecto de este tipo. Al ser una parte más de Mono, tendremos fácil acceso a todo tipo de funcionalidades interesantes para el desarrollo de aplicaciones web, como pueden ser la conexión con bases de datos, el tratamiento de datos con arquitecturas como ADO.NET o el manejo de ficheros XML.

Es conveniente que tengáis conocimientos, aunque sean básicos, sobre los lenguajes HTML y C# y sobre el funcionamiento de las aplicaciones web. Aún así, dado el carácter introductorio del artículo, creo que todos podréis leerlo sin dificultad.

Figura 1. Logo Mono

Figura 1. Logo Mono

Preparación e instalación

Aunque existan lenguajes como PHP que son interpretados por los servidores web en la mayoría de las ocasiones, nada más instalarlos, al tratar con una tecnología menos difundida, tendremos que centrarnos algo más en este paso. Lo primero será elegir qué servidor web utilizar. Tenemos dos opciones. La primera se llama XSP, un servidor escrito en C# cuyo propósito es servir de plataforma didáctica y para el desarrollo de prototipos. Para el desarrollo de aplicaciones de cara a producción, siempre será mejor utilizar Apache junto con el módulo mod_mono.

XSP

Como ya hemos comentado es un servidor ligero realizado en C# para aplicaciones que no están dirigidas a producción. Su nombre proviene del nombre que Microsoft puso a ASP.NET cuando todavía era un proyecto. Finalmente, le cambiaron el nombre de XSP a ASP.NET cuando lanzaron la plataforma al mercado. XSP es capaz de ejecutar sobre Mono o sobre un marco de trabajo .NET. También soporta SSL.

Figura 2. Logo Plataforma .NET de Microsoft

Figura 2. Logo Plataforma .NET de Microsoft

Para instalarlo podéis descargaros de los repositorios SVN del Proyecto Mono el código fuente o directamente hacer uso de vuestro gestor de paquetes, opción esta última que recomiendo. La versión de XSP que debemos instalar es la que soporta ASP.NET 2. En Ubuntu el paquete viene nombrado en el repositorio como mono-xsp, en otras distribuciones el nombre del paquete puede variar a xsp2 o mono-xsp2. Junto con este paquete también debemos instalar el paquete con ejemplos asp.net2-examples.

Una vez instalado, para comprobar que todo funciona bien hacemos lo siguiente:

• Desde la terminal nos dirigimos al directorio donde se encuentren los ejemplos, /usr/share/asp.net2-demos/
• Ejecutamos el servidor: xsp2
• Comprobamos que hay a la escucha en el puerto 8080 de tu equipo con un navegador. Para esto último introduce en la dirección: http://localhost:8080.
• Si todo ha ido bien deberá salirnos una pantalla indicándonos una serie de ejemplos.

Apache con mod_mono

La otra opción que os comento es usar el servidor web más popular del software libre, Apache, con un módulo que haga de interfaz con un proceso de Mono que sea el que verdaderamente interprete las peticiones y ejecute los programas en cuestión. Para ello debemos realizar una serie de configuraciones, aparte de instalar los componentes necesarios. Veamos.

Figura 3. Logo Apache

Figura 3. Logo Apache

Instalación

• Debemos instalar Apache (paquete apache2) y el módulo para multiproceso que lo necesitaremos. En nuestro caso necesitamos el paquete: apache2-mpm-worker.
• Instalamos los paquetes del módulo: libapache2-mod-mono y mono-apache-server2.
• Reiniciamos el servidor para que adquiera la nueva configuración: sudo /etc/init.d/apache2 restart
• Activamos el módulo: sudo a2enmod mod_mono
• Finalmente, comprobamos que es ASP. NET 2 el que está activado y no ASP.NET (la versión 1).

Figura 5. Logo MySQL

Figura 5. Logo MySQL

Este parámetro está en el directorio de los módulos disponibles de Apache 2 que es el siguiente: /etc/apache2/mods-available en el fichero mod_mono.conf. Si lo editáis con un editor de texto como superusuario, tenéis que cercioraros que en dicho fichero esté la versión ASP.NET 2 activada y la antigua desactivada (comentada con una almohadilla, #). Las sentencias a buscar son las siguientes:

#Include /etc/mono-server/
mono-server-hosts.conf
Include /etc/mono-server2/
mono-server2-hosts.conf

Prueba

Ya tenemos todo instalado y listo para probar. Lo primero que debemos hacer es crear un sitio en Apache, con un alias, de manera que el servidor entienda que Mono es quien debe manejar esas peticiones. Algo parecido había que hacer hace tiempo con PHP, pero la popularidad tan enorme que ha adquirido el lenguaje, ha hecho que ello sea automático. En un futuro posiblemente estos pasos que ahora os contamos hayan desaparecido y Apache automáticamente detecte que debe interpretar con Mono ficheros .aspx (los ASP.NET).

Figura 6. Resultado en navegador de directorio

Figura 6. Resultado en navegador de directorio

Para ello creamos un fichero llamado, por ejemplo, ejemplo-lpmagazine, en el directorio: /etc/apache2/sites-available/. El nombre de este fichero será al que llamaremos desde el navegador. Para nuestro caso tendremos http://localhost/ejemplo-lpmagazine. Esta operación deberéis hacerla como superusuarios.

Ahora dentro de ese fichero incluimos el siguiente contenido (ver Listado 1).

Figura 7. Aplicando estilos al ejemplo

Figura 7. Aplicando estilos al ejemplo

Las líneas más interesantes son las que indican que:

• El tráfico que vaya dirigido a /ejemplolpmagazine está contenido en /var/www/ejemplo-lpmagazine.
• El software que ha de manejar las peticiones es Mono.
• El índice del directorio es index.aspx (si no pones esto y alguien pone http://servidor/ejemplo-.lpmagazine se descarga el fichero index.aspx sin interpretar).

Una vez hecho lo anterior, creamos el directorio /var/www/ejemplo-lpmagazine y dentro de él un nuevo fichero llamado index.aspx. En dicho fichero incluimos el siguiente código. Básicamente es un hecho para los queconozcan PHP con un código HTML para que muestre el Hola Mundo:

<% Response.Write("<h1>&iexcl;Hola
Mundo LPMagazine!</h1>"); %>

Prácticamente hemos terminado pero nos queda un paso, activar el sitio ejemplo-lpmagazine en Apache y reiniciar el servicio. Para ello, ejecutamos desde la consola:

a2ensite ejemplo-lpmagazine
sudo /etc/init.d/apache2 restart

Ya podemos ver en nuestro navegador el resultado: http://localhost/ejemplo-lpmagazine.

Figura 8. Logo MonoDevelop

Figura 8. Logo MonoDevelop

Eliminación de un sitio

De cara a eliminar un sitio que ya no queramos usar, debemos darlo de baja de Apache, aparte de borrar el contenido del directorio donde se encuentre. Para dar de baja un sitio deberemos utilizar la orden a2dissite (en lugar de a2ensite) y por supuesto deberemos borrar también el contenido del fichero ejemplo-lpmagazine, en este caso, del directorio de Apache de sitios disponibles: /etc/apache2/sites-available/.

Ejemplo de interacción con MySQL

Hace unos meses publiqué en esta misma revista un ejemplo de interacción entre Mono y MySQL utilizando el conector para .NET del famoso sistema gestor de base de datos. Puesto que estamos hablando de una aplicación web, la interacción con una base de datos es de máxima importancia en la mayoría de los casos y ninguna mejor que MySQL (me atrevería a decir que posiblemente la base de datos más utilizada en la historia de las aplicaciones web). Espero que con este ejemplo se os despierte la curiosidad por esta plataforma y así investiguéis más sobre el tema para desarrollar vuestras propias aplicaciones web de mayor nivel.

También he de deciros que la solución equivalente que provee Microsoft para este tipo de desarrollos no me gusta en absoluto. Aunque el paquete completo de Visual Studio .NET, el entorno de desarrollo, Internet Information Services, el servidor web, SQL Server, el sistema gestor de bases de datos de Microsoft, y el propio marco de trabajo .NET, facilitan mucho todo el desarrollo, hay muchos inconvenientes a destacar. Los principales son la obligación de utilizar una plataforma Microsoft Windows (claro está), además de conseguir un código HTML muy sucio y poco respetuoso con los estándares del W3C, y tener una dependencia tecnológica absoluta, tanto de la plataforma como de la companía en sí. Aparte, aunque a priori parezca más rápido el desarrollo, utilizando ASP.NET con Mono se consigue ver todo desde abajo y por lo tanto se comprende mejor todo para ser más eficientes y poder plantearnos más metas. El lenguaje en sí es diferente a otras alternativas libres, como PHP, pero no deja de ser una solución potente y libre si hacemos uso de Mono.

Para el ejemplo utilizaremos Apache y como hemos dicho, MySQL.

Figura 9. Mono Website

Figura 9. Mono Website

Instalación de la base de datos y creación de los datos de ejemplo

Lo primero será instalar la base de datos y crear una tabla con los datos de ejemplo. Si tenéis un sistema de gestión de paquetes sólo tendréis que instalar los paquetes: mysqlserver y mysql-client (con una distribución derivada de Debian el comando sería el siguiente: sudo apt-get install mysql-server mysql-client). En mitad de la instalación os pedirá la contrasena de superusuario.

Una vez terminada la instalación, debemos crear la estructura que albergará los datos, así como dar los permisos necesarios para su utilización desde la aplicación web. La tabla que vamos a manejar se va a llamar usuario y va a albergar los datos necesarios para hacer un directorio. El directorio va a ser el objetivo final de la aplicación web. Para ello, necesitaremos los siguientes campos:

• NIF: Cadena de longitud estática de 9 caracteres que representa el DNI con la letra de la persona. Será la clave única.
• Apellidos: De tipo cadena con longitud variable de hasta 64 caracteres.
• Nombre: Ídem.
• Fijo: Cadena estática de 9 caracteres, que representa el número fijo de teléfono.
• Móvil: Cadena estática también de 9 caracteres, que representa el número móvil.

La tabla se llamará “personas” y la incluiremos dentro de una base de datos llamada “directorio”. Veamos cómo crear toda esta estructura de datos en MySQL desde el intérprete que incluye.

Descarga y activación del conector

Llega el turno de descargar el conector para .NET de MySQL. El conector es básicamente un conjunto de clases compiladas en un fichero .dll que trae todo lo necesario para interactuar con la arquitectura ADO.NET, propia de la plataforma .NET. El conector para MySQL es libre al igual que MySQL por lo que podréis encontrarlo para descargar en su sitio web: http://dev.mysql.com/downloads/connector/net/. Elegís la plataforma: .NET/Mono, descargáis el fichero comprimido y una vez lo tengáis en vuestro equipo lo descomprimís. Ahora lo incluimos dentro de las referencias de Mono:

sudo gacutil -i /ruta_para_el_
conector/mysql.data.dll

Si todo ha ido correctamente deberá presentaros un mensaje por consola que diga algo así como que el fichero ha sido incluido correctamente en /usr/lib/mono/gac. Antes de seguir hay un detalle a cuidar que os puede traer problemas. Dado que Windows no es sensible a las mayúsculas (case sensitive que dirían los angloparlantes) y Linux sí lo es, tenemos que cambiar el DLL de minúsculas a mayúsculas de la siguiente forma: mv/usr/lib/mono/gac/MySql.Data/version__token-público/mysql.data.dll /usr/lib/mono/gac/MySql.Data/version__token-público/Mysql.Data.dll (tanto la versión como el token público variarán en cada caso).

Suponiendo que trabajamos sobre el mismo directorio que en el ejemplo anterior con Apache: /var/www/ejemplo-lpmagazine podemos crear un nuevo directorio /bin dentro de él donde metamos el mismo fichero DLL. Os lo comento por si tenéis problemas en que Mono encuentre la DLL.

Código del ejemplo y archivo de configuración

Ya tenemos todo listo para desarrollar el código del ejemplo. Lo que haremos será crear un grid, cuadro donde se representan los datos (una tabla en HTML autogenerada por ASP.NET), con la salida de una consulta proveniente de la base de datos. La consulta será mostrar todos los datos de la tabla persona, y como veréis ASP.NET se encargará sólo demostrarlos en una tabla. Para ello deberemos manejar un poco la arquitectura ADO.NET:

• Creamos una conexión con la base de datos.
• La abrimos.
• Creamos un adaptador a los datos con: la consulta (un SELECT a toda la tabla) y la conexión.
• Creamos un conjunto de datos y lo rellenamos con el adaptador.
• Cerramos la conexión.
• Asignamos la fuente de datos del grid al conjunto de datos.

Con estos pasos ya tendremos lo que queremos, que se nos muestren los datos por pantalla a través de la web. Veamos el código.

Como os podéis fijar, la lógica de la aplicación se enmarca en el mismo código HTML dentro de una etiqueta script en la que se indica que el código debe ser ejecutado en el servidor. El grid se indica directamente en el código HTML mediante una etiqueta del tipo asp:DataGrid en la que en sus atributos se especifica dónde debe ejecutarse y qué identificador tiene. Este identificador es el que se utiliza como objeto en el código ASP.NET. La sintaxis de este código es la de C# como podéis apreciar que hemos indicado en la primera etiqueta del código. También podemos utilizar, si queremos, Visual Basic.NET e indicarlo en la primera línea con la etiqueta: Language=”VB”.

Aplicando estilos

Para terminar el artículo vamos a ver cómo aplicar estilos a nuestra web. Podemos hacerlo directamente con CSS pero hay partes como el grid o todos los controles que autogenere ASP.NET, que no podremos controlarlos tan directamente. Tenemos básicamente dos alternativas:

• Crear un tema con ficheros .skin y unas estructura de tema donde albergar nuestros estilos.
• Insertar el estilo directamente en el control o creando un objeto de tipo estilo al que luego invocar.

Ambas opciones son análogas a las que existen en una aplicación web implementada a más bajo nivel, haciendo esta parte directamente sobre HTML y el DOM. Nosotros vamos a incluir el estilo directamente en el código, más concretamente en el grid. La única etiqueta que vamos a modificar es <asp: DataGrid>. Vamos a realizar tres acciones:

• Indicar el estilo, tanto a las filas en general, como a las filas de cabecera en concreto. La forma de hacerlo lo veréis a continuación pero es la misma que en CSS (de hecho ese código luego se transforma en CSS para visualizarlo en el navegador).
• Anulamos la autogeneración de columnas, porque en el siguiente paso vamos a definirlas una a una.
• Creamos las columnas “manualmente”, indicando cuál va a ser el origen de datos de cada una, asignándoles un título.

El código resultante de esta etiqueta y el resultado por navegador son los siguientes (ver Listado 4).

Conclusiones

Este artículo es de carácter introductorio y, por lo tanto, espero haberos abierto las puertas de una nueva tecnología con la que desarrollar aplicaciones web. El carácter controvertido de la plataforma Mono y todas las tecnologías que la rodean, al tener una relación tan importante con Microsoft dentro del software libre, le ha acarreado una popularidad creo que menor de la que se merece. Bien es cierto que la plataforma tiene sus propios defectos y no está tan madura como otras tecnologías, pero tiene una potencia enorme como podréis haber comprobado en estas líneas.

ASP.NET en sí es una tecnología práctica y de un nivel más alto que otras tecnologías como puedan ser .NET. Digo de un nivel más alto porque la posibilidad de que el grid se rellene y se refresque sólo, por ejemplo, es de alto nivel en comparación con el hecho de tener que rellenar la tabla manualmente con un bucle. Esta opción también nos la da ASP.NET y por lo tanto podemos manejarlo de otro modo, si este tipo de automatización nos molesta. El rendimiento si lo manejamos con Apache sobre todo, no es malo y puede ser comparable a otras tecnologías relativamente pesadas como el caso de Ruby On Rails.

En definitiva, una tecnología más a tener en cuenta, sobre la que espero haber facilitado el acceso a la misma, así como la eliminación de ciertos recelos derivados de ser una tecnología creada por Microsoft pero portada al software libre sobre el que creo que es uno de los mayores proyectos de la actualidad, el Proyecto Mono.

En la red

• Mono: http://mono-project.com/
• MonoDevelop: http://monodevelop.com/
• MySQL: http://www.mysql.com/
• Mono Hispano: http://www.mono-hispano.org/
• Apache Software Foundation: http://www.apache.org/
• Conector para Mono de MySQL: http://dev.mysql.com/downloads/connector/net/
• Centro de desarrollo ASP.NET de la MSDN: http://msdn.microsoft.com/es-es/asp.net/

Sobre el autor

Francisco Javier Carazo Gil es Ingeniero Técnico en Informática de Sistemas. Nacido en Córdoba, actualmente está estudiando Ingeniería en Informática además de trabajar en el Consejo Superior de Investigaciones Científicas. Es webmaster de LinuxHispano.net, sitio del que es uno de los fundadores, además de ser el responsable de LinuxHispano-Juegos y colaborador habitual del podcast de LinuxHispano. En esta revista es colaborador habitual y sus intereses son principalmente el software libre, la programación y todo lo relacionado con GNU/Linux. Su sitio web personal está en http://www.jcarazo.com. Acaba de editar un libropara la editorial Ra-Ma de nombre: “Ubuntu Linux, instalación y configuraciones básica en equipos y servidores”. Podéis contactar con él a través de carazo@gmail.com.

Listado 1. Fichero ejemplo-lpmagazine en directorio de los sitios disponibles de
Apache
Alias /ejemplo-lpmagazine "/var/www/ejemplo-lpmagazine"
AddMonoApplications default "/ejemplo-lpmagazine:/var/www/ejemplolpmagazine"
<Location /ejemplo-lpmagazine>
SetHandler mono
DirectoryIndex index.aspx
</Location>

Listado 2. Creación de la estructura de datos en MySQL
Iniciamos sesión como superusuarios:
mysql -u root -p
Creamos la base de datos:
CREATE DATABASE directorio;
Cambiamos a directorio:
USE directorio;
Creamos la tabla:
CREATE TABLE `persona` (
`nif` char(9) NOT NULL,
`apellidos` varchar(64) CHARACTER SET utf8 NOT NULL,
`nombre` varchar(64) CHARACTER SET utf8 NOT NULL,
`fi jo` char(9) NOT NULL,
`movil` char(9) NOT NULL,
PRIMARY KEY (`nif`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Introducimos los datos de ejemplo:
INSERT INTO `persona`(`nif`,`apellidos`,`nombre`,`fi jo`,`movil`)
values ('12345678A','Carazo Gil','Francisco Javier','
957012345','600100200'),('12121212B','Gil García','José','
953221133','601223344'),('23232323C','Gómez López','Javier','
957000000','611111111');
Creamos una cuenta para la aplicación web y le asignamos los privilegios
adecuados:
GRANT SELECT, INSERT, UPDATE, DELETE ON directorio.* TO usuarioejemplo@
localhost IDENTIFIED BY 'pass';
Activamos los permisos:
• FLUSH PRIVILEGES;

Listado 3. Index.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="MySql.Data.MySqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Directorio con ASP.NET</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<script runat="server">
private void Page_Load(Object sender, EventArgs e)
{
string connectionString = "Server=localhost;Database=directorio;
User ID=usuarioejemplo;Password=pass;Pooling=false;";
MySqlConnection dbcon = new MySqlConnection(connectionString);
dbcon.Open();
MySqlDataAdapter adapter = new MySqlDataAdapter("SELECT * FROM
persona", dbcon);
DataSet ds = new DataSet();
adapter.Fill(ds, "result");
dbcon.Close();
dbcon = null;
GridDirectorio.DataSource = ds.Tables["result"];
GridDirectorio.DataBind();
}
</script>
</head>
<body>
<h1>Directorio</h1>
<asp:DataGrid runat="server" id="GridDirectorio" />
</body>
</html>

Listado 4. Etiqueta afectada
<asp:DataGrid runat="server" id="GridDirectorio"
Font-Size="10pt"
Cellpadding="4"
HeaderStyle-Text-Transform="Uppercase"
HeaderStyle-BackColor="#444444"
HeaderStyle-ForeColor="White"
AlternatingRowStyle-BackColor="#dddddd"
AutoGenerateColumns="false">
<Columns>
<asp:BoundColumn HeaderText="NIF" DataField="nif"/>
<asp:BoundColumn HeaderText="Apellidos" DataField="apellidos"/>
<asp:BoundColumn HeaderText="Nombre" DataField="nombre"/>
<asp:BoundColumn HeaderText="Fijo" DataField="fi jo"/>
<asp:BoundColumn HeaderText="Móvil" DataField="movil"/>
</Columns>
</asp:DataGrid>

Introducción al desarrollo de aplicaciones web con Mono

1 comentario

  1. Cuando oímos hablar de tecnologías libres relacionadas con las aplicaciones web, pocas veces pensamos en Mono. Prueba de ello es que pocos proyectos de importancia se han implementado haciendo uso de la tecnología liderada por Miguel de Icaza. Al igual que la plataforma .NET de Microsoft, Mono además de permitir el desarrollo de aplicaciones locales, es una excelente plataforma para el desarrollo de aplicaciones web. Le falta algo de madurez y una mejora del rendimiento, pero es una opción más a tener en cuenta.

Escribe tu comentario

Powered by WP Hashcash

Introducción al desarrollo de aplicaciones web con Mono

1 Trackback