paint-brush
Flix-Finder: Django と BrightData を使用した映画おすすめアプリの構築 [パート 1/3]@infinity
3,348 測定値
3,348 測定値

Flix-Finder: Django と BrightData を使用した映画おすすめアプリの構築 [パート 1/3]

Rishabh Agarwal9m2023/06/22
Read on Terminal Reader

長すぎる; 読むには

Django アプリケーションを使用すると、ユーザーは複数の評価機関からの評価に基づいて映画をフィルタリングできます。 BrightData のサービスを使用して、アプリケーションに必要なデータを取得します。 Django をインストールし、Django プロジェクトを設定して、Flix-Finder の構築を開始しましょう。
featured image - Flix-Finder: Django と BrightData を使用した映画おすすめアプリの構築 [パート 1/3]
Rishabh Agarwal HackerNoon profile picture

次にどのテレビ番組や映画を見ようか迷ったことがありますか?さまざまなストリーミング プロバイダーでアクセスできるオプションが非常に多いため、次のどんちゃん騒ぎを決めるのは決して簡単ではありません。


次の映画を決めるとき、私たちは主にいくつかの評価機関 (IMDB など) からのレビューと評価に依存します。ただし、これらの機関が多数あることを考えると、どの格付けを信じるべきかを選択するのは難しいかもしれません。


そうは言っても、多くの場合、これらの組織の多くから高い評価を得ている映画を視聴する方が安全です。しかし、そのような映画を見つけるのは難しくありませんか?はい、そうです!


この 3 回のブログ シリーズでは、まさにこの問題を解決するソフトウェア ソリューションを作成していきます。この Django アプリケーション (Flix-Finder と呼ぶことにします) を使用すると、ユーザーは複数の評価機関からの評価に基づいて映画をフィルタリングできます。


BrightData のサービスを使用して、アプリケーションに必要なデータを取得します。


それでは早速、Flix-Finder の構築を始めましょう。

アプリケーションのセットアップ

このセクションを始める前に、Django がシステムにインストールされていることを確認してください。


システムに Django がインストールされている場合は、次のコマンドが機能するはずです。

python3 -m django --version


システムに Django がインストールされていない場合は、pip を使用して Django をインストールしてください。

python3 -m pip install Django


Django プロジェクトをセットアップすることから始めましょう。次のコマンドを使用して新しいプロジェクトを作成します。


 rishabh@my-ubuntu:~/projects$ python3 -m django startproject flix_finder


ディレクトリを新しく作成したプロジェクト ディレクトリflix_finderに変更します。ここでお気に入りのコード エディターを開きます。 Django によって自動的に作成されたこのディレクトリに次のファイルが表示されるはずです。


 rishabh@my-ubuntu:~/projects/flix_finder$ tree . . ├── flix_finder │ ├── asgi.py │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── manage.py 1 directory, 6 files


これらのファイルの詳細については、Django が提供するこの説明を参照してください。


Django サーバーを実行し、 localhost:8000にアクセスして、セットアップが正しく完了したことを確認してください。


 rishabh@my-ubuntu:~/projects/flix_finder$ python3 manage.py runserver

新しいアプリの作成と最初のビュー

Django アプリ (または Django アプリケーション) は、個々の機能をカプセル化する、より大きな Django プロジェクトのコンポーネントを指します。 Django アプリは再利用可能な独立したコンポーネントです。これらは、モデル、ビュー、テンプレート、テスト、およびその他のファイルで構成されます。

このプロジェクトのレコメンダー ロジックはすべて、 recommenderというアプリケーションに存在します。このアプリを作成するには、次のコマンドを実行します。


 rishabh@my-ubuntu:~/projects/flix_finder$ python3 manage.py startapp recommender


上記のコマンドは、 recommenderという名前の新しいフォルダーを作成します。アプリケーションのロジックはすべてこのフォルダー内に収まります。


アプリケーションが正常に作成されたと言えるまでには、あと 1 つのステップが残っています。先に進み、 flix_finder/settings.pyの下にあるINSTALLED_APPSリストに新しく作成したアプリの名前を追加します。


 # flix_finder/settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'recommender' ]


これで、 recommenderアプリが正常に作成されました。


次に、最初のビューを作成しましょう。


Django では、ビューは HTTP リクエストを受信し、HTTP レスポンスを返す Python 関数です。ビューは、ビジネス ロジックに基づいてユーザーにデータを表示する際に重要な役割を果たします。


