Tutorial Web 3 – Como carregar e enviar arquivos na rede IPFS usando NodeJs

A Web3 é um território fascinante e desconhecido. Recentemente, decidi aprender algumas coisas sobre as tecnologias Web3. Embora eu tivesse algumas idéias básicas sobre a blockchain e NFTs, nunca tentei escrever um programa para a Web3.

Então decidi aprender sobre a tecnologia Web3 e escrever um programa simples que pudesse fazer upload de arquivos para a rede IPFS.

O que é o IPFS?

Antes de começar, se você não souber o que é IPFS, IPFS significa InterPlanetary File System. É um protocolo para salvar arquivos em uma rede descentralizada de computadores. Se você fizer o upload de um arquivo para o Google Drive, você faz o upload de seu arquivo para um servidor pertencente ao Google. O servidor pertence ao Google e por isso é um armazenamento centralizado..

No entanto, ao contrário do Google Drive, o protocolo IPFS armazena arquivos em computadores de todo o mundo. Não há um único proprietário para a rede ou para os computadores que armazenam os dados. Portanto, ele é descentralizado. É um pouco semelhante ao protocolo BitTorrent usado para compartilhamento de arquivos.

No entanto, ao contrário do Google Drive, os dados que você carrega no IPFS não são privados. Portanto, você não deve carregar ou armazenar dados sensíveis na rede IPFS. Além disso, uma vez que você carrega dados na rede IPFS, eles permanecem para sempre na rede IPFS, e você não pode editar ou apagar seus dados. Se você quiser editar, você precisa fazer novamente o upload de uma cópia modificada e utilizá-la em seu lugar.

Devido a esta natureza, a rede IPFS é usada para salvar imagens NFT também.

Agora que você tem uma ideia básica sobre o protocolo IPFS, vamos tentar escrever um programa usando NodeJs para carregar um arquivo na rede IPFS. Você precisará ter algum conhecimento básico em JavaScript para entender o código. E você vai precisar de um editor de texto como o VsCode.

Criar um novo projeto NodeJs

Crie um novo projeto NodeJs executando,

npm init -y

Você terá um novo projeto em seu computador local.

Instale as dependências

npm install nft.storage node-fetch notenv

Obter uma chave API NFT.storage

NFT.storage é um serviço (gateway IPFS) que facilita o carregamento e o envio de arquivos pela rede IPFS por meio de sua API, pois ela fará o trabalho pesado.

Você também pode usar a biblioteca ipfs-js para carregar e enviar arquivos por meio do protocolo IPFS.

Você pode facilmente se inscrever no nft.storage usando sua conta GitHub e obter uma chave API.

Salve a chave API que você obteve do nft.storage em um arquivo .env.

Carregando seu arquivo no IPFS

Armazenei um arquivo png simples como test.png na pasta do projeto que enviaremos para a rede IPFS.

Estamos usando o seguinte código para carregar o arquivo na rede IPFS. É simples e autoexplicativo.

import { NFTStorage, File } from "nft.storage";
import fs from "fs";
import dotenv from "dotenv";
import fetch from "node-fetch";

dotenv.config();

const { NFT_STORE_API_KEY } = process.env;
const storeAsset = async () => {
  const client = new NFTStorage({ token: NFT_STORE_API_KEY });
  const metaData = await client.store({
    name: "Example NFT",
    description: "Testing IPFS network",
    image: new File([await fs.promises.readFile("test.png")], "test.png", {
      type: "image/png",
    }),
  });

  return metaData.url;
};

Além da imagem, também podemos carregar alguns metadados em formato JSON associados ao arquivo que carregamos para a rede IPFS. No exemplo, estamos adicionando um nome e uma descrição como metadados. O link para o arquivo da imagem estará na propriedade da imagem dos metadados.

A função retornará o url ipfs do seu arquivo metadados.json carregado. O arquivo metadata.json contém todas as informações sobre o arquivo que você acabou de carregar na rede IPFS (nome, descrição, imagem, etc.).

A propriedade da imagem da json terá o link para o arquivo de imagem que você acabou de carregar.

ipfs://bafyreice4ib5is4zjv3kugad5rzlvgsojuq767qbys6ppwy5itys3gi2ze/metadata.json

Ótimo, você carregou com sucesso um arquivo para a rede IPFS. Em breve ele estará no armazenamento de outra pessoa para sempre.

Abrindo um arquivo IPFS a partir do navegador

Ao contrário de um URL comum, você não pode abrir diretamente um url ipfs a partir de seu navegador. Você precisará usar um gateway, tal como o gateway IPFS da CloudFlare ou o ipfs.io.

Você precisa substituir o protocolo de seu link IPFS (ipfs://) por https://ips.io ou https://clourflare-ipfs.com e você poderá ler o conteúdo do arquivo de metadados.

O seguinte código substituirá o protocolo ipfs:// de seu url IPFS por um que possa ser acessado através do gateway IPFS da CloudFlare.

const ipfsToHttp = (url) => {
  return url.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/");
};

Se você ler o arquivo metadados.json, a propriedade da imagem do arquivo JSON conterá o link para o arquivo de imagem que você acabou de carregar.

Podemos usar o fetch para recuperar o arquivo metadata.json.

const getMetaData = async (url) => {
  const metaData = fetch(url)
    .then((response) => response.json())
    .then((data) => {
      return data;
    });

  return metaData;
};

A saída seria assim

{
    "name":"Example NFT",
    "description":"Testing storing",
    "image":"ipfs://bafybeid5klxzkhkc2qe36s2tqu5anysou3y5fpet2ovfihtr2l76hrnybu/test.jpeg"
}

Agora tudo o que você precisa fazer é converter o link IPFS da propriedade de imagem para um link de protocolo http por meio do gateway IPFS da CloudFlare e você poderá acessar seu arquivo de imagem que acabou de carregar na rede IPFS.

https://cloudflare-ipfs.com/ipfs/bafybeid5klxzkhkc2qe36s2tqu5anysou3y5fpet2ovfihtr2l76hrnybu/test.jpeg

Você pode encontrar o código completo no repositório GitHub – https://github.com/rukshn/web3-lessons

Esse artigo foi escrito por RUKSHAN e traduzido por Fátima Lima. Seu original pode ser lido aqui.