Archivos de julio, 2013

17 Jul

Siguiendo con las prácticas node.js, vamos a instalar y probar la base de datos MongoDB, Simplemente vamos a hacer una instalación, carga de datos y luego un server que muestre los datos en una web

Una herramienta útil para OSX:Brew

Probablemente hubiera sido de los más util empezar por este programa, pero lo descubrí luego de estar trabajando en Node.js y estos tutoriales y resultó ser de lo más útil y sencillo. Homebrew es una aplicación que permite la instalación y gestión de otros programas

Perfectamente se puede saltear este parte si ya tenés brew instalado, sino lo tenés ni te interesa, podés instalar mongodb descargando e instalandolo como cualquier otro paquete desde su página oficial

Para instalar brew necesitás antes tener instalado el xquartz y la command line tool

Para el primero bajate el dmg de aca, instalalo, deslogeate, y luego volvé a logearte

Para el segundo bajalo desde aca, ciertamente es necesario tener un id de developer en el sitio de Apple. Algo que va a ser muy necesario siempre

Luego podrás instalar brew con la siguiente linea en la consola

ruby -e “$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)”

No es necesario usar SUDO, simplemente se instalará en /usr/local

instalar mongodb

Luego de tener instalado homebrew, abrimos la consola y tipeamos

brew install mongodb

Ahi se instalará mongodb:

To have launchd start mongodb at login: ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents Then to load mongodb now: launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist Or, if you don’t want/need launchctl, you can just run: mongod

Trabajando con Mongo DB

Para hacer andar la db ejecutamos en consola mongod

De esa manera tenemos la base de datos corriendo en nuestro localhost en el puerto 27017. Luego de arrancar la db podemos abrir un editor de mongo tipeando mongo en otra instancia de la consola

para probar, allí podemos cargar un dato a la db:

db.test.save( { a: 1 } )
> db.test.find()

el método find nos devolverá el dato recién cargado. Por ejemplo:

{ “_id” : ObjectId(“51ddaceb9639ad48df5a18db”), “a” : 1 }

Usando node.js

Vamos a cargar un dato sencillo, usando el clásico ejemplo de personas. En la consola donde ejecutamos la sintaxis de mongo vamos a cargar unos datos:

db.personas.insert({nombre:’pepe’,apellido:’gonzalez’})
db.personas.find()

vamos a instalar la libreria de node mongodb:

sudo npm install mongodb -g

luego creamos un archivo app.js, con el código muy similar al primer ejemplo, pero cargando toda la lógica de mongo:

