映画ストリーミング サイトを数時間で構築しました - その手順はこちら

48 時間で映画ストリーミング サイトを構築しました - その様子は次のとおりです

数週間前、バックエンドがまったくないようだった映画ストリーミング サイトをいくつか見つけました。彼らは、TMDB などの API を使用して映画データを取得し、vidsrc.dev を使用して実際のビデオをストリーミングしていました。そこで私は、「自分でこれを試してみたらどうだろう？」と考えました。もしバックエンドを持たず、React といくつかの賢い API だけを使って、似たようなもの (映画ストリーミング サイト) を構築できたらどうなるでしょうか?

それで、私は自分自身に挑戦することにしました。私は映画ストリーミング サイトを構築するという 48 時間の挑戦を自分に課しました。バックエンドもデータベースもありません。フロントエンドには React が必要で、映画データを取得してストリーミングを処理するための API がいくつかあります。私は、「ゼロから始めて、どこまで到達するか見て、その過程でたくさんのことを学ぼう」と考えました。

開発者であれば、何か大きなことに取り組みたいという気持ちはよくわかるでしょう。私は React の学習、チュートリアルに従い、小さなプロジェクトを構築することに多くの時間を費やしました。それらは楽しくて勉強になりましたが、私はもっと挑戦的なもの、つまり本物のものが欲しかったのです。実際に使えそうなもの。映画ストリーミング サイトは完璧なアイデアのように思えました。

なぜですか?映画ストリーミング サイトはどこにでもありますよね。しかし、それらすべてが複雑なバックエンドを持っているわけではありません。単純な API を使用して映画データを取得し、コンテンツをストリーミングするものもあります。私も同じことができて、React について多くのことを学ぶことができ、そしてもちろん、他の人と共有できる楽しい小さなプロジェクトを完成させることができると思いました。しかし、私を本当に動機付けたのは、自分の手を汚して、役に立つものを一から構築するというアイデアでした。それは完璧さではなく、すべてを正しく行うことでさえありません。機能するものを構築し、それを改善する方法を見つけることが重要でした。

その旅: プロジェクトの開始

アイデアを思いついた後、すぐにサイトの構築に取り掛かりました。最初のステップは、React アプリをセットアップすることでした。初期セットアップはスムーズでした。これまでに行ったすべてのチュートリアルのおかげで、React に精通していました。しかし、本当の挑戦は、すべてを接続しなければならなかったときに始まりました。

サイトの中核は、最も人気のある映画データベースの 1 つである TMDB から映画データを取得することでした。映画をストリーミングする方法も必要だったので、vidsrc.dev が登場しました。それは非常に簡単でした。TMDB を使用して映画のタイトル、ポスター、詳細を取得し、実際のストリーミング リンクを vidsrc から取得します。

しかし、問題はここにあります。React は UI の構築には最適ですが、多数のコンポーネントとロジックを含むアプリを構築するとなると、少し面倒になる可能性があります。繰り返されるコードがたくさんありました。映画ストリーミング ページとシリーズ ストリーミング ページには、メディアの表示、エラーの処理、インターフェイスのレンダリングのためのコードがほぼ同じでした。私は最初は再利用可能性についてあまり考えていませんでしたが、長い目で見るとそれが私を悩ませることになりました。

それは単にコードを繰り返すだけではなく、構造の欠如でした。コンポーネントを再利用してよりモジュール化されたアプローチを作成する代わりに、多くのロジックをコピーして貼り付けました。これにより、技術的負債が発生し、正直に言うと、コードはあまりきれいとは言えませんでした。しかし、当時の私は、すべてを完璧にすることよりも、何かを早く機能させることに重点を置いていました。

何が間違っていたのか: 私のコードの醜い真実

コードは機能しますが、完璧とは程遠いです。前に述べたように、繰り返されるコードがたくさんあります。映画とシリーズのストリーミング コンポーネントを構築した方法はスケーラブルではありません。たとえば、ハードコーディングしすぎたため、既存のコードを大幅に変更せずに新しい機能を追加することが難しくなりました。

アプリの映画部分とシリーズ部分は基本的に同じです。再利用可能なコンポーネントを作成したり、ロジックを管理可能な部分に分割したりしませんでした。さて、コードを見直してリファクタリングする予定です。計画は、再利用可能な小さなコンポーネントに分割することで、よりモジュール化することです。また、同じことを繰り返す必要がないように、データのフェッチやコンポーネントのレンダリングなどの一般的なタスクを処理する関数にロジックを抽象化したいと考えています。

これは、プロジェクトの保守性を向上させるための重要なステップです。期限に間に合わせるためにただコードをまとめるのではなく、アプリをスケーラブルでクリーンなものにすることに集中する必要があります。また、Tailwind CSS のようなものを使用してスタイルを改善し、アプリの応答性を高めることも考えています。小さな画面で UI を動作させる方法はすでに学びましたが、デザインとユーザー フローを改善してさらに洗練されたものにすることは間違いなく可能です。

次は何ですか: プロジェクトの改善と拡張

サイトは稼働していますが、このサイトでやりたいことがまだたくさんあります。次のステップは、それを機能的であるだけでなくプロフェッショナルなものに変えるために非常に重要です。

まず、再利用性を向上させるためにコードをリファクタリングする予定です。コンポーネントを書き直して、ロジックを重複せずにサイトのさまざまな部分で再利用できるようにします。これにより、新しい機能 (ユーザー認証や映画のおすすめなど) の追加がはるかに簡単になります。

ユーザー認証と言えば、PocketBase を使用してユーザー アカウントを処理することを検討しています。これにより、ユーザーはサインアップ、ログインし、映画体験をカスタマイズできるようになり、お気に入りの映画を保存したり、カスタム プレイリストを作成したりすることもできるでしょう。これは、最初の 48 時間の間に時間があればやりたかったことの 1 つですが、ロードマップに確実に含まれています。

私が検討しているもう 1 つの興味深いアイデアは、Tauri を使用してデスクトップ バージョンのアプリを構築することです。 Tauri を使用すると、React アプリを Windows、Mac、Linux 用のネイティブ デスクトップ アプリケーションにパッケージ化できるようになります。これにより、ユーザーにとってまったく新しいレベルのアクセシビリティが開かれ、ストリーミング エクスペリエンスがよりシームレスになります。

全体像: 成長、学習、前進

結局のところ、この経験全体は成長に関するものでした。このサイトを構築することで、React だけでなく、問題解決、時間管理、リファクタリングの重要性についても多くのことを学びました。このプロジェクトは完璧にはいきませんでしたが、大きな学びの機会となりました。

そして、ここで重要なのは、まだ終わっていないということです。改善すべき点はまだたくさんありますが、それらに取り組むことに興奮しています。現時点ではすべての答えを持っているわけではありませんが、学び、改善することに全力で取り組んでいます。それが開発の素晴らしさです。最初からすべてを正しく行うことが重要ではありません。それは時間をかけて反復し成長することです。

それで、プロジェクトを始めようと考えている人は、恐れずに自分の手を汚してください。最初はコードが完璧でなくても、途中で多くのことを学ぶことができます。そして誰が知っていますか？おそらく、あなたの次の 48 時間プロジェクトは、さらに大きくて優れたものになるでしょう。

私はさらに多くのプロジェクトを行う予定ですので、続報にご期待ください。

https://lensloria.netlify.app/でサイトを見つけてください
コードは https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

以上が映画ストリーミング サイトを数時間で構築しました - その手順はこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。