Source : Google Sheets + opensheet¶

Retour : choisir sa source

1. Préparer les données¶

1. Créer une nouvelle feuille dans Google Sheets.
2. Renommer l'onglet du bas (par défaut « Feuille 1 ») en Projects, sans espace ni accent.
3. Première ligne = noms de propriétés du format commun : id, title, description, category, year, image, link, video, gallery.
4. Une ligne par projet à partir de la ligne 2.

Pour la gallery, on écrit plusieurs URL dans la même cellule, séparées par des virgules. Le code de data.js les transformera en tableau.

2. Obtenir l'URL¶

Partager la feuille en lecture¶

Partager (en haut à droite) → Accès général → Tous les utilisateurs disposant du lien → rôle Lecteur.

Trouver l'ID de la feuille¶

Dans l'adresse de votre feuille, l'ID est la longue chaîne entre /d/ et /edit :

https://docs.google.com/spreadsheets/d/1AbC2dEf3GhI4jKl5MnO6pQr/edit#gid=0
                                       └── ID de la feuille ──┘

Construire l'URL opensheet¶

https://opensheet.elk.sh/ID_DE_LA_FEUILLE/Projects

Le dernier segment est le nom de l'onglet. Collez cette URL directement dans votre navigateur : vous devez voir vos projets en JSON. Si oui, la source est prête.

3. Le code de js/data.js¶

C'est le même loadProjects() que pour le JSON local (voir l'exercice « Du JSON à la carte » et la page JSON local). Deux choses changent.

1. L'adresse du fetch()¶

C'est de la configuration : gardez l'ID et le nom de l'onglet dans des constantes en haut du fichier, faciles à retrouver.

const SHEET_ID = '1AbC2dEf3GhI4jKl5MnO6pQr'; // votre ID
const SHEET_NAME = 'Projects';

// l'adresse à passer à fetch() :
`https://opensheet.elk.sh/${SHEET_ID}/${SHEET_NAME}`

2. La galerie : du texte au tableau¶

Si vous n'utilisez pas de galerie, rien à faire : la réponse est déjà dans le format commun, retournez-la telle quelle.

Sinon, dans la feuille, la galerie est un texte ("url1, url2"). Le format commun attend un tableau (["url1", "url2"]). Avant de retourner les données :

1. Parcourez les lignes avec map(), pour produire un nouveau tableau de projets.
2. Pour chaque ligne, recopiez toutes les colonnes avec la syntaxe de décomposition : { ...row }.
3. Remplacez gallery par sa version en tableau : split(',') coupe le texte à chaque virgule, et trim() retire les espaces autour de chaque URL.
4. Si la cellule est vide, gallery doit être un tableau vide [] (ternaire).

4. Pièges propres à cette source¶

• Tout arrive en texte, même les nombres : year vaut "2025", pas 2025. Pour notre format commun, c'est correct. Si un jour vous devez trier ou calculer, convertissez avec Number(project.year).
• Les en-têtes de colonnes deviennent les noms de propriétés, caractère pour caractère. Title avec une majuscule ou title avec une espace à la fin donnent des propriétés différentes de title.
• Cellules vides : prévoyez que la propriété puisse être vide ou absente (ex. un projet sans link). Le code d'affichage doit le gérer, on le voit dans la page suivante.
• Délai de mise à jour : opensheet garde la réponse en cache quelques secondes. Si une modification n'apparaît pas tout de suite, attendez un peu et rechargez.
• Erreur dans la réponse : si l'URL affiche un message d'erreur plutôt que vos données, vérifiez le partage (« Tous les utilisateurs disposant du lien ») et le nom exact de l'onglet.

5. Vérifier que ça fonctionne¶

Temporairement, à la fin de data.js :

loadProjects().then(projects => console.log(projects[0].title));

Vous voyez le titre de votre premier projet dans la console? Retirez cette ligne de test et passez à l'affichage.

Afficher les projets