Editamos el fichero db.ts y añadimos aquí el código que accede a nuestra base de datos MongoDB. Para ello, importamos el módulo de mongodb y creamos una instancia de la clase mongodb, establecemos la conexión con la base de datos y la abrimos:

import mongodb = module('mongodb');
var server = new mongodb.Server('localhost', 27017, {auto_reconnect: true}, {})
var db = new mongodb.Db('highscores', server);
db.open(function() {});

Una vez abierta la conexión, definimos una clase que describe los objetos que esperamos enviar/recibir de la colección “highscores”. Esta es una de las ventajas de utilizar TypeScript, que nos permite definir y trabajar con clases, e indicar el tipo de los parámetros de nuestras funciones.

export class Score {
    _id: string;
    user: string;
    score : number;
}

Ahora podremos definir las funciones que expone este módulo. Veremos que hay ciertos elementos nuevos con respecto a una definición en JavaScript.

export function getScores(callback: (scores: Score[]) => void) {

    db.collection('scores', function(error, scores_collection) {
        if(error) { console.error(error); return; }
        scores_collection.find({}).toArray(function(error, scoresobj) {
           if(error) { console.error(error); return; }
           callback(scoresobj);
        });
        
    });
}

La primera la vemos en los parámetros, estamos indicando que tendremos un callback, que será de tipo void (esto es, que no devuelve nada) la cual recibirá una lista de objetos de tipo Score (la clase que acabamos de definir). Este callback será la función anónima que acabamos de definir en el módulo index:

(scores) => {
        res.render('index', { title: 'Highscores', scores: scores })
}

El resto de una función es la típica que provee el módulo de mongoDB. Pero ya podemos ver la facilidad con la que podríamos cambiar el servidor al que nos conectamos o incluso el repositorio de datos…

Definiendo las vistas

Gracias a JadeJS podemos cambiar el aspecto de la UI de una forma muy sencilla. En nuestro caso sólo vamos a definir una vista en la que mostrar la lista de puntuaciones. Para ello creamos 2 ficheros: layout.jade para tener unos elementos comunes e index.jade para mostrar la lista:

layout.jade

