paint-brush
Flix-Finder : créer une application de recommandation de films avec Django et BrightData [Partie 1/3]by@infinity
3,319
3,319

Flix-Finder : créer une application de recommandation de films avec Django et BrightData [Partie 1/3]

Rishabh Agarwal9m2023/06/22
Read on Terminal Reader

L'application Django permettrait à son utilisateur de filtrer les films en fonction des notes de plusieurs agences de notation. Nous utiliserons les services de BrightData pour récupérer les données requises pour notre application. Commençons à construire Flix-Finder en installant Django et en configurant notre projet Django.
featured image - Flix-Finder : créer une application de recommandation de films avec Django et BrightData [Partie 1/3]
Rishabh Agarwal HackerNoon profile picture

Avez-vous déjà eu du mal à décider quelle émission de télévision ou quel film regarder ensuite ? Prendre une décision concernant votre prochaine binge-watch n'est jamais facile car il y a tellement d'options accessibles sur différents fournisseurs de streaming.


Lorsque nous décidons de notre prochain film, nous nous appuyons principalement sur les critiques et les notes de plusieurs agences de notation (comme IMDB). Cependant, choisir la notation à laquelle croire peut être difficile compte tenu de l'abondance de ces institutions.


Cela dit, il est souvent plus sûr de regarder un film qui a reçu de bonnes notes d'un certain nombre de ces organisations. Mais trouver un tel film n'est-il pas difficile ? Oui c'est le cas!


Dans cette série de trois blogs, nous allons créer une solution logicielle pour résoudre ce problème précis ! Cette application Django, que nous appellerons Flix-Finder, permettrait à son utilisateur de filtrer les films en fonction des notes de plusieurs agences de notation.


Nous utiliserons les services de BrightData pour récupérer les données requises pour notre application.


Alors sans plus tarder, commençons à construire Flix-Finder.

Configuration de l'application

Avant de commencer avec cette section, assurez-vous que Django est installé sur votre système !


La commande suivante devrait fonctionner si Django est installé sur votre système.

python3 -m django --version


Utilisez pip pour installer Django s'il n'est pas installé sur votre système !

python3 -m pip install Django


Commençons par configurer notre projet Django. Créez un nouveau projet à l'aide de la commande suivante.


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


Changez le répertoire pour le répertoire de projet nouvellement créé flix_finder . Ouvrez votre éditeur de code préféré ici. Vous devriez voir les fichiers suivants dans ce répertoire créé automatiquement par 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


Pour en savoir plus sur ces fichiers, reportez-vous à cette explication fournie par Django.


Essayez d'exécuter le serveur Django et d'accéder localhost:8000 pour vous assurer que l'installation s'est terminée correctement !


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

Créer une nouvelle application et notre première vue

Une application Django (ou application Django) fait référence à un composant d'un projet Django plus vaste qui encapsule une fonctionnalité ou une fonctionnalité individuelle. Les applications Django sont des composants réutilisables et indépendants. Ils se composent de modèles, de vues, de modèles, de tests et d'autres fichiers.

Toute la logique de recommandation de notre projet résiderait dans une application appelée recommender . Pour créer cette application, exécutez la commande suivante.


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


La commande ci-dessus créera un nouveau dossier nommé recommender . Toute la logique de notre application irait dans ce dossier.


Il reste une étape avant de pouvoir dire que notre application est créée avec succès. Allez-y et ajoutez le nom de l'application nouvellement créée dans la liste INSTALLED_APPS présente sous flix_finder/settings.py .


 # 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' ]


Avec cela, nous avons créé avec succès notre application recommender .


Maintenant, créons notre première vue.


Dans Django, les vues sont des fonctions Python qui reçoivent des requêtes HTTP et renvoient des réponses HTTP. Les vues jouent un rôle important dans la présentation des données aux utilisateurs en fonction d'une certaine logique métier.


Créez une nouvelle méthode sous recommender/views.py . Cette méthode servirait les requêtes provenant de localhost:8000/ . Pour l'instant, ce point de terminaison renvoie simplement un message hello.


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


