<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Abdessamad BENALI</title>
    <description>The latest articles on DEV Community by Abdessamad BENALI (@abenali).</description>
    <link>https://dev.to/abenali</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3768422%2F44fbbe49-c8ad-4136-9543-a17546956173.png</url>
      <title>DEV Community: Abdessamad BENALI</title>
      <link>https://dev.to/abenali</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/abenali"/>
    <language>en</language>
    <item>
      <title>J'ai créé mon premier chatbot IA en 3 jours : retour d'expérience</title>
      <dc:creator>Abdessamad BENALI</dc:creator>
      <pubDate>Thu, 12 Feb 2026 10:14:43 +0000</pubDate>
      <link>https://dev.to/abenali/jai-cree-mon-premier-chatbot-ia-en-3-jours-retour-dexperience-3jcg</link>
      <guid>https://dev.to/abenali/jai-cree-mon-premier-chatbot-ia-en-3-jours-retour-dexperience-3jcg</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Comment un développeur backend sénior a construit et déployé son premier projet IA en un weekend&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4e1nq3idtaa20864mij.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4e1nq3idtaa20864mij.png" alt="Capture rendu final du Chatbot" width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  👋 Introduction
&lt;/h2&gt;

&lt;p&gt;Développeur backend PHP depuis plus de 15 ans, j'ai passé ces dernières années à observer l'IA de loin.&lt;/p&gt;

&lt;p&gt;Comme beaucoup, j'utilisais l'IA pour débugger du code ou générer des tests. Pratique, mais passif.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Puis un déclic en janvier 2026 :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Pourquoi ne pas intégrer l'IA &lt;strong&gt;directement dans mes applications backend&lt;/strong&gt; au lieu de juste l'utiliser comme assistant personnel ?&lt;/p&gt;

&lt;p&gt;Je me suis posé une question simple : que peut m'apporter l'IA sur mon domaine d'expertise (Symfony, APIs REST, architecture backend) ?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Décision prise :&lt;/strong&gt; 3 mois pour explorer, expérimenter, et devenir compétent en IA appliquée au backend.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Premier projet :&lt;/strong&gt; Créer un chatbot fonctionnel en 3 jours.&lt;/p&gt;

&lt;p&gt;Pas 3 jours full-time. Plutôt 1-2h par jour sur mon temps libre. L'objectif n'était pas de créer une architecture ultra-optimisée ou un design parfait, mais de &lt;strong&gt;comprendre les fondamentaux de l'intégration IA&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Spoiler :&lt;/strong&gt; Mission accomplie.&lt;/p&gt;

&lt;p&gt;Dans cet article, je partage ce parcours de 3 jours : les choix techniques, les blocages et surtout &lt;strong&gt;les leçons apprises.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Si vous êtes développeur backend et que l'IA vous intrigue sans savoir par où démarrer, cet article est pour vous.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 Contexte : Pourquoi ce projet ?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Le déclic est venu de mes missions.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Dans la plupart des réunions techniques pour mes clients, face à un problème, quelqu'un lançait en rigolant : "Et si on faisait ça avec l'IA ?"&lt;/p&gt;

&lt;p&gt;C'était devenu un running gag.&lt;/p&gt;

&lt;p&gt;Le problème ? On ne l'a jamais fait. On parlait d'IA pour des problématiques métier, mais jamais pour l'intégration technique côté backend.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ma réflexion :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Je développe sur Symfony, PHP, APIs REST, architecture backend depuis 15 ans. L'IA, c'est aussi une API. Une API REST qui prend du texte en entrée et retourne du texte en sortie.&lt;/p&gt;

&lt;p&gt;Pourquoi ne pas combiner les deux ?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;L'aspect business freelance :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Aujourd'hui, mon positionnement : "Consultant Backend Symfony Senior".&lt;/p&gt;

&lt;p&gt;Demain : "Consultant Backend + IA".&lt;/p&gt;

&lt;p&gt;La différence ? Ce n'est pas juste monter en compétences. C'est &lt;strong&gt;créer de la valeur différenciante&lt;/strong&gt; sur un marché qui évolue.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pourquoi un chatbot comme premier projet ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Simple : je voulais apprendre les fondamentaux sans me perdre dans la complexité.&lt;/p&gt;

