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. 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 à et Filecoin" pour les développeurs. IPFS 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é. 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. Filecoin La communication interplanétaire 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. doit 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 flux d'événements ressemble à ceci : L'écran tactile reçoit les commandes de l'utilisateur pour prendre une photo Le logiciel Photo Booth (appelé Sparkbooth) parlera à la caméra pour prendre des mesures Sparkbooth stocke la photo localement sur l'ordinateur Sparkbooth demande à l'utilisateur s'il souhaite envoyer à un serveur (via web3.storage) Sparkbooth envoie la photo, le nom d'utilisateur, le mot de passe et le message de réussite dans un appel API à * * application nodejs personnalisée fil-photo-booth-uploader L'application fil-photobooth-uploader va : valider le nom d'utilisateur et le mot de passe changer le format de la photo en quoi accepte web3.stockage récupère le jeton/la clé API du système et l'envoie à __ __Stockage web3. w__ __ envoie la photo au réseau IPFS et la sauvegarde sur Filecoin eb3.storage w__ __ renverra l'ID de contenu (CID) IPFS au eb3.storage fil-photo-booth-uploader construira la version http de l'url CID via Passerelle IPFS fil-photo-booth-uploader web3.stockage fil-photo-booth-uploader renvoie un message de réussite à Sparkbooth 7 Sparkbooth reçoit un message de réussite : "Votre photo est envoyée à IPFS via . :-)" avec l'URL de la photo web3.stockage 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: L'ensemble du flux ressemble à ceci : 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 Créer un compte via votre compte ou e-mail web3.stockage GithubGenericName Accédez à Compte > Jeton API Créez un nouveau jeton API, nommez-le comme vous le souhaitez (par exemple Filecoin Web Summit 2022) Copiez la clé API en utilisant le bouton de copie 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). Aller d'abord à (créez un nouveau compte si vous n'en avez pas) github.com Visiter le 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. Téléchargeur de cabine photo Filecoin Inscrivez-vous avec un . Heroku est comme AWS, une plate-forme de développement centralisée qui permet d'exécuter des applications ou des serveurs presque gratuitement. Compte Heroku Créez une nouvelle application et mettez-y le nom de l'événement. Nous aurons probablement besoin d'une nouvelle application pour chaque événement. 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. 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. 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. Cependant, avant que le serveur ne fonctionne, nous devrons mettre le nom d'utilisateur, le mot de passe et le 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". web3.stockage Mettez les configurations suivantes, remplacez SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN par mot de passe, nom d'utilisateur et jeton api respectivement. Le nom doit être exactement comme ci-dessus. web3.stockage 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. \ Se diriger vers . Télécharger , payer pour ou utilisez la version d'essai. Sparkbooth.com Sparkbooth 7 DSLR droit de license Ouvrez Sparkbooth et confirmez votre achat. Lorsque vous ouvrez l'application, elle sera agrandie, mais vous pouvez appuyer sur "ESC" pour quitter. Allez dans les paramètres en haut à gauche : 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) 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 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 vérifier. web3.stockage ici 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 . Il sera ainsi encore plus facile de commencer à écrire des applications qui utilisent IPFS. inclure des composants Web frontaux pour plusieurs frameworks Quelques suggestions d'amélioration L'appli n'est pas parfaite ! Il y a quelques domaines qui pourraient être améliorés : 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. 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 ? 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. Utilisez un backend d'application décentralisé. Peut-être que quelqu'un comme ou pourra vous aider. Fluence IPVM 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
