🎴 Collection Pokémon 151 GUIDE D'INSTALLATION

Suis ces 6 étapes pour connecter ton site à Google Sheets en ~15 minutes

1

Créer le Google Sheet

  1. Ouvre Google Sheets et crée une nouvelle feuille
  2. Nomme-la Collection Pokémon
  3. Crée ces colonnes en ligne 1 :
ABCDEFGH
NomNuméroSériePrixRaretéURL CardmarketURL ImagePossédée
  1. Importe ton fichier collection_pokemon.csv via Fichier → Importer
2

Rendre le Sheet public

  1. Clique sur Partager (haut droite)
  2. Passe l'accès à "Tous les utilisateurs disposant du lien" en mode Lecteur
⚠️ Le Sheet doit être public en lecture seule, jamais en mode Éditeur.
3

Activer l'API Google Sheets

  1. Va sur Google Cloud Console et crée un projet
  2. API et services → Bibliothèque → recherche Google Sheets API → Activer
  3. Identifiants → Créer une clé API → copie-la
  4. Restreins la clé à Google Sheets API uniquement (sécurité)
4

Créer le Google Apps Script

  1. Dans ton Sheet : Extensions → Apps Script
  2. Remplace tout le code par celui ci-dessous et Enregistre
  3. Déployer → Nouveau déploiement → Application Web
    → Exécuter en tant que : Moi | Qui a accès : Tout le monde
  4. Clique sur Déployer et copie l'URL générée
// API de synchronisation cartes Pokémon

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  const cards = data.slice(1).map(row => {
    const card = {};
    headers.forEach((h, i) => card[h] = row[i] || '');
    return card;
  });
  return ContentService
    .createTextOutput(JSON.stringify({ success: true, cards }))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    const params = JSON.parse(e.postData.contents);
    if (params.action === 'toggle') {
      sheet.getRange(params.rowIndex + 2, 8).setValue(params.isOwned ? 'OUI' : 'NON');
      return ContentService
        .createTextOutput(JSON.stringify({ success: true }))
        .setMimeType(ContentService.MimeType.JSON);
    }
  } catch (error) {
    return ContentService
      .createTextOutput(JSON.stringify({ success: false, error: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
5

Configurer le site

Ouvre config.js et remplis les valeurs :

const CONFIG = {
  SHEET_ID: 'VOTRE_SHEET_ID',    // Dans l'URL du Google Sheet
  API_KEY:  'VOTRE_API_KEY',     // Créée à l'étape 3
  SHEET_NAME: 'Feuille 1',
  APPS_SCRIPT_URL: 'VOTRE_URL'  // Copiée à l'étape 4
};
💡 L'ID du Sheet se trouve dans son URL : docs.google.com/spreadsheets/d/[SHEET_ID]/edit
6

Mettre en ligne sur Netlify

Uploade ces fichiers sur Netlify :

  1. index.html
  2. config.js
  3. Dossier css/
🎮

Utilisation quotidienne

➕ Ajouter une carte

Ouvre le Sheet, ajoute une ligne. Le site se met à jour automatiquement toutes les 5 min.

✅ Cocher une carte

Coche directement sur le site. La colonne H du Sheet se synchronise en temps réel.

✏️ Modifier une carte

Modifie le prix, la rareté, etc. dans le Sheet et clique sur 🔄 Actualiser.

🗑️ Supprimer une carte

Supprime la ligne dans le Sheet et actualise le site.

🆘

Dépannage

Problème Solution
Impossible de charger Vérifier que le Sheet est public et que la clé API est correcte
Les modifs n'apparaissent pas Cliquer sur 🔄 Actualiser ou vider le cache (Ctrl+F5)
Une carte ne s'affiche pas Vérifier que l'URL de l'image est valide et que la ligne est complète