Como construir uma cabine de fotos interplanetária

Aprenda como integrar uma cabine fotográfica ao IPFS e tornar sua selfie interplanetária com o web3.storage.

Durante o Web Summit 2022, os eventos e a equipe criativa da Filecoin montaram um incrível estande de exibição na convenção que atraiu mais de 3.500 visitantes que desejam aprender mais sobre Web3, o Sistema de Arquivos InterPlanetários (IPFS) e as soluções de armazenamento distribuído da rede Filecoin.

A Filecoin oferece uma ampla gama de soluções para armazenar e manter arquivos na Web3 via protocolo IPFS. Um dos mais populares e fáceis de usar é o web3.Storage, uma solução “one API call to IPFS and Filecoin” para desenvolvedores.

O IPFS é um protocolo da web que permite compartilhar arquivos em uma rede peer-to-peer e compartilhar dados em uma rede de computadores distribuídos. A Filecoin criou um protocolo de código aberto que permite que um mercado de armazenamento persista arquivos no IPFS por muito tempo e com baixo custo. Esta solução resolve o problema de armazenamento em Web3 e atualiza a internet como a conhecemos para lidar com desafios como a comunicação interplanetária.

A comunicação interplanetária tem que incluir selfies! Aprenda a usar um aplicativo node.js leve para fazer um software de cabine de fotos chamado Sparkbooth para se conectar ao web3.storage e fazer upload de sua selfie para o IPFS.

Como funciona?

As principais partes das cabines de fotos são: uma câmera digital, algumas luzes, um computador com tela sensível ao toque, algum software que controla a câmera para tirar fotos e a capacidade de enviá-las para a rede IPFS e Filecoin.

Um fluxo de eventos se parece com isso:

1. Tela sensível ao toque recebe comandos do usuário para tirar uma foto

   
   

2. O software Photo Booth (chamado Sparkbooth) falará com a câmera para agir

   
   

3. O Sparkbooth armazena a foto localmente no computador

   
   

4. O Sparkbooth pergunta ao usuário se ele deseja enviar para um servidor (via web3.storage)

   
   

5. Sparkbooth envia a foto, nome de usuário, senha e mensagem de sucesso em uma chamada de API para * fil-photo-booth-uploader * aplicativo nodejs personalizado

   
   

6. O aplicativo fil-photobooth-uploader irá:

   1. validar o nome de usuário e senha

   2. mudar o formato da foto para o que web3.storage aceita

   3. recupera o token/chave da API do sistema e envia para __ web3. __Armazenar

   4. w__ eb3.storage __ envia a foto para a rede IPFS e faz backup no Filecoin

   5. w__ eb3.storage __ retornará o IPFS Content ID (CID) de volta ao fil-photo-booth-uploader

   6. fil-photo-booth-uploader irá construir a versão http do url CID via web3.storage gateway IPFS

   7. fil-photo-booth-uploader retorna uma mensagem de sucesso para o Sparkbooth 7

      
      

7. Sparkbooth recebe uma mensagem de sucesso: “Sua foto é enviada para IPFS via web3.storage . :-)” junto com o URL da foto

   
   

8. Sparkbooth exibe o código QR gerado na tela

O olhar? É como uma cabine de fotos normal:

Um exemplo da url IPFS CID:

Um exemplo:

Todo o fluxo se parece com isso:

Para saber mais sobre IPFS e CIDs, visite proto.escola .

Guia passo a passo

Pré-requisitos

Existem algumas coisas que você pode precisar para executar este tutorial:

• 📸 Câmera - qualquer Canon moderna
• 💻 Computador - qualquer desktop multifuncional com tela sensível ao toque ou laptop com tela sensível ao toque
• 👨🏻‍💻 Software Photo Booth - Sparkbooth 7
• 🤖 Um servidor de aplicativos - estou usando o Heroku por conveniência
• 📦 Produto habilitado para IPFS - uma conta web3.storage
• 🌎 Conexão com a Internet - uma forma de falar com a WWW com ou sem fio (wi-fi)\

Etapa 1, configuração do Web3.Storage

1. Criar uma web3.storage conta através do seu GithubGenericName conta ou e-mail

2. Vá para Conta > Token de API

3. Crie um novo API Token, nomeie-o como quiser (por exemplo, Filecoin Web Summit 2022)

4. Copie a chave API usando o botão copiar

5. Guarde isto para mais tarde Terá de colocar isto na aplicação fil-photo-booth-uploader como uma variável de ambiente

Etapa 2: implantação do aplicativo nodejs

Para que o Sparkbooth 7 e o web3.storage conversem bem, precisaremos de uma ajudinha para traduzir seus idiomas. O aplicativo nodejs nos ajudará a conseguir isso. Ele precisará ser hospedado em um servidor e estamos usando o Heroku para isso (se você conhece uma maneira nativa do Web3 de hospedá-lo, envie-me um DM. Eu adoraria tentar).

1. Primeiro vá para github.com (inscreva-se para uma nova conta se você não tiver uma)

2. Visite a Filecoin Photo Booth Uploader e, em seguida, clique em Fork. Isso permitirá que você copie o código-fonte para sua própria conta ou repositório e conecte-o ao Heroku.

