Source : Airtable¶

Retour : choisir sa source

1. Créer le compte et la base¶

1. Aller sur airtable.com/signup . N'importe quel courriel fonctionne, incluant celui du collège. Aucune carte de crédit requise.
2. Sur la page d'accueil, cliquer Créer votre propre app. Airtable appelle maintenant une base « app » dans son interface : c'est la même chose.

2. Préparer les données¶

Renommer la table par défaut en Projets (sans espace ni accent), puis créer les champs du format commun, avec le bon type de champ :

3. Obtenir l'URL : Base ID et nom de la table¶

Dans Airtable, Aide → API documentation (ou airtable.com/developers/web/api/introduction une fois connecté). La documentation générée est propre à votre base : le Base ID (commence par app...) est déjà inséré dans les exemples.

L'URL de votre table :

https://api.airtable.com/v0/BASE_ID/Projets

Contrairement à opensheet, cette URL ne fonctionne pas directement dans le navigateur : il faut lui joindre un jeton.

4. Créer le jeton d'accès (PAT), restreint¶

Airtable n'utilise plus de clé API classique depuis 2024 : il faut un jeton d'accès personnel (Personal Access Token).

1. Avatar (coin supérieur droit) → Builder hub (ou Developer hub).
2. Personal access tokens → Create token.
3. Le nommer clairement, ex. portfolio-lecture.
4. Scopes : ajouter seulement data.records:read.
5. Access : choisir uniquement la base du portfolio, jamais « toutes les bases ».
6. Create token, puis le copier immédiatement : Airtable ne le réaffichera plus.

5. Le code de js/data.js¶

Avec async / await

// js/data.js
// Source : Airtable

const BASE_ID = 'appXXXXXXXXXXXXXX';   // votre Base ID
const TABLE = 'Projets';
const JETON = 'patXXXXXXXXXXXXXX';     // jeton en lecture seule, 1 base

async function chargerProjets() {
  const reponse = await fetch(`https://api.airtable.com/v0/${BASE_ID}/${TABLE}`, {
    headers: { Authorization: `Bearer ${JETON}` }
  });

  if (!reponse.ok) {
    throw new Error(`Impossible de charger les projets (${reponse.status})`);
  }

  const donnees = await reponse.json();

  // Ramener au format commun
  return donnees.records.map(record => {
    const champs = record.fields;
    const urlsImages = (champs.images || []).map(fichier => fichier.url);

    return {
      id: record.id,           // identifiant Airtable par défaut...
      ...champs,               // ...remplacé par votre champ id s'il existe
      image: urlsImages[0] || '',
      galerie: urlsImages.slice(1)
    };
  });
}

Avec .then()

// js/data.js
// Source : Airtable

const BASE_ID = 'appXXXXXXXXXXXXXX';   // votre Base ID
const TABLE = 'Projets';
const JETON = 'patXXXXXXXXXXXXXX';     // jeton en lecture seule, 1 base

function chargerProjets() {
  return fetch(`https://api.airtable.com/v0/${BASE_ID}/${TABLE}`, {
    headers: { Authorization: `Bearer ${JETON}` }
  })
    .then(reponse => {
      if (!reponse.ok) {
        throw new Error(`Impossible de charger les projets (${reponse.status})`);
      }
      return reponse.json();
    })
    .then(donnees => donnees.records.map(record => {
      // Ramener au format commun
      const champs = record.fields;
      const urlsImages = (champs.images || []).map(fichier => fichier.url);

      return {
        id: record.id,           // identifiant Airtable par défaut...
        ...champs,               // ...remplacé par votre champ id s'il existe
        image: urlsImages[0] || '',
        galerie: urlsImages.slice(1)
      };
    }));
}

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.

Pourquoi cette transformation?¶

Airtable ne retourne pas directement un tableau de projets. Sa réponse ressemble à ceci :

{
  records: [
    {
      id: 'recA1b2C3d4E5f6G7',
      createdTime: '2026-09-20T14:00:00.000Z',
      fields: {
        titre: 'Café du coin',
        description: '...',
        images: [
          { url: 'https://...photo1.jpg', filename: 'photo1.jpg', ... },
          { url: 'https://...photo2.jpg', filename: 'photo2.jpg', ... }
        ]
      }
    },
    // ...
  ]
}

Le map() fait trois choses :

1. Il sort les données de fields : ...champs recopie tous les champs au premier niveau, donc projet.titre plutôt que projet.fields.titre.
2. Il fournit un id : celui d'Airtable par défaut. Comme ...champs vient après, votre propre champ id le remplace s'il existe.
3. Il transforme les pièces jointes : le tableau d'objets images devient une URL image (la première) et un tableau d'URL galerie (les suivantes).

Résultat : exactement le même format que le JSON local. La page d'affichage n'a aucune idée que les données viennent d'Airtable.

6. Champs spéciaux¶

Images : champ Pièce jointe¶

Le champ Pièce jointe (Attachment) accepte plusieurs fichiers par ligne, glissés-déposés directement dans la cellule. Airtable héberge vraiment les fichiers sur ses propres serveurs : pas besoin de les mettre dans votre dépôt.

Vidéos : champ URL, avec le lien d'intégration complet¶

Utiliser un champ URL plutôt que texte : Airtable valide que c'est un lien.

Stocker le lien d'intégration complet (embed), pas seulement l'identifiant de la vidéo :

• YouTube : https://www.youtube.com/embed/XXXXXXXXXXX
• Vimeo : https://player.vimeo.com/video/000000000

Pour l'obtenir : sur YouTube ou Vimeo, Partager → Intégrer, puis copier l'URL qui se trouve dans le src="..." du code fourni.

Pourquoi le lien complet? Parce qu'il s'injecte directement dans un <iframe>, sans manipulation de texte. Stocker seulement l'identifiant demanderait un champ de plus pour la plateforme (YouTube et Vimeo n'ont pas le même gabarit d'URL) et une fonction pour reconstruire l'URL. Cette règle vaut aussi pour les autres sources.

7. Pièges propres à cette source¶

• Erreur 401 ou 403 : jeton invalide, mal copié, ou sans accès à cette base. Vérifiez les scopes et la section Access du jeton.
• Erreur 404 : Base ID ou nom de table erroné. Le nom de la table est sensible à la casse et aux accents : Projets, pas projets.
• Champ vide = propriété absente : si une cellule est vide, Airtable n'inclut tout simplement pas ce champ dans fields. projet.lien vaut alors undefined. Le code d'affichage doit le prévoir (voir la page suivante).
• Ordre des projets : pour recevoir les projets dans l'ordre de votre vue Airtable, ajoutez le nom de la vue à l'URL : `https://api.airtable.com/v0/${BASE_ID}/${TABLE}?view=${encodeURIComponent('Nom de la vue')}`.
• 100 enregistrements maximum par requête : largement suffisant pour un portfolio. Le plan gratuit permet 1000 enregistrements par base.

8. Vérifier que ça fonctionne¶

Temporairement, à la fin de data.js :

chargerProjets().then(projets => console.log(projets[0].titre));

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

Afficher les projets