Nous avons créé la méthode view pour gérer la requête, mais nous n'avons pas spécifié (dans notre projet) quels points de terminaison correspondent à cette vue. Nous le faisons dans les fichiers urls.py


Créez un nouveau fichier dans l'application de recommandation et nommez-le urls.py . Ici, nous spécifions cette correspondance entre l'URL et la méthode de vue.


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


Nous devons maintenant informer Django de ce nouveau fichier d'URL. Mettez à jour le fichier flix_finder/urls.py comme suit.


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


Démarrez votre serveur, si ce n'est déjà fait, et ouvrez localhost:8000 sur votre navigateur. Vous devriez voir le message d'accueil.


Bonjour message de notre application de recommandation !


Félicitations, vous venez de terminer la création de votre première vue !

Laissez-nous utiliser des modèles…

Mettons-nous d'accord… envoyer une chaîne en réponse n'est pas la chose la plus cool. Nous devrions plutôt envoyer une réponse HTML appropriée. Et dans ce but précis, nous utiliserons les modèles Django.


Créez un répertoire templates sous le directeur recommender . Le nom de ce dossier nouvellement créé est spécial car Django recherche par défaut les fichiers HTML dans les répertoires nommés templates .


Créez un nouveau fichier nommé index.html dans le répertoire nouvellement créé. Dans ce fichier, nous écrirons le HTML que nous voulons rendre lorsque les utilisateurs visitent localhost:8000 .


Étant donné que l'écriture HTML n'est pas l'objectif principal ici, je vais sauter l'explication de cette partie et vous pouvez simplement copier le HTML à partir d ' ici .


Voici quelques-unes des choses que vous devez savoir sur ce fichier HTML (ou modèle Django) -


(1) Ce code HTML affiche quatre éléments sur la page Web : la barre de navigation, le carrousel, le formulaire de recherche de films et les résultats de la recherche de films.


(2) Il utilise le langage de modèle Django pour permettre l'utilisation de variables Python directement dans le HTML.


(3) Il attend la variable featured_movies dans le contexte (données transmises au modèle) et l'utilisera pour afficher le carrousel.


(4) Il s'attend à ce que la variable form soit remplie avec un objet Django Form et l'utilisera pour afficher le formulaire de recherche de film.


(5) Il attend la variable filtered_movie_list et l'utilisera pour afficher les résultats de la recherche.


(6) Il attend également une variable no_result_error qui indique si la recherche a abouti à une réponse vide.


Nous devrons également ajouter du CSS pour le style. Créez un répertoire static sous le répertoire recommender . Ce dossier contiendra tous les fichiers statiques.


Créez un nouveau fichier nommé style.css , et collez le CSS à partir de cette URL .


Avec cela, nous avons tout le code HTML et CSS requis en place. Ensuite, nous devons créer le formulaire de recherche de film.

Création du formulaire de recherche de film

Étant donné que notre modèle nous oblige à fournir un objet de formulaire, nous devrons en créer un.

Vous ne savez pas ce que sont les formulaires Django ? Lire ChatGPT expliquer ceci -

Les formulaires Django sont un module du framework Django utilisé pour créer et travailler avec des formulaires HTML. Ils offrent plusieurs avantages par rapport à l'utilisation de formulaires HTML simples :

  • Rendu automatique du HTML. Vous définissez une classe de formulaire Django et Django la restitue sous la forme d'un formulaire HTML.
  • Validation des données. Les formulaires Django valident les données soumises et les nettoient avant de les enregistrer.
  • Liaison de données à des formulaires. Vous pouvez lier des données existantes à un formulaire pour les afficher à l'utilisateur en vue de les modifier.

Créez un fichier nommé forms.py dans le répertoire de l'application du recommandeur. Ajoutez-y le code suivant.


 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)


Ce que nous venons de faire est de créer une classe de formulaire pour notre formulaire de recherche de film. Ce formulaire contiendra deux champs comme décrit dans la classe. Si vous voulez en savoir plus sur les formulaires, consultez ceci .

