GUIDE D’INTEGRATION DES DONNEES

Spread the love
Guide d’Intégration des Données body { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; padding: 20px; color: #333; } .container { max-width: 1000px; margin: 0 auto; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.1); } .header { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 30px; text-align: center; } .content { padding: 40px; } .method { background: #f8f9ff; border-left: 4px solid #667eea; padding: 25px; margin: 25px 0; border-radius: 10px; } .method h3 { color: #667eea; margin-bottom: 15px; } .code-block { background: #2d3748; color: #f7fafc; padding: 20px; border-radius: 10px; margin: 15px 0; overflow-x: auto; font-family: ‘Courier New’, monospace; position: relative; } .copy-btn { position: absolute; top: 10px; right: 10px; background: #667eea; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; } .step { background: white; border: 2px solid #e2e8f0; padding: 20px; margin: 15px 0; border-radius: 10px; } .step-number { background: #667eea; color: white; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; } .example-data { background: #f0f4f8; padding: 20px; border-radius: 10px; margin: 15px 0; } .import-tool { background: linear-gradient(135deg, #48bb78, #38a169); color: white; padding: 30px; border-radius: 15px; margin: 25px 0; text-align: center; } .file-input { margin: 20px 0; } input[type= »file »] { padding: 10px; border: 2px dashed white; border-radius: 10px; background: rgba(255,255,255,0.1); color: white; width: 100%; } .btn { background: #667eea; color: white; border: none; padding: 12px 25px; border-radius: 25px; cursor: pointer; font-size: 16px; margin: 10px; transition: all 0.3s ease; } .btn:hover { background: #5a67d8; transform: translateY(-2px); } .output-area { background: #f7fafc; border: 2px solid #e2e8f0; border-radius: 10px; padding: 20px; margin: 20px 0; min-height: 200px; white-space: pre-wrap; font-family: monospace; }

🔧 Guide d’Intégration des Données

Plusieurs méthodes pour intégrer vos 2070 citations

📋 Méthode 1: Copier-Coller Manuel (Recommandée pour débuter)

1 Collectez vos citations dans un format structuré comme celui-ci :
Format requis :
Citation 1 | Thème
Citation 2 | Thème
Ou dans un fichier texte, une citation par ligne
2 Utilisez l’outil ci-dessous pour convertir vos données

🛠️ Outil de Conversion

Collez vos citations ci-dessous (une par ligne ou format: Citation | Thème)

Le code JavaScript apparaîtra ici…

📝 Méthode 2: Structure de Données Avancée

Si vous avez vos citations dans une base de données ou un fichier Excel, voici le format JSON optimal :

const citations = [ { id: 1, text: « Votre citation ici », theme: « sagesse », categories: [« philosophie », « réflexion »], date: « 2024-01-01 », popularity: 5, keywords: [« sagesse », « vérité », « conscience »] }, // … autres citations ];

🔍 Méthode 3: Chargement Dynamique

Pour 2070 citations, voici une version optimisée qui charge les données progressivement :

// Version optimisée pour grandes collections class CitationManager { constructor() { this.citations = []; this.currentPage = 0; this.pageSize = 50; this.filtered = []; } loadCitations(data) { this.citations = data; this.filtered = […data]; } search(term) { this.filtered = this.citations.filter(citation => citation.text.toLowerCase().includes(term.toLowerCase()) || citation.theme.toLowerCase().includes(term.toLowerCase()) ); this.currentPage = 0; return this.getCurrentPage(); } getCurrentPage() { const start = this.currentPage * this.pageSize; const end = start + this.pageSize; return this.filtered.slice(start, end); } nextPage() { if ((this.currentPage + 1) * this.pageSize < this.filtered.length) { this.currentPage++; return this.getCurrentPage(); } return []; } }
3 Étapes suivantes :
  • Utilisez l’outil ci-dessus pour convertir vos données
  • Copiez le code JavaScript généré
  • Remplacez la variable citations dans le système de recherche
  • Adaptez les thèmes dans les boutons de filtre
function convertData() { const input = document.getElementById(‘inputText’).value; const output = document.getElementById(‘outputArea’); if (!input.trim()) { output.textContent = ‘Veuillez entrer vos citations…’; return; } const lines = input.trim().split(‘\n’); const citations = []; lines.forEach((line, index) => { if (line.trim()) { let text, theme = ‘général’; if (line.includes(‘|’)) { const parts = line.split(‘|’); text = parts[0].trim(); theme = parts[1] ? parts[1].trim().toLowerCase() : ‘général’; } else { text = line.trim(); // Détection automatique du thème basée sur des mots-clés if (text.toLowerCase().includes(‘amour’) || text.toLowerCase().includes(‘cœur’)) { theme = ‘amour’; } else if (text.toLowerCase().includes(‘intelligence’) || text.toLowerCase().includes(‘esprit’)) { theme = ‘intelligence’; } else if (text.toLowerCase().includes(‘vie’) || text.toLowerCase().includes(‘existence’)) { theme = ‘vie’; } else if (text.toLowerCase().includes(‘bonheur’) || text.toLowerCase().includes(‘joie’)) { theme = ‘bonheur’; } else { theme = ‘sagesse’; } } citations.push({ id: index + 1, text: text, theme: theme }); } }); const jsCode = `const citations = ${JSON.stringify(citations, null, 2)};`; output.textContent = jsCode; } function loadFile() { const fileInput = document.getElementById(‘fileInput’); const file = fileInput.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { document.getElementById(‘inputText’).value = e.target.result; }; reader.readAsText(file); } } function clearAll() { document.getElementById(‘inputText’).value =  »; document.getElementById(‘outputArea’).textContent = ‘Le code JavaScript apparaîtra ici…’; } function copyCode(button) { const codeBlock = button.nextElementSibling || button.parentElement; const text = codeBlock.textContent || codeBlock.innerText; navigator.clipboard.writeText(text).then(() => { button.textContent = ‘Copié !’; setTimeout(() => { button.textContent = ‘Copier’; }, 2000); }); }

Explorez les thématiques majeures de mes citations :

Retour en haut