!!!
html
  head
    title ImageBoard
    link(rel='stylesheet', href='http://cachedcommons.org/cache/960/0.0.0/stylesheets/960.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    #header.container_12
      script(src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js')
    #container.container_12!= body

index.jade
h1= title
p Welcome to #{title}

ul
- each score in scores
  li
    b= score.user + " " + score.score

index.jade

h1= title
p Welcome to #{title}

ul
- each score in scores
  li
    b= score.user + " " + score.score

No es intención de este artículo explicar cómo utilizar Jade, pero vemos que podemos recorrer de una forma muy sencilla una lista de elementos, en nuestro caso la clasificación de puntuaciones, y mostrarlas en una página.

Si desde SublimeText compilamos el fichero app.ts podremos ver cómo se generan todos los ficheros JavaScript que serán los que utilice nuestra aplicación. Gracias a la Build Definition que hemos creado anteriormente, no es necesario hacerlo por cada fichero .ts, sino que se hace automáticamente para todos los que necesitamos. Y ya podemos arrancar la aplicación:

node app.js

y abrimos un navegador para ver el resultado:

Podemos ver que la página se renderiza correctamente pero no nos muestra ningún resultado, esto es normal puesto que no tenemos ningún registro en nuestra colección MongoDB. Vamos a hacer una página para insertar registros.

Añadiendo más funcionalidades

Siguiendo el mismo proceso que antes, lo primero que hacemos es modificar nuestro fichero de aplicación (app.ts) para añadir dos métodos nuevos, un GET que cargue un formulario y un POST para insertar los datos:

app.get('/scores/newscore', (req, res) => {
    routes.newscoreget(req, res);    
});

app.post('/scores/newscore', (req, res) => {
   routes.newscorepost(req, res);
});

Definimos los nuevos métodos en nuestro fichero index.ts:

export function newscoreget(req: express.ExpressServerRequest, res: express.ExpressServerResponse){
     res.render('newscore',{});   
};

export function newscorepost (req: express.ExpressServerRequest, res: express.ExpressServerResponse){
    var newscore = new db.Score()
    newscore.user = req.param('user');
    newscore.score = req.param('score');
     db.addScore(newscore, (r) => {
        res.redirect('/');
    });
};

Como vemos, el primero únicamente renderiza el formulario y es el segundo método el que llamará a nuestro módulo de acceso a datos. En este segundo método utilizamos un objeto de la clase Score que hemos definido en otro módulo, que será lo que pasemos como parámetro al método addScore. Veamos cómo implementamos este método:

export function addScore(newscore : Score, callback: (result: any)=> void){
    db.collection('scores', function(error, scores_collection) {
        if (error) { console.error(error); return; }
        scores_collection.insert({"user" : newscore.user, "score" : newscore.score },
            (error, result) => {
                if(error) { console.error(error); return; }
                callback(result);
            })
        });
}

Gracias a que utilizamos una clase de TypeScript, podemos ver sus propiedades cuando las necesitemos:

Y por último, creamos la vista newscore.jade con el formulario en el que añadimos el usuario y la puntuación:

form( method="post")
   div
       br
       div
           span.inputtitle User name :
           input(type="text", name="user")
       br
       div
           span.inputtitle Score :
           input(type="text", name="score")
       br
       #editScoreSubmit
           input.button(type="submit", value="Save Score")

Y modificamos nuestra vista principal para añadirle un botón que llame a nuestra recién creada vista:

h1= title
p Welcome to #{title}

ul
- each score in scores
  li
    b= score.user + " " + score.score
br
form( action="/scores/newscore/", method="get")
    div
        #newScoreSubmit
            input.button(type="submit", value="New Score")

Volvemos a compilar el fichero app.ts y arrancamos la aplicación, si todo ha ido bien ya podremos acceder al formulario para añadir puntuaciones:

Y ver el resultado en la página principal:

RESUMIENDO

Este pequeño ejemplo nos ha servido para ver cómo se puede hacer una aplicación web con NodeJS y TypeScript con una buena estructura, el código bien organizado y siguiendo el patrón MVC. Esto nos permite que, si la aplicación es muy grande, el trabajo se pueda repartir entre diferentes personas/grupos de manera muy sencilla. Además, podemos tener definidos módulos de prueba (fakes) que simulen funcionalidades que no están desarrolladas.

Autor de éste Artículo

Pablo Bouzada, desarrollador especializado en .NET y otras tecnologías Microsoft. Consultor en Pasiona Consulting y divulgador tecnológico en Techdencias. Colaborador de programandonet.com y otros grupos de usuarios de España.

Twitter: @pbousan

Slideshare: http://www.slideshare.net/pbousan

GitHub: https://github.com/pbousan?tab=repositories

• Código más homogéneo y mantenible
• Comprobación estática de tipos (opcional y de momento sólo con Visual Studio)
• Object Oriented Programming: clases, herencia e interfaces
• Separation of Concerns (SoC): mediante la organización del código en módulos que se pueden cargar de forma dinámica

En este link: http://programandonet.com/web/primeros-pasos-con-typescript/ tenéis un tutorial sobre las features básicas de TypeScript.

A diferencia de otros lenguajes que compilan JavaScript, como pueden ser Dart o CoffeScript, TypeScript es un superconjunto de JavaScript, por lo que en esencia es JavaScript.

Por tanto, si ya conocemos JavaScript, no tendremos ningún problema para utilizar TypeScript. La curva de aprendizaje de este nuevo lenguaje será realmente suave, pudiendo conseguir grandes resultados desde el principio. Además, al ser JavaScript, TypeScript nos permite seguir utilizando todas las librerías que conocemos hasta ahora (JQuery, Backbone, Knockout, …)

Hay que destacar también que TypeScript es un proyecto Open Source, y se puede descargar su código fuente (además de varios ejemplos) desde aquí: http://typescript.codeplex.com/ Actualmente se encuentra en la versión 0.8.3, y como podéis ver en este roadmap, en la versión final (1.0) estará completamente alineado con la versión 6 de ECMAScript, que traerá de serie alguna de las novedades que ya implementa TypeScript.

Existen varias formas de utilizar este nuevo lenguaje. La primera sería con proyectos creados con Visual Studio 2012 y el plugin de TypeScript. La segunda, que será sobre la que desarrollemos este artículo, es utilizar el paquete de Node.js y alguno de los IDEs que lo soporta (Sublime Text, Vim, Emacs,…). Para este artículo hemos decidido utilizar Sublime Text, ya que es uno de los que se integra mejor con TypeScript, exceptuando Visual Studio. En este link tenéis los pasos para utilizar TypeScript en Sublime Text tanto el syntax highlighter como la forma de crear una System Build que compile TypeScript:

Instalar el paquete de TypeScript para Node.js

npm install -g typescript

-   Para instalar el syntax highlighter, que te puedes descargar desde este link, sólo hace falta copiar el fichero typescript.tmplanguage en tu directorio de paquetes de Sublime Text.

-  Y sólo falta añadir un Build System para que compile los ficheros TypeScript. Para ello, abrimos Sublime Text, y en Tools –> Build System –> New Build System, añadir lo siguiente:

{
"selector": "source.ts",
"cmd": ["tsc.cmd", "$file"],
"file_regex": "^(.+?) \\((\\d+),(\\d+)\\): (.+)$"
}

Y con esto ya podemos compilar los fichero TypeScript (con extensión .ts) en sus correspondientes JavaScript simplemente presionando Ctrl+B

MANOS A LA OBRA

Vamos a desarrollar una aplicación muy básica: el sistema de puntuaciones de un juego. Que está basado uno de los ejemplos disponibles en el repositorio de TypeScript en Codeplex (http://www.typescriptlang.org/Samples/#ImageBoard), en la que utilizaremos una serie de paquetes Node que harán nuestro trabajo más sencillo:

• ExpressJS para articular la estructura de la aplicación
• Node-MongoDB para conectar con la base de datos
• JadeJS como motor de gestión de vistas

Para este ejemplo es necesario, además de Node.js, tener MongoDB instalado, si no lo tenéis, podéis seguir estos pasos para instalar MondoDB en vuestro equipo.

Crearemos una estructura muy sencilla de directorios que nos permita tener las diferentes “capas” de la aplicación separadas, ya que usaremos una arquitectura MVC, tenéis disponible todo el código de este artículo en este repositorio de Github . A lo largo del artículo veremos las ventajas de tener los ficheros separados por funcionalidades de esta forma:

/node_modules
/public
– /stylesheets
/routes
– index.ts
/views
– index.jade
– newscore.jade
– layout.jade
app.ts
db.ts
express.d.ts
mongodb.ts
node.d.ts
package.json

Lo primero que haremos será crear el fichero de definición de paquetes para poder instalarlos. Este será nuestro package.json:

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "ejs": ">= 0.5.0"
      , "jade": ">= 0.0.1"
      , "mongodb": ">= 1.0.0"
  }
}

Y los instalamos con la instrucción:

npm install

Con lo que veremos que se añaden los paquetes necesarios a nuestra carpeta node_modules.

A continuación vamos a editar el fichero principal de la aplicación, en nuestro caso será app.ts, que la extensión sea .ts indica que se trata de un fichero con código TypeScript. En este fichero es donde usaremos ExpressJS para establecer el enrutamiento que aceptará nuestra aplicación. Para una guía de uso de Express Framework os recomiendo esta de Javier Viola, en este artículo nos centraremos en la implementación con TypeScript.

Antes de nada, debemos añadir las referencias de lo que vamos a utilizar, esto en TypeScript se hace con la siguiente línea:

///<reference path='node.d.ts' />

Los ficheros con extensión *.d.ts indican que dicho fichero tendrá la definición de elementos (módulos, interfaces, clases, variables globales y funciones) que necesita TypeScript para importarlos a la hora de compilar. Pero estos ficheros no generan ningún fichero JavaScript, son simplemente definiciones en TypeScript de librerías JavaScript. Por tanto, igual que los ficheros .ts, no es necesario que se desplieguen en los servidores de producción.

Nota: la extensión .d.ts es una convención y puede que nos encontremos ficheros de definiciones sin ella, ya que no es obligatoria. Estos ficheros de definición son mantenidos por la comunidad de desarrolladores ya que comentaba antes, TypeScript es un proyecto Open Source.

Una vez referenciado el fichero de definiciones que nos permite trabajar con el paquete de Node, procedemos a importar los módulos que utilizaremos en nuestra aplicación:

import http = module("http")
import url = module("url")
import routes = module("./routes/index")
import db = module("./db")
import express = module("express")

Estos import serán traducidos a instrucciones del tipo var express = require(‘express’); siempre que sean necesarias, ya que, como comentábamos antes, TypeScript necesita definiciones para saber qué compilar, aunque a veces no tiene un reflejo en el JavaScript resultante.

Creamos una instancia del objeto express y procedemos a configurarlo. Podemos ver como con TypeScript las funciones anónimas pasan a ser () =>{…}, que son expresiones lambda, luego veremos cómo quedan tras compilar:

var app = express.createServer();

// Configuration
app.configure(() => {
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', () => {
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', () => {
  app.use(express.errorHandler());
});

Ahora asignamos las rutas al que aceptará nuestra aplicación. Como dijimos anteriormente será algo muy sencillo y simplemente tendremos la opción de hacer llamadas GET, que devuelve la lista completa de puntuaciones, y un POST para añadir nuevos elementos. Empecemos sólo con el GET:

// Routes
app.get('/', routes.index);

app.listen(3000, function(){
    console.log("Demo Express server listening on port %d in %s mode", 3000, app.settings.env);
});

export var App = app;

Para comprobar que todo está correcto, compilamos el fichero app.ts y obtenemos su correspondiente fichero JavaScript:

Vamos a crear un fichero con el nombre index.ts, que se trataría de nuestro “Controlador” (recordemos que vamos a seguir el patrón MVC) dentro de nuestra carpeta /routes y añadimos el siguiente código:

// Importamos los módulos que vamos a utilizar
import express = module("express")
import db = module("../db")

// Y exponemos un método que devuelva los elementos de la tabla "highscores".
export function index(req: express.ExpressServerRequest, res: express.ExpressServerResponse){
    db.getScores(function(scores) {
        res.render('index', { title: 'Highscores', scores: scores })
    });
};

Como vemos, hacemos referencia al módulo “db” y llamamos a un método getScores. Esto lo hacemos así para separar el acceso a datos del sistema de rutas y de la generación de las vistas.

Autor de éste Artículo

Pablo Bouzada, desarrollador especializado en .NET y otras tecnologías Microsoft. Consultor en Pasiona Consulting y divulgador tecnológico en Techdencias. Colaborador de programandonet.com y otros grupos de usuarios de España.

Twitter: @pbousan

Slideshare: http://www.slideshare.net/pbousan

GitHub: https://github.com/pbousan?tab=repositories

Sin embargo, estos datos son dummy. Liberemos el poder de la base de datos MongoDB, recordemos que introdujimos este documento:

> db.productos.findOne()
{
  "_id" : ObjectId("4fe6454a8c136cf49721359f"),
  "nombre" : "Papas Fritas",
  "descripcion" : "Crujientes, sabor mediterraneo",
  "precio" : 2.5
}

¿Cómo conectamos nuestra base de datos MongoDB usando node.js? Usando la librería mongoose.

El momento de la base de datos llegó, recordemos que al principio creamos el archivo models/producto.js:

• models/producto.js

var Schema = require('mongoose').Schema

var producto_schema = new Schema({
  nombre        :   String,
  descripcion   :   String,
  precio        :   Number
})

var Producto = module.exports = producto_schema

… Y, Modifiquemos nuestros archivos de la siguiente manera:

• package.json

{
    "name": "herman-mongoose-suggestion"
  , "version": "1.0.0"
  , "dependencies": {
      "express"     : "2.5.8"
    , "jade"        : "0.25.x"
    , "mongoose"    : "2.5.10"
  }
}

Una vez modificado package.json, no olvidemos de actualizar nuestro modulos de node via npm install -f en el directorio de nuestra aplicación.

• controllers/producto.js

// Creación de la Conexión
var mongoose        = require('mongoose')
  , db_lnk          = 'mongodb://localhost/supermercado'
  , db              = mongoose.createConnection(db_lnk)

// Creación de variables para cargar el modelo
var producto_schema = require('../models/producto')
  , Producto = db.model('Producto', producto_schema)

Ahora, existe, por supuesto la posibilidad de montar de una manera general la conexión para toda la aplicación. No la tocaremos sin embargo en este tutorial.

Modificamos la función exports.index, siempre dentro de controllers/producto.jspara que recoja los productos:

• controllers/producto.js

exports.index = function (req, res, next) {

  Producto.find(gotProducts)

  // NOTA: Creo que es bueno usar verbos en inglés para las funciones,
  //       por lo cómodo que son en estos casos (get, got; find, found)
  function gotProducts (err, productos) {
    if (err) {
      console.log(err)
      return next()
    }

    return res.render('index', {title: 'Lista de Productos', productos: productos})
  }
}

Nótese la estructura de callbacks: Cuando se pide la lista de productos, sólo al llegar la respuesta invocamos a gotProducts, el cual llama a la renderización a través de res.render de la página. Para los que vienen de otros lenguajes esta manera de modelar puede ser confusa al principio. Pero tiene sus ventajas en el escenario web, el cual, a mi parecer es completamente orientado al evento.

Tenemos listo el back-end! Ya tenemos una lista de productos, ejecutamos? Aún no, ya que res.render cargaría el template jade, pero no le está insertando los datos. Por lo que modificaremos views/index.jade para tal efecto:

• views/index.jade

h2 Tabla de Productos
table(border='1')
  tr
    th Producto
    th Descripción
    th Precio
  - if (productos)
    - each producto in productos
      tr
        td
          a(href="/producto/" + producto._id.toString()) #{producto.nombre}
        td #{producto.descripcion}
        td #{producto.precio}

Bien. CTRL+C, $ node app.js y veamos el resultado:

Página de Edición de un Producto (GET /producto/:id)

Si clickamos en el link del primer producto obtenidos, tendremos un mensaje que no podemos ver el producto. Tomaremos las medidas para ello.

En general, se pueden dar buenos argumentos para no usar la misma id de producto de la base de datos como indicador id para la ruta. Pero recordemos que estamos en un ejemplo didáctico. Necesitaremos desarrollar (Y aquí veremos lo atractivo que es el paradigma MVC), una función de controlador y una vista, no necesitaremos en este ejemplo hacer funciones de modelos, dado que mongoose nos entrega todo. En la medida que veamos más complejidad, es necesario encapsular las funciones de mongoose y las lógicas que necesitemos en funciones de modelo.

• controllers/producto.js

exports.show_edit = function (req, res, next) {

  // Obtención del parámetro id desde la url
  var id = req.params.id

  Producto.findById(id, gotProduct)

  function gotProduct (err, producto) {
    if (err) {
      console.log(err)
      return next(err)
    }

    return res.render('show_edit', {title: 'Ver Producto', producto: producto})
  }
}

Mongoose nos ahorra muchos problemas de desarrollo, tiene la función findById, (Ver documento), la que, dado un id en string, devuelve el objecto correspondiente (o null, si no existe)

Necesitamos renderizar el objecto. Acá usaremos la misma plantilla para edición y mostrar el producto:

• /views/show_edit.jade

h2 #{title}
form(method='post')

  p
    label(for="nombre") Nombre:
      input(type='text', name='nombre', value=producto.nombre)

  p
    label(for="descripcion") Descripción:
      input(type='text', name='descripcion', size=100, value=producto.descripcion)

  p
    label(for="precio") Precio:
      input(type='text', name='precio', value=producto.precio)

  p
    input(type='submit', value='Guardar')

Obtenemos la siguiente pantalla:

Sin embargo si presionamos el botón guardar cambios, nada ocurre. Es lo que habilitaremos en el siguiente apartado…

Enviar los cambios de un producto (POST producto/:id)

Este es un trabajo completo sólo en el controlador (ya que tenemos la vista y modelo en mongoose):

• /controllers/producto.js

exports.update = function (req, res, next) {
  var id = req.params.id

  var nombre      = req.body.nombre       || ''
  var descripcion = req.body.descripcion  || ''
  var precio      = req.body.precio       || ''

  // Validemos que nombre o descripcion no vengan vacíos
  if ((nombre=== '') || (descripcion === '')) {
    console.log('ERROR: Campos vacios')
    return res.send('Hay campos vacíos, revisar')
  }

  // Validemos que el precio sea número
  if (isNaN(precio)) {
    console.log('ERROR: Precio no es número')
    return res.send('Precio no es un número !!!!!')
  }

  Producto.findById(id, gotProduct)

  function gotProduct (err, producto) {
    if (err) {
      console.log(err)
      return next(err)
    }

    if (!producto) {
      console.log('ERROR: ID no existe')
      return res.send('ID Inválida!')
    } else {
      producto.nombre       = nombre
      producto.descripcion  = descripcion
      producto.precio       = precio

      producto.save(onSaved)
    }
  }

  function onSaved (err) {
    if (err) {
      console.log(err)
      return next(err)
    }

    return res.redirect('/producto/' + id)
  }
}

Controlamos los errores de no ID y parámetros en blanco. A next() le estamos dando un parámetros. En iteraciones posteriores debemos configurar que si next recibe parámetros, entregarle un error 500 al usuario. Pasaremos de esta funcionalidad por ahora.

Borrar un Producto (POST /delete-producto/:id)

Cómo se mencionó arriba, se podría haber usado el verbo DELETE (haciendo override de método). Para hacer más simple el tutorial, se implementa en GET.

Debemos agregar los links para el eliminado en la lista de productos, es decir en el template de jade:

• views/index.jade

h2 Tabla de Productos
table(border='1')
  tr
    th Producto
    th Descripción
    th Precio
    th  
  - if (productos)
    - each producto in productos
      tr
        td
          a(href="/producto/" + producto._id.toString()) #{producto.nombre}
        td #{producto.descripcion}
        td #{producto.precio}
        td
          a(href="/delete-producto/" + producto._id.toString()) Borrar

Y la funcionalidad correspondiente en el controlador:

• /controllers/producto.js

exports.remove = function (req, res, next) {
  var id = req.params.id

  Producto.findById(id, gotProduct)

  function gotProduct (err, producto) {
    if (err) {
      console.log(err)
      return next(err)
    }

    if (!producto) {
      return res.send('Invalid ID. (De algún otro lado la sacaste tú...)')
    }

    // Tenemos el producto, eliminemoslo
    producto.remove(onRemoved)
  }

  function onRemoved (err) {
    if (err) {
      console.log(err)
      return next(err)
    }

    return res.redirect('/')
  }
}

Nótese (con algo de humor por supuesto), como reaccionamos ante una id que no encontramos. Si bien asumimos que esta función es llamada dentro de la página de índice, es posible que los valores quieran ser ingresados directamente (ala REST). El desarrollador debe preveer esta conducta y crear los flujos adecuados.

Cosas que podemos agregar: Hacer una función js de cliente para que despliegue un confirmador (está seguro?) y enviar vía AJAX la llamada a borrar el producto; Podemos cerciorarnos además que quien de la orden esté dentro de una sesión; Podemos agregar un token contra “Cross Site Request Forgery”, entre otros.

Agregar un Producto (GET /nuevo-producto)

Finalmente, la funcionalidad de agregar productos.

La primera idea es que la función asociada a la ruta, exports.create, nos arroje un html con los campos en blanco:

• /controllers/producto.js

exports.create = function (req, res, next) {
  return res.render('show_edit', {title: 'Ver Producto', producto: {}})
}

Eso fue sencillo. Quisieramos agregar un link a esta misma página en la página de inicio:

• /views/index.jade

p
  a(href='/nuevo-producto') Nuevo Producto

Y la función de controlador exports.create debe ser modificada, crearemos un desvío según el metodo HTTP que ocupemos (GET o POST)

exports.create = function (req, res, next) {
  if (req.method === 'GET') {
    return res.render('show_edit', {title: 'Nuevo Producto', producto: {}})
  } else if (req.method === 'POST') {
    // Obtenemos las variables y las validamos
    var nombre      = req.body.nombre       || ''
    var descripcion = req.body.descripcion  || ''
    var precio      = req.body.precio       || ''

    // Validemos que nombre o descripcion no vengan vacíos
    if ((nombre=== '') || (descripcion === '')) {
      console.log('ERROR: Campos vacios')
      return res.send('Hay campos vacíos, revisar')
    }

    // Validemos que el precio sea número
    if (isNaN(precio)) {
      console.log('ERROR: Precio no es número')
      return res.send('Precio no es un número !!!!!')
    }

    // Creamos el documento y lo guardamos
    var producto = new Producto({
        nombre        : nombre
      , descripcion   : descripcion
      , precio        : precio
    })

    producto.save(onSaved)

    function onSaved (err) {
      if (err) {
        console.log(err)
        return next(err)
      }

      return res.redirect('/')
    }
  }  
}

Podemos hacer algunas pruebas:

Y eso sería todo por este tutorial. Insisto, se pueden hacer muchas cosas más, pero el objetivo es introducir al lector en estas tecnologías. Personalmente hubiese hecho algún trabajo para manejar los errores y devolver un error 500, desarrollo de usuarios y sesiones, más javascript de cliente y otros. Para el futuro. Muchas gracias.

Todo el código lo pueden encontrar en el repositorio: herman-mongoose-suggestion,

Autor de éste Artículo

Herman Junge, Chileno. Aspirante a Programador Zen. Ingeniero en Geekli.st, donde hace malabarismo en el stack NodeJS, MongoDB y Redis, entre otras tecnologías, alternando features tanto de front, como de back-end. En sus ratos libres reune energías para entender como las maquinas pueden aprender y ayudarnos en la recopilación y creación de conocimiento.

Twitter: @hermanjunge
Geekli.st: http://geekli.st/hermanjunge

Mediasmart es una empresa joven que soluciona problemas complejos de publicidad móvil. Es una compañía pequeña con grandes oportunidades de crecimiento. Empresa con gran respaldo y un gran lugar para trabajar con ventajas como el teletrabajo, con grandes profesionales y herramientas de vanguardia.
Mediasmart busca candidatos para ampliar su departamento de tecnología.  Las responsabilidades serán trabajar en nuestros productos manteniendo y expandiendo sus funcionalidades, mejorando su usabilidad a través de casos de prueba y, dependiendo de tus habilidades trabajar en nuestro SDK móvil o mejorar nuestra interfaz backbone.js

Capacidades

Mediasmart busca profesionales con experiencia en sistemas distribuidos basados en event model programming. Experiencia en Ruby EventMachine, Python Twisted/Tornado o Erlang. Lo ideal es contar con experiencia en Node.js. Si no tienes experiencia en ninguno de estos, como mínimo deberás tener experiencia en start ups, y disposición para programación creativa con contribuciones a la escena del “open source”.

• Experiencia en JavaScript, de manera ideal Node.js. Coffescript es un extra
• Experiencia en Event Driven Programming
• Conocimiento en NoSQL. Conocimientos de administración, Membase o Couchbase es un extra
• Conocimiento del protocolo y programación en Memcached
• Experiencia en nginx para utilización y configuración. Experiencia en programacia de módulos en Lua para nginx es un extra
• Experiencia de desarrollo de software en Objective C para iOS es un extra
• Conocimiento practico de ambientes de desarrollo para Android. Contar con una aplicación escrita para Android es un extra
• Experiencia de trabajo altamente efectivo en equipos geográficamente dispersos
• Experiencia en el desarrollo de un Ad Server es un extra
• Experiencia en entrega de software comercial para móviles

Otras Habilidades

• Excelentes habilidades de comunicación tanto escritas como orales
• Habilidades para buena organización y habilidades para trabajo efectivo en equipos
• Fluidez en Ingles y Español
• Fluidez en el manejo de programas de oficina ( Word, Excel, etc… ) y sistemas operativos modernos ( Mac OS X de preferencia )

Los candidatos por favor aplicar enviando enlaces de su cuenta GitHub o proyectos personales a el correo electrónico: info@mediasmart.es

Descargar oferta laboral: Link

Veamos todas las herramientas necesarias aplicadas en cada implementación para cada una de estas tecnologías.

Este es un pequeño ejemplo .NET de un HttpHandler con manejo asincrónico y para su ejecución se utilizó EasyNetQ.

using System;
using System.Threading;
using System.Threading.Tasks;
using System.Web;

namespace TestHttpHandler
{
    public class TimerHandler : IHttpAsyncHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            throw new InvalidOperationException("This handler cannot be called synchronously");
        }

        public bool IsReusable
        {
            get { return false; }
        }

        public IAsyncResult BeginProcessRequest(HttpContext context, AsyncCallback callback, object state)
        {
            var taskCompletionSouce = new TaskCompletionSource<bool>(state);
            var task = taskCompletionSouce.Task;

            var timer = new Timer(timerState =>
            {
                context.Response.Write("OK");
                callback(task);
                taskCompletionSouce.SetResult(true);
            });
            timer.Change(1000, Timeout.Infinite);

            return task;
        }

        public void EndProcessRequest(IAsyncResult result)
        {
            // nothing to do
        }
    }
}

