El presente trabajo muestra el desarrollo de un sistema de comercio electrónico cliente a cliente para la venta de electrodomésticos. Considerando la problemática destacada y con el objetivo de poder satisfacer la demanda de venta y compra de electrodomésticos a través de plataformas digitales, por tal motivo, en el presente Curricular se ha desarrollado un sistema de comercio electrónico de compra y venta cliente a cliente. Parte de integración. de productos de primera y segunda mano, lo que beneficia a los usuarios a la hora de buscar un dispositivo a bajo precio y excelente calidad de uso, optimizando tiempo para ambas partes.
Objetivo general
Objetivos específicos
Alcance
Se garantiza un trabajo lípido en el frontend gracias a la ayuda del framework React, además se realizan pruebas individuales o unitarias y de integración, con el objetivo de comprobar la efectividad del sistema de comercio electrónico web y todas sus funcionalidades. Para completar el proyecto actual, se utiliza una metodología ágil, como el método denominado “Scrum”, que ha permitido un desarrollo flexible y poder lograr soluciones complejas para la codificación y despliegue del sistema web.
Marco Teórico
Su función principal es desarrollar páginas web gracias al uso de componentes reutilizables en las mismas, lo que significa que se puede crear un elemento y luego usarlo en otra parte del sistema sin tener que recrear ese código específico. Además, React [13] tiene actualizaciones automáticas y muestra los cambios dentro de la capa de visualización del sistema web, lo que permite que el modelo de objetos se use de manera efectiva para representar documentos (DOM). El uso de la navegación pragmática de React ayuda a realizar el enrutamiento, lo que brinda varias oportunidades para una navegación pragmática segura entre diferentes componentes sin que el usuario tenga que hacer clic en los enlaces, lo que permite que la interfaz de usuario (UI) se sincronice con la URL.
Metodología de Desarrollo
Esto permite el desarrollo de un sistema de comercio electrónico de cliente a cliente para electrodomésticos. Son participantes del equipo de desarrollo de un proyecto, no tiene una jerarquía dentro de sus cargos, cada persona dentro de este grupo tiene la obligación de preparar su parte en base a sus conocimientos, también son los encargados de representar todas las solicitudes en un producto específico para satisfacer a los clientes finales [21], la TABLA 1 presenta el individuo asignado para cumplir con este rol específico.
Diseño de interfaces (mockups)
Diseño de la arquitectura
Esto es para poder modelar y lograr compatibilidad con los sistemas de datos de un sistema con el fin de que puedan interactuar entre sí [31]. 3, conocer el modelo de datos, el control de los datos desplegados y la información de representación, logrando una estructura adecuada de manera organizada y obteniendo una compatibilidad óptima con los instrumentos o herramientas a través de los cuales se desarrollará, verificará y producirá la etapa de codificación.
Herramientas de desarrollo
Biblioteca React, que hace peticiones HTTP a cualquier servidor, por lo que se hacen promesas de poder hacerlas [35]. Herramienta que brinda un servicio en la nube para agregar diferentes funciones en tiempo real, por lo que funciona con websockets, lo que facilita al usuario al no tener un servidor de websockets para usar para ejecutar aplicaciones como chats en tiempo real, juegos multijugador, notificaciones, etc [37].
Sprint 0. Configuración del ambiente de desarrollo
El componente front-end usa puntos finales para mostrar productos que tienen un estado de suscripción activo, cancelado o caducado para que un usuario administrativo pueda eliminar y activar la suscripción. El componente front-end utiliza puntos finales para mostrar los comentarios creados en cada visualización de producto para que un usuario administrador pueda eliminar y profundizar en un comentario.
Sprint 1. Interfaces: Usuario cliente - Autenticación
Finalmente, se encuentra un botón para acceder a la plataforma, el logo del sistema y una imagen a la izquierda que hace referencia a que es un sistema de electrodomésticos, como se muestra en la Fig. Para este proyecto se desarrolló un sistema de cabecera con varios componentes como se ve en la Fig.
Sprint 2. Pantallas principales
Los endpoints se consumen para permitir la actualización de la información del producto, por lo que se muestra el mismo formulario con el que se crea un producto, teniendo así la posibilidad de editar el producto seleccionado por el usuario, como se muestra en la Fig. Además, se consumen los endpoints para poder mostrar los comentarios realizados dentro del producto, cabe señalar que las opciones de borrar y editar solo se muestran al usuario propietario del comentario, como se puede observar en la Fig.
Sprint 3. Interfaces: categorías, vender y ayuda
Se muestra el detalle del producto seleccionado a través del consumo de endpoints, mostrando el nombre, precio, estado, marca, stock, celular del usuario, dirección y descripción del producto mencionado, también consume endpoints para poder contactar directamente con el usuario quién es el dueño del producto en cuestión, otro botón para poder hacer un comentario dentro de la misma pantalla y otro para reportar el producto, como se muestra en la Fig. Para poder enviar un comentario, el usuario al hacer clic en el botón despliega un modal, en el cual puede realizar el comentario, como se puede observar en la Fig. Se consumen endpoints para poder visualizar los principales datos del usuario autenticado, teniendo la posibilidad de observar avatar, nombre de usuario, apellido, nombre, correo electrónico, teléfono, teléfono móvil y dirección, incluyendo tarjetas para poder modificar y visualizar ciertos datos, como se muestra en la Fig.
Además, cuenta con botones para habilitar la actualización del avatar, contraseña e información clave del usuario autenticado, como se muestra en la Fig. Se consumen endpoints para poder realizar una suscripción a través de una simulación con una API de Paypal, que al presionar el botón cambia el estado del producto seleccionado de no suscrito a suscrito, además se consumen endpoints para poder visualizar el detalles del producto al que se quiere suscribir, como se muestra en la Fig. Los puntos finales se consumen para poder mostrar productos que contienen una suscripción de usuario autenticado desde el botón en la pantalla de perfil, que muestra los detalles del producto, junto con un indicador que muestra si la suscripción está activa, vencida o cancelada, como se muestra en la Fig.
Sprint 4. Métodos CRUD para usuario Administrador
Los endpoints se consumen para administrar los comentarios dentro de los detalles de cada producto, por lo que si hay un comentario mal estructurado u ofensivo dentro del sistema, se elimina y también tiene la opción de ver la creación del comentario en detalle. , como en la Fig. Los endpoints se utilizan para mostrar los reportes que los mismos usuarios hacen sobre un producto, para que puedan tomar en cuenta si el producto en cuestión resulta ser fraudulento o simplemente tiene una descripción incorrecta, el usuario administrador tiene la opción de borrar estos. informes si es necesario, como se muestra en la Fig. Los puntos finales se utilizan para mostrar los productos que se han creado dentro de la plataforma, se nota que si un usuario elimina un producto, este no desaparece de la tabla de productos, el usuario administrador tiene la oportunidad de ver el producto en detalle y elimínelo si es necesario, como se muestra en la Fig.
Los endpoints se consumen para mostrar las suscripciones realizadas dentro de la plataforma, mostrándose estas en tres estados diferentes: activo, caducado y cancelado, la opción activada inicia cuando el usuario realiza el pago del producto que requiere la suscripción, el caducado ocurre cuando el tiempo de la suscripción se consume y finalmente se realiza la cancelación cuando hay una inquietud en la parte de pago, por lo que el administrador puede cancelar esta suscripción, también tiene la opción de aceptar o activar la suscripción nuevamente si es necesario, como se muestra en la Fig. Los últimos puntos se utilizan para mostrar tres estadísticas y cuatro tarjetas donde se muestra la información principal dentro del tablero para administradores, las tarjetas muestran el número total de usuarios, suscripciones, productos e informes registrados en la plataforma, como se muestra en la Fig. Las estadísticas consisten en un contador de usuarios por mes, el segundo las suscripciones por mes, y el tercero los productos creados por mes dentro del sistema, como se muestra en la Fig.
Sprint 5: Pruebas y despliegue a producción
A través de las pruebas de aceptación se determina si la aplicación web cumple con todos los requisitos establecidos desde su desarrollo, por lo que a través de un formulario para saber cómo considera el usuario la usabilidad del proyecto, este examen se ha realizado exclusivamente para el usuario cliente, para ello por lo que se presenta en la TABLA VIII, las demás pruebas de aceptación se encuentran en los ANEXOS II parte de la TABLA XXVI a la TABLA XXXIII. Descripción: El usuario cliente debe registrarse en la plataforma para acceder a la plataforma. Las pruebas de compatibilidad entre navegadores verifican que la interfaz de usuario y la información dentro del sistema se puedan presentar de manera óptima, dentro de los navegadores.
Por ello, se han realizado pruebas de compatibilidad en algunos de los navegadores más utilizados como se muestra en la tabla TABLAVIVV, también existen pruebas de estos en el apartado ANEXO II de la Fig.69 a la Fig.71. A continuación se presentan las recomendaciones realizadas en la fase de elaboración del actual proyecto desarrollado. Disponible: https://www.genbeta.com/desarrollo/pusher-servicio-en-la-nube-para-gestionar-las-conexiones-y-envio-de-mensajes-mediante-websockets.
Las historias de usuario para el proyecto actual en el proyecto frontend se presentan a continuación en las tablas, en función de los requisitos presentados en la tabla anterior. Identificador (ID): PA002 ID de historial de usuario: HU002 Nombre: iniciar sesión, cerrar sesión y editar contraseña.
