DOCUMENTATION

Bien travailler avec Nova

Comment formuler vos demandes, comment sont construites les applications, et comment corriger les erreurs.

Exemples de demandes

Créer une application

« Crée une application de suivi de dépenses avec catégories, total mensuel et graphique en barres. Sauvegarde les données dans le navigateur. »

Planifier d’abord (mode Plan)

« Propose un plan pour un CRM simple : contacts, entreprises, étapes de vente. N’écris pas encore de code. »

Modifier une partie précise

« Dans src/App.tsx, ajoute un bouton « Exporter en CSV » sous le tableau. Ne change pas le reste. »

Travailler à partir de données

« Joignez un fichier .npy ou .csv avec le bouton +, puis : « Affiche ces données dans un tableau triable avec un graphique. » »

Changer le style

« Passe l’app en thème sombre, avec une police plus grande et des coins arrondis. »

Astuce : l’onglet Modèles de l’atelier propose des applications prêtes à copier dans votre projet, puis à modifier avec Nova.

Syntaxe et structure

Les apps sont en React + TypeScript (fichiers .tsx).
Le point d’entrée est toujours src/main.tsx.
Style avec les classes Tailwind (className="p-4 bg-white").
Imports relatifs entre vos fichiers (./components/Carte) et icônes de lucide-react.
Les données sont gardées dans le navigateur avec localStorage.

// src/main.tsx — point d'entrée obligatoire
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(<App />);

// src/App.tsx — composant principal
import { useState } from "react";
import { Heart } from "lucide-react";

export default function App() {
  const [likes, setLikes] = useState(0);
  return (
    <button className="rounded-lg bg-pink-500 px-4 py-2 text-white"
            onClick={() => setLikes((n) => n + 1)}>
      <Heart className="inline" /> {likes}
    </button>
  );
}

Erreurs courantes

Fichier introuvable : ./App (importé dans src/main.tsx)

Cause : Un fichier importé n’existe pas (encore). Pendant une construction, c’est normal : l’erreur disparaît quand Nova a écrit tous les fichiers.

Solution : Vérifiez le nom exact (majuscules comprises) dans l’explorateur, ou cliquez sur « Corriger avec Nova ».

X is not defined

Cause : Une variable, un composant ou une icône est utilisé sans être importé.

Solution : Ajoutez l’import, ex. import { Plus } from "lucide-react".

Unexpected token / SyntaxError

Cause : Accolade, parenthèse ou balise JSX non fermée.

Solution : Ouvrez l’onglet Code à la ligne indiquée, ou laissez l’auto-correction s’en charger.

Cannot read properties of undefined

Cause : Une donnée est lue avant d’exister (ex. liste vide, localStorage vide).

Solution : Prévoir une valeur par défaut : JSON.parse(localStorage.getItem("k") ?? "[]").

Module non autorisé

Cause : L’aperçu ne charge que React, react-dom et lucide-react, plus vos fichiers.

Solution : Demandez à Nova de réécrire la fonction sans cette bibliothèque.

Conseils de compilation

Attendez la fin de la construction : le bas de l’écran indique « Aperçu opérationnel » quand tout compile.
Faites des demandes courtes et une chose à la fois : moins d’erreurs, plus facile à annuler.
Après une modification manuelle dans l’onglet Code, enregistrez (Ctrl+S) : l’aperçu se recompile aussitôt.
Utilisez « Actualiser » dans l’aperçu si l’affichage semble figé.
Avant un gros changement, cliquez « Créer une version » dans l’onglet Versions. Vous pourrez comparer et restaurer.

Correction par l’IA

Quand l’aperçu affiche une erreur, Nova peut la corriger de deux façons :

Auto-correction (activée par défaut, case en bas de l’atelier) : à la fin d’une construction, Nova lit l’erreur et corrige le code tout seul, jusqu’à 2 essais.
Corriger avec Nova : un bouton qui envoie l’erreur à Nova quand vous le souhaitez.

Chaque correction crée une version : si le résultat ne vous plaît pas, restaurez la précédente.