De lo que se puede ver nos lleva algún tiempo el poder desarrollar un servidor sin bloqueos lo cual es nativo en una servidor en Node.js

var http = require('http');

http.createServer(function (req, res) {
    setTimeout(function () {
        res.writeHead(200, { 'Content-Type': 'text/plain' });
        res.end('OK');
    }, 1000);
}).listen(1338);

console.log('LongRunningServer is at http://localhost:1338/');

Primero en Node.js la implementación necesita menos código y en tiempo de ejecución no es necesario de herramientas de terceros para poder ejecutarlo.

LinkedIn realizó el anuncio de su migración de Ruby on Rails hacia Node.js, todo su backend fue actualizado hacia esta tecnología.

Las ventajas que indican son:

• Mucho mejor rendimiento y reducción en la carga de la memoria, funcionando hasta 20x mas rápido que en otros escenarios.
• Lo programadores pueden aprovechar sus habilidades en JavaScript
• Los equipos de BackEnd y FrontEnd móvil pueden ser combinados en un conjunto único.
• Se reducen de 30 a 3 servidores, dejando capacidad suficiente para 10x niveles concurrentes de utilización de recursos.
• Los desarrolladores se pueden enfocar mas en la creación de la aplicación y no en problemas externos.

Fuente: High Scalability

