7. FrontEnd - SistemasTecTlaxiaco/CenVote GitHub Wiki

OBJETIVO

El objetivo es poder crear una Dapp la cual permita ejecutarse en una red descentralizada, creando su FrontEnd con ayuda de las herramientas como lo es Node.js, asegurando que el FrontEnd pueda realizar las operaciones internas creadas en el BackEnd y exista una unión correcta. De igual forma se busca implementar la Wallet de Freighter para poder realizar las transacciones y poder visualizar el historial de los movimientos que se van realizando con el consumo de XLM de Stellar por cada transacción.

MATERIALES UTILIZADOS

  • Equipo de computo
  • Internet
  • Red de Stellar
  • Visual Studio Code
  • Ubuntu 20.24.6 LTS

DESCRIPCION

Este proyecto consiste en la construcción del FrontEnd utilizando Node.js el cual es un entorno de ejecución JavaScript de código abierto y multiplataforma que permite construir aplicaciones del lado del servidor y de red con JavaScript.

  • Movimientos internos realizados por los usuarios.
    • Registro de usuarios (Votantes y Candidatos).
    • Creación de encuestas.
    • Realizar votaciones.
  • Conexión con la Wallet de Freighter.
  • Realiza distintas transacciones.
    • Transacciones almacenadas en el historial de la Wallet.
    • Transacciones almacenadas en el laboratorio de Stellar.
  • Realiza movimientos de (Inserción, Eliminación y Edición)

REGISTRO DE LA BILLETERA

Instalar FREIGTHER WALLET, para la conexión.

  1. Ingresamos a la página oficial de Freigther y agregamos la billetera como una nueva extensión. image

  2. Nos dirigimos a la parte de extensiones y agregamos la de Freigther. image

  3. Posteriormente aceptamos la solicitud. image

  4. Creamos una cuenta e iniciamos sesión. image image image image image

  5. Ahora nos dirigimos a nuestras extensiones y abrimos la extensión de Freigther. image

  6. Realizamos el cambio de cuenta, de Main net a Test net. image

  7. Escaneamos el código QR o le damos en la opción de copiar la clave publica. image

  8. Financiamos la cuenta con la clave publica que se nos dio, esto en el laboratorio de tesnet. image

  9. Como podemos observar se realizó el proceso exitosamente. image

  10. Verificamos en nuestra billetera y vemos que ahora ya está fondeada. image

CONEXION CON EL FRONTEND

  1. Creamos un archivo o carpeta para el Frontend utilizando astro, con el siguiente comando. "npm create astro@latest" image
  2. Una vez instalado nuestro proyecto de Frontend procedemos a ingresar el comando npm run dev para inicializar el servidor local. image
  3. Una vez ingresando al link del servidor que se nos ha brindado ya podemos ver que ya tenemos nuestro servidor local funcionando para que se muestre la interfaz. image
  4. Ahora procedemos agregar el código para nuestra interfaz, para el FrontEnd. image
  5. Como podemos observar ahora ya tenemos nuestro diseño del FrontEnd. image image