So bauen Sie eine interplanetare Fotokabine

Erfahren Sie, wie Sie eine Fotokabine in IPFS integrieren und Ihr Selfie mit web3.storage interplanetarisch machen.

Während des Web Summit 2022 baute das Veranstaltungs- und Kreativteam von Filecoin einen beeindruckenden Ausstellungsstand auf dem Kongress auf, der mehr als 3500 Besucher anzog, die mehr über Web3, das InterPlanetary File System (IPFS) und die verteilten Speicherlösungen des Filecoin-Netzwerks erfahren wollten.

Filecoin bietet eine breite Palette von Lösungen zum Speichern und Beibehalten von Dateien auf Web3 über das IPFS-Protokoll. Eine der beliebtesten und benutzerfreundlichsten Lösungen ist web3.Storage, eine „One API Call to IPFS and Filecoin“-Lösung für Entwickler.

IPFS ist ein Webprotokoll, das die gemeinsame Nutzung von Dateien in einem Peer-to-Peer-Netzwerk und die gemeinsame Nutzung von Daten in einem verteilten Computernetzwerk ermöglicht. Filecoin hat ein Open-Source-Protokoll entwickelt, das es einem Speichermarkt ermöglicht, Dateien über einen langen Zeitraum und mit geringen Kosten auf IPFS zu speichern. Diese Lösung löst das Speicherproblem in Web3 und rüstet das Internet, wie wir es kennen, auf, um Herausforderungen wie die interplanetare Kommunikation zu bewältigen.

Interplanetare Kommunikation muss Selfies beinhalten! Erfahren Sie, wie Sie mit einer schlanken node.js-Anwendung eine Fotokabinen-Software namens Sparkbooth erstellen, um eine Verbindung zu web3.storage herzustellen und Ihr Selfie auf IPFS hochzuladen.

Wie funktioniert es?

Die Hauptbestandteile der Fotokabinen sind: eine Digitalkamera, einige Lichter, ein Computer mit Touchscreen, einige Software, die die Kamera zum Aufnehmen von Fotos steuert und die Möglichkeit bietet, diese in das IPFS- und Filecoin-Netzwerk hochzuladen.

Ein Ablauf von Ereignissen sieht folgendermaßen aus:

1. Der Touchscreen empfängt vom Benutzer Befehle zum Aufnehmen eines Fotos

   
   

2. Die Photo Booth-Software (genannt Sparkbooth) kommuniziert mit der Kamera, um Maßnahmen zu ergreifen

   
   

3. Sparkbooth speichert das Foto lokal auf dem Computer

   
   

4. Sparkbooth fragt den Benutzer, ob er an einen Server senden möchte (über web3.storage).

   
   

5. Sparkbooth sendet das Foto, den Benutzernamen, das Passwort und die Erfolgsmeldung in einem API-Aufruf an * Fil-Photo-Booth-Uploader *Benutzerdefinierte NodeJS-App

   
   

6. Die Fil-Photobooth-Uploader-App wird:

   1. Validieren Sie den Benutzernamen und das Passwort

   2. Ändern Sie das Format des Fotos in was web3.storage akzeptiert

   3. Ruft API-Token/-Schlüssel vom System ab und sendet es an __ web3. __Lagerung

   4. w__ eb3.storage __ sendet das Foto an das IPFS-Netzwerk und sichert es auf Filecoin

   5. w__ eb3.storage __ gibt die IPFS Content ID (CID) an die zurück Fil-Photo-Booth-Uploader

   6. Fil-Photo-Booth-Uploader erstellt die http-Version der CID-URL über web3.storage IPFS-Gateway

   7. fil-photo-booth-uploader gibt eine Erfolgsmeldung an Sparkbooth 7 zurück

      
      

7. Sparkbooth erhält eine Erfolgsmeldung: „Ihr Foto wird über an IPFS gesendet web3.storage . :-)“ zusammen mit der URL des Fotos

   
   

8. Sparkbooth zeigt den generierten QR-Code auf dem Bildschirm an

Das Aussehen? Es ist wie eine normale Fotobox:

Ein Beispiel für die IPFS-CID-URL:

Ein Beispiel:

Der gesamte Ablauf sieht so aus:

Weitere Informationen zu IPFS und CIDs finden Sie unter proto.school .

Schritt für Schritt Anleitung

Voraussetzungen

Es gibt einige Dinge, die Sie möglicherweise benötigen, um dieses Tutorial durchzugehen:

