No tutorial de hoje eu vou lhe ensinar como criar uma aplicação de frontend que faz upload de arquivos para a rede IPFS usando Node.js e um provedor de serviços web3 chamado Pinata. Usaremos as APIs do Pinata para o envio dos arquivos em um front bem simples, focando na funcionalidade de upload em si. Este tipo de habilidade é muito útil em projetos web3 que dependam muito de arquivos e mídias, como no caso de marketplaces NFT, por exemplo.
Caso você queira saber mais sobre IPFS antes de continuar, recomendo o vídeo abaixo.
Outro ponto importante, além de IPFS, é você já saber o básico de programação em JavaScript, pois não abordaremos isso nesse tutorial.
Se preferir, pode assistir ao vídeo abaixo, ao invés de ler este tutorial, o conteúdo é o mesmo.
#1 – Preparação para o Tutorial
O primeiro passo é você se certificar que possui o Node.js instalado na sua máquina. Se ainda não possui, no vídeo abaixo eu ensino a instalar ele, o Visual Studio Code e o Git, ferramentas importantíssimas para todo desenvolvedor JS.
Depois, você deve criar sua conta no Pinata, é gratuita, basta acessar Pinata.cloud e fazer o seu cadastro.
Uma vez com a conta do Pinata criada, você deve criar uma API Key. Para isso, entre na sua área logada e selecione a opção Api Keys no menu lateral esquerdo, como mostra a imagem abaixo.
Configure as permissões da API Key conforme a sua necessidade ou use a opção admin caso fique na dúvida. Ao clicar em create key irá ser apresentado as informações de acesso à API. Certifique-se de anotar estas informações, pois elas serão informadas apenas uma vez.
Isso é tudo que precisamos para o momento, bora criarmos o projeto.
#2 – Criando o Projeto
O que eu vou fazer aqui vai funcionar com qualquer aplicação Node.js, mas para esse exemplo vou criar uma aplicação Next.js, ok? Se você quiser aprender mais sobre Next.js ou até mesmo fazer essa etapa do projeto seguindo um vídeo ao invés de texto, vou deixar abaixo uma recomendação do meu canal.
Não tem muito mistério o que vamos precisar, comece criando um projeto Next.js com o utilitário Create Next App, usando o comando abaixo.
|
1 |
npx create-next-app pinata-ipfs-example |
Isso irá criar uma aplicação Next.js de exemplo em uma pasta pinata-ipfs-example, podendo o nome ser alterado conforme quiser. O utilitário vai te fazer algumas perguntas na criação, que se você ficar em dúvida, recomendo colocar tudo como NO.
Depois de criada a estrutura inicial do projeto, vamos instalar as dependências que vamos precisar. Vou usar o DotEnv para as variáveis de ambiente e o Axios para a comunicação com a API do Pinata. Existem um SDK próprio do Pinata para Node.js e talvez você possa usar ele. No meu caso, como é uma aplicação de frontend e o SDK depende de poder manipular o file system diretamente, não é lá muito simples de fazer, então não vou usar.
|
1 |
npm i axios dotenv |
Com as dependências instaladas, é hora de configurar as variáveis de ambiente. Crie na raiz do seu projeto um arquivo .env.local com o seguinte conteúdo, substituindo os placeholders pelas informações solicitadas.
|
1 2 |
API_KEY=<sua api key> API_SECRET=<sua api secret> |
Como o .env.local é carregado no backend, quando o Next.js está gerando as páginas para o frontend, precisamos configurá-lo para que injete essas variáveis no resultado final, o que deve ser feito no next.config.js. É um mapeamento bem simples, como abaixo.
|
1 2 3 4 5 6 7 8 9 10 |
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, env: { API_KEY: process.env.API_KEY, API_SECRET: process.env.API_SECRET } } module.exports = nextConfig |
Importante frisar que você não deve colocar chaves de API em projetos client-side (frontend), somente em projetos de backend para que as chaves não fiquem expostas indevidamente, sendo que usei NextJS aqui para simplificar, ao invés de criar um frontend se comunicando com um backend que se comunicaria com a API e devolveria ao front o retorno.
Com isso temos o projeto pronto para ser programador.
#3 – Programando o Upload
A nossa tela será muito simples: um campo de upload. Só isso. Você deve programá-lo no index.js dentro da pasta pages da sua aplicação Next.js, sendo abaixo uma sugestão.
Vamos começar declarando os imports que serão necessários, no topo do index.js.
|
1 2 3 4 |
import { useState } from 'react'; import Head from 'next/head'; import styles from '@/styles/Home.module.css'; import axios from 'axios'; |
Depois, declaramos os states que vão armazenar o arquivo que faremos upload e as mensagens de sistema, respectivamente.
|
1 2 |
const [image, setImage] = useState(""); const [message, setMessage] = useState(""); |
Agora precisamos da função que fará o upload. Nesta função eu montarei um POST para a API do Pinata, informando todos os parâmetros necessários. Novamente: se você está fazendo uma aplicação de backend, poderá fazer algo bem mais simples, usando o SDK do próprio Pinata.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
async function upload() { const formData = new FormData(); formData.append("file", image); const response = await axios({ method: "post", url: "https://api.pinata.cloud/pinning/pinFileToIPFS", data: formData, headers: { 'pinata_api_key': `${process.env.API_KEY}`, 'pinata_secret_api_key': `${process.env.API_SECRET}`, "Content-Type": "multipart/form-data" }, }); return `ipfs://${response.data.IpfsHash}`; } |
O próximo passo é criar os eventos dos inputs que vamos ter na tela: o file upload e o upload button.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function btnUploadClick() { setMessage("uploading..."); upload() .then(result => setMessage(result)) .catch(err => setMessage(err.message)); } function onFileChange(evt) { if (evt.target.files) { setImage(evt.target.files[0]); } } |
No primeiro evento, de click do botão, nós chamamos a função de upload e imprimimos uma mensagem como retorno. Já na segunda função, é para setar o arquivo selecionado pelo usuário no state correspondente.
Agora é hora de criar o front em si. Abaixo uma sugestão bem simples, com apenas os dois campos essenciais.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<> <Head> <title>Pinata IPFS Example</title> <meta name="description" content="Pinata IPFS Example" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={`${styles.main}`}> <div className={styles.description}> <input type='file' id="image" onChange={onFileChange}></input> <button onClick={btnUploadClick}>Upload</button> </div> {message} </main> </> |
Abaixo o resultado esperado após um teste bem sucedido.
Agora se ir lá na sua conta do Pinata, deve encontrar este arquivo na listagem, bem como se acessá-lo através de algum gateway público. Claro, não tente acessar o meu arquivo que aparece na imagem, não garanto que manterei ele no ar, acesse o hash IPFS gerado para o seu arquivo.
E com isso finalizamos mais este tutorial!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.
Te agradeço muito, de verdade, pelos conteúdo. Sou advogado de criptoativos e estou me especializando em smart contracts. A cada dia aprendo mais, e os artigos têm me ajudado bastante em entender como armazena imagens para emissão de coleção de NFT. Vou sempre acompanhando e me mantendo atualizado. Grande abs!
Fico feliz que esteja gostando dos conteúdos Yuri. Segue também o prof. Fernando Lopes. Ele é meu aluno, mas antes disso já era advogado especializado em DeFi, você acha ele no Instagram por profesorfernandolopes