paint-brush
Comment construire un photomaton interplanétairepar@jenksguo
940 lectures
940 lectures

Comment construire un photomaton interplanétaire

par Jenks Guo7m2023/04/30
Read on Terminal Reader

Trop long; Pour lire

Apprenez à intégrer un photomaton à IPFS et rendez votre selfie interplanétaire avec web3.storage. Les principales parties des cabines photo sont : un appareil photo numérique, des lumières, un ordinateur avec écran tactile, un logiciel qui contrôle l'appareil photo pour prendre des photos. Apprenez à utiliser une application node.js légère pour créer un logiciel de photomaton appelé Sparkbooth.
featured image - Comment construire un photomaton interplanétaire
Jenks Guo HackerNoon profile picture
0-item
1-item
2-item

Découvrez comment intégrer un photomaton à IPFS et rendre votre selfie interplanétaire avec web3.storage.


Lors du Web Summit 2022, les événements et l'équipe créative de Filecoin ont mis en place un stand d'exposition incroyable à la convention qui a attiré plus de 3500 visiteurs désireux d'en savoir plus sur Web3, le système de fichiers interplanétaire (IPFS) et les solutions de stockage distribué du réseau Filecoin.

Une photo du stand Filecoin au Web Summit 2022, Lisbonne, Portugal


Filecoin propose une large gamme de solutions pour stocker et conserver des fichiers sur Web3 via le protocole IPFS. L'un des plus populaires et des plus faciles à utiliser est web3.Storage, une solution "un appel API à IPFS et Filecoin" pour les développeurs.


IPFS est un protocole Web qui permet de partager des fichiers dans un réseau peer-to-peer et de partager des données dans un réseau informatique distribué. Filecoin a créé un protocole open source qui permet à un marché du stockage de conserver des fichiers sur IPFS pendant longtemps et à peu de frais. Cette solution résout le problème de stockage dans Web3 et met à niveau Internet tel que nous le connaissons pour gérer des défis tels que la communication interplanétaire.


La communication interplanétaire doit inclure des selfies ! Apprenez à utiliser une application node.js légère pour créer un logiciel de photomaton appelé Sparkbooth pour vous connecter à web3.storage et télécharger votre selfie sur IPFS.

Comment ça marche?

Les principales parties des cabines photo sont : un appareil photo numérique, des lumières, un ordinateur avec écran tactile, un logiciel qui contrôle l'appareil photo pour prendre des photos et la possibilité de les télécharger sur le réseau IPFS et Filecoin.

Un schéma expliquant le fonctionnement du photomaton

Un flux d'événements ressemble à ceci :


  1. L'écran tactile reçoit les commandes de l'utilisateur pour prendre une photo


  2. Le logiciel Photo Booth (appelé Sparkbooth) parlera à la caméra pour prendre des mesures


  3. Sparkbooth stocke la photo localement sur l'ordinateur


  4. Sparkbooth demande à l'utilisateur s'il souhaite envoyer à un serveur (via web3.storage)


  5. Sparkbooth envoie la photo, le nom d'utilisateur, le mot de passe et le message de réussite dans un appel API à * fil-photo-booth-uploader * application nodejs personnalisée


  6. L'application fil-photobooth-uploader va :

    1. valider le nom d'utilisateur et le mot de passe

    2. changer le format de la photo en quoi web3.stockage accepte

    3. récupère le jeton/la clé API du système et l'envoie à __ web3. __Stockage

    4. w__ eb3.storage __ envoie la photo au réseau IPFS et la sauvegarde sur Filecoin

    5. w__ eb3.storage __ renverra l'ID de contenu (CID) IPFS au fil-photo-booth-uploader

    6. fil-photo-booth-uploader construira la version http de l'url CID via web3.stockage Passerelle IPFS

    7. fil-photo-booth-uploader renvoie un message de réussite à Sparkbooth 7


  7. Sparkbooth reçoit un message de réussite : "Votre photo est envoyée à IPFS via web3.stockage . :-)" avec l'URL de la photo


  8. Sparkbooth affiche le code QR généré à l'écran


