Backend

Instalaciones y librerías usadas

El lenguaje usado fue javascript, usado en un entorno de desarrollo de node js, las
instalaciones usadas mediante el comando “npm install” son las siguientes:
● dotenv : Configurar variables de entorno, con el fin de proteger las credenciales de
acceso a la base de datos.
● express : Para la creación del web server.
● cors: Controlar el acceso a la api (complementa a express)
● mysql2: Librería que permite usar la base de datos mysql desde node js.

Código
Los directorios poseen la siguiente estructura:

En detalle:
● app.js: Archivo principal del backend.
● models: archivo que contiene todo lo necesario para la creación del servidor
(server.js)
● public: Donde se encuentra la página
● controller: administra funciones que serán usadas por las rutas.
● router: administra las rutas.
Si bien parece innecesario tener solo un archivo por directorio, esto facilita la escalabilidad
del código.
Dentro del código las funciones a destacar serían:
● Creación de la conexión a la base de datos (con el uso de las variables de
entorno).

● Peticiones a la base de datos (se usan constantes para evitar redundancia en

las peticiones).

● Las rutas que poseerá el servidor.

● El servidor creado como clase

Aquí es donde se llaman todas las funciones creadas para el funcionamiento

correcto del servicio, en este caso se usó un middleware con el fin de desplegar la
aplicación del cliente, ya que en heroku se requería usar alguna herramienta
adicional, pero el front fue desarrollado por separado, este paso solo fue con el fin
de su despliegue.
 Frontend
Visualización

Código
Según lo que se indica en los requisitos, el código debía ser hecho en vanilla javascript, eso
lo entendí como javascript puro (sin node u otra cosa). Por lo que el código se encuentra en
un único archivo.

Explicación de las funciones:

● Función para realizar solicitudes, recibe de parámetro el texto a agregar.
○ /completa Lista de todos los items.
○ /busqueda/:termino Búsqueda por palabra.

● Creacion de vista inicial

Corresponde al cascarón del cliente, en el index.html se incluye todo lo que estara estatico
en la pagina.

● Creación de la Card de producto.

Se genera por código el elemento html que contendrá las card de los productos, en conjunto
con un marcador para el botón del carro de compras.
 ● Buscador, este permite buscar tanto apretando la lupa como apretando ‘enter’
al escribir.

● Se agrupan las constantes y variables que se usarán.

● Obtener lista con todos los productos

En este segmento, se aprovecha de guardar una variable que posee la totalidad de los
objetos alojados en la base de datos, de esta forma se puede utilizar sin problemas en las
funciones del carro.
 ● Obtener lista con resultados de búsqueda

Se reutiliza la función para mostrar los productos, pero se modifica la url de la solicitud http
que se encuentra en obtenerDatosServidor()

● Obtener lista por categoría

Se genera la vista en base a su categoría, eliminando cualquier vista previa.

● Función para agregar productos al carro.

Se utiliza como referencia un atributo previamente asignado al crear la card del producto.
 ● Render Carro

Como su nombre indica, se encarga de generar el elemento html del carro de compras,
incluyendo las actualizaciones de los productos que muestra, y sus botones.

● Borrar productos

Función llamada a través del botón creado en renderCarro(), esta elimina un producto de la
lista.
● Vaciar Carro

Se resetean los valores guardados en el carro de compras mediante un evento incluido

dentro del carro.
● Agrupar funciones necesarias para que funcione la pagina, y se llaman
posteriormente.