WEB3DEV

Cover image for Uma Página de Cunhagem de NFT em Minutos: A solução simples de que você precisa
Fatima Lima
Fatima Lima

Posted on

Uma Página de Cunhagem de NFT em Minutos: A solução simples de que você precisa

Crie, Hospede e Venda NFTs com Facilidade: Uma Plataforma Revolucionária baseada em ReactJS com Integração com a Third-web

Image description

Projeto Snapshot: Uma Visão Geral deste Projeto de Cunhagem de NFT do ReactJSt

Introdução

Estou animado para apresentar meu mais recente projeto, que é uma plataforma de cunhagem de NFT baseada no ReactJS com integração da biblioteca Third-web. Essa plataforma inovadora permite que os usuários conectem suas carteiras e hospedem facilmente o site de cunhagem de NFT sem a necessidade de conhecimentos de programação. Além disso, pode ser hospedado em poucos minutos, proporcionando uma solução conveniente e sem complicações para os criadores e colecionadores de NFT.

A biblioteca Third-web fornece uma maneira segura e simples para os usuários administrarem suas carteiras e contratos da blockchain. Além disso, a interface amigável da plataforma torna simples para qualquer pessoa começar a trabalhar com contratos NFT. Com a flexibilidade e personalização do ReactJS, esta plataforma pode ser adaptada para atender às necessidades exclusivas de seu projeto ou negócio.

Se você é um artista que espera vender suas criações digitais como NFTs ou um desenvolvedor que deseja expandir seu portfólio, esta plataforma tem todas as características e ferramentas necessárias. É uma solução poderosa que lhe permite começar com NFTs de forma rápida e sem esforço. Portanto, se você estiver pronto para mergulhar no emocionante mundo dos NFTs, esta plataforma é uma excelente opção a ser considerada.

Pré-requisitos para construir e hospedar a página de Cunhagem de NFTs

  1. Compreensão da Tecnologia Blockchain: para trabalhar em um projeto baseado em blockchain, é importante ter uma boa compreensão da tecnologia subjacente. Você deve conhecer o básico de como funciona a blockchain, o que é uma carteira e como são feitas as transações.
  2. Acesso a uma Carteira Blockchain: uma vez que o projeto envolve uma carteira blockchain, você deve ter uma carteira de trabalho que seja compatível com a rede de blockchain que está sendo utilizada. Isto pode incluir carteiras como MetaMask, Coinbase Wallet ou qualquer outra que suporte a blockchain utilizada.

Requisitos-chave para construir e hospedar um projeto ReactJS

  1. Node.js e CLI npm são instalados em sua máquina local para gerenciar pacotes e dependências para seu projeto.
  2. CLI Vercel é instalada em sua máquina local para implantar o projeto em um serviço de hospedagem (a instalação do npm é um pré-requisito para a instalação da Vercel).

Além dos pré-requisitos mencionados acima, o trabalho com projetos de Blockchain e React também requer familiaridade com as testnets (redes de teste).

Implantando seu contrato NFT na Blockchain

Um guia passo a passo para lançar seus próprios objetos criptográficos colecionáveis.

