Comment coder avec l’IA ?
Nous avions récemment étudié l’influence des technologies IA dans le développement de logiciels et la programmation en général et il est clair que le déploiement de l’IA dans le secteur du numérique évolue sans cesse, mais qu’en est-il réellement au niveau pratique ? Comment coder avec l’IA ? Les résultats escomptés sont-ils satisfaisants ? Quel nouveau rôle attribue-t-on au développeur ? Pour répondre à ces questions de manière succincte, tout en restant précis, nous avons testé 3 outils IA pour tenter de juger de leur efficacité en tant qu’assistant de codage. Nous avons créé 2 sites web à partir de ChatGPT et Strikingly AI ainsi qu’un chatbot. Notez toutefois que l’IA ne sert pas uniquement à coder. Nous ne voulons pas vous induire en erreur. L’IA peut tout à fait vous aider autrement. Avez-vous déjà pensé à utiliser l’intelligence artificielle pour l’architecture de contenu aka l’arborescence de votre site web ? L’IA peut vous suggérer un menu optimisé voire même une hiérarchisation de contenu (balises Hn) après analyse et comparaison des sites concurrents. Une agence de publicité pourrait par exemple appuyer sa veille concurrentielle par l’implémentation des suggestions d’un outil IA pour une présentation plus pertinente et impactante. Au final, à vous de choisir l’usage idéal de l’IA qui correspondra le mieux à vos besoins. Créer un site web en utilisant des outils d’intelligence artificielle La création de sites web a énormément évolué depuis les années 2000. Les premiers sites internet qui ressemblaient à des blocs de texte accompagnés de petites images et arborant fièrement leurs liens bleus, ont laissé place à des portails web beaucoup plus appréciables, visuellement parlant. Les plateformes telles que WordPress, Wix, Shopify ou encore Prestashop, ont facilité le design et le développement de sites. Concevoir un site devient accessible à tous grâce à ces drag and drop builder. Nous avons testé pour vous la création d’un site internet à l’aide de ChatGPT tout en prenant soin d’utiliser les mêmes prompts sur Strikingly AI. Un prompt est une description d’une tâche assignée à un outil IA. Il s’agit d’une instruction allant de quelques phrases à plusieurs paragraphes. Strikingly AI est une plateforme de création de site, fonctionnant intégralement grâce à l’intelligence artificielle. Que vous soyez un développeur en herbe, fraîchement diplômé, ou une entreprise souhaitant investir dans l’IA en 2025: ces tutoriels sont faits pour vous ! ChatGPT Pour commencer, il vous faudra un compte ChatGPT. Allez sur le site: https://openai.com/ Recherchez ChatGPT et téléchargez l’outil sur votre ordinateur ou votre mobile. Préférez l’ordinateur car nous allons créer un site web ensemble. Une fois inscrit.e, vous verrez l’écran suivant. ChatGPT est utile pour la génération de texte et médias. Testons ensemble sa capacité à coder une page unique de A à Z. En bas à droite, cliquez sur “Plus” pour la génération de code. L’objectif principal du test sera de juger de la qualité du code fourni. Demandons à cet outil de générer du code pour créer une page d’accueil. Pensez à tester plusieurs prompts pour de meilleurs résultats. Choisissez la thématique qui vous intéresse et n’oubliez pas de mentionner les langages de programmation. Prenez exemple sur notre prompt si nécessaire: Voici des extraits des codes proposés par ChatGPT: Utilisez le site: https://html-css-js.com/ pour tester les 3 fichiers. Copiez, collez les codes proposés par ChatGPT dans les fichiers correspondants et vérifiez s’ils fonctionnent bien ou non. Les codes obtenus ne devraient contenir aucune erreur. Votre page d’accueil basique avec ses différents titres H2 et sections devrait s’afficher sans grand problème. Les directives concernant le type de site ainsi que les couleurs ont bien été respectées de notre côté. Voici une capture d’écran de notre page d’accueil. Il est maintenant temps d’étoffer le contenu de manière globale: le header et le corps de page principalement. ChatGPT modifiera les codes initiaux selon vos nouvelles instructions. Remplacez les 2 images du slider car ChatGPT vous proposera des images placeholder. Votre page d’accueil devrait maintenant contenir un slider avec 2 images: Demandez des corrections au fur et à mesure des prompts. Ici par exemple, nous avions demandé quelques ajustements au niveau du header en enlevant la margin top du slider qui laissait un espace vide inutile. Paramétrez bien le fichier Java pour que le slider s’active et défile automatiquement. Voici le rendu final du header avec nos 2 images: N’hésitez pas à faire appel à un professionnel si vous ne parvenez pas à afficher une page à partir des codes suggérés par ChatGPT car nous ne sommes qu’à la première étape du test. Une modification du code peut s’avérer nécessaire selon votre prompt initial. Demandez à ChatGPT de mettre à jour votre code HTML et votre code CSS pour ajouter plus de contenu au corps de page. L’ajout de nouvelles sections ne sera pas forcément très ergonomique, comme vous pouvez le constater ci-dessous: Si de prime abord, ChatGPT se débrouille plutôt bien pour le design de la page d’accueil, notez que chaque nouvelle manipulation implique généralement des rectifications. Comme l’outil a constamment besoin d’indications très précises, prenez soin de bien rédiger votre prompt. Ne rencontrer aucun problème aurait été utopique. Ici par exemple, nous n’avions jamais demandé à ChatGPT d’ajouter un fond aux titres. Les chiffres de la section métriques-clés de l’entreprise ne s’affichaient pas à cause des titres H3 en jaune. Il a fallu supprimer ces valeurs du fichier CSS: Affichage initial: Affichage corrigé: Retravaillez vos fichiers autant de fois que nécessaire jusqu’à ce que vous arriviez à une mise en page comme celle-ci: Les codes générés par ChatGPT ont permis de créer une page d’accueil simple sans CTA et boutons. Il a fallu plusieurs heures de discussion avec cet outil IA pour obtenir les images ci-dessus. Nul doute qu’un site responsive complexe avec plusieurs fonctionnalités avancées prendra inévitablement plus de temps et engagera beaucoup de ressources. Nous vous conseillons de préparer vos fichiers à l’avance pour ensuite les soumettre à ChatGPT. L’inverse ne favorisera pas votre productivité, comme notre test vient de le prouver. A votre tour
Comment coder avec l’IA ? Lire la suite »
