Laboratorio 7: Utilizando Express

Objetivos

Durante esta práctica, los alumnos serán capaces de:

Desarrollar una aplicación web sencilla utilizando el framework Express para Node.js.

Esta actividad promueve las siguientes habilidades, valores y actitudes: análisis y síntesis, capacidad de resolver problemas, creatividad, y uso eficiente de la informática y las telecomunicaciones.

Descripción de la actividad

NOTA IMPORTANTE: Las actividades de la práctica se pueden elaborar de manera individual o en parejas. El reporte de la práctica de laboratorio debe ser desarrollado de manera individual.

Si aún no lo has hecho, instala los módulos express, ejs y express-ejs-layouts de Node. Desde la terminal teclea:
```
cd
```
```
sudo npm install express
```
```
sudo npm install ejs
```
```
sudo npm install express-ejs-layouts
```
Crea una nueva aplicación web de Express llamada lab7. Teclea en la terminal:
```
~/node_modules/express/bin/express lab7
```
```
cd lab7
```
```
sudo npm install
```
Corre el servidor de la aplicación web y verifica que se pueda utilizar correctamente. En la terminal teclea:
```
node app.js
```
Visita la siguiente liga en tu navegador:

http://localhost:3000/

La salida en el navegador debe ser algo así:

Express

Welcome to Express

Abre en un editor el archivo lab7/app.js y realiza las modificaciones y/o añadiduras que se indican a continuación:


/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');
  
var expressLayouts = require('express-ejs-layouts');  

var app = express();

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

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

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/hola/:nombre?', routes.hola);

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

Abre en un editor el archivo lab7/routes/index.js y agrega al final de éste la siguiente función:

exports.hola = function (req, res) {
  var nombre = req.params.nombre || 'Mundo';
  res.render('saluda.ejs', { 'nombre': nombre, 'titulo': 'Saludos' });
};

Crea el archivo lab7/views/layout.ejs (del cual extenderán todas las páginas EJS) con el contenido que se muestra a continuación:

<!DOCTYPE html>
<!-- File: lab7/views/layout.ejs -->

<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title><%= titulo %></title>
        <link rel="stylesheet" href="/stylesheets/estilos.css"/>
    </head>

    <body>
        <h1><%= titulo %></h1>
        <%- body %>
        <hr/>
        <footer>
            Desarrollo de aplicaciones distibuidas
        </footer>
    </body>
</html>

Así mismo, crea los siguientes dos archivos, colocándolos en el directorio indicado dentro del comentario correspondiente:

<!-- File: lab7/views/saluda.ejs -->
<p>
    ¡Hola <%= nombre %>!
</p>

/* File: lab7/public/stylesheets/estilos.css */

body {
    background: #FFFFFF;
    color: #000080;
    font-family: sans-serif;
    font-size: medium;
    margin: 20px;
}

hr {
    border: 0;
    color: #B0C4DE;
    background-color: #B0C4DE;
    height: 1px;
}

table {
    border-collapse: collapse;
    border: 1px solid #000000;
    padding: 0px;
    margin-bottom: 10px;
    color: #000000;
    background: #E6E6FA;
}

td {
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

th {
    border: 1px solid #000000;
    padding: 10px;
    color: #008080;
    background: #B0E0E6;
}

li {
    color: #AAAAAA;
}

span {
    color: #094141;
}

footer {
    font-size: 70%;
    color: #B0C4DE;
    text-align: center;
}

Desde la terminal detén el servidor de la aplicación web y córrelo nuevamente:
```
node app.js
```
Visita las siguientes ligas en tu navegador para verificar que funcione correctamente:
- http://localhost:3000/hola
- http://localhost:3000/hola/Todos
Extiende esta misma aplicación web de Express para poder generar los n primeros elementos de la secuencia look-and-say de John Conway. Cuando el usuario provea un URL como este (en este caso n=15):

http://localhost:3000/conway/15

la página web devuelta debe contener la siguiente información:

Verifica que la página resultante sea HTML5 válido utilizando el Servicio de Validación de W3C.

¿Qué se debe entregar?

Para entregar tu trabajo individual, sigue las siguientes instrucciones:

Escribe el reporte de la práctica tal como se detalla en el documento Reportes de laboratorio. El nombre del archivo fuente de AsciiDoc debe ser reporte_lab7_A0MMMMMMM.txt, en donde A0MMMMMMM corresponde a tu matrícula. A partir del código fuente de AsciiDoc debes generar el archivo HTML correspondiente. Dicho archivo se debe llamar reporte_lab7_A0MMMMMMM.html. Coloca ambos archivos dentro del directorio lab7.
Crea un archivo tarball con todo el contenido del directorio lab7. Nombra a este archivo lab7.tgz. Este archivo se puede crear desde la línea de comando tecleando lo siguiente (asegúrate que te encuentres en el mismo nivel que el directorio lab7):
```
tar czf lab7.tgz lab7
```
Usando el Sistema de Entrega de Tareas Automatizado (SETA), entrega el archivo tarball.

Fecha límite: Martes, Abril 2.

Evaluación

Esta actividad será evaluada usando los siguientes criterios:

50%	Implementación de los requerimientos.
50%	Reporte de la práctica de laboratorio.
DA	El programa y/o reporte es un plagio.

Desarrollo de aplicaciones distribuidas

Laboratorio 7: Utilizando Express

Objetivos

Descripción de la actividad

Express

¿Qué se debe entregar?

Evaluación