Semaine 3 - Les films

Vous devez organiser l’affichage d’une liste de films classiques des années ’80s à l’aide de différentes composantes dans un projet Next.js.

Pages

Vous devez créer les pages suivantes:

• Une page d’accueil affichant la liste de films en version sommaire (titre, année, affiche (poster))
• Une page à url dynamique qui utilise le slug pour afficher les détails d’un film. On y affichera tous les détails disponibles à l’exception du slug et du id. La photo des acteurs et du réalisateur devront aussi y être affichées.
• Une page not-found.jsx permettra d’afficher une erreur 404 personnalisée si un film ne peut être retrouvé. L’appel à la fonction notFound() devrait être fait pour provoquer l’affichage de cette page.

Découpage

Les deux pages devront être au minimum assemblées à partir des composantes suivantes:

Film

• Composante affichant le sommaire d’un seul film.
• Elle reçoit le titre, l’année et l’url de l’affiche par les props (séparément).
• Elle affiche le film sous la forme d’une carte UI.

ListeFilms

• Affichée à l’intérieur de la composante de la page d’accueil.
• Elle doit recevoir la liste de films par les props.
• Elle doit afficher le sommaire de chaque film à l’aide de .map en répétant la composante Film.

Personne

• Utilisée plusieurs fois dans la page de détails d’un film.
• Elle doit recevoir le nom et l’url de la photo d’une personne à afficher par les props.
• Un prop type contenant “acteur” ou “réalisateur” devra aussi être reçu en fonction du type de personne à afficher.
• En fonction du type reçu le visuel devra être différent entre un acteur ou un réalisateur.
• Elle doit afficher le sommaire de chaque film à l’aide de .map

Attention

Aucune de ces dernières composantes ne doit récupérer les données des films. Toutes les informations qui les concerne doivent leur être passées par les props. Seules les composantes situées dans les fichiers page.jsx devront récupérer les données (voir la rubrique suivante).

Données

Vous devrez récupérer la liste de films ainsi que les détails d’un film à l’aide des deux fonctions suivantes:

/app/_data/films.js

import "server-only";

export const getAllFilms = async () => {
  try {
    const resp = await fetch(
      "https://japprendstoutesleschoses.com/data/films.json",
    );
    if (!resp.ok) {
      throw new Error("Erreur d'accès au fichier films.json");
    }
    const data = await resp.json();
    return data;
  } catch (err) {
    console.log("[GET ALL FILMS ERROR]", err);
    return [];
  }
};

// Utilise la fonction getAllFilms pour récupérer le tableau complet
// Utilise find pour retourner le film correspondant ou null s'il n'existe pas
// On l'appelle en lui passant le slug récupéré en paramètre.
export const getFilmBySlug = async (filmSlug) => {
  const films = await getAllFilms();
  return films.find((f) => f.slug === filmSlug);
};

Veuillez copier/coller ce code dans le fichier films.js:

• Répertoiresrc/

  • Répertoireapp/

    • Répertoire_data/

      • films.js

Les fonctions pourront ensuite être importées pour être appelées depuis les fichiers page.jsx.

Visuel

Vous devez télécharger la photo des films, acteurs et réalisateurs et les copier dans le dossier public en conservant la même structure. Une fois le découpage et la navigation fonctionnels, vous pourrez utiliser des outils de IA générative au besoin pour améliorer votre visuel/CSS.

Attention

Prenez garde de vous tenir loin de ces derniers outils pour le découpage en composantes et la rédaction de la logique de “l’application”. Ce devoir est particulièrement utile et nécessaire pour réviser l’ensemble de la matière et vous l’approprier.

Nous prendrons ces notions pour acquis dans les semaines à venir et il serait regrettable que vous ayez du mal à composer les interfaces sans recourir à l’IA.

Vous pouvez me contacter en tout temps par Teams si vous avez des questions de compréhension.

Remise

Critères de correction

• Absence d’erreur de programmation (regardez bien votre console)
• Respect des contraintes de développement
• Justesse de la création des composantes
• Optimisation et clarté du code Javascript
• Qualité de l’intégration

Pondération: 5%

Remise

Un devoir dans Teams sera créé afin de vous permettre de le remettre. Merci de supprimer les dossiers node_modules et .next avant de compresser votre projet.