• Descripción
  • Código
  • Mejoras
• Visual
• Licencia
• Créditos

En esta práctica se ha realizado una implementación de la práctica 1 disponible en este repositorio. Debido a errores en el código, la práctica no funciona, por lo que se explicarán las diferentes funciones o partes importante de los archivos a continuación.

Para la realización de la tienda, Vinilo Verás, se ha programado en Javascript, HTML y CSS.

En el caso de que funcionara, sería necesario descargar los archivos que se encuentran en la carpeta P2, sin ser necesario descargar el resto de carpetas internas, a excepción de la llamada "Imágenes", que si habrá que descargarla. Después, habrá que lanzar el servidor mediante el comando node tienda.js, que escucha de manera predefinida en el puerto 9000, para ver lo que ocurre, será necesario poner en el navegador http://localhost:9000/tienda.html o http://127.0.0.1:9000/tienda.html

El proyecto tiene las imágenes de manera online, a excepción de los tres productos a elegir, que se ha decidido meterlos de manera local, para demostrar que cualquiera de las dos maneras serían válidas para su funcionamiento.

Los archivos que se tienen en la práctica son:

• tienda.js -> programa principal
• tienda.html -> fichero html donde se encuentra la tienda
• tienda.css -> estilo creado para tienda.html
• tienda.json -> información del programa
• cliente.js -> programa js para la búsqueda de productos
• harry.html -> fichero html donde se encuentra el producto 1
• shawn.html -> fichero html donde se encuentra el producto 2
• atl.html -> fichero html donde se encuentra el producto 3
• info.html -> fichero html con información
• error.html -> fichero html al que redirigen las opciones no implementadas.
• carrito.html -> fichero html para finalizar la compra
• form-login.html -> fichero html para registro de usuario
• login-correcto.html -> fichero html usuario correcto
• login-error.html -> fichero html usuario incorrecto
• form-pedido.html -> fichero html para pedido aceptado
• form-pedido-error.html -> fichero html para pedido no aceptado con botón para volver a la página principal

• Se tiene un array con los nombres de los usuarios que están registrados.

//-- REGISTROS EN LA WEB
let registrados = [];
console.log('Usuarios registrados:');
usuarios.forEach((element, index) => {
  registrados.push(element.usuario);
  console.log("User " + (index + 1) + '- ' + element.usuario);
});

• Disponibilidad de los productos, con su nombre, el precio y el stock que se tiene.

//-- DISPONIBILIDAD
let lista =[];
let disponibles =[];
console.log("Productos Disponibles");
tienda[0]["productos"].forEach((element, index) => {
  console.log("Nombre" + (index + 1) + ": " + element.nombre + ", Precio:" + element.precio + ", Stock:" + element.stock);
  disponibles.push([element.nombre, element.precio, element.stock]);
  lista.push(element.nombre);
});

Funciones creadas para la implementación del código:

• Función para las páginas de cada uno de los productos, basándose en el array de disponibilidad mencionado anteriormente

//-- Producto 
var pro;
function productPage(pro, contenido) {
  contenido = contenido.replace('nombre', disponibles[pro][0]);
  contenido = contenido.replace('precio', disponibles[pro][1]);
  contenido = contenido.replace('stock', disponibles[pro][2]);
  return contenido;
}

• Obtención del usuario que será utilizado

//-- Usuario
function getUser(req) {
  const cookie = req.headers.cookie;
  if (cookie) {
      let pares = cookie.split(';');
      pares.forEach((element) => {
          let [nombre, valor] = element.split('=');
          if (nombre.trim() === 'usuario'){
            usuario = valor;
          }
      });
      return usuario || null;
  }
}

• Añadir cada producto que se quiere al carrito.

//-- Añadir a carrito
function addCart(req, res, producto) {
  const cookie = req.headers.cookie;
  if (cookie) {
    let pares = cookie.split(';');
    pares.forEach((element) => {
      let [nombre, valor] = element.split('=');
      if (nombre.trim() === 'carrito'){
        res.setHeader('Set-Cookie', element + '- ' + producto);
      }
    });
  }
}

