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 maintenant de créer une application, un logiciel ou un site web, avec ChatGPT. En parlant de site web, si vous êtes un étudiant en informatique pour devenir développeur, nous vous recommandons l’offre de Simafri qui vous permettra d’héberger votre site web gratuitement pendant 2 ans pour les moins de 25 ans. Testez ChatGPT, créez vos fichiers et bénéficiez de cette opportunité unique qui impressionnera certainement votre futur employeur.
Strikingly AI
Cet outil promet de créer un site web en moins de 5 minutes. Pour cela, visitez leur site officiel: https://www.strikingly.com/ et choisissez un nom pour votre site web. Décrivez votre entreprise ou projet en quelques phrases.
Voici notre prompt:
Strikingly AI devrait générer une page unique en un temps record. Le site affiché ne respectera pas forcément les couleurs préconisées mais l’essentiel est là:
Choisissez parmi les 3 modèles présentés avant d’accéder à l’éditeur.
Les optimisations sur Strikingly AI sont très limitées. Vous pouvez par exemple demander aux robots de proposer du texte à la demande, pour réécrire les titres et les paragraphes. Ils peuvent également vous recommander des images.
Les modifications de taille et de police d’écriture, le remplacement des images, l’ajout d’une vidéo et tout ce qui concerne la mise en page, peuvent être réalisés directement via l’interface éditeur. Les fonctionnalités avancées telles que l’ajout d’un formulaire de contact,
l’intégration du profil Google maps, l’intégration d’un moyen de paiement, etc sont réservés aux utilisateurs avancés. Le seul moyen de coder avec Strikingly AI passe par l’ajout de code HTML, une fonctionnalité payante que nous n’avions pas testé.
Ouvrez l’éditeur de site et cliquez sur le bouton vert “ajouter une nouvelle section”, à droite.
.
Créez une nouvelle section en sélectionnant “intégration et HTML”
Laissez libre cours à votre imagination et intégrez l’application de votre choix. Vous pouvez également créer une nouvelle page et/ou section avec votre propre code HTML.
Comparaison entre ChatGPT et Strikingly AI
Comparons à présent ces 2 outils pour avoir une idée des performances de l’IA en 2024, en tant qu’assistant de codage. Nos critères de comparaison reposent sur:
- La durée totale du projet dont le nombre d’échanges
- La qualité du résultat fourni
- Le nombre de rectifications et d’itérations
- Le rendu final pour la version gratuite
Dans les 2 cas, on peut s’attendre à des résultats assez satisfaisants. ChatGPT ne semble pas commettre d’erreur dans l’écriture du code. Nous n’avons eu aucun souci majeur d’affichage lors de notre test. Les fichiers générés sont bien lisibles et toutes les balises sont fermées. Le seul véritable inconvénient reste alors les mises à jour et corrections du code. Pour vous donner une idée du dialogue lors de cette étape: demander à ChatGPT de rectifier quelques lignes annule parfois les commandes d’avant. L’outil propose indirectement des améliorations comme le cas des chiffres-clés mentionnés plus haut.
Une patience extrême pour chaque moindre détail sera requise si vous envisagez de développer un site via ChatGPT, du moins pour sa version gratuite. En tant que développeur, vous devrez être en charge de l’écriture du code.
Clôturons cette section avec Strikingly AI. La version gratuite de cette application ne permet pas vraiment de coder. Quant au site généré en un temps record, n’ayez aucune crainte concernant ses fonctionnalités. La qualité sera au rendez-vous. Strikingly AI est parfaitement en mesure de présenter votre secteur d’activité, sur le fond comme sur la forme. Dans notre cas par exemple, les offres de création de site web et de référencement naturel ont bien été mis en avant sur le site. Cette plateforme basée sur l’IA a également pris soin de détailler les expertises tout en listant les projets récents. Au niveau contenu, Strikingly AI dépasse largement ChatGPT qui n’a pu rédiger que quelques phrases. Côté design, Strikingly AI n’a pas respecté les codes couleurs dans le prompt mais a réussi à générer une mise en page sans aucune instruction de notre part.
Pour conclure, il est important de souligner que ChatGPT ne crée pas un site mais suggère du code. Strikingly AI, en revanche, génère un site à la demande et invite assurément le développeur à intégrer du code pour un site professionnel.
Créer un chatbot grâce à l’IA
Passons maintenant à la création d’un Chatbot grâce à l’IA. Rendez-vous sur le site de https://www.chatbot.com/ et créez un compte gratuitement.
Une fois votre compte créé et confirmé, vous accéderez au tableau de bord. Créez votre chatbot en cliquant sur le bouton “add a chatbot”
Puis choisissez la source des données/réponses. Nous avions choisi le site d’Ingenosya.
Les robots vont alors crawler et analyser le contenu de la page URL.
Personnalisez votre message de bienvenue et vérifiez les informations recueillies lors du crawl. Assurez-vous bien qu’ils soient à jour. Cliquez sur “continue” en bas de l’écran pour passer à l’étape d’entraînement du robot.
La période de test peut démarrer dès que vous verrez cette image ressemblant à une mindmap. Le bouton “test your bot” se trouve en haut à droite de l’écran.
La discussion avec l’outil démarre immédiatement.
Chatbot contextualise ses réponses au détail près comme vous pouvez le constater ci-dessous:
Le 2è essai est tout aussi concluant. La réponse à cette question aurait pu poser problème dans la mesure où il s’agit d’une question piège. Favorisez les questions complexes et ouvertes.
Nous avions atteint les limites de l’application en 3 questions seulement. Une page sur notre site, la page “Enterprise Resource Planning”, liste implicitement certains projets. Cette information n’a pas été prise en compte par le robot. Nous l’avions donc aidé à répondre à cette question. Posez des questions difficiles dès le départ pour bien entraîner votre robot.
Pour l’entraîner à répondre à cette requête, il a fallu le rediriger vers l’option la plus appropriée. Ici, nous l’avons redirigé vers le menu.
Nous avons rajouté 2 autres options. Utilisez plusieurs tournures de phrase pour améliorer l’efficacité de l’outil.
Nous invitons ensuite l’utilisateur à visiter la page présentant quelques projets.
Malheureusement, Chatbot a préféré rediriger vers les informations de contact en premier lieu. L’ajout d’un mot avant la phrase exacte aurait-elle un impact sur les réponses ?
Il a finalement réussi à afficher la bonne réponse, à la seconde tentative.
Nous avons bien évidemment retesté avec une phrase exacte. Cette fois-ci, Chatbot a répondu de manière correcte du premier coup.
Pour conclure, vous devez entraîner Chatbot à répondre à plusieurs questions susceptibles d’afficher des erreurs. Consacrez du temps à rédiger plusieurs formulations pour répondre aux questions des internautes visitant votre site web.
Personnalisez l’apparence du chatbot et publiez la 1ère version.
Sélectionnez votre mode d’intégration, téléchargez ou installez l’outil selon votre CMS ou plateforme.
Un chatbot est avant tout une application logicielle. Ce qui signifie que le principe de développement reste le même et peut être décrit comme suit: la sélection de langage de programmation, la conception de l’architecture, l’écriture de code suivi des tests ainsi que du débogage. Les développeurs ont tendance à opter pour Python pour la création de chatbot assistée par l’IA.
Si la création de chatbot semble assez intuitive grâce à l’IA, il est préférable de faire appel à un développeur expérimenté pour une solution personnalisée et plus poussée. La modification des entités, intéractions et webhooks nécessite l’intervention du développeur. Nos développeurs spécialisés en Python, C#, JavaScript, PHP et bien d’autres langages de programmation, peuvent accéder à l’API de Chatbot pour paramétrer votre outil. Il vous suffit de nous donner l’access token lors du démarrage de projet.
Ces tests démontrent que dans certains cas et pour des projets simples uniquement, les technologies IA peuvent fonctionner indépendamment du codage du développeur. Ne vous laissez pas surprendre pour autant par cette première impression. Ce qui en apparence semble être un travail de qualité, n’est en réalité que l’aboutissement générique d’un site web et d’un chatbot.
Si les plateformes IA simulent une autonomie sidérante en produisant des solutions assez convenables, la participation active du développeur sera toujours de mise pour des projets de plus grande envergure comme pour la création d’une solution logicielle ERP par exemple. Un savoir-faire reconnu et une attention particulière portée aux détails présenteront toujours un avantage pour tout type de conception d’application web ou mobile. Qu’il s’agisse d’un site web ou d’un chatbot, vos clients jugeront la qualité de vos services par les performances de vos supports de communication. Négliger cette expérience de l’utilisateur avec un outil non optimisé peut être fatal pour votre notoriété. Privilégiez la qualité à la facilité d’utilisation des outils IA par vos propres moyens.
Nous pouvons en conclure que coder avec l’IA en 2024 revient à guider l’outil à produire une première version qui nécessitera pas mal de révisions. L’amplitude du projet définit les applications à privilégier ainsi que les missions attribuées au développeur. La première ébauche présentée par les technologies avancées en IA lui servira de base. Il ne s’agit donc pas d’un nouveau rôle à proprement parler. Coder avec l’IA c’est faire confiance à un outil pour faciliter certaines tâches. Le processus de développement ne peut pas entièrement être confié à ChatGPT ou Strikingly AI. Ils accompagnent et allègent la charge de travail.
Un avenir prometteur en constante évolution se dessine indéniablement pour l’intelligence artificielle, sous toutes ses formes. Chez Ingenosya, nous intégrons progressivement l’IA dans nos gestions de projet. Envisagez d’investir dans l’IA en 2025 pour rester compétitifs et positionnez-vous en tant que leader sur le marché.
Partager cet article
S'abonner à notre newsletters
Obtenir des mises à jour et apprendre des meilleurs
Plus d'articles à découvrir
Programmation C# : Guide du débutant
1. Introduction à C# Vous êtes intéressé par la programmation et vous vous demandez quel langage apprendre en premier ? Ne cherchez pas plus loin
PHP 8 : Quelles sont les nouveautés à connaître ?
Bienvenue dans le monde palpitant de PHP 8, où les fonctionnalités n’attendent que vous pour être explorées ! Mais avant de plonger dans les nouveautés,
Comprendre et Manipuler les Strings en Python
Strings ou chaînes de caractères en Python En Python, les chaînes de caractères ou strings sont comme les mots d’une phrase : omniprésentes et essentielles.
Vous voulez booster votre transformation digitale ?
Envoyez-nous un message et restez en contact
