Fait par un brillant élève (merci Lucas R.)
Dans cet exercice, vous allez créer une application web permettant de rechercher des films à l'aide de l'API publique OMDb API. Cette application devra être réactive et afficher les résultats sous forme de fiches dynamiques.
Attention, il vous faudra d'abord vous inscrire sur le site pour recevoir par email votre api key.
Objectifs
- Mettre en place un champ de recherche pour que l'utilisateur puisse entrer un mot contenu dans un ou plusieurs titres de film.
- Utiliser RxJS pour gérer les événements d'entrée :
- Attendre que l'utilisateur tape au moins 3 caractères.
- Attendre que l'utilisateur entre un espace avant de valider la recherche après un input (le risque est de générer trop de requête si l'on attend pas que l'utilisateur ait entré un espace)
- Utiliser un délai de 400 ms avant d'effectuer une requête pour limiter les appels à l'API.
- Ignorer les entrées identiques consécutives.
- Utiliser l'OMDb API (avec dans la query string s=motRecherché ainsi que l'api key) pour récupérer les films correspondant à la recherche.
- Afficher les résultats dans des fiches, contenant :
- Le titre du film.
- L'année de sortie.
- L'affiche du film (si disponible).
- un bouton qui ouvre une fenêtre modale avec le détail du film. Vous utilisez pour cela l'identité du film (imdbID)
- Ajouter une gestion d'erreurs pour indiquer si aucune correspondance n'est trouvée ou en cas d'échec de la requête.
Instructions
- Utilisez l'OMDb API (https://www.omdbapi.com/) avec une clé d'API gratuite que vous obtiendrez en vous inscrivant.
- Créez une interface utilisateur avec un champ de texte pour la recherche et une section pour afficher les résultats.
- Gérer le DOM pour mettre à jour dynamiquement les résultats des recherches.
- Implémentez RxJS pour les opérations asynchrones et la gestion des événements utilisateur.
Exemples de fonctionnalités attendues
- Lorsque l'utilisateur commence à taper dans le champ de recherche, les résultats sont mis à jour automatiquement après 400 ms d'inactivité.
- Les recherches répétées avec le même texte n'effectuent pas de nouvelle requête.
- Les cartes de films affichent le titre, l'année de sortie, et l'affiche si elle est disponible.
- Un message s'affiche si aucun film n'est trouvé ou si la requête échoue.
Bonne chance et amusez-vous avec RxJS et la manipulation du DOM !