La conferencia Internacional Node.JS Italia en su segunda edición se llevará a cabo en Brescia  a partir del 10 de Noviembre. Los tickets se encuentran a la venta en el sitio web del evento http://nodejsconf.it/#secIscrizione.

Además el evento incluye dos workshops el día 9 de Noviembre uno con nivel principiante en Node.JS dictado por Golo Roden y el segundo con nivel avanzado dictado por CleanCode ( Gabriele Lana – Federico Galassi ) más info de estos talleres los pueden encontrar en http://nodejsconf.it/#secWorkshop.

Para el ciclo de conferencia aún se encuentran receptando Papers el objetivo principal es que la comunidad aporte con su experiencia en Node.JS NodeDublin ofrece 5 tickets con grandes descuentos para los participantes Italianos al participar en la conferencia.

Para más info de Node.JS Brescia pueden seguir su cuenta en Twitter  @nodejsconfit y en Facebook https://www.facebook.com/nodejsconf.

NodeHispano medio oficial informará todo lo sucedido en el evento

Antes de nada describamos socket.io

Socket.io es una librería que nos permite manejar eventos en tiempo real mediante una conexión TCP y todo ello en JavaScript. Es realmente potente y podemos hacer todo tipo de aplicaciones en tiempo real. Hay muchos ejemplos de chat (que puede ser lo más llamativo) por ahí. Pero yo quiero hacer algo mucho más sencillo, para que comprender su funcionamiento lleve el menor tiempo posible.

