Article original : How to Use AI Effectively in Your Dev Projects
« L'IA ne va pas prendre votre emploi – mais un développeur qui sait utiliser l'IA le fera. » J'ai vu cette déclaration partout, et c'est la seule concernant l'IA prenant nos emplois avec laquelle je suis totalement d'accord. Le développement logiciel a changé. Ce n'est plus ce que c'était, et c'est une bonne chose.
Clarifions une chose : l'IA est là pour aider, pas pour remplacer. Votre travail, mon travail, n'a jamais consisté uniquement à écrire du code. Écrire du code n'en a toujours été qu'une partie. Notre vrai travail est de construire des solutions logicielles qui fonctionnent. Et puisque une IA, formée sur les connaissances collectives de millions de développeurs, peut probablement écrire un meilleur code standard, plus propre que vous, vous devriez la laisser faire. Votre expertise est mieux utilisée ailleurs.
Dans cet article, je vais vous montrer exactement comment j'utilise l'IA pour accomplir le travail plus rapidement. Nous allons passer par la construction d'un site web de location de voitures, et vous verrez comment j'utilise l'IA pour :
La planification initiale et la recherche
La conception et même la copie de l'interface utilisateur
L'écriture de tout le code standard ennuyeux
L'amélioration du code et le rendre meilleur
Voici à quoi ressemble le site web que nous construisons : (Démonstration en direct) (Dépôt Github)
Table des matières
Étape 1 : Planification et recherche (Le brainstorming)
Donc, un client me contacte. Ils possèdent une entreprise de location de voitures et veulent un site web simple. Les gens doivent voir les voitures et avoir un moyen facile de les louer. Assez simple.
Alors, que fais-je ? Je ne lance pas VS Code. Je prends ces informations directement à ChatGPT et lui demande des idées.
Prompt :
Vous êtes un designer de site web et vous avez un client qui possède un site web de location de voitures. Ils veulent un site web simple qui affiche les voitures qu'ils ont à louer et une option pour que les gens puissent les louer. Comment vous y prendriez-vous pour construire cela ?
Sortie :
Vous pouvez voir à quel point c'était facile. Alors, qu'est-ce que cela a donné ? Basiquement un briefing de projet complet. Il m'a donné une feuille de route suggérant des pages clés comme une page d'accueil, des listes de voitures et une page de contact. Il a également décrit des fonctionnalités essentielles comme une barre de recherche et des options de filtrage, et a recommandé une pile technologique moderne comme React, ce qui était exactement ce que je prévoyais d'utiliser.
Avec cela réglé, je voulais voir à quoi cela pourrait ressembler, alors j'ai fait générer quelques maquettes rapides.
Prompt :
À partir de ce qui précède, générez les maquettes de ce à quoi l'ensemble du site web avec ses pages ressemblera.
Sortie :
Maintenant, j'ai un plan. Toute la phase de découverte, qui pourrait prendre des heures ou des jours d'allers-retours, est faite en quelques minutes.
Étape 2 : Conception et copie de l'interface utilisateur
D'accord, j'ai une idée approximative de la disposition. Il est temps de transformer ces maquettes laides en un vrai design. Pour cela, j'utilise des outils de génération d'UI alimentés par l'IA (vous pouvez en trouver quelques-uns, comme https://stitch.withgoogle.com, ou même utiliser v0.dev pour obtenir des idées).
J'ai simplement téléchargé les maquettes de ChatGPT et lui ai dit ce que je voulais.
Prompt :
Transformez ces maquettes en un design moderne et propre pour un site web de location de voitures. Rendez-le digne de confiance.
Sortie :
Maintenant, une chose que j'aime avec ces outils, c'est qu'ils ne se contentent pas de générer une belle image. Ils vous donnent le code réel pour cela.
Voici un exemple du type de HTML propre qu'il m'a donné pour une seule carte de voiture :
<div class="bg-white rounded-lg shadow-md p-4 flex flex-col">
<img src="/path-to-your-car-image.png" alt="Toyota Camry" class="rounded-md mb-4">
<h3 class="text-xl font-bold text-gray-800">Toyota Camry</h3>
<p class="text-lg font-semibold text-blue-600 mt-2">$50/day</p>
<ul class="mt-4 space-y-2 text-sm text-gray-600">
<li class="flex items-center">
<span>4 Seats</span>
</li>
<li class="flex items-center">
<span>Automatic</span>
</li>
</ul>
<button class="mt-auto bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
Rent Now
</button>
</div>
Vous pouvez toujours jouer avec le code complet ici.
Et juste comme ça, j'ai le design du site web et le code de départ pour celui-ci. Pas de Figma, pas de découpage d'actifs, juste directement d'une idée au code.
Étape 3 : Écriture du code standard
J'ai dit plus tôt que l'IA peut écrire un meilleur code que vous, et je maintiens cela. Elle a été formée sur tout le code de chaque dépôt public, chaque tutoriel, chaque développeur ensemble. En supposant que le cerveau collectif de chaque développeur est meilleur que vous seul, l'IA a un sérieux avantage – si vous pouvez la guider.
Pour mon site de location de voitures, je voulais utiliser React. J'ai donc simplement copié le code HTML de l'outil de design et l'ai collé dans Gemini avec des instructions très claires.
Prompt :
Vous êtes un développeur React senior. Convertissez le code HTML et Tailwind CSS suivant en une application React entièrement fonctionnelle.
Exigences :
Utilisez Vite comme outil de construction.
Le projet doit être en TypeScript.
Implémentez les composants UI en utilisant
shadcn/uilorsque cela est approprié (par exemple, Boutons, Cartes).Utilisez lucide-react pour les icônes
Structurez le code en composants logiques (par exemple,
Navbar,CarCard,Footer).Créez un fichier racine
App.tsxqui assemble ces composants.Sortie :
Remarquez à quel point j'ai été très spécifique concernant les outils que je voulais ? Si vous voulez la meilleure sortie, vous devez dire à l'IA exactement ce que vous voulez. Ne soyez pas vague. Guidez-la. Cela signifie que vous devrez être familier avec et comprendre les outils nécessaires pour créer ce type de projet.
Globalement, cela a pris peut-être dix minutes depuis le moment où j'ai reçu le message du client jusqu'à ce que j'ai une application React fonctionnelle sur ma machine. Un site web construit en dix minutes ou moins. Cela n'était pas possible il y a quelque temps, mais avec l'aide de l'IA, vous pouvez avancer incroyablement vite.
Étape 4 : Rendre le code réellement bon
Écoutez, je sais que ce n'est pas encore terminé. L'IA m'a donné un bon départ, mais ce n'est pas un produit fini. Je dois encore brancher un CMS ou une base de données, configurer la logique réelle – vous voyez l'idée. C'est là que le vrai développement commence, et l'IA est toujours mon copilote.
Ce que l'IA a bien fait (et mal fait)
L'IA a fait un travail surprenant dès le premier passage. Elle a correctement échafaudé le projet Vite + React + TS, créé un dossier components, et même utilisé des composants shadcn/ui là où je l'ai demandé. Cela m'a fait économiser au moins 30-45 minutes de configuration fastidieuse.
Mais ce n'était pas parfait. Par exemple, les données initiales pour les voitures étaient codées en dur directement à l'intérieur du composant. C'est un énorme non pour une vraie application qui doit évoluer ou tirer des données d'une base de données. De plus, les composants n'étaient pas aussi réutilisables que je l'aurais souhaité.
C'est là que votre travail en tant que développeur intervient – pour réviser, refactoriser et architecturer correctement.
Refactoring en action
Je retourne constamment à l'IA pour affiner le code. Je la traite comme un programmeur en binôme. Voici un exemple. L'IA m'a d'abord donné un composant CarCard qui ressemblait à ceci :
Avant le refactoring (Premier jet de l'IA) :
// components/CarCard.tsx
import { Button } from "./ui/button";
export const CarCard = () => {
const carName = "Tesla Model S"; // Les données sont codées en dur
const price = 95;
const handleRentNow = () => {
console.log("Location de Tesla Model S");
};
return (
<div>
<h2>{carName}</h2>
<p>${price}/jour</p>
<Button onClick={handleRentNow}>Louer maintenant</Button>
</div>
);
};
C'est bien pour une démonstration, mais inutile pour une application réelle. J'ai donc guidé l'IA pour le refactoriser. Je lui ai demandé quelque chose comme : "Refactorisez ce composant CarCard pour accepter les props pour les données de la voiture (nom, prix, image) et une fonction pour le clic sur le bouton de location."
Après le refactoring (Ma version guidée) :
// components/CarCard.tsx
import { Button } from "./ui/button";
// Définir un type pour les données de la voiture
export interface CarProps {
name: string;
price: number;
imageUrl: string;
}
interface CarCardProps {
car: CarProps;
onRentNow: (carName: string) => void;
}
export const CarCard = ({ car, onRentNow }: CarCardProps) => {
return (
<div>
<img src={car.imageUrl} alt={car.name} />
<h2>{car.name}</h2>
<p>${car.price}/jour</p>
<Button onClick={() => onRentNow(car.name)}>Louer maintenant</Button>
</div>
);
};
Voyez la différence ? Maintenant, c'est un composant réutilisable et sécurisé par les types qui obtient ses données de l'extérieur. C'est une conversation aller-retour. J'écris du code, l'IA le nettoie. L'IA écrit du code, je corrige la logique. C'est du programmation en binôme à grande vitesse.
Alors, quelle est la conclusion ?
Le jeu a changé. L'IA est un outil, probablement le plus puissant que nous ayons jamais eu. Elle automatise les tâches ennuyeuses afin que nous puissions nous concentrer sur les problèmes difficiles – l'architecture, la performance et l'expérience utilisateur.
Les développeurs qui ignorent cela vont être dépassés par ceux qui l'adoptent. Il s'agit de travailler plus intelligemment, pas plus dur.
Questions fréquemment posées
Q : Quel est le meilleur modèle d'IA à utiliser ? ChatGPT ou Gemini ou autre chose ?
R : Honnêtement, ils sont tous excellents pour écrire du code, et c'est une question de "Garbage in, Garbage out". Les résultats que vous obtenez ne sont aussi bons que vos prompts. Mais si je devais en choisir un maintenant spécifiquement pour écrire et refactoriser du code, je choisirais probablement Gemini. Les résultats peuvent varier.
Q : Vais-je oublier comment coder si je dépends de l'IA ?
R : Cela dépend de vous. Si vous vous contentez de copier et coller sans comprendre ce qui se passe, alors oui, vos compétences vont s'émousser. Mais si vous l'utilisez pour apprendre, pour voir différentes façons de résoudre un problème et pour vérifier votre propre travail, cela fera en réalité de vous un bien meilleur développeur, plus rapidement.
Q : Est-il éthique d'utiliser l'IA pour le travail client ?
R : Bien sûr. Votre client vous paie pour un site web fonctionnel, pas pour votre sueur et vos larmes en tapant chaque accolade. Est-il non éthique d'utiliser un framework comme React ou d'importer un package depuis npm ? Non. C'est la même chose. C'est un outil. Assurez-vous simplement que le produit final est solide, car vous êtes celui qui est finalement responsable de celui-ci.
Q : Et les bugs ? L'IA écrit-elle du code parfait ?
R : Pas du tout. Elle vous donnera du code bogué. Elle inventera des choses. Ne lui faites pas confiance aveuglément. Ma règle est de traiter le code provenant d'une IA comme s'il venait d'un développeur junior talentueux mais très excentrique. Vous devez vérifier leur travail. Exécutez-le, testez-le, et s'il casse, vous pouvez même coller le code bogué dans l'IA et dire : "Hé, corrigez cela." Elle est surprenamment bonne pour nettoyer ses propres dégâts.
Si vous avez des questions, n'hésitez pas à me trouver sur Twitter à @sprucekhalifa, et n'oubliez pas de me suivre pour plus de conseils et de mises à jour. Bon codage !