&lt;p&gt;Un chatbot, c'est :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Un projet cadré (pas de scope infini)&lt;/li&gt;
&lt;li&gt;Facile à démontrer (une URL, ça marche)&lt;/li&gt;
&lt;li&gt;Focus sur l'essentiel (intégration API IA + backend)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Pas de sur-engineering. Juste l'apprentissage.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ Stack Technique Choisie
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Backend : Symfony 7 + PHP 8.3&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;J'ai gardé ma stack habituelle. L'objectif était d'apprendre l'IA, pas de réécrire tout mon backend. Symfony 7 et PHP 8.3, c'est ma zone de confort depuis des années.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;IA : Google Gemini API (pas OpenAI)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Première tentative : OpenAI GPT-4. Problème : j'ai été bloqué par les coûts dès les premiers tests. Impossible d'expérimenter librement avec une facture potentielle qui grimpe.&lt;/p&gt;

&lt;p&gt;Solution : Gemini API de Google. Quotas gratuits très généreux, parfait pour du développement et de l'expérimentation sans stress financier.&lt;/p&gt;

&lt;p&gt;Modèle utilisé : &lt;code&gt;gemini-3-flash-preview&lt;/code&gt; (modèle texte performant et rapide).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Frontend : Tailwind CSS (via CDN) + Vanilla JS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Je ne suis pas un expert frontend, donc j'ai choisi la simplicité.&lt;/p&gt;

&lt;p&gt;Tailwind CSS via CDN : pas de config npm/webpack, juste un lien dans le HTML. Gain de temps massif.&lt;/p&gt;

&lt;p&gt;Vanilla JavaScript : pas de framework (React, Vue...), juste des appels API et animations basiques. Pourquoi complexifier quand on peut faire simple ?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Déploiement : Docker + Render.com + GitHub Actions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Une fois le projet fonctionnel en local, il fallait le déployer.&lt;/p&gt;

&lt;p&gt;Render.com offre un tier gratuit avec support Docker. Configuration simple, détection automatique de la stack.&lt;/p&gt;

&lt;p&gt;J'ai créé un Dockerfile, connecté mon repo GitHub, et configuré le déploiement automatique via GitHub Actions : à chaque push sur &lt;code&gt;main&lt;/code&gt;, l'app se redéploie.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Le principe directeur : minimiser la friction technique pour maximiser l'apprentissage IA.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  📅 Jour 1 : Découverte et Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Matin : Découverte des APIs IA (1-2h)
&lt;/h3&gt;

&lt;p&gt;Je ne voulais pas perdre de temps sur la théorie. Mon objectif : comprendre comment appeler une API IA en moins de 2 heures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Première tentative : OpenAI&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;J'ai ouvert la documentation OpenAI. Après 15 minutes de lecture, le constat était clair : coûts élevés, limitations strictes, gestion de crédits complexe.&lt;/p&gt;