Implantar um drop de NFT na Thirdweb é um processo simples que requer apenas alguns passos. Aqui está um guia passo-a-passo para ajudá-lo a começar:

  1. Primeiro, certifique-se de ter uma conta na Thirdweb e de ter conectado sua carteira à plataforma. Se ainda não o fez, você pode criar uma conta visitando o site da Thirdweb e seguindo o processo de inscrição.
  2. Depois de criar sua conta e conectar sua carteira, vá para a página de criação de drop de NFT na Thirdweb e clique em "NFT Drop" e depois em "Deploy Now". Esta página deve conter um formulário para que você preencha com as informações necessárias para o drop do seu NFT.
  3. Uma vez que você tenha preenchido o formulário e carregado sua imagem NFT, revise as informações para ter certeza de que tudo está correto. Em seguida, selecione a rede apropriada de acordo com suas necessidades. Para testes, use a “Goerli Testnet”. Antes de fazer deploy na “Goerli Testnet” você precisa conseguir algumas faucets (torneiras) para fazer transações (clique aqui para obter as faucets). E depois clique no botão "Deploy Now" para implantar o drop do seu NFT na blockchain.
  4. Finalmente, você precisará confirmar a transação em sua carteira conectada. Isto completará a implantação do drop do seu NFT na blockchain.
  5. Etapas detalhadas para a implantação de contratos NFT pela third-web
  6. A seguir, você precisará carregar os arquivos para seus NFTs. Isto pode incluir imagens, vídeos ou qualquer outro ativo digital que você queira incluir com seus NFTs. Certifique-se de que seus arquivos atendam aos requisitos de tamanho e formato fornecidos pela Thirdweb. Para começar, a Thirdweb oferece opções de upload tanto individuais quanto em massa.

Upload de NFT individual refere-se ao processo de criação e carregamento de um NFT de cada vez. Este pode ser um processo demorado se você tiver muitos NFTs para carregar, mas permite uma abordagem mais personalizada para cada NFT, assegurando que cada item seja cuidadosamente selecionado e apresentado aos compradores potenciais.

Upload de NFTs em massa é um recurso conveniente com o qual um vendedor pode adicionar vários itens de uma vez para sua coleção. Para fazer um upload em massa, os vendedores precisam ter um conjunto de arquivos digitais prontos, tais como imagens ou vídeos. Eles podem então usar uma ferramenta fornecida pela HashLips para gerar NFTs, definir metadados para cada NFT e especificar detalhes tais como divisão de royalties. Algumas plataformas também fornecem templates ou configurações predefinidas para agilizar o processo. Os metadados incluem informações como nome, descrição e outros detalhes sobre o NFT. É importante assegurar que cada NFT seja devidamente selecionado e apresentado aos compradores potenciais.

É isso aí! Você implantou um drop de NFT na Thirdweb com sucesso. A partir daqui, você pode divulgar seu drop e começar a vender seus NFTs para colecionadores ao redor do mundo. Com a plataforma segura e fácil de usar da Thirdweb, você pode estar confiante de que seus NFTs estão em boas mãos.

Nota: ao implantar seu contrato NFT na blockchain Ethereum usando o dashboard da Thirdweb, é importante selecionar a testnet ou a rede principal apropriada. Escolher a rede errada pode resultar em atrasos ou até mesmo na perda de seus NFTs ou outros ativos. Certifique-se de verificar se você selecionou a rede correta antes de prosseguir com o processo de implantação.

Assegurando uma distribuição segura e justa dos NFTs

Como Criar uma Fase de Reivindicação na Thirdweb

Além de implantar um drop de NFT na Thirdweb, você também pode criar uma fase de reivindicação. Uma fase de reivindicação é um conjunto de condições que definem quando e como seus usuários podem cunhar seus tokens.

Para cada fase de reivindicação, você pode definir:

  • Quando a fase de reivindicação iniciará.
  • De quantos tokens você deseja fazer drop.
  • Quanto você deseja cobrar por token.
  • Em que moeda você deseja fazer a cobrança.
  • Quais os endereços de carteira são permitidos para reivindicar tokens (allowlist, lista de permissão).
  • Quantos tokens podem ser reivindicados por transação.
  • Quantos segundos as carteiras precisam esperar entre as reivindicações.