• 📸 Kamera – jede moderne Canon
• 💻 Computer – jeder All-in-One-Desktop mit Touchscreen oder ein Laptop mit Touchscreen
• 👨🏻‍💻 Photo Booth-Software – Sparkbooth 7
• 🤖 Ein App-Server – ich verwende Heroku aus Bequemlichkeitsgründen
• 📦 IPFS-fähiges Produkt – ein web3.storage-Konto
• 🌎 Internetverbindung – eine Möglichkeit, mit dem WWW zu kommunizieren, entweder kabelgebunden oder drahtlos (WLAN)\

Schritt 1, Web3.Storage-Setup

1. Ein ... kreieren web3.storage Konto über Ihr Github Konto oder E-Mail

2. Gehen Sie zu Konto > API-Token

3. Erstellen Sie ein neues API-Token und benennen Sie es nach Belieben (z. B. Filecoin Web Summit 2022).

4. Kopieren Sie den API-Schlüssel, indem Sie auf die Schaltfläche „Kopieren“ klicken

5. Speichern Sie dies für später. Sie müssen dies als Umgebungsvariable in die Fil-Photo-Booth-Uploader-Anwendung einfügen

Schritt 2: Bereitstellung der NodeJS-App

Damit Sparkbooth 7 und web3.storage gut miteinander kommunizieren, benötigen wir ein wenig Hilfe bei der Übersetzung ihrer Sprachen. Die NodeJS-App wird uns dabei helfen. Es muss auf einem Server gehostet werden, und wir verwenden dafür Heroku (Wenn Sie eine native Web3-Methode zum Hosten kennen, schreiben Sie mir bitte eine DM. Ich würde es gerne versuchen).

1. Gehen Sie zuerst zu github.com (eröffnen Sie ein neues Konto, falls Sie noch keins haben)

2. Besuche den Filecoin Photo Booth Uploader und klicken Sie dann auf Fork. Dadurch können Sie den Quellcode in Ihr eigenes Konto oder Repository kopieren und ihn mit Heroku verbinden.

3. Melden Sie sich mit einem an Heroku-Konto . Heroku ist wie AWS, eine zentralisierte Entwicklerplattform, die dabei hilft, Anwendungen oder Server nahezu kostenlos auszuführen.

4. Erstellen Sie eine neue App und geben Sie den Ereignisnamen ein.

5. Wir werden wahrscheinlich für jede Veranstaltung eine neue App benötigen.

6. Wählen Sie unter „Bereitstellungsmethode“ GitHub aus und melden Sie sich dann bei Ihrem GitHub-Konto an. Autorisieren Sie Heroku, Code in sich selbst zu ziehen, um die Anwendung zu erstellen und den Server auszuführen.

7. Suchen Sie unter „Mit GitHub verbinden“ nach dem Repo-Namen, den Sie gerade geforkt haben (z. B. „fil-photo“), und verbinden Sie dann das Code-Repository.

8. Belassen Sie alle Einstellungen und klicken Sie auf „Deploy Branch“, um den ersten Build zu starten. Heroku ist intelligent genug, um den Anwendungstyp zu erkennen. Als nächstes: Erstellen und Bereitstellen.

9. Bevor der Server jedoch funktioniert, müssen wir den Benutzernamen, das Passwort und das eingeben web3.storage API-Token in der Serverumgebung. Heroku kann sicher darauf zugreifen, ohne sie dem Internet auszusetzen. Gehen Sie zu „Einstellungen“ und dann zu „Konfigurationsvariablen“.

10. Geben Sie die folgenden Konfigurationen ein, ersetzen Sie SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN durch Passwort, Benutzernamen und web3.storage API-Token bzw. Der Name muss genau wie oben lauten.

11. Die App sollte jetzt laufen! Sie können unter „Einstellungen“ zu „Domänen“ gehen, um die URL zu finden, die Sie später in Sparkbooth 7 einfügen möchten.

Schritt 3: Sparkbooth 7-Setup

Der letzte Schritt besteht darin, die Software auf dem Photo Booth-Laptop vorzubereiten, um mit unserer benutzerdefinierten NodeJS-App zu kommunizieren und den Einrichtungsablauf abzuschließen. \

1. Gehen Sie zu Sparkbooth.com . Herunterladen Sparkbooth 7 DSLR , bezahlen für Lizenzgebühr oder nutzen Sie die Testversion.

