Code Monkey home page Code Monkey logo

proyecto-grupal-ecommerce's Introduction

La web del café

Descripción del Proyecto:

El proyecto La web del cafe es una aplicacion web de comercio electronico con una arquitectura MVC que nos permite realizar la compra de productos, asi como registrar productos y gestionarlos. Los roles en este proyecto tambien están incluidos, la diferencia de opciones entre un catalogo de productos y un administrador.

Demostración de funciones y aplicaciones:

Es una aplicacion SPA de comercio electronico con Angular consumo de API, y POO con Django y Python. Dedicada a la comercializacion de cafe y otras bebidas, incluidos aperitivos.

Tecnologías utilizadas

El proyecto ha sido desarrollado utilizando las siguientes tecnologías:

  • Angular: Un framework de desarrollo de aplicaciones web en TypeScript que permite la creación de interfaces de usuario interactivas y dinámicas.
  • Bootstrap: Un framework de diseño front-end que proporciona herramientas y componentes para el desarrollo rápido y sencillo de interfaces web responsivas.
  • Django: Un framework de desarrollo web de alto nivel que utiliza el lenguaje de programación Python para construir aplicaciones web seguras y escalables.
  • MySQL: Un sistema de gestión de bases de datos relacional que se ha utilizado como backend para almacenar y recuperar los datos del sistema. También se ha utilizado el lenguaje SQL para realizar consultas y manipular la base de datos.

Además, como entorno de desarrollo se ha utilizado Visual Studio Code, un IDE popular y versátil que proporciona herramientas y extensiones para facilitar la codificación y depuración del proyecto.

Personas Desarrolladoras del Proyecto

  • Lucas Emir Sanchez
  • Danilo Oviedo
  • Daniel Aranda
  • Grecia Azul Lossani
  • Eduardo Nicolas Zurbriggen
  • Jose Martin Oviedo
  • Damian Emiliano Ledesma
  • Fernando Esteban Juarez
  • Hernan Ezequiel Juarez
  • Facundo Villalba

Link a video de presentación:

Levantar el proyecto localmente

