Ejercicios Tema 13

Ejercicio 1
En primer lugar vamos a ver cmo instalar Node.js. Para ello accedemos a la pgina web: http://
nodejs.org/

Nos aparecer una ventana como la siguiente:

Pulsando el botn install se descargar un ejecutable que siguiendo los pasos nos debera
instalar correctamente Node.js en nuestro ordenador.

Para comprobar que ha sido instalado podemos poner el siguiente comando en nuestro terminal
o ventana de comandos en windows: node -version

Este comando nos mostrar la versin de Node.js instalada. Si es as, ya podemos introducir
comandos JavaScript en nuestra consola de Node.js. En primer lugar ponemos node para que se
abra la terminal de Node.js dentro de nuestra terminal.

Despus podemos escribir comandos como: console.log("Prueba en Node.js")

Pgina 1

www.imaginaformacion.com

Imagina Formacin

Ejercicio 2
En este ejercicio vamos a hacer una calculadora a travs del navegador, de forma que
introduciendo diferentes rutas y parmetros nos devuelva el resultado, por ejemplo:

http://localhost:3000/suma?numero1=4&numero2=1 devolver 4+1 = 5

http://localhost:3000/resta?numero1=20&numero2=15 devolver 20-15 = 5

http://localhost:3000/mult?numero1=3&numero2=2 devolver 3*2 = 6

http://localhost:3000/div?numero1=10&numero2=2 devolver 10/2 = 5

Para ello, en primer lugar vamos a crear el mdulo que realiza las operaciones al igual que vimos
en teora. Este fichero se llamar operaciones.js:

function suma(a,b){
return parseInt(a) + parseInt(b);
}
function resta(a,b){
return parseInt(a) - parseInt(b);
}
function mult(a,b){
return parseInt(a) * parseInt(b);
}
function div(a,b){
return parseInt(a) / parseInt(b);
}

Por ltimo slo nos quedar aadir la funcin export para poder acceder a las
funciones creadas del mdulo

module.exports = {
suma: suma,
resta: resta,
mult: mult,
div: div
}
Ha llegado el momento de crear nuestro servidor. Lo haremos en otro fichero que llamaremos
server.js y en primer lugar contendr lo siguiente:

Pgina 2

www.imaginaformacion.com

Imagina Formacin

var http = require("http");

var url = require("url");
var operaciones = require(./operaciones');
Importamos los mdulos http para crear el servidor como vimos en la teora. Tambin
importaremos url para poder recortar la url que se ha introducido a nuestro antojo. Y por ltimo
importaremos nuestro modulo recin creado operaciones.

Una vez hecho esto, crearemos en primer lugar el esqueleto de nuestro servidor:

var http = require("http");

var url = require("url");
var operaciones = require('./operaciones');
var server = http.createServer(function (peticion, respuesta){
//TODO Comprobar la ruta introducida para saber de qu funcin se trata.
//TODO Obtener primer argumento.
//TODO Obtener segundo argumento.
//TODO Escribir la cabecera de la respuesta.
//TODO Comprobar de qu funcin se trata para realizar la operacin
correspondiente.
//TODO Escribir la respuesta que devolver cada operacin.
respuesta.end();
});

server.listen(3000, function(){
console.log("tu servidor est listo en " + this.address().port);
});

En primer lugar tenemos que obtener la url que ha sido llamada, para ello tenemos la el mtodo
parse del mdulo url. Esto crea un objeto del cual podemos obtener los parmetros que
necesitemos:

var pathname = url.parse(peticion.url, true).pathname;

var num1 = url.parse(peticion.url, true).query.numero1;
var num2 = url.parse(peticion.url, true).query.numero2;

Despus escribimos la cabecera:

respuesta.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});

Pgina 3

www.imaginaformacion.com

Imagina Formacin

Con todo preparado ya slo nos quedara aadir las funciones pertinentes:

if (pathname == "/suma") {
respuesta.write(num1 + "+" + num2
} else if(pathname == "/resta"){
respuesta.write(num1 + "-" + num2
} else if(pathname == "/mult"){
respuesta.write(num1 + "*" + num2
} else if(pathname == "/div"){
respuesta.write(num1 + "/" + num2
}

+ " = " + operaciones.suma(num1, num2));

+ " = " + operaciones.resta(num1, num2));
+ " = " + operaciones.mult(num1, num2));
+ " = " + operaciones.div(num1, num2));

El cdigo completo de nuestro servidor quedara as:

var http = require("http");

var url = require("url");
var operaciones = require('./operaciones');
var server = http.createServer(function (peticion, respuesta){
var pathname = url.parse(peticion.url, true).pathname;
var num1 = url.parse(peticion.url, true).query.numero1;
var num2 = url.parse(peticion.url, true).query.numero2;
respuesta.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
if (pathname == "/suma") {
respuesta.write(num1 + "+" + num2
} else if(pathname == "/resta"){
respuesta.write(num1 + "-" + num2
} else if(pathname == "/mult"){
respuesta.write(num1 + "*" + num2
} else if(pathname == "/div"){
respuesta.write(num1 + "/" + num2
}
respuesta.end();

+ " = " + operaciones.suma(num1, num2));

+ " = " + operaciones.resta(num1, num2));
+ " = " + operaciones.mult(num1, num2));
+ " = " + operaciones.div(num1, num2));

});
server.listen(3000, function(){
console.log("tu servidor est listo en " + this.address().port);
});

