Aller au contenu principal

Construire avec des outils IA

La Copera Starter Application vous donne une fondation fonctionnelle dès le départ. Les assistants de code IA peuvent accélérer dramatiquement la personnalisation et l'extension — transformant ce qui pourrait prendre des jours en heures, et des heures en minutes.

Le concept​

Lorsque vous travaillez avec la Starter Application, vous avez déjà l'authentification, le routage, la récupération de données et les motifs UI en place. Votre travail consiste à adapter cette fondation à votre cas d'usage spécifique — changer les données affichées, ajouter de nouvelles pages, connecter de nouvelles colonnes de Board Copera, ou brancher de nouveaux workflows.

Les outils IA excellent exactement dans ce type de tâche. Donnez-leur le bon contexte, et ils généreront de nouvelles pages, composants et routes d'API qui s'alignent sur les motifs de votre codebase existant. La clé est le contexte : plus l'IA comprend la structure de votre projet et la configuration de votre Board Copera, meilleur sera son résultat.

Utiliser Copera AI​

Copera a un assistant IA intégré qui comprend déjà votre workspace, vos boards et vos données.

Ce que vous pouvez lui demander :

  • « Quelles colonnes a mon board Tickets, et quels sont leurs IDs ? »
  • « Comment interroger les lignes de la table Orders où Status est 'Pending' ? »
  • « Génère un snippet SDK Copera qui crée une nouvelle ligne dans mon board Projects avec un Name et une Due Date. »

Parce que Copera AI a un accès direct à la structure de votre workspace, il peut vous donner des Column IDs et des noms de tables exacts sans que vous ayez à les rechercher manuellement. Utilisez-le comme premier arrêt lorsque vous devez comprendre votre structure de données avant d'écrire du code.

astuce

Copiez les Column IDs et Table IDs que Copera AI vous donne directement dans votre fichier config.ts. Cela facilite le partage d'un contexte exact avec d'autres outils IA plus tard.

Utiliser Claude, ChatGPT ou Gemini​

Les assistants IA généralistes fonctionnent bien pour générer des pages, composants et logique — tant que vous leur donnez assez de contexte sur votre projet dès le départ.

Démarrer une conversation​

Ouvrez une nouvelle conversation et fournissez ce contexte au début :

« Je construis une application personnalisée en utilisant le Copera SDK (@copera.ai/sdk). L'application se connecte aux Boards Copera, qui agissent comme ma base de données. Je pars de la Copera Starter Application. La documentation de la plateforme est sur https://university.copera.ai/developer/guides/starter-application/overview »

Ce seul paragraphe oriente l'IA sur votre stack. À partir de là, elle peut générer du code qui utilise le SDK correctement.

Partager votre structure de colonnes​

Collez votre fichier config.ts dans la conversation. Ce fichier mappe les Column IDs de votre Board à des noms lisibles par un humain. Avec ce contexte, l'IA sait exactement quels champs référencer dans tout code qu'elle génère.

// Example config.ts excerpt
export const COLUMNS = {
  TICKET_TITLE: 'col_abc123',
  TICKET_STATUS: 'col_def456',
  TICKET_ASSIGNEE: 'col_ghi789',
  TICKET_PRIORITY: 'col_jkl012',
};

Exemples de prompts qui fonctionnent bien​

  1. Ajouter un nouveau champ à la vue détail :

    « Ajoute une colonne 'Priority' à la page de détail du ticket. Le Column ID dans Copera est col_jkl012. Affiche-la comme un badge coloré : rouge pour High, jaune pour Medium, vert pour Low. »

  2. Créer une nouvelle page dashboard :

    « Crée une nouvelle page à /dashboard qui montre les comptes de tickets regroupés par Status. Utilise les motifs React Query existants du projet. »

  3. Ajouter un workflow de notification :

    « Ajoute une notification e-mail lorsqu'une colonne Status de ticket passe à 'Done'. Utilise l'intégration webhook du Copera SDK. »

  4. Adapter l'app à un cas d'usage différent :

    « Convertis cette application help desk en catalogue produits. J'ai besoin de colonnes pour Product Name, Price, Description et Image URL. Voici les Column IDs de mon board Copera... »

note

Revoyez toujours le code généré par l'IA avant de l'exécuter. Vérifiez que les Column IDs correspondent aux valeurs réelles de votre config.ts et que les appels d'API suivent les motifs de la Starter Application.

Utiliser des IDE propulsés par l'IA (Cursor, Windsurf et autres)​

Les IDE propulsés par l'IA intègrent l'assistant IA directement dans votre éditeur de code. Ils peuvent lire tout votre codebase pour le contexte, ce qui les rend particulièrement efficaces pour la Starter Application.

Pointer l'IDE vers votre architecture​

La Starter Application inclut un fichier CLAUDE.md dans base-application-api/ et base-application-web/. Ces fichiers sont écrits spécifiquement pour que les assistants IA puissent comprendre :

  • La stack technologique (framework, bibliothèques, versions)
  • La structure des dossiers et où chaque type de fichier appartient
  • Les conventions de code et motifs de nommage
  • Comment se connecter au Copera SDK

Ajoutez le fichier CLAUDE.md comme document de référence dans les paramètres de contexte de votre IDE. L'IA générera alors du code qui suit les motifs établis plutôt que d'inventer les siens.

Ajouter la documentation comme contexte​

La plupart des IDE IA vous permettent d'ajouter des URLs ou documents comme matériel de référence. Ajoutez la documentation développeur Copera :

https://university.copera.ai/developer/guides/starter-application/overview

Cela donne à l'IA de l'IDE accès à la référence SDK, pour qu'elle puisse générer des appels d'API exacts.

astuce

Dans Cursor, vous pouvez ajouter des URLs de documentation sous Settings > Features > Docs. Une fois indexée, l'IA référencera automatiquement les méthodes et motifs SDK de la documentation lorsque vous lui demanderez de générer du code.

Conseils pour de meilleurs résultats​

Partagez toujours vos Column IDs. Les outils IA ne peuvent pas deviner la structure de votre Board Copera. Plus vous êtes précis sur les Column IDs et les noms de tables, plus le code généré sera exact.

Construisez de façon incrémentale. Commencez par un petit changement — ajoutez un seul nouveau champ, créez une seule nouvelle page — et testez-le avant de continuer. Il est bien plus facile de dépanner un petit ajout qu'un grand.

Référencez les motifs qui existent déjà. La Starter Application est volontairement cohérente. Lorsque vous demandez à une IA de générer quelque chose de nouveau, pointez-la vers un fichier existant qui fait quelque chose de similaire : « Génère une nouvelle page qui suit le même motif que TicketDetailPage.tsx. »

Vérifiez les appels SDK contre la documentation. Les assistants IA peuvent occasionnellement générer des appels de méthodes SDK qui n'existent pas ou utilisent des formes d'arguments obsolètes. Croisez avec la documentation SDK avant de livrer.

Utilisez Copera AI pour les questions de données, l'IA externe pour les questions de code. Copera AI connaît vos boards ; Claude et ChatGPT savent écrire des composants React. Utilisez chacun pour ce qu'il fait le mieux.

Prochaines étapes​