2. Öffnen Sie Sparkbooth und bestätigen Sie Ihren Kauf.

3. Wenn Sie die App öffnen, wird sie maximiert, Sie können jedoch „ESC“ drücken, um sie zu verlassen. Gehen Sie zu den Einstellungen oben links:

4. Konfigurieren Sie „An Konto senden“ und geben Sie dann den Benutzernamen und das Passwort ein, die Sie verwenden möchten. Die „Dienst-URL“ muss die Heroku-App-Adresse + „/upload-w3s“ sein. (z.B http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. Sie können die Verbindung testen, indem Sie die Testschaltfläche verwenden. Dies führt zu einer Fehlermeldung, aber der API-Aufruf wird trotzdem zur Heroku-App weitergeleitet und ein Testfoto in Ihrer App platziert web3.storage Konto. Sie können das Testbild in Ihrem web3.storage-Konto überprüfen. Wenn Sie das Foto „Fotobox-Test“ sehen können, ist die Einrichtung erfolgreich! Klicken Hier überprüfen.

w3up Beta kommt bald

Diese App wurde 2022 erstellt und nutzt die vorhandenen web3.storage-APIs. Zum Zeitpunkt des Verfassens dieses Artikels sind neue Beta-w3up-APIs von web3.storage verfügbar Integrieren Sie Front-End-Webkomponenten für mehrere Frameworks . Dadurch wird es noch einfacher, mit dem Schreiben von Apps zu beginnen, die IPFS verwenden.

Einige Verbesserungsvorschläge

Die App ist nicht perfekt! Es gibt einige Bereiche, die verbessert werden könnten:

1. Sicherheit

Auch wenn es sich dabei nur um eine Spielerei zur Demonstration handelt, ist die Sicherheit der NodeJS-App nicht optimal. Die Validierung der Passwörter und des Benutzernamens in der Anwendungslogik wird nicht bevorzugt. Ich glaube, wir sollten die Anwendung hinter eine Firewall oder ein API-Gateway stellen, das die Autorisierung im Header validiert, bevor der Aufruf an unsere App weitergeleitet wird.

2. Erfahrung

Sparkbooth 7 ist großartig, aber die Benutzeroberfläche scheint ziemlich einschränkend zu sein. Es wäre gut, wenn wir das noch etwas individueller gestalten könnten. Vielleicht könnte uns eine Open-Source-Fotoautomatensoftware dabei helfen, dies zu erreichen?

3. Aktuelle Fotogalerie

Möglicherweise könnten wir einen separaten Computer nutzen, um den Besuchern die neuesten Fotos zu zeigen. Sie könnten das Foto auswählen, das sie sich selbst per E-Mail senden möchten, den QR-Code erneut anzeigen oder es in sozialen Medien teilen möchten. Dazu gehört die Erstellung eines Frontends für den Fil-Photo-Booth-Uploader, was für einen Frontend-Entwickler ein sehr cooles Projekt sein könnte.

4. Verwenden Sie ein dezentrales App-Backend. Vielleicht kann jemand wie Fluence oder IPVM helfen.

Abschluss

Während des dreitägigen Web Summit hatte die Filecoin-Fotokabine eine Betriebszeit von 99 % und einen Ausfall von 1 % aufgrund von Problemen mit der Internetverbindung auf dem Kongress. Insgesamt veröffentlichte die Fotokabine 934 Fotos im Filecoin-Netzwerk. Das sind fast tausend Selfies, die dank des äußerst praktischen Dienstes von web3.storage interplanetarisch aufgenommen werden können!

Berühmt ist auch die Fotobox. Am dritten Tag interviewte auch ein Reporter von CNN den Stand (ja, der Stand wird immer berühmter … nicht ich).

CNN-Reporter interviewt den Filecoin Photo Booth auf dem Web Summit in Lissabon, Portugal

Bitte nutzen Sie diesen Leitfaden, um Ihre eigene interplanetare Fotokabine für Ihre Veranstaltungen, Versammlungen, Treffen, Partys oder einfach nur zum Spaß zu bauen.

Das Filecoin-Netzwerk verfügt jetzt über eine Speicherkapazität von 16 EiB und es wurden über 300 PiB an Daten gespeichert. Es gibt viele Möglichkeiten, zu diesem Projekt beizutragen oder es zu nutzen. Erfahren Sie mehr über die Mitarbeit Hier .