Práctica 1: Node.js - TinaTabo/2020-2021-LTAW-Practicas GitHub Wiki

Portada

Contenidos

Documentación Técnica

Requisitos para utilizar esta fantástica tienda:

  • S.O: Windows 10, Ubuntu o Mac
  • Programas: Visual Studio Code, Navegador Firefox, Nodejs(Versión 14.15.5)

Back-end

Se ha realizado la implementación de un servidor web utilizando nodejs, de forma que dicho servidor sea capaz de servir correctamente archivos html, css, javascript e imágenes y en caso de solicitarse algún recurso no disponible, generar una página html de error.
El código utilizado para ello se estructura de la siguiente forma:

  1. Importación de los módulos http, fs y url.
  2. Definición del puerto a utilizar, en este caso el puerto 9000 (Indicado en las especificaciones)
  3. Creación del servidor, el cual es capaz de manejar peticiones(req) y respuestas(res)
    3.1. Obtención de la url de la petición y parseo de la misma para obtener el pathname del recurso solicitado.
    3.2. Dependiendo del pathname, se obtiene el nombre del fichero solicitado.
    3.3. Obtención de la extensión del fichero solicitado.
    3.4. Lectura del fichero solicitado, dándole la forma: ./fichero.extensión
    3.5. Definición de la función para la lectura del fichero, en este caso se utiliza lectura asíncrona, ya que mejora el rendimiento para este tipo de servidores web.
    • Definición de los distintos tipos de MIME (Extensiones multipropósito de Correo de Internet) utilizados por la web de la tienda.
    • Generación de la respuesta a la petición. Si todo funciona correctamente se obtiene una respuesta 200 OK, y si se produce un error se obtiene una respuesta 404 Not Found. Con cada respuesta se generará la página html correspondiente.
    • La respuesta se envía y la petición termina.
  4. Activación del servidor en el puerto especificado (Puerto 9000)

NOTA: En el desarrollo del código se definen mensajes de control para poder comprobar en la ejecución del terminal que va ocurriendo en la ejecución del mismo (comprobar el tratamiento a las distintas peticiones y sus correspondientes respuestas).

A continuación puede observase el código anteriormente mencionado, llamado tienda.js (Como indica la especificación):

//-- Servidor de mi tienda de música.
const http = require('http');
const fs = require('fs');
const url = require('url');

//-- Puerto
const PUERTO = 9000

//-- Crear el servidor. Por cada petición recibida
//-- se imprime un mensaje de control en el terminal
const server = http.createServer((req, res) => {
    console.log(" ");
    console.log("----Petición recibida----");
    console.log(" ");
    
    //-- Obtener y parsear la url de la petición
    var myURL = url.parse(req.url, true);
    console.log("Recurso solicitado (URL): " + req.url);
    console.log("Recurso: " + myURL.pathname);

    //-- Dependiendo del pathname, se define el fichero
    //-- con el que se responderá la petición

    //-- inicializamos el fichero vacío
    var fich = "";

    //-- Obtenemos el fichero correspondiente.
    if(myURL.pathname == '/'){
        fich += "/tienda.html"; //-- Página principal de la tienda
    }else{
        fich += myURL.pathname; //-- Otro recurso.
    }
    console.log("Fichero a devolver: " + fich);

    //-- Obtenemos el tipo de fichero para saber qué devolver al cliente.
    fich_type = fich.split(".")[1]; //-- Extension del archivo.
    fich = "." + fich; //-- Leer el archivo.
    //-- Comprobamos los parámetros obtenidos por el terminal
    console.log("Nombre del Fichero: " + fich);
    console.log("Tipo de Fichero: " + fich_type);

    //--Lectura asíncrona (mejor para servidor web) del fichero.
    //-- y obtención de la respuesta del servidor.
    fs.readFile(fich, function(err, data){

        //-- Definir mime para el tipo de archivo html.
        var mime = "text/html"

        //-- Definir mime para el tipo de imágenes
        if(fich_type == 'jpg' || fich_type == 'png'){
            mime = "image/" + fich_type;
        }

        //-- Definir mime para el css
        if (fich_type == "css"){
            mime = "text/css";
        }

        //-- Fichero no encontrado --> Devolver página html de error.
        if ((err) || fich == "./error.html"){
            //-- Generar respuesta de error.
            res.writeHead(404,{'Content-Type': mime})
            console.log("Respuesta: 404 Not Found")
        }else{
            //-- No hay error --> 200 OK
            //-- Generar respuesta.
            res.writeHead(200, {'Content-Type': mime});
            console.log("Respuesta: 200 OK")
        }
        res.write(data);
        res.end();
    });
});

//-- Activar el servidor
server.listen(PUERTO);

console.log("Servidor Activado!. Escuchando en el puerto " + PUERTO);

Front-end

El front-end de la web de la tienda está compuesto por un conjunto de paginas html con sus correspondientes css, concretamente, se ha diseñado un html y un css para la página principal y para cada una de las páginas secundarias. Para las páginas correspondientes a cada uno de los productos se ha creado un html para cada producto y un css para el conjunto de todos ellos.

Mejoras

En la especificación se pedía que la tienda debería tener una pagina principal y al menos cuatro productos con sus respectivas páginas. En esta tienda se puede encontrar en la pagina principal el acceso a 5 categorías de instrumentos, los cuales acceden a las paginas con los productos correspondientes a cada categoría y cada producto tiene su pagina correspondiente.

Manual de Usuario - ¡Bienvenido a The Ultimate Music Shop!

Para ejecutar e interactuar con la tienda de música, lo primero que se debe hacer es descargar en nuestro ordenador la carpeta P1 que encontrarás en https://github.com/TinaTabo/2020-2021-LTAW-Practicas/tree/main/P1(Puedes omitir las carpetas S2, S3, S4 y S5, no las vamos a utilizar) y guardarlos en una única carpeta:

ImgCarpeta

Una vez descargados, abrimos un terminal localizado en la dirección donde hemos guardado la carpeta con los archivos de la tienda de música, y ejecutamos la instrucción:

node tienda.js

¡Ya hemos arrancado el servidor de la tienda!
Ahora para poder usarla, abrimos el navegador Firefox, buscamos la url: localhost:9000 y... ¡TACHÁNNN!:

ImginicioTienda

Ya podemos utilizar la fabulosa Tienda The Ultimate Music Shop, ¡No te gastes mucho!:stuck_out_tongue_winking_eye:

Licencia

Licencia