Construir una Comunidad Tokenizada para Conciertos en Vivo con QuickNode: Un Tutorial Paso a Paso

Desbloquea Experiencias de Conciertos en Vivo Exclusivos con la Tecnología Blockchain y QuickNode

En este tutorial detallado, te explicaremos el proceso para construir una comunidad token-gated para conciertos en vivo usando QuickNode. Crearemos un token personalizado en la red de Ethereum, desarrollar un contrato inteligente para la comunidad y diseñar una interfaz frontend usando las API de QuickNode. Esta plataforma permitirá a los organizadores del concierto, ofrecer conciertos en vivo exclusivos para los dueños del token.

Prerrequisitos

• Entendimiento básico de Ethereum, Solidity y de los contratos inteligentes.
• Familiaridad con JavaScript y desarrollo de la web.
• Node.js y npm instalados en tu máquina local.
• MetaMask u otra billetera compatible con Ethereum

Paso 1: Configurando el Proyecto

Como primer paso, creamos un contrato inteligente en Solidity para el token que usaremos luego para cerrarlo (para el gate).

1.1 Instalando las dependencias

Para comenzar, asegúrate de tener Node.js instalado. Te recomiendo usar la última versión LTS (Long Term Support, Soporte de Largo Plazo). Puedes instalar la última versión LTS usando los siguientes comandos:

nvm install --lts
nvm use --lts

Luego, instala Truffle, un framework de desarrollo popular para Ethereum, globalmente:

npm install -g truffle

1.2 Crea un nuevo proyecto Truffle

Crea un nuevo directorio para tu proyecto e inicializa un nuevo proyecto Truffle:

mkdir tokengated-community
cd tokengated-community
truffle init

1.3 Instala los Contratos de la Biblioteca de OpenZeppelin

Para crear un FanToken (FTK) personalizable, usaremos la biblioteca de Contratos de OpenZeppelin la cual, provee una implementación segura y auditada del estándar del token ERC20. Instala la biblioteca como dependencia:

npm install @openzeppelin/contracts

1.4 Instala el contrato FanToken

Crea un nuevo archivo llamado FanToken.sol en el directorio contracts y añade el siguiente código:

pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract FanToken is ERC20 {
    constructor(uint256 initialSupply) ERC20("FanToken", "FTK") {
        _mint(msg.sender, initialSupply);
    }
}

1.5 Configura el proyecto Truffle

Abre el archivo truffle-config.js en el directorio raíz de tu proyecto y actualiza la sección compilers para usar la versión correcta de Solidity, el cual debería coincidir con la versión especificada de tu archivo FanToken.sol. En este caso, configúralo a 0.8.0 o mayor:

compilers: {
  solc: {
    version: "^0.8.0", // Actualiza esta línea a la versión correcta
    settings: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    }
  }
}

Guarda el archivo truffle-config.js

Paso 2: Desarrolla un contrato inteligente para la comunidad token-gated

Ahora que hemos creado el contrato FanToken y configurado el proyecto Truffle correctamente, podemos proceder con los pasos subsecuentes para crear el contrato de la comunidad token-gated y desarrollar la interfaz front-end para el acceso de conciertos en vivo.

2.1 Creando la comunidad del contrato

En el directorio contracts, crea un nuevo archivo llamado TokengatedCommunity.sol y añade el siguiente código de Solidity para crear un contrato inteligente que gobierne las reglas de la comunidad tokenizada:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract TokengatedCommunity is Ownable {
    IERC20 public fanToken;
    uint256 public entryTokenAmount;

    mapping(address => bool) public members;

    event MemberJoined(address indexed member);

    constructor(address _fanToken, uint256 _entryTokenAmount) {
        fanToken = IERC20(_fanToken);
        entryTokenAmount = _entryTokenAmount;
    }

    function joinCommunity() external {
        require(!members[msg.sender], "Already a member");
        require(fanToken.balanceOf(msg.sender) >= entryTokenAmount, "Insufficient token balance");

        members[msg.sender] = true;
        emit MemberJoined(msg.sender);
    }

    function setEntryTokenAmount(uint256 _newEntryTokenAmount) external onlyOwner {
        entryTokenAmount = _newEntryTokenAmount;
    }

    function isMember(address _user) external view returns (bool) {
        return members[_user];
    }
}

2.2 Configurando el despliegue para el contrato de la comunidad

En el directorio migrations, crea un nuevo archivo llamado 3_deploy_community.js y añade el siguiente código para desplegar el contrato de la comunidad:

const TokengatedCommunity = artifacts.require("TokengatedCommunity");
const FanToken = artifacts.require("FanToken");

