[{"data":1,"prerenderedAt":3625},["ShallowReactive",2],{"navigation_fr":3,"posts_fr:/fr/blog/qa-front":51,"posts_fr:/fr/blog/qa-front:surround":1470},[4],{"title":5,"path":6,"stem":7,"children":8,"page":50},"Fr","/fr","fr",[9],{"title":10,"path":11,"stem":12,"children":13,"page":50},"Blog","/fr/blog","fr/blog",[14,18,22,26,30,34,38,42,46],{"title":15,"path":16,"stem":17},"Serveurs MCP comme Serveurs de Ressources OAuth : Une Approche Simplifiée","/fr/blog/mcp-aouth","fr/blog/1. mcp-aouth",{"title":19,"path":20,"stem":21},"Pratiques de Sécurité pour MCP Utilisant JSON-RPC","/fr/blog/mcp-security","fr/blog/1. mcp-security",{"title":23,"path":24,"stem":25},"Serveurs MCP : Connecter l'IA aux Données en Temps Réel","/fr/blog/mcp-create","fr/blog/2. mcp-create",{"title":27,"path":28,"stem":29},"Agents MCP Tiny On-Premises : S'affranchir des Dépendances Cloud","/fr/blog/mcp-tiny-agents-on-premises","fr/blog/5. mcp-tiny-agents-on-premises",{"title":31,"path":32,"stem":33},"De l'Idée à l'API en 2 Jours : Construction de Bankly avec les Flux de Travail Agentiques","/fr/blog/overvibing","fr/blog/6. overvibing",{"title":35,"path":36,"stem":37},"Chatbot IA, Serveur MCP construit avec le Protocole de Flux de Travail Agentique pour démo sur Checkatrade.com","/fr/blog/mcp-in-chat-demo","fr/blog/8. mcp-in-chat-demo",{"title":39,"path":40,"stem":41},"DDD et les Frameworks Full-Stack","/fr/blog/architecture","fr/blog/architecture",{"title":43,"path":44,"stem":45},"Qualité : Comment protéger les Frontends alimentés par l'IA ?","/fr/blog/qa-front","fr/blog/qa-front",{"title":47,"path":48,"stem":49},"Consultation et Stratégie IT","/fr/blog/strategy","fr/blog/strategy",false,{"id":52,"title":43,"authors":53,"badge":60,"body":64,"date":1461,"description":1462,"extension":1463,"image":1464,"meta":1466,"navigation":1467,"path":44,"seo":1468,"stem":45,"__hash__":1469},"posts_fr/fr/blog/qa-front.md",[54],{"name":55,"description":56,"to":57,"avatar":58},"Michael Wybraniec","Freelance, Serveurs MCP, Développement Full-Stack, Architecture","https://www.linkedin.com/in/one-front/",{"src":59},"https://media.licdn.com/dms/image/v2/D4D03AQEGvIVcrTTS2g/profile-displayphoto-shrink_800_800/B4DZbtSf7LIEAc-/0/1747737772225?e=1753315200&v=beta&t=EOviZQkM396PoGctVjDCdlG8U3vN5UKWiIeNQ8IFUgQ",{"label":61,"color":62,"variant":63},"Tests","primary","soft",{"type":65,"value":66,"toc":1440},"minimark",[67,72,76,79,82,87,90,93,96,99,103,106,123,128,134,194,197,200,204,207,274,276,280,341,343,347,382,384,388,391,394,410,413,429,432,441,444,501,504,512,515,523,526,534,781,784,789,792,800,804,807,810,814,817,820,823,825,877,880,920,923,927,930,933,936,938,966,968,1002,1005,1009,1012,1015,1018,1020,1114,1117,1237,1240,1244,1247,1250,1253,1255,1310,1312,1372,1375,1379,1382,1385,1388,1391,1395,1398,1401,1404,1407,1411,1414,1417,1420,1423,1426,1429,1433,1436],[68,69,71],"h1",{"id":70},"comment-je-combine-laq-classique-et-les-tests-de-lère-ia-pour-les-applications-modernes","Comment je combine l'AQ classique et les tests de l'ère IA pour les applications modernes ?",[73,74,75],"p",{},"Aujourd'hui, l'IA n'est plus quelque chose que nous construisons uniquement pour des projets IA — c'est quelque chose que nous utilisons dans presque toutes les applications modernes. Des systèmes de recommandation dans l'e-commerce aux chatbots dans le support client, les composants IA sont partout.",[73,77,78],{},"En tant que développeur, j'ai réalisé que ma stratégie de test doit couvrir à la fois l'AQ classique (comme les tests unitaires, les tests d'intégration, la sécurité, les performances) et les défis spécifiques à l'IA (comme la qualité des données, l'équité des modèles, l'explicabilité et la détection de dérive).",[73,80,81],{},"Dans cet article, je partage ma checklist QAI personnelle — un guide pratique que j'utilise pour tester les applications qui combinent le logiciel traditionnel avec les fonctionnalités IA. Je vais parcourir les outils et pratiques sur lesquels je m'appuie à travers le frontend, le backend (Node.js, Python, PHP) et les composants d'apprentissage automatique, et expliquer comment je configure l'automatisation, la surveillance et les boucles de rétroaction humaine. 🔥",[83,84,86],"h2",{"id":85},"introduction","Introduction",[73,88,89],{},"Nous sommes entrés dans une nouvelle ère de développement logiciel où l'IA n'est plus limitée aux projets spécialisés — elle est intégrée dans presque tout ce que nous construisons. Qu'il s'agisse d'une fonction de recherche, d'un moteur de recommandation, d'un chatbot ou d'un tableau de bord prédictif, l'IA devient un élément standard de la pile technologique.",[73,91,92],{},"Mais voici le défi auquel j'ai été confronté : les approches d'AQ classiques ne suffisent plus. Les tests unitaires, les tests d'intégration, les vérifications de performance et les audits de sécurité sont toujours essentiels — mais ils ne me disent pas si les données derrière mon modèle dérivent, si mon chatbot donne des réponses biaisées, ou si mes recommandations sont toujours pertinentes.",[73,94,95],{},"C'est pourquoi j'ai élaboré une checklist QAI qui aide à tester systématiquement à la fois les couches classiques et les composants IA des applications modernes.",[73,97,98],{},"Dans cet article de blog, je vais parcourir comment j'aborde les tests à travers la pile, partager mes outils favoris, et mettre en évidence les étapes supplémentaires que je prends pour m'assurer que mes applications sont fiables, équitables et évolutives à l'ère de l'IA.",[83,100,102],{"id":101},"_1-pourquoi-laq-moderne-a-besoin-à-la-fois-des-tests-classiques-et-ia","1. Pourquoi l'AQ moderne a besoin à la fois des tests classiques et IA",[73,104,105],{},"Dans les logiciels d'aujourd'hui, l'IA n'est plus optionnelle ou limitée aux projets spéciaux. Elle fait partie de la recherche, du chat, des recommandations, de la détection de fraude, de la personnalisation, de l'analyse prédictive — dans presque tous les secteurs.",[73,107,108,109,112,113,117,119,120],{},"Mais voici le problème que j'ai appris par expérience :",[110,111],"br",{},"\n✅ ",[114,115,116],"strong",{},"L'AQ classique (tests unitaires, d'intégration, E2E, de performance) garantit que l'app fonctionne comme codée.",[110,118],{},"\n❌ ",[114,121,122],{},"Elle ne garantit PAS que l'IA à l'intérieur se comporte de manière sûre, équitable ou fiable dans le temps.",[124,125,127],"h3",{"id":126},"_12-aq-classique-ce-quelle-détecte","1.2 AQ classique — Ce qu'elle détecte",[73,129,130,131,133],{},"L'AQ classique est toujours absolument nécessaire.",[110,132],{},"\nVoici ce que j'applique dans tous les projets, avec des outils spécifiques :",[135,136,137,151,161,174,184],"ul",{},[138,139,140,143],"li",{},[114,141,142],{},"Tests unitaires",[135,144,145,148],{},[138,146,147],{},"Backend → Jest (Node.js), PyTest (Python), PHPUnit (PHP)",[138,149,150],{},"Frontend → Jest + Testing Library (React, Angular, Vue)",[138,152,153,156],{},[114,154,155],{},"Tests d'intégration",[135,157,158],{},[138,159,160],{},"Supertest (APIs Node.js), collections Postman/Newman, pytest-django (APIs Python)",[138,162,163,166],{},[114,164,165],{},"Tests E2E",[135,167,168,171],{},[138,169,170],{},"Playwright, Cypress (E2E navigateur)",[138,172,173],{},"Selenium, Puppeteer (cross-browser, vérifications visuelles)",[138,175,176,179],{},[114,177,178],{},"Tests de performance/charge",[135,180,181],{},[138,182,183],{},"k6, Artillery, Locust (simuler haute charge, tests de stress API)",[138,185,186,189],{},[114,187,188],{},"Tests de sécurité",[135,190,191],{},[138,192,193],{},"OWASP ZAP, Snyk, npm audit, Bandit (scan statique Python)",[73,195,196],{},"✅ Exemple : Je teste mon API backend Node.js avec Supertest + Jest pour les réponses correctes et les cas d'échec.",[198,199],"hr",{},[124,201,203],{"id":202},"_13-nouveaux-problèmes-daq-introduits-par-lia","1.3 Nouveaux problèmes d'AQ introduits par l'IA",[73,205,206],{},"Quand j'ajoute des composants IA🤖 (modèles ML, embeddings, LLMs, moteurs de recommandation), de nouvelles catégories de risques apparaissent :",[135,208,209,222,235,248,261],{},[138,210,211,214],{},[114,212,213],{},"Biais et équité",[135,215,216,219],{},[138,217,218],{},"Exemple : Recommandations de produits qui favorisent les articles populaires et ignorent les catégories de niche, nuisant aux petits vendeurs.",[138,220,221],{},"Outil → IBM AI Fairness 360, Fairlearn",[138,223,224,227],{},[114,225,226],{},"Dérive de modèle",[135,228,229,232],{},[138,230,231],{},"Exemple : Un modèle de détection de fraude entraîné en 2023 devient inutile en 2025 car les modèles de fraude changent.",[138,233,234],{},"Outil → Evidently AI (détection de dérive, tableaux de bord)",[138,236,237,240],{},[114,238,239],{},"Explicabilité",[135,241,242,245],{},[138,243,244],{},"Exemple : Un chatbot de support client donne des réponses étranges, et personne dans l'équipe ne comprend pourquoi.",[138,246,247],{},"Outil → SHAP, LIME, Captum",[138,249,250,253],{},[114,251,252],{},"Qualité des données",[135,254,255,258],{},[138,256,257],{},"Exemple : Champs manquants dans les données d'entrée causent des prédictions incorrectes du modèle.",[138,259,260],{},"Outil → Great Expectations (validation des données)",[138,262,263,266],{},[114,264,265],{},"Robustesse adversariale",[135,267,268,271],{},[138,269,270],{},"Exemple : Un modèle de vision classe incorrectement une image manipulée.",[138,272,273],{},"Outil → Adversarial Robustness Toolbox (ART)",[198,275],{},[124,277,279],{"id":278},"_14-comment-je-combine-laq-classique-avec-qai","1.4 Comment je combine l'AQ classique avec + QAI",[281,282,283,299],"table",{},[284,285,286],"thead",{},[287,288,289,293,296],"tr",{},[290,291,292],"th",{},"Couche",[290,294,295],{},"AQ classique",[290,297,298],{},"QAI (AQ consciente de l'IA)",[300,301,302],"tbody",{},[287,303,304,311,326],{},[305,306,307,310],"td",{},[114,308,309],{},"Frontend"," (React, Angular, Vue, Next, Nuxt)",[305,312,313,314,316,317,319,320,322,323,325],{},"✅ Tests unitaires",[110,315],{},"✅ Tests E2E",[110,318],{},"✅ Régression visuelle",[110,321],{},"✅ Tests d'accessibilité (a11y)",[110,324],{},"✅ Tests cross-browser",[305,327,328,329,331,332,334,335,337,338,340],{},"⚠️ Cohérence UX du code généré par IA",[110,330],{},"⚠️ Détecter les hallucinations (comportement incorrect ou inventé)",[110,333],{},"⚠️ Suivre la complexité cachée ou le code inutilisé",[110,336],{},"⚠️ Vérifier la justesse des dépendances + versions",[110,339],{},"⚠️ Valider le comportement de repli quand les fonctionnalités IA échouent ou donnent des résultats incertains",[198,342],{},[124,344,346],{"id":345},"_15-aq-frontend-classique-toujours-essentielle","1.5 AQ Frontend classique (toujours essentielle)",[135,348,349,354,359,364,370,376],{},[138,350,351,353],{},[114,352,142],{}," → Jest, Vitest, Mocha",[138,355,356,358],{},[114,357,155],{}," → React Testing Library, Angular Testing Library",[138,360,361,363],{},[114,362,165],{}," → Cypress, Playwright",[138,365,366,369],{},[114,367,368],{},"Régression visuelle"," → Percy, Chromatic, Loki",[138,371,372,375],{},[114,373,374],{},"Tests d'accessibilité"," → axe-core, Lighthouse",[138,377,378,381],{},[114,379,380],{},"Tests cross-browser"," → BrowserStack, Sauce Labs",[198,383],{},[124,385,387],{"id":386},"_16-qai-tests-frontend-conscients-de-lia","1.6 QAI (Tests Frontend conscients de l'IA)",[73,389,390],{},"Parce que l'IA aide au codage, nous faisons face à de nouveaux risques :",[73,392,393],{},"✅ Vérification de la qualité du code + lisibilité",[135,395,396,403],{},[138,397,398,399,402],{},"Utiliser ",[114,400,401],{},"ESLint, Prettier"," → détecter le code IA désordonné, incohérent",[138,404,405,406,409],{},"Ajouter des ",[114,407,408],{},"vérifications CI"," pour le formatage + linting",[73,411,412],{},"✅ Cohérence UI/UX",[135,414,415,422],{},[138,416,417,418,421],{},"Vérifier si l'UI générée par IA correspond aux ",[114,419,420],{},"systèmes de design"," (Storybook aide !)",[138,423,424,425,428],{},"Utiliser des ",[114,426,427],{},"tests de régression visuelle"," pour détecter les dérives de style/mise en page",[73,430,431],{},"✅ Validation des hallucinations + logique",[135,433,434],{},[138,435,436,437,440],{},"Écrire des ",[114,438,439],{},"tests unitaires/d'intégration"," pour les assistants générés par IA",[73,442,443],{},"Exemple :",[445,446,451],"pre",{"className":447,"code":448,"language":449,"meta":450,"style":450},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Surveiller les assistants trop compliqués :\nconst getUniqueList = arr => [...new Set(arr)];\n","js","",[452,453,454,463],"code",{"__ignoreMap":450},[455,456,459],"span",{"class":457,"line":458},"line",1,[455,460,462],{"class":461},"sHwdD","// Surveiller les assistants trop compliqués :\n",[455,464,466,470,474,478,482,485,488,491,495,498],{"class":457,"line":465},2,[455,467,469],{"class":468},"spNyl","const",[455,471,473],{"class":472},"sTEyZ"," getUniqueList ",[455,475,477],{"class":476},"sMK4o","=",[455,479,481],{"class":480},"sHdIc"," arr",[455,483,484],{"class":468}," =>",[455,486,487],{"class":472}," [",[455,489,490],{"class":476},"...new",[455,492,494],{"class":493},"s2Zo4"," Set",[455,496,497],{"class":472},"(arr)]",[455,499,500],{"class":476},";\n",[73,502,503],{},"✅ Justesse des dépendances + versions",[135,505,506,509],{},[138,507,508],{},"Vérifier les versions de bibliothèques et mises à jour",[138,510,511],{},"Utiliser npm audit, pnpm audit, Snyk pour repérer les packages non sécurisés ou obsolètes",[73,513,514],{},"✅ Détection de complexité cachée / code mort",[135,516,517,520],{},[138,518,519],{},"Détecter les imports, vars, fonctions inutilisés",[138,521,522],{},"Utiliser webpack, Rollup, ESLint no-unused-vars",[73,524,525],{},"✅ Tests de comportement de repli",[135,527,528,531],{},[138,529,530],{},"Simuler les échecs et timeouts d'API",[138,532,533],{},"Assurer des replis conviviaux\nExemple :",[445,535,537],{"className":447,"code":536,"language":449,"meta":450,"style":450},"describe('UI de repli', () => {\n it('affiche le repli quand l\\'API IA échoue', async () => {\n server.use(\n rest.get('/api/ai-endpoint', (req, res, ctx) =>\n res(ctx.status(500))\n )\n );\n render(\u003CRecommendationWidget />);\n expect(await screen.findByText('Désolé, recommandations indisponibles')).toBeInTheDocument();\n });\n});\n",[452,538,539,567,599,614,658,683,689,697,719,761,771],{"__ignoreMap":450},[455,540,541,544,547,550,554,556,559,562,564],{"class":457,"line":458},[455,542,543],{"class":493},"describe",[455,545,546],{"class":472},"(",[455,548,549],{"class":476},"'",[455,551,553],{"class":552},"sfazB","UI de repli",[455,555,549],{"class":476},[455,557,558],{"class":476},",",[455,560,561],{"class":476}," ()",[455,563,484],{"class":468},[455,565,566],{"class":476}," {\n",[455,568,569,572,575,577,580,583,586,588,590,593,595,597],{"class":457,"line":465},[455,570,571],{"class":493}," it",[455,573,546],{"class":574},"swJcz",[455,576,549],{"class":476},[455,578,579],{"class":552},"affiche le repli quand l",[455,581,582],{"class":472},"\\'",[455,584,585],{"class":552},"API IA échoue",[455,587,549],{"class":476},[455,589,558],{"class":476},[455,591,592],{"class":468}," async",[455,594,561],{"class":476},[455,596,484],{"class":468},[455,598,566],{"class":476},[455,600,602,605,608,611],{"class":457,"line":601},3,[455,603,604],{"class":472}," server",[455,606,607],{"class":476},".",[455,609,610],{"class":493},"use",[455,612,613],{"class":574},"(\n",[455,615,617,620,622,625,627,629,632,634,636,639,642,644,647,649,652,655],{"class":457,"line":616},4,[455,618,619],{"class":472}," rest",[455,621,607],{"class":476},[455,623,624],{"class":493},"get",[455,626,546],{"class":574},[455,628,549],{"class":476},[455,630,631],{"class":552},"/api/ai-endpoint",[455,633,549],{"class":476},[455,635,558],{"class":476},[455,637,638],{"class":476}," (",[455,640,641],{"class":480},"req",[455,643,558],{"class":476},[455,645,646],{"class":480}," res",[455,648,558],{"class":476},[455,650,651],{"class":480}," ctx",[455,653,654],{"class":476},")",[455,656,657],{"class":468}," =>\n",[455,659,661,664,666,669,671,674,676,680],{"class":457,"line":660},5,[455,662,663],{"class":493}," res",[455,665,546],{"class":574},[455,667,668],{"class":472},"ctx",[455,670,607],{"class":476},[455,672,673],{"class":493},"status",[455,675,546],{"class":574},[455,677,679],{"class":678},"sbssI","500",[455,681,682],{"class":574},"))\n",[455,684,686],{"class":457,"line":685},6,[455,687,688],{"class":574}," )\n",[455,690,692,695],{"class":457,"line":691},7,[455,693,694],{"class":574}," )",[455,696,500],{"class":476},[455,698,700,703,705,708,712,715,717],{"class":457,"line":699},8,[455,701,702],{"class":493}," render",[455,704,546],{"class":574},[455,706,707],{"class":476},"\u003C",[455,709,711],{"class":710},"sBMFI","RecommendationWidget",[455,713,714],{"class":476}," />",[455,716,654],{"class":574},[455,718,500],{"class":476},[455,720,722,725,727,731,734,736,739,741,743,746,748,751,753,756,759],{"class":457,"line":721},9,[455,723,724],{"class":493}," expect",[455,726,546],{"class":574},[455,728,730],{"class":729},"s7zQu","await",[455,732,733],{"class":472}," screen",[455,735,607],{"class":476},[455,737,738],{"class":493},"findByText",[455,740,546],{"class":574},[455,742,549],{"class":476},[455,744,745],{"class":552},"Désolé, recommandations indisponibles",[455,747,549],{"class":476},[455,749,750],{"class":574},"))",[455,752,607],{"class":476},[455,754,755],{"class":493},"toBeInTheDocument",[455,757,758],{"class":574},"()",[455,760,500],{"class":476},[455,762,764,767,769],{"class":457,"line":763},10,[455,765,766],{"class":476}," }",[455,768,654],{"class":574},[455,770,500],{"class":476},[455,772,774,777,779],{"class":457,"line":773},11,[455,775,776],{"class":476},"}",[455,778,654],{"class":472},[455,780,500],{"class":476},[73,782,783],{},"✅ Vérification sécurité + injection",[135,785,786],{},[138,787,788],{},"Auditer les interpolations de chaînes générées par IA + gestion HTML",[73,790,791],{},"✅ Tests de performance",[135,793,794,797],{},[138,795,796],{},"Utiliser Lighthouse, WebPageTest pour détecter les inefficacités",[138,798,799],{},"Surveiller le debouncing/throttling manqués",[83,801,803],{"id":802},"_2-aq-frontend-qai","2. AQ Frontend + QAI",[73,805,806],{},"Lors de l'utilisation de l'IA dans le développement frontend, plusieurs risques peuvent survenir, et ils doivent être considérés pendant les tests.",[73,808,809],{},"Ces risques sont un mélange de problèmes d'AQ classiques et de problèmes spécifiques QAI uniques que les outils IA peuvent introduire :",[124,811,813],{"id":812},"_211-qualité-du-code-et-lisibilité","2.1.1 Qualité du code et lisibilité",[73,815,816],{},"Le code généré par IA pourrait ne pas toujours suivre les meilleures pratiques ou les standards de codage de votre projet, rendant difficile la maintenance ou le débogage futur.",[73,818,819],{},"Code incohérent : L'IA pourrait générer du code qui manque de cohérence avec la structure de votre projet.",[73,821,822],{},"Nommage de variables peu clair : L'IA pourrait générer des fonctions ou variables avec des noms non descriptifs, rendant le code plus difficile à comprendre.",[73,824,443],{},[445,826,828],{"className":447,"code":827,"language":449,"meta":450,"style":450},"// Code généré par IA\nfunction f(x, y) {\n return x * y;\n}\n",[452,829,830,835,857,872],{"__ignoreMap":450},[455,831,832],{"class":457,"line":458},[455,833,834],{"class":461},"// Code généré par IA\n",[455,836,837,840,843,845,848,850,853,855],{"class":457,"line":465},[455,838,839],{"class":468},"function",[455,841,842],{"class":493}," f",[455,844,546],{"class":476},[455,846,847],{"class":480},"x",[455,849,558],{"class":476},[455,851,852],{"class":480}," y",[455,854,654],{"class":476},[455,856,566],{"class":476},[455,858,859,862,865,868,870],{"class":457,"line":601},[455,860,861],{"class":729}," return",[455,863,864],{"class":472}," x",[455,866,867],{"class":476}," *",[455,869,852],{"class":472},[455,871,500],{"class":476},[455,873,874],{"class":457,"line":616},[455,875,876],{"class":476},"}\n",[73,878,879],{},"Meilleure pratique serait :",[445,881,883],{"className":447,"code":882,"language":449,"meta":450,"style":450},"function calculateProduct(x, y) {\n return x * y;\n}\n",[452,884,885,904,916],{"__ignoreMap":450},[455,886,887,889,892,894,896,898,900,902],{"class":457,"line":458},[455,888,839],{"class":468},[455,890,891],{"class":493}," calculateProduct",[455,893,546],{"class":476},[455,895,847],{"class":480},[455,897,558],{"class":476},[455,899,852],{"class":480},[455,901,654],{"class":476},[455,903,566],{"class":476},[455,905,906,908,910,912,914],{"class":457,"line":465},[455,907,861],{"class":729},[455,909,864],{"class":472},[455,911,867],{"class":476},[455,913,852],{"class":472},[455,915,500],{"class":476},[455,917,918],{"class":457,"line":601},[455,919,876],{"class":476},[73,921,922],{},"Solution de test QAI : Automatiser les vérifications des conventions de nommage et de cohérence de structure de code en utilisant des linters et formateurs comme ESLint ou Prettier.",[124,924,926],{"id":925},"_212-uiux-incohérente","2.1.2 UI/UX incohérente",[73,928,929],{},"L'IA pourrait générer du code UI qui ne s'aligne pas avec les principes UI/UX désirés, résultant en incohérences ou mauvaise accessibilité.",[73,931,932],{},"Incohérences de design : L'IA pourrait ne pas utiliser des systèmes de design cohérents, résultant en couleurs, polices et styles de composants discordants.",[73,934,935],{},"Accessibilité : L'IA peut négliger les fonctionnalités d'accessibilité comme les rôles ARIA ou la navigation clavier.",[73,937,443],{},[445,939,943],{"className":940,"code":941,"language":942,"meta":450,"style":450},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton>Cliquez-moi\u003C/button>\n","html",[452,944,945],{"__ignoreMap":450},[455,946,947,949,952,955,958,961,963],{"class":457,"line":458},[455,948,707],{"class":476},[455,950,951],{"class":574},"button",[455,953,954],{"class":476},">",[455,956,957],{"class":472},"Cliquez-moi",[455,959,960],{"class":476},"\u003C/",[455,962,951],{"class":574},[455,964,965],{"class":476},">\n",[73,967,879],{},[445,969,971],{"className":940,"code":970,"language":942,"meta":450,"style":450},"\u003Cbutton aria-label=\"Soumettre le formulaire\">Cliquez-moi\u003C/button>\n",[452,972,973],{"__ignoreMap":450},[455,974,975,977,979,982,984,987,990,992,994,996,998,1000],{"class":457,"line":458},[455,976,707],{"class":476},[455,978,951],{"class":574},[455,980,981],{"class":468}," aria-label",[455,983,477],{"class":476},[455,985,986],{"class":476},"\"",[455,988,989],{"class":552},"Soumettre le formulaire",[455,991,986],{"class":476},[455,993,954],{"class":476},[455,995,957],{"class":472},[455,997,960],{"class":476},[455,999,951],{"class":574},[455,1001,965],{"class":476},[73,1003,1004],{},"Solution de test QAI : Utiliser des outils de test d'accessibilité comme axe-core ou Lighthouse pour automatiser la détection des problèmes d'accessibilité et s'assurer que le code généré par IA adhère aux standards d'accessibilité.",[83,1006,1008],{"id":1007},"_213-vulnérabilités-de-sécurité","2.1.3 Vulnérabilités de sécurité",[73,1010,1011],{},"L'IA pourrait involontairement introduire des risques de sécurité en générant du code non sécurisé, particulièrement autour des entrées utilisateur ou appels API.",[73,1013,1014],{},"Vulnérabilités XSS : L'IA peut échouer à nettoyer correctement les entrées utilisateur, exposant votre application au cross-site scripting (XSS).",[73,1016,1017],{},"Appels API non sécurisés : L'IA peut générer des appels API sans HTTPS, exposant les données sensibles à l'interception.",[73,1019,443],{},[445,1021,1023],{"className":447,"code":1022,"language":449,"meta":450,"style":450},"// Appel API non sécurisé généré par IA\nfetch('/api/user', { method: 'POST', body: JSON.stringify(user) })\n .then(response => response.json());\n",[452,1024,1025,1030,1086],{"__ignoreMap":450},[455,1026,1027],{"class":457,"line":458},[455,1028,1029],{"class":461},"// Appel API non sécurisé généré par IA\n",[455,1031,1032,1035,1037,1039,1042,1044,1046,1049,1052,1055,1058,1061,1063,1065,1068,1070,1073,1075,1078,1081,1083],{"class":457,"line":465},[455,1033,1034],{"class":493},"fetch",[455,1036,546],{"class":472},[455,1038,549],{"class":476},[455,1040,1041],{"class":552},"/api/user",[455,1043,549],{"class":476},[455,1045,558],{"class":476},[455,1047,1048],{"class":476}," {",[455,1050,1051],{"class":574}," method",[455,1053,1054],{"class":476},":",[455,1056,1057],{"class":476}," '",[455,1059,1060],{"class":552},"POST",[455,1062,549],{"class":476},[455,1064,558],{"class":476},[455,1066,1067],{"class":574}," body",[455,1069,1054],{"class":476},[455,1071,1072],{"class":472}," JSON",[455,1074,607],{"class":476},[455,1076,1077],{"class":493},"stringify",[455,1079,1080],{"class":472},"(user) ",[455,1082,776],{"class":476},[455,1084,1085],{"class":472},")\n",[455,1087,1088,1091,1094,1096,1099,1101,1104,1106,1109,1112],{"class":457,"line":601},[455,1089,1090],{"class":476}," .",[455,1092,1093],{"class":493},"then",[455,1095,546],{"class":472},[455,1097,1098],{"class":480},"response",[455,1100,484],{"class":468},[455,1102,1103],{"class":472}," response",[455,1105,607],{"class":476},[455,1107,1108],{"class":493},"json",[455,1110,1111],{"class":472},"())",[455,1113,500],{"class":476},[73,1115,1116],{},"Meilleure pratique :",[445,1118,1120],{"className":447,"code":1119,"language":449,"meta":450,"style":450},"fetch('/api/user', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(user),\n secure: true\n}).then(response => response.json());\n",[452,1121,1122,1138,1154,1182,1200,1211],{"__ignoreMap":450},[455,1123,1124,1126,1128,1130,1132,1134,1136],{"class":457,"line":458},[455,1125,1034],{"class":493},[455,1127,546],{"class":472},[455,1129,549],{"class":476},[455,1131,1041],{"class":552},[455,1133,549],{"class":476},[455,1135,558],{"class":476},[455,1137,566],{"class":476},[455,1139,1140,1143,1145,1147,1149,1151],{"class":457,"line":465},[455,1141,1142],{"class":574}," method",[455,1144,1054],{"class":476},[455,1146,1057],{"class":476},[455,1148,1060],{"class":552},[455,1150,549],{"class":476},[455,1152,1153],{"class":476},",\n",[455,1155,1156,1159,1161,1163,1165,1168,1170,1172,1174,1177,1179],{"class":457,"line":601},[455,1157,1158],{"class":574}," headers",[455,1160,1054],{"class":476},[455,1162,1048],{"class":476},[455,1164,1057],{"class":476},[455,1166,1167],{"class":574},"Content-Type",[455,1169,549],{"class":476},[455,1171,1054],{"class":476},[455,1173,1057],{"class":476},[455,1175,1176],{"class":552},"application/json",[455,1178,549],{"class":476},[455,1180,1181],{"class":476}," },\n",[455,1183,1184,1187,1189,1191,1193,1195,1198],{"class":457,"line":616},[455,1185,1186],{"class":574}," body",[455,1188,1054],{"class":476},[455,1190,1072],{"class":472},[455,1192,607],{"class":476},[455,1194,1077],{"class":493},[455,1196,1197],{"class":472},"(user)",[455,1199,1153],{"class":476},[455,1201,1202,1205,1207],{"class":457,"line":660},[455,1203,1204],{"class":574}," secure",[455,1206,1054],{"class":476},[455,1208,1210],{"class":1209},"sfNiH"," true\n",[455,1212,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235],{"class":457,"line":685},[455,1214,776],{"class":476},[455,1216,654],{"class":472},[455,1218,607],{"class":476},[455,1220,1093],{"class":493},[455,1222,546],{"class":472},[455,1224,1098],{"class":480},[455,1226,484],{"class":468},[455,1228,1103],{"class":472},[455,1230,607],{"class":476},[455,1232,1108],{"class":493},[455,1234,1111],{"class":472},[455,1236,500],{"class":476},[73,1238,1239],{},"Solution de test QAI : Utiliser des outils comme OWASP ZAP ou Snyk pour les audits de sécurité et le scan automatisé de vulnérabilités pour vérifier les risques comme XSS, injection SQL, et plus.",[83,1241,1243],{"id":1242},"_214-problèmes-de-performance","2.1.4 Problèmes de performance",[73,1245,1246],{},"Les outils IA peuvent générer du code qui fonctionne mais n'est pas optimisé pour la performance.",[73,1248,1249],{},"Rendu inefficace : L'IA pourrait échouer à considérer la performance de rendu, résultant en manipulations DOM inutiles ou re-rendus.",[73,1251,1252],{},"Bundles non optimisés : Le code généré par IA peut ne pas tirer parti du lazy loading ou du code splitting, causant des tailles de bundle plus grandes et des temps de chargement plus lents.",[73,1254,443],{},[445,1256,1258],{"className":447,"code":1257,"language":449,"meta":450,"style":450},"// Généré par IA sans debouncing\ninputElement.addEventListener('input', function() {\n renderResults();\n});\n",[452,1259,1260,1265,1293,1302],{"__ignoreMap":450},[455,1261,1262],{"class":457,"line":458},[455,1263,1264],{"class":461},"// Généré par IA sans debouncing\n",[455,1266,1267,1270,1272,1275,1277,1279,1282,1284,1286,1289,1291],{"class":457,"line":465},[455,1268,1269],{"class":472},"inputElement",[455,1271,607],{"class":476},[455,1273,1274],{"class":493},"addEventListener",[455,1276,546],{"class":472},[455,1278,549],{"class":476},[455,1280,1281],{"class":552},"input",[455,1283,549],{"class":476},[455,1285,558],{"class":476},[455,1287,1288],{"class":468}," function",[455,1290,758],{"class":476},[455,1292,566],{"class":476},[455,1294,1295,1298,1300],{"class":457,"line":601},[455,1296,1297],{"class":493}," renderResults",[455,1299,758],{"class":574},[455,1301,500],{"class":476},[455,1303,1304,1306,1308],{"class":457,"line":616},[455,1305,776],{"class":476},[455,1307,654],{"class":472},[455,1309,500],{"class":476},[73,1311,1116],{},[445,1313,1315],{"className":447,"code":1314,"language":449,"meta":450,"style":450},"const debouncedRender = debounce(() => renderResults(), 300);\ninputElement.addEventListener('input', debouncedRender);\n",[452,1316,1317,1349],{"__ignoreMap":450},[455,1318,1319,1321,1324,1326,1329,1331,1333,1335,1338,1340,1342,1345,1347],{"class":457,"line":458},[455,1320,469],{"class":468},[455,1322,1323],{"class":472}," debouncedRender ",[455,1325,477],{"class":476},[455,1327,1328],{"class":493}," debounce",[455,1330,546],{"class":472},[455,1332,758],{"class":476},[455,1334,484],{"class":468},[455,1336,1337],{"class":493}," renderResults",[455,1339,758],{"class":472},[455,1341,558],{"class":476},[455,1343,1344],{"class":678}," 300",[455,1346,654],{"class":472},[455,1348,500],{"class":476},[455,1350,1351,1353,1355,1357,1359,1361,1363,1365,1367,1370],{"class":457,"line":465},[455,1352,1269],{"class":472},[455,1354,607],{"class":476},[455,1356,1274],{"class":493},[455,1358,546],{"class":472},[455,1360,549],{"class":476},[455,1362,1281],{"class":552},[455,1364,549],{"class":476},[455,1366,558],{"class":476},[455,1368,1369],{"class":472}," debouncedRender)",[455,1371,500],{"class":476},[73,1373,1374],{},"Solution de test QAI : Exploiter les outils de performance comme WebPageTest ou Lighthouse pour mesurer les temps de rendu, tailles de bundle et temps de chargement des ressources. Vérifier régulièrement les goulots d'étranglement de performance causés par le code généré par IA.",[124,1376,1378],{"id":1377},"_215-gestion-des-versions-et-dépendances","2.1.5 Gestion des versions et dépendances",[73,1380,1381],{},"Les outils IA pourraient suggérer des bibliothèques obsolètes ou incompatibles, menant à des problèmes de dépendances.",[73,1383,1384],{},"Bibliothèques obsolètes : L'IA pourrait suggérer des versions obsolètes de bibliothèques ou frameworks, résultant en problèmes de compatibilité.",[73,1386,1387],{},"Conflits de dépendances : Le code généré par IA peut introduire des conflits avec les versions actuelles des bibliothèques dans votre projet.",[73,1389,1390],{},"Solution de test QAI : Utiliser Dependabot ou des outils similaires pour vérifier automatiquement les dépendances obsolètes et conflits de versions. S'assurer que votre package.json est à jour et compatible avec les exigences de votre projet.",[124,1392,1394],{"id":1393},"_216-comportement-imprévisible-et-manque-de-transparence","2.1.6 Comportement imprévisible et manque de transparence",[73,1396,1397],{},"Le code généré par IA peut parfois mener à un comportement imprévisible dû au manque de contexte ou de transparence dans le processus de génération de code.",[73,1399,1400],{},"Logique cachée : L'IA pourrait introduire des solutions complexes ou non-évidentes qui pourraient mener à des bugs.",[73,1402,1403],{},"Erreurs contextuelles : L'IA peut échouer à saisir le contexte complet du projet, causant des problèmes dans certains scénarios ou cas limites.",[73,1405,1406],{},"Solution de test QAI : Conduire des revues manuelles parallèlement aux tests unitaires pour identifier les cas limites potentiels qui pourraient surgir du code généré par IA. Les frameworks de test automatisés comme Jest, Mocha, ou Cypress peuvent aider à identifier les comportements inattendus.",[124,1408,1410],{"id":1409},"_221-atténuer-les-risques-de-lia-dans-le-développement-frontend","2.2.1 Atténuer les risques de l'IA dans le développement frontend",[73,1412,1413],{},"Pour réduire ces risques, les développeurs devraient implémenter des stratégies spécifiques, comme :",[73,1415,1416],{},"Revues de code : Le code généré par IA devrait être minutieusement revu par les développeurs pour assurer la qualité et cohérence.",[73,1418,1419],{},"Tests automatisés : Construire des tests unitaires, d'intégration et end-to-end complets pour détecter les problèmes tôt et s'assurer que le frontend se comporte comme attendu.",[73,1421,1422],{},"Tests de performance : Utiliser des outils de performance comme Lighthouse ou WebPageTest pour surveiller continuellement les vitesses de rendu et l'utilisation des ressources.",[73,1424,1425],{},"Audits de sécurité : Utiliser des outils de sécurité automatisés pour détecter les vulnérabilités potentielles dans le code généré par IA.",[73,1427,1428],{},"Vérifications manuelles et automatisées : Utiliser des outils de linting et formatage (ex : ESLint, Prettier) pour appliquer les meilleures pratiques, et exécuter des vérifications d'accessibilité à travers des outils comme axe-core.",[83,1430,1432],{"id":1431},"résumé","Résumé",[73,1434,1435],{},"En combinant les pratiques d'AQ frontend traditionnelles avec des stratégies spécifiques QAI, nous pouvons efficacement s'assurer que le développement frontend assisté par IA ne compromet pas la qualité, sécurité, performance ou expérience utilisateur. Il est essentiel d'équilibrer la commodité des outils IA avec des tests et validations soigneux pour assurer des applications frontend robustes et fiables.",[1437,1438,1439],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":450,"searchDepth":465,"depth":465,"links":1441},[1442,1443,1450,1454,1455,1460],{"id":85,"depth":465,"text":86},{"id":101,"depth":465,"text":102,"children":1444},[1445,1446,1447,1448,1449],{"id":126,"depth":601,"text":127},{"id":202,"depth":601,"text":203},{"id":278,"depth":601,"text":279},{"id":345,"depth":601,"text":346},{"id":386,"depth":601,"text":387},{"id":802,"depth":465,"text":803,"children":1451},[1452,1453],{"id":812,"depth":601,"text":813},{"id":925,"depth":601,"text":926},{"id":1007,"depth":465,"text":1008},{"id":1242,"depth":465,"text":1243,"children":1456},[1457,1458,1459],{"id":1377,"depth":601,"text":1378},{"id":1393,"depth":601,"text":1394},{"id":1409,"depth":601,"text":1410},{"id":1431,"depth":465,"text":1432},"2025-04-25","Aujourd'hui, l'IA n'est plus limitée aux projets spécialisés — elle est intégrée dans presque tout ce que nous construisons. Qu'il s'agisse d'une fonction de recherche, d'un moteur de recommandation, d'un chatbot ou d'un tableau de bord prédictif, l'IA devient un élément standard de la pile technologique.","md",{"src":1465},"/blog/testing/thumbnail.png",{},true,{"title":43,"description":1462},"m9N8QMH5OsbpBlIsdiz5Su1cStAs98p-snDh9f0k7TQ",[1471,2989],{"id":1472,"title":23,"authors":1473,"badge":1476,"body":1479,"date":2982,"description":2983,"extension":1463,"image":2984,"meta":2986,"navigation":1467,"path":24,"seo":2987,"stem":25,"__hash__":2988},"posts_fr/fr/blog/2. mcp-create.md",[1474],{"name":55,"description":56,"to":57,"avatar":1475},{"src":59},{"label":1477,"color":1478,"variant":63},"MCP, Temps Réel","error",{"type":65,"value":1480,"toc":2970},[1481,1489,1510,1567,1582,1605,1620,1630,1727,1742,2150,2308,2323,2329,2505,2520,2538,2588,2603,2631,2646,2676,2762,2777,2783,2790,2920,2935,2944,2954,2967],[1482,1483,1486],"div",{"className":1484},[1485],"text-justify",[73,1487,1488],{},"Les serveurs MCP révolutionnent la façon dont les modèles de langage interagissent avec les sources de données externes. Considérez-les comme des plugins sophistiqués qui étendent les capacités de l'IA au-delà de leurs données d'entraînement. Dans ce tutoriel complet, nous construirons un serveur MCP météorologique qui connecte Claude, GPT-4, ou tout autre LLM aux informations météorologiques en temps réel en utilisant Python et l'API Open-Meteo.",[1482,1490,1495,1501],{"className":1491},[1492,1493,1494],"flex","justify-between","items-center",[83,1496,1498],{"id":1497},"quest-ce-quun-serveur-mcp",[114,1499,1500],{},"Qu'est-ce qu'un Serveur MCP ?",[73,1502,1503],{},[1504,1505,1507],"a",{"href":1506},"#top",[114,1508,1509],{},"⤴",[1482,1511,1519,1538],{"className":1512},[1513,1514,1515,1516,1517,1518],"grid","grid-cols-1","md:grid-cols-2","items-start","w-full","gap-x-8",[1482,1520,1521],{},[73,1522,1523,1532],{},[1524,1525],"img",{"alt":1526,"className":1527,"height":1529,"src":1530,"style":1531},"Diagramme d'Architecture MCP",[1528],"rounded-md",400,"/blog/mcp/llm-has-tools.png","padding: 20px; background-color: white",[1504,1533,1537],{"href":1534,"rel":1535},"http://one-front/blog/mcp",[1536],"nofollow","Serveur MCP : Connecter l'IA aux Données en Temps Réel",[1482,1539,1541,1544,1547],{"className":1540},[1485],[73,1542,1543],{},"Les serveurs MCP étendent les capacités des modèles de langage en les connectant aux sources de données et services. Ce sont des applications agnostiques qui facilitent l'intégration avec n'importe quelle donnée ou service que vous pouvez imaginer. Pensez aux appels de fonction, mais les fonctions sont des plugins qui peuvent virtuellement tout faire.",[73,1545,1546],{},"Les serveurs MCP exposent trois primitives principales :",[135,1548,1549,1555,1561],{},[138,1550,1551,1554],{},[114,1552,1553],{},"Ressources"," (contrôlées par le client) : Exposition passive de données pour le contexte",[138,1556,1557,1560],{},[114,1558,1559],{},"Outils"," (contrôlés par le modèle) : Fonctionnalité exécutable pour les actions",[138,1562,1563,1566],{},[114,1564,1565],{},"Prompts"," (contrôlés par l'utilisateur) : Workflows réutilisables et modèles",[1482,1568,1570,1576],{"className":1569},[1492,1493,1494],[83,1571,1573],{"id":1572},"pourquoi-les-données-météorologiques",[114,1574,1575],{},"Pourquoi les Données Météorologiques ?",[73,1577,1578],{},[1504,1579,1580],{"href":1506},[114,1581,1509],{},[1482,1583,1585,1588,1591],{"className":1584},[1485],[73,1586,1587],{},"Les données météorologiques fournissent un excellent exemple pour le développement de serveurs MCP car elles démontrent l'intégration d'API du monde réel avec des applications pratiques. Les modèles de langage excellent à transformer les données météorologiques brutes (température, vitesse du vent, humidité) en descriptions en langage naturel et recommandations actionnables.",[73,1589,1590],{},"Nous utiliserons l'API Open-Meteo car elle est :",[135,1592,1593,1596,1599,1602],{},[138,1594,1595],{},"Gratuite pour un usage non commercial",[138,1597,1598],{},"Aucune clé API requise",[138,1600,1601],{},"Facilement configurable via les paramètres de requête",[138,1603,1604],{},"Parfaite pour l'intégration LLM",[1482,1606,1608,1614],{"className":1607},[1492,1493,1494],[83,1609,1611],{"id":1610},"configuration-du-projet",[114,1612,1613],{},"Configuration du Projet",[73,1615,1616],{},[1504,1617,1618],{"href":1506},[114,1619,1509],{},[1482,1621,1623],{"className":1622},[1485],[73,1624,1625,1626,1629],{},"Avant de plonger dans le code, assurez-vous d'avoir les outils nécessaires installés. Nous utiliserons ",[452,1627,1628],{},"uv",", un gestionnaire de paquets Python basé sur Rust qui rend la gestion des dépendances transparente.",[445,1631,1635],{"className":1632,"code":1633,"language":1634,"meta":450,"style":450},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Créer le répertoire du projet\nmkdir mcp-server-weather\ncd mcp-server-weather\n\n# Initialiser le projet uv\nuv init\n\n# Créer et activer l'environnement virtuel\nuv venv\nsource .venv/bin/activate\n\n# Installer les dépendances\nuv add \"mcp[cli]\" httpx\n","bash",[452,1636,1637,1642,1650,1657,1662,1667,1674,1678,1683,1690,1698,1702,1708],{"__ignoreMap":450},[455,1638,1639],{"class":457,"line":458},[455,1640,1641],{"class":461},"# Créer le répertoire du projet\n",[455,1643,1644,1647],{"class":457,"line":465},[455,1645,1646],{"class":710},"mkdir",[455,1648,1649],{"class":552}," mcp-server-weather\n",[455,1651,1652,1655],{"class":457,"line":601},[455,1653,1654],{"class":493},"cd",[455,1656,1649],{"class":552},[455,1658,1659],{"class":457,"line":616},[455,1660,1661],{"emptyLinePlaceholder":1467},"\n",[455,1663,1664],{"class":457,"line":660},[455,1665,1666],{"class":461},"# Initialiser le projet uv\n",[455,1668,1669,1671],{"class":457,"line":685},[455,1670,1628],{"class":710},[455,1672,1673],{"class":552}," init\n",[455,1675,1676],{"class":457,"line":691},[455,1677,1661],{"emptyLinePlaceholder":1467},[455,1679,1680],{"class":457,"line":699},[455,1681,1682],{"class":461},"# Créer et activer l'environnement virtuel\n",[455,1684,1685,1687],{"class":457,"line":721},[455,1686,1628],{"class":710},[455,1688,1689],{"class":552}," venv\n",[455,1691,1692,1695],{"class":457,"line":763},[455,1693,1694],{"class":493},"source",[455,1696,1697],{"class":552}," .venv/bin/activate\n",[455,1699,1700],{"class":457,"line":773},[455,1701,1661],{"emptyLinePlaceholder":1467},[455,1703,1705],{"class":457,"line":1704},12,[455,1706,1707],{"class":461},"# Installer les dépendances\n",[455,1709,1711,1713,1716,1719,1722,1724],{"class":457,"line":1710},13,[455,1712,1628],{"class":710},[455,1714,1715],{"class":552}," add",[455,1717,1718],{"class":476}," \"",[455,1720,1721],{"class":552},"mcp[cli]",[455,1723,986],{"class":476},[455,1725,1726],{"class":552}," httpx\n",[1482,1728,1730,1736],{"className":1729},[1492,1493,1494],[83,1731,1733],{"id":1732},"construction-du-serveur-mcp",[114,1734,1735],{},"Construction du Serveur MCP",[73,1737,1738],{},[1504,1739,1740],{"href":1506},[114,1741,1509],{},[1482,1743,1745,2138],{"className":1744},[1513,1514,1515,1516,1517,1518],[1482,1746,1747],{},[445,1748,1751],{"className":1749,"code":1750,"language":1108,"meta":450,"style":450},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight"," [{\"type\": \"text\", \"text\": \"Prévisions pour 40.7128, -74.006 :\\n\\nAujourd'hui :\\nTempérature : 66°F\\nVent : 13 à 16 mph O\\nPrincipalement Ensoleillé\\n---\\nCe soir :\\nTempérature : 55°F\\nVent : 5 à 13 mph O\\nPartiellement Nuageux\\n---\\nLundi :\\nTempérature : 71°F\\nVent : 8 mph O\\nEnsoleillé\\n---\\nLundi Soir :\\nTempérature : 59°F\\nVent : 3 à 8 mph O\\nPrincipalement Dégagé\\n---\\nMardi :\\nTempérature : 77°F\\nVent : 3 à 7 mph SO\\nEnsoleillé\\n---\\nMardi Soir :\\nTempérature : 65°F\\nVent : 5 à 8 mph S\\nPrincipalement Dégagé\\n---\\nMercredi :\\nTempérature : 82°F\\nVent : 5 à 12 mph SO\\nEnsoleillé\\n---\\nMercredi Soir :\\nTempérature : 69°F\\nVent : 8 à 12 mph SO\\nPrincipalement Dégagé\\n---\\nJeudi :\\nTempérature : 85°F\\nVent : 7 à 12 mph SO\\nPrincipalement Ensoleillé\\n---\\nJeudi Soir :\\nTempérature : 72°F\\nVent : 7 à 12 mph SO\\nPartiellement Nuageux\\n---\\nVendredi :\\nTempérature : 82°F\\nVent : 7 à 12 mph SO\\nPossibilité d'Averses\\n---\\nVendredi Soir :\\nTempérature : 70°F\\nVent : 7 à 12 mph SO\\nPossibilité d'Averses\\n---\\nSamedi :\\nTempérature : 76°F\\nVent : 9 mph O\\nPossibilité d'Averses\\n---\\nSamedi Soir :\\nTempérature : 67°F\\nVent : 6 à 9 mph NO\\nPossibilité d'Averses\\n---\", \"uuid\": \"fb196843-938b-4a75-b1a5-b660892f9817\"}]\n",[452,1752,1753],{"__ignoreMap":450},[455,1754,1755,1758,1760,1763,1765,1767,1769,1772,1774,1776,1778,1780,1782,1784,1786,1789,1792,1795,1798,1801,1803,1806,1808,1811,1813,1816,1818,1821,1823,1826,1828,1831,1833,1836,1838,1840,1842,1845,1847,1850,1852,1855,1857,1860,1862,1864,1866,1869,1871,1874,1876,1879,1881,1884,1886,1888,1890,1893,1895,1898,1900,1903,1905,1907,1909,1911,1913,1916,1918,1921,1923,1926,1928,1930,1932,1934,1936,1939,1941,1944,1946,1949,1951,1953,1955,1957,1959,1962,1964,1967,1969,1972,1974,1976,1978,1980,1982,1985,1987,1990,1992,1995,1997,1999,2001,2003,2005,2008,2010,2013,2015,2017,2019,2021,2023,2025,2027,2030,2032,2034,2036,2038,2040,2043,2045,2047,2049,2052,2054,2057,2059,2061,2063,2065,2067,2069,2071,2074,2076,2079,2081,2084,2086,2088,2090,2092,2094,2097,2099,2102,2104,2107,2109,2111,2113,2115,2117,2119,2121,2124,2126,2128,2130,2133,2135],{"class":457,"line":458},[455,1756,1757],{"class":476}," [{",[455,1759,986],{"class":476},[455,1761,1762],{"class":468},"type",[455,1764,986],{"class":476},[455,1766,1054],{"class":476},[455,1768,1718],{"class":476},[455,1770,1771],{"class":552},"text",[455,1773,986],{"class":476},[455,1775,558],{"class":476},[455,1777,1718],{"class":476},[455,1779,1771],{"class":468},[455,1781,986],{"class":476},[455,1783,1054],{"class":476},[455,1785,1718],{"class":476},[455,1787,1788],{"class":552},"Prévisions pour 40.7128, -74.006 :",[455,1790,1791],{"class":472},"\\n\\n",[455,1793,1794],{"class":552},"Aujourd'hui :",[455,1796,1797],{"class":472},"\\n",[455,1799,1800],{"class":552},"Température : 66°F",[455,1802,1797],{"class":472},[455,1804,1805],{"class":552},"Vent : 13 à 16 mph O",[455,1807,1797],{"class":472},[455,1809,1810],{"class":552},"Principalement Ensoleillé",[455,1812,1797],{"class":472},[455,1814,1815],{"class":552},"---",[455,1817,1797],{"class":472},[455,1819,1820],{"class":552},"Ce soir :",[455,1822,1797],{"class":472},[455,1824,1825],{"class":552},"Température : 55°F",[455,1827,1797],{"class":472},[455,1829,1830],{"class":552},"Vent : 5 à 13 mph O",[455,1832,1797],{"class":472},[455,1834,1835],{"class":552},"Partiellement Nuageux",[455,1837,1797],{"class":472},[455,1839,1815],{"class":552},[455,1841,1797],{"class":472},[455,1843,1844],{"class":552},"Lundi :",[455,1846,1797],{"class":472},[455,1848,1849],{"class":552},"Température : 71°F",[455,1851,1797],{"class":472},[455,1853,1854],{"class":552},"Vent : 8 mph O",[455,1856,1797],{"class":472},[455,1858,1859],{"class":552},"Ensoleillé",[455,1861,1797],{"class":472},[455,1863,1815],{"class":552},[455,1865,1797],{"class":472},[455,1867,1868],{"class":552},"Lundi Soir :",[455,1870,1797],{"class":472},[455,1872,1873],{"class":552},"Température : 59°F",[455,1875,1797],{"class":472},[455,1877,1878],{"class":552},"Vent : 3 à 8 mph O",[455,1880,1797],{"class":472},[455,1882,1883],{"class":552},"Principalement Dégagé",[455,1885,1797],{"class":472},[455,1887,1815],{"class":552},[455,1889,1797],{"class":472},[455,1891,1892],{"class":552},"Mardi :",[455,1894,1797],{"class":472},[455,1896,1897],{"class":552},"Température : 77°F",[455,1899,1797],{"class":472},[455,1901,1902],{"class":552},"Vent : 3 à 7 mph SO",[455,1904,1797],{"class":472},[455,1906,1859],{"class":552},[455,1908,1797],{"class":472},[455,1910,1815],{"class":552},[455,1912,1797],{"class":472},[455,1914,1915],{"class":552},"Mardi Soir :",[455,1917,1797],{"class":472},[455,1919,1920],{"class":552},"Température : 65°F",[455,1922,1797],{"class":472},[455,1924,1925],{"class":552},"Vent : 5 à 8 mph S",[455,1927,1797],{"class":472},[455,1929,1883],{"class":552},[455,1931,1797],{"class":472},[455,1933,1815],{"class":552},[455,1935,1797],{"class":472},[455,1937,1938],{"class":552},"Mercredi :",[455,1940,1797],{"class":472},[455,1942,1943],{"class":552},"Température : 82°F",[455,1945,1797],{"class":472},[455,1947,1948],{"class":552},"Vent : 5 à 12 mph SO",[455,1950,1797],{"class":472},[455,1952,1859],{"class":552},[455,1954,1797],{"class":472},[455,1956,1815],{"class":552},[455,1958,1797],{"class":472},[455,1960,1961],{"class":552},"Mercredi Soir :",[455,1963,1797],{"class":472},[455,1965,1966],{"class":552},"Température : 69°F",[455,1968,1797],{"class":472},[455,1970,1971],{"class":552},"Vent : 8 à 12 mph SO",[455,1973,1797],{"class":472},[455,1975,1883],{"class":552},[455,1977,1797],{"class":472},[455,1979,1815],{"class":552},[455,1981,1797],{"class":472},[455,1983,1984],{"class":552},"Jeudi :",[455,1986,1797],{"class":472},[455,1988,1989],{"class":552},"Température : 85°F",[455,1991,1797],{"class":472},[455,1993,1994],{"class":552},"Vent : 7 à 12 mph SO",[455,1996,1797],{"class":472},[455,1998,1810],{"class":552},[455,2000,1797],{"class":472},[455,2002,1815],{"class":552},[455,2004,1797],{"class":472},[455,2006,2007],{"class":552},"Jeudi Soir :",[455,2009,1797],{"class":472},[455,2011,2012],{"class":552},"Température : 72°F",[455,2014,1797],{"class":472},[455,2016,1994],{"class":552},[455,2018,1797],{"class":472},[455,2020,1835],{"class":552},[455,2022,1797],{"class":472},[455,2024,1815],{"class":552},[455,2026,1797],{"class":472},[455,2028,2029],{"class":552},"Vendredi :",[455,2031,1797],{"class":472},[455,2033,1943],{"class":552},[455,2035,1797],{"class":472},[455,2037,1994],{"class":552},[455,2039,1797],{"class":472},[455,2041,2042],{"class":552},"Possibilité d'Averses",[455,2044,1797],{"class":472},[455,2046,1815],{"class":552},[455,2048,1797],{"class":472},[455,2050,2051],{"class":552},"Vendredi Soir :",[455,2053,1797],{"class":472},[455,2055,2056],{"class":552},"Température : 70°F",[455,2058,1797],{"class":472},[455,2060,1994],{"class":552},[455,2062,1797],{"class":472},[455,2064,2042],{"class":552},[455,2066,1797],{"class":472},[455,2068,1815],{"class":552},[455,2070,1797],{"class":472},[455,2072,2073],{"class":552},"Samedi :",[455,2075,1797],{"class":472},[455,2077,2078],{"class":552},"Température : 76°F",[455,2080,1797],{"class":472},[455,2082,2083],{"class":552},"Vent : 9 mph O",[455,2085,1797],{"class":472},[455,2087,2042],{"class":552},[455,2089,1797],{"class":472},[455,2091,1815],{"class":552},[455,2093,1797],{"class":472},[455,2095,2096],{"class":552},"Samedi Soir :",[455,2098,1797],{"class":472},[455,2100,2101],{"class":552},"Température : 67°F",[455,2103,1797],{"class":472},[455,2105,2106],{"class":552},"Vent : 6 à 9 mph NO",[455,2108,1797],{"class":472},[455,2110,2042],{"class":552},[455,2112,1797],{"class":472},[455,2114,1815],{"class":552},[455,2116,986],{"class":476},[455,2118,558],{"class":476},[455,2120,1718],{"class":476},[455,2122,2123],{"class":468},"uuid",[455,2125,986],{"class":476},[455,2127,1054],{"class":476},[455,2129,1718],{"class":476},[455,2131,2132],{"class":552},"fb196843-938b-4a75-b1a5-b660892f9817",[455,2134,986],{"class":476},[455,2136,2137],{"class":476},"}]\n",[1482,2139,2141,2144,2147],{"className":2140},[1485],[73,2142,2143],{},"Ici vous pouvez voir une réponse de l'API get-weather d'un serveur MCP !",[73,2145,2146],{},"Commencez par créer l'échafaudage du serveur. Cela établit la fondation pour notre serveur MCP en utilisant FastMCP, qui simplifie la création et la gestion de serveurs.",[73,2148,2149],{},"FastMCP fournit une interface simplifiée pour définir les outils, ressources et prompts. En tirant parti de ses fonctionnalités intégrées, vous pouvez vous concentrer sur l'implémentation de la fonctionnalité sans vous soucier des détails de serveur de bas niveau.",[445,2151,2155],{"className":2152,"code":2153,"language":2154,"meta":450,"style":450},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","from typing import Any\nimport httpx\nfrom mcp.server.fastmcp import FastMCP\n\n# Initialiser le serveur FastMCP\nmcp = FastMCP(\"weather\")\n\n# Constantes\nOPENMETEO_API_BASE = \"https://api.open-meteo.com/v1\"\nUSER_AGENT = \"weather-app/1.0\"\n\n# Fonction d'aide pour les requêtes API\nasync def make_openmeteo_request(url: str) -> dict[str, Any] | None:\n \"\"\"Effectuer une requête vers l'API Open-Meteo avec gestion d'erreur appropriée.\"\"\"\n headers = {\n \"User-Agent\": USER_AGENT,\n \"Accept\": \"application/json\"\n }\n async with httpx.AsyncClient() as client:\n try:\n response = await client.get(url, headers=headers, timeout=30.0)\n response.raise_for_status()\n return response.json()\n except Exception:\n return None\n\nif __name__ == \"__main__\":\n mcp.run(transport='stdio')\n","python",[452,2156,2157,2162,2167,2172,2176,2181,2186,2190,2195,2200,2205,2209,2214,2219,2225,2231,2237,2243,2249,2255,2261,2267,2273,2279,2285,2291,2296,2302],{"__ignoreMap":450},[455,2158,2159],{"class":457,"line":458},[455,2160,2161],{},"from typing import Any\n",[455,2163,2164],{"class":457,"line":465},[455,2165,2166],{},"import httpx\n",[455,2168,2169],{"class":457,"line":601},[455,2170,2171],{},"from mcp.server.fastmcp import FastMCP\n",[455,2173,2174],{"class":457,"line":616},[455,2175,1661],{"emptyLinePlaceholder":1467},[455,2177,2178],{"class":457,"line":660},[455,2179,2180],{},"# Initialiser le serveur FastMCP\n",[455,2182,2183],{"class":457,"line":685},[455,2184,2185],{},"mcp = FastMCP(\"weather\")\n",[455,2187,2188],{"class":457,"line":691},[455,2189,1661],{"emptyLinePlaceholder":1467},[455,2191,2192],{"class":457,"line":699},[455,2193,2194],{},"# Constantes\n",[455,2196,2197],{"class":457,"line":721},[455,2198,2199],{},"OPENMETEO_API_BASE = \"https://api.open-meteo.com/v1\"\n",[455,2201,2202],{"class":457,"line":763},[455,2203,2204],{},"USER_AGENT = \"weather-app/1.0\"\n",[455,2206,2207],{"class":457,"line":773},[455,2208,1661],{"emptyLinePlaceholder":1467},[455,2210,2211],{"class":457,"line":1704},[455,2212,2213],{},"# Fonction d'aide pour les requêtes API\n",[455,2215,2216],{"class":457,"line":1710},[455,2217,2218],{},"async def make_openmeteo_request(url: str) -> dict[str, Any] | None:\n",[455,2220,2222],{"class":457,"line":2221},14,[455,2223,2224],{}," \"\"\"Effectuer une requête vers l'API Open-Meteo avec gestion d'erreur appropriée.\"\"\"\n",[455,2226,2228],{"class":457,"line":2227},15,[455,2229,2230],{}," headers = {\n",[455,2232,2234],{"class":457,"line":2233},16,[455,2235,2236],{}," \"User-Agent\": USER_AGENT,\n",[455,2238,2240],{"class":457,"line":2239},17,[455,2241,2242],{}," \"Accept\": \"application/json\"\n",[455,2244,2246],{"class":457,"line":2245},18,[455,2247,2248],{}," }\n",[455,2250,2252],{"class":457,"line":2251},19,[455,2253,2254],{}," async with httpx.AsyncClient() as client:\n",[455,2256,2258],{"class":457,"line":2257},20,[455,2259,2260],{}," try:\n",[455,2262,2264],{"class":457,"line":2263},21,[455,2265,2266],{}," response = await client.get(url, headers=headers, timeout=30.0)\n",[455,2268,2270],{"class":457,"line":2269},22,[455,2271,2272],{}," response.raise_for_status()\n",[455,2274,2276],{"class":457,"line":2275},23,[455,2277,2278],{}," return response.json()\n",[455,2280,2282],{"class":457,"line":2281},24,[455,2283,2284],{}," except Exception:\n",[455,2286,2288],{"class":457,"line":2287},25,[455,2289,2290],{}," return None\n",[455,2292,2294],{"class":457,"line":2293},26,[455,2295,1661],{"emptyLinePlaceholder":1467},[455,2297,2299],{"class":457,"line":2298},27,[455,2300,2301],{},"if __name__ == \"__main__\":\n",[455,2303,2305],{"class":457,"line":2304},28,[455,2306,2307],{}," mcp.run(transport='stdio')\n",[1482,2309,2311,2317],{"className":2310},[1492,1493,1494],[83,2312,2314],{"id":2313},"création-des-outils-météorologiques",[114,2315,2316],{},"Création des Outils Météorologiques",[73,2318,2319],{},[1504,2320,2321],{"href":1506},[114,2322,1509],{},[1482,2324,2326],{"className":2325},[1485],[73,2327,2328],{},"Les outils sont le cœur des serveurs MCP. Ils exposent des fonctionnalités exécutables que les modèles de langage peuvent invoquer. Notre outil météorologique récupérera les conditions actuelles et les prévisions basées sur les coordonnées géographiques.",[445,2330,2332],{"className":2152,"code":2331,"language":2154,"meta":450,"style":450},"@mcp.tool()\nasync def get_current_weather(latitude: float, longitude: float) -> str:\n \"\"\"Obtenir la météo actuelle pour un emplacement.\n\n Args:\n latitude: Latitude de l'emplacement\n longitude: Longitude de l'emplacement\n \"\"\"\n \n url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}¤t=temperature_2m,is_day,showers,cloud_cover,wind_speed_10m,wind_direction_10m,pressure_msl,snowfall,precipitation,relative_humidity_2m,apparent_temperature,rain,weather_code,surface_pressure,wind_gusts_10m\"\n \n data = await make_openmeteo_request(url)\n\n if not data:\n return \"Impossible de récupérer les données météorologiques actuelles pour cet emplacement.\"\n\n return data\n\n@mcp.tool()\nasync def get_forecast(latitude: float, longitude: float, days: int = 7) -> str:\n \"\"\"Obtenir les prévisions météorologiques pour un emplacement.\n\n Args:\n latitude: Latitude de l'emplacement\n longitude: Longitude de l'emplacement \n days: Nombre de jours à prévoir (1-16)\n \"\"\"\n \n url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max,weather_code&forecast_days={days}\"\n \n data = await make_openmeteo_request(url)\n \n if not data:\n return \"Impossible de récupérer les données de prévision pour cet emplacement.\"\n \n return data\n",[452,2333,2334,2339,2344,2349,2353,2358,2363,2368,2373,2378,2383,2387,2392,2396,2401,2406,2410,2415,2419,2423,2428,2433,2437,2441,2445,2450,2455,2459,2463,2469,2474,2479,2484,2489,2495,2500],{"__ignoreMap":450},[455,2335,2336],{"class":457,"line":458},[455,2337,2338],{},"@mcp.tool()\n",[455,2340,2341],{"class":457,"line":465},[455,2342,2343],{},"async def get_current_weather(latitude: float, longitude: float) -> str:\n",[455,2345,2346],{"class":457,"line":601},[455,2347,2348],{}," \"\"\"Obtenir la météo actuelle pour un emplacement.\n",[455,2350,2351],{"class":457,"line":616},[455,2352,1661],{"emptyLinePlaceholder":1467},[455,2354,2355],{"class":457,"line":660},[455,2356,2357],{}," Args:\n",[455,2359,2360],{"class":457,"line":685},[455,2361,2362],{}," latitude: Latitude de l'emplacement\n",[455,2364,2365],{"class":457,"line":691},[455,2366,2367],{}," longitude: Longitude de l'emplacement\n",[455,2369,2370],{"class":457,"line":699},[455,2371,2372],{}," \"\"\"\n",[455,2374,2375],{"class":457,"line":721},[455,2376,2377],{}," \n",[455,2379,2380],{"class":457,"line":763},[455,2381,2382],{}," url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}¤t=temperature_2m,is_day,showers,cloud_cover,wind_speed_10m,wind_direction_10m,pressure_msl,snowfall,precipitation,relative_humidity_2m,apparent_temperature,rain,weather_code,surface_pressure,wind_gusts_10m\"\n",[455,2384,2385],{"class":457,"line":773},[455,2386,2377],{},[455,2388,2389],{"class":457,"line":1704},[455,2390,2391],{}," data = await make_openmeteo_request(url)\n",[455,2393,2394],{"class":457,"line":1710},[455,2395,1661],{"emptyLinePlaceholder":1467},[455,2397,2398],{"class":457,"line":2221},[455,2399,2400],{}," if not data:\n",[455,2402,2403],{"class":457,"line":2227},[455,2404,2405],{}," return \"Impossible de récupérer les données météorologiques actuelles pour cet emplacement.\"\n",[455,2407,2408],{"class":457,"line":2233},[455,2409,1661],{"emptyLinePlaceholder":1467},[455,2411,2412],{"class":457,"line":2239},[455,2413,2414],{}," return data\n",[455,2416,2417],{"class":457,"line":2245},[455,2418,1661],{"emptyLinePlaceholder":1467},[455,2420,2421],{"class":457,"line":2251},[455,2422,2338],{},[455,2424,2425],{"class":457,"line":2257},[455,2426,2427],{},"async def get_forecast(latitude: float, longitude: float, days: int = 7) -> str:\n",[455,2429,2430],{"class":457,"line":2263},[455,2431,2432],{}," \"\"\"Obtenir les prévisions météorologiques pour un emplacement.\n",[455,2434,2435],{"class":457,"line":2269},[455,2436,1661],{"emptyLinePlaceholder":1467},[455,2438,2439],{"class":457,"line":2275},[455,2440,2357],{},[455,2442,2443],{"class":457,"line":2281},[455,2444,2362],{},[455,2446,2447],{"class":457,"line":2287},[455,2448,2449],{}," longitude: Longitude de l'emplacement \n",[455,2451,2452],{"class":457,"line":2293},[455,2453,2454],{}," days: Nombre de jours à prévoir (1-16)\n",[455,2456,2457],{"class":457,"line":2298},[455,2458,2372],{},[455,2460,2461],{"class":457,"line":2304},[455,2462,2377],{},[455,2464,2466],{"class":457,"line":2465},29,[455,2467,2468],{}," url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max,weather_code&forecast_days={days}\"\n",[455,2470,2472],{"class":457,"line":2471},30,[455,2473,2377],{},[455,2475,2477],{"class":457,"line":2476},31,[455,2478,2391],{},[455,2480,2482],{"class":457,"line":2481},32,[455,2483,2377],{},[455,2485,2487],{"class":457,"line":2486},33,[455,2488,2400],{},[455,2490,2492],{"class":457,"line":2491},34,[455,2493,2494],{}," return \"Impossible de récupérer les données de prévision pour cet emplacement.\"\n",[455,2496,2498],{"class":457,"line":2497},35,[455,2499,2377],{},[455,2501,2503],{"class":457,"line":2502},36,[455,2504,2414],{},[1482,2506,2508,2514],{"className":2507},[1492,1493,1494],[83,2509,2511],{"id":2510},"test-de-votre-serveur-mcp",[114,2512,2513],{},"Test de Votre Serveur MCP",[73,2515,2516],{},[1504,2517,2518],{"href":1506},[114,2519,1509],{},[1482,2521,2523,2532],{"className":2522},[1513,1514,1515,1516,1517,1518],[1482,2524,2525],{},[73,2526,2527],{},[1524,2528],{"alt":2529,"className":2530,"height":1529,"src":2531,"style":1531},"Interface MCP Inspector",[1528],"/blog/mcp/mcp-inspector.png",[1482,2533,2535],{"className":2534},[1485],[73,2536,2537],{},"Le MCP Inspector fournit une interface web pour tester votre serveur avant de l'intégrer avec les modèles de langage. Cet outil est inestimable pour le débogage et la validation.",[445,2539,2541],{"className":1632,"code":2540,"language":1634,"meta":450,"style":450},"# Démarrer le serveur MCP en mode développement\nmcp dev server.py\n\n# Ouvrir le navigateur sur http://localhost:5173\n# Se connecter au serveur\n# Naviguer vers l'onglet Outils\n# Tester get_current_weather avec des coordonnées\n# Exemple : latitude=63.4463991, longitude=10.8127596\n",[452,2542,2543,2548,2559,2563,2568,2573,2578,2583],{"__ignoreMap":450},[455,2544,2545],{"class":457,"line":458},[455,2546,2547],{"class":461},"# Démarrer le serveur MCP en mode développement\n",[455,2549,2550,2553,2556],{"class":457,"line":465},[455,2551,2552],{"class":710},"mcp",[455,2554,2555],{"class":552}," dev",[455,2557,2558],{"class":552}," server.py\n",[455,2560,2561],{"class":457,"line":601},[455,2562,1661],{"emptyLinePlaceholder":1467},[455,2564,2565],{"class":457,"line":616},[455,2566,2567],{"class":461},"# Ouvrir le navigateur sur http://localhost:5173\n",[455,2569,2570],{"class":457,"line":660},[455,2571,2572],{"class":461},"# Se connecter au serveur\n",[455,2574,2575],{"class":457,"line":685},[455,2576,2577],{"class":461},"# Naviguer vers l'onglet Outils\n",[455,2579,2580],{"class":457,"line":691},[455,2581,2582],{"class":461},"# Tester get_current_weather avec des coordonnées\n",[455,2584,2585],{"class":457,"line":699},[455,2586,2587],{"class":461},"# Exemple : latitude=63.4463991, longitude=10.8127596\n",[1482,2589,2591,2597],{"className":2590},[1492,1493,1494],[83,2592,2594],{"id":2593},"principes-de-conception-clés",[114,2595,2596],{},"Principes de Conception Clés",[73,2598,2599],{},[1504,2600,2601],{"href":1506},[114,2602,1509],{},[1482,2604,2606,2609,2614],{"className":2605},[1485],[73,2607,2608],{},"Lors de la construction de serveurs MCP, résistez à la tentation de formater les données retournées dans vos outils. Au lieu de cela, retournez les données brutes et laissez le modèle de langage les traiter et les formater de manière appropriée. Cette approche tire parti des capacités de langage naturel du LLM tout en maintenant l'intégrité des données.",[73,2610,2611],{},[114,2612,2613],{},"Meilleures Pratiques :",[135,2615,2616,2619,2622,2625,2628],{},[138,2617,2618],{},"Retourner des jeux de données complets plutôt que des résumés filtrés",[138,2620,2621],{},"Utiliser des noms d'outils descriptifs et de la documentation",[138,2623,2624],{},"Implémenter une gestion d'erreur appropriée pour les échecs d'API",[138,2626,2627],{},"Garder les outils focalisés sur des responsabilités uniques",[138,2629,2630],{},"Tirer parti d'async/await pour de meilleures performances",[1482,2632,2634,2640],{"className":2633},[1492,1493,1494],[83,2635,2637],{"id":2636},"extension-de-votre-serveur",[114,2638,2639],{},"Extension de Votre Serveur",[73,2641,2642],{},[1504,2643,2644],{"href":1506},[114,2645,1509],{},[1482,2647,2649,2652,2658,2664,2670],{"className":2648},[1485],[73,2650,2651],{},"Une fois que vous avez un serveur météorologique de base fonctionnel, considérez l'ajout de ces améliorations :",[73,2653,2654,2657],{},[114,2655,2656],{},"Services de Localisation :"," Intégrer l'API de Géocodage Open-Meteo pour convertir les noms de villes en coordonnées, réduisant la dépendance au LLM pour la génération de coordonnées.",[73,2659,2660,2663],{},[114,2661,2662],{},"Données Historiques :"," Ajouter des outils pour accéder aux modèles météorologiques historiques et aux données climatiques.",[73,2665,2666,2669],{},[114,2667,2668],{},"Alertes et Avertissements :"," Implémenter la surveillance d'alertes météorologiques pour les conditions météorologiques sévères.",[73,2671,2672,2675],{},[114,2673,2674],{},"Emplacements Multiples :"," Supporter les requêtes par lot pour comparer la météo à travers plusieurs emplacements.",[445,2677,2679],{"className":2152,"code":2678,"language":2154,"meta":450,"style":450},"@mcp.tool()\nasync def get_location(city: str, country: str = \"\") -> str:\n \"\"\"Obtenir les coordonnées d'une ville en utilisant le géocodage.\n \n Args:\n city: Nom de la ville\n country: Nom du pays optionnel pour désambiguïsation\n \"\"\"\n \n query = f\"{city},{country}\" if country else city\n url = f\"https://geocoding-api.open-meteo.com/v1/search?name={query}&count=1&language=fr&format=json\"\n \n data = await make_openmeteo_request(url)\n \n if not data or not data.get('results'):\n return \"Emplacement non trouvé.\"\n \n return data['results'][0]\n",[452,2680,2681,2685,2690,2695,2699,2703,2708,2713,2717,2721,2726,2731,2735,2739,2743,2748,2753,2757],{"__ignoreMap":450},[455,2682,2683],{"class":457,"line":458},[455,2684,2338],{},[455,2686,2687],{"class":457,"line":465},[455,2688,2689],{},"async def get_location(city: str, country: str = \"\") -> str:\n",[455,2691,2692],{"class":457,"line":601},[455,2693,2694],{}," \"\"\"Obtenir les coordonnées d'une ville en utilisant le géocodage.\n",[455,2696,2697],{"class":457,"line":616},[455,2698,2377],{},[455,2700,2701],{"class":457,"line":660},[455,2702,2357],{},[455,2704,2705],{"class":457,"line":685},[455,2706,2707],{}," city: Nom de la ville\n",[455,2709,2710],{"class":457,"line":691},[455,2711,2712],{}," country: Nom du pays optionnel pour désambiguïsation\n",[455,2714,2715],{"class":457,"line":699},[455,2716,2372],{},[455,2718,2719],{"class":457,"line":721},[455,2720,2377],{},[455,2722,2723],{"class":457,"line":763},[455,2724,2725],{}," query = f\"{city},{country}\" if country else city\n",[455,2727,2728],{"class":457,"line":773},[455,2729,2730],{}," url = f\"https://geocoding-api.open-meteo.com/v1/search?name={query}&count=1&language=fr&format=json\"\n",[455,2732,2733],{"class":457,"line":1704},[455,2734,2377],{},[455,2736,2737],{"class":457,"line":1710},[455,2738,2391],{},[455,2740,2741],{"class":457,"line":2221},[455,2742,2377],{},[455,2744,2745],{"class":457,"line":2227},[455,2746,2747],{}," if not data or not data.get('results'):\n",[455,2749,2750],{"class":457,"line":2233},[455,2751,2752],{}," return \"Emplacement non trouvé.\"\n",[455,2754,2755],{"class":457,"line":2239},[455,2756,2377],{},[455,2758,2759],{"class":457,"line":2245},[455,2760,2761],{}," return data['results'][0]\n",[1482,2763,2765,2771],{"className":2764},[1492,1493,1494],[83,2766,2768],{"id":2767},"intégration-avec-les-modèles-de-langage",[114,2769,2770],{},"Intégration avec les Modèles de Langage",[73,2772,2773],{},[1504,2774,2775],{"href":1506},[114,2776,1509],{},[1482,2778,2780],{"className":2779},[1485],[73,2781,2782],{},"Votre serveur MCP peut s'intégrer avec divers modèles de langage incluant Claude Desktop, GPT-4 à travers des clients compatibles, et d'autres applications compatibles MCP. Le serveur communique à travers l'entrée/sortie standard (stdio), le rendant universellement compatible.",[73,2784,2785,2786,2789],{},"Pour utiliser avec Claude Desktop, ajoutez votre configuration de serveur au fichier de paramètres MCP, typiquement situé à ",[452,2787,2788],{},"~/Library/Application Support/Claude/claude_desktop_config.json"," sur macOS.",[445,2791,2793],{"className":1749,"code":2792,"language":1108,"meta":450,"style":450},"{\n \"mcpServers\": {\n \"weather\": {\n \"command\": \"uv\",\n \"args\": [\"run\", \"python\", \"server.py\"],\n \"cwd\": \"/chemin/vers/votre/mcp-server-weather\"\n }\n }\n}\n",[452,2794,2795,2800,2814,2828,2848,2888,2907,2911,2916],{"__ignoreMap":450},[455,2796,2797],{"class":457,"line":458},[455,2798,2799],{"class":476},"{\n",[455,2801,2802,2805,2808,2810,2812],{"class":457,"line":465},[455,2803,2804],{"class":476}," \"",[455,2806,2807],{"class":468},"mcpServers",[455,2809,986],{"class":476},[455,2811,1054],{"class":476},[455,2813,566],{"class":476},[455,2815,2816,2819,2822,2824,2826],{"class":457,"line":601},[455,2817,2818],{"class":476}," \"",[455,2820,2821],{"class":710},"weather",[455,2823,986],{"class":476},[455,2825,1054],{"class":476},[455,2827,566],{"class":476},[455,2829,2830,2833,2836,2838,2840,2842,2844,2846],{"class":457,"line":616},[455,2831,2832],{"class":476}," \"",[455,2834,2835],{"class":678},"command",[455,2837,986],{"class":476},[455,2839,1054],{"class":476},[455,2841,1718],{"class":476},[455,2843,1628],{"class":552},[455,2845,986],{"class":476},[455,2847,1153],{"class":476},[455,2849,2850,2852,2855,2857,2859,2861,2863,2866,2868,2870,2872,2874,2876,2878,2880,2883,2885],{"class":457,"line":660},[455,2851,2832],{"class":476},[455,2853,2854],{"class":678},"args",[455,2856,986],{"class":476},[455,2858,1054],{"class":476},[455,2860,487],{"class":476},[455,2862,986],{"class":476},[455,2864,2865],{"class":552},"run",[455,2867,986],{"class":476},[455,2869,558],{"class":476},[455,2871,1718],{"class":476},[455,2873,2154],{"class":552},[455,2875,986],{"class":476},[455,2877,558],{"class":476},[455,2879,1718],{"class":476},[455,2881,2882],{"class":552},"server.py",[455,2884,986],{"class":476},[455,2886,2887],{"class":476},"],\n",[455,2889,2890,2892,2895,2897,2899,2901,2904],{"class":457,"line":685},[455,2891,2832],{"class":476},[455,2893,2894],{"class":678},"cwd",[455,2896,986],{"class":476},[455,2898,1054],{"class":476},[455,2900,1718],{"class":476},[455,2902,2903],{"class":552},"/chemin/vers/votre/mcp-server-weather",[455,2905,2906],{"class":476},"\"\n",[455,2908,2909],{"class":457,"line":691},[455,2910,2248],{"class":476},[455,2912,2913],{"class":457,"line":699},[455,2914,2915],{"class":476}," }\n",[455,2917,2918],{"class":457,"line":721},[455,2919,876],{"class":476},[1482,2921,2923,2929],{"className":2922},[1492,1493,1494],[83,2924,2926],{"id":2925},"conclusion",[114,2927,2928],{},"Conclusion",[73,2930,2931],{},[1504,2932,2933],{"href":1506},[114,2934,1509],{},[1482,2936,2938,2941],{"className":2937},[1485],[73,2939,2940],{},"La construction de serveurs MCP ouvre de nouvelles possibilités pour l'intégration de l'IA avec les sources de données du monde réel. Ce serveur météorologique démontre les concepts fondamentaux qui s'appliquent à toute intégration d'API externe ou de service. Le Model Context Protocol représente un pas significatif vers des systèmes d'IA plus capables et connectés.",[73,2942,2943],{},"Le code source complet pour ce tutoriel est disponible dans le dépôt des fichiers d'exercice. Expérimentez avec différentes APIs, ajoutez de nouveaux outils, et explorez les possibilités infinies du développement de serveurs MCP.",[1482,2945,2948],{"className":2946},[1492,2947,1494],"justify-end",[73,2949,2950],{},[1504,2951,2953],{"href":57,"rel":2952},[1536],"#OuverteAuxCollaborationsFreelance",[1482,2955,2961],{"className":2956},[2957,2958,2959,2960],"text-md","text-center","mt-10","font-bold",[73,2962,2963],{},[1504,2964,2965],{"href":1506},[114,2966,1509],{},[1437,2968,2969],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":450,"searchDepth":465,"depth":465,"links":2971},[2972,2973,2974,2975,2976,2977,2978,2979,2980,2981],{"id":1497,"depth":465,"text":1500},{"id":1572,"depth":465,"text":1575},{"id":1610,"depth":465,"text":1613},{"id":1732,"depth":465,"text":1735},{"id":2313,"depth":465,"text":2316},{"id":2510,"depth":465,"text":2513},{"id":2593,"depth":465,"text":2596},{"id":2636,"depth":465,"text":2639},{"id":2767,"depth":465,"text":2770},{"id":2925,"depth":465,"text":2928},"2025-06-01","Apprenez à créer un serveur Model Context Protocol (MCP) en utilisant Python et l'API Open-Meteo pour fournir des données météorologiques aux modèles de langage comme GPT-4 et Claude.",{"src":2985},"/blog/mcp/mcp-cover.png",{},{"title":23,"description":2983},"F458zeQnEhe_o8Ydhx3dx9iGkSe4WoRy7kzhh_eDBGE",{"id":2990,"title":47,"authors":2991,"badge":2996,"body":2998,"date":1461,"description":3619,"extension":1463,"image":3620,"meta":3622,"navigation":1467,"path":48,"seo":3623,"stem":49,"__hash__":3624},"posts_fr/fr/blog/strategy.md",[2992],{"name":55,"description":2993,"to":57,"avatar":2994},"Développement Full-Stack et Architecture",{"src":2995},"https://media.licdn.com/dms/image/v2/D4D03AQFpMfqwhaamwA/profile-displayphoto-shrink_800_800/B4DZbqQSLWH8Ac-/0/1747686860119?e=1753315200&v=beta&t=U9dsnD5qU8FSzW2dKEQXnkRdPl_w1visxvHob18_etc",{"label":2997},"Stratégie",{"type":65,"value":2999,"toc":3605},[3000,3004,3007,3010,3021,3023,3027,3030,3034,3048,3165,3167,3171,3178,3198,3201,3212,3280,3282,3286,3293,3316,3320,3325,3344,3348,3365,3369,3383,3385,3389,3393,3396,3571,3574,3585,3587,3591,3594,3597,3602],[83,3001,3003],{"id":3002},"paysage-de-complexité","Paysage de complexité",[73,3005,3006],{},"La transformation numérique n'est plus un choix, c'est une nécessité. Dans un paysage technologique en constante évolution, aligner votre stratégie numérique sur les normes mondiales peut déterminer votre avantage concurrentiel.",[73,3008,3009],{},"Cet article explore :",[135,3011,3012,3015,3018],{},[138,3013,3014],{},"✅ Les principes fondamentaux de la consultation IT",[138,3016,3017],{},"✅ La planification stratégique alignée sur les normes mondiales",[138,3019,3020],{},"✅ ONE-FRONT comme cadre de collaboration entre les affaires, les développeurs et les utilisateurs",[198,3022],{},[83,3024,3026],{"id":3025},"quest-ce-que-la-consultation-it","Qu'est-ce que la consultation IT ?",[73,3028,3029],{},"La consultation IT consiste à conseiller les organisations sur la meilleure façon d'utiliser la technologie de l'information pour atteindre leurs objectifs commerciaux. Il ne s'agit pas seulement de donner des conseils, mais de créer de la valeur stratégique et des résultats mesurables.",[124,3031,3033],{"id":3032},"activités-principales","Activités principales :",[135,3035,3036,3039,3042,3045],{},[138,3037,3038],{},"Évaluer l'infrastructure actuelle et la maturité numérique",[138,3040,3041],{},"Identifier les lacunes et les opportunités d'optimisation",[138,3043,3044],{},"Définir une feuille de route pour la transformation numérique",[138,3046,3047],{},"Mettre en œuvre des changements technologiques",[445,3049,3054],{"className":3050,"code":3051,"filename":3052,"language":3053,"meta":450,"style":450},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const DigitalStrategy = {\n phases: ['Évaluation', 'Stratégie', 'Mise en œuvre', 'Évaluation'],\n tools: ['Liste de vérification d'audit', 'Tableaux de bord KPI', 'Plans de migration vers le cloud']\n};\n","roadmap.ts","ts",[452,3055,3056,3071,3117,3160],{"__ignoreMap":450},[455,3057,3058,3061,3064,3067,3069],{"class":457,"line":458},[455,3059,3060],{"class":729},"export",[455,3062,3063],{"class":468}," const",[455,3065,3066],{"class":472}," DigitalStrategy ",[455,3068,477],{"class":476},[455,3070,566],{"class":476},[455,3072,3073,3076,3078,3080,3082,3085,3087,3089,3091,3093,3095,3097,3099,3102,3104,3106,3108,3110,3112,3115],{"class":457,"line":465},[455,3074,3075],{"class":574}," phases",[455,3077,1054],{"class":476},[455,3079,487],{"class":472},[455,3081,549],{"class":476},[455,3083,3084],{"class":552},"Évaluation",[455,3086,549],{"class":476},[455,3088,558],{"class":476},[455,3090,1057],{"class":476},[455,3092,2997],{"class":552},[455,3094,549],{"class":476},[455,3096,558],{"class":476},[455,3098,1057],{"class":476},[455,3100,3101],{"class":552},"Mise en œuvre",[455,3103,549],{"class":476},[455,3105,558],{"class":476},[455,3107,1057],{"class":476},[455,3109,3084],{"class":552},[455,3111,549],{"class":476},[455,3113,3114],{"class":472},"]",[455,3116,1153],{"class":476},[455,3118,3119,3122,3124,3126,3128,3131,3133,3136,3138,3141,3143,3146,3148,3150,3152,3155,3157],{"class":457,"line":601},[455,3120,3121],{"class":574}," tools",[455,3123,1054],{"class":476},[455,3125,487],{"class":472},[455,3127,549],{"class":476},[455,3129,3130],{"class":552},"Liste de vérification d",[455,3132,549],{"class":476},[455,3134,3135],{"class":472},"audit",[455,3137,549],{"class":476},[455,3139,3140],{"class":552},", ",[455,3142,549],{"class":476},[455,3144,3145],{"class":472},"Tableaux de bord KPI",[455,3147,549],{"class":476},[455,3149,3140],{"class":552},[455,3151,549],{"class":476},[455,3153,3154],{"class":472},"Plans de migration vers le cloud",[455,3156,549],{"class":476},[455,3158,3159],{"class":552},"]\n",[455,3161,3162],{"class":457,"line":616},[455,3163,3164],{"class":472},"};\n",[198,3166],{},[83,3168,3170],{"id":3169},"alignement-avec-les-normes-mondiales","Alignement avec les normes mondiales",[73,3172,3173,3174,3177],{},"La consultation professionnelle aligne votre organisation sur des ",[114,3175,3176],{},"normes et des cadres internationaux",", tels que :",[135,3179,3180,3186,3192],{},[138,3181,3182,3185],{},[114,3183,3184],{},"ISO/IEC 27001"," pour la sécurité de l'information",[138,3187,3188,3191],{},[114,3189,3190],{},"ITIL"," pour la gestion des services IT",[138,3193,3194,3197],{},[114,3195,3196],{},"COBIT"," pour la gouvernance",[73,3199,3200],{},"Ces normes garantissent que vos systèmes sont :",[135,3202,3203,3206,3209],{},[138,3204,3205],{},"🔐 Sécurisés",[138,3207,3208],{},"📊 Mesurables",[138,3210,3211],{},"📈 Scalable",[445,3213,3216],{"className":1749,"code":3214,"filename":3215,"language":1108,"meta":450,"style":450},"{\n \"serviceValueSystem\": true,\n \"components\": [\"Gouvernance\", \"Gestion des services\", \"Amélioration continue\"]\n}\n","itil-basics.json",[452,3217,3218,3222,3236,3276],{"__ignoreMap":450},[455,3219,3220],{"class":457,"line":458},[455,3221,2799],{"class":476},[455,3223,3224,3226,3229,3231,3233],{"class":457,"line":465},[455,3225,2804],{"class":476},[455,3227,3228],{"class":468},"serviceValueSystem",[455,3230,986],{"class":476},[455,3232,1054],{"class":476},[455,3234,3235],{"class":476}," true,\n",[455,3237,3238,3240,3243,3245,3247,3249,3251,3254,3256,3258,3260,3263,3265,3267,3269,3272,3274],{"class":457,"line":601},[455,3239,2804],{"class":476},[455,3241,3242],{"class":468},"components",[455,3244,986],{"class":476},[455,3246,1054],{"class":476},[455,3248,487],{"class":476},[455,3250,986],{"class":476},[455,3252,3253],{"class":552},"Gouvernance",[455,3255,986],{"class":476},[455,3257,558],{"class":476},[455,3259,1718],{"class":476},[455,3261,3262],{"class":552},"Gestion des services",[455,3264,986],{"class":476},[455,3266,558],{"class":476},[455,3268,1718],{"class":476},[455,3270,3271],{"class":552},"Amélioration continue",[455,3273,986],{"class":476},[455,3275,3159],{"class":476},[455,3277,3278],{"class":457,"line":616},[455,3279,876],{"class":476},[198,3281],{},[83,3283,3285],{"id":3284},"one-front-un-cadre-holistique","ONE-FRONT : Un cadre holistique",[73,3287,3288,3289,3292],{},"ONE-FRONT n'est pas seulement un outil, c'est une ",[114,3290,3291],{},"stratégie collaborative"," où la technologie est alignée autour de trois axes vitaux :",[135,3294,3295,3302,3309],{},[138,3296,3297,3298,3301],{},"🏢 ",[114,3299,3300],{},"Objectifs commerciaux"," : Nous veillons à ce que la technologie soit conçue pour générer de la valeur réelle",[138,3303,3304,3305,3308],{},"👩‍💻 ",[114,3306,3307],{},"Développeurs"," : Nous donnons aux équipes des architectures modulaires et scalables",[138,3310,3311,3312,3315],{},"🙋 ",[114,3313,3314],{},"Utilisateurs"," : Nous centrons le développement autour des retours et des besoins continus",[124,3317,3319],{"id":3318},"alignement-basé-sur-les-rôles","Alignement basé sur les rôles",[73,3321,3322],{},[114,3323,3324],{},"Affaires",[3326,3327,3330],"card",{"className":3328},[3329],"border-none",[135,3331,3332,3338,3341],{},[138,3333,3334,3335],{},"✅ Comprendre l'",[114,3336,3337],{},"espace du problème",[138,3339,3340],{},"✅ Traduire les besoins en objectifs mesurables",[138,3342,3343],{},"✅ Collaborer pour façonner la feuille de route numérique",[73,3345,3346],{},[114,3347,3307],{},[3326,3349,3351],{"className":3350},[3329],[135,3352,3353,3359,3362],{},[138,3354,3355,3356],{},"✅ Travailler dans des ",[114,3357,3358],{},"contextes délimités",[138,3360,3361],{},"✅ Fournir un logiciel modulaire et testable",[138,3363,3364],{},"✅ Adopter des architectures propres comme DDD et BFF",[73,3366,3367],{},[114,3368,3314],{},[3326,3370,3372],{"className":3371},[3329],[135,3373,3374,3377,3380],{},[138,3375,3376],{},"✅ Fournir des retours continus",[138,3378,3379],{},"✅ Valider les itérations",[138,3381,3382],{},"✅ Créer une culture de co-création",[198,3384],{},[83,3386,3388],{"id":3387},"la-stratégie-en-pratique","La stratégie en pratique",[124,3390,3392],{"id":3391},"exemple-conception-dirigée-par-le-domaine-ddd","Exemple : Conception dirigée par le domaine (DDD)",[73,3394,3395],{},"En alignant l'architecture du logiciel sur la logique métier, DDD améliore la scalabilité et la clarté.",[445,3397,3400],{"className":3050,"code":3398,"filename":3399,"language":3053,"meta":450,"style":450},"export class Product {\n constructor(public id: string, public name: string, private price: number) {}\n\n applyDiscount(rate: number) {\n if (rate \u003C 0 || rate > 1) throw new Error('Taux invalide');\n return this.price * (1 - rate);\n }\n}\n","Product.ts",[452,3401,3402,3414,3462,3466,3484,3536,3563,3567],{"__ignoreMap":450},[455,3403,3404,3406,3409,3412],{"class":457,"line":458},[455,3405,3060],{"class":729},[455,3407,3408],{"class":468}," class",[455,3410,3411],{"class":710}," Product",[455,3413,566],{"class":476},[455,3415,3416,3419,3421,3424,3427,3429,3432,3434,3437,3440,3442,3444,3446,3449,3452,3454,3457,3459],{"class":457,"line":465},[455,3417,3418],{"class":468}," constructor",[455,3420,546],{"class":476},[455,3422,3423],{"class":468},"public",[455,3425,3426],{"class":480}," id",[455,3428,1054],{"class":476},[455,3430,3431],{"class":710}," string",[455,3433,558],{"class":476},[455,3435,3436],{"class":468}," public",[455,3438,3439],{"class":480}," name",[455,3441,1054],{"class":476},[455,3443,3431],{"class":710},[455,3445,558],{"class":476},[455,3447,3448],{"class":468}," private",[455,3450,3451],{"class":480}," price",[455,3453,1054],{"class":476},[455,3455,3456],{"class":710}," number",[455,3458,654],{"class":476},[455,3460,3461],{"class":476}," {}\n",[455,3463,3464],{"class":457,"line":601},[455,3465,1661],{"emptyLinePlaceholder":1467},[455,3467,3468,3471,3473,3476,3478,3480,3482],{"class":457,"line":616},[455,3469,3470],{"class":574}," applyDiscount",[455,3472,546],{"class":476},[455,3474,3475],{"class":480},"rate",[455,3477,1054],{"class":476},[455,3479,3456],{"class":710},[455,3481,654],{"class":476},[455,3483,566],{"class":476},[455,3485,3486,3489,3491,3493,3496,3499,3502,3505,3508,3511,3514,3517,3520,3523,3525,3527,3530,3532,3534],{"class":457,"line":660},[455,3487,3488],{"class":729}," if",[455,3490,638],{"class":574},[455,3492,3475],{"class":472},[455,3494,3495],{"class":476}," \u003C",[455,3497,3498],{"class":678}," 0",[455,3500,3501],{"class":476}," ||",[455,3503,3504],{"class":472}," rate",[455,3506,3507],{"class":476}," >",[455,3509,3510],{"class":678}," 1",[455,3512,3513],{"class":574},") ",[455,3515,3516],{"class":729},"throw",[455,3518,3519],{"class":476}," new",[455,3521,3522],{"class":493}," Error",[455,3524,546],{"class":574},[455,3526,549],{"class":476},[455,3528,3529],{"class":552},"Taux invalide",[455,3531,549],{"class":476},[455,3533,654],{"class":574},[455,3535,500],{"class":476},[455,3537,3538,3541,3544,3547,3549,3551,3554,3557,3559,3561],{"class":457,"line":685},[455,3539,3540],{"class":729}," return",[455,3542,3543],{"class":476}," this.",[455,3545,3546],{"class":472},"price",[455,3548,867],{"class":476},[455,3550,638],{"class":574},[455,3552,3553],{"class":678},"1",[455,3555,3556],{"class":476}," -",[455,3558,3504],{"class":472},[455,3560,654],{"class":574},[455,3562,500],{"class":476},[455,3564,3565],{"class":457,"line":691},[455,3566,2915],{"class":476},[455,3568,3569],{"class":457,"line":699},[455,3570,876],{"class":476},[73,3572,3573],{},"DDD, lorsqu'il est utilisé dans un cadre full-stack (Nuxt, Node.js, etc.), crée :",[135,3575,3576,3579,3582],{},[138,3577,3578],{},"🔄 Une communication claire entre les développeurs et les entreprises",[138,3580,3581],{},"🧩 Une meilleure maintenabilité",[138,3583,3584],{},"⚙️ Des décisions techniques alignées",[198,3586],{},[83,3588,3590],{"id":3589},"votre-prochaine-étape","Votre prochaine étape",[73,3592,3593],{},"Que vous soyez une startup ou une entreprise, la consultation stratégique IT peut remodeler votre manière de croître. Avec ONE-FRONT, vous ne construisez pas seulement des logiciels — vous créez de l'alignement.",[73,3595,3596],{},"👉 Laissez la technologie travailler pour les entreprises, les développeurs et les utilisateurs.",[73,3598,3599],{},[114,3600,3601],{},"Prêt à transformer ?",[1437,3603,3604],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":450,"searchDepth":465,"depth":465,"links":3606},[3607,3608,3611,3612,3615,3618],{"id":3002,"depth":465,"text":3003},{"id":3025,"depth":465,"text":3026,"children":3609},[3610],{"id":3032,"depth":601,"text":3033},{"id":3169,"depth":465,"text":3170},{"id":3284,"depth":465,"text":3285,"children":3613},[3614],{"id":3318,"depth":601,"text":3319},{"id":3387,"depth":465,"text":3388,"children":3616},[3617],{"id":3391,"depth":601,"text":3392},{"id":3589,"depth":465,"text":3590},"Orientation et planification stratégique pour la transformation numérique de votre entreprise, alignée sur les normes mondiales et propulsée par le cadre ONE-FRONT.",{"src":3621},"/blog/strategy/planing.png",{},{"title":47,"description":3619},"CWOFJ23zZ0g1l8FQU1yHHwPq7EYWUZECU137oD8x7Kk",1779118049995]