Cómo construir un fotomatón interplanetario

Aprenda a integrar una cabina de fotos a IPFS y haga que su selfie se vuelva interplanetario con web3.storage.

Durante Web Summit 2022, los eventos y el equipo creativo de Filecoin instalaron un stand de exhibición increíble en la convención que atrajo a más de 3500 visitantes que deseaban obtener más información sobre Web3, el Sistema de archivos interplanetarios (IPFS) y las soluciones de almacenamiento distribuido de la red Filecoin.

Filecoin ofrece una amplia gama de soluciones para almacenar y conservar archivos en Web3 a través del protocolo IPFS. Uno de los más populares y fáciles de usar es web3.Storage, una solución de "una llamada API a IPFS y Filecoin" para desarrolladores.

IPFS es un protocolo web que permite compartir archivos en una red peer-to-peer y compartir datos en una red informática distribuida. Filecoin creó un protocolo de código abierto que permite que un mercado de almacenamiento conserve archivos en IPFS durante mucho tiempo y con poco costo. Esta solución resuelve el problema de almacenamiento en Web3 y actualiza Internet tal como lo conocemos para manejar desafíos como la comunicación interplanetaria.

¡La comunicación interplanetaria tiene que incluir selfies! Aprenda a usar una aplicación liviana de node.js para hacer un software de fotomatón llamado Sparkbooth para conectarse a web3.storage y cargar su selfie a IPFS.

¿Como funciona?

Las partes principales de los fotomatones son: una cámara digital, algunas luces, una computadora con pantalla táctil, algún software que controla la cámara para tomar fotos y la capacidad de subirlas a la red IPFS y Filecoin.

Un flujo de eventos se ve así:

1. La pantalla táctil recibe comandos del usuario para tomar una foto

   
   

2. El software Photo Booth (llamado Sparkbooth) hablará con la cámara para tomar medidas

   
   

3. Sparkbooth almacena la foto localmente en la computadora

   
   

4. Sparkbooth pregunta al usuario si desea enviar a un servidor (a través de web3.storage)

   
   

5. Sparkbooth envía la foto, el nombre de usuario, la contraseña y el mensaje de éxito en una llamada API a * fil-photo-booth-uploader *aplicación nodejs personalizada

   
   

6. La aplicación fil-photobooth-uploader:

   1. validar el nombre de usuario y la contraseña

   2. cambiar el formato de la foto a lo que web3.almacenamiento acepta

   3. recupera el token/clave API del sistema y lo envía a __web3. __Almacenamiento

   4. w__ eb3.storage __ envía la foto a la red IPFS y realiza una copia de seguridad en Filecoin

   5. w__ eb3.storage __ devolverá el ID de contenido (CID) de IPFS al fil-photo-booth-uploader

   6. fil-photo-booth-uploader construirá la versión http de la URL de CID a través de web3.almacenamiento puerta de enlace IPFS

   7. fil-photo-booth-uploader devuelve un mensaje de éxito a Sparkbooth 7

      
      

7. Sparkbooth recibe un mensaje de éxito: "Su foto se envía a IPFS a través de web3.almacenamiento . :-)” junto con la URL de la foto

   
   

8. Sparkbooth muestra el código QR generado en la pantalla

¿La mirada? Es como una cabina de fotos normal:

Un ejemplo de la URL del CID de IPFS:

Un ejemplo:

Todo el flujo se ve así:

Para obtener más información sobre IPFS y CID, visite proto.escuela .

Guía paso por paso

requisitos previos

Hay algunas cosas que puede necesitar para ejecutar este tutorial:

• 📸 Cámara: cualquier Canon moderna
• 💻 Computadora: cualquier computadora de escritorio todo en uno con pantalla táctil o una computadora portátil con pantalla táctil
• 👨🏻‍💻 Software de fotomatón - Sparkbooth 7
• 🤖 Un servidor de aplicaciones: estoy usando Heroku por conveniencia
• 📦 Producto habilitado para IPFS: una cuenta web3.storage
• 🌎 Conexión a Internet: una forma de hablar con WWW, ya sea por cable o inalámbrica (wifi)\

Paso 1, Web3.Configuración de almacenamiento

1. Crear un web3.almacenamiento cuenta a través de su Github cuenta o correo electronico

2. Vaya a Cuenta > Token API

3. Cree un nuevo token API, asígnele el nombre que desee (por ejemplo, Filecoin Web Summit 2022)

4. Copie la clave API usando el botón de copiar

5. Guarde esto para más tarde. Deberá poner esto en la aplicación fil-photo-booth-uploader como una variable de entorno.

Paso 2: implementación de la aplicación nodejs

Para que Sparkbooth 7 y web3.storage se comuniquen bien, necesitaremos un poco de ayuda para traducir sus idiomas. La aplicación nodejs nos ayudará a lograr esto. Tendrá que estar alojado en un servidor, y estamos usando Heroku para ello (si conoce una forma nativa de Web3 para alojarlo, envíeme un mensaje privado. Me encantaría probar).

1. Primero ve a github.com (regístrese para obtener una nueva cuenta si no tiene una)

2. Visita el Cargador de cabina de fotos de Filecoin y luego haga clic en Fork. Esto le permitirá copiar el código fuente a su propia cuenta o repositorio y le permitirá conectarlo a Heroku.

