/TP-dise-oweb

Proyecto para la tecnicatura FCAD

Primary LanguageJavaScript

GitHub contributors GitHub commit activity (main) GitHub repo size

Github Git HTML CSS JavaScript React

Especificaciones funcionales 📋

Introducción 🌟

Proyecto Final para la materia de Introducción al Desarrollo Web de la Tecnicatura en Desarrollo Web de la Universidad de Entre Ríos. El proyecto consiste en realizar una página web dinámica que consuma un servicio de API, el proyecto a realizar sera una plataforma digital dedicada a la oferta de alojamientos a particulares y turísticos (alquiler vacacional) mediante la cual los anfitriones pueden publicitar y contratar el arriendo de sus propiedades con sus huéspedes.

Funcionalidades ⚙️

En referencia a los Alojamientos:

  • Registrar un nuevo alojamiento.
  • Editar los datos de uno existente.
  • Eliminar un alojamiento.

En relación a Imágenes:

  • Registrar una nueva.
  • Editar los datos de una existente.
  • Eliminar una imágen.

En relación a Servicios:

  • Registrar uno nuevo.
  • Editar los datos de uno existente.
  • Eliminar un servicio.

En relación a Alojamiento Servicios:

  • Registrar una nueva.
  • Editar los datos de una existente.
  • Eliminar una relación alojamiento - servicios.

En relación al usuario admin:

  • Iniciar sesión.
  • Cerrar sesión.

Especificaciones técnicas 🛠️

Integrantes 👥

Tecnologías y herramientas 🚀

Nuestro proyecto será desarrollado utilizando HTML, CSS, JavaScript y React, además, se consumira la API proporcionada por los profesores para que conecte con una base de datos utilizando MySQL Workbench. También, aprovecharemos herramientas esenciales como Github para la gestión del código. Para el diseño y la creación de interfaces de usuario, utilizaremos aplicaciones como Figma, que nos permitirán visualizar y compartir nuestras ideas de manera efectiva. Figma

Metodología de trabajo 🔄

Para optimizar nuestra eficacia y aprovechar nuestras capacidades al máximo, nuestro equipo trabajará con ramas personales para trabajar de manera ordenada y luego se mergeará a la rama dev y al finalizar se pasara a producción a la rama main.

Esta estrategia fomentará el desarrollo de nuestras habilidades de comunicación y trabajo en equipo, al mismo tiempo que estimulará nuestras aptitudes de gestión.

Instalación y configuración del proyecto ⚠️

Es importante que ambos servidores tanto el frontend como el backend se esten ejecuetando al mismo tiempo. A continuacion les damos las instrucciones correspondientes.

Login usuario admin credenciales

Frontend

El trabajo con React se encuentra situado en la carpeta SegundaEntrega. Para levantar el servidor y poder visualizar la aplicacion es necesario que se situe en la carpeta SegundaEntrega mediante la terminal e ingresar el comando:

npm install

Seguido del comando:

npm i

Este comando instalara las depedencias necesarias. Para correr el proyecto en local se utilizara el comando:

npm run dev

Backend

La api proporcionada por los profesores se encuentra dentro de la carpeta Backend. Para levantar el servidor y poder visualizar la url del formulario realizado con la api en la aplicacion de react debera mediante la terminal en la carpeta Backend e ingresar el comando:

npm install

Seguido del comando:

npm i

Este comando instalara las depedencias necesarias. Para correr el proyecto en local se utilizara el comando:

npm run dev

Para la conexion con la base de datos: Crear un archivo .env en la carpeta Backend con las credenciales de su conexion en Workbench teniendo este modelo: DB_HOST=localhost
DB_USER=nombre_usuario
DB_PASSWORD=contraseña_personal
DB_NAME=idw
DB_CONNECTION_LIMIT=10
DB_QUEUE_LIMIT=0

AUTOMATIZACION

Instalación de Cypress:

Primero, asegúrate de tener Node.js y npm instalados. Luego, instala Cypress en tu proyecto:

npm install cypress --save-dev

Configuración de Cypress:

  • Abre Cypress:
  • npx cypress open
  • Esto abrirá la interfaz de Cypress donde debe elegir la opcion de e2e integration, seguir los pasos de confguracion recomendados.
  • Seleccionar la prueba en la carpeta cypress/integration el archivo 'addAlojamiento.spec.js'