Le regard? C'est comme un photomaton normal :

Un exemple d'URL IPFS CID :

https://bafybeiei7zadrztflc6krunhvqr3umzre7xjxfzvmyjs2ob2w7yykq63ea.ipfs.w3s.link/20221104172648.jpg

Un exemple:

Un code QR contenant le CID d'un selfie


L'ensemble du flux ressemble à ceci :

Téléchargement de selfie sur IPFS

Pour en savoir plus sur IPFS et les CID, veuillez visiter proto.école .

Guide étape par étape

Conditions préalables

Il y a peu de choses dont vous pourriez avoir besoin pour exécuter ce didacticiel :

  • 📸 Appareil photo - tout Canon moderne
  • 💻 Ordinateur - tout ordinateur de bureau tout-en-un avec écran tactile ou ordinateur portable avec écran tactile
  • 👨🏻‍💻 Logiciel de photomaton - Sparkbooth 7
  • 🤖 Un serveur d'applications - J'utilise Heroku pour plus de commodité
  • 📦 Produit compatible IPFS - un compte web3.storage
  • 🌎 Connexion Internet - un moyen de parler au WWW avec ou sans fil (wifi)\

Étape 1, configuration de Web3.Storage

  1. Créer un web3.stockage compte via votre GithubGenericName compte ou e-mail

  1. Accédez à Compte > Jeton API

  1. Créez un nouveau jeton API, nommez-le comme vous le souhaitez (par exemple Filecoin Web Summit 2022)

  1. Copiez la clé API en utilisant le bouton de copie

  1. Enregistrez ceci pour plus tard Vous devrez le mettre dans l'application fil-photo-booth-uploader en tant que variable d'environnement

Étape 2 : déploiement de l'application nodejs

Pour que Sparkbooth 7 et web3.storage se parlent bien, nous aurons besoin d'un peu d'aide pour traduire leurs langues. L'application nodejs nous aidera à y parvenir. Il devra être hébergé sur un serveur, et nous utilisons Heroku pour cela (si vous connaissez une méthode native Web3 pour l'héberger, veuillez me contacter par DM. J'aimerais essayer).


  1. Aller d'abord à github.com (créez un nouveau compte si vous n'en avez pas)

  1. Visiter le Téléchargeur de cabine photo Filecoin puis cliquez sur Fourchette. Cela vous permettra de copier le code source sur votre propre compte ou référentiel et de le connecter à Heroku.

  1. Inscrivez-vous avec un Compte Heroku . Heroku est comme AWS, une plate-forme de développement centralisée qui permet d'exécuter des applications ou des serveurs presque gratuitement.

  1. Créez une nouvelle application et mettez-y le nom de l'événement.

  1. Nous aurons probablement besoin d'une nouvelle application pour chaque événement.

  1. Sous "Méthode de déploiement", choisissez GitHub, puis connectez-vous à votre compte GitHub. Autorisez Heroku à extraire le code en lui-même pour créer l'application et exécuter le serveur.

  1. Sous "Se connecter à GitHub", recherchez le nom du référentiel que vous venez de créer (ex. fil-photo), puis connectez le référentiel de code.

  1. Laissez tous les paramètres et cliquez sur "Déployer la branche" pour lancer la première version. Heroku est suffisamment intelligent pour pouvoir reconnaître le type d'application. Ensuite : créez-le et déployez-le.

  1. Cependant, avant que le serveur ne fonctionne, nous devrons mettre le nom d'utilisateur, le mot de passe et le web3.stockage Jeton API dans l'environnement du serveur. Heroku peut y accéder en toute sécurité sans les exposer à Internet. Allez dans "Paramètres" puis "Config Vars".

  1. Mettez les configurations suivantes, remplacez SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN par mot de passe, nom d'utilisateur et web3.stockage jeton api respectivement. Le nom doit être exactement comme ci-dessus.

  1. L'application devrait fonctionner maintenant ! Vous pouvez aller dans "Domaines" sous "Paramètres" pour trouver l'URL à mettre dans sparkbooth 7 plus tard.