Aqui está um guia passo a passo para ajudá-lo a estabelecer uma fase de reivindicação:

  1. Primeiramente, visite a página de criação de drop de NFT na Thirdweb e clique na opção “Advanced Settings”. Isto permitirá que você personalize as configurações do drop do seu NFT, incluindo a fase de reivindicação.
  2. Nas configurações avançadas, você encontrará a opção de ativar a fase de reivindicação. Uma vez ativada a fase de reivindicação, você precisará definir a duração da fase.
  3. A duração da fase de reivindicação determina o tempo que os coletores têm para reivindicar seus NFTs adquiridos. Você pode definir a duração em horas, dias, ou semanas, dependendo de suas preferências.
  4. Uma vez definida a duração para a fase de reivindicação, salve suas configurações e implante o drop do seu NFT na blockchain, como explicado nas etapas anteriores.
  5. Depois que o drop do seu NFT tiver sido implantado, a fase de reivindicação começará com base na duração que você definiu. Durante esta fase, os colecionadores podem reivindicar seus NFTs comprados, visitando a página do drop do seu NFT na Thirdweb e seguindo o processo de reivindicação.
  6. Como criador do NFT, você deve monitorar a fase de reivindicação para garantir que todos os NFTs comprados sejam reivindicados por seus respectivos proprietários. Quaisquer NFTs não reivindicados serão devolvidos à sua carteira assim que a fase de reivindicação tiver terminado.

Ao estabelecer uma fase de reivindicação do drop do seu NFT na Thirdweb, você pode garantir que os colecionadores tenham tempo suficiente para reivindicar seus NFTs e que seus NFTs sejam distribuídos de forma segura e justa.

Como Copiar Endereços de Contrato de drops de NFTs na Thirdweb

  1. Faça login na sua conta da Thirdweb e navegue até o dashboard.
  2. Clique na opção NFT cujo endereço do contrato você deseja copiar para abrir seus detalhes.
  3. O endereço do contrato será listado na seção "Contract Address" na página de detalhes de drop do NFT. Para copiá-lo, clique no ícone copy localizado ao lado do endereço.

O endereço do contrato, que é necessário para hospedar o website da cunhagem, será agora copiado para sua área de transferência.

Guia passo a passo para instalar um site de Cunhagem de NFTs: Tudo o que você precisa saber

Guia rápido para o lançamento de um site ReactJS da GitHub

  1. Primeiro, você precisará ter o Git instalado em seu computador. Se você ainda não o tem, você pode baixá-lo no site do Git.
  2. Abra seu terminal/command prompt e navegue até o diretório de onde você quer clonar o repositório.
  3. Quando estiver no diretório correto, execute o seguinte comando para clonar o repositório:
git clone https://github.com/ritik-prog/nft-mint-website.git
Enter fullscreen mode Exit fullscreen mode
  1. Uma vez que o repositório tenha terminado a clonagem, navegue para o diretório do projeto, usando o seguinte comando:
cd nft-mint-website
Enter fullscreen mode Exit fullscreen mode
  1. A seguir, será necessário instalar as dependências do projeto. Execute o seguinte comando para instalá-las:
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Finalmente, você pode iniciar o site do ReactJS executando o seguinte comando:
npm start
Enter fullscreen mode Exit fullscreen mode

Isto lançará o site em seu navegador da web padrão. Se o site não abrir automaticamente, você pode navegar até ele digitando localhost:3000 na barra de endereços do seu navegador da web.

É isso aí! Você clonou e lançou com sucesso um site ReactJS do GitHub. A partir daqui, você pode fazer alterações no código e personalizar o site. Vamos agora vincular o contrato da Thirdweb ao site.

Configure o Arquivo de Dados do site para seu contrato

  1. Abra “./source/data.json” no diretório do projeto.

Image description

  1. Edite todos os campos obrigatórios, exceto "headerLogo" e "nftImage".

Nota:- lembre-se de atualizar o endereço do contrato.

  1. Atualize “headerLogo” e “nftImage”.

Image description

Atualize “headerLogo” e “nftImage”

Nota: mude estas imagens em "./src/assets/" e mantenha o mesmo nome e se você for mudar os nomes dos arquivos, não se esqueça de atualizar o arquivo "data.json".

  1. Mude a rede da blockchain para a rede desejada.

Image description

MUDE a REDE BLOCKCHAIN

Nota:- para a mainnet Ethereum, mude “ChainId.Goerli” para “ChainId.Mainnet.” em “./src/index.tsx”.

  1. Visite, se você quiser ver as mudanças.
