L5: Practica 2_1
- Tiempo: 2h
- Fecha: Martes, 16 de Febrero de 2021
-
Objetivos de la sesión:
- Enunciado práctica 2
- Practicar con JSON desde node
- Definir la estructura de datos de nuestra tienda (Base de datos en JSON)
- Introducción
- Práctica 2 (ESPECIFICACIONES)
- Actividades NO guiadas
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
En la práctica 1 hemos aprendido a hacer un servidor web básico con node.js, y hemos creado una tienda con páginas estáticas para comprobar que funciona correctamente
En la práctica 2 vamos a añadir mecanismos que permitan una interacción entre el cliente y el servidor. Las páginas que nos devuelva el servidor serás dinámicas, y contendrán información generada al vuelo
Ampliaremos nuestra tienda para incluir registro de usuarios, carrito de la compra, búsqueda con autocompletado y el procesamiento de la compra. Todo ello programado usando node.js
Esta es la captura de la tienda realizada por Felicidad Abad en el curso 2019-2020
Ampliar la tienda on-line de la práctica 1 para incluir las nuevas características que se indican en los siguientes apartados. Debes hacer una documentación técnica y un manual de usuario, ambos en markdown en la wiki de la práctica P2. Si haces mejoras, índicalas explícitamente en la documentación
La tienda deberá tener una base de datos implementada en el fichero tienda.json. Debe contener los siguientes datos:
-
Usuarios: Todos los usuarios registrados en la tienda. Debe haber al menos dos: el usuario root y un usuario normal. Cada usuario tiene un nombre (el que se usa para el login), un nombre real y una dirección de correo
-
Productos: Todos los productos disponibles en la tienda. Para cada producto, al menos se deberá tener la siguiente información: nombre, descripción, precio y cantidad en stock
-
Pedidos: Registro de los pedidos realizados. Cada pedido contiene la siguiente información: nombre de usuario, dirección de envío, numero de la tarjeta y una lista con los nombres de los productos comprados (Supondremos que la cantidad es siempre 1 para simplificar)
La tienda deberá tener al menos una página principal donde se muestren todos los productos disponibles (Al menos debe haber 3 productos). Cada producto tendrá su propia página donde aparecerá toda su información (que se leerá de la base de datos) y un botón para añadir al carrito de la compra
Deberá tener una página para hacer el login del usuario, y otra para hacer el procesamiento del pedido
En la tienda debe haber al menos dos usuarios: root y otro, que ya están previamente registrados y son los que usaremos para las pruebas. La primera vez que te conectas la tienda mostrará su página principal, donde estará la opción de acceder a tu cuenta (login). Si no has accedido a tu cuenta no podrás realizar ninguna compra, aunque sí navegador por ella de forma anónima
El acceso a tu cuenta se hará mediante una opción disponible en la página principal. Al acceder a esa opción se pedirá que introduzcas el nombre del usuario. Si el usuario es correcto, aparecerá la página principal y se te indicará que estás conectado como el usuario tal (por simplicidad el acceso será sólo con el nombre del usuario. Pedir un password se deja como mejora)
Se implementará un carrito de la compra donde se irán añadiendo todos los productos. Para simplificar, no habrá opción de quitar del carrito
Una vez que el usuario ya ha metido productos en el carrito, pinchará en una opción para finalizar la compra. La tienda mostrará una página con el contenido actual del carrito y un formulario para solicituar al usuario los siguientes datos adicionales: dirección de envío y número de tarjeta para realizar el pago. Una vez introducidos, la tienda confirmará que el pedido se ha realizado y almacenará este pedido en la base de datos (fichero tienda.json)
La página principal debe ofrecer la opción de buscar un producto mediante una caja de búsqueda. Al escribir 3 ó más caracteres, aparecerá un menú desplegable con las opciones posibles. Al apretar el botón de buscar se enviará esta inforamción, y el servidor devolverá una página con información sobre el producto (o ir directamente a la página del producto)
Puedes incluir las mejoras que quieras, tanto a nivel de front-end como de back-end. Deberás indicar explícitamente en la documentación exactamente qué mejoras has hecho
Estas son algunas propuestas de mejoras:
-
Autenticación con usuario y password. Dentro del fichero tienda.json se deberá incluir un campo nuevo con la clase (por simplicidad pondremos la clave en texto plano). Al pinchan en login nos pedirá el usuario y el password. Sólo podremos acceder si son válidos
-
Listado de pedidos pendientes: El usuario root tendrá la opción de poder ver los pedidos que hay pendientes
-
Gestor para introducir productos nuevos. Permitir que el usuario root pueda añadir nuevos productos mediante un formulario. Al crear uno nuevo se guardará en el base de datos
-
Control de stock: Por simplicidad en la práctica básica no se lleva control de stock: Se pueden añadir al carrito todos los productos que se quieran (el stock permanecerá a un valor siempre fijo). Como mejora puedes implementar su control: al añadir al carrito que se decremente y se almacene en la base de datos. Si el stock de un producto es 0, NO debe aparecer la opción de añadir al carrito
Ya tienes las especificaiones de la práctica, por lo que la puedes ir desarrollando por tu cuenta. Para realizarla deberás practicar y asimilar los conceptos dados en las clases de teoría. Como punto de partida puedes comenzar practicando con el formato JSON. Te propongo los siguientes ejercicios
Haz los ejemplos del 1 al 5 que vimos en la sesión de teoría: S5: JSON. Prueba los ejemplos y estúdialos. Haz cambios para probar. Deja los ejemplos que hagas en la carpeta P2/S5
Piensa sobre la estructura del fichero tienda.json. Créate un fichero inicial tienda.json que contenga al menos 3 productos, dos usuarios y un pedido. Haz un programa en node.js que abra este fichero y muestre la siguiente información:
- Número de usuarios registrados en la tienda
- Listado con los nombres de los usuarios
- Número de productos en la tienda
- Listado de los productos de la tienda
- Número de pedidos pendientes, y los detalles del pedido
Deja estas pruebas en la carpeta P2/L5
Practica con la creación de ficheros JSON. Haz un programa que lea el fichero tienda.json, que incremente el stock de todos los productos en 1 unidad y que guarde el resultado en el fichero tienda.json. Si tras ejecutarlo pruebas el programa del ejercicio 2, deberías ver que efectivamente los datos se han actualizado
Modifica el servidor de tu tienda para que al acceder al recurso /productos se muestre un listado de los productos disponibles, que se deberán leer del fichero tienda.json.
- Haz los ejercicios propuestos para familiarizarte con JSON y su manejo desde Javascript
- Piensa sobre cómo funcionará ahora la tienda: las páginas web devueltas al usuario tienen información dinámica (no basta con leer un fichero .html del servidor y devolverlo al usuario)
- Piensa en cómo organizar la tienda para que las páginas sean dinámicas
- No te agobies. Todavía hay muchas cosas que no sabemos hacer. Las veremos en las clases de Teoría
Tras finalizar la práctica P2-1, deberías saber lo siguiente:
- Entender el formato JSON
- Saber hacer ejemplos sencillos en node.js para leer ficheros JSON, procesar la información y escribirla de nuevo en fichero JSON
- Comprender cómo funciona una página dinámica que muestra información obtenida desde un fichero .json
- Juan González-Gómez (Obijuan)
- Jose María Cañas