recommender/views.pyの下に新しいメソッドを作成します。このメソッドは、 localhost:8000/経由で送信されるリクエストを処理します。現時点では、このエンドポイントは単に hello メッセージを返します。


 from django.http import HttpResponse def index(request): return HttpResponse("Hello From Recommender!")


リクエストを処理するためのビュー メソッドを作成しましたが、このビューに対応するエンドポイントを (プロジェクト内で) 指定していません。これはurls.pyファイルで行います。


レコメンダー アプリ内に新しいファイルを作成し、 urls.pyという名前を付けます。ここでは、この URL と view メソッドの対応を指定します。


 from django.urls import path from . import views urlpatterns = [ path("", views.index, name = "index") ]


次に、この新しい URL のファイルを Django に認識させる必要があります。ファイルflix_finder/urls.pyを次のように更新します。


 from django.urls import path, include urlpatterns = [ path('', include("recommender.urls")), path('admin/', admin.site.urls), ]


まだサーバーを起動していない場合は、ブラウザでlocalhost:8000を開きます。 hello メッセージが表示されるはずです。


レコメンダーアプリからこんにちはメッセージが届きました!


おめでとうございます。最初のビューの作成が完了しました。

テンプレートを使ってみよう…

同意しましょう…応答として文字列を送信することは、最もクールなことではありません。代わりに、適切な HTML 応答を送信する必要があります。そして、まさにこの目的のために、Django テンプレートを使用します。


recommenderディレクターの下にディレクトリtemplatesを作成します。 Django はデフォルトでtemplatesという名前のディレクトリ内で HTML ファイルを検索するため、この新しく作成されたフォルダーの名前は特別です。


新しく作成したディレクトリ内に、 index.htmlという名前の新しいファイルを作成します。このファイル内に、ユーザーがlocalhost:8000にアクセスしたときに表示する HTML を記述します。


ここでは HTML の記述が主な焦点ではないため、その部分の説明は省略します。 ここから HTML をコピーするだけで済みます。


この HTML ファイル (または Django テンプレート) について知っておくべきことのいくつかを次に示します。


(1)この HTML は、Web ページ上にナビゲーション バー、カルーセル、動画検索フォーム、動画検索結果の 4 つを表示します。


(2) Django テンプレート言語を使用して、HTML 内で直接 Python 変数を使用できるようにします。


(3)コンテキスト (テンプレートに渡されるデータ) 内のfeatured_movies変数を予期し、それを使用してカルーセルを表示します。


(4) form変数には Django Form オブジェクトが入力されることが期待されており、それを使用して映画検索フォームを表示します。


(5) filtered_movie_list変数を期待しており、それを使用して検索結果を表示します。


(6)また、検索結果が空かどうかを示すno_result_error変数も期待されます。


スタイル設定用の CSS も追加する必要があります。 recommenderディレクトリの下にstaticディレクトリを作成します。このフォルダーにはすべての静的ファイルが保存されます。


style.cssという名前の新しいファイルを作成し、 この URLから CSS を貼り付けます。


これで、必要な HTML と CSS がすべて整いました。次に、映画検索フォームを作成する必要があります。

動画検索フォームの作成

このテンプレートではフォーム オブジェクトを提供する必要があるため、フォーム オブジェクトを作成する必要があります。

Django フォームが何なのかわからないですか?これについてはChatGPTを読んで説明してください -

Django フォームは、HTML フォームの作成と操作に使用される Django フレームワークのモジュールです。これらには、プレーンな HTML フォームを使用する場合に比べて、いくつかの利点があります。

  • HTML の自動レンダリング。 Django フォーム クラスを定義すると、Django はそれを HTML フォームとしてレンダリングします。
  • データの検証。 Django フォームは、送信されたデータを検証し、保存する前にクリーンアップします。
  • データをフォームにバインドします。既存のデータをフォームにバインドして、ユーザーに表示して編集することができます。

レコメンダーのアプリ ディレクトリ内に、 forms.pyという名前のファイルを作成します。これに次のコードを追加します。


 from django import forms class MovieSearchForm(forms.Form): imdb_rating = forms.DecimalField(min_value=0.1, max_value=9.9, required=True, label='Minimum IMDB Rating') release_year = forms.IntegerField(required=True)


ここでは、映画検索フォームのフォーム クラスを作成しました。このフォームには、クラスで説明されている 2 つのフィールドが含まれます。フォームについて詳しく知りたい場合は、これを確認してください。

インデックスビューの更新

