Servidor nodejs [Arch Linux]

Nodejs es una tecnologia que plantea el uso de Javascript en el servidor, usando la maquina virtual V8 de Google (la misma que usa Google Chrome para ejecutar javascript). A continuacion veremos una simple aplicacion que nos dara los primeros pasos en esta tecnologia.

Lo primero que haremos, sera instalar el paquete, como estamos usando Arch Linux como sistema operativo, bastara con:

pacman -S nodejs

Luego de ello, podremos hacer el famoso “Hola mundo”, para ello creamos el archivo holamundo.js con el siguiente contenido:

console.log("Hola Mundo");

Luego por terminal ejecutamos:

node holamundo.js

Obteniendo:

Hola Mundo

Hasta aqui todo sencillo, pero para poder hacer aplicaciones web, necesitamos tener un servidor donde se ejecuten nuestras aplicaciones. Entonces procederemos a levantar un servidor nodejs.

Crearemos el archivo server.js con el siguiente contenido:

var http = require("http");

http.createServer(function(request, response) {
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write("<b>Hola Mundo test</b>");
    response.end();
}).listen(8888);

Lo que estamos haciendo en la primera linea, es importar la libreria http y luego ejecutamos el metodo createServer en la cual especificamos el header, y el contenido.

Al final indicamos el puerto que usara el servidor en este caso usaremos el 8888.

Por ultimo ejecutamos nuestra aplicacion, lo que levantara el servidor nodejs:

node server.js

Y poder acceder desde nuestro browser, usando el http://localhost:8888. Estos son los primeros pasos, donde poco a poco podremos ir armando aplicaciones mas avanzadas.

Primera Extension en Chrome

Ahora que Chrome se esta volviendo cada vez mas popular, es util saber desarrollar extensiones. Para ello tengo aqui les dejo un tutorial simple de una primera aplicacion.

Toda aplicacion empieza con un archivo manifest.json donde estara el nombre de la extension, descripcion, acciones a realizar, icono, etc. La siguiente estructura muestra algo basico:

{
  "name": "AboutIP",
  "version": "1.0",
  "description": "Averigua los datos con los que navegas en la red.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "data.html"
  },
  "permissions": [
    "http://ifconfig.me/"
  ]
}
  • name: el nombre de nuestra aplicacion
  • version: la version de la aplicacion
  • description: un breve detalle de lo que hace la aplicacion
  • browser_action: aqui va el comportamiento de la aplicacion, en este caso indicamos el icono que aparecera en la barra del navegador, asi como el archivo html que mostrara al momento de clickear dicho icono.
  • permissions: este parametro indica con que direccion URL, con la cual interactuara nuestra extension. (En este caso sera el servicio ifconfig.me, un servicio para obtener los datos de nuestra conexion)

Una vez armado el archivo manifest.json tenemos que armar nuestro archivo data.html, con lo siguiente:

<!DOCTYPE html>
<head>
    <title>Equipo de Desarrollo</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"> </script>
    <style type="text/css">
	body {
		background-color: #efefef;
	}

	h1 {
		color: #002966;
	}
	a {
		text-decoration: none;
	}
	.items {
		display: none;
	}
	</style>
    <script language="javascript">
		$(document).ready(function() {
			$.getJSON("http://ifconfig.me/all.json",
			{
				format: "json"
			},
			function(data) {
				$('#ajaxLoader').hide();
				$('body').width("500px");
				$('#equipo').append('<h1>Datos de su equipo</h1>');
				$('#equipo').append('<b>IP:</b>' + data.ip_addr + '<br />');
				$('#equipo').append('<b>User-Agent:</b>' + data.user_agent + '<br />');
				$('#equipo').append('<hr />');
				$('#equipo').append('<a id="ver" href="#" onClick="javascript: verMas();" >Ver mas datos</a>');
				$.each(data, function(i,item) {
					$('#equipo').append('<span class="items" ><b>' + i + '</b>' + ' : ' + item + '<br/></span>');
				});
			});
		});
		function verMas() {
			$('.items').show();
			$('#ver').hide();
		}
    </script>
</head>
<body>
    <div class="container" id="equipo">
        <img id="ajaxLoader" src="ajax-loader.gif" />
    </div>
</body>
</html>

Tambien tenemos un icono para nuestra aplicacion:

Con todos los archivos, nuestra carpeta sera algo asi:

Luego que tenemos nuestro icono y nuestro archivo html, procedemos a instalarlos. Ingresamos al panel de extension del Google Chrome y activamos la opcion “Modo Programador”:

Luego seleccionamos “Cargar Extension sin empaquetar” y subimos toda la carpeta donde esta nuestro plugin, y luego de ello veremos que el icono aparece al costado de la barra de direccion:

Chrome Extension

Al clickear veremos que muestra los datos de nuestra conexion:

Screen de la extension

Con esto habremos desarrollado nuestra primera aplicacion para Google Chrome.

Error al actualizar glibc [Arch Linux]

Hace poco, unas horas intente actualizar Arch Linux como de costumbre con un:

pacman -Syu

Cuando me tope con el siguiente error:

error: error al realizar la transacción (archivos en conflicto)
glibc: /lib existe en el sistema de archivos
Ocurrieron errores, no se actualizaron paquetes

Resulta que a partir de ahora, la carpeta /lib sera un enlace simbolico a /usr/lib como lo indica Arch Linux en este enlace:

https://wiki.archlinux.org/index.php/DeveloperWiki:usrlib

En pocos pasos hay que actualizar el sistema ignorando el paquete glibc

pacman -Syu --ignore glibc
pacman -Su

Y tema solucionado 🙂