&lt;p&gt;Pour expérimenter librement, ce n'était pas envisageable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pivot vers Gemini API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;J'ai basculé sur Google Gemini. Documentation claire, quotas gratuits généreux. Exactement ce qu'il me fallait.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tests avec Postman&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Une fois le principe compris, j'ai lancé Postman pour tester :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Appel simple question-réponse&lt;/li&gt;
&lt;li&gt;Passage de contexte dans le prompt&lt;/li&gt;
&lt;li&gt;Variations de paramètres (temperature, tokens)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Après 2-3 tests, j'avais compris l'essentiel.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚠️ Difficulté rencontrée #1 : Limitation de modèle
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Problème :&lt;/strong&gt; J'avais d'abord utilisé un modèle Gemini récent, mais j'ai rapidement été bloqué par la limite d'appels gratuits.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution :&lt;/strong&gt; Je suis passé à un modèle beaucoup plus généreux en quotas (&lt;code&gt;gemini-3-flash-preview&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Temps perdu :&lt;/strong&gt; 20 minutes de recherche dans la doc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Leçon :&lt;/strong&gt; Toujours vérifier les quotas avant de choisir un modèle.&lt;/p&gt;

&lt;h3&gt;
  
  
  Après-midi : Setup Symfony
&lt;/h3&gt;

&lt;p&gt;Une fois l'API IA comprise, j'ai initialisé mon environnement backend.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;symfony new ai-chatbot &lt;span class="nt"&gt;--version&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;7.1
&lt;span class="nb"&gt;cd &lt;/span&gt;ai-chatbot
composer require symfony/http-client
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Configuration minimaliste : juste ce qu'il faut pour faire des appels HTTP et gérer les réponses.&lt;/p&gt;

&lt;p&gt;Pas de database, pas de complexité inutile. L'objectif était l'IA, pas l'architecture.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Ce que j'ai appris Jour 1
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;L'IA c'est aussi des APIs REST classiques (rien de magique)&lt;/li&gt;
&lt;li&gt;Gemini gratuit &amp;gt; OpenAI payant pour expérimenter&lt;/li&gt;
&lt;li&gt;Postman est parfait pour tester avant d'intégrer&lt;/li&gt;
&lt;li&gt;Toujours vérifier les quotas des modèles&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📅 Jour 2 : Intégration Backend
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Matin : Architecture API
&lt;/h3&gt;

&lt;p&gt;Objectif du jour : intégrer Gemini dans Symfony.&lt;/p&gt;

&lt;p&gt;J'ai créé un contrôleur API simple. Pas d'architecture complexe, pas de sur-engineering. Juste un controller avec 3 endpoints.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Endpoint 1 : &lt;code&gt;/api/chat/test&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Test de disponibilité du service. J'envoie un prompt simple à Gemini, je vérifie que la connexion fonctionne.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="na"&gt;#[Route('/api/chat/test', methods: ['GET'])]&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;JsonResponse&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;geminiService&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;testConnection&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'status'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="s1"&gt;'ok'&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;'error'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Endpoint 2 : &lt;code&gt;/api/chat&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Chat basique : une question, une réponse.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="na"&gt;#[Route('/api/chat', methods: ['POST'])]&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;chat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;Request&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kt"&gt;JsonResponse&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$request&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'message'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;geminiService&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'response'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ça marchait, mais les réponses étaient génériques.&lt;/p&gt;

&lt;h3&gt;
  
  
  Après-midi : Le Game Changer - Le Contexte
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Endpoint 3 : &lt;code&gt;/api/chat/context&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;C'est là que tout a changé.&lt;/p&gt;

&lt;p&gt;Au lieu d'envoyer juste la question de l'utilisateur, j'envoie également un &lt;strong&gt;contexte&lt;/strong&gt; sur mon profil :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"
Je suis Abdessamad Benali, développeur Backend Symfony 15 ans.
TJM actuel : 500€, TJM cible : 750€+.
Compétences : PHP, Symfony, APIs REST, IA...
"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$fullPrompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$context&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n\n&lt;/span&gt;&lt;span class="s2"&gt;Question : "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$message&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;geminiService&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;generateText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$fullPrompt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Résultat ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Les réponses sont passées de génériques à &lt;strong&gt;ultra-personnalisées&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Question : "Quel est ton TJM ?"&lt;/p&gt;

&lt;p&gt;Avant (sans contexte) : "Je ne peux pas répondre à cette question personnelle."&lt;/p&gt;

&lt;p&gt;Après (avec contexte) : "Mon TJM actuel est de XXX€/jour..."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;C'était le déclic.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Le contexte transforme une IA générique en assistant personnalisé.&lt;/p&gt;

&lt;h3&gt;
  
  
  Gestion technique
&lt;/h3&gt;

&lt;p&gt;J'ai ajouté :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Gestion des erreurs (try/catch sur appels API)&lt;/li&gt;
&lt;li&gt;Logs basiques (chaque appel tracé)&lt;/li&gt;
&lt;li&gt;Commits Git réguliers (après chaque endpoint fonctionnel)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✅ Ce que j'ai appris Jour 2
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Le contexte fait &lt;strong&gt;toute la différence&lt;/strong&gt; en IA&lt;/li&gt;
&lt;li&gt;Un bon prompt = contexte + question&lt;/li&gt;
&lt;li&gt;Symfony + IA = juste un service comme un autre&lt;/li&gt;
&lt;li&gt;Garder l'architecture simple permet d'avancer vite&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📅 Jour 3 : Frontend et Déploiement
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Matin : Interface Chat
&lt;/h3&gt;

&lt;p&gt;Backend fonctionnel, place au frontend.&lt;/p&gt;

&lt;p&gt;Problème : je ne suis pas expert frontend. Solution : rester simple.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Structure HTML + Tailwind CSS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;J'ai d'abord posé la structure visuelle :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Zone de messages (scrollable)&lt;/li&gt;
&lt;li&gt;Input utilisateur&lt;/li&gt;
&lt;li&gt;Bouton d'envoi&lt;/li&gt;
&lt;li&gt;Design avec Tailwind (gradients, ombres, animations)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Une fois le design acceptable, j'ai attaqué le JavaScript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript : Appels API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Premier jet ultra-simple :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/chat/context&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Affichage console d'abord&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Tests dans la console pour valider. Ça marchait.&lt;/p&gt;

&lt;p&gt;Ensuite, intégration dans le DOM pour afficher les messages dans l'interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  Après-midi : Polish et Déploiement
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Améliorations visuelles&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;J'ai ajouté :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Loader pendant l'attente de réponse&lt;/li&gt;
&lt;li&gt;Suggestions rapides (boutons pré-remplis)&lt;/li&gt;
&lt;li&gt;Animations d'apparition des messages&lt;/li&gt;
&lt;li&gt;Heures d'envoi&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Design simple mais propre.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Déploiement : Le défi&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Application fonctionnelle en local. Il fallait la déployer.&lt;/p&gt;

&lt;p&gt;Recherche d'un hébergeur gratuit supportant PHP. J'ai trouvé Render.com.&lt;/p&gt;

&lt;p&gt;Problème : Render préfère Docker pour les stacks custom.&lt;/p&gt;

&lt;p&gt;Solution rapide : j'ai créé un Dockerfile basique :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight docker"&gt;&lt;code&gt;&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="s"&gt; php:8.3-cli&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; . /app&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;composer &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;span class="k"&gt;CMD&lt;/span&gt;&lt;span class="s"&gt; php -S 0.0.0.0:8080 -t public&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Configuration sur Render, connexion GitHub, et... &lt;strong&gt;déployé en 10 minutes&lt;/strong&gt; !&lt;/p&gt;

&lt;p&gt;URL live accessible : le chatbot était en production.&lt;/p&gt;

&lt;h3&gt;
  
  
  Soir : Tests Utilisateurs
&lt;/h3&gt;

&lt;p&gt;J'ai fait tester à 2 amis avec des profils différents, pour avoir un feedback technique et business.&lt;/p&gt;

&lt;p&gt;"C'est super cool, mais tu devrais vraiment mettre un lien vers ton portfolio dans les réponses !" - "C'est génial pour la tech, mais ça manque d'impact business. Comment ça va m'aider à vendre ?"&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Leçon :&lt;/strong&gt; Les feedbacks, même durs, sont essentiels pour progresser.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Ce que j'ai appris Jour 3
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Tailwind CSS via CDN = gain de temps massif&lt;/li&gt;
&lt;li&gt;Vanilla JS suffit pour un projet simple&lt;/li&gt;
&lt;li&gt;Docker simplifie le déploiement&lt;/li&gt;
&lt;li&gt;Les vrais feedbacks (même durs) sont précieux&lt;/li&gt;
&lt;li&gt;Projet d'apprentissage ≠ projet de vente&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  💡 Top 5 Leçons Apprises
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. L'IA c'est aussi une API REST
&lt;/h3&gt;

&lt;p&gt;Avant de commencer, je me faisais des idées complexes sur l'IA. Data science, maths, Python obligatoire...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Réalité :&lt;/strong&gt; L'IA, c'est aussi une API REST.&lt;/p&gt;

&lt;p&gt;Une fois la documentation ouverte, j'ai compris : on envoie du texte en POST, on reçoit du texte en réponse. Comme n'importe quelle API que je consomme depuis 15 ans.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Si vous savez consommer une API REST, vous savez utiliser l'IA.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Le contexte fait TOUTE la différence
&lt;/h3&gt;

&lt;p&gt;Sans contexte : réponses génériques et inutiles.&lt;/p&gt;

&lt;p&gt;Avec contexte : réponses personnalisées et pertinentes.&lt;/p&gt;

&lt;p&gt;Le prompt n'est pas juste une question. C'est &lt;strong&gt;contexte + question&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Le contexte, c'est votre "base de données temporaire". Plus il est précis, meilleures sont les réponses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;La qualité de vos réponses dépend de la qualité de votre contexte.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Shipping &amp;gt; Perfection
&lt;/h3&gt;

&lt;p&gt;J'aurais pu passer 2 semaines à perfectionner l'architecture, optimiser le design, ajouter des features.&lt;/p&gt;

&lt;p&gt;Au lieu de ça : &lt;strong&gt;3 jours pour livrer.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Résultat :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Projet live et fonctionnel&lt;/li&gt;
&lt;li&gt;Feedbacks utilisateurs réels&lt;/li&gt;
&lt;li&gt;Apprentissage validé&lt;/li&gt;
&lt;li&gt;Confiance boostée&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Mieux vaut shipped imparfait que parfait non-livré.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Commencer simple, itérer ensuite
&lt;/h3&gt;

&lt;p&gt;Pas d'architecture complexe. Pas de sur-engineering. Pas de "et si on ajoutait ça ?".&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Approche :&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Version 1 : Un controller, 3 routes, ça marche.&lt;/li&gt;
&lt;li&gt;Version 2 : Ajout contexte.&lt;/li&gt;
&lt;li&gt;Version 3 : Frontend basique.&lt;/li&gt;
&lt;li&gt;Version 4 : Déploiement.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Chaque étape = petite victoire. Chaque victoire = motivation pour continuer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Itération &amp;gt; Perfection dès le départ.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Déployer tôt = Feedbacks précieux
&lt;/h3&gt;

&lt;p&gt;Garder son projet en local = zéro validation.&lt;/p&gt;

&lt;p&gt;Le déployer = feedbacks réels.&lt;/p&gt;

&lt;p&gt;Mes 2 testeurs m'ont donné des retours que je n'aurais jamais eus seul, des idées d'amélioration, une critique constructive (focus business vs tech).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ces feedbacks ont plus de valeur que 10h de développement en isolation.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Déployer = apprendre. Apprendre = progresser.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 Conclusion
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Ce que j'ai fait en 3 jours :&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Intégré l'IA dans un projet backend concret&lt;/li&gt;
&lt;li&gt;✅ Créé un chatbot fonctionnel et déployé&lt;/li&gt;
&lt;li&gt;✅ Obtenu des feedbacks utilisateurs réels&lt;/li&gt;
&lt;li&gt;✅ Validé que c'est accessible (pas besoin d'être data scientist)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Ce que je n'ai PAS fait :&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;❌ Une architecture parfaite&lt;/li&gt;
&lt;li&gt;❌ Un design award-winning&lt;/li&gt;
&lt;li&gt;❌ Devenu expert IA du jour au lendemain&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mais ce n'était pas l'objectif.&lt;/p&gt;

