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:
Tela sensível ao toque recebe comandos do usuário para tirar uma foto
O software Photo Booth (chamado Sparkbooth) falará com a câmera para agir
O Sparkbooth armazena a foto localmente no computador
O Sparkbooth pergunta ao usuário se ele deseja enviar para um servidor (via web3.storage)
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
O aplicativo fil-photobooth-uploader irá:
validar o nome de usuário e senha
mudar o formato da foto para o que
web3.storage aceitarecupera o token/chave da API do sistema e envia para __ web3. __Armazenar
w__ eb3.storage __ envia a foto para a rede IPFS e faz backup no Filecoin
w__ eb3.storage __ retornará o IPFS Content ID (CID) de volta ao
fil-photo-booth-uploader fil-photo-booth-uploader irá construir a versão http do url CID viaweb3.storage gateway IPFSfil-photo-booth-uploader retorna uma mensagem de sucesso para o Sparkbooth 7
Sparkbooth recebe uma mensagem de sucesso: “Sua foto é enviada para IPFS via
web3.storage . :-)” junto com o URL da foto
Sparkbooth exibe o código QR gerado na tela
O olhar? É como uma cabine de fotos normal:
Um exemplo da url IPFS CID:
https://bafybeiei7zadrztflc6krunhvqr3umzre7xjxfzvmyjs2ob2w7yykq63ea.ipfs.w3s.link/20221104172648.jpg |
---|
Um exemplo:
Todo o fluxo se parece com isso:
Para saber mais sobre IPFS e CIDs, visite
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
- Criar uma
web3.storage conta através do seuGithubGenericName conta ou e-mail
- Vá para Conta > Token de API
- Crie um novo API Token, nomeie-o como quiser (por exemplo, Filecoin Web Summit 2022)
- Copie a chave API usando o botão copiar
- 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).
- Primeiro vá para
github.com (inscreva-se para uma nova conta se você não tiver uma)
- 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.
- 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.
- Crie um novo aplicativo e coloque o nome do evento nele.
- Provavelmente precisaremos de um novo aplicativo para cada evento.
- 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.
- 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.
- 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.
- 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”.
- 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.
- 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. \
- Dirigir a
Sparkbooth.com . DownloadSparkboot 7 DSLR , pagar parataxa de licença ou use o teste.
- Abra o Sparkbooth e confirme sua compra.
- Quando você abrir o aplicativo, ele será maximizado, mas você pode pressionar “ESC” para sair. Vá para as configurações no canto superior esquerdo:
- 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)
- 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! Cliqueaqui 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
Algumas sugestões de melhoria
O aplicativo não é perfeito! Existem algumas áreas que podem ser melhoradas:
- 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.
- 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?
- 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.
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