Skip to content

Latest commit

 

History

History
232 lines (175 loc) · 8.53 KB

README.md

File metadata and controls

232 lines (175 loc) · 8.53 KB

c23-97-T-webapp

No Country - Simulación laboral - Cohorte 23 (Enero 2025)

QR Share Pro

La pagina se dedica a la venta de ropa online la cual tienes la funcionalidad de mostrar un codigo QR que sirve para que lo puedas buscar de una forma rapida y sencilla sin clicks. este servicio le ahorra tiempo y reduce las complicaciones al compartir información asi puede enfocarse en sus tareas mientras sus compañeros acceden fácilmente a los productos.

001

ejempo

Comenzando 🚀

En Windows, si deseas usar este proyecto como base para tu propio proyecto, puedes usar el comando git clone para clonar este repositorio en tu computadora.

Mira Deployment para ver el despliegue del proyecto.

Pre-requisitos 📋

Como desarrollador, necesitarás tener instalados los siguientes programas:

Frontend:

Backend:

Instalación 🔧

Para poder ejecutar el proyecto, primero debes clonar el repositorio en tu computadora. Para clonar el repositorio, abre tu terminal y ejecuta el siguiente comando:

git clone https://github.com/No-Country-simulation/c23-97-T-webapp.git

Una vez clonado el repositorio, abre tu terminal y ejecuta los siguentes comandos para instalar las dependencias necesarias la cuales estan separadas en las carpetas Frontend y Backend:

Frontend:

cd Frontend
npm install

Backend:

Para descartar posibles errores, repetidamente se hace hincapié en que el entorno virtual de Python siempre debe estar activado y que los comandos deben ser ejecutados en ubicaciones especificas.

Instalar MySQL Community Edition 8.0 (incluyendo MySQL Workbench). Instalacion

Desde MySQL Workbench, crear manualmente la base de datos ya que Django no la crea automáticamente.

CREATE DATABASE apidb CHARACTER SET utf8mb4;

crear_base_de_datos_para_django

Editar el archivo que está en proyecto\settings.py para modificar el acceso a la base de datos.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'apidb',
        'USER': 'tu_usuario_de_mysql',
        'PASSWORD': 'tu_contraseña_de_mysql',
        'HOST': 'tu_localhost',
        'PORT': 'el_puerto_de_tu_localhost',
        'OPTIONS': {
            'charset': 'utf8mb4',
        },
    }
}

En Windows 10 se utilizo PowerShell 7.5.0 para ejecutar los siguientes comandos...

En la carpeta principal donde está el archivo manage.py crear un entorno virtual de Python, donde se van a descargar los paquetes necesarios para el proyecto de Django.

python -m venv entornoVirtual

Activar el entorno virtual (si se está usando PowerShell, ejecutar el script .ps1)

.\entornoVirtual\Scripts\Activate.ps1

Teniendo el entorno virtual de Python activado, instalar los paquetes (automáticamente se descargan dentro de la carpeta del entorno virtual, no de manera general en la carpeta de la instalación de Python).

pip install -r requirements.txt

Los comandos makemigrations y migrate solo funcionan si la base de datos ya ha sido creada.

Teniendo el entorno virtual de Python activado, ir a la carpeta principal donde está el archivo manage.py para ejecutar el comando que detecta los cambios que se le van a hacer a la base de datos.

python manage.py makemigrations

Teniendo el entorno virtual de Python activado, ir a la carpeta principal donde está el archivo manage.py para ejecutar el comando que aplica los cambios a la base de datos.

python manage.py migrate

Teniendo el entorno virtual de Python activado, ir a la carpeta principal donde está el archivo manage.py para ejecutar el comando que crea un usuario admin necesario para acceder a la página de administración de Django (completar la información que pide).

python manage.py createsuperuser

Ejecución 🏁

Frontend:

cd Frontend
npm run dev

Una vez ejecutado el entorno de desarrollo, abre tu navegador y ingresa la dirección http://localhost:5173/ para ver el proyecto en acción.

Backend:

Teniendo el entorno virtual de Python activado, ir a la carpeta principal donde está el archivo manage.py para ejecutar el proyecto de Django.

python manage.py runserver

Para ingresar a la página de administración.

http://127.0.0.1:8000/admin/

Tarjetas

Para ver todas las tarjetas, que muestran información de las categorías que están en la parte de abajo de todo de la página home.

http://127.0.0.1:8000/api/tarjetas/

Para ver las tarjetas, según la categoría.

http://127.0.0.1:8000/api/tarjetas/hombre/
http://127.0.0.1:8000/api/tarjetas/mujer/
http://127.0.0.1:8000/api/tarjetas/niño/

Productos

Para ver todos los productos.

http://127.0.0.1:8000/api/productos/

Para ver productos por categoría.

http://127.0.0.1:8000/api/productos/hombre/
http://127.0.0.1:8000/api/productos/mujer/
http://127.0.0.1:8000/api/productos/niño/

Pasar parámetro a través de la URL

Estando dentro de una categoría, buscar una palabra que esté en el título de un producto.

http://127.0.0.1:8000/api/productos/hombre/?titulo=palabra
http://127.0.0.1:8000/api/productos/mujer/?titulo=palabra
http://127.0.0.1:8000/api/productos/niño/?titulo=palabra

Despliegue 📦

El proyecto se encuentra desplegado en la siguiente URL: https://qr-share-pro.netlify.app/

Construido con 🛠️

Las tecnologías que se utilizaron para crear el proyecto:

Frontend:

  • ReactJS Biblioteca para la creación de interfaces de usuario
  • Tailwind CSS Framework de estilos CSS
  • Vite Herramienta de desarrollo de aplicaciones
  • React Router Biblioteca de navegación para aplicaciones de React

BackEnd:

  • Django Framework para el desarrollo de aplicaciones web
  • Render Alojamiento de aplicaciones
  • Aiven Servicio de base de datos
  • Cloudinary Gestión de archivos multimedia

Autores ✒️

Este proyecto fue desarrollado por los siguientes colaboradores:


QR Share Pro is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International