module.exports = async function (deployer, _network, accounts) {
  const tokenInstance = await FanToken.deployed();
  await deployer.deploy(TokengatedCommunity, tokenInstance.address, "1000000000000000000"); // Set initial entry token amount to 1 FTK
};

2.3 Despliegue del contrato de la comunidad

Ejecuta el siguiente comando para desplegar el contrato de la comunidad al mainnet Ethereum:

truffle migrate --network mainnet

Toma nota de la dirección del contrato de la comunidad desplegada para usos futuros.

Paso 3: Crea una interfaz front-end

El contrato está listo para desplegarse, ahora necesitamos el UI.

3.1 Configura un proyecto React

Crea un nuevo proyecto React usando la aplicación create de react:

npx create-react-app tokengated-community-frontend
cd tokengated-community-frontend

3.2 Instala las dependencias

Instala las dependencias necesarias para el frontend:

npm install ethers web3modal @openzeppelin/contracts

3.3 Crea un componente Web3Modal

En el directorio src, crea un nuevo archivo llamado Web3Modal.js y añade el siguiente código para crear un componente Web3Modal que se conecte con las billeteras de Ethereum:

import React, { useState, useEffect } from "react";
import Web3Modal from "web3modal";
import { ethers } from "ethers";

const Web3ModalComponent = () => {
  const [provider, setProvider] = useState(null);

  useEffect(() => {
    async function initWeb3Modal() {
      const web3Modal = new Web3Modal();
      const _provider = await web3Modal.connect();
      setProvider(new ethers.providers.Web3Provider(_provider));
    }

    if (!provider) {
      initWeb3Modal();
    }
  }, [provider]);

  return (
    <div>
      {provider ? (
        <div>Connected to Ethereum</div>
      ) : (
        <div>Connect to your Ethereum wallet</div>
      )}
    </div>
  );
};

export default Web3ModalComponent;

3.4 Crear un componente de una comunidad token-gated

En el directorio src, crea un nuevo archivo llamado TokengatedCommunity.js y añade el siguiente código para crear un componente que permita a los usuarios unirse a la comunidad y ver contenido exclusivo:

import React, { useState, useEffect } from "react";
import { ethers } from "ethers";
import FanToken from "./contracts/FanToken.json";
import TokengatedCommunity from "./contracts/TokengatedCommunity.json";

const TokengatedCommunityComponent = ({ provider }) => {
  const [userAddress, setUserAddress] = useState("");
  const [isMember, setIsMember] = useState(false);
  const [fanTokenContract, setFanTokenContract] = useState(null);
  const [communityContract, setCommunityContract] = useState(null);

  useEffect(() => {
    async function initContracts() {
      if (provider) {
        const signer = provider.getSigner();
        const user = await signer.getAddress();
        setUserAddress(user);

        const fanToken = new ethers.Contract(FanToken.networks[1].address, FanToken.abi, signer);
        setFanTokenContract(fanToken);

        const community = new ethers.Contract(TokengatedCommunity.networks[1].address, TokengatedCommunity.abi, signer);
        setCommunityContract(community);

        const _isMember = await community.isMember(user);
        setIsMember(_isMember);
      }
    }

    initContracts();
  }, [provider]);

  async function joinCommunity() {
    if (communityContract) {
      await communityContract.joinCommunity();
      setIsMember(true);
    }
  }

  return (
    <div>
      {isMember ? (
        <div>
          <h2>Welcome to the exclusive content area!</h2>
          <p>Here, you can access exclusive content and interact with the artist.</p>
        </div>
      ) : (
        <div>
          <h2>Join the Tokengated Community</h2>
          <p>
            To access exclusive content, you must hold at least 1 FTK in your wallet.
          </p>
            <button onClick={joinCommunity}>Join Community</button>
        </div>
    )}
    </div>
     );
  };    

export default TokengatedCommunityComponent;

3.5 Actualizando el componente de la App

Actualiza el archivo src/App.js para incluir los componentes Web3Modal y TokengatedCommunity:

import React from "react";
import Web3ModalComponent from "./Web3Modal";
import TokengatedCommunityComponent from "./TokengatedCommunity";

function App() {
  const [provider, setProvider] = useState(null);

  const handleProvider = (newProvider) => {
    setProvider(newProvider);
  };

  return (
    <div>
      <Web3ModalComponent onProvider={handleProvider} />
      <TokengatedCommunityComponent provider={provider} />
    </div>
  );
}

export default App;

Paso 4: Ejecuta el frontend

Comienza el servidor de desarrollo React para que ejecute el frontend:

npm start

