Proyecto desafío de «Bsale»

Hace algunas semanas atrás estuve postulando a algunos trabajos como desarrollador y me contactaron desde la empresa «BSALE» para participar de su proceso de selección al puesto de Junior Full-Stack. Bueno, el desafío para poder pasar la prueba de «conocimientos» técnicos y prácticos era desarrollar un proyecto usando una base de datos que ellos disponen. Se trata de un proyecto que simula una tienda.

Preview Tienda Bsale Challenge

El repositorio de GitHub donde podemos encontrar el proyecto Fron-end es el siguiente: Repositorio y para el proyecto Back-end podemos consultar este Repositorio.

Aquí, más abajo podrá encontrar algo de documentación al respecto:

DOCUMENTACIÓN BACK-END
🧑‍💻 Desafío Bsale – Tienda
El desafío consta del desarrollo de una tienda que muestre productos obtenidos desde una base de datos experimental dispuesta por Bsale y que el desarrollador debe implementar de tal forma que pueda servir los recursos de esa base de datos dividiendo el proyecto en dos grandes partes: Front-end y Back-end.

Para instalar y ejecutar:

  1. Ejecutar en la carpeta raiz el comando: npm install
  2. Modificar las credenciales para conectarse a la Base de Datos en el archivo: src/database/config_db.js
  3. Luego ejecutar el comando de node: node src/ ó node/src/index.js

🤖 Back-end:
Tecnologías y lenguajes utilizados, principalmente son:

  • Node.js (v. 18.x) Source
  • Express.js (v. 4.x) para la generación de un servidor sobre la tecnología de Node.js Source
  • Sequelize (v. 6.x) cómo ORM para interactuar con la Base de Datos que en este caso es con el gestor MySQL. Source

Con estas tecnologías se logró crear un servidor que independiente de que cliente lo solicite (web, mobile y otros), puede acceder a la lista de productos, lista de productos por categorías, lista de categorías y categorías con la lista de los productos que contiene.

🤔 ¿Cómo funciona?
El servidor back-end dispone varios Puntos de conexión (End-points) a los cuales una aplicación puede hacer llamadas HTTP usando el verbo GET. Los puntos de conexión de esta «API» son los siguientes:

Punto de conexión (End Points)MétodoOpcionesDescripción
https://bsale.uncodigo.com/productGETMediante URL puede solicitar la página y el tamaño del resultado, así: ?page=0&size=12 ejemplo: Página 1 con 12 productos: https://bsale.uncodigo.com/product?page=0&size=12Devuelve una lista de productos en formato JSON paginados por defecto de 6 productos en total.
https://bsale.uncodigo.com/product/searchGETUtilizando parámetros de URL puede solicitar buscar un producto por su nombre usando los parámetros de esta forma: product/search?term=PALABRA ejemplo: Buscando «Papas» https://bsale.uncodigo.com/product/search?term=papasMuestra una lista de resultados en formato JSON que por defecto si no se incluye el parámetro en la URL devuelva la lista completa de productos. También se puede paginar, para eso siga el ejemplo del anterior punto de acceso (/product)
https://bsale.uncodigo.com/categoryGETPara solicitar solo debe hacer una petición HTTP con el verbo GET.Devuelve una lista completa de las categorías en formato JSON.
https://bsale.uncodigo.com/category/{idCategory}/productsGETidCategory es el identificador de la categoría que está solicitando. Por ejemplo, Obtenemos la lista de productos que tiene la categoría con identificador «1»: https://bsale.uncodigo.com/category/1/productsDevuelve un documento JSON que incluye información de la categoría solicitada y además un arreglo con todos los productos que esa categoría contiene.

📝 Otros detalles:
Se utiliza la «Arquitectura» o «Patrón de diseño»: Modelo Vista Controlador para que el código sea fácil de mejorar, mantener y agregar funcionalidades. También se aplican algunos conceptos SOLID como el de responsabilidad única.

👷‍♂️ Observaciones
Personalmente he aprendido un montón desarrollando este ejercicio, muchas cosas tuve que volver a investigarlas y también aplicarlas para lograr obtener un resultado que en lo personal me deja muy conforme.
En este otro repositorio de GitHub podemos encontrar la otra parte del proyecto, la parte «Front-End».

😉 Dev with ❤️

DOCUMENTACIÓN FRONT-END
🧑‍💻 Desafío Bsale – Tienda
El desafío consta del desarrollo de una tienda que muestre productos obtenidos desde una base de datos experimental dispuesta por Bsale y que el desarrollador debe implementar de tal forma que pueda servir los recursos de esa base de datos dividiendo el proyecto en dos grandes partes: Front-end y Back-end.

🖥 Para instalar y ejecutar:
Solo debe copiar el proyecto en un directorio o carpeta pública (que cualquier persona pueda acceder) de un servidor con tecnología APACHE.

🤖 Front-End:
Tecnologías y lenguajes utilizados, principalmente son:
HTML para la estructuración del sitio web.
CSS para entregar estilos a la estructura HTML
JavaScript usando las especificaciones de ECMAscript v6.
Librería de íconos de FontAwesome (Externa) (Source)
Mediante estas tecnologías se logra crear el sitio alojado en un servidor al cual se puede acceder usando esta URL: https://bsale.uncodigo.com/store/

🤔 ¿Cómo funciona?
Básicamente la estructura de carpetas es la siguiente:

1
2
3
4
5
6
7
8
root
- img
    - no-image.jpg
- js
    - main.script.js
- css
    - styles.css
- index.html
  • El archivo Index.html es el que representa la «Interfaz» del sitio WEB.
  • La carpeta img contiene recursos gráficos para el desarrollo del sitio web, en este caso contiene una imagen de formato JPG para asignar a los productos que no tienen una URL de imagen válida, si ese atributo está null o vacío.
  • La carpeta js contiene el motor (por decirlo así) del sitio web, es allí donde se procesan peticiones al servidor, donde se renderizan algunos elementos HTML y que le entrega interacción al Sitio Web, así pasa de ser un sitio «estático» a un sitio «dinámico» que puede mostrar los elementos dispuestos por el servidor.
  • Finalmente la carpeta css contiene reglas de estilos en cascada o mas conocidas como «Estilos CSS» para así entregar forma, colores, comportamientos, etc. A las etiquetas HTML que componen la estructura del sitio.

🚧👷‍♂️ TO-DO (Tareas por hacer):
Modularizar el archivo: main.script.js aplicando mejores prácticas de programación y que así sea fácil de mantener a futuro o de agregar nuevas funciones.
👀 Observaciones
Personalmente he aprendido un montón desarrollando este ejercicio, muchas cosas tuve que volver a investigarlas y también aplicarlas para lograr obtener un resultado que en lo personal me deja muy conforme. 🤓
En este otro repositorio de GitHub podemos encontrar la otra parte del proyecto, la parte «Back-End».

😉 Dev with ❤️