Mise à jour de la vue d'index

Avec toutes les choses requises pour les modèles définis, nous devons maintenant mettre à jour notre méthode de vue pour utiliser ce modèle nouvellement créé.


 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)


Démarrez votre serveur et dirigez-vous vers localhost:8000 . Vous devriez voir la page suivante.


Page d'accueil de Flix-Finder


Données IMDB de BrightData

Avec toutes les vues, URL, modèles et formulaires en place, nous pouvons maintenant considérer les données sur lesquelles notre application fonctionnera. Notre programme nécessiterait des données de plusieurs agences de notation (IMDB, pour commencer).


Malheureusement, il n'existe pas d'API bien définie via laquelle nous pouvons récupérer ces données. Une méthode pour obtenir ces informations consiste à créer nos propres scrapers en utilisant Python Selenium. Cependant, cela nécessiterait plus de travail, et tout le monde n'est pas à l'aise avec de telles technologies.


Une meilleure solution consiste à utiliser des services tiers comme BrightData. BrightData facilite l'obtention de toutes ces informations.


Pour cette 1ère partie, nous utiliserons un ensemble de données IMDB pré-organisé de BrightData. C'est l'un des nombreux ensembles de données disponibles sur BrightData. C'est ainsi que nous pouvons l'obtenir.


(1) Créez un compte sur BrightData.


(2) Accédez à brightdata.com/cp/datasets à partir du navigateur ou ouvrez le menu Datasets & WebScraper IDE à gauche.

Ensembles de données et menu IDE WebScraper sur BrightData

(3) Accédez à Dataset Marketplace et recherchez IMDB media dataset .


(4) Cliquez sur Afficher l'ensemble de données et téléchargez l'exemple d'ensemble de données au format CSV.


Une fois téléchargé, renommez le fichier en IMDB.csv et placez-le dans le dossier recommender/static . Cet exemple de CSV contient 28 attributs IMDB pour plus de 1000 films. Notre application fonctionnera sur cet ensemble de données IMDB pour cette partie.

Mise à jour de la vue d'index pour recevoir une soumission de formulaire

Mettons à jour la méthode view pour traiter les requêtes de recherche.


Toutes les requêtes de recherche du formulaire arrivent sous forme de requêtes POST. Après avoir confirmé que le formulaire est correctement rempli, nous répertorierons tous les films du fichier CSV téléchargé et filtrerons ceux qui ne correspondent pas aux critères de filtrage. Voici à quoi ressemble le code mis à jour.


 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)


L'implémentation des méthodes _getIMDBMovieDataList et _filter_imdb_movie_list n'a rien de spécifique à Django et est juste du pur Python. J'évite donc d'en parler ici. L'intégralité du fichier views.py se trouve ici .

Produit final

Félicitations pour avoir atteint ce point. Si vous avez correctement suivi toutes les étapes, vous devriez pouvoir exécuter le serveur et effectuer des recherches via l'interface utilisateur. Voici à quoi ressembleraient les résultats de la recherche.


Page Web affichant le résultat de la recherche pour la note IMDB minimale 8.0 et l'année de sortie 2022.


Code pour cette série

Tout le code créé dans le cadre de cette série sera disponible sur ce référentiel GitHub. Le résultat final de cette partie est contenu dans cette branche nommée Part1 .


C'est toujours une bonne idée de recouper votre code avec celui présent sur le référentiel pour vérifier si quelque chose ne va pas.


Remarques finales

Avec cela, nous arrivons à la fin de la première partie de cette série en trois parties. Dans la partie suivante, nous utiliserons l'IDE WebScraper de BrightData pour collecter des données auprès d'autres agences de notation. Nous mettrons ensuite à jour notre formulaire, permettant ainsi aux utilisateurs d'effectuer des recherches plus complexes.


Nous allons également dynamiser le composant Carrousel !


À la prochaine… D'ici là, bon apprentissage ! 🙂