テンプレートに必要なものがすべて設定されたら、この新しく作成したテンプレートを使用するように view メソッドを更新する必要があります。


 from .forms import MovieSearchForm # We use a hard-code list here, we will make it dynamic in subsequent parts featured_movie_list = [ { "img_src": "https://images.thedirect.com/media/article_full/amazing-spider-man-3-andrew-garfield-movie-mcu.jpg", "img_alt": "...", "active": True }, { "img_src": "https://static1.colliderimages.com/wordpress/wp-content/uploads/2022/11/avatar-the-way-of-water-poster.jpg", "img_alt": "...", "active": False } ] def index(request): context = { "featured_movies": featured_movie_list, "form": MovieSearchForm() } return render(request, 'index.html', context)


サーバーを起動し、 localhost:8000に移動します。次のページが表示されるはずです。


Flix-Finder のホームページ


BrightData からの IMDB データ

ビュー、URL、テンプレート、フォームをすべて配置したら、アプリケーションが操作するデータを検討できるようになります。私たちのプログラムでは、複数の格付け機関 (まずは IMDB) からのデータが必要になります。


残念ながら、このデータを取得するための明確に定義された API はありません。この情報を取得する 1 つの方法は、Python Selenium を使用して独自のスクレイパーを作成することです。ただし、これにはさらに多くの作業が必要であり、誰もがそのようなテクノロジーに慣れているわけではありません。


より良い解決策は、BrightData などのサードパーティ サービスを使用することです。 BrightData を使用すると、これらすべての情報を簡単に取得できます。


この最初のパートでは、BrightData から事前に厳選された IMDB データセットを使用します。これは、BrightData で利用できる多くのデータセットの 1 つです。このようにして入手できます。


(1) BrightData にアカウントを登録します。


(2)ブラウザからbrightdata.com/cp/datasetsにアクセスするか、左側からDatasets & WebScraper IDEメニューを開きます。

BrightData のデータセットと WebScraper IDE メニュー

(3) Dataset Marketplace に移動し、 IMDB media datasetを検索します。


(4) [データセットの表示] をクリックし、サンプル データセットを CSV 形式でダウンロードします。


ダウンロードしたら、ファイルの名前をIMDB.csvに変更し、 recommender/staticフォルダー内に配置します。このサンプル CSV には、1000 以上の映画の 28 個の IMDB 属性が含まれています。私たちのアプリケーションは、この部分の IMDB データセット上で動作します。

フォームの送信を受信するためのインデックス ビューの更新

検索リクエストを処理するために view メソッドを更新しましょう。


フォームからのすべての検索リクエストは POST リクエストとして到着します。フォームが正しく入力されていることを確認した後、ダウンロードした CSV ファイルからすべてのムービーをリストし、フィルター条件に一致しないムービーを除外します。更新されたコードは次のようになります。


 def index(request): if request.method == 'POST': form = MovieSearchForm(request.POST) if form.is_valid(): movie_list = _getIMDBMovieDataList() filtered_movie_list = _filter_imdb_movie_list(movie_list, form) context = { "featured_movies": featured_movie_list, "form": MovieSearchForm(), "filtered_movie_list": filtered_movie_list, "no_result_error": len(filtered_movie_list)==0 } return render(request, 'index.html', context) context = { "featured_movies": featured_movie_list, "form": MovieSearchForm() } return render(request, 'index.html', context)


メソッド_getIMDBMovieDataList_filter_imdb_movie_listの実装は Django に固有のものではなく、純粋な Python です。したがって、ここではそれについて話すことは省略します。 views.pyファイル全体はここにあります。

最終製品

この時点に到達したことをおめでとうございます。すべての手順を適切に実行した場合は、サーバーを実行し、UI を介して検索を実行できるはずです。検索結果は次のようになります。


IMDB 最低評価 8.0 およびリリース年 2022 年の検索結果を表示する Web ページ。


このシリーズのコード

このシリーズの一部として作成されたすべてのコードは、このGitHub リポジトリで利用できます。このパートの最終結果は、 Part1という名前のこのブランチに含まれています。


自分のコードとリポジトリに存在するコードをクロスチェックして、何か問題がないかどうかを確認することを常にお勧めします。


結論

これで、この 3 部構成の第 1 部が終了します。次のパートでは、BrightData の WebScraper IDE を使用して、他の格付け機関からデータを収集します。その後、フォームを更新して、ユーザーがより複雑な検索を実行できるようにします。


また、カルーセル コンポーネントを動的にします。


また次回…それまで、楽しく学習してください! 🙂