Étape 3 : Configuration de Sparkbooth 7

La dernière étape consiste à préparer le logiciel sur l'ordinateur portable de la cabine photo pour parler à notre application nodejs personnalisée afin de terminer le flux de configuration. \

  1. Se diriger vers Sparkbooth.com . Télécharger Sparkbooth 7 DSLR , payer pour droit de license ou utilisez la version d'essai.

  1. Ouvrez Sparkbooth et confirmez votre achat.

  1. Lorsque vous ouvrez l'application, elle sera agrandie, mais vous pouvez appuyer sur "ESC" pour quitter. Allez dans les paramètres en haut à gauche :

  1. Configurez "Envoyer au compte" puis entrez le nom d'utilisateur et le mot de passe que vous souhaitez utiliser. L'"URL du service" doit être l'adresse de l'application Heroku + "/upload-w3s". (par exemple http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

  1. Vous pouvez tester la connexion en utilisant le bouton de test. Cela entraînera un message d'échec, mais l'appel API passera toujours par l'application Heroku et placera une photo de test dans votre web3.stockage compte. Vous pouvez vérifier l'image de test dans votre compte web3.storage. Si vous pouvez voir la photo « test photomaton », le montage est réussi ! Cliquez sur ici vérifier.

w3up beta arrive bientôt

Cette application a été créée en 2022 et utilise les API web3.storage existantes. Au moment d'écrire ces lignes, de nouvelles API w3up bêta sont disponibles sur web3.storage, qui inclure des composants Web frontaux pour plusieurs frameworks . Il sera ainsi encore plus facile de commencer à écrire des applications qui utilisent IPFS.

Quelques suggestions d'amélioration

L'appli n'est pas parfaite ! Il y a quelques domaines qui pourraient être améliorés :


  1. Sécurité

Même s'il ne s'agit que d'un gadget pour montrer le terrain, la sécurité de l'application nodejs n'est pas idéale. Il n'est pas préférable de valider les mots de passe et le nom d'utilisateur dans la logique d'application. Je pense que nous devrions placer l'application derrière un pare-feu ou une passerelle API qui valide l'autorisation dans l'en-tête avant de passer l'appel à notre application.


  1. Expérience

Le Sparkbooth 7 est génial, mais l'interface utilisateur semble assez limitée. Ce serait bien si nous pouvions le personnaliser un peu plus. Peut-être qu'un logiciel de photomaton open source pourrait nous aider à y parvenir ?


  1. Galerie de photos récentes

Potentiellement, nous pourrions utiliser un ordinateur séparé pour montrer les dernières photos aux visiteurs. Ils pourraient sélectionner la photo qu'ils aimeraient choisir de s'envoyer par e-mail, afficher à nouveau le code QR ou le partager sur les réseaux sociaux. Cela impliquera de créer une interface pour le fil-photo-booth-uploader, ce qui pourrait être un projet très intéressant pour un développeur frontal.


  1. Utilisez un backend d'application décentralisé. Peut-être que quelqu'un comme Fluence ou IPVM pourra vous aider.

Conclusion

Au cours du Web Summit de trois jours, le photomaton Filecoin a connu une disponibilité de 99 % et une panne de 1 % en raison de problèmes de connectivité Internet lors de la convention. Au total, le photomaton a publié 934 photos sur le réseau Filecoin. C'est près d'un millier de selfies prêts à partir interplanétaires grâce au service très pratique de web3.storage !

Le photomaton est également célèbre. Le troisième jour, un journaliste de CNN a également interviewé le stand (oui, le stand devient célèbre… pas moi).


Journaliste de CNN interviewant le Photo Booth Filecoin au Web Summit, Lisbonne, Portugal


N'hésitez pas à utiliser ce guide pour construire votre propre photomaton interplanétaire pour vos événements, rassemblements, rencontres, fêtes ou juste pour le plaisir.


Le réseau Filecoin a maintenant 16EiB de capacité de stockage et plus de 300PiB de données y ont été stockées. Il existe de nombreuses façons de contribuer ou d'utiliser ce projet. En savoir plus sur l'implication ici .