Aller au contenu principal

TP 1

Avec une bonne compréhension des différentes techniques de prompting, on va pouvoir commencer à générer du code de qualité.

Durée : 15 minutes

Contexte​

Un client souhaite extraire des données d'un fichier Excel pour les afficher sur une page web.

Pour le moment, il n'a besoin que de ça : une seule feuille Excel et une transposition littérale en page web.

Contraintes​

Vous êtes libres d'utiliser l'outil de votre choix.

Le code final doit être déployé soit avec le fichier Excel inclus dans le projet ou bien en acceptant un upload de fichier Excel dans la page web.(./document.xslx) soit en acceptant un upload de fichier Excel dans la page web.

Un fichier Excel d'exemple est disponible ici.

Etape 1​

Construire un prompt pour le projet qui inclut

  • les contraintes du client
  • les langages que vous souhaitez utiliser
  • les fonctionnalités attendues
Indice

Pourquoi ne pas faire rédiger le prompt par le LLM ?

Etape 2​

Lancer le prompt et observer le résultat

Indice
Crée une application web frontend (sans backend) utilisant HTML, CSS et JavaScript. 
Intègre la bibliothèque SheetJS via CDN pour :
1. Permettre à l'utilisateur de télécharger un fichier Excel (.xlsx/.xls).
2. Extraire les données de la première feuille du fichier.
3. Afficher les données sous forme de tableau HTML littéral (sans modification).
4. Gérer les erreurs : formats invalides, feuilles vides.

Exigences :
- HTML : Bouton d'upload, conteneur pour le tableau.
- JavaScript : Utilise FileReader et SheetJS pour parser le fichier.
- CSS (optionnel) : Style minimal pour le tableau (bordures visibles).

Structure attendue :
<!DOCTYPE html>
<html>
<head>
  <title>Excel to Web</title>
  <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #ddd; padding: 8px; }
  </style>
</head>
<body>
  <input type="file" id="excelFile" accept=".xlsx,.xls">
  <div id="excelTable"></div>
  <script>
    // Ton code ici (gestion upload, parsing, affichage)
  </script>
</body>
</html>

Etape 3​

Exécuter le code généré et observer le résultat.

Indice

Copier coller le code dans un dossier intitulé TP1 et l'ouvrir dans un navigateur.

Solution​

Cliquer ici

<!DOCTYPE html>
<html>
<head>
  <title>Excel to Web</title>
  <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    #excelTable { margin-top: 20px; }
    #error { color: red; margin-top: 20px; }
  </style>
</head>
<body>
  <input type="file" id="excelFile" accept=".xlsx,.xls">
  <div id="excelTable"></div>
  <div id="error"></div>
  <script>
    document.getElementById('excelFile').addEventListener('change', function(e) {
      var file = e.target.files[0];
      var errorDiv = document.getElementById('error');
      errorDiv.textContent = '';

      if (!file) {
        return;
      }

      var reader = new FileReader();
      reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, { type: 'array' });

        // Vérifier s'il y a des feuilles dans le workbook
        if (workbook.SheetNames.length === 0) {
          errorDiv.textContent = 'Le fichier Excel ne contient aucune feuille.';
          return;
        }

        var firstSheetName = workbook.SheetNames[0];
        var worksheet = workbook.Sheets[firstSheetName];

        // Vérifier si la feuille est vide
        var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        if (jsonData.length === 0) {
          errorDiv.textContent = 'La première feuille du fichier Excel est vide.';
          return;
        }

        // Générer le tableau HTML
        var html = '<table>';
        for (var i = 0; i < jsonData.length; i++) {
          html += '<tr>';
          for (var j = 0; j < jsonData[i].length; j++) {
            if (i === 0) {
              html += '<th>' + jsonData[i][j] + '</th>';
            } else {
              html += '<td>' + jsonData[i][j] + '</td>';
            }
          }
          html += '</tr>';
        }
        html += '</table>';

        document.getElementById('excelTable').innerHTML = html;
      };

      reader.onerror = function() {
        errorDiv.textContent = 'Erreur lors de la lecture du fichier.';
      };

      reader.readAsArrayBuffer(file);
    });
  </script>
</body>
</html>

Synthèse​

Qu'est-ce qui marche ?

Quels sont les problèmes rencontrés ?