3. Inscreva-se com um Conta Heroku . O Heroku é como o AWS, uma plataforma de desenvolvedor centralizada que ajuda a executar aplicativos ou servidores quase de graça.

4. Crie um novo aplicativo e coloque o nome do evento nele.

5. Provavelmente precisaremos de um novo aplicativo para cada evento.

6. Em “Método de implantação”, escolha GitHub e entre na sua conta do GitHub. Autorize o Heroku a extrair código para si mesmo para criar o aplicativo e executar o servidor.

7. Em “Connect to GitHub”, procure o nome do repositório que você acabou de bifurcar (ex. fil-photo) e conecte o repositório de código.

8. Deixe todas as configurações e clique em “Deploy Branch” para iniciar a primeira compilação. O Heroku é inteligente o suficiente para reconhecer o tipo de aplicativo. Em seguida: construa e implante-o.

9. No entanto, antes que o servidor esteja funcionando, precisaremos colocar o nome de usuário, a senha e o web3.storage API Token no ambiente do servidor. O Heroku pode acessá-lo com segurança sem expô-los à Internet. Vá para “Configuração” e depois “Vars de configuração”.

10. Coloque as seguintes configurações, troque SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN por senha, nome de usuário e web3.storage token de API respectivamente. O nome tem que ser exatamente como acima.

11. O aplicativo deve estar em execução agora! Você pode ir para “Domínios” em “Configurações” para encontrar o URL para colocar no sparkbooth 7 mais tarde.

Etapa 3: Configuração do Sparkbooth 7

A etapa final é preparar o software no laptop da cabine de fotos para conversar com nosso aplicativo nodejs personalizado para concluir o fluxo de configuração. \

1. Dirigir a Sparkbooth.com . Download Sparkboot 7 DSLR , pagar para taxa de licença ou use o teste.

2. Abra o Sparkbooth e confirme sua compra.

3. Quando você abrir o aplicativo, ele será maximizado, mas você pode pressionar “ESC” para sair. Vá para as configurações no canto superior esquerdo:

4. Configure “Enviar para conta” e digite o nome de usuário e a senha que você gostaria de usar. A “URL do serviço” precisa ser o endereço do aplicativo Heroku + “/upload-w3s”. (por exemplo: http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. Você pode testar a conexão usando o botão de teste. Isso resultará em uma mensagem de falha, mas a chamada de API ainda passará para o aplicativo Heroku e colocará uma foto de teste em seu web3.storage conta. Você pode verificar a imagem de teste em sua conta web3.storage. Se você puder ver a foto do “teste da cabine de fotos”, a configuração foi bem-sucedida! Clique aqui checar.

w3up beta em breve

Este aplicativo foi criado em 2022 e usa as APIs web3.storage existentes. No momento em que este livro foi escrito, havia novas APIs w3up beta disponíveis em web3.storage, que inclua componentes da web de front-end para várias estruturas . Isso tornará ainda mais fácil começar a escrever aplicativos que usam IPFS.

Algumas sugestões de melhoria

O aplicativo não é perfeito! Existem algumas áreas que podem ser melhoradas:

1. Segurança

Mesmo que isso seja apenas um truque para mostrar o terreno, a segurança do aplicativo nodejs não é ideal. A validação das senhas e do nome de usuário na lógica do aplicativo não é preferida. Acredito que devemos colocar o aplicativo atrás de um firewall ou gateway de API que valide a autorização no cabeçalho antes de passar a chamada para nosso aplicativo.

2. Experiência

O Sparkbooth 7 é ótimo, mas a interface do usuário parece bastante limitada. Seria bom se pudéssemos personalizar isso um pouco mais. Talvez um software de cabine fotográfica de código aberto possa nos ajudar a conseguir isso?

3. Galeria de Fotos Recentes

Potencialmente, poderíamos usar um computador separado para mostrar as fotos mais recentes aos visitantes. Eles podem selecionar a foto que gostariam de enviar por e-mail para si mesmos, exibir o código QR novamente ou compartilhá-lo nas mídias sociais. Isso envolverá a construção de um front-end para o fil-photo-booth-uploader, que pode ser um projeto muito interessante para um desenvolvedor front-end.

4. Use um back-end de aplicativo descentralizado. Talvez alguém como Fluence ou IPVM possa ajudar.

Conclusão

Durante os três dias do Web Summit, a cabine de fotos da Filecoin teve um tempo de atividade de 99% e uma interrupção de 1% devido a problemas de conectividade com a Internet na convenção. No total, a cabine de fotos publicou 934 fotos na Rede Filecoin. Isso é quase mil selfies que estão prontas para serem interplanetárias, tudo graças ao serviço muito prático de web3.storage!

A cabine de fotos também é famosa. No terceiro dia, um repórter da CNN também entrevistou o estande, (sim, o estande está ficando famoso… não eu).

Repórter da CNN entrevistando o Filecoin Photo Booth no Web Summit, Lisboa, Portugal

Sinta-se à vontade para usar este guia para construir sua própria cabine fotográfica interplanetária para seus eventos, reuniões, encontros, festas ou apenas por diversão.

A rede Filecoin agora tem 16EiB de capacidade de armazenamento e mais de 300PiB de dados foram armazenados nela. Há muitas maneiras de contribuir ou usar este projeto. Saiba mais sobre como se envolver aqui .