L'intermédiaire

Il y a maintenant 7 ans de cela, j’avais écrit un article qui expliquait comment lire des données depuis un tableur Excel en ligne, en utilisant à l’époque la très populaire API Sheetsu, mais qui n’existe plus aujourd’hui. D’autres alternatives sont connues maintenant et Googe Drive a même sa propre API pour le faire. En réalité, vous pouvez le faire vous-même en publiant le document en question sur le Web et avec un peu de code fait maison. Je vous explique…

Afficher les données d’un Google Sheet

Quel est l’objectif ? Comme d’habitude : rendre un contenu dynamique et via un outil externe que vous ou votre client pourriez utiliser afin d’alimenter son site web. Quand on y réfléchit, le Google Sheet est en réalité une très bonne architecture de base de données. Les lignes sont les données qui se répètent, les colonnes les propriétés, les cellules en sont les valeurs. Bref, pour l’avoir vécu récemment en agence, votre client a une liste de données sous format CSV et en ligne via son Google Sbeet, et il ne veut pas implémenter lui-même une deuxième fois ses données via un autre outil que celui-là. Et il a raison ! Cela tombe bien, on est sur le web et il est possible de connecter tout ça. Sans base de données, sans authentification, à condition que les valeurs soient bien d’ordre public, ne publiez rien de compromettant ! Enfin, vous pouvez surtout montrer ces données d’une autre façon que sous forme d’un tableur, et c’est surtout cela qui est intéressant. Votre backend est votre Google Sheet et le code ci-dessous fera le pont entre ce contenu et le design approprié.

Comment connecter votre page web à un Googhe Sheet ?

Étape 1 — Préparer le Google Sheet

Ouvrez votre Google Sheet et structurez-le avec une première ligne d’en-têtes sans accents ni espaces. (car ce seront les clés de vos futurs objets JSON). Exemple : Nom, Prenom, Guitare, Groupe, Categorie, Tags

Il faut surtout publier la feuille. Pour ce faire, suivez les étapes suivantes :

• Fichier > Partager > Publier sur le web
• Sélectionnez la feuille spécifique dans la liste déroulante du haut
• Choisissez Valeurs séparées par des virgules (.csv) dans celle du bas
• Cliquez sur Publier
• Confirmez si Google vous le demande
• Copiez l’URL générée

L’URL ressemble à ceci : https://docs.google.com/spreadsheets/d/e/2PACX-xxxxxxx/pub?gid=0&single=true&output=csv

Étape 2 — La fonction universelle (JavaScript)

L’idée : une seule fonction prend l’URL CSV en paramètre et retourne une Promise qui résout en tableau d’objets JSON. Elle est totalement indépendante du projet qui l’utilise. Voilà le code Javascript :

function parseCSV(text) {
  const rows = [];
  let row = [], field = "", inQuotes = false;

  for (let i = 0; i < text.length; i++) {
    const c = text[i];
    if (inQuotes) {
      if (c === '"') {
        if (text[i + 1] === '"') { field += '"'; i++; }
        else inQuotes = false;
      } else {
        field += c;
      }
    } else if (c === '"') {
      inQuotes = true;
    } else if (c === ',') {
      row.push(field); field = "";
    } else if (c === '\n' || c === '\r') {
      if (field !== "" || row.length) {
        row.push(field); rows.push(row); row = []; field = "";
      }
      if (c === '\r' && text[i + 1] === '\n') i++;
    } else {
      field += c;
    }
  }
  if (field !== "" || row.length) { row.push(field); rows.push(row); }
  return rows;
}

async function loadSheetAsJSON(csvUrl) {
  const response = await fetch(csvUrl);
  if (!response.ok) throw new Error(`Erreur réseau : ${response.status}`);
  const text = await response.text();
  const rows = parseCSV(text).filter(r => r.some(c => c.trim() !== ""));
  if (rows.length < 2) return [];
  const headers = rows[0].map(h => h.trim());
  return rows.slice(1).map(row => {
    const obj = {};
    headers.forEach((h, i) => obj[h] = (row[i] || "").trim());
    return obj;
  });
}

/* Copiez ici l'ID de votre document sheet */
const SHEET_ID = '1vQE6mPLVQ_4j1bH2QxBGLvk2GdXE9bZ-9Jds-PnY3NXyX3cU-a5O7Kqlxmd6qhofrB9ysaZGrQQoLHy';
const SHEET_CSV_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-'+SHEET_ID+'/pub?single=true&output=csv';

const data = await loadSheetAsJSON(SHEET_CSV_URL);
const container = document.getElementById('monContainer');

data.forEach(item => {
  const div = document.createElement('div');
  div.innerHTML = `
    <h2>${item.Prenom} ${item.Nom}</h2>
    <p>Guitare : ${item.Guitare}</p>
    <p>Groupe : ${item.Groupe}</p>
    <p>Depuis : ${item.Annee}</p>
  `;
  container.appendChild(div);
});

Vous pouvez voir ce que cela donne ici :
https://codepen.io/editor/lintermediaire/pen/019fb1c8-ea7d-7bf9-8d52-1f2d1fab27b5

Étape 3 — Intégration

Côté HTML, rien de spécial : juste les ids sur les éléments à intégrer dynamiquement (ici container), et éventuellement des valeurs en dur comme fallback si le Sheet est inaccessible. Et c’est tout ! Vous pouvez ensuite faire un peu de CSS pour présenter vos données d’une autre façon, et plus lisible pour vos visiteurs.

Inconvénients …

Avant d’adopter cette approche, quelques points à garder en tête :

Cache Google : les modifications dans le Sheet peuvent mettre quelques minutes à se propager dans le CSV publié. Ce n’est pas du temps réel si vos données sont conséquentes. Dans mon exemple, cela va très vite, mais prévenez vos contributeurs.

Pas d’authentification : encore une fois, les données publiées sont accessibles à quiconque connaît l’URL. Ne publiez jamais de données sensibles (mots de passe, données personnelles) via cette méthode.

Quota : Google ne publie pas de limite officielle pour ce type d’accès, mais un trafic très élevé (milliers de requêtes/minute) peut sans doute entraîner des erreurs 429.

Plusieurs feuilles : chaque feuille d’un même classeur a son propre gid visible dans l’URL d’édition (#gid=145284681). Publiez chaque feuille séparément si vous désirez garder tout au même endroit tout en séparant vos données. Vous obtenez autant d’URL CSV indépendantes.

Conclusion

Vous avez maintenant sous la main un morceau de code qui vous permettra de lier votre page web à un Google Sheet.
Je vous ai donné une version en Javascript mais vous pourriez utiliser une version avec le langage PHP par exemple, afin de mieux gérer le cache ou de rendre inaccessible du code côté serveur. Enfin, n’oubliez pas qu’il s’agit de données issues d’un Excel en ligne. Dès lors que vous souhaiteriez agrémenter votre contenu de texte à styliser (gras, italique, couleurs), cela devient compliqué. Idem pour des assets de type images par exemple ; ne transformez pas votre fichier Excel en CMS, cela n’aurait pas de sens !