導入 ウェブは進化しており、Web3 テクノロジーはビデオストリーミングを含む従来の業界 革命を起こしています。Odysee などのプラットフォームは、YouTube や Rumble に代わる分散型の選択肢を提供することで、その先頭に立っています。同様に、Google Drive や Dropbox などの従来のプロバイダーとは異なり、 はデータ ストレージを変革し、プライバシー重視でユーザー中心のアプローチを提供しています。 に Sia NextJs、TypeScript、Tailwind CSS、Sia Renterd を使用して 。このチュートリアル シリーズでは、Sia のブロックチェーン テクノロジーを活用してユーザー データの所有権とプライバシーを確保する分散型アプリケーションの作成方法を説明します。 最先端の Web3 映画ストリーミング dApp を構築する旅にご参加ください このチュートリアルを終了すると、次の専門知識を習得できます。 友人と共有したり、学校のプロジェクトとして使用したりするための、完全に機能する映画ストリーミングプラットフォームを構築します。 独自のSaaS（サービスとしてのソフトウェア）アプリケーションを起動する ビデオストリーミング業界におけるWeb3テクノロジーの可能性を解き放つ プロジェクトの実際の動作を確認するには、 また、このような革新的なコンテンツをもっとご覧になりたい場合は 。 以下のデモ ビデオをご覧ください。 、当社のチャンネルに登録してください https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true 前提条件 この手順を実行するには、次のツールがインストールされていることを確認してください。また、スタックに精通していると理解も深まります。 Node.js の 次Js テイルウィンドCSS タイプスクリプト Docker (必須) この 3 部構成のシリーズでは、次の内容を取り上げます。 - Renterd Zen テストネット、パッケージのインストール、および環境変数。 パート 1: プロジェクトのセットアップ - バックエンド サービスの構築 パート 2: バックエンド開発 - フロントエンドとバックエンド サービスの統合。 パート 3: フロントエンド開発 開発プロセス全体を視聴したい場合は、 。プレイリストでは、ここに書かれていることすべてとそれ以上のことがビデオに収録されています。 このプレイリストを視聴することをお勧めします それでは、このプロジェクトの設定に取り掛かりましょう。 プロジェクトのセットアップ – パート 1 まず、Sia Renterd docker compose スクリプトとバックエンドおよびフロントエンド サービスを含む準備済みのリポジトリをクローンします。次のコマンドを実行します。 $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv ここで、新しくクローンした GitHub プロジェクトのスターター ブランチに切り替えて、以下のコマンドを実行して完了することが重要です。 $ git checkout 01_starter_branch 次に、この Renterd サービスに関連付けられた環境変数を設定しましょう。このプロジェクトのルートに ファイルを作成し、以下のキーを適用します。 .env RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error これらの API キーを取得するには、Sia Renterd をマシンにインストールする必要があります。以下の短いビデオをご覧ください。このビデオですべてがほぼ要約されています。 https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true 上記のビデオに示されているように、Renterd アプリケーションでシード フレーズを生成し、上記のビデオの指示に従ってそれを環境変数内に含めます。パスワードは、簡単に覚えられるものに置き換えます。 次に、まだインストールしていない場合は インストールする必要があります。または、可能であれば、 などの無料のオンライン プラットフォームや VPS を使用して Docker インスタンスを実行します。それ以外の場合は、ローカル コンピューターにインストールします。 、公式 Web サイトから Docker をダウンロードして Gitpod 最後に、このプロジェクトのルートで次の docker コマンドを実行して、docker コンテナを起動できます。ターミナルがこの ファイルと同じディレクトリの場所にあることを確認します。 docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build コンテナをプルダウンするコマンドに注意してください: 。Docker インスタンスをシャットダウンしたいときにこれを実行します (ただし、今ではありません)。 $ docker compose -f "docker-compose.yml" down 上記の手順を正しく実行した場合、ブラウザで にアクセスすると、以下のインターフェースが表示されます。 http://localhost:9880 ログインするには、パスワード（環境変数から）を入力します。次に、以下のビデオの設定手順に従って、ファイルのアップロード、ダウンロード、ストリーミング用に Sia Renterd インスタンスを設定します。 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true 上記のビデオは 分から始まります。20 で停止してください。この部分では、Renterd の構成プロセスを視覚的にガイドします。 6:41 20:01 ブロックチェーンの同期プロセスとホストのマッチングは準備に最大 かかるため、プロセス全体に忍耐が必要になることに注意してください。 25 min Renterd に という新しいバケットを作成してください。このバケットにこのプロジェクトのすべてのファイルが保存されます。上記の手順を正常に実行した場合、Renterd ノードはアップロードとダウンロードの準備が整っているはずです。下の画像を参照してください。 vidtv 素晴らしいですね。この時点で、Renterd サービスはファイルの受信を開始する準備ができていますが、プログラムで通信する必要があります。 バックエンドとフロントエンドのパッケージと環境変数を設定して、このチュートリアルのパート 1 を締めくくりましょう。 バックエンド サービス パッケージをインストールし、さらなる開発の準備を整えるには、次の手順を実行します。 バックエンド プロジェクトのセットアップ 次のコマンドを使用して、新しいターミナル インスタンスからバックエンド ディレクトリに移動します。 $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory 次に、環境変数に次の情報を入力します。 SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000 次に、 を実行してバックエンドを起動し、バグがないことを確認します。 $ yarn build && yarn start 最後に、次のコマンドを実行して、フロントエンドに関連するパッケージをインストールします。その後、それを実行します。 フロントエンド プロジェクトのセットアップ 次のコマンドを使用して、新しいターミナル インスタンスからバックエンド ディレクトリに移動します。 $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory 次に、環境変数に次の情報を入力します。 NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000 プロジェクト ID を取得するには、 にサインアップしてプロジェクトを作成します。環境変数にプロジェクト ID を指定したら、 を実行してバックエンドを起動し、バグがないことを確認します。 Walletconnect $ yarn build && yarn start この時点で、ブラウザで にアクセスすると、以下のインターフェースが表示されます。 http://localhost:3000 このマイルストーンに到達しました。おめでとうございます! 、バックエンド サービスの開発を完了してください。 次のステップ パート 2 に進み バックエンド サービス – パート 2 まだ読んでいない場合は、パート 1 をお読みください。それでは、パート 2「Web3 映画ストリーミング プラットフォームのバックエンド サービスの構築」に進みましょう。 おかえりなさい！ バックエンドのスターター コードを提供しました。現在、サーバーを起動してブラウザーで にアクセスすると、「ようこそ」メッセージが表示されます。この基盤を基に構築してみましょう。 http://localhost:9000 現在、これらのコードはバックエンドのソース ディレクトリにあります。簡単に説明しましょう。 このフォルダーは に完全にアドレス指定でき、HTTP 例外ハンドラー関数とファイル アップロード情報を処理するためのインターフェイスという 2 つの重要なファイルが含まれています。 ユーティリティ ファイル backend/src/utils このコードは、組み込みの JavaScript クラスを拡張するカスタム クラスを定義し、特定の HTTP ステータス コードとメッセージを持つエラー インスタンスの作成を可能にします。 Error HttpException https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 このコードは、アップロードされたファイルを表すインターフェイス を定義し、名前、データ、サイズ、エンコーディングなどのプロパティを指定して、このバックエンド アプリケーションでファイルのアップロードを処理するための構造化された方法を提供します。 FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e そして、 ルート フォルダーには、CORS とファイル アップロード サポートを備えた Express.js サーバーを設定し、「Welcome」メッセージを 単一の GET ルートを定義し、エラーをキャッチしてカスタム HttpExceptions として再スローすることでエラーを処理し、環境変数で指定されたポート 9000 でサーバーを起動する index.ts ファイルがあります。 backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f 主要なファイルについて説明したので、 フォルダーに、アプリケーション内でそれぞれ異なる目的を果たす 2 つの新しいファイルを作成しましょう。 services サービスファイル フォルダーに、この場所に という新しいフォルダーを作成します。ここで、2 つのサービスを作成します。 backend/src services : Renterd サービスと通信しながら、ファイルのアップロード、ダウンロード、ストリーミング、キャッシュを処理します。 Sia サービス : キャッシュされたファイルを管理し、7 日経過すると毎日午前 0 時に自動的に削除します。 バックグラウンド サービス Sia サービス フォルダーに という名前のファイルを作成し、以下の手順に従ってこのサービスを作成します。 backend/src/services sia.service.ts https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true このコードは、Sia API 設定と元の URL の環境変数で初期化する クラスを定義し、Sia サービスとのやり取りを管理するための基盤を提供します。次に、このサービスの残りのコードを指定しましょう。 SiaService Sia ネットワークにファイルをアップロードするには、クラスに次の 3 つのメソッドを追加する必要があります。2 つはプライベートで、1 つはパブリックです。 Sia Renterd へのファイルのアップロード https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true このコードは、ループを使用して定義済みの文字列からランダムに文字を選択し、大文字と小文字、および数字で構成された指定された長さのランダムな文字列を生成するプライベート メソッド を定義します。これを使用して、ファイルを Renterd に送信する前に各ファイルの名前を一意に変更します。 generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true 上記のコードは、Axios を使用して Sia Renterd にファイルをアップロードし、アップロードの進行状況とエラーを処理し、アップロードが失敗した場合に Axios 応答を返すかエラーをスローするプライベート メソッド を定義します。 uploadToSiaService Renterd エンドポイントは API ドキュメントに記載されています。このドキュメントを確認するか、Sia Renterd API ドキュメントについて説明した以下のビデオをご覧ください。 https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true ここで、後でアプリケーションのエンドポイントとして公開するパブリック メソッドを含めましょう。 https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true このコードは、一意の識別子を生成し、ファイルをローカル キャッシュに保存し、Sia Renterd にアップロードして、ファイルの URL と成功メッセージを返すか、アップロードが失敗した場合はエラーをスローすることによって をアップロードするパブリック メソッド uploadFile を定義します。 uploadFile Sia ネットワークにファイルをダウンロードするには、クラスに次の 2 つのメソッドを追加する必要があります。1 つはプライベートで、もう 1 つはパブリックです。 Sia Renterd へのファイルのダウンロード https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true このコードは、Sia サービスからファイルを取得し、それをローカルにキャッシュし、ファイルの読み取り可能なストリームを返し、エラーを処理し、ファイルが見つからない場合は 404 イメージを返すプライベート メソッド を定義します。 downloadFromSiaService これらの response_files をバックエンド ディレクトリで使用できるようにしておきます。そうしないと、 ファイルの呼び出し時にエラーが発生します。 ディレクトリに という別のフォルダーを作成し、次の画像をそこにコピーします。 404.png backend response_files 完璧です。それでは、このファイル ダウンロード サービスを完成させましょう。また、 クラスに以下のメソッドを追加します。 SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true このコードは、Sia Renterd からファイルを取得するためにプライベート メソッド を呼び出すパブリック メソッド を定義し、取得したファイルの読み取り可能なストリームを返します。 downloadFromSiaService downloadFile サービスエンドポイント これらのさまざまなメソッドをそれぞれのエンドポイントに結合するときが来ました。現在は 1 つしかありませんが、ファイルのアップロードとダウンロード用にさらに 2 つ必要になります。ファイル ストリーミングでもダウンロード エンドポイントが使用されます。 ファイルに移動し、次のコードを使用してそのコンテンツを更新します。 backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true このコードは、CORS とファイル アップロード サポートを備えた Express.js サーバーを設定し、ウェルカム メッセージ、Sia ネットワークへのファイル アップロード、Sia ネットワークからのファイル ダウンロードの 3 つのエンドポイントを定義します。ファイル操作の処理には SiaService クラスを使用し、エラー処理には HttpException を使用します。 視覚的な補助が必要な場合は、以下のビデオのこのセクションを視聴し、タイムスタンプ で停止するようにしてください。 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true ファイルがキャッシュ内に留まる期間を制御して、サーバーが未使用のファイルでいっぱいにならないようにするには、キャッシュ管理サービスを作成する必要があります。このサービスが必要な唯一の理由は、 を減らすことであるということを理解することが重要です。 データの遅延 バックグラウンドサービス フォルダーに移動し、 というファイルを作成し、次のコード シーケンスを追加します。 backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true このコードは、キャッシュ ディレクトリを設定し、 ライブラリを使用して毎日のジョブをスケジュールし、バックグラウンド ジョブを初期化して確認メッセージを記録する クラスを定義します。キャッシュ内の 7 日以上経過したファイルを削除するメソッドを作成しましょう。 node-cron BackgroundService このメソッドを クラスに追加します。 古いファイルを削除するには、 BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true このコードは、ディレクトリを読み取り、各ファイルの作成時間をチェックし、ターゲット時間を超えたファイルを削除し、ジョブの開始と終了、および や削除の成功をログに記録することで、7 日以上経過したファイルをキャッシュ ディレクトリから削除する deleteOldFiles というメソッドを定義します。 deleteOldFiles ここで、node-cron パッケージを利用してファイルの削除をいつ実行するかをスケジュールする関数を作成しましょう。 https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true このコードは、毎日深夜 (00:00) に メソッドを実行して自動ファイル クリーンアップを実行する毎日の cron ジョブを設定します。 deleteOldFiles また、バックグラウンド サービス クラスのインスタンス化時に毎日のジョブをスケジュールするようにコンストラクター関数を更新する必要があります。 https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true 完璧です。最後に、初期化時にこのバックグラウンド操作をサーバー プロセスの一部として追加しましょう。backend ファイルに移動し、アプリ リスナー メソッドを更新してバックグラウンド サービス ファイルをインポートします。 backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true を使用してバックエンド サービス コマンドを再実行すると、下の画像のようなターミナル出力が表示されます。 $ yarn build && yarn start バックグラウンド サービス全体をどのようにコーディングしたかをご覧になりたい場合は、以下のビデオをご覧ください。タイムスタンプ で停止するようにしてください。 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true おめでとうございます。これで、このチュートリアルの最後の部分である に進む準備が整いました。 次のステップ パート 3 このチュートリアル シリーズの最後の部分に進み、バックエンドとフロントエンドを統合し、各部分を接続してファイル アップロード アプリケーションを完成させます。まず、フロントエンドの認証が稼働していることを確認します。 Web3 モーダル認証 – パート 3 Frontend ディレクトリに 'config' という名前の新しいフォルダーを作成し、インデックス ファイルを追加します。パスは になります。次に、次のコードを追加してみましょう。 /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true このコードは、Web3 アプリケーションの Wagmi 構成を設定し、メタデータ、サポートされるチェーン、ウォレットやソーシャル ログイン オプションなどの認証設定を定義して、 エクスポートに保存します。また、認証状態を追跡するためのコンテキスト API を作成する必要があります。 config 次に、フロントエンド ディレクトリ内に 'context' という名前の新しいフォルダーを作成し、インデックス ファイルを追加します。パスは になります。次のコードを追加します。 コンテキスト API /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true このコードは、Wagmi と React Query を使用して Web3Modal プロバイダーを設定し、プロジェクト ID とテーマ変数を使用して Web3 モーダルを構成し、アプリケーションを WagmiProvider と QueryClientProvider でラップします。 : 上記の構成を含めるようにアプリケーション レイアウトを更新してみましょう に移動し、そのコードを以下のコードに置き換えます。 レイアウトの更新 /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true 上記のコードは、メタデータ、フォント、スタイル、Web3 モーダル、トースト通知、ヘッダーやフッターなどのレイアウト コンポーネントのプロバイダーを含む、Next.js アプリケーションのルート レイアウトを設定します。 ここで、 /components/layout/Header.tsx および コンポーネントのログイン ボタンを有効にし、以下の情報を使用してコードを更新する必要があります。 ログイン ボタン /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true このコードは、ロゴ、ナビゲーション リンク、カスタム メニュー、さまざまな画面サイズに対応するレスポンシブ デザインの Web3 モーダルを起動するログイン ボタンを含むナビゲーション バーの React コンポーネントを定義します。 ログイン ボタンをクリックして、お好みのプロバイダー、X、Facebook、Google、Discord、または Ethereum で続行すると、私たちが行った操作が機能したことの証拠として次の画像がポップアップ表示されます。 素晴らしいですね。さらに詳しく、データベースと NextJs API ベースのシステムをセットアップしてみましょう。プロセスについて不明な点がある場合は、下のビデオ セクションをご覧ください。02 マークで停止するようにしてください。 :57:59 の https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true データベース スクリプト まず、NextJs 構成スクリプトを更新して、ページとエンドポイントを適切に処理し、リモート イメージを警告や精査から解放しましょう。 https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true このコードは、API ルートの書き換えとイメージの最適化を設定し、任意の HTTPS ホスト名からのリモート イメージと localhost ドメインからのローカル イメージを許可する Next.js 構成オブジェクトを定義します。 このアプリケーションでは SQLite を使用しますが、MYSQL や NOSQL プロバイダーなどのより堅牢なソリューションを使用することもできます。簡単にするために、SQLite フラット ファイルを使用して作業してみましょう。 データベース構成スクリプト ファイル パスを作成し、以下のコードを追加します。 /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true このコードは、SQLite データベース接続を設定し、エラー処理と promise ベースの非同期実行を使用して、データベースに対して GET および POST リクエストを実行する 2 つの API 関数 と 定義します。データベースからデータを送信または取得する必要がある場合は、常にこれらのコードを使用します。 apiGet apiPost すべてのコンテンツを保持するためのデータベース フラット ファイルとテーブルの両方を作成する必要があります ファイル パスを作成し、以下のコードを追加します。 データベース移行スクリプト /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true このコードは、SQLite を使用して、存在しない場合は指定された列を持つ「movies」テーブルを作成し、操作の結果をログに記録するデータベース移行関数を定義します。次に、 ディレクトリを指すターミナルで以下のコマンドを実行します。 /frontend $ cd frontend $ npx esrun app/api/migrations.ts このプロセスでは、フロントエンド ディレクトリのルートに というデータベース フラット ファイルも作成されることに注意してください。このコマンドは package.json スクリプトにも追加されているため、フロントエンド ディレクトリで 実行しても同様に動作するはずです。 movies.db $ yarn migrate 視覚的なサポートが必要な場合は、下のビデオを マークで停止してご覧ください。 03:10:54 の https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true アプリケーションエンドポイント ここで、ムービーの作成、読み取り、更新、削除のためのエンドポイントをいくつか定義しましょう。これらのエンドポイントを作成するには、NextJs API プロビジョニングを使用します。 ムービーを作成するには、ユーザー ID、ムービー名、画像、ビデオ URL、リリース日、ジャンル、評価、言語、期間、背景の説明などの情報が必要です。/frontend/app/api/movies/create/route.ts ファイル を作成し、以下のコードを追加します。 ムービーエンドポイントを作成する /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true このコードは、POST リクエストを処理し、ムービー データを検証および処理し、一意のスラッグを生成し、エラーを処理して JSON 応答を返すと同時に apiPost 関数を使用してデータをデータベースに挿入するエンドポイントを定義します。 ムービーを更新するには、ユーザー ID、スラッグ、およびムービーの作成時に提供されるその他の情報が必要です。 ファイルパスを作成し、以下のコードを追加します。 ムービーエンドポイントの更新 /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true このコードは、apiPost 関数を使用して、ムービーを更新し、必要なプロパティを検証し、データベース内のムービー データを更新するための SQL クエリを実行するための POST リクエストを処理するエンドポイントを定義します。 ムービーを削除するには、ムービーのユーザー ID とスラッグなど 情報が必要です。/frontend/app/api/movies/delete/route.ts ファイルパスを作成し、そこに以下のコードを追加します。 ムービーエンドポイントの削除 /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true このコードは、映画の削除、必須プロパティ (userId と slug) の検証、apiPost 関数を使用してデータベースから映画を削除する SQL クエリの実行に関する POST リクエストを処理するエンドポイントを定義します。 映画を取得するために必要なオプションのデータは pageSize と userId です。これら 、結果をフィルタリングおよびページ分割するためのクエリ パラメータとして渡すことができます。/frontend/app/api/movies/all/route.ts ファイル パスを作成し、以下のコードを追加します。 すべての映画エンドポイント /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true 上記のコードは、映画を取得するための GET リクエストを処理するエンドポイントを定義し、オプションで userId によるフィルタリングと pageSize によるページ分割を許可し、結果を JSON 形式で返します。 単一の映画を取得するには、映画のスラッグというデータが必要です。/frontend/app/api/movies/[slug]/route.ts ファイル パスを し、以下のコードを追加します。 単一の映画エンドポイント /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true このコードは、スラッグで映画を取得し、スラッグ パラメータを検証し、apiGet 関数を使用してデータベースから映画データを取得するための SQL クエリを実行する GET リクエストを処理するエンドポイントを定義します。 これで、このアプリケーションに必要なすべてのエンドポイントがマークされました。これらのエンドポイントをよりよく理解するために視覚的な補助が必要な場合は、以下のビデオをご覧ください。タイムスタンプ で停止するようにしてください。 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true エンドポイント統合 私たちの仕事は、事前にコード化されたコンポーネントとページを確認して更新し、それぞれの目的と機能を説明し、既存のコードに加えた変更を文書化することです。まず、 ディレクトリに以前に作成したエンドポイントと対話するためのサービスを作成します。 api ファイル パスを作成し、以下のコードを追加します。 /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true このサービスは、映画データベースと対話するための一連の機能を提供し、アプリケーションが映画の取得、スラグによる単一の映画の取得、新しい映画の作成、既存の映画の更新、映画の削除、API リクエストを使用したファイルのアップロード、エラーの処理などを行うことを可能にします。 アプリケーションページ アプリケーションに関連するさまざまなページを確認して更新しましょう。多くの部分を変更する必要はなく、ここで強調表示されている部分だけを変更すれば十分です。 ムービーページの作成 このページは、React および Wagmi ライブラリを使用して、ユーザーがビデオおよび画像ファイルをアップロードし、ムービーの詳細を入力し、検証とエラー処理を行ってフォームを送信してムービーを公開できるムービー公開フォームです。 次に、 /create/page.tsx にあるファイルを以下のコードで更新します。 /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true このコードでは、元のコードと比較して次の変更が加えられています。 から 関数をインポートし、 関数で使用して新しいムービーを作成しました。 api.service createMovie handleSubmit 関数呼び出しに パラメータを追加し、 フックからユーザーのアドレスを渡します。 createMovie userId useAccount によって返された promise を処理するために を使用するように 関数を更新しました。 createMovie toast.promise handleSubmit 関数の 関数呼び出しにエラー処理を追加しました。 handleSubmit createMovie これらの変更により、フォームは映画のデータを API に送信し、新しい映画のエントリを作成すると同時に、エラーを処理して成功メッセージを表示できるようになります。 ムービー編集ページ このムービー編集ページでは、承認されたユーザーがムービーの詳細を更新し、ポスターやビデオをアップロードし、変更を保存できます。また、ユーザーがムービーを編集できるように特別に設計された React、Wagmi、Next.js を利用して、検証とエラー処理も行えます。 次に、 /movies/edit/[slug]/page.tsx にあるファイルを以下のコードで更新します。 /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true 元のコードとは異なるコードへのアップグレードは次のとおりです。 から と 関数をインポートし、それぞれ フックと 関数で使用しました。 @/app/services/api.service fetchMovie updateMovie useEffect handleSubmit ムービーデータを取得するために、 メソッドを 関数に置き換えました。 posters.find() fetchMovie 更新されたムービーの詳細を使用して 関数を呼び出すように 関数を更新しました。 updateMovie handleSubmit 関数の 関数呼び出しにエラー処理を追加しました。 handleSubmit updateMovie これらの変更により、アプリケーションは API エンドポイントと対話して映画データを取得および更新できるようになりました。一方、元のコードはローカルの 配列に依存していました。 posters ホームページ このホームページは、React と Next.js を使用して、バナー コンポーネント、映画のリスト (API ソースまたは読み込み UI から)、サブスクリプション オプションをレンダリングし、ユーザーにとって魅力的で有益なランディング ページを提供します。 にあるファイルを次のコードで更新します。 /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true ホームページに加えた変更は次のとおりです。 から 関数をインポートし、 フックで使用して API からムービー データを取得しました。 ./services/api.service fetchMovies useEffect ローカル データを、API からデータを取得する 関数呼び出しに置き換えました。 posters fetchMovies 状態を設定する前に、 によって返された promise が解決されるのを待機するための キーワードが追加されました。 movies fetchMovies await これらの変更により、アプリケーションはローカル データに依存するのではなく、API から映画データを取得できるようになり、アプリケーションがより動的でデータ駆動型になります。 ユーザーアカウントページ このページには、現在接続しているユーザーが投稿した映画のリストが表示され、データの取得中に読み込みスケルトン プレースホルダーが表示され、Wagmi と react-loading-skeleton を使用して、ユーザーがまだアカウントを接続していない場合は接続するように促すメッセージが表示されます。 にあるファイルを次のコードで更新します。 /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true このページに加えられた変更は次のとおりです。 から 関数をインポートし、 フックで使用して API からムービー データを取得しました。 @/app/services/api.service fetchMovies useEffect ローカル データを、API からデータを取得する 関数呼び出しに置き換えました。 posters fetchMovies ユーザー固有のムービー データを取得するために、 関数に引数として を渡します。 fetchMovies address 関数がこのロジックを処理するようになったため、ムービー リストをレンダリングする前の の条件チェックが削除されました。 fetchMovies address ロード中のスケルトンを表示するための条件文が簡素化され、 状態のみに依存するようになりました。 loaded これらの変更により、接続されたユーザーに固有の映画データが API から取得され、データの取得中に読み込みスケルトンが表示されます。 映画詳細ページ このページには、名前、公開年、評価、期間、ジャンル、背景情報などの映画の詳細がビデオ プレーヤーや関連映画とともに表示され、ユーザーが所有者である場合は Next.js と Wagmi を使用して映画を編集または削除するオプションが提供されます。 にあるファイルを次のコードで更新します。 /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true ここでは大きな変更をいくつか行いました。変更内容の概要は次のとおりです。 から 、 、 関数をインポートし、それらを使用して API エンドポイントと対話しました。 @/app/services/api.service deleteMovie fetchMovie fetchMovies ムービーデータを取得するために、ローカルデータを API 呼び出しに置き換えました。 関数を使用してムービー削除機能を実装しました。 deleteMovie ムービーの削除中に通知を表示するために を使用しました。 toast.promise ローカル データを削除し、API 呼び出しに置き換えました。 posters 関数を呼び出して応答を処理するように 関数を更新しました。 deleteMovie handleSubmit および 関数を呼び出すように フックを更新しました。 fetchMovie fetchMovies useEffect これらの変更により、アプリケーションは API と対話して映画データを取得および削除し、削除プロセス中にユーザーに通知を表示します。 以下のビデオのこの部分では、これらのページをエンドポイントに統合する実践的な方法を紹介します。問題が発生した場合は、この部分を自由に視聴してください。タイムスタンプ で停止するようにしてください。 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true アプリケーションコンポーネント アプリケーション内の各コンポーネントの目的について説明しましょう。変更が必要なコンポーネントはすべて更新します。 バナーコンポーネント このコンポーネントは、映画のバナーの背景画像の回転を表示し、5 秒ごとに映画の画像の配列を循環して、シンプルで自動的なスライドショー効果を作成します。このコンポーネント コードは、 で確認できます。 /frontend/app/components/home/Banner.tsx ポスターコンポーネント このコンポーネントは、Swiper ライブラリを使用して、自動再生、ページネーション、ナビゲーションなどの機能を備えた映画ポスターのレスポンシブでインタラクティブなカルーセルを表示し、プロパティとして渡された映画のリストを表示し、さまざまな画面サイズに適応する動的なレイアウトを備えています。このコンポーネント コードは、 で評価できます。 /frontend/app/components/home/Posters.tsx ポスターUIコンポーネント このコンポーネントは、 react-loading-skeleton ライブラリを使用して、映画ポスター セクションのプレースホルダー スケルトン レイアウトを表示します。このレイアウトでは、「posters」プロパティに基づいて動的な数のスケルトン ポスターが表示され、さまざまな画面サイズに適応するレスポンシブ デザインにより、実際のポスター データが取得されて表示されるまで読み込み状態が示されます。このコンポーネント コードは、 で評価できます。 /frontend/app/components/home/PosterUI.tsx サブスクリプションコンポーネント このコンポーネントは、サブスクリプション プラン セクションを表示し、さまざまなダミー プランの詳細、価格、特典を紹介します。レスポンシブ グリッド レイアウトとインタラクティブなホバー効果を利用してユーザー エクスペリエンスを向上させ、ユーザーがニーズに合ったプランを選択できるようにします。このコンポーネント コードは、 app/components/home/Subscription.tsx で確認できます。 /frontend/app/components/home/Subscription.tsx ヘッダーコンポーネント このコンポーネントは、ページ上部に固定ナビゲーション バーをレンダリングします。このナビゲーション バーには、ロゴ、さまざまなセクションへのリンクを含むナビゲーション メニュー、レスポンシブ デザイン用のメニュー切り替えボタン、ログイン ボタンが備わっており、アプリケーション全体で一貫性がありアクセスしやすいヘッダー セクションを提供します。このコンポーネント コードは、 components/layout/Header.tsx で確認できます。 /frontend/app/components/layout/Header.tsx フッターコンポーネント このコンポーネントは、ページの下部にフッター セクションをレンダリングします。このフッター セクションには、アプリケーションのロゴ、簡単な説明、ナビゲーション リンク、連絡先情報、Sia Foundation が提供する分散型ストレージ ソリューションに関するクレジットが表示され、関連情報とリンクを含む明確で整理されたフッター セクションが提供されます。このコンポーネント コードは、 で確認できます。 /frontend/app/components/layout/Footer.tsx メニューコンポーネント このコンポーネントは、レスポンシブなメニュー切り替えボタンをレンダリングします。このボタンをクリックすると、ナビゲーション リンクを含むドロップダウン メニューが開いたり閉じたりします。これにより、ユーザーは小さい画面でアプリケーションのさまざまなセクションにアクセスできるようになります。一方、ナビゲーション リンクがすでに表示されている大きい画面ではメニューを非表示にします。このコンポーネント コードは、 で評価できます。 /frontend/app/components/shared/Menu.tsx 映画カードコンポーネント このコンポーネントは、ホバー効果で映画のポスターを 1 つ表示し、映画の名前、公開年、背景の概要などの追加情報を表示するとともに、映画の詳細ページへのリンクとしても機能し、レスポンシブ デザインとアニメーション トランジションを利用してユーザー エクスペリエンスを向上させます。このコンポーネント コードは、 で確認できます。 /frontend/app/components/shared/MovieCard.tsx アップロードされたコンポーネント このコンポーネントは、アップロードされたファイル (画像またはビデオ) のプレビューを進行状況バーと削除ボタンとともに表示し、ユーザーがアップロードされたファイルを確認して削除できるようにします。また、アニメーションやホバー効果を備えた視覚的に魅力的でインタラクティブなインターフェースも提供します。このコンポーネント コードは、 で評価できます。 /frontend/app/components/shared/Uploaded.tsx アップローダーコンポーネント このコンポーネントは、ドラッグ アンド ドロップ、ファイル タイプの検証、サイズ制限、アップロードの進行状況の追跡、成功/エラーの通知などの機能を備えた、ファイル (具体的にはビデオやポスター) をアップロードするためのユーザー インターフェイスを提供し、React の状態管理、イベント処理、API 統合を組み合わせてアップロード プロセスを処理します。 にあるファイルを次のコードで更新します。 /frontend/app/components/shared/uploader.tsx https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true このコンポーネントに加えられた変更は次のとおりです。 : 元のコードには実際のファイルのアップロード機能が実装されていませんでした。ファイルのアップロードは行われず、成功のトースト通知のみが表示されていました。この更新されたコードには、ファイルのアップロードを処理する の 関数が含まれています。 ファイルのアップロード機能 api.service uploadFile : 更新されたコードはアップロードの進行状況を追跡し、UI に表示します。 進行状況の追跡 : 更新されたコードには、ファイルアップロード プロセスのエラー処理が含まれています。 エラー処理 : 更新されたコードでは、正規表現を使用したより堅牢なファイル タイプ検証が使用されます。 ファイル タイプ検証 : 更新されたコードはより適切に構成され、異なるタスクを処理するための個別の関数が用意されているため、読みやすく、保守しやすくなっています。 コードの構成 : 更新されたコードには、アップロードの進行状況やアップロード中のキャンセル ボタンの表示など、いくつかの UI の更新が含まれています。 UI の更新 この更新されたコードは、実際のファイルアップロード機能、進行状況の追跡、エラー処理、およびより優れたコード構成を備え、より完全かつ堅牢になっています。 以下のビデオでは、各コンポーネントの機能についてさらに詳しく説明していますので、ぜひご覧ください。 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true これでプロジェクトは完了です。最後に必要なのは、このプロジェクトをブラウザで起動することです。 を実行して、ブラウザでプロジェクトがライブで表示されることを確認します。 $ yarn build && yarn start 問題が発生した場合は、トラブルシューティングのために次のリソースを参照してください。次回まで、ご多幸をお祈りいたします。 🏠 シアのウェブサイト 🔥 シーア・レンタード 👨💻 シア レンタード API 🚀 シーア ディスコード チャンネル 💡 YouTube 動画再生リスト 著者について 私はWeb3開発者であり、企業や個人が分散型アプリケーションを構築して起動するのを支援する会社、 の創設者です。ソフトウェア業界で8年以上の経験があり、ブロックチェーン技術を使用して新しい革新的なアプリケーションを作成することに熱心に取り組んでいます。私は を運営しており、そこでWeb3開発に関するチュートリアルやヒントを共有しています。また、ブロックチェーン分野の最新動向に関する記事を定期的にオンラインに投稿しています。 Dapp Mentors Dapp MentorsというYouTubeチャンネル
