Cours 5.2¶

Tutorat¶

Pour Web 5, ce sont Alexis et Olivier qu'il faut aller voir : ils sont en 3e année, comme vous. Les autres tuteurs du programme sont en 2e année et ne peuvent pas vous aider pour ce cours.

Projet portfolio¶

Aujourd'hui¶

• Tutorat : rappel et périodes supplémentaires avant les remises
• Récap JS express : ce que vous savez déjà
• JSON et fetch() asynchrone
• Choisir sa source de données : JSON local, Google Sheets, Airtable
• Un seul code d'affichage pour toutes les sources
• Détail d'un projet : modale ou projet.html (paramètres d'URL)
• Atelier de production (Pomodoro)
• Journal de bord
• Devoir pour le cours 6.1

Récap JS express¶

Ça fait un bout que vous n'avez pas écrit de JavaScript, mais vous l'avez déjà tout vu. Aujourd'hui, on réactive seulement ce qui sert à charger et afficher des données :

Tous les concepts clés, avec un exemple chacun, à garder ouvert pendant que vous codez :

Récap JS : les concepts clés

JSON et fetch() asynchrone¶

• JSON : un format texte pour échanger des données. Un tableau ([ ]) d'objets ({ }), avec des guillemets doubles partout.
• fetch() : va chercher une ressource (un fichier, une API) et retourne une promesse : la réponse n'arrive pas tout de suite.
• Deux façons d'attendre cette réponse, que vous avez vues dans vos cours précédents : - async / await : le code s'écrit de façon linéaire, une étape par ligne. - .then() : chaque étape s'enchaîne à la précédente.

Avec async / await

async function chargerProjets() {
  const reponse = await fetch('data/projets.json'); // 1. aller chercher
  const projets = await reponse.json();             // 2. lire le JSON
  return projets;                                   // 3. un tableau de projets
}

Avec .then()

function chargerProjets() {
  return fetch('data/projets.json')    // 1. aller chercher
    .then(reponse => reponse.json());  // 2. lire le JSON, 3. un tableau de projets
}

Les deux versions font exactement la même chose. Choisissez celle avec laquelle vous êtes le plus à l'aise, et gardez la même partout dans votre projet.

Seule l'adresse dans fetch() change selon la source. Tout le reste en découle.

Choisir sa source de données¶

C'est le choix que vous avez justifié dans PLANIFICATION.md. La page de départ compare les trois options et présente le format commun que toutes les sources doivent respecter :

Charger les données du portfolio : choisir sa source

Puis, la procédure complète de votre source, jusqu'au code de js/data.js :

JSON local (et conversion depuis Excel) Google Sheets + opensheet Airtable

Un seul code d'affichage¶

Peu importe la source, chargerProjets() retourne le même tableau de projets. Le code qui génère vos cartes est donc le même pour tout le monde :

Afficher les projets

Détail d'un projet¶

Selon la structure de navigation choisie dans PLANIFICATION.md :

• One-pager avec modale : un bouton data-id sur la carte, find(), puis <dialog>. Voir Afficher les projets, section 4.
• Multipages : une seule page projet.html pour tous les projets. Elle lit ?id=cafe-du-coin dans l'adresse avec URLSearchParams. Voir Afficher les projets, section 5.
• One-pager avec carrousel : le détail est dans la carte elle-même, rien de plus à charger.

Atelier de production¶

Structure Pomodoro, comme aux cours 4.2 et 5.1 : sprints de 25 minutes, un objectif précis noté dans JOURNAL.md au début de chaque sprint, 2 minutes de bilan à la fin, vraie pause entre les sprints.

Ordre suggéré, une étape par sprint :

1. Préparer votre source : projets.json, feuille Google ou base Airtable. Commencez par un seul projet complet dans le format commun, puis dupliquez-le quelques fois (voir l'encadré ci-dessous). Test console.log(projets[0].titre) réussi.
2. Générer les cartes : creerCarteProjet() + main.js. Plus aucune carte écrite à la main dans le HTML.
3. Le détail statique : si votre modale ou votre projet.html n'est pas encore intégré en HTML/CSS, codez-le d'abord avec un projet écrit en dur, comme vos autres composants.
4. Brancher le détail sur les données : modale ou projet.html?id=....

Un commit par étape terminée.

Journal de bord¶

Dans JOURNAL.md :

• vos objectifs de sprint et leur bilan;
• chaque prompt Copilot délibéré (Agent, Ask), avec le résultat et ce que vous en avez fait. Pas les complétions en ligne.

Commit final avant de partir.

Devoir¶

Portfolio, pour le cours 6.1 (mercredi 30 sept.)¶

Obligatoire :

• Votre source de données est créée (JSON local, Google Sheets ou Airtable), avec un projet complet dans le format commun, dupliqué quelques fois. Le vrai contenu viendra une fois la structure stable.
• Les cartes de projets de la page d'accueil sont générées en JavaScript à partir de cette source.
• Commits poussés sur GitHub, JOURNAL.md à jour.

Idéalement :

• Le détail d'un projet est intégré en HTML/CSS (modale ou projet.html), d'abord avec un projet en dur si nécessaire.
• Puis branché sur les données (clic sur une carte → bon projet affiché).