• Añadiendo socket.io al proyecto:

Si tenemos instalado Express.js ejecutamos el comando express socketexample y nos creará un directorio con un proyecto básico que podemos ejecutar entrando en el directorio cd socketexample y ejecutándolo node app.js

Ya tenemos nuestro proyecto express, ahora vamos a instalar Socket.io con npm install socket.io.

Antes de importarlo en nuestro proyecto necesitamos ajustar un poco el archivo app.js que nos ha creado express para hacer que socket.io escuche en el mismo puerto que lo hace express, para eso guardamos el servidor así:

var server = http.createServer(app).listen(app.get('port'), function(){ console.log("Express server listening on port " + app.get('port')); });

Y ahora sí importamos socket.io y lo iniciamos con `var io = require(‘socket.io’).listen(server);“

Debe quedar así:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);

var server = http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

var io = require('socket.io').listen(server);

Ya sí que tenemos el proyecto preparado para usar socket.io por parte del servidor.

• Usando socket.io en el servidor y cliente.

Ya tenemos socket.io en el proyecto, vamos a usarlo en el servidor y en el cliente.

Para usar socket.io en el servidor debemos usar el objeto io. Socket.io se basa en eventos, pero para manejar estos eventos primero debemos crear una conexión entre el servidor y el cliente con el siguiente código: io.sockets.on('connection', callback(socket));

Este socket maneja la conexión cliente-servidor y nos ofrece las dos propiedades con las que vamos a trabajar, on (escucha eventos) y emit (emite eventos), aunque haya más como broadcast, set, of, volatile para temas más concretos.

Empecemos:

io.sockets.on('connection', function(socket){
  socket.emit('connected'); 
  //Evento creado por nosotros se puede llamar 'pepito'
});

extends layout

block content
  h1= title
  #disconected
    p Desconectado!
  #connected.hide
    p Conectado!
  input(type='button', value='Enviar pulsación')

  script
    //#1 Declaramos el objeto socket que se conectará en este caso a localhost
    var socket = io.connect('http://localhost');

    //#2 Función que muestra un mensaje u otro, dependiendo de la conexión.
    function toggle(){
      $("#disconected").toggleClass("hide");
      $("#connected").toggleClass("hide");
    }

    //#3 Si estamos conectados, muestra el log y cambia el mensaje
    socket.on('connected', function () {
      console.log('Conectado!');
      toggle();
    });

    //#4 Si nos desconectamos, muestra el log y cambia el mensaje.
    socket.on('disconnect', function () {
      console.log('Desconectado!');
      toggle();
      });

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

#disconected p {
	color: red;
	background-color: rgba(200, 0, 0, 0.4);

}

#connected p {
	color: green;
	background-color: rgba(0,200,0,0.4);
}

.hide {
	display: none;
}

• #1

Una vez hemos declarado el objeto socket, con el podemos recibir eventos consocket.on('evento', callback); y emitirlos con socket.emit('evento', data);

• #2

Una simple función que usa jquery para mostrar u ocultar el mensaje de conectado o desconectado.

• 3#

Escuchamos continuamente hasta que recibamos el evento creado por nosotros en el servidorserver.js y una vez recibido en el callback llamamos a la función creada en el punto 2 para cambiar el mensaje.

• 4#

Permanece escuchando hasta que se desconecte, una vez desconectado volvemos a cambiar el mensaje indicando que estamos desconectados.

Si ejecutas el proyecto ahora y accedes a localhost:3000, verás que el mensaje aparece en verde. Corta el servidor con Ctrl+C y verás que el mensaje ha cambiado a desconectado. Vuelve a encenderlo sin recargar la página y comprueba que vuelve a verde.

• Emitiendo eventos desde el cliente al servidor y contestar con datos

Ahora vamos a poner el botón que emitirá el evento, he utilizado un simpleimput(type='button', value='Enviar click')#click con la id click para capturar con jquery cuando se pulsa el elemento con esa id.

Al pulsarlo llamamos a socket.emit('click'); con jQuery y el servidor nos responderá con el evento otherClick.

Mejor veamos el código del cliente y del servidor.

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

//Declaramos una variable con el número de clicks.
var clicks = 0;

app.get('/', routes.index);

//Asignamos a server la creación del servidor http.
var server = http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

//Importamos socket.io utilizando el servidor creado anteriormente.
var io = require('socket.io').listen(server);

//Iniciamos la conexión.
io.sockets.on('connection', function(socket){
  //Emitimos nuestro evento connected
  socket.emit('connected');

  //Permanecemos a la escucha del evento click
  socket.on('click', function(){
    //Sumamos el click
    clicks++;

    //Emitimos el evento que dirá al cliente que hemos recibido el click
    //y el número de clicks que llevamos
    socket.emit('otherClick', clicks);
  });
});

extends layout

block content
  h1= title
  #disconected
    p Desconectado!
  #connected.hide
    p Conectado!
  h2 Has pulsado 0 veces!
  input(type='button', value='Enviar pulsación')#button

  script
    //#1 Declaramos el objeto socket que se conectará en este caso a localhost
    var socket = io.connect('http://localhost');

    //#2 Función que muestra un mensaje u otro, dependiendo de la conexión.
    function toggle(){
      $("#disconected").toggleClass("hide");
      $("#connected").toggleClass("hide");
    }

    //#3 Si estamos conectados, muestra el log y cambia el mensaje
    socket.on('connected', function () {
      console.log('Conectado!');
      toggle();
    });

    //#4 Si pulsas el botón, envía el evento click
    $('#button').click(function(){
      socket.emit('click');
      });

    //#5 El servidor nos responde al click con este evento y nos da el número de clicks en el callback.
    socket.on('otherClick', function(clicks){
      console.log('Clicks: '+clicks);
      $('h2').replaceWith('<h2>Has pulsado '+clicks+' veces!');
      });

    //#6 Si nos desconectamos, muestra el log y cambia el mensaje.
    socket.on('disconnect', function () {
      console.log('Desconectado!');
      toggle();
      });

En el servidor escuchamos el evento click, en el callback del evento sumamos un click a la variable y emitimos que hemos recibido un click y mandamos junto al evento el número de clicks.

En el cliente recibimos el evento otherClick y el número de clicks en el callback y los mostramos haciendo uso de jQuery.

Ejecutamos el servidor y vemos el funcionamiento.

• Por último…

Si quieres, puedes poner un log en el callback del evento click en el server y comprobar que al pulsar el botón en el server se imprime.

Dejo el código en Github del proyecto completo y os animo a que añadáis mejoras para aprender a usar Socket.io con la práctica.

Autor de éste Artículo

Francisco López (@donflopez), webapp developer. Especializado en Node.js, Express.js, MongoDB y Socket.io. Localizable en Github,Twitter o en el blog donde actualmente escribe Tumblr.

Con GitMoon podemos verificar cuantos usuarios se encuentran siguiendo determinado proyecto, con lo cual los desarrolladores obtienen una mayor visibilidad de su trabajo colocado en GitHub al convertirlo en un asunto social ya que además podemos interactuar entre todas las personas relacionadas al proyecto open-source de nuestro interes.

En esta primera versión GitMoon ademas utiliza la información almacenada en npm obteniendo aún mas detalles relevantes de todos los proyectos.