3. Regístrese con un cuenta heroku . Heroku es como AWS, una plataforma de desarrollo centralizada que ayuda a ejecutar aplicaciones o servidores casi gratis.

4. Cree una nueva aplicación y ponga el nombre del evento en ella.

5. Es probable que necesitemos una nueva aplicación para cada evento.

6. En "Método de implementación", elija GitHub y luego inicie sesión en su cuenta de GitHub. Autorice a Heroku para que extraiga el código en sí mismo para crear la aplicación y ejecutar el servidor.

7. En "Conectarse a GitHub", busque el nombre del repositorio que acaba de bifurcar (por ejemplo, fil-photo) y luego conecte el repositorio de código.

8. Deje todas las configuraciones y haga clic en "Implementar rama" para iniciar la primera compilación. Heroku es lo suficientemente inteligente como para poder reconocer el tipo de aplicación. Siguiente: compilarlo e implementarlo.

9. Sin embargo, antes de que el servidor esté funcionando, necesitaremos poner el nombre de usuario, la contraseña y el web3.almacenamiento Token API en el entorno del servidor. Heroku puede acceder a él de forma segura sin exponerlos a Internet. Vaya a "Configuración" y luego a "Config Vars".

10. Coloque las siguientes configuraciones, cambie SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN con contraseña, nombre de usuario y web3.almacenamiento token api respectivamente. El nombre tiene que ser exactamente como el anterior.

11. ¡La aplicación debería estar ejecutándose ahora! Puede ir a "Dominios" en "Configuración" para encontrar la URL para colocarla en Sparkbooth 7 más adelante.

Paso 3: Configuración de Sparkbooth 7

El paso final es preparar el software en la computadora portátil de la cabina de fotos para hablar con nuestra aplicación nodejs personalizada para completar el flujo de configuración. \

1. Dirigirse a Sparkbooth.com . Descargar Cabina de chispas 7 cámara réflex digital , paga por derechos de licencia o utilizar la versión de prueba.

2. Abra Sparkbooth y confirme su compra.

3. Cuando abra la aplicación, se maximizará, pero puede presionar "ESC" para salir. Vaya a la configuración en la parte superior izquierda:

4. Configure "Enviar a la cuenta" y luego ingrese el nombre de usuario y la contraseña que le gustaría usar. La "URL del servicio" debe ser la dirección de la aplicación Heroku + "/upload-w3s". (p.ej http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. Puede probar la conexión usando el botón de prueba. Dará como resultado un mensaje de error, pero la llamada a la API aún pasará a la aplicación Heroku y colocará una foto de prueba en su web3.almacenamiento cuenta. Puede comprobar la imagen de prueba en su cuenta web3.storage. Si puede ver la foto de la "prueba de la cabina de fotos", ¡la configuración es exitosa! Hacer clic aquí verificar.

w3up beta próximamente

Esta aplicación se creó en 2022 y utiliza las API web3.storage existentes. En el momento de escribir este artículo, hay nuevas API beta w3up disponibles en web3.storage, que incluir componentes web frontales para múltiples marcos . Esto hará que sea aún más fácil comenzar a escribir aplicaciones que usan IPFS.

Algunas sugerencias de mejora

¡La aplicación no es perfecta! Hay algunas áreas que podrían mejorarse:

1. Seguridad

Aunque esto es solo un truco para mostrar el terreno, la seguridad de la aplicación nodejs no es ideal. No se prefiere validar las contraseñas y el nombre de usuario en la lógica de la aplicación. Creo que deberíamos poner la aplicación detrás de un firewall o puerta de enlace API que valide la autorización en el encabezado antes de pasar la llamada a nuestra aplicación.

2. Experiencia

El Sparkbooth 7 es excelente, pero la interfaz de usuario parece bastante limitante. Sería bueno si pudiéramos personalizar esto un poco más. ¿Quizás un software de fotomatón de código abierto podría ayudarnos a lograr esto?

3. Galería de fotos recientes

Potencialmente, podríamos usar una computadora separada para mostrar las últimas fotos a los visitantes. Podían seleccionar la foto que les gustaría elegir para enviarse por correo electrónico, mostrar el código QR nuevamente o compartirlo en las redes sociales. Esto implicará la creación de una interfaz para fil-photo-booth-uploader, que podría ser un proyecto muy bueno para un desarrollador de interfaz.

4. Use un backend de aplicación descentralizado. Tal vez alguien como Fluence o IPVM pueda ayudar.

Conclusión

Durante la Web Summit de tres días, el fotomatón de Filecoin tuvo un tiempo de actividad del 99 % y una interrupción del 1 % debido a problemas de conectividad a Internet en la convención. En total, el fotomatón publicó 934 fotos en Filecoin Network. ¡Eso es casi mil selfies que están listos para ir interplanetarios, todo gracias al muy útil servicio de web3.storage!

El fotomatón también es famoso. El tercer día, un reportero de CNN también entrevistó al stand (sí, el stand se está volviendo famoso... yo no).

Reportero de CNN entrevistando a Filecoin Photo Booth en Web Summit, Lisboa, Portugal

No dude en utilizar esta guía para construir su propio fotomatón interplanetario para sus eventos, reuniones, encuentros, fiestas o simplemente para divertirse.

La red Filecoin ahora tiene 16EiB de capacidad de almacenamiento y se han almacenado más de 300PiB de datos. Hay muchas maneras de contribuir o utilizar este proyecto. Más información sobre cómo participar aquí .