Práctica 3: Utilizando Express

Objetivos

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

Desarrollar una aplicación web que resuelva un problema simple 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.

IMPORTANTE

Para esta tarea de programación, las y los estudiantes deben completar todo el trabajo de manera independiente y no tienen permitido utilizar herramientas asistidas por IA, como GitHub Copilot, ChatGPT, Gemini, u otras plataformas similares, para generar código automáticamente. El uso de estas herramientas de IA socava el proceso de aprendizaje y viola las políticas de integridad académica. El propósito de esta tarea es evaluar tu comprensión y aplicación de los conceptos cubiertos en el curso. El incumplimiento de estas directrices puede resultar en sanciones académicas, que incluyen, entre otras, una calificación más baja.

Si tienes alguna pregunta sobre la actividad o necesitas aclarar algún concepto, no dudes en visitar a tu profesor durante el horario de asesoría. Confía en tu propio conocimiento, en los materiales del curso y en los recursos autorizados proporcionados por el profesor.

Descripción de la actividad

Esta práctica debe ser elaborada de manera individual.

Crea un directorio llamado practica3 y dentro de este crea un subdirectorio llamado views. En estos directorios deberás colocar todos los archivos requeridos para esta práctica.
Dentro del directorio practica3 instala los módulos de express y ejs (Embedded JavaScript Templating). En la terminal teclea:
```
npm install express ejs
```

Crea los siguientes tres archivos con los contenidos correspondientes y colócalos en los directorios indicados:

Archivo: practica3/app.mjs

import express from 'express';

const app = express();
const port = process.env.PORT ?? 8080;
const ip_address = process.env.C9_HOSTNAME ?? 'localhost';

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.redirect('/hola');
});

app.get('/hola/:nombre?', (req, res) => {
  const nombre = req.params.nombre ?? 'Mundo';
  res.render('hola', { nombre });
});

// Página de recurso no encontrado (estatus 404)
app.use((req, res) => {
  const url = req.originalUrl;
  res.status(404).render('not_found', { url });
});

app.listen(port, () => {
  console.log('Servidor escuchando en: '
    + `http://${ ip_address }:${ port }`);
});

Archivo: practica3/views/hola.ejs

<!DOCTYPE html>

<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Hola</title>
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
    <header class="w3-container w3-indigo">
      <h1>Práctica 3</h1>
    </header>
    <div class="w3-container w3-xlarge">
      <p>
        &#9786; <!-- Carita feliz -->
        ¡Hola, <%= nombre %>!
        &#9785; <!-- Carita triste -->
      </p>
    </div>
    <hr>
    <footer class="w3-container w3-center w3-small">
      &copy; por Yelena Belova (A01801081)
    </footer>
  </body>
</html>

NOTA: En lugar de los datos que están en el pie de página (Yelena Belova) coloca tu información como autor de la práctica.

Archivo: practica3/views/not_found.ejs

<!DOCTYPE html>

<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Not Found</title>
    <link rel="stylesheet"
          href="https://www.w3schools.com/w3css/4/w3.css">
  </head>
  <body>
    <header class="w3-black w3-container">
      <h1>404 Not Found</h1>
    </header>
    <div class="w3-container w3-xlarge">
      <p>
        ¡Ups! Recurso no encontrado:
        <br>
        <span class="w3-xxxlarge">
          &nbsp;
          &#9758; <!-- Dedo índice apuntando
                       hacia la derecha de lado. -->
        </span>
        <code><%= url %></code>
      </p>
    </div>
  </body>
</html>

Corre el servidor de la aplicación web y verifica que se pueda utilizar correctamente. En la terminal y dentro del directorio practica3 teclea:
```
nodemon app.mjs
```
En un navegador abre el URL que aparece en la salida del programa.

Visita las siguientes ligas en tu navegador para verificar que funcione correctamente:
- url-del-servidor/
- url-del-servidor/hola
- url-del-servidor/hola/Todos
- url-del-servidor/inexistente
Salvo la última liga, la página resultante debe ser similar a la siguiente:
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 el siguiente (en este caso n=13):

url-del-servidor/conway/13

la página web devuelta debe ser similar a la siguiente:
Verifica que la página resultante sea HTML5 válido utilizando el Servicio de Validación de W3C.

¿Qué se debe entregar?

El archivo app.mjs debe comenzar con un comentario que contenga el título de la práctica, la fecha y los datos personales del autor (nombre y matrícula). Por ejemplo:

/*----------------------------------------------------------
 *
 * Práctica 3: Utilizando Express
 * Fecha: 26 de marzo, 2025
 * Autora: A01801081 Yelena Belova
 *
 *----------------------------------------------------------*/

Crea un archivo comprimido TAR GZ o ZIP con el contenido completo del directorio practica3. El archivo resultante se debe llamar practica3.tar.gz o practica3.zip.

Instrucciones para subir archivo

Para entregar el archivo practica3.tgz, ingresa los siguientes datos:

Solicitar NIP

La fecha límite es el miércoles 26 de marzo.