Sigue estos pasos para ejecutar el proyecto en tu entorno de desarrollo local:

  1. Asegúrate de tener instaladas las siguientes herramientas:

    • Node.js: Para instalarlo, visita el sitio oficial de Node.js (https://nodejs.org) y sigue las instrucciones de instalación para tu sistema operativo.

    • Angular CLI: Abre una terminal y ejecuta el siguiente comando para instalar Angular CLI de forma global:

      npm install -g @angular/cli
      
    • TypeScript: Ejecuta el siguiente comando en la terminal para instalar TypeScript:

      npm install -g typescript
      
    • Python: Si aún no tienes instalado Python, puedes descargarlo e instalarlo desde el sitio oficial de Python (https://www.python.org)

    • Virtualenv: Ejecuta el siguiente comando en la terminal para instalar virtualenv:

      pip install virtualenv
      
    • MySQL: Instala el sistema de gestión de bases de datos MySQL en tu máquina y asegúrate de tener un servidor MySQL en ejecución.

  2. Clona el repositorio del proyecto desde GitHub:

    git clone https://github.com/lucas-s4nchez/Proyecto-Grupal-Ecommerce
    
  3. Navega hasta la carpeta raíz del proyecto:

    cd <nombre_de_la_carpeta_del_proyecto>
    
  4. En la terminal navega hasta la carpeta backend (si ya estás en la raiz del proyceto: cd backend), y ejecuta el siguiente comando:

    virtualenv venv
    
  5. Luego, para activar el entorno virtual presioná ctrl + shift + p, esto abrirá un modal en vscode donde vas a poner lo siguiente Python: Select Interpreter, le hacés click y te apareceran algunas opciones (si es que ya tenés otros entornos), elegí la opción Escriba la ruta de acceso del intérprete... y te aparecerá un input para colocar la ruta del entorno virtual que quieres activar, ahí es donde vas a poner la ruta del entorno creado, el que está en la carpeta backend, si el proyecto lo tenes en el escritorio la ruta sería algo así : "C:/Users/tuusuario/Desktop/Proyecto-Grupal-2023/backend/venv" .

  6. Con el entorno virtual ya activado y sobre la carpeta backend ejecuta este comando en la terminal para instalar las dependencias del backend:

    pip install -r requirements.txt
    
  7. Crear base de datos mysql, para poder hacer las migraciones en Django necesitas crear la base de datos primero, crea una base de datos mysql de forma local

  8. Crea un archivo .env en la carpeta backend, este archivo va a contener las variables que no queremos que se suban al repositorio, en el archivo .env.template estan las variables que debes colocar en este archivo, con descripciones de lo que éstas guardan.

  9. En este punto ya debería ser posible hacer las migraciones con Django, en tu terminal sobre la carpeta backend ejecuta el comando:

    python manage.py makemigrations
    

    y luego este otro:

    python manage.py migrate
    
  10. Crear un superusuario, ejecuta en tu terminal sobre la carpeta backend el comando:

    python manage.py createsuperuser
    

    Te apareceran inputs para llenar con el correo y contraseña que quieras usar.

  11. Levantar el servidor de django, ejecuta en tu terminal sobre la carpeta backend el comando:

    python manage.py runserver
    
  12. Instalar las dependencias del frontend, ejecuta en tu terminal sobre la carpeta frontend el comando:

    npm install
    
  13. Levantar el proyecto de angular, ejecuta en tu terminal sobre la carpeta frontend el comando:

    ng serve -o
    

Integrar mercado pago

Debes seguir estos pasos para que acepten los pagos de mercado pago con usuarios de TEST

  1. Crearte una integración de mercado pago.
  2. Crear 2 cuentas de prueba una de vendedor y otra de comprador
  3. Inicia sesion en la cuenta de prueba vendedor y crear una integración de mercado pago.
  4. Guardar el access token de esta nueva integración en las variables de entorno.
  5. Descargar ngrok (https://ngrok.com/) y guardar el archivo ngrok.exe en la carpeta backend del proyecto.
  6. Activar el ngrok en la terminal sobre carpeta backend, ejecutar este comando:
    .\ngrok.exe http 8000
    
  7. El dominio que te genera ngrok es algo asi:
    https://d660-168-196-24-185.sa.ngrok.io
    
  8. Debes guardarlo en el archivo .env en la variable NGROK_HOST (guarda el dominio sin comillas) quitando el "https://", quedaría algo asi:
    NGROK_HOST=d660-168-196-24-185.sa.ngrok.io
    
  9. Este dominio que te genera ngrok dura 2 horas, asi que debes actualizarlo ejecutando el paso 5 (sin descargarlo nuevamente ovbio), 6 y 7 cada 2 horas de ser necesario
  10. Ya te deberia funcionar el mercado pago.

proyecto-grupal-ecommerce's People

Contributors

lucas-s4nchez avatar josepolvora avatar 1danilo avatar eduzurbriggen14 avatar 20fer20 avatar facuvillalba44 avatar ledesmadamian avatar danielmvp01 avatar alfranix951 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

proyecto-grupal-ecommerce's Issues

#US 09

Como usuario quiero poder eliminar productos seleccionados, al comprar mediante un carrito de compras.

#TK21

Grabar video mostrando demo y explicando una funcionalidad implementada en el proyecto hasta el momento.

#TK20.0

Agregar:

  • Funcionalidades al panel de usuarios.

#US04

Como administrador quiero que los usuarios de la página puedan acceder a esta desde cualquier dispositivo manteniéndose el diseño y la legibilidad del sitio.

#TK15

Realizar merge a rama main

#TK01- Tarea inicial

Crear la rama develop y instalar las dependencias necesarias. También crear la estructura de proyecto solicitada.

#TK20.2

Agregar:
-Funcionalidad restar unidades al carrito.

#TK20.2

Agregar:
-Funcionalidad agregar unidades al carrito.

#US02

Como administrador quiero poder agregar, eliminar y modificar productos para mantener la página al día con la empresa.

#US03

Como administrador quiero poder generar una base de datos de clientes.

#17.3

Definición de la Api Rest y los EndPoints necesarios para las funcionalidades de:
-El rol ADMIN pueda ver la lista de usuarios registrados y el listado de los productos.
-El rol USUARIO registrado solo que pueda ver su Dashboard para editar su perfil

#TK16

Frontend: Incorporar formularios reactivos de Registro y Login.

Deberán estar conformados por input types acorde al dato que se va a ingresar
Deberán informar al usuario mediante mensajes personalizados (Validaciones)
Deberán respetar los colores semánticos que propone Bootstrap

Requieren:

  • Conexión con el backend para el registro e inicio de sesión.
  • Conexión con backend para almacenar los datos de los productos y detalles de producto en la DB a través del modelo en Django.

#US07

Como usuario quiero poder buscar productos por categorías.

#TK20.4

Agregar:
-Funcionalidad eliminar producto del carrito.

#TK04

Revisar que el diseño de la web se mantenga responsivo en cada una de sus secciones

#TK03

Hacer merge en la rama main desde la rama develop en la fecha requerida

#TK09

Diseño del BACKEND

Subir en la carpeta documentación las tablas actualizadas de la base de datos:

Diseño conceptual al que ya hemos visto como DER: Diagrama Entidad-Relación.
Diseño Lógico que consta de la Normalización y el Modelo Relacional.
Diseño Físico que es el script legible de la DB en MySQL.
Crear un Diagrama de Clases y Casos de Uso para facilitar el modelado en POO.

#TK05

construir sección "home" con componentes de Angular

#US14

Como usuario quiero poder agregar uno o más productos al carrito, eliminarlos o directamente vaciar el carrito.

#TK17.0

  • Los datos deberán ser consumidos desde la Base de datos MySQL.

#US17

Como usuario final quiero navegar entre los distintos apartados que tenga el sitio.

#US 10

Como usuario quiero poder eliminar productos en el carrito de compras.

#TK07

Construir sección de "productos" y "detalles de producto" con componentes de angular

#TK13

Incorporar la programación reactiva (asincrónica) mediante observables para la comunicación entre servicios y componentes.

#US08

Como usuario quiero poder comprar productos mediante un carrito de compras.

#US 13

Como Usuario, quiero recibir una notificación del pago, que se realizó en la website, asegurandome que está acreditado.

#TK20.1

Agregar:
-Botón "agregar al carrito".

#TK06

Construir sección "about" con componentes de ángular

#TK18

Hacer merge en la rama main .

#17.2

Definición de la Api Rest y los endpoints necesarios para las funcionalidades de:
-Login de usuarios.

#TK17.1

Definición de la Api Rest y los endpoints necesarios para las funcionalidades de:
-Registro de usuarios.

#TK19.1

Desarrollar:
-Tablero de control administrador CRUD básico -funcional de producto y cliente

#US05

Como administrador quiero que los usuarios tengan un link que los redirige a las redes sociales de la empresa.

#TK10

Incorporar la navegabilidad de la aplicación mediante Routing con Angular.

#US 11

Como administrador quiero que la página mantenga buenas prácticas para el posicionamiento online.

#US15

Como usuario quiero pagar con tarjeta.

#US01

Como usuario quiero registrarme en el sitio para poder comprar y realizar reseñas los productos

#US 12

Como Administrador quiero cargar los productos, verificando Nombre, SKU(Código del producto), imagén correspondiente y stock o inventario del mismo.

#TK11

Crear servicios que consuman un API Rest de prueba. Para realizar las peticiones http, utilizar el servicio de HttpClient.

#US16

Como usuario quiero retirar mi compra del local mediante una orden de compra

#TK14

Requerimientos para el Backend:
Establecer el modelo de base de datos del primer sprint en Django usando clases.
Establecer el sistema de usuarios en Django-Admin (registro, login y roles)
Crear un ABM de productos/servicios utilizando el panel de control de Django.

#TK08

Construir las secciones de "registrar usuario" y "ingresar" con componentes de angular.
Agregar links ah redes sociales de la web.

#TK19.0

Desarrollar:

  • Tablero de control para usuarios.

#TK12

Inyectar a los componentes los correspondientes servicios a fin de que los componentes puedan acceder a los datos y mostrarlos en pantalla. Incluye enlace de datos (Data binding).

#TK02

Revisar documentación IEEE830 para sacar historias de usuario y cargar al backlog

#TK22

  • Actualizar gestión del repositorio, documentación IEEE3830.
  • Editar video, subirlo a drive y dejar link en la wiki.

#TK20.5

Agregar:
-Funcionalidad vaciar carrito.

#TK23

Hacer merge con rama main. Fecha limite martes 20/06/2023

#TK20.3

Agregar:
-Funcionalidad restar unidades al carrito.

#US06

Como usuario quiero que se pueda iniciar y cerrar sesión para no dejar mi cuenta abierta.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.