Nota: No uses –force porque corrompes el sistema

Reflexiones sobre el Webkit

He escuchado comentarios que mencionan lo maravilloso que es el inspector de Google Chrome, de su console y demas “maravillas” pero lo cierto es que el inspector es una tecnologia que le pertenece a Webkit (motor de renderizado Open Source).

Un poco de historia

Hace un tiempo, por 1998 el proyecto KDE estaba trabajando en un renderizador de HTML (KHTML) y un motor javascript (KJS). Pero en el 2002 fue cuando Apple lo vio con buenos ojos, por ser un proyecto limpio y con pocas lineas de codigo, es ahi donde hace un fork creando webkit que fue anunciado junto con el navegador Safari en Enero del 2003. Tiempo despues Apple opta por liberar el proyecto webkit (Junio del 2005).

Al ser un proyecto Open Source, ha permitido que varios navegadores lo implementen entre los mas importantes tenemos a Safari, Epiphany, Midori y el popular Google Chrome.

Y el inspector?

El inspector de Webkit, o webinspector como se denomina dentro del proyecto es una de las caracteristicas de webkit, como podemos ver en este enlace: http://trac.webkit.org/wiki/WebInspector.

Entonces, podemos concluir que cualquier navegador que implemente el webkit como renderizador HTML tendra el inspector habilitado, uno de ellos es Chrome, pero tambien esta el Epiphany en Gnome. El inspector es mas parte de webkit que de Google Chrome.

Quien anima a hacer una implementacion de Webkit?

Instalar paquetes del AUR

Poco a poco me va gustando mas Arch Linux, su simplicidad su capacidad para configurarlo y su transparencia hacen que sea muy versatil.

Los paquetes en Arch se actualizan rapidamente, mas que todo en el repositorio [community] pero hay algunos paquetes que no estan. Para ello esta AUR, una comunidad de desarrolladores de Arch donde podemos encotrar varias aplicaciones mantenidas por la comunidad.

En esta web encontramos PKGBUILDS, que mas adelante explicaremos como instalarlo en nuestro sistema Arch, ademas podremos ver las votaciones y votar para que asi luego puedan ser agregados en el repositorio [community] y ser descargado e instalado.

Paquetes necesario

Para poder instalar desde el AUR, necesitamos tener unos paquetes en nuestro sistema, solo basta con un:

pacman -S base-devel

Luego de ello buscandos nuestro paquete en la web de Arch (http://aur.archlinux.org/) en mi caso busque mysql-workbench y lo encontre en este link.

Ahi veremos la opction Tarball para descargar el paquete, luego de descargarlo procedemos a extraerlo, ingresar a la carpeta y ejecutar makepkg:

tar -xzvf mysql-workbench.tar.gz
cd mysql-workbench
makepkg -s

Agregamos el parametro -s para instalar las dependencias, y con esto hemos creado un paquete que ya puede ser instalado con pacman.

El archivo tendra una estructura similar a:
<application name>-<application version number>-<package revision number>-<architecture>.pkg.tar.xz
Procedemos a la instalacion con (como root):

pacman -U mysql-workbench-gpl-5.2.40-src.tar.gz

Y listo.

Nota:

Existe un paquete YAOURT que se comporta como un gestor de paquetes de AUR, personalmente no me agrada, por que como parte de la cultura de Arch, es saber lo que estas haciendo y aprender un poco mas en cada experiencia. Si bien es cierto que YAOURT se hace mas sencillo instalar paquetes, te saltas ese aprendizaje por el cual Arch es mi distribucion favorita.

CodeSniffer en Arch Linux

Al trabajar en diversos proyectos con tecnologia PHP, es recomendable tener ciertos parametros de codigo, estandares que hacen el codigo mas legible.

Para esto ayuda el paquete CodeSniffer de PEAR, que evalua el codigo de acuerdo a estandares (PEAR o Zend). Vamos a mostrar algunos detalles de como instalarlo en una distro Arch Linux.

Lo primero es instalar PEAR:

pacman -S php-pear

Luego de ello actualizamos los canales de PEAR (como root):

pear update-channels
pear list-upgrades
pear upgrade PEAR

Y por ultimo instalamos el CodeSniffer:

pear install PHP_CodeSniffer

Luego lo ejecutamos por la terminal:

$ phpcs

En mi caso no fui tan afortunado 😦 y me retorno un error al momento de ejecutarlo:

PHP Warning:  is_file(): open_basedir restriction in effect. File(/usr/bin/../CodeSniffer/CLI.php) is not within the allowed path(s): (/srv/http/:/home/:/tmp/:/usr/share/pear/) in /usr/bin/phpcs on line 28

Para solucionarlo, modifique el archivo /usr/bin/phpcs en la seccion:

if (is_file(dirname(__FILE__).'/../CodeSniffer/CLI.php') === true) {
    include_once dirname(__FILE__).'/../CodeSniffer/CLI.php';
} else {
    include_once 'PHP/CodeSniffer/CLI.php';
}

Como vemos, trata de abrir el archivo cuya ruta relativa es: /usr/bin/../CodeSniffer/Cli.php la cual no existe, pues la carpeta Codesniffer se encuentra en /usr/share/pear/PHP/. Entonces modificamos esas lineas de codigo, quedando:

if (is_file(dirname(__FILE__).'/../share/pear/PHP/CodeSniffer/CLI.php') === true) {
    include_once dirname(__FILE__).'/../share/pear/PHP/CodeSniffer/CLI.php';
} else {
    include_once 'PHP/CodeSniffer/CLI.php';
}

Luego de esto, ya podemos ejecutar nuestro CodeSniffer sin problemas :D.