Module Wim 4.1 Programmation web - client riche

Programmation BUT

Application cinéma avec Riot.js

Pensez à mettre à jour votre copie du dépôt git pour le tp :

https://dwarves.iut-fbleau.fr/git/monnerat/FI_WIM4.git

Le but du tp est d'écrire une petite application au moyen d'Angular JS permettant de consulter des films à partir d'une api REST dédidée. Voici un aperçu de l'application finale



L'application utilisera

Attention il vous faudra récupérer une clé pour pouvoir utiliser l'api.

L'application

L'interface

À la fin, on devra pouvoir afficher, par page, les films :

  • les plus populairs,
  • les mieux notés,
  • à venir,
  • à l'affiche,
  • ou correspondant à une recherche (barre de recherche en haut à droite.

L'affichage en cours peut être trié par titre ou par note.

L'api Movie DB

voici l'url permettant de récupérer les films populaires : 

https://api.themoviedb.org/3/movie/popular?api_key=&language=fr-FR&page=
Votre travail

Voici le fichier index.html : 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Cinema</title>
		<link rel="stylesheet" href="css/concise.css">
		<link rel="stylesheet" href="css/concise-utils.min.css">
		<link rel="stylesheet" href="css//concise-ui.min.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="./css/style.css">
 
		<!-- Javascript -->
 
		<!--script src="include/riot+compiler.min.js"></script-->
		<script src="https://cdn.jsdelivr.net/gh/riot/riot/riot%2Bcompiler.min.js"></script>
		<script src="https://cdn.jsdelivr.net/gh/riot/route/dist/route.min.js"></script>
		<script src="include/serviceAjax.js"></script>
		<script src="include/constantes.js"></script>
 
 
		<!-- les composants -->
 
		<script src="tags/App.tag" type="riot/tag"></script>
		<script src="tags/Spinner.tag" type="riot/tag"></script>
		<script src="tags/Film.tag" type="riot/tag"></script>
		<script src="tags/Size.tag" type="riot/tag"></script>
 
 
	</head>
	<body>
		<div container>
			<App></App>
 
	</body>
	<script>
		riot.mixin('serviceAjax', makeServiceAjax());
		riot.mixin(constantes());
		riot.mixin('bus',{"bus":riot.observable()});
		riot.mount('*',null);
	</script>
		</div>	
</html>

Ajoutez, dans le fichier serviceAjax.js votre clé pour l'api Movie DB. L'application devrait être fonctionnelle.

Vous devez compléter les sources qui sont fonctionnels, mais ou beaucoup de choses restent à implanter.

Pour l'instant, seuls s'affichent les films populaires.

  1. Ajoutez la recherche par catégorie.
  2. Ajoutez la recherche par titre.
  3. Ajoutez la pagination.
  4. Ajoutez le tri par note et titre.
  5. Ajoutez à chaque film la liste des genres auxquels il appartient.
  6. Ajoutez à l'aide du routeur la possibilité d'accéder à la fiche complète d'un film (un tag). Faites en sorte que l'on puisse accéder à la fiche complète du film depuis la liste d'affichage par un simple lien sur l'image. On doit pouvoir revenir à la page principale.

Les sections

retour à la page d'accueil

retour au sommet