&lt;p&gt;L'objectif était de &lt;strong&gt;démontrer qu'avec une solide expérience backend, on peut intégrer l'IA rapidement sur des cas concrets.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Pas besoin d'années d'étude. Juste 3 jours pour comprendre les fondamentaux et livrer quelque chose de fonctionnel.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Et maintenant ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ce chatbot était mon projet d'apprentissage. Le prochain sera différent : un projet métier avec ROI mesurable et besoin business réel.&lt;/p&gt;

&lt;p&gt;Parce que la vraie valeur de l'IA, ce n'est pas la technologie. C'est l'impact business qu'elle génère.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Et vous ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Si vous êtes développeur backend et que l'IA vous intrigue, lancez-vous. Choisissez un petit projet, donnez-vous 3 jours, et livrez.&lt;/p&gt;

&lt;p&gt;Vous serez surpris de ce que vous pouvez accomplir.&lt;/p&gt;

&lt;p&gt;Des retours ? Des questions ? Une expérience similaire à partager ? Les commentaires sont ouverts, j'ai hâte d'en discuter avec vous ! &lt;/p&gt;




&lt;h2&gt;
  
  
  🔗 Liens et Contact
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt; &lt;strong&gt;&lt;a href="https://ai-chatbot-untd.onrender.com/" rel="noopener noreferrer"&gt;Demo live du chatbot&lt;/a&gt;&lt;/strong&gt; - Testez-le vous-même !&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;&lt;a href="https://github.com/abenali/ai-chatbot" rel="noopener noreferrer"&gt;Code source GitHub&lt;/a&gt;&lt;/strong&gt; - Projet open source&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;&lt;a href="https://www.linkedin.com/in/abdessamadbenali/" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;&lt;/strong&gt; - Connectons-nous !&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;&lt;a href="https://webbendigital.fr/" rel="noopener noreferrer"&gt;Mon portfolio&lt;/a&gt;&lt;/strong&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;NB : Pour la démo, étant sur un plan gratuit, le site est mis en pause si pas d'activité pendant 15 min. Il suffit d'attendre que le service redémarre (quelques secondes)&lt;/em&gt; &lt;/p&gt;




&lt;h2&gt;
  
  
  📚 Ressources Utiles
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Documentation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://symfony.com/doc/current/setup.html" rel="noopener noreferrer"&gt;Symfony 7 - Setup Guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developers.openai.com/api/docs/quickstart" rel="noopener noreferrer"&gt;OpenAI API Quickstart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ai.google.dev/gemini-api/docs/quickstart?hl=fr" rel="noopener noreferrer"&gt;Google Gemini API (FR)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/" rel="noopener noreferrer"&gt;Docker Documentation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Publié le 12/02/2026 par Abdessamad Benali&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Si cet article vous a été utile, n'hésitez pas à le partager avec d'autres développeurs qui hésitent à se lancer dans l'IA !&lt;/em&gt;&lt;/p&gt;

</description>
      <category>php</category>
      <category>symfony</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
