X-Commerce

Introducción

Proyecto integrador de Generation. Esta plataforma tiene como proposito ser un ecommerce construido desde cero mediante algunas tecnologías que veremos más adelante.

¿Qué encontrarás aquí? 🚀

Se encontrará el código fuente del desarrollo de un ecommerce desde cero incluyendo tanto el Front-End como el Back-End.

Mira el apartado de Deployment para conocer más sobre como fue desarrollado el proyecto.

Pre-requisitos 📋

Tener conocimientos de Programación orientada a objetos, API's, API Rest, Bases de datos y manejo de protocolos HTTP

Se consumió una API desarrollada por nosotros mismos que permite alimentar todo el sistema 
y así no depender de servicios de terceros.

Instalación 🔧

Dirigirte a la página principal del proyecto e interactuar con el ecommerce desarrollado

Aquí podrás encontrar el enlace: https://yannimartinez.github.io/XForce-ProyectoIntegrador/

Ejecución de pruebas ⚙️

La ejecución del sistema puede hacerse en tiempo real mediante el enlace proporcionado anteriormente, de esta manera tú como usuario tienes la capacidad de sentir la experiencia del ecommerce como si fuera uno ya establecido, permitiendo registrarte, iniciar sesión, agregar a carrito y más.

Buena seguridad con los datos 🔩

Este proyecto hace 3 tipos de verificaciones del usuario:

Comprobación mediante HTML con el llenado de campos.
Mediante JS con parámetros como la longitud, la existencia de datos y más.
A nivel de Base de datos, hace la comprobación de que se está recibiendo 
valores en los campos requeridos.

De no cumplirse lo campos anteriores entonces le indicará al usuario que preste 
mayor atención en ello.

Prácticas respecto a la codificación ⌨️

Se buscó la automatización lo mayor posible para reutilizar código o simplemente hacer toda la plataforma dinámica y modular para poder abordar de forma sencilla los errores o bugs que se presenten.

Ejemplo de Clase Card:

class Card
{
    /**Declaración de ATRIBUTOS privados */
    #imagen="";
    #nombre="";
    #descripcion="";
    #etiqueta="";

    /**
     * Constructor, nos permite inicializar los valores de nuestro objeto en base a la información brindada por la API
     * @param {*} imagen Hace referencia al valor SRC que asignaremos a la etiqueta img posteriormente
     * @param {*} nombre Hace referencia al nombre del articulo
     * @param {*} descripcion Hace referencia a la breve descripción obtenida del articulo
     * @param {*} etiqueta Hace referencia a la etiqueta o categoria a la que pertenece el articulo
     */
    constructor(imagen,nombre,descripcion,etiqueta)
    {
        this.#imagen=imagen;
        this.#nombre=nombre;
        this.#descripcion=descripcion;
        this.#etiqueta=etiqueta;
    }

    /**Metodos Set's Permiten modificar los atributos privados del objeto (Les asigna valores)*/
    set imagen(value){this.#imagen=value;}
    set nombre(value){this.#nombre=value;}
        set descripcion(value){this.#descripcion=value;}
    set etiqueta(value){this.#etiqueta=value;}

    /**Metodos Get's permiten obtener información de los atributos del objeto */
    get imagen(){return this.#imagen;}
    get nombre(){return this.#nombre;}
    get descripcion(){return this.#descripcion;}
    get etiqueta(){return this.#etiqueta;}

Desarollo 📦

Aquí podrás encontrar algunos datos importantes que tomamos en cuenta a la hora de desarrollar este proyecto:

Puntos fuertes del proyecto:

* Reutilización de código.
* Programación modular.
* Diseño explicito referente a variables, funciones, clases y métodos implementados.
* Automatización en el llenado de:
    - Barra de navegación.
    - Pie de Página.
    - Generación automática de tarjetas que describen los productos.
* Manejo de Bases de datos relacionales.
* Diseño, construcción e implementación de API.

Construido con 🛠️

Las tecnologías implementadas en el desarrollo de este proyecto fueron:

Referente al Front-End

• HTML - Lenguaje de etiquetas de hipertexto, permite conexión con la web.
• CSS - Hoja de estilo en cascada, permite darle estilo al código en HTML.
• BootStrap 4.6 - Framework que facilita el manejo de código CSS.
• JavaScript - Manejador de dependencias

Referente al Back-End

• JAVA - Lenguaje de alto nivel usado para desarrollar el Back-End
• Spring Boot - Framework de Java para desarrollo de aplicaciones web y APIS's.
• Maven - Manejador de dependencias

Contribución 🖇️

Todo cambio deberá ser solicitado al propietario de este proyecto cumpliendo conductas de respeto bilateral.

Versionado 📌

Para todas las versiones disponibles, mira los tags en este repositorio.

Autores ✒️

Aquí verás a todas las personas que contribuyeron al desarrollo del proyecto:

• Camacho Uriel - Front-End, Back-End - Uriel
• Gómez Miguel Alexis - Front-End, Back-End - Miguel
• Martínez Martínez Yanni - Front-End, Back-End - Yanni
• Perez Jaquelin - Front-End, Back-End - Jaquelin
• Velazquez Fernando Joel - Front-End, Back-End - Joel

También puedes mirar la lista de todos los contribuyentes quíenes han participado en este proyecto.

Licencia 📄

Este proyecto está bajo la Licencia del equipo X-Force - mira el archivo LICENSE.md para más detalles acerca del uso este proyecto.

Expresiones de Gratitud 🎁

• Comenta a otros sobre este proyecto. 📢
• Invita unos taquitos 🌮 ó un café ☕ a alguien del equipo.
• Agradecer si este material te sirvió.
• Retroalimentación para seguir mejorando.
• Gracias por estar aquí.

---

Desarrollado con ❤️ por X-Force 😊