惑星間写真ブースの作り方

フォト ブースを IPFS に統合し、自撮り写真を web3.storage で惑星間で撮影する方法を学びましょう。

Web Summit 2022 の期間中、Filecoin のイベントとクリエイティブ チームは、Web3、InterPlanetary File System (IPFS)、および Filecoin ネットワークの分散ストレージ ソリューションについてもっと知りたいと思っている 3500 人以上の訪問者を集めたコンベンションで素晴らしい展示スタンドを設置しました。

Filecoin は、IPFS プロトコルを介して Web3 にファイルを保存および永続化するための幅広いソリューションを提供します。最も人気があり使いやすいものの 1 つは、開発者向けの「 IPFSと Filecoin への 1 つの API 呼び出し」ソリューションである web3.Storage です。

IPFS は、ピアツーピア ネットワークでファイルを共有し、分散型コンピューター ネットワークでデータを共有できる Web プロトコルです。 Filecoin は、ストレージ市場が IPFS にファイルを長期間、ほとんどコストをかけずに保持できるようにするオープンソース プロトコルを作成しました。このソリューションは、Web3 のストレージの問題を解決し、惑星間通信などの課題を処理できるようにインターネットをアップグレードします。

惑星間通信には自撮りが必要です!軽量の node.js アプリケーションを使用して Sparkbooth という写真ブース ソフトウェアを作成し、web3.storage に接続してセルフィーを IPFS にアップロードする方法を学びます。

それはどのように機能しますか？

写真ブースの主な部分は、デジタルカメラ、いくつかのライト、タッチスクリーン付きのコンピューター、カメラを制御して写真を撮るソフトウェア、およびそれらをIPFSおよびFilecoinネットワークにアップロードする機能です.

イベントの流れは次のようになります。

1. タッチスクリーンがユーザーからのコマンドを受け取り、写真を撮ります

   
   

2. Photo Booth ソフトウェア (Sparkbooth と呼ばれます) がカメラと通信してアクションを実行します

   
   

3. Sparkbooth は写真をコンピューターにローカルに保存します

   
   

4. Sparkbooth は、サーバーに送信するかどうかをユーザーに尋ねます (web3.storage 経由)

   
   

5. Sparkbooth は、API 呼び出しで写真、ユーザー名、パスワード、および成功メッセージを * に送信します。フィルフォトブースアップローダー*カスタム nodejs アプリ

   
   

6. fil-photobooth-uploader アプリは次のことを行います。

   1. ユーザー名とパスワードを検証する

   2. 写真の形式を何に変更しますか web3.ストレージ受け入れる

   3. システムから API トークン/キーを取得し、に送信します __ web3. __保管所

   4. w__ eb3.storage __ は写真を IPFS ネットワークに送信し、Filecoin にバックアップします

   5. w__ eb3.storage __ は IPFS コンテンツ ID (CID) をフィルフォトブースアップローダー

   6. フィルフォトブースアップローダー経由で CID url の http バージョンを構築します web3.ストレージIPFS ゲートウェイ

   7. fil-photo-booth-uploader が成功メッセージを Sparkbooth 7 に返す

      
      

7. Sparkbooth は成功メッセージを受け取ります。 web3.ストレージ. :-)」と写真のURL

   
   

8. Sparkbooth は生成された QR コードを画面に表示します

外観？通常の写真ブースと同じです。

IPFS CID URL の例:

例：

全体の流れは次のようになります。

IPFS と CID の詳細については、こちらをご覧ください。プロトスクール.

ステップバイステップガイド

前提条件

このチュートリアルを実行するために必要なことがいくつかあります。

• 📸 カメラ - 最新のキャノン
• 💻 コンピューター - タッチ スクリーン付きのオールインワン デスクトップまたはタッチ スクリーン付きのラップトップ
• 👨🏻‍💻フォトブースソフトウェア - Sparkbooth 7
• 🤖 アプリサーバー - 便宜上 Heroku を使用しています
• 📦 IPFS 対応製品 - web3.storage アカウント
• 🌎 インターネット接続 - 有線または無線 (wifi) で WWW と通信する方法\

ステップ 1、Web3.Storage のセットアップ

1. 作成する web3.ストレージあなたのアカウント ギットハブアカウントまたはメール

2. [アカウント] > [API トークン] に移動します

3. 新しい API トークンを作成し、好きな名前を付けます (例: Filecoin Web Summit 2022)

4. コピーボタンを使用してAPIキーをコピーします

5. 後で使用するために保存します。これを環境変数として fil-photo-booth-uploader アプリケーションに入れる必要があります。

ステップ 2: nodejs アプリのデプロイ

Sparkbooth 7 と web3.storage がうまく対話するには、言語を翻訳するための少しの助けが必要です。 nodejs アプリは、これを実現するのに役立ちます。サーバーでホストする必要があり、Heroku を使用しています (Web3 ネイティブのホスト方法を知っている場合は、DM でお知らせください。試してみたいです)。

1. 最初に行く github.com （アカウントを持っていない場合は、新しいアカウントにサインアップしてください）

2. 訪問Filecoin フォト ブース アップローダフォークをクリックします。これにより、ソース コードを自分のアカウントまたはリポジトリにコピーして、Heroku に接続できるようになります。

