Aller au contenu principal

TP 2

C'est la suite du prototype développé dans le TP 1, mais on va faire un refactoring partiel.

Durée : 15 minutes

On va basculer l'application en mode frontend / backend.

Les fichiers seront uploadés sur le backend, analysés et leur contenu renvoyé en JSON.

Le challenge sera de garder les deux codes alignés que ce soit en interne (avoir les bonnes dépendances) et entre eux (utiliser le bon contrat d'interface).

Contexte​

On a déjà codé une application simple en NodeJS avec le framework Express et une page web qui convertit un fichier Excel en tableau HTML.

On veut maintenant la refactorer pour effectuer les actions de conversion depuis le serveur.

Le projet doit adopter une route / URL POST /convert pour l'envoi d'un fichier Excel, sa conversion des données Excel.

La route doit retourner un ficher JSON au format suivant : 

{
"headers":["column title 1", ..., "column title N"],
"data":[
["row value 1", ..., "row value N"],
... 
]
}

Le frontend doit évoluer pour fournir via une application jQuery un bouton d'upload couplé à une fonction d'affichage en tableau des données retournées au format JSON.

Contraintes​

Vous êtes libres d'utiliser l'interface / IDE de votre choix.

Vous devez essayer exploiter les méthodes de prompt avancées.

Copier le code existant dans un dossier TP2 via cp -r TP1 TP2

Contraintes techniques​

  • Utiliser le code déjà développé comme base
  • Ajouter au backend une route pour l'upload et le renvoi de JSON
  • Modifier le code frontent pour utiliser cette route via jQuery
  • Adapter le Dockerfile aux évolutions

Etape 1​

Utiliser un mode discursif pour présenter le sujet au LLM et le faire réfléchir aux évolutions souhaitées.

Le modèle ne doit pas produire le code.

  • Il doit d'abord réfléchir au plan.

  • Il doit ensuite produire des prompts les plus simples possibles destinés à produire les actions.

    • Développeur JS : modification du code backend pour ajouter la route d'upload et conversion
    • Développeur JS : modification du code frontend pour remplacer le code xlsx à un appel jQuery au backend
    • Expert Devops : modification de la recette Docker
Indice

<structure projet>
/TP2
│
├── /public
│   └── index.html
│
└── Dockerfile
│
└── app.js
│
└── package.json
</structure projet>

<template>
# Template de prompt 

Rôle: { role } spécialisé dans { mission } qui respecte { normes } 
Contexte: { contexte court }
Contraintes: { contraintes }
Tâche: { tache à réaliser }
</template>


Etape 2​

Ouvrir une nouvelle discussion pour exécuter le prompt qui ajoute une route au backend.

Pour référence, vous devez intégrer le code actuel de app.js dans le contexte du prompt.

La réponse doit fournir la nouvelle version de ce fichier.

Etape 3​

Si besoin, dans la même discussion.

Demandez comment faire évoluer les dépendances du projet pour prendre en compte les modifications.

Comment le faire via une ligne de commande Docker ?

Etape 4​

Ouvrir une nouvelle discussion pour exécuter le prompt qui modifie le frontend.

Pour référence, vous devez intégrer le code actuel de index.html dans le contexte du prompt.

Il doit fournir le code de index.html

Etape 5.​

Relancer le build de l'image Docker, exécutez-la et testez l'application.

Indice
# Supprimer l'instance et la relancer
docker stop my-app && docker run --name my-app my-app:latest

Solution​

Etape 1
<structure_projet>
/TP2
│
├── /public
│   └── index.html
│
└── Dockerfile
│
└── app.js
│
└── package.json
</structure_projet>

On a déjà codé une application simple en NodeJS avec le framework Express et une page web qui convertit un fichier Excel en tableau HTML.

On veut maintenant refactorer pour effectuer les actions de conversion depuis le serveur.

1. Le projet doit adopter une route / URL `POST /convert` pour l'envoi d'un fichier Excel, sa conversion des données Excel, et un retour avec les données au format JSON.  La route doit retourner un ficher JSON au format suivant : 

```
{
"headers":["column title 1", ..., "column title N"],
"data":[
["row value 1", ..., "row value N"],
... 
]
}
```

2. Le frontend doit évoluer pour fournir via une application jQuery un bouton d'upload couplé à une fonction d'affichage en tableau des données retournées au format JSON.


Ne fournis pas le code, réfléchis seulement au plan d'action.

<template>
# Template de prompt 
Rôle: { role } spécialisé dans { mission } qui respecte { normes } 
Contexte: { contexte court }
Contraintes: { contraintes }
Tâche: { tache à réaliser }
</template>
En utilisant le template de prompt fourni, produire des prompts les plus simples possibles destinés à produire les actions.   
- Développeur JS : modification du code backend pour ajouter la route d'upload et conversion   
- Développeur JS : modification du code frontend pour remplacer le code xlsx à un appel jQuery au backend   
- Expert Devops : modification de la recette Docker

Etape 2
#### **Développeur JS : modification du code backend**  
**Rôle**: Développeur JS  
**Mission**: Ajouter une route POST pour upload et conversion Excel  
**Normes**: Utiliser `multer` et `xslx`, respecter la structure JSON  
**Contexte**: Le serveur Express doit gérer l'upload de fichiers Excel et retourner un JSON structuré  
**Contraintes**: Ne pas modifier le reste de l'application, gérer les erreurs  
**Tâche**:  
1. Installer `multer` et `xslx` via `npm`  
2. Créer une route `/convert` avec méthode POST  
3. Utiliser `multer` pour gérer l'upload du fichier Excel  
4. Lire le fichier Excel avec `xslx`, extraire en-têtes et données  
5. Retourner un JSON au format :  
   <json>  
   {  
     "headers": ["col1", "col2"],  
     "data": [["val1", "val2"], ["val3", "val4"]]  
   }  
   </json>
6. Gérer les erreurs (fichier invalide, format incorrect)  

<code existant>
...Coller le app.js existant
</code existant>
Etape 4

Développeur JS : modification du code frontend​

**Rôle**: Développeur JS  
**Mission**: Remplacer XLSX par un appel jQuery au backend  
**Normes**: Utiliser jQuery, éviter les dépendances externes  
**Contexte**: Le frontend doit charger un fichier Excel via un upload et afficher les données  
**Contraintes**: Ne pas modifier le reste de l'application, gérer les erreurs  
**Tâche**:  
1. Créer un bouton de téléchargement (`<input type="file">`)  
2. Utiliser jQuery pour envoyer le fichier via `$.ajax` vers `/convert`  
3. Afficher les données retournées en tableau HTML  
4. Gérer les erreurs (réponse 4xx/5xx, fichier invalide)  
5. Remplacer le code XLSX par l'appel AJAX  


<code existant>
...Coller le index.html existant
</code existant>