Desbloqueando Experiências Exclusivas de Shows ao Vivo com Tecnologia Blockchain e o QuickNode
SUMÁRIO
Pré-requisitos
Passo 1: Configurando o projeto
1.1 Instalando dependências
1.2 Criando um novo projeto Truffle
1.3 Instalando a biblioteca OpenZeppelin Contracts
1.4 Criando o contrato FanToken
1.5 Configurando o projeto Truffle
Passo 2: Desenvolvendo um contrato inteligente para a comunidade com acesso tokenizado
2.1 Criando o contrato da comunidade
2.2 Configurando a implantação para o contrato da comunidade
2.3 Implantando o contrato da comunidade
Passo 3: Criando uma interface frontend
3.1 Configurando um projeto React
3.2 Instalando dependências
3.3 Criando um componente Web3Modal
3.4 Criando um componente para a comunidade com acesso tokenizado
3.5 Atualizando o componente App
Passo 4: Executando o frontend
Passo 5: Adicionando acesso para o show ao vivo no componente TokengatedCommunityComponent
Passo 6: Adicionando o status do show ao contrato da comunidade
Repositório no Github
Conclusão
Neste tutorial detalhado, vamos analisar o processo de construção de uma comunidade com acesso tokenizado para shows ao vivo usando o QuickNode. Vamos criar um token personalizado na rede Ethereum, desenvolver um contrato inteligente para a comunidade e projetar uma interface frontend utilizando a API do QuickNode. Esta plataforma permitirá que os organizadores de shows ofereçam acesso exclusivo a shows ao vivo para detentores de tokens.
Pré-requisitos
Compreensão básica de Ethereum, Solidity e contratos inteligentes.
Familiaridade com JavaScript e desenvolvimento Web.
Node.js e npm instalados em sua máquina local.
MetaMask ou outra carteira compatível com Ethereum.
Passo 1: Configurando o projeto
Como nosso primeiro passo, vamos criar um contrato inteligente em Solidity para o token que usaremos posteriormente para o acesso controlado.
1.1 Instalando dependências
Primeiro, certifique-se de ter o Node.js instalado. Recomendo usar a versão mais recente LTS (Suporte de Longo Prazo). Você pode instalá-la com os seguintes comandos:
nvm install --lts
nvm use --lts
Em seguida, instale o Truffle, um popular framework de desenvolvimento para Ethereum, globalmente:
npm install -g truffle
1.2 Criando um novo projeto Truffle
Crie um novo diretório para o seu projeto e inicialize um novo projeto Truffle:
mkdir tokengated-community
cd tokengated-community
truffle init
1.3 Instalando a biblioteca OpenZeppelin Contracts
Para criar o FanToken (FTK) personalizado, usaremos a biblioteca OpenZeppelin Contracts, que fornece uma implementação segura e auditada do padrão de token ERC20. Instale a biblioteca como uma dependência:
npm install @openzeppelin/contracts
1.4 Criando o contrato FanToken
Crie um novo arquivo chamado FanToken.sol no diretório contracts e adicione o seguinte 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 Configurando o projeto Truffle
Abra o arquivo truffle-config.js no diretório raiz do seu projeto e atualize a seção compilers para usar a versão correta do Solidity, que deve coincidir com a versão especificada no seu arquivo FanToken.sol. Neste caso, defina-a como 0.8.0 ou superior:
compilers: {
solc: {
version: "^0.8.0", // Atualize esta linha para a versão correta
settings: {
optimizer: {
enabled: true,
runs: 200
}
}
}
}
Salve o arquivo truffle-config.js.
Passo 2: Desenvolvendo um contrato inteligente para a comunidade com acesso tokenizado
Agora que criamos o contrato FanToken e configuramos corretamente o projeto Truffle, podemos prosseguir com os passos subsequentes para criar o contrato da comunidade com acesso tokenizado e desenvolver a interface frontend para acesso aos shows ao vivo.
2.1 Criando o contrato da comunidade
No diretório contracts, crie um novo arquivo chamado TokengatedCommunity.sol e adicione o seguinte código Solidity para criar um contrato inteligente que governa as regras da comunidade com acesso tokenizado:
// 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 a implantação para o contrato da comunidade
No diretório migrations, crie um novo arquivo chamado 3_deploy_community.js e adicione o seguinte código para implantar o contrato da comunidade:
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"); // Define o valor inicial do token de entrada para 1 FTK
};
2.3 Implantando o contrato da comunidade
Execute o seguinte comando para implantar o contrato da comunidade na rede principal da Ethereum:
truffle migrate --network mainnet
Anote o endereço do contrato da comunidade implantado para uso futuro.
Passo 3: Criando uma interface frontend
O contrato está pronto para uso; agora precisamos de uma interface de usuário (UI).
3.1 Configurando um projeto React
Crie um novo projeto React usando o create-react-app:
npx create-react-app tokengated-community-frontend
cd tokengated-community-frontend
3.2 Instalando dependências
Instale as dependências necessárias para o frontend:
npm install ethers web3modal @openzeppelin/contracts
3.3 Criando um componente Web3Modal
No diretório src, crie um novo arquivo chamado Web3Modal.js e adicione o seguinte código para criar um componente Web3Modal que se conecta às carteiras 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 Criando um componente para a comunidade com acesso tokenizado
No diretório src, crie um novo arquivo chamado TokengatedCommunity.js e adicione o seguinte código para criar um componente que permite aos usuários ingressar na comunidade e visualizar conteúdo exclusivo:
import React, { useState, useEffect } from "react";
import { ethers } from "ethers";
import FanToken from "./contracts/FanToken.json";
import TokengatedCommunity from "./contracts/TokengatedCommunity.json";
const ComponenteComunidadeTokenizada = ({ 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>Bem-vindo à área de conteúdo exclusivo!</h2>
<p>Aqui, você pode acessar conteúdo exclusivo e interagir com o artista.</p>
</div>
) : (
<div>
<h2>Junte-se à Comunidade Tokenizada</h2>
<p>
Para acessar conteúdo exclusivo, você deve possuir pelo menos 1 FTK em sua carteira.
</p>
<button onClick={joinCommunity}>Juntar-se à Comunidade</button>
</div>
)}
</div>
);
};
export default ComponenteComunidadeTokenizada;
3.5 Atualizando o componente App
Atualize o arquivo src/App.js para incluir os componentes Web3Modal e TokengatedCommunity:
import React, { useState } 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;
Passo 4: Executando o frontend
Inicie o servidor de desenvolvimento do React para executar o frontend:
npm start
A plataforma da comunidade tokenizada está agora acessível em http://localhost:3000. Os usuários podem conectar suas carteiras Ethereum, entrar na comunidade e acessar conteúdo exclusivo.
Passo 5: Adicionando acesso para o show ao vivo no componente TokengatedCommunityComponent
No diretório src, modifique o arquivo TokengatedCommunity.js para criar um componente que permite aos usuários entrar na comunidade e acessar o stream exclusivo do show ao vivo.
Primeiro, dentro da função TokengatedCommunityComponent, adicione uma nova variável de estado isConcertLive para gerenciar o status do show ao vivo:
const [isConcertLive, setIsConcertLive] = useState(false);
Em seguida, adicione o seguinte gancho useEffect dentro da função TokengatedCommunityComponent, após o gancho useEffect existente, para verificar periodicamente se o show está ao vivo:
useEffect(() => {
async function checkConcertStatus() {
if (communityContract) {
const liveStatus = await communityContract.isConcertLive();
setIsConcertLive(liveStatus);
}
}
const intervalId = setInterval(() => {
checkConcertStatus();
}, 5000);
return () => clearInterval(intervalId);
}, [communityContract]);
Atualize a declaração de retorno da função TokengatedCommunityComponent para exibir o stream do show ao vivo para os membros quando o show está ao vivo:
return (
<div>
{isMember ? (
<div>
{isConcertLive ? (
<div>
<h2>Bem-vindo ao show ao vivo exclusivo!</h2>
<p>
Aproveite o stream ao vivo e o conteúdo exclusivo disponível
apenas para os detentores de tokens.
</p>
{/* Incorporar o stream do show ao vivo aqui */}
</div>
) : (
<div>
<h2>Show ao Vivo Exclusivo em Breve</h2>
<p>
Como membro da comunidade tokenizada, você terá acesso ao show
ao vivo quando ele começar.
</p>
</div>
)}
</div>
) : (
<div>
<h2>Junte-se à Comunidade Tokenizada</h2>
<p>
Para acessar o show ao vivo exclusivo, você deve possuir pelo
menos 1 FTK em sua carteira.
</p>
<button onClick={joinCommunity}>Juntar-se à Comunidade</button>
</div>
)}
</div>
);
Com essas alterações, o TokengatedCommunityComponent agora permitirá que os usuários acessem a transmissão exclusiva do show ao vivo quando ele estiver disponível.
Passo 6: Adicionando o status do show ao contrato da comunidade
No contrato TokengatedCommunity, adicione a nova variável de estado e a função para gerenciar o status do show ao vivo:
Adicione uma nova variável de estado, isConcertLive, para gerenciar o status do show ao vivo:
bool public isConcertLive;
Adicione uma nova função, setConcertStatus, para permitir que o proprietário do contrato defina o status ao vivo do show:
function setConcertStatus(bool _isConcertLive) external onlyOwner {
isConcertLive = _isConcertLive;
}
Seu contrato TokengatedCommunity atualizado deve incluir a variável de estado isConcertLive e a função setConcertStatus.
Implante o contrato atualizado na rede Ethereum usando o Truffle, conforme descrito nos passos anteriores.
Conclusão
Neste tutorial, demonstramos como criar uma plataforma de comunidade tokenizada com um recurso exclusivo de show ao vivo para os membros, utilizando o QuickNode como infraestrutura poderosa e confiável de nós Ethereum. Cobrimos os passos essenciais para configurar contratos inteligentes, implantá-los na rede Ethereum e criar uma aplicação frontend React para interagir com os contratos inteligentes.
Ao concluir este tutorial, você aprendeu a construir uma aplicação descentralizada que oferece conteúdo exclusivo para detentores de tokens, como shows ao vivo e como gerenciar o acesso a esse conteúdo com base na posse de tokens. Os nós Ethereum de alto desempenho do QuickNode facilitam o desenvolvimento e a escalabilidade de várias aplicações blockchain, garantindo interações rápidas e confiáveis com a rede Ethereum.
Você pode expandir a plataforma adicionando recursos como salas de chat, fóruns ou vendas de mercadorias exclusivas para envolver ainda mais sua comunidade e incentivar a posse de tokens. As possibilidades são vastas e você pode aplicar as habilidades que adquiriu neste tutorial para construir várias plataformas e comunidades alimentadas por tokens, aproveitando a infraestrutura do QuickNode para uma experiência de desenvolvimento perfeita.
Clique aqui para saber mais sobre o QuickNode.
Artigo escrito por Patrick Skinner. Traduzido por Marcelo Panegali.
Top comments (0)