La plataforma de la comunidad token-gated ahora está accesible en http://localhost:3000. Los usuarios pueden conectar sus billeteras Ethereum, unirse a la comunidad y acceder a contenido exclusivo.

Paso 5: Añadir el acceso a un concierto en vivo a TokengatedCommunityComponent

En el directorio src, modifica el archivo TokengatedCommunity.js para crear un componente que permita a los usuarios unirse a la comunidad y acceder al stream exclusivo del concierto en vivo.

Primero, dentro de la función TokengatedCommunityComponent, añade una nueva variable de estado isConcertLive para manejar el estado del concierto en vivo:

const [isConcertLive, setIsConcertLive] = useState(false);

Luego, añade el siguiente hook useEffect dentro de la función TokengatedCommunityComponent, luego del existente hook useEffect, para revisar periódicamente si el concierto está en vivo:

useEffect(() => {
  async function checkConcertStatus() {
    if (communityContract) {
      const liveStatus = await communityContract.isConcertLive();
      setIsConcertLive(liveStatus);
    }
  }

  const intervalId = setInterval(() => {
    checkConcertStatus();
  }, 5000);

  return () => clearInterval(intervalId);
}, [communityContract]);

Actualiza el argumento de retorno de la función TokengatedCommunityComponent para que muestre el stream del concierto en vivo para los usuarios cuando el concierto está en vivo.

return (
  <div>
    {isMember ? (
      <div>
        {isConcertLive ? (
          <div>
            <h2>Welcome to the exclusive live concert!</h2>
            <p>
              Enjoy the live stream and exclusive content only available to
              token holders.
            </p>
            {/* Embed the live concert stream here */}
          </div>
        ) : (
          <div>
            <h2>Exclusive Live Concert Coming Soon</h2>
            <p>
              As a member of the token-gated community, you will have access to
              the live concert when it starts.
            </p>
          </div>
        )}
      </div>
    ) : (
      <div>
        <h2>Join the Tokengated Community</h2>
        <p>
          To access the exclusive live concert, you must hold at least 1 FTK in
          your wallet.
        </p>
        <button onClick={joinCommunity}>Join Community</button>
      </div>
    )}
  </div>
);

Con estos cambios, el TokengatedCommunityComponent ahora permitirá a los usuarios acceder al stream exclusivo del concierto en vivo, cuando esté en vivo.

Paso 6: Añade el estado del concierto al contrato de la comunidad

En el contrato TokengatedCommunity, añade el nuevo estado y función de la variable para administrar el estatus del concierto en vivo:

Añade una nueva variable de estado, isConcertLive para administrar el estatus del concierto en vivo:

bool public isConcertLive;

Añade una nueva función, setConcertStatus para permitir que el dueño del contrato configure el estado del concierto en vivo:

function setConcertStatus(bool _isConcertLive) external onlyOwner {
    isConcertLive = _isConcertLive;
}

Tu contrato TokengatedCommunity actualizado, debería incluir el estado isConcertLive y la función setConcertStatus.

Despliega el contrato actualizado a la red Ethereum usando Truffle, como está descrito en los pasos anteriores.

Repositorio de GitHub

Conclusión

En este tutorial, hemos demostrado cómo crear una plataforma para una comunidad token-gated con una característica exclusiva de conciertos en vivo para los miembros, usando QuickNode como la infraestructura de nodos poderosa y confiable. Hemos cubierto los pasos esenciales para establecer contratos inteligentes, desplegarlos en la red de Ethereum y crear una aplicación front-end React, para que interactúe con los contratos inteligentes.

Completando este tutorial, haz aprendido a cómo construir una aplicación descentralizada que provee contenido exclusivo a los dueños de tokens, como conciertos en vivo, y cómo administrar el acceso a ese contenido, basado en la propiedad del token. La alta performance de los nodos de QuickNode, hace que sea fácil desarrollar y escalar varias aplicaciones blockchain, asegurando interacciones rápidas y confiables con la red de Ethereum.

Puedes extender la plataforma, añadiendo mejoras como chat rooms, foros o ventas de mercancía exclusiva para que tu comunidad interactúe más aún e incentivar el token-holding. Las posibilidades son vastas y puedes aplicar las habilidades que has adquirido a través de este tutorial para construir varias plataformas desarrolladas por tokens y comunidades, mientras aprovechas la infraestructura de QuickNode para una experiencia de desarrollo fluida.

Este artículo es una traducción de Patrick Skinner, hecha por Héctor Botero. Puedes encontrar el artículo original aquí.
Sería genial escucharte en nuestro Discord, puedes contarnos tus ideas, comentarios, sugerencias y dejarnos saber lo que necesitas.
Si prefieres puedes escribirnos a @web3dev_es en Twitter.