var mongodb = require('mongodb'); var http = require("http"); var serverdb = new mongodb.Server("127.0.0.1", 27017, {}); var dbTest = new mongodb.Db('test', serverdb, {}) var data; var elservidor = function(request, response) { response.writeHead(200, {"Content-Type": "text/html"}); for(i=0;i<data.length;i++){ response.write(data[i].nombre); response.write("
") response.write(data[i].apellido); } response.end(); } dbTest.open(function (error, client) { if (error) throw error; var collection = new mongodb.Collection(client, 'personas'); collection.find().toArray(function(err, docs) { data = docs; }); http.createServer(elservidor).listen(8888); });

Podemos ver que primero llamamos la librería mongodb, luego se conecta al servidor(serverdb), luego con la base de datos (dbTest), y luego el método dbTest.open() obtiene la colección de ‘personas’. estas son guardadas como un Array en la variable data. Luego se crea el server que ejecuta la función “elservidor” que se encarga de parsear la variable data y mostrarla en el documento html.

Luego de esto simplemente:

node app.js

Vamos a localhost:8888, y allí veremos los datos de personas.

Un paso mas en la batalla 🙂

10 Jul

Less Es uno de los módulos que empezamos a ver en nuestros anteriores ejemplos como complemento a express y hbs. Less es un pre procesador de CSS que nos permite generar nuestro archivo css a partir de nuestro código less. Este último, nos permite usar variables, funciones y herencia.

El uso de las variables es algo muy útil cuando tenemos que reutilizar código. Un ejemplo muy típico sería el de guardar un color:

@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }

En el ejemplo podemos ver que la variable “@color-base” es usada por 3 clases diferentes. Algo muy útil para manejar una paleta de colores.

De acuerdo a la documentación de su sitio oficial podemos ver que less puede ser usado tanto como pre-procesador desde el lado del server, tanto como desde el lado cliente. Obviamente, aqui lo veremos desde la primera opción, interactuando con express y hbs

Less-middleware, el compilador de less para usar en express

al hacer una instalación del modulo less, podemos ver que podemos crear generar nuestro archivo css a partir del less como strout en la consola

$ lessc styles.less

Luego copiar esa salida a un archivo css. Algo no muy cómodo. También se puede usar su método render, y hacer unas cuantas cosas mas aún. Incluso se puede encontrarse un tutorial aca para hacer un compilador de less en node.js

Siendo que vamos a utilizar Express como Framework podemos contar con otro módulo: less-middleware que tal como su nombre indica se trata de less + el software necesario para la comunicación con Express. Se instala igual que tantos otros módulos:

sudo npm install less-middleware -g

Si seguimos el primer tutorial de esta serie, ya podemos usarlo sin problemas.

Un ejemplo

Retomándo el último tutorial de parciales vamos a agregarle un par de líneas para usar less sobre ese mismo ejemplo. Abrimos el archivo app.js en donde editaremos nuestro código. Allí creamos dos nuevas variables: path y lessMiddleware respectivamente

var path = require('path'); var lessMiddleware = require('less-middleware');

luego a la variable app le agregamos unas cosas usando el método “use”

app.use(app.router); app.use(lessMiddleware({ src: __dirname + '/public' })); app.use(express.static(path.join(__dirname, 'public')));

router es el código que corre las rutas de la aplicación, express.static es la función que sirve la carpeta, que en este caso se llama public, todo el código en defenitiva sería el siguiente:

var fs = require('fs'); var express = require('express'); var hbs = require('hbs'); var path = require('path'); var lessMiddleware = require('less-middleware'); var app = express(); hbs.registerPartials(__dirname + '/views/partials'); app.set('view engine', 'hbs'); app.set('views', __dirname + '/views'); app.use(app.router); app.use(lessMiddleware({ src: __dirname + '/public' })); app.use(express.static(path.join(__dirname, 'public'))); app.get('/', function(req, res) { res.locals = { title: 'testeando hbs' } res.render('index'); }); app.listen(3000);

Aun no probamos la app, porque como dijimos, debemos crear la carpeta public, la cual lo haremos dentro del proyecto, al mismo nivel que app.js

Luego allí, creamos el archivo style.less

Algo sobre la sintaxis de Less

Abrimos el archivo, vamos a crear unos estilos para esto. Primero unas variables que serán para colores:

@color-base: #2d5e8b; @gray-color: #999;

y además vamos añadir dos funciones (si, css con funciones):

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); }

Estas funciones lo que hacen es dar el borde redondeado y la sombra al objeto html que pretendamos pasando como parametros los valores de radio en la primera función y de dirección, profundidad y transparencia en la segunda función. Su implementación sería:

.class{ .box-shadow(5px, 5px, 6px, 0.3); }

y en el archivo css que imprima el resultado será:

.class{ -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); }

por qué la función? porque estamos englobando una serie de propiedades que logran un mismo efecto. (en los ejemplos, bordes redondeados y sombra proyectada) aplicables según un navegador correspondiente.

Finalmente el código nos quedaría de la siguiente manera

@color-base: #2d5e8b; @gray-color: #999; .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } html{ background: @gray-color; } body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; width: 900px; margin-left: auto; margin-right: auto; background: #FFF; .border-radius(20px); .box-shadow(0px, 0px, 20px, 2); } header{ border-bottom:1px solid @gray-color; padding:20px; } section{ padding:20px; min-height: 300px; } footer{ text-align: center; padding: 5px; font-size: 10px; color: #333; } h1{ color: @color-base; }

Finalmente vamos a la consola y allí ejecutamos

node app.js

Allí tendremos la página creada con unos estilos aplicados.



Contacto