Skip to content

Latest commit

 

History

History
405 lines (259 loc) · 10.9 KB

README.md

File metadata and controls

405 lines (259 loc) · 10.9 KB

Aplicación web para el sistema de tracking de la cadena de suministro del café basado en la tecnología blockchain

  • Este proyecto corresponde a la interfaz web del tracking de tracking descrito aquí.
  • La aplicación web permite que los usuarios puedan interactuar con los contratos alojados en la blockchain.
  • La aplicación creada se llama CoffeeTrack y emplea React como librería de desarrollo y Ethers.js como librería para interactuar con el ecosistema de la cadena de bloques de Ethereum.

Despliegue de la aplicación web

Requisitos previos para correr el proyecto

  • Sistema Operativo: Linux Ubuntu 20.04 LTS +
  • Nodejs: v16.15.0
  • Git: v2.26.2
  • Yarn: v1.22.19

Configuración para el despliegue

  1. Realizar una bifurcación del proyecto a través de la URL https://github.com/NathaliaBarreiros/coffee-supply-chainclient, utilizando una cuenta personal de GitHub. Esto debido a que el alojamiento de la aplicación web en el servicio Vercel se lo realiza a través de un repositorio propio del proyecto.

  2. A continuación, clonar localmente el repositorio que se bifurcó en la cuenta personal y acceder a la carpeta del proyecto /client.

git clone https://github.com/NombreUsuarioGitHub/coffee-supply-chain-client.git
cd client

  1. Establecer las variables de entorno del proyecto. Para esto se crea un archivo .env en la carpeta raíz del proyecto (/client), se copia el contenido del archivo .env.example y se configuran las variables de entorno de manera personalizada.

  2. Instalar los paquetes del proyecto con el siguiente comando:

yarn add https://github.com/NombreUsuarioGitHub/coffee-supply-chain-client.git
  1. En el archivo App.js de la carpeta /src dentro de /client, reemplazar las direcciones de los contratos inteligentes CoffeeSupplyChain.sol, CoffeeSupplyChain2.sol y SupplyChainUser.sol, por las direcciones obtenidas en el despliegue de los contratos, obtenidos aquí. Estos valores se encuentran desde la línea 88 a la línea 90 del archivo App.js, los reemplazos deberían realizarse como sigue:
const userAddress = 'dirección_contrato_SupplyChainUser.sol';
const coffeAddress1 = 'dirección_contrato_CoffeeSupplyChain.sol';
const coffeAddress2 = 'dirección_contrato_CoffeeSupplyChain2.sol';
  1. Para hacer pública la implementación de la aplicación web usar el servicio de Vercel.
  • Se puede probar la aplicación web de manera local a través del comando yarn start, lo que abre la URL http://localhost:3000/ en el navegador web.

Modificaciones

  • Si se realizan cambios en los contratos inteligentes, se debe actualizar el código de la aplicación web.

  • Sobre todo, se deben actualizar los archivos ABI de los contratos inteligentes presentes en el directorio /client/src/contracts. Los archivos a modificar serían: CoffeeSupplyChain1.json, CoffeeSupplyChain2.json, SupplyChainUser1.sol. Para esto se debe copiar el objeto abi de los contratos correspondientes, que son producto de la compilación de estos, los cuales se encuentran en la carpeta /build/contracts del backend del sistema de tracking.

  • Al realizar cambios en el repositorio local de la aplicación web, ya sea al actualizar la dirección de los contratos, cambiar el ABI de estos o cualquier otro cambio, se debe actualizar y subir los cambios en el repositorio remoto de GitHub a través de los comandos siguientes:

git add .
git commit –m “Comentario”
git push dirección_SSH_repositorio_GitHub

Pantallas de la aplicación web

Para utlizar la aplicación web a través de la URL de CoffeeTrack, se debe tener instalada la extensión de MetaMask en el navegador web y habilitar la testnet de Goerli.

Página Inicio

Página Login

Página Dashboard

Rol de Administrador
  • Panel de control del Administrador

  • Formulario para agregar usuarios en el sistema

  • Formulario para ingresar un lote de café en el sistema

  • Tabla de los lotes de café creados en el sistema

  • Opción para ampliar la imagen de un código QR específico e imagen descargada

  • Línea de tiempo de los procesos y sus estados para un lote café específico

Rol de Agricultor
  • Panel de control del Agricultor

  • Formulario para actualizar perfil del usuario Agricultor

  • Formulario para agregar datos de cosecha

  • Ventana emergente de la opción AGREGAR COSECHA CON CÓDIGO QR

Rol de Procesador
  • Panel de control de un usuario Procesador

  • Formulario para agregar datos de procesado

Rol de Catador
  • Panel de control de un usuario Catador

  • Formulario para agregar datos de catación

Rol de Vendedor de Café
  • Panel de control de un usuario Vendedor de Café

  • Formulario para agregar datos de venta de café

Rol de Bodega
  • Panel de control de un usuario con rol de Bodega

  • Formulario para agregar datos de bodegaje

Rol de Transportista a Empacador
  • Panel de control de un usuario Transportista a Empacador

  • Formulario para agregar datos de transporte a empacador

Rol de Empacador
  • Panel de control de un usuario Empacador

  • Formulario para agregar datos de empacado

Rol de Transportista a Retailer
  • Panel de control de un usuario Transportista a Retailer

  • Formulario para agregar datos de transporte a retailer

Rol de Retailer
  • Panel de control de un usuario con rol de Retailer

  • Formulario para agregar datos de comercialización en retailer

Página Tracking

  • Opción LOTE DE EJEMPLO

Se puede acceder a la página de un lote ejemplo.

  • Opción ESCANEAR QR