01
Description du projet
Application web développée en JavaScript ES6+ pur (sans framework) qui consomme l'API publique The Movie Database (TMDb). L'utilisateur peut rechercher des films par titre ou filtrer par genre, et consulter en temps réel les affiches officielles, les notes de la communauté, les dates de sortie et les résumés.
Le projet démontre la maîtrise des appels HTTP asynchrones avec Fetch API et async/await, du traitement de données JSON, et du rendu dynamique du DOM sans rechargement de page. La clé d'API est gérée de façon sécurisée et les erreurs réseau sont capturées et affichées à l'utilisateur.
Ce projet personnel reflète une curiosité autonome pour l'intégration de services externes dans des applications web modernes.
02
Technologies utilisées
JavaScript ES6+
API REST TMDb v3
HTML5
CSS3
Fetch API / async-await
JSON
GitHub
03
Flux de données API
1
Saisie & déclenchement
L'utilisateur saisit un titre ou sélectionne un genre. Un écouteur d'événement déclenche la fonction de recherche après un délai de debounce pour éviter les appels excessifs.
2
Construction de l'URL
Construction dynamique de l'URL TMDb : https://api.themoviedb.org/3/search/movie?api_key=…&query=…&language=fr-FR
3
Appel asynchrone
Requête GET avec fetch() et await. Gestion des erreurs HTTP (try/catch) et affichage d'un loader pendant la récupération.
4
Traitement JSON & rendu
Parsing de la réponse response.json(), extraction du tableau results[], génération dynamique des cards HTML via manipulation du DOM.
04
Fonctionnalités principales
Recherche par titre
Barre de recherche avec appel en temps réel à l'endpoint
/search/movie de TMDb.Filtre par genre
Sélection d'un genre via menu déroulant, requête à
/discover/movie avec paramètre with_genres.Affiches dynamiques
Affichage des posters via CDN TMDb (
image.tmdb.org) avec fallback si aucune affiche disponible.Notes & résumés
Affichage de la note moyenne sur 10, de la date de sortie et du résumé complet pour chaque film.
05
Compétences BTS SIO mobilisées
| Code | Compétence | Mise en œuvre dans le projet |
|---|---|---|
| B1.1 | Recenser et identifier les ressources numériques | Identification, lecture et exploitation de la documentation de l'API TMDb v3. Gestion sécurisée de la clé API. |
| B2.2 | Concevoir une solution applicative | Conception de l'interface de recherche, gestion des états (chargement, résultat, erreur), architecture de la solution. |
| B2.3 | Développer, documenter et déployer | Requêtes asynchrones (Fetch/async-await), parsing JSON, manipulation dynamique du DOM, gestion des erreurs réseau. |
| B2.4 | Travailler en mode projet | Versionnage avec Git/GitHub, organisation du code en fonctions séparées, documentation du projet (README). |
06
Résultats & apprentissages
Consommation d'API REST
Maîtrise des appels HTTP GET, construction d'URLs avec paramètres, gestion des en-têtes et authentification par clé.
Async/Await JS
Programmation asynchrone sans callbacks imbriqués (callback hell), code lisible et maintenable.
Manipulation du DOM
Génération dynamique d'éléments HTML, mise à jour de l'interface sans rechargement de page.
Gestion des erreurs
Try/catch sur les appels réseau, messages d'erreur clairs pour l'utilisateur, gestion des cas limites (film sans affiche).