Para ejecutar el servidor nos desplazamos en el terminal hasta la carpeta en la que hemos creado
nuestros ficheros. Y ejecutamos el comando:

node server.js

Pgina 4

www.imaginaformacion.com

Imagina Formacin

Si funciona adecuadamente nos mostrar el mensaje: tu servidor est listo en 3000

Y para probarlo slo nos quedar realizar llamadas al servidor como las mostradas de ejemplo al
principio del ejercicio 2.

Ejercicio 3
En este ejercicio vamos a preparar un servidor con Express que muestre una lista de nombres
cuando llamemos a la url. De esta manera veremos cmo confeccionar de manera correcta el
manejador de rutas con Express y cmo mostrar los elementos en una lista.

En primer lugar crearemos el proyecto como vimos en teora:

$ sudo express express_ej1

Una vez creado, entramos a la carpeta de nuestro proyecto e instalamos las dependencias con:

$ cd express_ej1
$ sudo npm install

Ya tenemos listo nuestro proyecto. En primer lugar vamos a borrar ficheros que no nos sern
necesarios para nuestra aplicacin.

Primero borramos el fichero users.js de la carpeta routes y las siguientes lineas de nuestro fichero
app.js:

var users = require('./routes/users');

app.use('/users', users);

Despus de eliminar estos ficheros y lneas debera funcionar correctamente, para comprobarlo:

$ npm start

Pgina 5

www.imaginaformacion.com

Imagina Formacin

El servidor debe ponerse en marcha y acceder a el a travs del navegador con la URL localhost:
3000 y visualizar la pgina de entrada de Express.

Ahora es el momento de crear una lista de nombres con una funcin para
devolver estos nombres.

Crearemos la carpeta controllers en la raz del proyecto. Dentro de sta

crearemos el fichero Data.js:

Vamos a modificar este fichero Data.js, en l simplemente crearemos un

Array y una funcin que devuelve un Array de la siguiente manera:

var names = ["Mario", "Patricia", "Manolo", "Santi", "David", "Oscar", "Luis",

"Saul", "Autor"];
function getNames() {
return names;
}
module.exports = {
getNames: getNames
}

En segundo lugar vamos a modificar cmo se mostrar la informacin por pantalla, para ello
crearemos un fichero index.html en la carpeta views que se corresponder con nuestro fichero
swig. Tendr la siguiente forma:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Personas</title>
{% for nombre in nombres %}
{% if loop.first %}<ol>{% endif %}
<li>{{ nombre }}</li>
{% if loop.last %}</ol>{% endif %}
{% endfor %}
</head>
<body>
</body>
</html>

Como podemos observar, se realizar un bucle que imprimir un nombre en cada elemento de
una lista. Aparte, nos valemos de la variable interna del bucle loop para realizar unas acciones
especficas la primera y la ltima vez que se ejecuta el bucle.

Pgina 6

www.imaginaformacion.com

Imagina Formacin

Slo nos quedara enlazar los datos con la interfaz cuando se llame a /. Para ello tendremos que
modificar el fichero index.js de la carpeta routes. Debemos indicar que cargue nuestro fichero
index.html en con nuestro Array de nombres:

var express = require('express');

var router = express.Router();
var data = require('../controllers/Data');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { nombres: data.getNames() });
});
module.exports = router;

Por ltimo slo nos quedara indicar a nuestra aplicacin que la renderizacin se har a travs de
Swig y no de Jade como cre en un primer momento el generador.

Antes de nada debemos instalar Swig en nuestro proyecto, lo haremos con npm:

$ npm install swig

Para ello modificaremos las siguientes lineas en app.js:

// Jade
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Por las siguientes:

//Swig
var swig = require('swig');
swig.setDefaults({ cache: false });
app.engine('html', swig.renderFile);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');

Una vez hechas estas modificaciones nuestro servidor funcionar perfectamente, y devolver una
lista de nombres al introducir la url: localhost:3000

Pgina 7

www.imaginaformacion.com

Imagina Formacin

Ampliacin
Realizar las modificaciones necesarias a la aplicacin Angular de los ejercicios del tema 9,
correspondiente a la estructuracin en plantillas del listado, agregacin de elementos y vista de
elemento de una coleccin, para que actualice dicha coleccin del lado del servidor.

Se necesitarn 3 servicios en el servidor:

/api/elements/list
/api/elements/add
Nota: aprovechar la coleccin devuelta por /api/elements/list para la vista de elemento.

Nota 2: en el sistema de plantillas Swig, los bloques {% raw %} {% endraw %} permiten la

no evaluacin del contenido de dichos bloques, de tal manera que las expresiones del tipo
{{ expresion }}, puedan llegar al cliente para el correcto funcionamiento de AngularJS.

Para guardar los elementos nuevos del lado del servidor no ser necesario utilizar ningn sistema
de base de datos. Mediante una coleccin, podremos interactuar con sus elementos y mantener
los cambios durante el ciclo de vida de la instancia del servidor.

Pgina 8

www.imaginaformacion.com

Imagina Formacin