Um guia divertido para começar a usar ĐApps baseados em navegador no IPFS
ĐApps, ou aplicativos descentralizados, estão na moda agora, particularmente na blockchain Ethereum. Mas você sabia que os ĐApps também podem ser executados no Interplanetary File System (IPFS)? Você aposta? E é muito mais fácil do que você pensa para subir um e rodá-lo rapidamente.
Neste post, vamos percorrer as etapas necessárias para obter um ĐApp baseado em IPFS de forma rápida e fácil. Vamos aproveitar algumas novas ferramentas interessantes do navegador IPFS e meu quadrinho online favorito. Ao fazer isso, ajudaremos a arquivar um recurso precioso (xkcd!) para futuros visitantes. Então este post tem tudo: intriga, emoção e um compromisso com o futuro da web!
Arquivando as jóias da web
O objetivo deste tutorial é criar um ‘clone’ web distribuído do site xkcd. Vamos usar o IPFS para buscar imagens de um arquivo de quadrinhos do xkcd e exibi-las em uma forma familiar para os fãs de xkcd.
Existem várias razões pelas quais podemos querer fazer algo assim. Primeiro, eu gosto dos quadrinhos xkcd e estou sempre procurando uma desculpa para brincar com eles. Segundo, xkcd, juntamente com vários outros recursos arquivados, estão disponíveis através dos arquivos IPFS, o que os torna um exemplo útil. Terceiro, e este é importante, construir ĐApp baseado em conteúdo em cima do IPFS pode ajudar a arquivar a web!
O que quero dizer com isso? Bem, as tendências mudam, os interesses diminuem e a Internet é um lugar inconstante. Junte isso aos custos crescentes de manutenção de servidores, atualização de infraestrutura e acompanhamento das últimas tendências, e você terá uma receita para links inativos. O IPFS e a web distribuída são uma ótima maneira de ajudar a combater a podridão de links.
Veja nosso xkcd ĐApp por exemplo. Em um momento, vamos escrever um JavaScript muito simples que carregará um quadrinho xkcd aleatório toda vez que nosso ĐApp for acessado. E assim, toda vez que alguém visita o ĐApp, o peer em execução no seu navegador busca esse quadrinho e armazena em cache temporariamente esse item, possibilitando que outros o recuperem também. Na verdade, quanto mais usamos o ĐApp, melhor ele é capaz de distribuir e arquivar o xkcd.
" Quanto mais acessamos e usamos coisas na web distribuída via IPFS, maior a probabilidade de que permaneçam no longo prazo - twitte "
Essa é uma ideia realmente poderosa: quanto mais acessamos e usamos coisas na web distribuída via IPFS, maior a probabilidade de que permaneçam no longo prazo. E as coisas que são importantes, mas menos populares (como documentos históricos)? É aqui que coisas como o Filecoin ajudarão a diminuir a folga. No mundo do filecoin, em vez de depender da popularidade para preservar documentos e arquivos, você pode pagar à rede para armazenar essas coisas para você. É uma ideia muito legal.
Primeiros Passos
Para aqueles que não podem esperar, o ĐApp completo está disponível no repositório Textile GitHub. Sinta-se à vontade para cloná-lo e acompanhar o código para facilitar a introdução. E como você acabou de economizar algum tempo, por que não assistir a este ótimo vídeo sobre a visão do IPFS de Juan Benet antes de seguir em frente. Você também pode conferir uma versão 'ao vivo' aqui.
Para aqueles que desejam uma abordagem passo a passo, aqui estão algumas etapas de configuração para você começar.
Primeiro, clone nosso modelo vanilla de Dapp de IPFS e mude para o novo diretório:
git clone https://github.com/textileio/dapp-template.git
xkcd-dapp
cd xkcd-dapp
Este modelo é bem simples e tem dependências bastante mínimas. A maioria das dependências de desenvolvimento são apenas para transpilar* JavaScript para que possamos executar nosso ĐApp no navegador. Para obter detalhes sobre todos esses pacotes, consulte seus respectivos repositórios do GitHub ou entre em contato para fazer uma ou duas perguntas.
*[nota: Transpilar é uma mistura de compilar e traduzir]
Então, antes de mais nada, confira o arquivo README.md do repositório. Você notará que este aplicativo funciona melhor com window.ipfs e que você pode instalar a extensão da web IPFS Companion clicando em um dos links.
O IPFS Companion é uma extensão do navegador que simplifica o acesso aos recursos do IPFS executando um peer JavaScript IPFS em seu navegador. Ainda melhor do que isso, ele pode expor um nó IPFS incorporado como window.ipfs em todas as páginas da Web! Isso possibilita que nosso ĐApp detecte se window.ipfs existe e opte por usá-lo em vez de criar nosso próprio nó js-ipfs único. Não é necessário para executar ĐApps, mas faz com que funcionem melhor (mais rápido), e eu recomendo instalá-lo.
Mas não podemos esperar que os usuários de nosso ĐApp instalem uma extensão de navegador antes de poder usar nosso ĐApp. Portanto, existe um bom módulo JavaScript chamado window.ipfs-fallback, que detectará a presença de window.ipfs e retornará automaticamente para baixar a versão mais recente do IPFS do CDN, se não estiver disponível. Portanto, ao criar um ĐApp, é sempre uma boa ideia incluir isso - e você obtém window.ipfs gratuitamente, se disponível. Que legal!
Ok, então apenas para ter certeza de que as coisas estão funcionando bem, vamos em frente e instalar nossas dependências necessárias, fazer o build e executar nosso ĐApp localmente. Digite o seguinte no seu terminal:
yarn install
yarn build
yarn start
Você deve ver um ĐApp bem mínimo (página em branco) com um rodapé e não muito mais. Agora vá em frente e abra seu console de desenvolvedor Javascript (Chrome:Ctl+Shift+J(Command+Option+J on Mac),
Firefox: Ctrl+Shift+K(Command+Option+K on Mac),
Safari: Command+Option+I) . Você deve ver algo como running js-ipfs/0.29.2 com ID Qm{hash} onde Qm{hash} é um hash alfanumérico longo que representa seu id de peer.
Parabéns, você está executando com sucesso um ĐApp na web descentralizada! Agora vamos fazer algo interessante…
Buscando dados na web distribuída
Ok, vamos adicionar algumas funcionalidades ao nosso ĐApp. Começaremos simplesmente buscando um quadrinho xkcd aleatório e exibindo-o em uma página em branco. Simples o suficiente certo? Primeiro, em vez de fazer o yarn start para nosso aplicativo, vamos fazer o yarn watch para que quaisquer alterações que fizermos no JavaScript sejam refletidas automaticamente quando atualizarmos a janela do navegador.
Agora, você pode modificar a função setup em src/main.js com o seguinte código:
const setup = async () => {
// The root IPFS CID for our xkcd archive
const xkcdRoot = '/ipfs/QmS74HhZt3ZekqUDqdttSgMsHwYQ6miDLwGUHy6pp4qLyD'
// Pick and random comic between 1 and 2003 (which is the latest in the archive)
const comicNumber = Math.floor(Math.random() * 2003) + 1
try {
// Create IPFS peer
const ipfs = await getIpfs()
// Connect to public peer pinning xkcd comics (might not be needed)
await ipfs.swarm.connect(
'/dns4/ipfs.carsonfarmer.com/tcp/4002/wss/ipfs/Qmf6Wp6McAKm5oRYUPndLaAs5tnADASyJJZ3HkhzPmJJvY'
)
// Now, fetch files...
const files = await ipfs.files.get(`${xkcdRoot}/${comicNumber}`)
for (let file of files) {
if (file.name.endsWith('.png')) { // We have our image!
// Extract binary file contents
const content = String.fromCharCode.apply(null, file.content)
// Convert to base64 encoded string
const encoded = btoa(content)
// Create new image tag element
const image = document.createElement('img')
image.setAttribute('id', 'image')
// Set image source to data uri from image data
image.setAttribute('src', `data:image/png;base64,${encoded}`)
// Add image to 'main' div
document.getElementById('main').appendChild(image)
break // We have what we want, break outta here
}
}
} catch(err) {
console.log(err)
}
}
Há muitas coisas para analisar aí, mas basicamente o que está acontecendo é:
- As linhas 3 e 5 estão definindo qual quadrinho aleatório buscar (do nosso arquivo)
- As linhas 8 e 10 estão inicializando um nó do peer IPFS e conectando-se a um peer conhecido por fixar o arquivo xkcd (esta segunda etapa nem sempre é necessária, mas eu a adicionei aqui para ajudar a inicializar o ĐApp)
- A linha 14 é realmente a 'mágica' do IPFS ... está buscando os arquivos no CID fornecido e retornando uma promise, que aguardamos e depois fazemos algum trabalho nas linhas 15 a 27 …
- As linhas 15 e 16 simplesmente percorrem os objetos binários retornados da etapa anterior e procuram a imagem png real
- As linhas 18 e 20 convertem os dados da imagem binária em uma string de codificação base64
- E, finalmente, as linhas 22 a 27 criam um elemento de imagem e o adicionam à div 'principal' para exibição.
Feito!
Limpando as coisas
A partir daqui, quaisquer alterações adicionais são simplesmente para tornar o ĐApp mais parecido com a página de quadrinhos original do xkcd.
Não entrarei em detalhes neste post, mas você pode dar uma olhada no repositório xkcd-dapp-demo para obter o exemplo de código completo. Lá, adicionei os botões de navegação e o estilo do site xkcd, juntamente com alguns links para atribuição adequada, informações de licença e outros recursos. Temos até os divertidos comentários ao passar o mouse! É quase tudo JavaScript ES6 vanilla, e eu aproveito bem os padrões async/await para tornar o código agradável e legível.
Então, como você pode ver, é relativamente fácil começar a fazer ĐApps no IPFS. Nosso xkcd ĐApp funciona melhor quando executado:
- a) localmente (via yarn start, por exemplo), e
- b) com a extensão do navegador IPFS Companion habilitada.
Se você quiser, você pode realmente iniciar um daemon IPFS local e executar ipfs add -r dist/, para adicionar todo o ĐApp ao IPFS. Agora, você pode testá-lo através do seu gateway IPFS local: http://localhost:5001/ipfs/Qm{hash}/(se seu código não for idêntico ao meu, seu hash CID pode ser diferente, use a saída do comando ipfs add acima).
Concluindo
Esperamos que nosso modelo forneça um meio rápido e fácil de inicializar ĐApps adicionais e que a comunidade de ĐApps baseados em IPFS continue a crescer. Na Textile, gostaríamos muito de apoiar uma comunidade de ĐApps em torno do IPFS, portanto, se você decidir usar nosso modelo, informe-nos e ficaremos felizes em adicionar um link ao nosso repositório de modelos. Também ficaremos atentos aos forks e tentaremos promovê-los da melhor maneira possível.
Esperamos que você tenha gostado de nossa rápida introdução ao ĐApps no IPFS. Se você gostou, venha nos visitar e saiba mais sobre o que estamos fazendo. Enquanto você está aqui, entre na lista de espera do Textile Photos para solicitar acesso antecipado a uma maneira totalmente nova de controlar suas fotos, que também é executada no IPFS e na web permanente.
Esse artigo é uma tradução de Carson Farmer feita por @bananlabs. Você pode encontrar o artigo original aqui
Oldest comments (0)