Pular para o conteúdo principal

IPFS para interfaces de usuário descentralizadas

ipfs
dapps
frontend
Iniciante
Ori Pomerantz
29 de junho de 2024
5 minutos de leitura

Você escreveu um novo aplicativo descentralizado (dapp) incrível. Você até escreveu uma interface de usuário para ele. Mas agora você tem medo de que alguém tente censurá-lo derrubando sua interface de usuário, que está em apenas um servidor na nuvem. Neste tutorial, você aprenderá como evitar a censura colocando sua interface de usuário no sistema de arquivos interplanetário (IPFS) (opens in a new tab) para que qualquer pessoa interessada possa fixá-la em um servidor para acesso futuro.

Você poderia usar um serviço de terceiros, como o Fleek (opens in a new tab), para fazer todo o trabalho. Este tutorial é para pessoas que querem fazer o suficiente para entender o que estão fazendo, mesmo que dê mais trabalho.

Começando localmente

Existem vários provedores de IPFS de terceiros (opens in a new tab), mas é melhor começar executando o IPFS localmente para testes.

  1. Instale a interface de usuário do IPFS (opens in a new tab).

  2. Crie um diretório com o seu site. Se você estiver usando o Vite (opens in a new tab), use este comando:

    pnpm vite build

  3. No IPFS Desktop, clique em Import > Folder (Importar > Pasta) e selecione o diretório que você criou na etapa anterior.

  4. Selecione a pasta que você acabou de enviar e clique em Rename (Renomear). Dê a ela um nome mais significativo.

  5. Selecione-a novamente e clique em Share link (Compartilhar link). Copie a URL para a área de transferência. O link será semelhante a https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Clique em Status. Expanda a guia Advanced (Avançado) para ver o endereço do gateway. Por exemplo, no meu sistema, o endereço é http://127.0.0.1:8080.

  7. Combine o caminho da etapa do link com o endereço do gateway para encontrar o seu endereço. Por exemplo, para o exemplo acima, a URL é http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Abra essa URL em um navegador para ver o seu site.

Fazendo o upload

Então, agora você pode usar o IPFS para servir arquivos localmente, o que não é muito empolgante. O próximo passo é torná-los disponíveis para o mundo quando você estiver offline.

Existem vários serviços de fixação (pinning) (opens in a new tab) bem conhecidos. Escolha um deles. Qualquer que seja o serviço que você usar, você precisará criar uma conta e fornecer a ele o identificador de conteúdo (CID) no seu IPFS Desktop.

Pessoalmente, achei o 4EVERLAND (opens in a new tab) o mais fácil de usar. Aqui estão as instruções para ele:

  1. Navegue até o painel (opens in a new tab) e faça login com sua carteira.

  2. Na barra lateral esquerda, clique em Storage > 4EVER Pin.

  3. Clique em Upload > Selected CID. Dê um nome ao seu conteúdo e forneça o CID do IPFS Desktop. Atualmente, um CID é uma string que começa com Qm seguida por 44 letras e dígitos que representam um hash codificado em base-58 (opens in a new tab), como QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, mas é provável que isso mude (opens in a new tab).

  4. O status inicial é Queued (Na fila). Recarregue até que mude para Pinned (Fixado).

  5. Clique no seu CID para obter o link. Você pode ver meu aplicativo aqui (opens in a new tab).

  6. Talvez seja necessário ativar sua conta para mantê-la fixada por mais de um mês. A ativação da conta custa cerca de US$ 1. Se você a fechou, saia e faça login novamente para ser solicitado a ativar de novo.

Usando a partir do IPFS

Neste ponto, você tem um link para um gateway centralizado que serve o seu conteúdo IPFS. Em suma, sua interface de usuário pode estar um pouco mais segura, mas ainda não é resistente à censura. Para uma verdadeira resistência à censura, os usuários precisam usar o IPFS diretamente de um navegador (opens in a new tab).

Depois de instalar isso (e com o IPFS Desktop funcionando), você pode acessar /ipfs/<CID> (opens in a new tab) em qualquer site e obterá esse conteúdo, servido de maneira descentralizada.

Desvantagens

Você não pode excluir arquivos IPFS de forma confiável, portanto, enquanto estiver modificando sua interface de usuário, provavelmente é melhor deixá-la centralizada ou usar o sistema de nomes interplanetário (IPNS) (opens in a new tab), um sistema que fornece mutabilidade sobre o IPFS. É claro que qualquer coisa que seja mutável pode ser censurada, no caso do IPNS, pressionando a pessoa com a chave privada à qual ele corresponde.

Além disso, alguns pacotes têm problemas com o IPFS, então, se o seu site for muito complicado, essa pode não ser uma boa solução. E, claro, qualquer coisa que dependa de integração com o servidor não pode ser descentralizada apenas por ter o lado do cliente no IPFS.

Descoberta via ENS

Se você apontar um nome ENS (como vitalik.eth) para o seu site, ele será considerado uma página da web totalmente descentralizada e será fixado automaticamente pelo serviço dweb3.wtf (opens in a new tab), além de se tornar pesquisável por meio do mecanismo de busca web3compass.net (opens in a new tab), de forma muito semelhante ao que o DuckDuckGo, Brave Search ou Google fazem para a web tradicional.

Conclusão

Assim como o Ethereum permite que você descentralize o banco de dados e os aspectos da lógica de negócios do seu dapp, o IPFS permite que você descentralize a interface de usuário. Isso permite que você feche mais um vetor de ataque contra o seu dapp.

Veja aqui mais do meu trabalho (opens in a new tab).