1
Créer le Google Sheet
- Ouvre Google Sheets et crée une nouvelle feuille
- Nomme-la
Collection Pokémon - Crée ces colonnes en ligne 1 :
| A | B | C | D | E | F | G | H |
|---|---|---|---|---|---|---|---|
| Nom | Numéro | Série | Prix | Rareté | URL Cardmarket | URL Image | Possédée |
- Importe ton fichier
collection_pokemon.csvvia Fichier → Importer
2
Rendre le Sheet public
- Clique sur Partager (haut droite)
- 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
- Va sur Google Cloud Console et crée un projet
- API et services → Bibliothèque → recherche
Google Sheets API→ Activer - Identifiants → Créer une clé API → copie-la
- Restreins la clé à Google Sheets API uniquement (sécurité)
4
Créer le Google Apps Script
- Dans ton Sheet : Extensions → Apps Script
- Remplace tout le code par celui ci-dessous et Enregistre
- Déployer → Nouveau déploiement → Application Web
→ Exécuter en tant que :Moi| Qui a accès :Tout le monde - 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 :
index.htmlconfig.js- 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 |