localhost:3000
Enter fullscreen mode Exit fullscreen mode

Hospedagem ultrarrápida

Um guia passo-a-passo para instalar e usar a CLI Vercel

Para instalar a Vercel em sua máquina, siga estes passos:

  1. Abra um prompt de comando ou terminal em sua máquina.
  2. Digite o seguinte comando para instalar a CLI Vercel:

    npm i -g vercel
    
    1. Uma vez concluída a instalação, você pode verificá-la digitando o seguinte comando:

      vercel -v

Guia passo a passo: Hospedagem do site com a CLI Vercel

  1. Crie uma conta Vercel indo até o site da Vercel e clicando no botão "Sign Up". Siga as instruções para criar sua conta.

  2. Acesse sua conta Vercel a partir da linha de comando, digitando:

vercel login
Enter fullscreen mode Exit fullscreen mode
  1. Siga os prompts para fazer o login usando suas credenciais Vercel.

  2. Mude para seu diretório de projetos React na linha de comando.

cd nft-mint-website
Enter fullscreen mode Exit fullscreen mode
  1. Inicialize seu projeto digitando:
vercel init
Enter fullscreen mode Exit fullscreen mode
  1. Siga os prompts para definir as configurações do seu projeto. Isto incluirá a escolha do nome de seu projeto, região de implantação e outras configurações.

  2. Uma vez iniciado seu projeto, use o comando vercel deploy para implantar seu projeto:

vercel deploy
Enter fullscreen mode Exit fullscreen mode
  1. Siga os prompts para finalizar suas configurações de implantação. Você pode escolher se deseja implantar seu projeto como uma ou construção de produção ou desenvolvimento e escolher outras opções, como definir variáveis de ambiente ou implantar com um domínio personalizado.

  2. Uma vez concluída a implantação, você pode acessar seu site usando o URL fornecido, como https://nft-mint-page-nu.vercel.app/.

É isso aí! Com estas etapas, você poderá entrar facilmente na Vercel e implantar seu site React usando a CLI Vercel.

Conclusão

Agilizando a cunhagem do NFT: Uma solução simples para qualquer pessoa

Concluindo, a criação de um contrato blockchain com a biblioteca ThirdWeb e sua conexão com um site ReactJS personalizado é uma ferramenta poderosa para a criação de aplicativos seguros e descentralizados. Seguindo as etapas descritas neste blog do projeto, você aprendeu como construir um contrato de blockchain, integrá-lo a um site e hospedá-lo na Vercel.

Mas a viagem não termina aqui. Como em qualquer projeto, pode haver desafios e obstáculos ao longo do caminho. Portanto, é essencial buscar apoio e ajuda da comunidade, compartilhar suas experiências e disseminar o conhecimento para outras pessoas que possam estar interessadas.

Portanto, te encorajo a procurar comunidades interessadas em NFTs, compartilhar sua página de cunhagem e pedir feedback e apoio. Seja através da mídia social, fóruns on-line ou outros canais, há muitas maneiras de se conectar com outros que compartilham sua paixão pelos NFTs.

Ao fazer isso, você pode ajudar a promover o uso da tecnologia blockchain e inspirar outros a criar seus próprios aplicativos descentralizados. Portanto, não hesite em pedir apoio e compartilhar o blog do seu projeto com outras pessoas. Juntos, podemos continuar a inovar e explorar as possibilidades da tecnologia blockchain.

Links Importantes

  1. https://nodejs.org/en/
  2. https://thirdweb.com/
  3. https://vercel.com/
  4. https://vercel.com/docs/cli
  5. https://nft-mint-page-nu.vercel.app/
  6. https://github.com/ritik-prog/nft-mint-website/
  7. Etapas detalhadas para a implantação do contrato NFT pela thrid-web (em inglês)

Esse artigo foi escrito por Ritik Makhija e traduzido por Fátima Lima. O original pode ser lido aqui.

Top comments (0)