• Uso del carrito, en el que se indica cada uno de los productos que han sido seleccionados.

//-- Carrito
function Cart(req) {
  const cookie = req.headers.cookie;
  if (cookie) {
    let pares = cookie.split(';');
    let carrito;
    let harry = '';
    let harry_stock = 0;
    let shawn = '';
    let shawn_stock = 0;
    let atl = '';
    let atl_stock = 0;

    pares.forEach((element) => {
      let [nombre, valor] = element.split('=');
      if (nombre.trim() === 'carrito'){
        productos = vale.split(':');
        productos.forEach((producto) => {
          if(producto == 'harry'){
            if (harry_stock == 0){
              harry = disponibles[0][0];
            }
            harry_stock += 1;
          } else if(producto == 'shawn'){
            if (shawn_stock == 0){
              shawn = disponibles[1][0];
            }
            shawn_stock += 1;
          } else if(producto == 'atl'){
            if (atl_stock == 0){
              atl = disponibles[2][0];
            }
            atl_stock += 1;
          }
        });
        carrito = harry + ' - ' + harry_stock + ', ' + shawn + ' - ' + shawn_stock + ', ' + atl + ' - ' + atl_stock;
      }
    });
    return carrito || null;
  }
}

En este punto se crea el servidor, será necesario que escuche en el puerto 9000. Con let myURL = new URL(req.url, 'http://' + req.headers['host']); se obtiene el recuso que será comparado para elegir qué página html y qué funciones se llevarán a cabo:

• / o /login -> Servirá para mirar si el usuario está registrado o no, en el caso de que si, devolverá la página principal, denominada como MAIN, sino, se lanzará la página para el registro de este, denominada LOGIN.
• /procesar-> Se procesa el registro del usuario, dando la posibilidad de que sea correcto o erróneo.
• /comprar -> Añadir los productos al carrito de la compra.
• /finalizar -> La compra sería aceptada.
• /productoX -> Siendo 'X' cada uno de los número correspondiente a los diferentes productos que se tienen (1, 2 o 3). Mostraría cada contenido.
• /productos -> Actualización del archivo .json
• /buscar -> Implementación de la búsqueda que realiza el usuario.
• Para otros recursos se lanzará la página implementada como error.

Para la implementación de la búsqueda en la caja que se encuentra en tienda.html se realiza mediante peticiones AJAX, que se llevan a cabo mediante XMLHttpRequest().

caja.oninput = () => {
    //-- Para peticiones AJAX
    const m = new XMLHttpRequest();
    m.onreadystatechange = () => {
        //-- Petición enviada y recibida
        if (m.readyState == 4){
            //-- Si OK
            if (m.status == 200){
                let productos = JSON.parse(m.responseText);
                console.log(productos);
                display.innerHTML = "";

                for (let i = 0; i < productos.length; i++) {
                    if (productos[i] == "Harry") {
                        display.innerHTML += '<a href="/harry">' + productos[i] + '</a>';
                    } else if (productos[i] == "Shawn") {
                        display.innerHTML += '<a href="/shawn">' + productos[i] + '</a>';
                    } else if (productos[i] == "ATL") {
                        display.innerHTML += '<a href="/atl">' + productos[i] + '</a>';
                    }
                    if (i < productos.length - 1) {
                        display.innerHTML += ', ';
                    }
                }
            }
        }else{
            //-- Si error
            console.log("Error en la petición: " + m.status + " " + m.statusText);
            display.innerHTML += '<p>ERROR</p>';
        }
    }
}

Las mejoras realizadas han sido implementadas en la parte de front-end, se aprecia el icono de la página, así como partes como el scroll, pero debido a errores en el programa principal no se parecian.

A continuación se muestra con imágenes cuál sería la forma en la que se verían las páginas.

• Página principal

• Producto 1

• Producto 2

• Producto 3

• Página de login:

• Finalizar compra / carrito

• Error pedido

Imágenes de títulos	Resto documentación
Todos los derechos reservados	Creative Commons by SA

• Obijuan
• mdelaosa