3. サインアップ Heroku アカウント. Heroku は AWS のようなもので、アプリケーションやサーバーをほぼ無料で実行できる集中型開発者プラットフォームです。

4. 新しいアプリを作成し、イベント名を入れます。

5. イベントごとに新しいアプリが必要になる可能性があります。

6. [デプロイ方法] で [GitHub] を選択し、GitHub アカウントにサインインします。アプリケーションをビルドしてサーバーを実行するコードを Heroku にプルすることを承認します。

7. [Connect to GitHub] の下で、フォークしたばかりのリポジトリ名 (例: fil-photo) を検索し、コード リポジトリに接続します。

8. すべての設定をそのままにして、[Deploy Branch] をクリックして最初のビルドを開始します。 Heroku は、アプリケーションの種類を認識できるほどスマートです。次へ: ビルドしてデプロイします。

9. ただし、サーバーが機能する前に、ユーザー名、パスワード、および web3.ストレージサーバー環境の API トークン。 Heroku は、インターネットに公開することなく安全にアクセスできます。 「設定」、「構成変数」の順に進みます。

10. 次の設定を行い、SPARKBOOTH_PASSWORD、SPARKBOOTH_USER、W3S_API_TOKEN をパスワード、ユーザー名、および web3.ストレージそれぞれ api トークン。名前は上記とまったく同じでなければなりません。

11. アプリが実行されているはずです。 「設定」の下の「ドメイン」に移動して、後でsparkbooth 7に入れるURLを見つけることができます.

ステップ 3: Sparkbooth 7 のセットアップ

最後のステップは、フォト ブース ラップトップのソフトウェアを準備して、カスタム nodejs アプリと通信し、セットアップ フローを完了することです。 \

1. に行くSparkbooth.com .ダウンロードスパークブース 7デジタル一眼レフ、 代金を支払うライセンス料またはトライアルをご利用ください。

2. Sparkbooth を開き、購入を確認します。

3. アプリを開くと最大化されますが、「ESC」を押して終了できます。左上の設定に移動します。

4. 「アカウントに送信」を設定し、使用するユーザー名とパスワードを入力します。 「サービス URL」は、Heroku アプリのアドレス + 「/upload-w3s」である必要があります。 （例えば http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. テストボタンを使用して接続をテストできます。失敗メッセージが表示されますが、API 呼び出しは引き続き Heroku アプリを通過し、テスト写真をweb3.ストレージアカウント。 web3.storage アカウントでテスト イメージを確認できます。 「プリクラテスト」の写真が見れたらセットアップ成功！クリックここチェックする。

w3up ベータ版が近日公開予定

このアプリは 2022 年に作成され、既存の web3.storage API を使用します。この記事の執筆時点では、web3.storage から利用可能な新しいベータ w3up API があります。複数のフレームワークのフロントエンド Web コンポーネントを含める.これにより、IPFS を使用するアプリの作成をさらに簡単に開始できるようになります。

いくつかの改善提案

アプリは完璧ではありません！改善できる領域がいくつかあります。

1. 安全

これは見せかけの仕掛けにすぎませんが、nodejs アプリのセキュリティは理想的ではありません。アプリケーション ロジックでパスワードとユーザー名を検証することはお勧めできません。アプリに呼び出しを渡す前に、ヘッダーの承認を検証するファイアウォールまたは API ゲートウェイの背後にアプリケーションを配置する必要があると思います。

2. 経験

Sparkbooth 7 は素晴らしいですが、UI はかなり制限されているように見えます。これをもう少しカスタマイズできれば良いのですが。おそらく、オープンソースの写真ブース ソフトウェアがこれを実現するのに役立つでしょうか?

3. 最近のフォトギャラリー

別のコンピューターを使用して、訪問者に最新の写真を表示できる可能性があります。選択したい写真を選択して自分自身にメールで送信したり、QR コードを再度表示したり、ソーシャル メディアで共有したりできます。これには、fil-photo-booth-uploader のフロントエンドの構築が含まれます。これは、フロントエンド開発者にとって非常にクールなプロジェクトになる可能性があります。

4. 分散型アプリ バックエンドを使用します。 FluenceやIPVMのような人が助けてくれるかもしれません。

結論

3 日間の Web Summit の間、コンベンションでのインターネット接続の問題により、Filecoin のフォト ブースは 99% のアップタイムと 1% の停止がありました。合計で、フォト ブースは 934 枚の写真を Filecoin Network に公開しました。これは、web3.storage の非常に便利なサービスのおかげで、惑星間を移動する準備ができている約 1,000 枚のセルフィーです!

フォトブースも有名です。 3 日目には、CNN の記者もブースにインタビューしました (はい、ブースは有名になりつつあります… 私ではありません)。

ポルトガル、リスボンの Web Summit で Filecoin Photo Booth にインタビューする CNN レポーター

このガイドを使用して、イベント、集まり、ミートアップ、パーティー、または単に楽しみのために独自の惑星間写真ブースを構築してください。

Filecoin ネットワークには現在 16EiB のストレージ容量があり、300PiB 以上のデータが保存されています。このプロジェクトに貢献したり使用したりする方法はたくさんあります。参加について詳しく知るここ.