https://cheroliv.com/ JBake Bootstrap Template en-gb Fri, 25 Sep 2026 01:36:38 +0000 Fri, 25 Sep 2026 01:36:38 +0000 https://cheroliv.com/blog/2026/0126_hyperframes_asciidoc_video_post.html Sun, 31 May 2026 00:00:00 +0000 blog/2026/0126_hyperframes_asciidoc_video_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_trou_dans_le_pipeline_vidéo">Le Trou dans le Pipeline Vidéo</a></li> <li><a href="#_hyperframes_le_moteur">HyperFrames : Le Moteur</a></li> <li><a href="#_larchitecture_du_plugin">L’Architecture du Plugin</a> <ul class="sectlevel2"> <li><a href="#_le_pipeline_en_quatre_étapes">Le Pipeline en Quatre Étapes</a></li> <li><a href="#_le_dsl_asciidoc">Le DSL AsciiDoc</a></li> <li><a href="#_le_bridge_node_js">Le Bridge Node.js</a></li> </ul> </li> <li><a href="#_deux_plugins_vidéo_deux_usages">Deux Plugins Vidéo, Deux Usages</a></li> <li><a href="#_les_6_epics_de_la_roadmap">Les 6 EPICs de la Roadmap</a></li> <li><a href="#_pourquoi_ça_marche">Pourquoi Ça Marche</a></li> <li><a href="#_conclusion_le_chaînon_manquant">Conclusion : Le Chaînon Manquant</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 8 minutes</div> <p>Il y a deux semaines, j’ai lancé <code>capsule-gradle</code> — un plugin qui transforme un deck reveal.js en capsule vidéo WebM avec TTS. Aujourd’hui, j’ajoute un nouveau plugin : <code>hyperframes-gradle</code>. Il fait quelque chose que capsule-gradle ne fait pas : transformer l’AsciiDoc <strong>directement</strong> en vidéo MP4, sans passer par reveal.js.</p> </div> <div class="paragraph"> <p>Voici pourquoi ce plugin existe, comment il s’articule avec l’existant, et ce que le moteur HyperFrames de HeyGen apporte au pipeline de production de contenu.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_trou_dans_le_pipeline_vidéo">Le Trou dans le Pipeline Vidéo</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mon pipeline documentaire produit deux types de vidéos :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Capsule de révision</strong> (capsule-gradle) — un deck reveal.js capturé en WebM avec</p> </li> </ol> </div> <div class="paragraph"> <p>narration TTS. Parfait pour revoir un module.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Slides d’animation</strong> (slider-gradle) — un deck reveal.js HTML interactif pour</p> </li> </ol> </div> <div class="paragraph"> <p>le formateur en présentiel.</p> </div> <div class="paragraph"> <p>Mais il manque un troisième format : la <strong>vidéo standalone</strong>.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5555%;"> <col style="width: 5.5565%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Use case</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Solution actuelle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Manque</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Slides formateur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">slider-gradle → reveal.js</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Capsule révision</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">capsule-gradle → WebM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Vidéo teasing</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Aucune</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Démo technique animée</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Aucune</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Doc-to-video</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Aucune</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le premier use case est critique : comment générer automatiquement une vidéo de 60 secondes qui présente un projet ou un module, avec animations GSAP, narration TTS, et fond musical — le tout depuis le même fichier AsciiDoc que les slides ?</p> </div> <div class="paragraph"> <p>Capsule-gradle ne peut pas répondre : il lui faut <strong>déjà</strong> un deck reveal.js. slider-gradle produit bien ce deck, mais il n’est pas conçu pour le rendu vidéo. Il fallait un pipeline <strong>direct</strong> : AsciiDoc → vidéo.</p> </div> </div> </div> <div class="sect1"> <h2 id="_hyperframes_le_moteur">HyperFrames : Le Moteur</h2> <div class="sectionbody"> <div class="paragraph"> <p>J’ai découvert <a href="https://github.com/heygen-com/hyperframes">HyperFrames</a> il y a quelques jours. C’est un framework open-source (Apache 2.0) créé par HeyGen, la licorne de la vidéo IA. 22 700 étoiles sur GitHub. Le pitch tient en une phrase :</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p><strong>Write HTML. Render video. Built for agents.</strong></p> </div> </blockquote> </div> <div class="paragraph"> <p>Le principe : vous écrivez du HTML avec des <code>data-*</code> attributes, vous référencez une animation GSAP (ou CSS, Lottie, Three.js…), et le moteur rend le tout en MP4 via Puppeteer (headless Chrome) + FFmpeg. Résultat déterministe : même input, mêmes frames, même vidéo.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080"> <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="background.mp4" muted playsinline></video> <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1"> Formation Docker & Kubernetes </h1> <audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.3" src="music.wav"></audio> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script> const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.__timelines = window.__timelines || {}; window.__timelines.intro = tl; </script> </div></code></pre> </div> </div> <div class="paragraph"> <p>Qu’est-ce qui rend HyperFrames différent de Remotion ? Pas de React, pas de bundler, pas de JSX. Du HTML brut que les agents IA savent écrire nativement. C’est taillé <strong>exactement</strong> pour mon pipeline : planner-gradle avec deepseek peut générer ce HTML à partir d’un plan SPG/SPD, et un plugin Gradle peut le convertir en MP4.</p> </div> </div> </div> <div class="sect1"> <h2 id="_larchitecture_du_plugin">L’Architecture du Plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>hyperframes-gradle suit le même pattern que tous mes plugins : le <a href="0124_architecture_plugin_gradle_racine_consommateur_independant_post.html">pattern « Plugin Indépendant + Racine Consommateur »</a>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">hyperframes-gradle/ ├── settings.gradle.kts ← racine consommateur (dogfood) ├── build.gradle.kts ← 3 lignes : apply plugin hyperframes ├── hyperframes-plugin/ ← BUILD INDÉPENDANT │ ├── gradlew ← son propre wrapper │ ├── build.gradle.kts ← java-gradle-plugin │ ├── src/main/kotlin/education/cccp/hyperframes/ │ │ ├── HyperframesPlugin.kt │ │ ├── GenerateHyperframesHtmlTask.kt │ │ ├── RenderHyperframesTask.kt │ │ └── HyperframesExtension.kt │ ├── .agents/ ← gouvernance agent │ └── doc/ │ └── HYPERFRAMES_ARCHITECTURE.adoc └── video.yml ← configuration dogfood</code></pre> </div> </div> <div class="sect2"> <h3 id="_le_pipeline_en_quatre_étapes">Le Pipeline en Quatre Étapes</h3> <div class="imageblock"> <div class="content"> <img src="./images/pipeline-hyperframes.svg" alt="pipeline hyperframes" width="1005" height="100"> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>AsciidoctorJ</strong> parse l’AsciiDoc source et extrait les blocs customs</p> </li> </ol> </div> <div class="paragraph"> <p><code>[hyperframes-composition]</code>, <code>[hyperframes-track]</code>, <code>[hyperframes-animation]</code>.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>GenerateHyperframesHtmlTask</strong> génère le HTML HyperFrames avec les</p> </li> </ol> </div> <div class="paragraph"> <p><code>data-*</code> attributes correspondants.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RenderHyperframesTask</strong> appelle la CLI HyperFrames via <code>ProcessBuilder</code> :</p> </li> </ol> </div> <div class="paragraph"> <p><code>npx hyperframes render --input index.html --output video.mp4</code>.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Le MP4 est déployé dans <code>output/</code> avec un <code>metadata.json</code> pour l’orchestration.</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_le_dsl_asciidoc">Le DSL AsciiDoc</h3> <div class="paragraph"> <p>La vraie valeur ajoutée du plugin, c’est le DSL AsciiDoc. L’utilisateur n’écrit jamais de HTML. Il annote son document AsciiDoc existant :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Formation Docker & Kubernetes :hyperframes-width: 1920 :hyperframes-height: 1080 :hyperframes-fps: 30 [hyperframes-composition, id="intro"] == Introduction Le titre apparaît avec un fondu GSAP sur fond vidéo. [hyperframes-track, index=0, start=0, duration=6] video::assets/background.mp4[muted, playsinline] [hyperframes-track, index=1, start=1, duration=4] Formation Docker & Kubernetes [hyperframes-animation, type=gsap]</code></pre> </div> </div> <div class="paragraph"> <p>const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.<em>timelines = window.</em>timelines || {}; window.__timelines.intro = tl;</p> </div> <div class="paragraph"> <p>Les attributs docinfo (<code>:hyperframes-width:</code>) configurent les dimensions. Les blocs customs définissent les compositions et les tracks. Le bloc <code>[hyperframes-animation]</code> contient le code GSAP brut — que l’agent IA peut générer à partir d’une description en langage naturel.</p> </div> </div> <div class="sect2"> <h3 id="_le_bridge_node_js">Le Bridge Node.js</h3> <div class="paragraph"> <p>Le seul point de friction technique : HyperFrames est en Node.js/TypeScript, et mes plugins sont en Kotlin/JVM. La solution est un <code>ProcessBuilder</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class RenderHyperframesTask : DefaultTask() { @TaskAction fun render() { val process = ProcessBuilder( "npx", "hyperframes", "render", "--input", inputHtml.absolutePath, "--output", outputMp4.absolutePath ) .inheritIO() .start() val exitCode = process.waitFor() require(exitCode == 0) { "HyperFrames render failed with exit code $exitCode" } } }</code></pre> </div> </div> <div class="paragraph"> <p>Zéro couplage code JVM ↔ Node.js. Le contrat est par ligne de commande et fichiers sur disque. C’est le même pattern que <code>plantuml-gradle</code> (qui appelle la CLI PlantUML) ou <code>slider-gradle</code> (qui appelle AsciidoctorJ). Rien de nouveau sous le soleil — juste appliqué à un outil plus récent.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_deux_plugins_vidéo_deux_usages">Deux Plugins Vidéo, Deux Usages</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.762%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">capsule-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">hyperframes-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Source</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deck reveal.js (HTML existant)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">AsciiDoc → HTML HyperFrames</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Use case</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Capsule de révision</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vidéo standalone explicative</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nature</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Slides → vidéo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Document → vidéo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rendu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Playwright Java → WebM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HyperFrames CLI → MP4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Animation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Transitions reveal.js natives</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GSAP/CSS data-attributes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stack</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">100% JVM (Kotlin)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JVM + Node.js CLI externe</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Ils ne se remplacent pas. Ils se complètent. La chaîne de valeur complète :</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (capsule révision)</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ hyperframes-gradle ──→ MP4 (vidéo standalone)</p> </div> <div class="paragraph"> <p>L’utilisateur écrit un seul fichier AsciiDoc. slider-gradle produit les slides. capsule-gradle produit la capsule de révision. hyperframes-gradle produit la vidéo de teasing et les démos techniques.</p> </div> </div> </div> <div class="sect1"> <h2 id="_les_6_epics_de_la_roadmap">Les 6 EPICs de la Roadmap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le plugin est structuré en 6 EPICs :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1682%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">EPIC</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Priorité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bootstrap gouvernance + cadrage architecture</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ TERMINE</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Plugin Gradle stub + AsciidoctorJ intégration</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bridge CLI HyperFrames (ProcessBuilder → npx → MP4)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DSL AsciiDoc customs (blocs, docinfo, templates)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Intégration runner-gradle (metadata.json)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Templates prêts à l’emploi (title-card, code-diff, captions)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CI + publication Maven Central / Gradle Portal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P3</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>La session 000 (bootstrap) est déjà terminée. La session 001 attaquera HF-1 : le stub du plugin Gradle et l’intégration AsciidoctorJ.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_ça_marche">Pourquoi Ça Marche</h2> <div class="sectionbody"> <div class="paragraph"> <p>Trois raisons :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>HyperFrames est "built for agents"</strong>. Mon pipeline repose sur des agents IA</p> </li> </ol> </div> <div class="paragraph"> <p>(planner-gradle + deepseek) qui génèrent du contenu. HyperFrames accepte du HTML brut — le format que les LLMs maîtrisent le mieux. Pas de React, pas de JSX, pas de courbe d’apprentissage pour l’agent.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Le DSL AsciiDoc est naturel</strong>. Tout mon écosystème parle AsciiDoc.</p> </li> </ol> </div> <div class="paragraph"> <p>slider-gradle, codex-gradle, training-gradle — tous consomment du <code>.adoc</code>. Ajouter des blocs customs <code>[hyperframes-composition]</code> est une extension logique, pas une rupture.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Le bridge Node.js est un pattern éprouvé</strong>. ProcessBuilder hors de la JVM,</p> </li> </ol> </div> <div class="paragraph"> <p>c’est ce que je fais déjà pour PlantUML, Graphviz, Piper. Ajouter HyperFrames ne change rien à l’architecture — c’est un outil externe de plus, piloté depuis Gradle.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>La vraie force du pattern, c’est qu’il n’y a <strong>aucune</strong> dépendance npm dans le build Gradle. Le plugin n’importe pas de code Node.js. Il exécute une commande shell. Si HyperFrames évolue ou casse, le plugin n’est pas couplé — il suffit de mettre à jour la commande.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_chaînon_manquant">Conclusion : Le Chaînon Manquant</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avec hyperframes-gradle, mon pipeline vidéo est complet. J’ai :</p> </div> <div class="ulist"> <ul> <li> <p>Les <strong>slides interactives</strong> (slider-gradle)</p> </li> <li> <p>Les <strong>capsules de révision</strong> (capsule-gradle)</p> </li> <li> <p>Les <strong>vidéos standalone</strong> (hyperframes-gradle)</p> </li> </ul> </div> <div class="paragraph"> <p>Trois formats. Un seul fichier source : l’AsciiDoc.</p> </div> <div class="paragraph"> <p>Le prochain objectif est HF-1 : faire compiler le plugin et générer un premier HTML HyperFrames à partir d’un document AsciiDoc annoté. La session 001 est déjà cadrée.</p> </div> <div class="paragraph"> <p>hyperframes-gradle existe. La gouvernance est en place. Le backlog est écrit. L’architecture est documentée. Le plugin est né.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0124_architecture_plugin_gradle_racine_consommateur_independant_post.html">Article 0124 — L’Architecture Plugin Indépendant + Racine Consommateur</a></p> </li> <li> <p><a href="https://github.com/heygen-com/hyperframes">HyperFrames — GitHub</a></p> </li> <li> <p><a href="https://hyperframes.heygen.com/introduction">HyperFrames — Documentation</a></p> </li> <li> <p><code>foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc</code> — Architecture détaillée</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0125_audit_conso_opencode_methodologie_comparaison_prix_llm_post.html Mon, 18 May 2026 00:00:00 +0000 blog/2026/0125_audit_conso_opencode_methodologie_comparaison_prix_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_comprendre_la_stack_qui_fait_quoi">Comprendre la Stack : Qui Fait Quoi ?</a></li> <li><a href="#_introduction_pourquoi_un_audit">Introduction : Pourquoi un Audit ?</a></li> <li><a href="#_la_base_de_données_opencode_une_mine_dor">La Base de Données OpenCode : Une Mine d’Or</a> <ul class="sectlevel2"> <li><a href="#_le_schéma">Le Schéma</a></li> <li><a href="#_le_code_dextraction">Le Code d’Extraction</a></li> </ul> </li> <li><a href="#_les_résultats_73_jours_de_consommation">Les Résultats : 73 Jours de Consommation</a> <ul class="sectlevel2"> <li><a href="#_vue_globale">Vue Globale</a></li> <li><a href="#_ventilation_par_modèle_et_fournisseur">Ventilation par Modèle et Fournisseur</a></li> <li><a href="#_les_modèles_intra_session_ce_que_la_table_session_ne_voit_pas">Les Modèles Intra-Session : Ce Que la Table Session Ne Voit Pas</a></li> </ul> </li> <li><a href="#_comparatif_tarifaire_fournisseurs_occidentaux">Comparatif Tarifaire — Fournisseurs Occidentaux</a> <ul class="sectlevel2"> <li><a href="#_anthropic_claude">Anthropic — Claude</a></li> <li><a href="#_openai_gpt">OpenAI — GPT</a></li> <li><a href="#_google_gemini">Google — Gemini</a></li> <li><a href="#_huggingface_inference_providers">HuggingFace Inference Providers</a></li> <li><a href="#_groq">Groq</a></li> </ul> </li> <li><a href="#_comparatif_tarifaire_fournisseurs_chinois">Comparatif Tarifaire — Fournisseurs Chinois</a> <ul class="sectlevel2"> <li><a href="#_deepseek_api_direct_platform_deepseek_com">DeepSeek API Direct (platform.deepseek.com)</a></li> <li><a href="#_kimi_moonshot_platform_kimi_com">Kimi Moonshot (platform.kimi.com)</a></li> <li><a href="#_alibaba_bailian_bailian_aliyun_com">Alibaba Bailian (bailian.aliyun.com)</a></li> </ul> </li> <li><a href="#_tableau_récapitulatif_tous_providers">Tableau Récapitulatif — Tous Providers</a></li> <li><a href="#_le_coût_caché_prompt_engineering_et_itérations">Le Coût Caché : Prompt Engineering et Itérations</a></li> <li><a href="#_cumuler_les_abonnements_ollama_cloud_pro_la_méthode_docker">Cumuler les Abonnements Ollama Cloud Pro : La Méthode Docker</a></li> <li><a href="#_ce_que_laudit_ne_mesure_pas">Ce Que l’Audit Ne Mesure Pas</a></li> <li><a href="#_conclusion_le_verdict_des_chiffres">Conclusion : Le Verdict des Chiffres</a></li> <li><a href="#_références">Références</a> <ul class="sectlevel2"> <li><a href="#_sources_des_tarifs">Sources des Tarifs</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 22 minutes</div> <p>On me demande souvent combien coûte ma consommation d’IA. Je réponds « 20 balles par mois » et on me regarde avec des yeux ronds. Alors aujourd’hui, je vous ouvre la boîte noire. Cet article est l’audit complet de mes 73 jours de vibe coding : la méthodologie pour extraire les données depuis la base SQLite d’OpenCode, le code SQL pour interroger les tables, et la comparaison exhaustive avec <strong>tous</strong> les fournisseurs du marché — occidentaux comme chinois. Le résultat est tellement asymétrique que j’ai dû vérifier mes calculs trois fois.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_comprendre_la_stack_qui_fait_quoi">Comprendre la Stack : Qui Fait Quoi ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de plonger dans les chiffres, clarifions l’architecture. Il y a trois acteurs distincts dans mon setup, et c’est important de ne pas les confondre :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/stack-architecture.svg" alt="stack architecture" width="1474" height="431"> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>OpenCode n’est PAS un fournisseur de modèles.</strong> C’est un CLI open source (<a href="https://github.com/anomalyco/opencode">github.com/anomalyco/opencode</a>) qui orchestre des agents IA. Il ne vend pas d’abonnement, il ne fournit pas d’inférence. C’est l’équivalent de <code>git</code> pour le versionnement : un outil, pas un service. <strong>Ollama Cloud est le fournisseur d’inférence.</strong> Mon installation locale d’Ollama agit comme <strong>client</strong> — elle s’authentifie auprès des serveurs d’Ollama via une clé SSH unique (Device Key) et leur délègue l’exécution des modèles tagués <code>:cloud</code>. L’abonnement Pro (20€/mois) débloque des quotas supérieurs et permet de cumuler plusieurs comptes sur une même machine via Docker.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_introduction_pourquoi_un_audit">Introduction : Pourquoi un Audit ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Il y a deux mois, j’utilisais des modèles gratuitement sur mon installation locale d’Ollama. Puis j’ai souscrit un premier abonnement Ollama Cloud Pro à 20€/mois, qui me permet d’utiliser les modèles cloud (ceux avec le tag <code>:cloud</code>) via le provider <code>ollama-cloud</code>. Un deuxième abonnement a suivi un mois plus tard, sur une instance Docker séparée avec son propre compte et sa propre clé SSH — la méthode de cumul décrite dans <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">mon article sur le cumul d’abonnements</a>.</p> </div> <div class="paragraph"> <p>La question qui me taraudait : <strong>est-ce que ces 20€ par mois sont justifiés ?</strong> Pas au doigt mouillé. Avec des chiffres.</p> </div> <div class="paragraph"> <p>Pour répondre, j’avais besoin de données précises. Pas des estimations. Pas des moyennes. Ma consommation <strong>réelle</strong>, token par token, modèle par modèle, session par session.</p> </div> <div class="paragraph"> <p>Et OpenCode — le CLI — stocke tout ça dans une base SQLite.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_base_de_données_opencode_une_mine_dor">La Base de Données OpenCode : Une Mine d’Or</h2> <div class="sectionbody"> <div class="paragraph"> <p>OpenCode persiste l’intégralité de l’historique de ses sessions dans un fichier SQLite situé à <code>~/.local/share/opencode/opencode.db</code>. La mienne pèse 660 Mo pour 73 jours d’utilisation — une base de données de production tout à fait respectable.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ls -lh ~/.local/share/opencode/opencode.db -rw-r--r-- 1 cheroliv cheroliv 660M mai 18 12:25 opencode.db</code></pre> </div> </div> <div class="sect2"> <h3 id="_le_schéma">Le Schéma</h3> <div class="paragraph"> <p>La base contient une vingtaine de tables, mais trois d’entre elles sont cruciales pour notre audit :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/schema-principal.svg" alt="schema principal" width="684" height="397"> </div> </div> <div class="paragraph"> <p>La table <code>session</code> est parfaite pour un audit global : chaque session a son décompte de tokens agrégé, son modèle utilisé, et son coût. Le champ <code>model</code> est du JSON brut :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "id": "deepseek-v4-pro:cloud", "providerID": "ollama-cloud", "variant": "default" }</code></pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Le champ <code>cost</code> dans la base OpenCode ne reflète que les <strong>frais d’API externes</strong> payés à la consommation via API key (Google Gemini, OpenAI, etc.). Les appels via Ollama — que ce soit en local ou via Ollama Cloud Pro — sont marqués <code>cost=0</code> parce que le coût est forfaitaire (abonnement), pas per-token. Le vrai coût de ces appels, c’est l’abonnement mensuel.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_le_code_dextraction">Le Code d’Extraction</h3> <div class="paragraph"> <p>Pas besoin d’installer quoi que ce soit. Node.js 22+ intègre un module SQLite expérimental (<code>node:sqlite</code>) qui fonctionne parfaitement. Voici le script qui m’a tout donné :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const { DatabaseSync } = require('node:sqlite'); const db = new DatabaseSync( `${process.env.HOME}/.local/share/opencode/opencode.db`, { readonly: true } ); // 1. Statistiques globales const global = db.prepare(` SELECT COUNT(*) as sessions, SUM(tokens_input) as total_input, SUM(tokens_output) as total_output, SUM(tokens_reasoning) as total_reasoning, SUM(tokens_cache_read) as total_cache_read, SUM(cost) as total_cost FROM session `).get(); // 2. Ventilation par modèle et fournisseur const byModel = db.prepare(` SELECT json_extract(model, '$.id') as model_id, json_extract(model, '$.providerID') as provider, COUNT(*) as sessions, SUM(tokens_input) as total_input, SUM(tokens_output) as total_output, SUM(cost) as total_cost FROM session WHERE model IS NOT NULL GROUP BY model_id, provider ORDER BY SUM(tokens_input) DESC `).all(); // 3. Par mois const monthly = db.prepare(` SELECT strftime('%Y-%m', datetime(time_created/1000, 'unixepoch')) as month, COUNT(*) as sessions, SUM(tokens_input) as total_input, SUM(tokens_output) as total_output, SUM(cost) as total_cost FROM session WHERE time_created IS NOT NULL GROUP BY month ORDER BY month `).all(); // 4. Messages par modèle (détection des changements intra-session) const msgByModel = db.prepare(` SELECT json_extract(m.data, '$.model.providerID') as provider, json_extract(m.data, '$.model.modelID') as model_id, COUNT(*) as messages FROM message m WHERE json_extract(m.data, '$.model') IS NOT NULL GROUP BY provider, model_id ORDER BY COUNT(*) DESC `).all(); console.log({ global, byModel, monthly, msgByModel }); db.close();</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Le flag <code>--experimental-sqlite</code> est nécessaire sur Node.js 22.x. Sur Node.js 24+, le module est stable et ne nécessite plus de flag.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_les_résultats_73_jours_de_consommation">Les Résultats : 73 Jours de Consommation</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_vue_globale">Vue Globale</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Métrique</th> <th class="tableblock halign-left valign-top">Valeur</th> <th class="tableblock halign-left valign-top">Contexte</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Sessions OpenCode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1 022</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~14 sessions/jour en moyenne</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tokens Input</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,62 milliards</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dont 94,5M en cache hit</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tokens Output</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21 millions</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ratio input/output ~125:1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tokens Reasoning</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">141 000</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Négligeable — quasi pas de thinking</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Coût API externe</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$0,22</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Frais hors abonnement (Gemini + free tiers)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Ce chiffre de \$0,22 est crucial : il représente tout ce que j’ai payé <strong>en plus</strong> de mon abonnement Ollama Cloud Pro. C’est-à-dire quasiment rien. L’abonnement couvre l’essentiel.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/repartition-mensuelle.svg" alt="repartition mensuelle" width="638" height="207"> </div> </div> <div class="paragraph"> <p>Le décollage entre mars et avril est spectaculaire : ×35 en un mois. C’est la transition de l’usage « test » à l’usage « production » — quand j’ai commencé à faire tourner des agents OpenCode en continu pour mes plugins Gradle.</p> </div> </div> <div class="sect2"> <h3 id="_ventilation_par_modèle_et_fournisseur">Ventilation par Modèle et Fournisseur</h3> <div class="paragraph"> <p>Le champ <code>model</code> de la table <code>session</code> étant du JSON, <code>json_extract()</code> permet de ventiler proprement :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Modèle × Provider</th> <th class="tableblock halign-left valign-top">Sessions</th> <th class="tableblock halign-left valign-top">Input</th> <th class="tableblock halign-left valign-top">Output</th> <th class="tableblock halign-left valign-top">Coût</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">deepseek-v4-pro @ ollama-cloud</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">63</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">220 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1,94 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">deepseek-v4-pro @ ollama-b</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">124</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">463 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4,15 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">deepseek-v4-pro @ ollama</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">100</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">252 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,25 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">deepseek-v4-flash-free @ opencode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">16</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1,3 M</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">279 K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">qwen3.6-plus-free @ opencode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">369 K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">25 K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">gemini-2.5-flash @ google</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">211 K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">19 K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,04</p></td> </tr> </tbody> </table> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Trois providers différents pour exactement le même modèle DeepSeek V4 Pro : * <code>ollama-cloud</code> → via <strong>abonnement Pro payant</strong> (cloud managé par Ollama) * <code>ollama-b</code> → <strong>deuxième abonnement Pro</strong>, isolé dans un conteneur Docker distinct * <code>ollama</code> → instance native locale, <strong>gratuite</strong> (tourne directement sur ma machine) La somme des trois donne 936M input, 8,4M output — c’est ma conso totale DeepSeek V4 Pro, tous providers confondus. Seul <code>ollama-cloud</code> (220M input) coûte un abonnement. Les 716M restants sont gratuits (local ou cumul d’abonnements).</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_les_modèles_intra_session_ce_que_la_table_session_ne_voit_pas">Les Modèles Intra-Session : Ce Que la Table Session Ne Voit Pas</h3> <div class="paragraph"> <p>La table <code>session</code> ne capture que le modèle <strong>principal</strong> de la session. Mais pendant une même session, un agent OpenCode peut basculer entre plusieurs modèles. La table <code>message</code> le révèle :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">Modèles utilisés dans les messages (ollama-cloud provider) : ├─ deepseek-v4-pro 1 441 msgs (32%) ├─ qwen3.5:397b 1 217 msgs (27%) ├─ glm-5.1 712 msgs (16%) ├─ kimi-k2.6:cloud 634 msgs (14%) ├─ qwen3-coder:480b 414 msgs (9%) ├─ gpt-oss:20b 34 msgs (0,8%) ├─ qwen3-coder-next 27 msgs (0,6%) └─ gemma4:31b 7 msgs (0,2%)</code></pre> </div> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p>Je n’utilise plus Qwen, GLM, Kimi ni les autres modèles. Ils apparaissent dans l’historique parce que j’ai testé pas mal de choses en avril. Depuis mi-mai, je suis verrouillé sur DeepSeek V4 Pro — c’est le seul qui tient la charge sur du long contexte avec gouvernance agent (cf. <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">ma comparaison Kimi/GLM/DeepSeek</a>). Les 32% de messages deepseek dans l’historique sont trompeurs : aujourd’hui c’est 100%.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_comparatif_tarifaire_fournisseurs_occidentaux">Comparatif Tarifaire — Fournisseurs Occidentaux</h2> <div class="sectionbody"> <div class="paragraph"> <p>La question qui fâche : combien coûterait cette même consommation chez les fournisseurs traditionnels ?</p> </div> <div class="paragraph"> <p>Ma base de calcul pour le comparatif : <strong>220M tokens input + 1,9M tokens output</strong> — <strong>uniquement</strong> le volume passé par <code>ollama-cloud</code> (le seul qui correspond à mon abonnement payant). Les 716M restants sont gratuits (Ollama local et instance Docker B).</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 23.0769%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3847%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Fournisseur</th> <th class="tableblock halign-left valign-top">Modèle</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mon setup</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\~20€</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>1×</strong></p></td> </tr> </tbody> </table> <div class="sect2"> <h3 id="_anthropic_claude">Anthropic — Claude</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Modèle</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Opus 4.7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 148</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>57×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Sonnet 4.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$689</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>34×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Haiku 4.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$230</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>11×</strong></p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Même Haiku 4.5, le modèle le plus « économique » de Claude, coûte 11× mon abonnement. Et il ne connaît rien de mon codebase, ne génère pas dans mon style, et hallucine sur les APIs Gradle Kotlin DSL.</p> </div> </div> <div class="sect2"> <h3 id="_openai_gpt">OpenAI — GPT</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Modèle</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 157</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>58×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$579</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>29×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4 Mini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,75</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$4,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$174</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>9×</strong></p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_google_gemini">Google — Gemini</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Modèle</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3.1 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,00</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$459</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>23×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Flash</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$69</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>3,5×</strong></p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Gemini 3 Flash à 69€ est le seul concurrent « proche » en prix pur — mais c’est un modèle dense léger, pas un MoE 1.6T comme DeepSeek V4 Pro. La qualité du code généré n’a rien à voir.</p> </div> </div> <div class="sect2"> <h3 id="_huggingface_inference_providers">HuggingFace Inference Providers</h3> <div class="paragraph"> <p>HuggingFace ne fait pas d’inférence lui-même — il agrège des <strong>providers</strong> tiers (Novita, Together, DeepInfra, Cerebras, SambaNova, Fireworks, Groq…) via une API unifiée. On choisit le provider le moins cher ou le plus rapide. Voici les tarifs relevés en mai 2026 pour DeepSeek V4 Pro :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Provider HF</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Novita (le moins cher)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,67</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,38</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$374</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>19×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepInfra</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,74</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,48</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$389</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>19×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Together</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$4,40</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$470</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>23×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fireworks</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tarif non public</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Même le provider le moins cher sur HuggingFace (Novita) facture 19× le prix de mon abonnement. Et contrairement à Ollama Cloud, HuggingFace facture <strong>en plus</strong> les frais de plateforme si vous n’avez pas d’abonnement PRO HF (\$9/mois).</p> </div> </div> <div class="sect2"> <h3 id="_groq">Groq</h3> <div class="paragraph"> <p>Groq n’a <strong>aucun</strong> des modèles que j’utilise — leur catalogue se limite à GPT-OSS, Llama et Qwen 32B. Impossible de comparer.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_comparatif_tarifaire_fournisseurs_chinois">Comparatif Tarifaire — Fournisseurs Chinois</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le vrai test, c’est le marché chinois. Si DeepSeek est un modèle chinois, son API native devrait être moins chère, non ?</p> </div> <div class="sect2"> <h3 id="_deepseek_api_direct_platform_deepseek_com">DeepSeek API Direct (platform.deepseek.com)</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 22.2222%;"> <col style="width: 22.2222%;"> <col style="width: 22.2223%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Période</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Promo -75% (fin 31 mai)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,435</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,87</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$98</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Plein tarif (à partir de juin)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,74</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,48</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$390</strong></p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Même avec la promo agressive de DeepSeek (-75% prolongée), l’API directe coûte <strong>5×</strong> plus cher. Au tarif normal, <strong>20×</strong>. Et c’est <strong>uniquement</strong> DeepSeek — pas d’accès à d’autres modèles.</p> </div> </div> <div class="sect2"> <h3 id="_kimi_moonshot_platform_kimi_com">Kimi Moonshot (platform.kimi.com)</h3> <div class="paragraph"> <p>Kimi ne propose que ses propres modèles. Pas de DeepSeek.</p> </div> </div> <div class="sect2"> <h3 id="_alibaba_bailian_bailian_aliyun_com">Alibaba Bailian (bailian.aliyun.com)</h3> <div class="paragraph"> <p>Seul fournisseur qui agrège tous les modèles chinois — mais via revente avec marge. Les prix sont chargés dynamiquement en JavaScript, rendant le scraping impossible.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tableau_récapitulatif_tous_providers">Tableau Récapitulatif — Tous Providers</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 23.0769%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3847%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Fournisseur</th> <th class="tableblock halign-left valign-top">Modèle</th> <th class="tableblock halign-left valign-top">Input \$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Coût/mois</th> <th class="tableblock halign-left valign-top">× mon abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Cloud Pro</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>~20€</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>1×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Flash</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Flash</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$69</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3,5×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek API (promo)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,44</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,87</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$98</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4 Mini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4 Mini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,75</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$4,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$174</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">9×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Haiku 4.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Haiku 4.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$230</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">11×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">HuggingFace/Novita</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,67</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,38</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$374</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">19×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek API (normal)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,74</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,48</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$390</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">20×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Together AI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$4,40</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$470</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">23×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$579</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">29×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Sonnet 4.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Sonnet 4.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$689</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">34×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Opus 4.7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Opus 4.7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 148</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">57×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 157</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">58×</p></td> </tr> </tbody> </table> <div class="imageblock"> <div class="content"> <img src="./images/cout-comparaison-barres.svg" alt="cout comparaison barres" width="655" height="279"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_coût_caché_prompt_engineering_et_itérations">Le Coût Caché : Prompt Engineering et Itérations</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le coût token n’est qu’une partie de l’équation. Le vrai coût, c’est le temps développeur.</p> </div> <div class="paragraph"> <p>Avec OpenCode + Ollama Cloud Pro + ma gouvernance agent (EAGER/LAZY/Hot/Warm/Cold, décrite dans <a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">l’article sur la gouvernance</a>), j’obtiens :</p> </div> <div class="ulist"> <ul> <li> <p><strong>0 prompt engineering répétitif</strong> : le contexte est injecté automatiquement</p> </li> <li> <p><strong>90%+ first-shot correct</strong> : le code compile du premier coup</p> </li> <li> <p><strong>Zéro hallucination deepseek sur 8 sessions consécutives</strong> (documenté dans <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">la comparaison Kimi/GLM/DeepSeek</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>Avec Claude ou GPT <strong>sans</strong> fine-tune ni gouvernance :</p> </div> <div class="ulist"> <ul> <li> <p>2-3 itérations par tâche en moyenne</p> </li> <li> <p>Prompt engineering systématique</p> </li> <li> <p>Hallucinations sur les APIs Kotlin/Gradle dès que le contexte dépasse 30K tokens</p> </li> </ul> </div> <div class="paragraph"> <p>Le coût « effectif » mensuel — tokens × itérations × temps de correction — est de 27× à 54× celui de ma solution, comme je l’ai démontré dans <a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">l’article sur le ratio d’efficacité</a>.</p> </div> <div class="paragraph"> <p><em><em>_ Ce n’est pas juste une histoire de prix au token. Un Claude Opus à 57× le prix qui nécessite 3× plus d’itérations, c’est un coût effectif ~170× supérieur. Pour le dire crûment : payer un stagiaire le salaire d’un partner McKinsey. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_cumuler_les_abonnements_ollama_cloud_pro_la_méthode_docker">Cumuler les Abonnements Ollama Cloud Pro : La Méthode Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si un seul abonnement ne suffit pas, on en cumule. Le principe est d’isoler chaque abonnement dans sa propre installation Ollama, avec sa propre clé SSH d’authentification. Docker rend ça trivial.</p> </div> <div class="paragraph"> <p>La méthode complète est détaillée dans <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">l’article sur le cumul Docker</a>, voici le principe :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-dual-abonnement.svg" alt="architecture dual abonnement" width="581" height="481"> </div> </div> <div class="paragraph"> <p>Le pattern est simple :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Créer un volume <code>~/ollama-b-data</code></p> </li> <li> <p>Lancer un conteneur Docker <code>ollama/ollama:0.20.2</code> mappé sur <code>11435:11434</code></p> </li> <li> <p>Récupérer la clé SSH du conteneur → l’enregistrer sur ollama.com</p> </li> <li> <p>Faire <code>ollama signin</code> avec un deuxième email</p> </li> <li> <p>Configurer OpenCode avec deux providers (<code>ollama</code> sur :11434, <code>ollama-b</code> sur :11435)</p> </li> </ol> </div> <div class="paragraph"> <p>Deux comptes, une carte bleue, zéro conflit.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ce_que_laudit_ne_mesure_pas">Ce Que l’Audit Ne Mesure Pas</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 40%;"> <col style="width: 60%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Angle mort</th> <th class="tableblock halign-left valign-top">Impact</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Qualité du code produit</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,6 milliards de tokens ne disent pas si le code compile. Mes 8 sessions DeepSeek V4 Pro ont un taux de first-shot >90%.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Écosystème OpenCode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le CLI est gratuit, mais sa valeur (agents, sandboxes, historique, prompt caching) est immense. Il n’est pas inclus dans le prix de l’abonnement — c’est un outil séparé.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Coût d’opportunité</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Passer 2h/jour à debugger des hallucinations d’un modèle inférieur coûte plus cher que 20€/mois.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tranquillité d’esprit</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Forfait fixe = pas de surprise. Avec du per-token, un pic d’activité peut faire très mal.</p></td> </tr> </tbody> </table> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="⚠️"></i> </td> <td class="content"> <div class="paragraph"> <p>Les prix cités sont ceux de mai 2026. Dans six mois, tout aura baissé. Mais le rapport de force structurel — abonnement fixe vs paiement à l’usage — restera favorable à l’abonnement pour les gros consommateurs.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_verdict_des_chiffres">Conclusion : Le Verdict des Chiffres</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après 73 jours, 1 022 sessions OpenCode, et 2,6 milliards de tokens :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 60%;"> <col style="width: 40%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Métrique</th> <th class="tableblock halign-left valign-top">Verdict</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Coût API externe cumulé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$0,22</strong> (quasi nul)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Coût abonnement Ollama Cloud Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>~20€/mois</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Équivalent Claude Opus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$1 148/mois</strong> — 57× plus cher</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Équivalent GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$1 157/mois</strong> — 58× plus cher</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Équivalent HuggingFace/Novita</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$374/mois</strong> — 19× plus cher</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Équivalent DeepSeek API direct</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$390/mois</strong> — 20× plus cher</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Équivalent le moins cher (Gemini Flash)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$69/mois</strong> — 3,5× plus cher, modèle inférieur</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Meilleure offre du marché</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Cloud Pro à 20€/mois</strong> — imbattable</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>__</em> À 20€ par mois pour accéder à DeepSeek V4 Pro (1.6T params, MoE, CSA+HCA, 1M contexte) via Ollama Cloud, j’ai le meilleur rapport qualité/prix du marché mondial. Même les fournisseurs chinois en direct sont 5× à 20× plus chers. Même HuggingFace, avec son agrégation de providers low-cost, est 19× plus cher. Le marché occidental (Claude, GPT) est à 50-60× — une autre planète.</p> </div> <div class="paragraph"> <p>Ce ratio est tellement déséquilibré qu’il ne peut pas durer éternellement. Profitez-en tant que ça existe. <em>__</em></p> </div> <div class="paragraph"> <p>Alors oui, mes 20 balles par mois, c’est le meilleur investissement technique de ma vie de développeur. Et maintenant vous avez les chiffres pour le prouver.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Gouvernance Agent EAGER/LAZY/Hot/Warm/Cold</a></p> </li> <li> <p><a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">Article 0112 — DeepSeek V4 Pro vs Kimi K2.6 vs GLM 5.1</a></p> </li> <li> <p><a href="0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html">Article 0119 — Benchmark DGX Spark vs Cloud vs Abonnements LLM</a></p> </li> <li> <p><a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">Article 0120 — Cumuler Deux Abonnements Ollama Cloud Pro avec Docker</a></p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Article 0121 — Plugin Gradle pour Piloter Deux Instances Ollama</a></p> </li> <li> <p><a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">Article 0122 — Ratio Efficacité 27× à 54×</a></p> </li> </ul> </div> <div class="sect2"> <h3 id="_sources_des_tarifs">Sources des Tarifs</h3> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/pricing">Ollama Cloud — Tarifs Pro \$20/mois</a></p> </li> <li> <p><a href="https://api-docs.deepseek.com/quick_start/pricing">DeepSeek API — Tarifs officiels V4 Pro</a></p> </li> <li> <p><a href="https://platform.kimi.com/docs/pricing/chat-k26">Kimi Moonshot — Tarifs K2.6</a></p> </li> <li> <p><a href="https://huggingface.co/inference/models">HuggingFace Inference Providers — Tarifs par provider</a></p> </li> <li> <p><a href="https://www.anthropic.com/pricing">Anthropic — Tarifs Claude API</a></p> </li> <li> <p><a href="https://openai.com/api/pricing/">OpenAI — Tarifs GPT API</a></p> </li> <li> <p><a href="https://together.ai/pricing">Together AI — Tarifs inférence</a></p> </li> <li> <p><a href="https://groq.com/pricing">Groq — Tarifs API</a></p> </li> <li> <p><a href="https://deepinfra.com/pricing">DeepInfra — Tarifs GPU et modèles</a></p> </li> <li> <p><a href="https://help.aliyun.com/zh/model-studio/text-generation-model/">Alibaba Bailian — Modèles disponibles</a></p> </li> <li> <p><a href="https://github.com/anomalyco/opencode">OpenCode — CLI open source sur GitHub</a></p> </li> </ul> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0124_architecture_plugin_gradle_racine_consommateur_independant_post.html Thu, 14 May 2026 00:00:00 +0000 blog/2026/0124_architecture_plugin_gradle_racine_consommateur_independant_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_problème_trois_architectures_qui_mont_fait_perdre_du_temps">Le Problème : Trois Architectures Qui M’ont Fait Perdre du Temps</a> <ul class="sectlevel2"> <li><a href="#_option_1_le_plugin_isolé_pas_de_dogfooding">Option 1 : Le Plugin Isolé (pas de dogfooding)</a></li> <li><a href="#_option_2_le_monorepo_classique_includeplugin">Option 2 : Le Monorepo Classique (<code>include(":plugin")</code>)</a></li> <li><a href="#_option_3_le_composite_build_includebuild">Option 3 : Le Composite Build (<code>includeBuild()</code>)</a></li> </ul> </li> <li><a href="#_la_solution_deux_builds_indépendants_une_racine_consommateur">La Solution : Deux Builds Indépendants, Une Racine Consommateur</a> <ul class="sectlevel2"> <li><a href="#_le_flux_de_travail">Le Flux de Travail</a></li> <li><a href="#_le_workflow_concret">Le Workflow Concret</a></li> </ul> </li> <li><a href="#_pourquoi_cette_architecture_ma_conquis">Pourquoi Cette Architecture M’a Conquis</a> <ul class="sectlevel2"> <li><a href="#_1_dogfooding_natif_feedback_instantané">1. Dogfooding Natif, Feedback Instantané</a></li> <li><a href="#_2_clonage_zero_config">2. Clonage Zero-Config</a></li> <li><a href="#_3_builds_isolés_ci_indépendants">3. Builds Isolés, CI Indépendants</a></li> </ul> </li> <li><a href="#_lanatomie_du_sous_dossier_name_plugin">L’Anatomie du Sous-Dossier <code>{name}-plugin/</code></a> <ul class="sectlevel2"> <li><a href="#_le_catalogue_de_versions_deux_fichiers_distincts">Le Catalogue de Versions : Deux Fichiers Distincts</a></li> </ul> </li> <li><a href="#_ce_quon_ne_fait_pas">Ce Qu’On Ne Fait Pas</a></li> <li><a href="#_comparaison_les_trois_architectures_face_au_dogfooding">Comparaison : Les Trois Architectures Face au Dogfooding</a></li> <li><a href="#_le_contrat_dag_un_build_racin_nimporte_jamais_depuis_un_sous_dossier">Le Contrat DAG : Un Build Racin N’Importe Jamais Depuis un Sous-Dossier</a></li> <li><a href="#_conclusion_la_duplication_apparente_qui_fait_gagner_du_temps">Conclusion : La Duplication Apparente Qui Fait Gagner du Temps</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 11 minutes</div> <p>Vous clonez un dépôt de plugin Gradle. Vous ouvrez un terminal. Qu’est-ce que vous tapez ensuite ? <code>./gradlew tasks</code>, bien sûr. Mais dans quel dossier ? La racine ? Le sous-module ? Faut-il d’abord lire un README pour savoir comment builder ? Si vous hésitez ne serait-ce qu’une seconde, l’architecture du projet est cassée.</p> </div> <div class="paragraph"> <p>Voici comment j’ai résolu ce problème une fois pour toutes — et pourquoi ce pattern est aujourd’hui la signature de tous mes plugins Gradle dans <code>foundry/public/</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_trois_architectures_qui_mont_fait_perdre_du_temps">Le Problème : Trois Architectures Qui M’ont Fait Perdre du Temps</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de converger vers le pattern actuel, j’ai tâtonné entre trois approches classiques pour organiser un plugin Gradle. Chacune avait un défaut rédhibitoire.</p> </div> <div class="sect2"> <h3 id="_option_1_le_plugin_isolé_pas_de_dogfooding">Option 1 : Le Plugin Isolé (pas de dogfooding)</h3> <div class="paragraph"> <p>Le projet ne contient que le plugin. Pas d’exemple de consommation. Pas de projet qui l’exerce. Pour le tester, il faut créer un projet externe, y référencer le plugin via <code>mavenLocal</code> ou un composite build, et seulement là vérifier qu’il marche.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">$ git clone mon-plugin $ cd mon-plugin $ ./gradlew build # le plugin compile $ # ... et maintenant ? comment je l'essaie ?</code></pre> </div> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="⚠️"></i> </td> <td class="content"> <div class="paragraph"> <p>Un plugin Gradle sans exemple de consommation, c’est une bibliothèque sans tests d’intégration. Vous ne savez jamais si la dernière modification a cassé l’expérience utilisateur.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_option_2_le_monorepo_classique_includeplugin">Option 2 : Le Monorepo Classique (<code>include(":plugin")</code>)</h3> <div class="paragraph"> <p>Gradle <code>init</code> génère <code>settings.gradle.kts</code> avec <code>include("plugin")</code>. Le root et le sous-module partagent le même daemon, les mêmes configurations, les mêmes catalogues. Pratique, mais couplé.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">. ├── settings.gradle.kts → include("plugin") ├── build.gradle.kts → plugins { id("mon-plugin") } ├── plugin/ │ └── build.gradle.kts → java-gradle-plugin └── gradle/ └── libs.versions.toml</code></pre> </div> </div> <div class="paragraph"> <p>Ce qui coince :</p> </div> <div class="ulist"> <ul> <li> <p>Le root <strong>doit</strong> avoir la même version de Gradle que le sous-module.</p> </li> <li> <p><code>libs.versions.toml</code> est partagé — version catalogs communs, dépendances</p> </li> </ul> </div> <div class="paragraph"> <p>qui fuient d’un module à l’autre.</p> </div> <div class="ulist"> <ul> <li> <p>Impossible de builder le plugin indépendamment du root.</p> </li> <li> <p>La CI doit builder les deux modules, même si seul le plugin a changé.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_option_3_le_composite_build_includebuild">Option 3 : Le Composite Build (<code>includeBuild()</code>)</h3> <div class="paragraph"> <p>On sépare les deux en builds Gradle distincts et on les relie via <code>includeBuild("mon-plugin")</code> dans <code>settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>C’est déjà mieux. Le build du plugin est isolé. Mais le consommateur doit explicitement référencer le build externe — et la sortie de <code>./gradlew tasks</code> à la racine dépend de la bonne configuration du composite. Le clonage n’est pas zero-config : il faut savoir que le plugin est dans un dossier à part, que le root le référence, etc.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">. ├── settings.gradle.kts → includeBuild("plugin-build/") ├── build.gradle.kts → plugins { id("mon-plugin") } └── plugin-build/ ├── settings.gradle.kts └── build.gradle.kts</code></pre> </div> </div> <div class="paragraph"> <p>Je cherchais mieux. Beaucoup mieux.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_deux_builds_indépendants_une_racine_consommateur">La Solution : Deux Builds Indépendants, Une Racine Consommateur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici le pattern que j’ai fini par adopter :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">. ├── settings.gradle.kts ← racine consommateur ├── build.gradle.kts ← 3 lignes : apply plugin + dogfood ├── gradle/ │ └── libs.versions.toml ← catalogue du consommateur ├── {name}-plugin/ ← BUILD INDÉPENDANT │ ├── gradlew ← son propre wrapper │ ├── settings.gradle.kts ← rootProject.name = "{name}-plugin" │ ├── build.gradle.kts ← java-gradle-plugin, signing, publish │ ├── gradle/ │ │ ├── libs.versions.toml ← catalogue du plugin │ │ └── wrapper/ │ ├── src/ ← sources du plugin │ ├── .agents/ ← gouvernance agent │ └── *.adoc ← AGENT, PROMPT_REPRISE, snapshot, etc. └── site.yml / slides-context.yml / ... ← configs dogfood</code></pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>La clé : <code>{name}-plugin/</code> est un projet Gradle <strong>complet et autonome</strong>. Il a son propre wrapper, son propre settings, son propre catalogue de versions. Il se clone, se build, se teste, et se publie sans que le root soit au courant de son existence.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Le root, lui, ne fait qu'<strong>une</strong> chose : appliquer le plugin.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">plugins { alias(libs.plugins.bakery) } repositories { mavenLocal() mavenCentral() } bakery { configPath = file("site.yml").absolutePath }</code></pre> </div> </div> <div class="paragraph"> <p>Trois lignes dans le cas de <code>bakery-gradle</code>. Rien de plus. Zéro <code>include()</code>, zéro <code>includeBuild()</code>, zéro sous-projet. Un build Gradle classique qui applique un plugin comme n’importe quel consommateur le ferait.</p> </div> <div class="sect2"> <h3 id="_le_flux_de_travail">Le Flux de Travail</h3> <div class="imageblock"> <div class="content"> <img src="./images/architecture-deux-builds.svg" alt="architecture deux builds" width="1784" height="5688"> </div> </div> </div> <div class="sect2"> <h3 id="_le_workflow_concret">Le Workflow Concret</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell"># 1. Builder le plugin $ cd codebase-plugin $ ./gradlew publishToMavenLocal # 2. L'exercer depuis la racine $ cd .. $ ./gradlew indexCodebase queryCodebase snapshot # La boucle est fermée. Le plugin est testé dans des conditions # réelles de consommation, par le projet même qui l'héberge.</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_cette_architecture_ma_conquis">Pourquoi Cette Architecture M’a Conquis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Trois bénéfices qui, combinés, valent le coût de la « duplication » :</p> </div> <div class="sect2"> <h3 id="_1_dogfooding_natif_feedback_instantané">1. Dogfooding Natif, Feedback Instantané</h3> <div class="paragraph"> <p>Le meilleur test d’un plugin Gradle, c’est de l’utiliser. Pas un test unitaire mocké. Pas un <code>GradleRunner</code> avec un projet de test. Un <strong>vrai</strong> build qui applique le plugin sur de vrais fichiers.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">$ git clone bakery-gradle $ cd bakery-gradle $ ./gradlew bake # ← le plugin est exercé immédiatement</code></pre> </div> </div> <div class="paragraph"> <p>Si le plugin est cassé, le build racine le dit. Pas besoin d’aller chercher un projet de test externe. Le dogfooding est la <strong>première</strong> tâche que lance un nouveau contributeur. C’est le smoke test définitif.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>La règle est simple : si la racine compile et que <code>./gradlew tasks</code> affiche vos tâches de plugin, le plugin est fonctionnel. Pas de surprise en production.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_clonage_zero_config">2. Clonage Zero-Config</h3> <div class="paragraph"> <p>Un <code>git clone && ./gradlew tasks</code> et le nouveau venu voit tout marcher sans rien configurer. Le <code>build.gradle.kts</code> racine est la documentation vivante d’usage du plugin. Le <code>site.yml</code> à côté montre la configuration attendue.</p> </div> <div class="paragraph"> <p>Comparez avec l’alternative : un README de trois paragraphes qui explique comment builder le plugin ET comment builder le projet de test. Un nouveau contributeur lit le README en diagonale, se trompe, ouvre une issue — alors que l’information pourrait être <strong>exécutable</strong>.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>La documentation la plus robuste n’est pas celle qu’on lit. C’est celle qu’on <strong>exécute</strong>. Le build racine est la documentation exécutable du plugin.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_3_builds_isolés_ci_indépendants">3. Builds Isolés, CI Indépendants</h3> <div class="paragraph"> <p>Le plugin a son propre wrapper Gradle, son propre cycle de vie, ses propres tests. Vous pouvez :</p> </div> <div class="ulist"> <ul> <li> <p>Upgrader Gradle dans le plugin sans toucher au root</p> </li> <li> <p>Ajouter une dépendance dans le plugin sans qu’elle fuite dans le root</p> </li> <li> <p>Casser le plugin sans impacter le build racine (tant que vous ne</p> </li> </ul> </div> <div class="paragraph"> <p>publiez pas la version cassée)</p> </div> <div class="ulist"> <ul> <li> <p>Avoir une CI qui build/test le plugin, et une autre qui exerce le</p> </li> </ul> </div> <div class="paragraph"> <p>root — indépendamment</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">.github/workflows/ ├── test-plugin.yml → codebase-plugin/.gradlew build ├── test-root.yml → .gradlew tasks (vérifie que le plugin est consommable) └── publish.yml → codebase-plugin/.gradlew publish</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_lanatomie_du_sous_dossier_name_plugin">L’Anatomie du Sous-Dossier <code>{name}-plugin/</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Regardons de plus près ce qui vit dans le dossier du plugin :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">codebase-plugin/ ├── gradlew ← wrapper indépendant ├── settings.gradle.kts ← @Suppress("UnstableApiUsage") │ + foobar-resolver-convention ├── build.gradle.kts ← java-gradle-plugin + signing + publish ├── gradle/ │ ├── libs.versions.toml ← catalogue complet (langchain4j, pgvector...) │ └── wrapper/ ├── buildSrc/ ← classes utilitaires buildSrc │ ├── build.gradle.kts │ └── src/main/kotlin/ │ ├── codebase/ ← CodebaseYmlAnonymizer, CodebaseConfiguration │ ├── benchmark/ ← BenchmarkConfig, BenchmarkProtocol │ ├── readme/ ← ReadmeYmlAnonymizer │ ├── site/ ← SiteYmlAnonymizer │ ├── slider/ ← SliderYmlAnonymizer │ └── snapshot/ ← SnapshotManager ├── src/ │ ├── main/kotlin/codebase/ │ │ ├── CodebasePlugin.kt ← class Plugin<Project> │ │ ├── rag/ ← pgvector, embedding, anonymization... │ │ ├── benchmark/ ← BenchmarkRunner, export, comparison... │ │ └── walker/ ← WorkspaceWalker │ └── test/ │ ├── kotlin/codebase/scenarios/ ← steps Cucumber │ ├── features/ ← .feature files │ └── resources/datasets/ ← fixtures .adoc, .yml, .json ├── .agents/ ← gouvernance agent (INDEX, SESSIONS, etc.) ├── AGENT.adoc ← règles agent ├── PROMPT_REPRISE.adoc ← mission session ├── BACKLOG.adoc ← backlog produit ├── snapshot.adoc ← snapshot auto-généré du projet └── embeds.yml ← config RAG embeds</code></pre> </div> </div> <div class="paragraph"> <p>Tout est là. Pas de dispersion entre la racine et le sous-dossier. Le développeur qui travaille sur le plugin n’a jamais besoin de quitter <code>codebase-plugin/</code>. Le développeur qui utilise le plugin ne regarde que la racine — et le <code>build.gradle.kts</code> de 3 lignes lui dit tout ce qu’il a besoin de savoir.</p> </div> <div class="sect2"> <h3 id="_le_catalogue_de_versions_deux_fichiers_distincts">Le Catalogue de Versions : Deux Fichiers Distincts</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 37.5%;"> <col style="width: 37.5%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>gradle/libs.versions.toml</code> (racine)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>{name}-plugin/gradle/libs.versions.toml</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Nombre de dépendances</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2-3 (plugin + readme éventuellement)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30+ (langchain4j, pgvector, cucumber…​)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Rôle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Consommer le plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Builder le plugin</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Qui le lit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">L’utilisateur du plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le développeur du plugin</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le root a un catalogue volontairement minimal. Le plugin a un catalogue complet. La confusion est impossible : chaque build a son propre scope de dépendances.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Si vous avez déjà passé une heure à déboguer une collision de dépendances entre votre plugin et votre projet de test, vous comprenez la valeur de cette séparation. Les catalogues indépendants éliminent ce problème par construction.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ce_quon_ne_fait_pas">Ce Qu’On Ne Fait Pas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce pattern n’est pas magique. Il impose une contrainte que je m’inflige volontiers :</p> </div> <div class="paragraph"> <p><strong>Le root ne build pas le plugin.</strong> Vous devez <code>publishToMavenLocal</code> ou déployer sur un repository avant que le root puisse le consommer.</p> </div> <div class="paragraph"> <p>C’est un coût minime, et c’est la <strong>bonne</strong> contrainte. Le root consomme le plugin comme un client externe — via Maven. Exactement comme le ferait un projet tiers. Si le plugin n’est pas publiable, le root vous le dit immédiatement.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell"># La seule "friction" du pattern $ cd codebase-plugin && ./gradlew publishToMavenLocal && cd .. $ ./gradlew tasks --group=codebase</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_comparaison_les_trois_architectures_face_au_dogfooding">Comparaison : Les Trois Architectures Face au Dogfooding</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Plugin isolé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Monorepo <code>include()</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Composite <code>includeBuild()</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Racine + plugin indép.</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>git clone && gradlew tasks</code> donne les tâches du plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Build plugin indépendant du root</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Catalogue versions séparé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pas de <code>include()</code> ni <code>includeBuild()</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Dogfood natif sans config</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CI plugin indépendante</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Le root est un exemple de conso réel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>La colonne de droite coche toutes les cases. C’est pour ça que je ne reviendrai plus en arrière.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_contrat_dag_un_build_racin_nimporte_jamais_depuis_un_sous_dossier">Le Contrat DAG : Un Build Racin N’Importe Jamais Depuis un Sous-Dossier</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette architecture s’intègre naturellement dans le DAG N0→N3 de mon workspace. Le pattern est : <strong>le plugin N2 est le hub de ses propres dépendances, la racine N3 est un terminal qui applique des hubs</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/contrat-dag-architecture.svg" alt="contrat dag architecture" width="1746" height="5508"> </div> </div> <div class="paragraph"> <p>Le <code>codebase-gradle/build.gradle.kts</code> fait 6 lignes. Pas de <code>src/</code>, pas de <code>buildSrc/</code>, pas de <code>gradle/rag-bench.gradle.kts</code>. Juste <code>plugins { alias(libs.plugins.codebase) }</code> et les repositories. Toute la complexité vit dans <code>codebase-plugin/</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_la_duplication_apparente_qui_fait_gagner_du_temps">Conclusion : La Duplication Apparente Qui Fait Gagner du Temps</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand je montre cette structure à quelqu’un, la première réaction est souvent : « Mais tu as deux <code>gradlew</code>, deux <code>settings.gradle.kts</code>, deux <code>libs.versions.toml</code> — c’est de la duplication ! »</p> </div> <div class="paragraph"> <p>Oui. Et non.</p> </div> <div class="paragraph"> <p>La « duplication », c’est reproduire la même information à deux endroits. Ici, ce sont deux fichiers <strong>distincts</strong> qui servent deux usages <strong>distincts</strong> : le catalogue du plugin (30+ dépendances pour builder) et le catalogue de la racine (2-3 dépendances pour consommer). Le wrapper du plugin (version verrouillée pour le développement) et le wrapper de la racine (version potentiellement différente, pour l’exercice du plugin).</p> </div> <div class="paragraph"> <p>Ce n’est pas de la duplication. C’est de la <strong>séparation des responsabilités</strong> appliquée au système de build. Chaque build fait une chose, et une seule. La racine consomme. Le plugin se build.</p> </div> <div class="paragraph"> <p>Le coût ? Une commande <code>publishToMavenLocal</code> entre le build du plugin et le build de la racine. Le gain ? Une clarté architecturale qui supprime des heures de débogage en aval.</p> </div> <div class="paragraph"> <p>Depuis que j’ai déployé ce pattern sur <code>bakery-gradle</code>, <code>plantuml-gradle</code>, <code>codebase-gradle</code>, et les autres plugins de <code>foundry/public/</code>, je n’ai plus jamais hésité en ouvrant un terminal dans un de mes dépôts. Le premier réflexe — <code>./gradlew tasks</code> — marche toujours, donne toujours les bonnes tâches, et me dit instantanément si tout est sain.</p> </div> <div class="paragraph"> <p>C’est ça, la bonne architecture. Elle ne se lit pas dans un README. Elle s’éprouve dans un terminal, en moins de dix secondes.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0105_integrer_graphify_workflow_gradle_post.html">Article 0105 — Intégrer Graphify dans un workflow Gradle</a></p> </li> <li> <p><a href="0117_granularisation_oss_css_repositorie_workspace_post.html">Article 0117 — La Granularisation OSS/CSS</a></p> </li> <li> <p><a href="0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html">Article 0123 — Le Knowledge Graph comme moteur de recommandation</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html Tue, 12 May 2026 00:00:00 +0000 blog/2026/0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_la_scène_mardi_12_mai_17h30">La Scène : Mardi 12 Mai, 17h30</a></li> <li><a href="#_le_diagnostic_trois_types_de_relations_quaucun_template_ne_voit">Le Diagnostic : Trois Types de Relations Qu’Aucun Template Ne Voit</a></li> <li><a href="#_la_solution_un_pipeline_gradle_pas_un_appel_llm_à_chaud">La Solution : Un Pipeline Gradle, Pas un Appel LLM à Chaud</a> <ul class="sectlevel2"> <li><a href="#_larchitecture_bakery_importe_graphify_pas_engine">L’Architecture : Bakery Importe Graphify, Pas Engine</a></li> <li><a href="#_le_pipeline_scan_graphe_template">Le Pipeline : Scan → Graphe → Template</a></li> <li><a href="#_fallback_chronologique">Fallback Chronologique</a></li> </ul> </li> <li><a href="#_lontologie_émergente_quand_les_articles_se_regroupent_sans_se_connaître">L’Ontologie Émergente : Quand les Articles Se Regroupent Sans Se Connaître</a></li> <li><a href="#_le_contrat_dag_qui_importe_qui">Le Contrat DAG : Qui Importe Qui</a></li> <li><a href="#_ce_quon_gagne_et_ce_quon_ne_gagne_pas">Ce Qu’on Gagne (Et Ce Qu’on Ne Gagne Pas)</a></li> <li><a href="#_perspectives_le_blog_comme_knowledge_graph_public">Perspectives : Le Blog Comme Knowledge Graph Public</a></li> <li><a href="#_conclusion_le_système_de_fichiers_sait_ce_que_le_template_ignore">Conclusion : Le Système de Fichiers Sait Ce Que le Template Ignore</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 14 minutes</div> <p>Vous lisez un article sur l’intégration de pgvector avec LangChain4j. En bas de page, JBake vous suggère « Articles connexes ». Vous cliquez. C’est un article sur…​ la configuration de Kitty Terminal. Le seul point commun entre les deux ? Ils ont été publiés à moins de quinze jours d’écart. Ce n’est pas une recommandation. C’est un calendrier déguisé en éditorial.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_mardi_12_mai_17h30">La Scène : Mardi 12 Mai, 17h30</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je relis un de mes articles — <a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">celui sur le Knowledge Graph comme outil de compréhension de codebase</a>. Le contenu est dense : nœuds, arêtes, communautés, PlantUML, onboarding. Un article technique de 15 minutes de lecture qui mobilise <code>graphify-gradle</code>, <code>plantuml-gradle</code>, et les concepts de topologie de graphe.</p> </div> <div class="paragraph"> <p>En bas de page, les « Articles connexes » me proposent :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Un article sur Firebase Contact Form (0113)</p> </li> <li> <p>Un article sur le mécanisme Eager/Lazy (0108)</p> </li> <li> <p>Un article sur la migration Gradle script → plugin (0102)</p> </li> <li> <p>Un article sur le cumul d’abonnements Ollama Pro (0120)</p> </li> </ol> </div> <div class="paragraph"> <p>Trois de ces quatre articles n’ont <strong>aucun</strong> rapport avec le Knowledge Graph. Ils sont là parce qu’ils sont les derniers publiés — voisinage temporel, pas voisinage sémantique.</p> </div> <div class="paragraph"> <p>Je regarde le template <code>post.thyme</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml"><!-- Articles connexes (liens internes SEO) --> <th:block th:each="post,postStat : ${published_posts}"> <th:block th:if="${!post.uri.equals(content.uri) and postStat.index lt 4}"> ... </th:block> </th:block></code></pre> </div> </div> <div class="paragraph"> <p><code>published_posts</code> est une liste chronologique. <code>postStat.index lt 4</code> prend les quatre premiers qui ne sont pas le post courant. C’est tout. Aucune logique de similarité. Aucune notion de contenu. Juste une boucle <code>for</code> déguisée en recommandation.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="⚠️"></i> </td> <td class="content"> <div class="paragraph"> <p>Ce n’est pas un bug de JBake. C’est le comportement par défaut de tout générateur de site statique : la liste des posts est plate et ordonnée par date. Le template fait ce qu’il peut avec ce qu’il a.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Mais ce n’est pas une raison pour l’accepter.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_diagnostic_trois_types_de_relations_quaucun_template_ne_voit">Le Diagnostic : Trois Types de Relations Qu’Aucun Template Ne Voit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mon corpus d’articles — 23 posts en 4 mois — a une structure riche que le template chronologique écrase complètement :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Références explicites</strong> : j’utilise <code>xref:</code> massivement dans mes articles.</p> </li> </ol> </div> <div class="paragraph"> <p>L’article 0122 référence 0106 (knowledge graph) et 0116 (compartimentage épistémique). Ces liens sont du <strong>hard linking</strong> éditorial — j’ai délibérément décidé de connecter ces concepts.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tags partagés</strong> : chaque article a des <code>:jbake-tags:</code>. L’article sur</p> </li> </ol> </div> <div class="paragraph"> <p>Graphify + PlantUML (0105) a <code>gradle, graphify, plantuml, knowledge-graph</code>. L’article sur le Knowledge Graph (0106) a <code>knowledge-graph, graphify, plantuml</code>. Trois tags en commun sur sept — 43% de recouvrement.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Entités nommées co-occurrentes</strong> : « pgvector », « RAG », « embedding »</p> </li> </ol> </div> <div class="paragraph"> <p>apparaissent ensemble dans quatre articles différents. « LangChain4j », « Ollama », « plugin Gradle » dans six autres. Ce ne sont pas des tags déclarés — ce sont des <strong>patterns émergents</strong> du corpus que seul un NLP peut détecter.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/trois-couches-relation-articles.svg" alt="trois couches relation articles" width="1752" height="5492"> </div> </div> <div class="paragraph"> <p>Aujourd’hui, mon site n’utilise <strong>aucune</strong> de ces trois couches. Il utilise la couche zéro : l’ordre d’insertion dans une liste Java.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_un_pipeline_gradle_pas_un_appel_llm_à_chaud">La Solution : Un Pipeline Gradle, Pas un Appel LLM à Chaud</h2> <div class="sectionbody"> <div class="paragraph"> <p>La première tentation serait d’appeler un LLM au moment du bake : « Pour cet article, trouve les trois articles les plus similaires dans le corpus. » Ne faites pas ça.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Un appel LLM à chaque <code>./gradlew bake</code> coûte du temps, de l’argent, et introduit de la non-déterminisme dans votre build. La réponse du LLM peut changer entre deux builds sans que le contenu ait changé. Votre CI devient non reproductible, vos tests deviennent flaky.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>La solution est déterministe : un pipeline Gradle qui pré-calcule le graphe de similarité et le stocke dans <code>graph.json</code>. Le template lit le résultat — jamais il ne déclenche un calcul.</p> </div> <div class="sect2"> <h3 id="_larchitecture_bakery_importe_graphify_pas_engine">L’Architecture : Bakery Importe Graphify, Pas Engine</h3> <div class="paragraph"> <p>C’est le point d’architecture le plus important. La tentation serait de câbler la collaboration dans <code>engine/build.gradle.kts</code> : engine applique graphify pour le scan, bakery pour le bake, et engine fait le pont entre les deux.</p> </div> <div class="paragraph"> <p>C’est un anti-pattern. Engine est un <strong>terminal consommateur</strong> — il applique des plugins, il n’implémente pas de logique métier. La règle est : <strong>la charge de la preuve est sur le plugin propriétaire.</strong></p> </div> <div class="imageblock"> <div class="content"> <img src="./images/bakery-import-graphify.svg" alt="bakery import graphify" width="1761" height="5700"> </div> <div class="title">Figure 1. Architecture correcte — Bakery importe Graphify</div> </div> <div class="paragraph"> <p>Le contrat DAG est respecté : bakery (N2) importe graphify (N0), N2 > N0, aucune violation. Engine (N3) importe bakery (N2), N3 > N2, OK.</p> </div> <div class="paragraph"> <p>Engine n’a <strong>aucune</strong> ligne de code qui référence <code>graph.json</code>, <code>relatedPosts</code>, ou toute autre notion de similarité. Il applique bakery, point. La collaboration est interne à bakery.</p> </div> </div> <div class="sect2"> <h3 id="_le_pipeline_scan_graphe_template">Le Pipeline : Scan → Graphe → Template</h3> <div class="paragraph"> <p>Voici le pipeline complet en trois étapes :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Scan</strong> (graphify) : <code>graphify-plugin</code> scanne le workspace. Dans sa</p> </li> </ol> </div> <div class="paragraph"> <p>forme actuelle, il détecte déjà les <code>xref:</code> entre <code>.adoc</code> et les expose dans <code>graph.json</code> comme des edges de type <code>reference</code>.<br> On l’enrichit pour le contenu éditorial : * Parse les métadonnées JBake (<code>:jbake-tags:</code>, <code>:jbake-description:</code>) de chaque <code>.adoc</code> du blog * Calcule les co-occurrences de tags → edges <code>tag_cooccurrence</code> avec poids * Extrait les entités nommées des descriptions via TF-IDF → edges <code>entity_overlap</code> * Injecte une section <code>blog_articles</code> dans le <code>graph.json</code> existant<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Extrait de l'enrichissement graphify pour le blog fun enrichBlogSection(graphJson: File, blogDir: File): GraphJson { val articles = blogDir.listFiles { f -> f.extension == "adoc" } .map { parseJbakeMetadata(it) } val nodes = articles.map { ArticleNode(it.slug, it.title, it.tags) } val edges = mutableListOf<GraphEdge>() // Couche 1 : xref (déjà fait par scanWorkspace) // Couche 2 : co-occurrences de tags for (a in articles) { for (b in articles) { if (a.slug == b.slug) continue val common = a.tags.intersect(b.tags) if (common.isNotEmpty()) { edges.add(GraphEdge( source = a.slug, target = b.slug, type = "tag_cooccurrence", weight = common.size.toDouble() / (a.tags.size + b.tags.size) )) } } } return graphJson.copy( blogArticles = BlogSection(nodes, edges) ) }</code></pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Bake</strong> (bakery) : au moment du <code>./gradlew bake</code>, <code>BakeryPlugin</code> lit</p> </li> </ol> </div> <div class="paragraph"> <p><code>graph.json</code> et résout les articles connexes pour chaque post.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// BakeryPlugin — résolution des articles connexes fun resolveRelatedPosts( currentSlug: String, graph: GraphJson, maxResults: Int = 4 ): List<RelatedPost> { val edges = graph.blogArticles.edges .filter { it.source == currentSlug || it.target == currentSlug } return edges .sortedByDescending { it.weight } .take(maxResults) .map { edge -> val relatedSlug = if (edge.source == currentSlug) edge.target else edge.source graph.blogArticles.nodes.first { it.slug == relatedSlug } } }</code></pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Template</strong> (<code>post.thyme</code>) : le modèle JBake reçoit maintenant une map</p> </li> </ol> </div> <div class="paragraph"> <p>structurée au lieu d’une liste chronologique plate.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml"><!-- Articles connexes basés sur le Knowledge Graph --> <th:block th:if="${relatedPosts != null and !relatedPosts.empty}"> <section class="mt-5 pt-4 border-top"> <h2 class="h4 mb-3">Articles connexes</h2> <th:block th:each="related : ${relatedPosts}"> <div class="mb-2"> <a th:href="${content.rootpath} + ${related.uri}" th:text="${related.title}" class="fw-semibold"></a> <br/> <small class="text-muted"> <th:block th:each="reason,iterStat : ${related.reasons}"> <span class="badge bg-light text-dark" th:text="${reason}"></span> </th:block> </small> </div> </th:block> </section> </th:block></code></pre> </div> </div> <div class="paragraph"> <p>Le template est le même — il ne sait pas <strong>d’où</strong> viennent les données. Seul le contrat entre bakery et JBake a changé : <code>published_posts</code> (liste chronologique) devient <code>relatedPosts</code> (map pondérée par le graphe).</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Le badge « raison » (ex: <code>xref 0122</code>, <code>tag:gradle</code>, <code>cluster:pgvector-rag</code>) explique au lecteur <strong>pourquoi</strong> cet article est connexe. Ce n’est pas juste de la transparence — c’est de la pédagogie sur la topologie de votre propre contenu.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_fallback_chronologique">Fallback Chronologique</h3> <div class="paragraph"> <p>Si <code>graph.json</code> est absent (build local sans scan préalable, premier déploiement, CI qui n’a pas encore intégré le scan graphify), le template doit dégrader gracieusement :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun resolveRelatedPosts(currentSlug: String, graph: GraphJson?): List<RelatedPost> { if (graph != null && graph.blogArticles != null) { return resolveFromGraph(currentSlug, graph) } // Fallback chronologique — même comportement qu'aujourd'hui logger.warn("[bakery] graph.json absent — fallback chronologique") return resolveFromChronology(currentSlug) }</code></pre> </div> </div> <div class="paragraph"> <p>Le comportement par défaut est identique au comportement actuel. Le moteur de recommandation est une <strong>amélioration progressive</strong> — pas un breaking change.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_lontologie_émergente_quand_les_articles_se_regroupent_sans_se_connaître">L’Ontologie Émergente : Quand les Articles Se Regroupent Sans Se Connaître</h2> <div class="sectionbody"> <div class="paragraph"> <p>La couche la plus intéressante est la troisième : l’ontologie émergente. Des articles qui ne se citent pas, qui n’ont pas les mêmes tags, mais qui <strong>parlent de la même chose</strong> sans le savoir.</p> </div> <div class="paragraph"> <p>Prenons un exemple concret. Trois articles de mon corpus :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>0119 — Benchmark DGX Spark vs Cloud Abonnement LLM</p> </li> <li> <p>0121 — Plugin Gradle Piloter Deux Instances Ollama Pro</p> </li> <li> <p>0122 — Ratio Efficacité 27x 45x Flotte Experts IA</p> </li> </ol> </div> <div class="paragraph"> <p>Ces trois articles n’ont <strong>aucun</strong> xref entre eux. Leurs tags ne se recoupent qu’à 20% (« ollama », « llm » communs). Mais un NLP léger sur les descriptions révèle un cluster évident : « coût », « abonnement », « cloud », « GPU », « API key », « Ollama Pro », « efficacité », « ratio ».</p> </div> <div class="paragraph"> <p>Ils forment un cluster ontologique : <strong>l’économie du LLM self-hosted vs cloud</strong>. Ce cluster n’est déclaré nulle part. Il émerge du corpus.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/cluster-ontologique-exemple.svg" alt="cluster ontologique exemple" width="1739" height="5456"> </div> </div> <div class="paragraph"> <p>Ce cluster ontologique devient un edge composite dans <code>graph.json</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "source": "0119-benchmark-dgx-spark", "target": "cluster:economie-llm", "type": "entity_cluster", "weight": 0.73, "metadata": { "clusterLabel": "Économie LLM Self-Hosted vs Cloud", "commonEntities": ["coût", "GPU", "abonnement", "Ollama Pro", "ratio"], "articlesInCluster": [ "0119-benchmark-dgx-spark", "0121-ollama-pro-deux-instances", "0122-ratio-efficacite-flotte-experts" ] } }</code></pre> </div> </div> <div class="paragraph"> <p>Le NLP est volontairement léger — TF-IDF + cosine similarity sur les descriptions. Pas besoin de BERT, pas besoin de modèle de langage. Le corpus fait 23 articles, la matrice de similarité tient dans un fichier JSON de 50 Ko.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>La puissance du NLP ne vient pas de la sophistication de l’algorithme, mais de la <strong>taille du corpus</strong> et de la <strong>qualité des descriptions</strong>. Une <code>:jbake-description:</code> bien écrite de 150 caractères contient plus de signal pour TF-IDF qu’un article entier de 3000 mots.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_le_contrat_dag_qui_importe_qui">Le Contrat DAG : Qui Importe Qui</h2> <div class="sectionbody"> <div class="paragraph"> <p>C’est le point où la discipline architecturale paie. Le DAG N0→N3 défini dans <code>engine/build.gradle.kts</code> donne une règle simple : aucun projet n’importe un projet de niveau supérieur.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 27.2728%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Plugin consommateur</th> <th class="tableblock halign-left valign-top">Plugin importé</th> <th class="tableblock halign-left valign-top">Niveau consommateur</th> <th class="tableblock halign-left valign-top">Niveau importé</th> <th class="tableblock halign-left valign-top">Valide ?</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">bakery-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">graphify-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ N2 > N0 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">engine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bakery-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ N3 > N2 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">engine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">graphify-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Technique OK, mais <strong>conceptuellement faux</strong> — la collaboration est interne à bakery</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Engine applique bakery. Bakery applique graphify. C’est tout. Si un jour je veux ajouter le vector store codebase (N1) pour de la recherche sémantique cross-corpus, bakery l’importe aussi. Engine ne change pas.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Le pattern est : <strong>le plugin N2 est le hub de ses propres dépendances</strong>. Engine N3 n’est pas un hub — c’est un terminal qui applique des hubs.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ce_quon_gagne_et_ce_quon_ne_gagne_pas">Ce Qu’on Gagne (Et Ce Qu’on Ne Gagne Pas)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le gain principal est éditorial, pas technique :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Avant</th> <th class="tableblock halign-left valign-top">Après</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Articles connexes = 4 derniers posts</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Articles connexes = top 4 par poids dans le Knowledge Graph</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Lecteur lit du RAG → recommandation Kitty Terminal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lecteur lit du RAG → recommandation pgvector, chunking, vector store</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Zéro transparence sur le pourquoi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Badge <code>xref 0122</code>, <code>tag:gradle</code>, <code>cluster:rag</code> visible</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake standard, zéro effort, zéro valeur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pipeline Gradle déterministe, reproductible, testable</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune courbe d’apprentissage pour le lecteur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le lecteur découvre la <strong>topologie</strong> de mon contenu</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Ce qu’on <strong>ne</strong> gagne pas :</p> </div> <div class="ulist"> <ul> <li> <p>Ce n’est pas un « vrai » moteur de recommandation (pas de collaborative</p> </li> </ul> </div> <div class="paragraph"> <p>filtering, pas d’A/B testing, pas de feedback loop)</p> </div> <div class="ulist"> <ul> <li> <p>La qualité dépend de la richesse des métadonnées JBake — si vos</p> </li> </ul> </div> <div class="paragraph"> <p>descriptions sont vides, TF-IDF ne voit rien</p> </div> <div class="ulist"> <ul> <li> <p>Le NLP est offline — les nouveaux articles ne sont clusterisés qu’au</p> </li> </ul> </div> <div class="paragraph"> <p>prochain scan (c’est bien : le build reste déterministe)</p> </div> </div> </div> <div class="sect1"> <h2 id="_perspectives_le_blog_comme_knowledge_graph_public">Perspectives : Le Blog Comme Knowledge Graph Public</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette fonctionnalité ouvre une perspective plus large : et si <code>cheroliv.com</code> devenait lui-même un <strong>knowledge graph navigable</strong> ?</p> </div> <div class="paragraph"> <p>Les articles sont des nœuds. Les tags sont des communautés. Les xref sont des arêtes. Le lecteur ne lit plus un article isolé — il navigue dans un <strong>graphe de connaissance</strong> dont l’article courant est le point d’entrée.</p> </div> <div class="paragraph"> <p>Imaginez une page d’accueil qui affiche non pas la liste chronologique des derniers posts, mais une <strong>carte du corpus</strong> : clusters ontologiques, articles pivots (ceux avec le plus d’arêtes), chemins de lecture recommandés (« Si vous avez aimé l’article sur Graphify, lisez ensuite celui sur le Knowledge Graph comme outil de compréhension »).</p> </div> <div class="paragraph"> <p>Ce n’est plus un blog. C’est un <strong>atlas sémantique</strong>.</p> </div> <div class="paragraph"> <p>Et ce n’est pas de la science-fiction. Le <code>graph.json</code> existe déjà. Il ne lui manque que l’interface de navigation.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_système_de_fichiers_sait_ce_que_le_template_ignore">Conclusion : Le Système de Fichiers Sait Ce Que le Template Ignore</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce que j’ai conçu ce mardi soir, c’est le remplacement d’une heuristique paresseuse (l’ordre chronologique) par une représentation fidèle de la structure de mon corpus (le Knowledge Graph).</p> </div> <div class="paragraph"> <p>Le template <code>post.thyme</code> ne change pas. Ce qui change, c’est ce qu’on lui donne à manger. Avant : une liste Java ordonnée par <code>date</code>. Après : un graphe pondéré issu de trois couches d’analyse — xrefs, co-occurrences de tags, et ontologie émergente par NLP.</p> </div> <div class="paragraph"> <p>La boucle est bouclée. graphify scanne le workspace. Bakery lit le graphe et nourrit le template. Le lecteur voit des recommandations pertinentes. Et engine — le chef d’orchestre — ne sait même pas que tout ça existe.</p> </div> <div class="paragraph"> <p>C’est ça, la bonne architecture. Chaque plugin fait une chose. Et le terminal consommateur n’a pas besoin de savoir comment.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0105_integrer_graphify_workflow_gradle_post.html">Article 0105 — Intégrer Graphify dans un workflow Gradle</a></p> </li> <li> <p><a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">Article 0106 — Le Knowledge Graph comme outil de compréhension</a></p> </li> <li> <p><a href="0117_granularisation_oss_css_repositorie_workspace_post.html">Article 0117 — La Granularisation OSS/CSS</a></p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Article 0121 — Plugin Gradle Piloter Deux Instances Ollama Pro</a></p> </li> <li> <p><a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">Article 0122 — 27× à 45× plus efficace : flotte d’experts IA</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html Mon, 11 May 2026 00:00:00 +0000 blog/2026/0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_problème_pourquoi_le_fine_tune_et_pas_le_rag">Le problème : pourquoi le fine-tune et pas le RAG ?</a></li> <li><a href="#_lidée_une_flotte_dexperts_pas_un_seul_modèle">L’idée : une flotte d’experts, pas un seul modèle</a></li> <li><a href="#_la_codebase_sous_la_loupe_7_900_fichiers_144_000_lignes">La codebase sous la loupe : 7 900 fichiers, 144 000 lignes</a></li> <li><a href="#_linférence_23_modèles_sur_ollama_cloud_à_partir_de_17mois">L’inférence : 23 modèles sur Ollama Cloud à partir de 17€/mois</a> <ul class="sectlevel2"> <li><a href="#_on_démarre_à_17mois_on_scale_si_besoin">On démarre à 17€/mois, on scale si besoin</a></li> <li><a href="#_le_routing_en_pratique">Le routing en pratique</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 22 minutes</div> <p>Quand on utilise un LLM pour du développement logiciel au quotidien, on finit toujours par butter sur le même mur : le modèle ne connaît pas <strong>votre</strong> codebase. Il ne sait pas que vous utilisez tel pattern de <a href="https://fr.wikipedia.org/wiki/Graphe_orient%C3%A9_acyclique">DAG</a>, telle convention Gradle, telle stratification épistémique dans vos <a href="https://fr.wikipedia.org/wiki/AsciiDoc"><code>.adoc</code></a>. Alors on lui injecte du contexte, on répète, on corrige, on itère. Et le temps — et l’argent — passent.</p> </div> <div class="paragraph"> <p>J’ai donc posé la question brutalement : combien coûterait une équipe de modèles fine-tunés sur mon workspace, capables de cracher du code <strong>dans mon style</strong> sans avoir besoin qu’on leur explique à chaque fois ? Et surtout : comment cette approche se compare-t-elle aux solutions propriétaires classiques — Claude, GPT, Gemini, Grok ?</p> </div> <div class="paragraph"> <p>La réponse m’a surpris. Beaucoup moins que ce que j’imaginais. Et le rapport coût/efficacité face aux géants du secteur est indécent. Voici le détail complet.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_pourquoi_le_fine_tune_et_pas_le_rag">Le problème : pourquoi le fine-tune et pas le RAG ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le RAG, c’est bien. <a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">Mon knowledge graph</a> et <a href="0116_compartimentage_epistemique_automatise_llm_post.html">mon compartimentage épistémique</a> fonctionnent. Mais le RAG a un défaut fondamental : à chaque requête, tu dois réinjecter le contexte pertinent. Ton prompt s’allonge, ta latence explose, et le modèle n'<strong>intériorise</strong> jamais tes patterns — il les lit à chaque fois comme un document externe.</p> </div> <div class="paragraph"> <p>Le fine-tune, lui, c’est la mémoire musculaire. Le modèle <strong>sait</strong> que tu écris <code>build.gradle.kts</code> avec des tâches enregistrées via <code>tasks.register</code>, que tes <code>AGENTS.adoc</code> suivent une syntaxe standardisée, que ton workspace est structuré en boroughs. Il n’a pas besoin qu’on lui rappelle.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Le fine-tune n’est pas un remplacement du RAG. C’est une couche complémentaire. Le RAG reste pertinent pour les données qui changent souvent (logs, tickets, commits récents). Le fine-tune est pour la connaissance <strong>structurelle</strong> et <strong>stylistique</strong> de long terme.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_lidée_une_flotte_dexperts_pas_un_seul_modèle">L’idée : une flotte d’experts, pas un seul modèle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un seul modèle fine-tuné sur tout mon workspace, c’est déjà bien. Mais c’est sous-optimal. Mon workspace couvre des domaines très différents :</p> </div> <div class="ulist"> <ul> <li> <p>Gradle plugins (Kotlin, convention plugins, composite builds)</p> </li> <li> <p>Moteur DAG (Kotlin, planification, exécution)</p> </li> <li> <p>Agents LLM (Python, LangChain4j, RAG)</p> </li> <li> <p>Documentation architecturale (AsciiDoc, gouvernance)</p> </li> <li> <p>Infra/DevOps (Docker, GitHub Actions, CI/CD)</p> </li> </ul> </div> <div class="paragraph"> <p>Un modèle unique devrait être bon partout, excellent nulle part. La solution ? Une <strong>flotte de modèles spécialisés</strong>, avec un orkestrateur qui route chaque requête vers le bon expert.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/fleet-architecture.svg" alt="fleet architecture" width="871" height="462"> </div> </div> <div class="paragraph"> <p>La flotte totale : <strong>1 orkestrateur + 22 experts = 23 modèles</strong>. Et le coût d’inférence mensuel ? <strong>17€/mois</strong> en abonnement Ollama Pro annual — extensible par cumul de comptes si les quotas sont dépassés, comme démontré dans <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">ma méthode Docker multi-comptes</a>. On part de 17€, on ajoute 20€ par palier selon le besoin réel. Pas de gaspillage.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_codebase_sous_la_loupe_7_900_fichiers_144_000_lignes">La codebase sous la loupe : 7 900 fichiers, 144 000 lignes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant d’estimer le coût du training, il faut savoir quoi entraîner. J’ai audité mon workspace en excluant rigoureusement tout ce qui est ignoré par Git :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- build/ out/ node_modules/ runtimes/ .gradle/ dist/ target/ venv/ __pycache__/ .cache/ .tox/ ---- Voici le résultat pour les fichiers trackés uniquement : [cols="2,2"] |=== |Métrique |Valeur |Fichiers source trackés |**7 896** |Lignes de code (LOC) |**143 805** |Repositories Git |**26** |Principaux langages |Kotlin (1 903), AsciiDoc (2 765), Python (5 029) |=== [IMPORTANT] ==== Ces 5 000+ fichiers Python incluent les `runtimes/` des notebooks et scripts utilitaires. Le cœur applicatif (plugins Gradle, moteur DAG, agents) est principalement en Kotlin et AsciiDoc. ==== À partir de cette masse, j'estime pouvoir générer un dataset synthétique de **~170 millions de tokens** via un LLM instructeur (distillation de la codebase en paires instruction/réponse). === Détail du dataset par type d'expert [source,text] ---- Dataset maître (généraliste V4-Flash) : 50M tokens Expert Gradle/Build : 15M tokens Expert Kotlin/DAG : 15M tokens Expert AsciiDoc/Gouvernance: 15M tokens Expert Agent/LLM/Python : 15M tokens Expert Infra/CI-CD : 15M tokens Micro-experts Qwen/Gemma : ~5M tokens chacun ---- == Le choix des modèles : 100% MoE, zéro dense C'est là que l'architecture devient vraiment efficiente. Un modèle *dense* active tous ses poids à chaque token. Un modèle *MoE* (Mixture of Experts) n'active qu'une fraction de ses paramètres. Le coût d'inférence — et de fine-tuning — est proportionnel aux paramètres **activés**, pas aux paramètres **stockés**. Regardons ce que le marché propose en MoE aujourd'hui sur Ollama Cloud : [cols="3,2,2,1,3"] |=== |Modèle |Total params |Activés |Activation |Ollama Cloud |DeepSeek V4-Pro |1.6T |49B |3.1% |✅ natif |DeepSeek V4-Flash |292B |13B |4.5% |✅ natif |Gemma 4 26B-A4B |26B |3.8B |14.6% |✅ natif |Qwen3.6-35B-A3B |35B |3B |8.6% |❌ (pas encore intégré) |Qwen3.5-35B-A3B |35B |3B |8.6% |✅ natif |❌ Qwen3.5-27B |27B |27B |100% dense |éliminé |❌ Qwen3.5-4B/9B |4B/9B |4B/9B |100% dense |éliminé |❌ Gemma 4 31B |31B |31B |100% dense |éliminé |🧪 Gemma 4 E2B/E4B |5B/8B |5B/8B |100% dense |validation pipeline |=== [CAUTION] ==== Le ratio d'activation est le critère discriminant. Un Gemma 4 26B-A4B n'active que 3.8B de ses 26B de paramètres — c'est 7× moins qu'un dense 27B, pour des performances de coding agent comparables (77.1% vs 80% sur LiveCodeBench v6). ==== === Pourquoi j'abandonne les modèles denses L'exception : les Gemma 4 E2B et E4B. Ces deux modèles, sous Apache 2.0, sont parfaits pour tester et valider un pipeline de training à moindre coût. Un run de 2-3h sur un E2B coûte moins de $5 — si le dataset ou les hyperparamètres sont foireux, on le sait pour une poignée de dollars. Une fois le pipeline rodé, ils peuvent même servir pour les ultra-micro-tâches (reformatage trivial, classification binaire). Mais pour les experts de la flotte principale, je reste sur du MoE. Voici pourquoi : .Mais pas que : les Gemma 4 E2B/E4B, experts de l'anonymisation fine [NOTE] ==== Google a conçu ces petits modèles comme compétitifs en tool calling natif — ils savent appeler des fonctions, manipuler des regex, chercher des motifs. Une fois fine-tunés sur des exemples d'anonymisation (emails, tokens, UUIDs, chemins de fichiers), ils deviennent des **anonymiseurs de dataset** ultra-rapides. On leur file un bloc de texte brut, ils appellent `sed`/`regex` via un tool call et retournent le bloc nettoyé. Le coût d'inférence est dérisoire : 5B activés, ça tient sur une seule GPU d'entrée de gamme. Ces modèles ne sont pas des experts métier — ce sont des **ouvriers spécialisés** dans la chaîne de production du dataset. ==== * Sa VRAM d'entraînement (même en QLoRA) est proportionnelle aux **27B totaux** * Son temps de training est proportionnel aux **27B activés** Comparons avec un Qwen3.6-35B-A3B (MoE) : [cols="3,2,2,2"] |=== | |Qwen3.5-27B (dense) |Qwen3.6-35B-A3B (MoE) |Ratio |VRAM QLoRA |~55 GB |~35 GB |1.6× |GPU-heures (8M tok) |~12h |~4h |**3×** |Coût par fine-tune |~$24 |~$8 |**3×** |SWE-bench Verified |75.0% |73.4% |comparable |=== Le MoE coûte 3× moins à entraîner pour des performances agent-coding à 5% près. Sur 22 experts, l'écart se chiffre en milliers d'euros. == Estimation du training : 811 H100-heures J'ai ventilé le coût de training modèle par modèle, en QLoRA 4-bit, avec les datasets décrits plus haut. === Micro-experts MoE légers (3-3.8B activés) Ces modèles nécessitent 1 H100 (80 GB) par run. La VRAM du modèle en Q4 est d'environ 13-18 GB, laissant large pour les états d'optimiseur LoRA et les activations. [cols="4,2,3,2"] |=== |Modèle |Nb de runs |GPU-h/run |Total GPU-h |Gemma 4 26B-A4B-FT |6 |3.5 h |**21 h** |Qwen3.6-35B-A3B-FT |5 |4.0 h |**20 h** |Qwen3.5-35B-A3B-FT |5 |4.0 h |**20 h** |*Sous-total micro* | | |*61 h* |=== === Exécutifs V4-Flash (13B activés / 292B stockés) Le DeepSeek V4-Flash est un cas particulier. Même si seuls 13B sont activés par token, le modèle complet en Q4 pèse ~142 GB — tous les experts doivent être en VRAM pendant le training. Il faut donc **3× H100** par run pour être confortable. [cols="4,2,3,3,2"] |=== |Modèle |Dataset |GPUs |Heures |Total GPU-h |V4-Flash-Base généraliste |50M tok |3× H100 |50 h |**150 h** |V4-Flash expert ×5 |15M tok |3× H100 |40 h |**600 h** |*Sous-total exécutifs* | | | |*750 h* |=== [cols="3,2,1"] |=== |**TOTAL** | |**811 H100-h** |=== [NOTE] ==== À titre de comparaison, un full fine-tune du V4-Flash (sans QLoRA, tous les poids) coûterait ~4 000 H100-h rien que pour les 6 modèles. Le QLoRA divise le coût par 5. C'est le seul moyen de rendre le projet économiquement viable à cette échelle. ==== === Tarifs GPU : qui loue quoi en mai 2026 J'ai benchmarké les principaux loueurs de H100. Le prix au compteur, pour 811 heures. [cols="3,2,2,2"] |=== |Loueur |$/H100·h |Total 811h |Fiabilité |**Vast.ai spot** |$1.60 |**$1 298** |★★☆ interruptible |**Crusoe Cloud** |$2.00 |**$1 622** |★★★★ datacenter fiable |FluidStack |$1.98 |$1 606 |★★★ |TensorDock |$1.80 |$1 460 |★★☆ |RunPod |$2.29 |$1 857 |★★★ bon compromis |CoreWeave |$2.25 |$1 825 |★★★★ entreprise |Lambda Labs |$2.49 |$2 019 |★★★★ premium |=== [TIP] ==== Vast.ai spot est le moins cher mais tes runs peuvent être interrompus à tout moment. Pour du training, c'est risqué. Crusoe à $2.00/h est le meilleur rapport fiabilité/prix. Le surcoût de $324 vs Vast vaut la tranquillité d'esprit. ==== === Wall-clock : combien de temps pour tout entraîner ? Avec un seul nœud 3× H100, les 31 runs (1 généraliste + 30 experts) prennent environ **12 jours** en séquentiel. Si tu loues 2 nœuds en parallèle, ça tombe à **6 jours**. En pratique, les micro-experts peuvent tourner sur des nœuds séparés (1 H100 chacun) pendant que les V4-Flash occupent le nœud 3× H100. Avec une planification intelligente :</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>Nœud A (3× H100) : V4-Flash généraliste → V4-Flash experts ×5 (11 jours) Nœud B (1× H100) : Gemma 4 26B ×6 → Qwen 36 ×5 → Qwen 35 ×5 (6 jours)</pre> </div> </div> <div class="paragraph"> <p>7 jours de location, tout plié.</p> </div> </div> </div> <div class="sect1"> <h2 id="_linférence_23_modèles_sur_ollama_cloud_à_partir_de_17mois">L’inférence : 23 modèles sur Ollama Cloud à partir de 17€/mois</h2> <div class="sectionbody"> <div class="paragraph"> <p>C’est la partie la plus élégante de l’architecture.</p> </div> <div class="paragraph"> <p>Ollama Cloud permet d’uploader des modèles privés (fonctionnalité du plan Pro). Mes 22 modèles fine-tunés sont poussés en <code>.gguf</code> sur mon espace Ollama, marqués comme privés, et accessibles via l’API standard.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/inference-flow.svg" alt="inference flow" width="918" height="524"> </div> </div> <div class="sect2"> <h3 id="_on_démarre_à_17mois_on_scale_si_besoin">On démarre à 17€/mois, on scale si besoin</h3> <div class="paragraph"> <p>Le plan Pro Ollama (17€/mois en annuel) autorise 3 modèles cloud concurrents. Dans cette architecture, je n’ai jamais besoin de plus de 2-3 experts simultanément :</p> </div> <div class="ulist"> <ul> <li> <p>La phase de classification (V4-Pro) occupe 1 slot, quelques secondes</p> </li> <li> <p>L’expert ciblé occupe 1 slot, le temps de générer sa réponse</p> </li> <li> <p>Le 3ème slot reste en réserve pour les tâches parallèles</p> </li> </ul> </div> <div class="paragraph"> <p>Si l’usage augmente, j’ajoute des comptes Pro supplémentaires via la méthode Docker décrite dans <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">mon article sur le cumul d’abonnements</a>. Pas de plan Max à 100€/mois — je n’ajoute que ce dont j’ai réellement besoin.</p> </div> <div class="paragraph"> <p>Le seul facteur limitant est le <strong>quota GPU-time</strong> mensuel d’Ollama (50× le plan gratuit pour Pro). Pour mon usage de quelques centaines de requêtes par jour, c’est amplement suffisant.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Le coût marginal d’un appel à V4-Pro (49B activés) vs Gemma 4 26B-A4B (3.8B activés) est le <strong>même pour moi : zéro</strong>. C’est le forfait Ollama qui absorbe la différence de compute. Mon seul indicateur est la latence.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_le_routing_en_pratique">Le routing en pratique</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- Volume de requêtes estimé : ~500/jour ├─ 50% → Gemma 4 26B-A4B-FT (micro, 3.8B actifs) │ Formatage AsciiDoc, scripts simples, conventions nommage │ ├─ 25% → V4-Flash-FT (exécutif, 13B actifs) │ Plugins Gradle, refactoring Kotlin, génération DAG │ ├─ 15% → Qwen 35B MoE-FT (micro, 3B actifs) │ Tâches intermédiaires, review de code, documentation │ └─ 10% → V4-Pro (orkestrateur, 49B actifs) Décisions architecturales, refactoring transverse, problèmes vraiment nouveaux ---- La masse du trafic passe par les petits. Le gros modèle n'intervient qu'en dernier recours. == La comparaison qui fait mal : Claude, GPT, Gemini, Grok vs ma flotte C'est ici que l'écart devient vertigineux. Regardons ce que coûterait le même volume de travail (500 requêtes/jour, ~300 tokens input + 2 000 tokens output en moyenne) avec les solutions propriétaires du marché en mai 2026. === Anthropic — Claude (tarifs mai 2026) Anthropic a récemment *baissé* ses prix. La pression des solutions open-weight comme DeepSeek et Qwen se fait sentir. [cols="3,2,2,2,2"] |=== |Modèle |Input $/MTok |Output $/MTok |Coût/jour |**Coût/mois** |Opus 4.7 (le + intelligent) |$5 |$25 |$25.75 |**$772** |Sonnet 4.6 (équilibré) |$3 |$15 |$15.45 |**$463** |Haiku 4.5 (le + rapide) |$1 |$5 |$5.15 |**$154** |=== [CAUTION] ==== Ces tarifs sont *après* la dernière baisse de prix d'Anthropic (mai 2026). Avant cela, Opus était à $15/$75 par MTok. La peur de l'open-weight est réelle. ==== Même le modèle le moins cher de Claude — Haiku 4.5 à **154€/mois** — coûte 9× plus que mon abonnement Ollama Pro à 17€. Et Haiku ne connaît pas ma codebase, ne génère pas dans mon style, et nécessite du prompt engineering systématique. Le plus intelligent — Opus 4.7 — explose le budget à **772€/mois** pour un volume modeste de 500 requêtes par jour. Soit **45× plus cher** que ma solution. === OpenAI — GPT (tarifs mai 2026) [cols="3,2,2,2,2"] |=== |Modèle |Input $/MTok |Output $/MTok |Coût/jour |**Coût/mois** |GPT 5.5 (le + intelligent) |$5 |$30 |$30.90 |**$927** |GPT 5.4 (standard) |$2.50 |$15 |$15.45 |**$463** |GPT 5.4 Mini |$0.75 |$4.50 |$4.64 |**$139** |=== Même le modèle « économique » d'OpenAI — GPT 5.4 Mini à 139€/mois — coûte 8× mon abonnement, pour un modèle qui ne sait *rien* de mes conventions et nécessite du prompt engineering lourd. GPT 5.5, leur flagship : **927€/mois**. Pour du *zero-shot* sur ma codebase. Avec 2-3 itérations par tâche à cause du style non maîtrisé, le vrai coût mensuel double facilement. === Google — Gemini (tarifs mai 2026) [cols="3,2,2,2,2"] |=== |Modèle |Input $/MTok |Output $/MTok |Coût/jour |**Coût/mois** |Gemini 3.1 Pro (High) |$3.50 |$17.50 |$18.00 |**$540** |Gemini 3.1 Pro |$2 |$10 |$10.30 |**$309** |Gemini 3 Flash |$0.30 |$1.50 |$1.54 |**$46** |=== Gemini 3 Flash à 46€/mois est compétitif en prix pur — mais sans fine-tune, il génère du code « générique ». Pas du code *Cheroliv*. === Grok — xAI (tarifs mai 2026) [cols="3,2,2,2,2"] |=== |Modèle |Input $/MTok |Output $/MTok |Coût/jour |**Coût/mois** |Grok 4 |$4 |$16 |$16.48 |**$494** |Grok 4 Mini |$0.80 |$3.20 |$3.30 |**$99** |=== === Microsoft — Azure OpenAI (tarifs mai 2026) Azure applique les mêmes prix que l'API OpenAI directe, mais facture en plus l'infrastructure et le réseau. Il faut compter un surcoût de 10-20% pour le service managé. [cols="3,2,2,2,2"] |=== |Modèle |Input $/MTok |Output $/MTok |Coût/jour |**Coût/mois** |GPT 5.4 (Azure, Global) |$2.50 |$15 |$15.45 |**$463** |GPT 5.4 + infrastructure |surcoût 15% |surcoût 15% |$17.77 |**$533** |=== [NOTE] ==== Les tarifs ci-dessus concernent l'API, pas les abonnements « chat » (Claude Pro à $20/mois, ChatGPT Plus à $20/mois). On compare ici l'usage *développeur*, celui où tu enchaînes des centaines de requêtes par jour via API pour générer, refactorer, documenter. Les abonnements grand public ont des quotas qui explosent bien avant 500 requêtes/jour. ==== === Le tableau comparatif final [cols="3,2,2,2,2,2"] |=== |Solution |Connaissance codebase |Style intégré |Coût/mois |Itérations |**Coût effectif** |**Ma flotte (Ollama Pro)** |✅ Fine-tunée |✅ Dans les poids |**17€** |0-1 |**17€** |Claude Opus 4.7 |❌ Zero-shot |❌ Prompt nécessaire |$772 |2-3 |$1 500-2 300 |Claude Haiku 4.5 |❌ Zero-shot |❌ Prompt nécessaire |$154 |3-4 |$460-615 |GPT 5.5 |❌ Zero-shot |❌ Prompt nécessaire |$927 |2-3 |$1 854-2 781 |GPT 5.4 |❌ Zero-shot |❌ Prompt nécessaire |$463 |2-3 |$925-1 390 |GPT 5.4 Mini |❌ Zero-shot |❌ Prompt nécessaire |$139 |3-5 |$417-695 |Gemini 3.1 Pro High |❌ Zero-shot |❌ Prompt nécessaire |$540 |2-3 |$1 080-1 620 |Grok 4 |❌ Zero-shot |❌ Prompt nécessaire |$494 |2-3 |$988-1 482 |**Azure GPT 5.4** |❌ Zero-shot |❌ Prompt nécessaire |$533 |2-3 |$1 066-1 600 |=== [plantuml, cost-comparison, svg] ---- @startuml skinparam backgroundColor #FAFAFA title Rapport coût/efficacité — ma flotte vs le marché (mai 2026) rectangle "17€/mois" as OURS #4ECDC4 rectangle "Opus 4.7\n772€" as OPUS #FF6B6B rectangle "Sonnet 4.6\n463€" as SONNET #FF8B94 rectangle "GPT 5.5\n927€" as GPT #FFD93D rectangle "Gemini 3.1 Pro\n540€" as GEMINI #6C5CE7 rectangle "Grok 4\n494€" as GROK #A8E6CF rectangle "Haiku 4.5\n154€" as HAIKU #DFE6E9 rectangle "GPT 5.4 Mini\n139€" as MINI #B2BEC3 note bottom of OURS Avec fine-tune intégré. Zéro prompt engineering. 90%+ first-shot correct. end note @enduml ---- 17€/mois pour 23 experts IA fine-tunés. Le flagship Claude Opus 4.7 coûte **45× plus cher** pour une qualité inférieure sur *mon* codebase. GPT 5.5 coûte **54× plus cher**. Même le modèle le moins cher du marché (Gemini Flash à 46€) coûte **2.7× plus** sans la connaissance de mon workspace. Le verdict est sans appel : le fine-tune sur architectures MoE, en 2026, n'est pas juste « moins cher ». C'est un facteur d'efficacité de **27× à 54×** sur le rapport coût/qualité face aux solutions propriétaires. Anthropic, OpenAI, Google — tous le savent, et c'est pour ça qu'ils baissent leurs prix en panique. == Le facteur d'efficacité : 5-8× vs utiliser V4-Pro seul Comparons les deux extrêmes. === Scénario A : V4-Pro seul pour tout [cols="3,2"] |=== |Métrique |Valeur |Connaissance de la codebase |0 (zero-shot) |Convention naming |40-60% first-shot correct |Prompt engineering nécessaire |Oui, systématique |Itérations par tâche |2-3 |Coût inférence |$100/mois (Ollama Max) |Latence moyenne |~20 tok/s + réseau |=== === Scénario B : Flotte MoE orchestrée [cols="3,2"] |=== |Métrique |Valeur |Connaissance de la codebase |Intégrée (fine-tune) |Convention naming |90-95% first-shot correct |Prompt engineering |Non (le style est dans les poids) |Itérations par tâche |0-1 |Coût inférence |$60/mois (3× Ollama Pro) |Latence moyenne |~50 tok/s (modèles légers) |=== [cols="4,2,2,2"] |=== |Dimension |V4-Pro seul |Flotte MoE |Facteur |Coût mensuel cloud |$100 |**$60** |1.7× |Contexte à injecter |Élevé (prompt) |**Zéro** |∞ |Itérations moyennes |2-3 |**0-1** |2-3× |Latence ressentie |20 tok/s |50 tok/s |**2.5×** |First-shot correct |50% |90%+ |**1.8×** |=== **Facteur d'efficacité global : 5-8×** — en productivité développeur ressentie. [NOTE] ==== Le facteur ne se mesure pas en tokens ou en dollars. Il se mesure en « combien de temps je passe à expliquer au modèle ce qu'il devrait déjà savoir ». Avec les modèles fine-tunés, ce temps tend vers zéro. ==== == Le budget complet : un investissement one-shot, un forfait ridicule [cols="3,2"] |=== |Poste |Montant |Training GPU (811 H100-h, Crusoe $2/h) |**$1 622** |Génération dataset synthétique (API LLM) |**$400** |Inference (Ollama Pro annuel, $17/mois) |**$204** |**Total première année** |**$2 226** |**Mensuel équivalent** |**$186** |**Coût par requête estimé** |< $0.01 |=== [plantuml, budget-breakdown, svg] ---- @startuml skinparam backgroundColor #FAFAFA rectangle "Budget Année 1 : $2 226" as Total #E8E8E8 { rectangle "Training GPU\n$1 622 (73%)" as Train #FF6B6B rectangle "Dataset\ndistillation\n$400 (18%)" as Data #FFE66D rectangle "Ollama Pro\n$204 (9%)" as Cloud #4ECDC4 } note bottom of Total $186/mois équivalent année 1. Dès l'an 2 : $17/mois. Amorti par ~$235 de CA mensuel avec marge 95%. end note @enduml ---- $186/mois la première année, **$17/mois** dès l'an 2. Le prix d'un abonnement Netflix premium, pour une équipe de 23 experts IA disponibles 24/7, qui écrivent du code *dans mon style* sans que j'aie besoin de leur expliquer mes conventions. === Le calcul de rentabilité Avec edster.cloud et sa marge de ~95%, le point mort est à **~$2 340 de CA supplémentaire** sur l'année. En pratique : * 1 mission de pilotage software → $3 000-5 000 → investissement couvert + profit * 1 formation corporate → $5 000-10 000 → confortable * L'upsell implicite : "mon équipe d'IA maîtrise ma forge logicielle" → différenciant commercial À partir de l'an 2, le training n'est plus à payer (sauf mise à jour du dataset). Le coût annuel tombe à **$204** ($17/mois). Le ratio coût/valeur est celui d'une licorne : quasi nul. == Les limites de l'exercice Ceci reste une *estimation au doigt mouillé*. Plusieurs variables peuvent faire varier le budget : [cols="2,3"] |=== |Variable |Impact |Génération du dataset synthétique |Si l'API de distillation merde (hallucinations, paires mal formées), il faut du temps humain pour curater. Coût caché. |Quotas GPU-time Ollama |Si l'usage dépasse les quotas du plan Pro, il faudra monter en gamme ou basculer sur du GPU dédié. |Qualité effective des fine-tunes |Un fine-tune raté → à refaire. Le vrai risque c'est les hyperparamètres, pas la location GPU. |Évolution rapide des modèles |Les Qwen3.6/Gemma 4 sont sortis il y a < 1 mois. Dans 6 mois, la génération suivante sera meilleure ET moins chère à fine-tuner. |=== [WARNING] ==== Ne lancez pas 811 heures de training sans avoir d'abord testé le pipeline sur *un seul* micro-modèle. Un run de 3-4h sur un Qwen 35B-A3B coûte $8. Si le dataset est pourri, vous le saurez pour $8, pas pour $1 622. ==== == Conclusion : le fine-tune est devenu un luxe accessible Il y a un an, fine-tuner un modèle de 292B paramètres (même en QLoRA) relevait de la recherche. Aujourd'hui, en mai 2026, c'est un projet faisable pour un développeur indépendant : * **811 H100-heures** de training — $1 622 chez Crusoe * **23 modèles spécialisés** chargés sur Ollama Cloud — **$17/mois** * **0 serveur, 0 GPU local, 0 maintenance infra** La démocratisation est venue de trois facteurs convergents : 1. **Les architectures MoE** — qui permettent de fine-tuner efficacement des modèles dont seule une fraction des poids est activée 2. **Les plans fixes d'Ollama Cloud** — qui transforment un coût variable (per-token) en coût fixe (abonnement) 3. **Les modèles open-weight de qualité** — DeepSeek V4, Qwen3.6, Gemma 4 sont sous licences MIT/Apache 2.0 "Civilisation advances by extending the number of important operations which we can perform without thinking about them." Le fine-tune, c'est exactement ça : une opération que tu délègues à la machine pour ne plus avoir à y penser. Et en 2026, ça coûte moins cher qu'un développeur junior mensualisé. --- _Article publié le {jbake-date}_ == Modèles fine-tunés de la flotte [cols="2,2,2,2,3"] |=== |Taille activée |Nombre |Modèle de base |Domaine |Dataset |13B |1 |DeepSeek-V4-Flash-Base |Workspace général |50M tokens |13B |5 |DeepSeek-V4-Flash |Gradle, Kotlin, DAG, Doc, Infra |15M tokens |3.8B |6 |Gemma 4 26B-A4B |Micro-tâches, formatage, scripts |5M tokens |3B |5 |Qwen3.6-35B-A3B |Refactoring, review, doc intermédiaire |5M tokens |3B |5 |Qwen3.5-35B-A3B |Tâches legacy, compatibilité |5M tokens |=== == Ressources === Modèles open-weight sur HuggingFace * https://huggingface.co/deepseek-ai/DeepSeek-V4-Flash-Base[DeepSeek V4-Flash-Base — 292B params, license MIT] * https://huggingface.co/Qwen/Qwen3.6-35B-A3B[Qwen3.6-35B-A3B — 35B/3B activés, license Apache 2.0] * https://huggingface.co/Qwen/Qwen3.5-35B-A3B[Qwen3.5-35B-A3B — 35B/3B activés, license Apache 2.0] * https://huggingface.co/google/gemma-4-26B-A4B-it[Gemma 4 26B-A4B — 26B/3.8B activés, license Apache 2.0] === Sources des tarifs (mai 2026) * https://ollama.com/pricing[Tarifs Ollama Cloud — plan Pro $17/mois annuel] * https://www.anthropic.com/pricing[Tarifs Anthropic — Claude API (Opus 4.7 $5/$25, Sonnet 4.6 $3/$15, Haiku 4.5 $1/$5)] * https://openai.com/api/pricing/[Tarifs OpenAI — GPT API (GPT 5.5 $5/$30, GPT 5.4 $2.50/$15)] * https://deepinfra.com/pricing[Tarifs DeepInfra — GPU instances H100 $1.79/h, B200 $2.79/h] * Vast.ai, Crusoe Cloud, FluidStack, TensorDock, RunPod, CoreWeave, Lambda Labs — relevés de prix manuels, datés de mai 2026 === Annonces officielles * https://qwen.ai/blog?id=qwen3.6-35b-a3b[Annonce officielle Qwen3.6-35B-A3B — blog Qwen] — agentic coding, Apache 2.0, 262K context</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html Fri, 8 May 2026 00:00:00 +0000 blog/2026/0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_introduction">Introduction</a></li> <li><a href="#_pourquoi_gradle_pour_de_linfra">Pourquoi Gradle Pour de l’Infra ?</a></li> <li><a href="#_le_build_gradle_kts_complet">Le build.gradle.kts Complet</a></li> <li><a href="#_anatomie_des_tâches_clés">Anatomie des Tâches Clés</a> <ul class="sectlevel2"> <li><a href="#_startollamab_le_lanceur"><code>startOllamaB</code> — Le Lanceur</a></li> <li><a href="#_signinb_linteractif"><code>signInB</code> — L’Interactif</a></li> <li><a href="#_pullmodelb_le_paramétrable"><code>pullModelB</code> — Le Paramétrable</a></li> <li><a href="#_statusollamaall_le_diagnostic"><code>statusOllamaAll</code> — Le Diagnostic</a></li> <li><a href="#_cleanollamab_le_nettoyage_qui_préserve_lidentité"><code>cleanOllamaB</code> — Le Nettoyage qui Préserve l’Identité</a></li> </ul> </li> <li><a href="#_workflow_complet_de_zéro_à_deux_sessions">Workflow Complet — De Zéro à Deux Sessions</a></li> <li><a href="#_pourquoi_ne_pas_en_faire_un_vrai_plugin_gradle">Pourquoi Ne Pas en Faire un Vrai Plugin Gradle ?</a></li> <li><a href="#_leçons_apprises">Leçons Apprises</a></li> <li><a href="#_conclusion">Conclusion</a></li> <li><a href="#_ressources">Ressources</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 18 minutes</div> <p>Pourquoi taper des commandes docker à la main quand on peut tout encapsuler dans des tâches Gradle ? Voici comment j’ai industrialisé ma config dual-Ollama Pro avec zéro script shell externe. Démarrage, arrêt, identité, sign-in, pull — tout passe par <code>./gradlew</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dans l’article précédent, j’ai montré comment faire cohabiter deux comptes Ollama Pro sur la même machine en isolant la deuxième instance dans un conteneur Docker. Le montage fonctionne, mais la gestion au quotidien est vite pénible : se souvenir du nom du conteneur, relancer les bonnes commandes <code>docker exec</code>, checker quel port est actif…​</p> </div> <div class="paragraph"> <p>Vous connaissez ce moment où vous avez 14 terminaux ouverts, que vous tapez <code>docker exec ollama-instance-b ollama list</code> pour la quatrième fois, et que vous vous dites « il doit bien y avoir un moyen plus propre » ?</p> </div> <div class="paragraph"> <p>Ce moyen, c’est Gradle.</p> </div> <div class="paragraph"> <p>Pas juste pour builder du code. Gradle comme un chef d’orchestre d’infrastructure locale. Des tâches qui provisionnent, vérifient, testent, et nettoient. Le tout versionné dans un <code>build.gradle.kts</code> qui vit à côté du <code>docker-compose.yml</code>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-gradle-ollama.svg" alt="architecture gradle ollama" width="717" height="511"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_gradle_pour_de_linfra">Pourquoi Gradle Pour de l’Infra ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>La question est légitime. Gradle, c’est un build tool. Normalement, il compile, il teste, il package. Pas il lance des conteneurs Docker.</p> </div> <div class="paragraph"> <p>Sauf que Gradle est aussi un moteur de graphe de dépendances — et c’est là que ça devient intéressant pour notre cas.</p> </div> <div class="paragraph"> <p>On veut :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Que le conteneur soit lancé avant un sign-in</p> </li> <li> <p>Que l’identité soit vérifiée avant un pull de modèle</p> </li> <li> <p>Qu’un test API échoue silencieusement si le conteneur est down</p> </li> </ol> </div> <div class="paragraph"> <p>Du graphe de dépendances pur. Gradle est taillé pour ça. Le DSL Kotlin rend l’écriture des tâches fluide, et le <code>doLast</code> permet d’exécuter des commandes système comme si c’était du code applicatif.</p> </div> <div class="paragraph"> <p>Et surtout : pas de bashrc à maintenir, pas de scripts qui traînent dans <code>~/bin</code>, pas de Makefile à côté du docker-compose. Tout vit dans un seul fichier, au même endroit que le code du projet.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_build_gradle_kts_complet">Le build.gradle.kts Complet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici le fichier que j’ai fini par écrire. Il fait tout, du provisionnement du volume jusqu’au curl de vérification, en passant par le sign-in interactif.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.io.ByteArrayOutputStream plugins { base } // ------------------------------------------------------------------------- // Configuration // ------------------------------------------------------------------------- val instanceName = "ollama-instance-b" val instancePort = 11435 val instanceImage = "ollama/ollama:0.20.2" val dataDir = file("${System.getProperty("user.home")}/ollama-b-data") val nativePort = 11434 // Modèles à gérer — cloud Pro + un modèle local gratuit pour les tests val proModels = listOf("deepseek-v4-pro:cloud", "gemma4:31b-cloud") val freeModels = listOf("qwen3:0.6b") // ------------------------------------------------------------------------- // Tâche préparatoire — création du volume si absent // ------------------------------------------------------------------------- val prepareVolume by tasks.registering { group = "ollama" description = "Crée le répertoire de volume pour l'instance B si absent" doLast { if (!dataDir.exists()) { dataDir.mkdirs() println("Volume créé : ${dataDir.absolutePath}") } else { println("Volume existant : ${dataDir.absolutePath}") } } } // ------------------------------------------------------------------------- // Démarrage du conteneur Docker // ------------------------------------------------------------------------- val startOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Lance le conteneur Docker pour l'instance Ollama B" dependsOn(prepareVolume) commandLine( "docker", "run", "-d", "--name", instanceName, "-p", "$instancePort:11434", "-v", "${dataDir.absolutePath}:/root/.ollama", "-e", "OLLAMA_HOST=0.0.0.0", "--restart", "always", instanceImage ) isIgnoreExitValue = true doLast { val alreadyRunning = executionResult.get().exitValue != 0 if (alreadyRunning) { logger.lifecycle("Le conteneur '$instanceName' existe déjà — tentative de démarrage") } else { logger.lifecycle("Conteneur '$instanceName' lancé") } } } // ------------------------------------------------------------------------- // Arrêt du conteneur // ------------------------------------------------------------------------- val stopOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Arrête le conteneur Docker de l'instance B" commandLine("docker", "stop", instanceName) isIgnoreExitValue = true doLast { logger.lifecycle("Conteneur '$instanceName' arrêté") } } // ------------------------------------------------------------------------- // Affichage de la clé publique (Device Key) // ------------------------------------------------------------------------- val checkIdentity by tasks.registering(Exec::class) { group = "ollama" description = "Affiche la clé publique SSH de l'instance B" dependsOn(startOllamaB) commandLine("docker", "exec", instanceName, "cat", "/root/.ollama/id_ed25519.pub") standardOutput = ByteArrayOutputStream() doLast { val pubKey = standardOutput.toString().trim() println("=".repeat(60)) println("Device Key (Instance B)") println("=".repeat(60)) println(pubKey) println("=".repeat(60)) println("→ Enregistre cette clé sur https://ollama.com/settings/keys") println("→ Puis exécute : ./gradlew signInB") println("=".repeat(60)) } } // ------------------------------------------------------------------------- // Sign-in interactif (Ouvrira le navigateur) // ------------------------------------------------------------------------- val signInB by tasks.registering(Exec::class) { group = "ollama" description = "Lance l'authentification interactive Ollama pour le compte B" dependsOn(startOllamaB) standardInput = System.`in` standardOutput = System.out errorOutput = System.err commandLine("docker", "exec", "-it", instanceName, "ollama", "signin") doFirst { logger.lifecycle("Authentification pour le Compte Pro B...") logger.lifecycle("Ouvre ton navigateur et connecte-toi avec l'email du compte B") } } // ------------------------------------------------------------------------- // Pull d'un modèle (paramétrable via propriété Gradle) // ------------------------------------------------------------------------- val pullModelB by tasks.registering(Exec::class) { group = "ollama" description = "Pull un modèle sur l'instance B. Usage : ./gradlew pullModelB -Pmodel=nom:tag" dependsOn(startOllamaB) val modelName = project.findProperty("model") as? String ?: "qwen3:0.6b" commandLine("docker", "exec", instanceName, "ollama", "pull", modelName) doFirst { logger.lifecycle("Pull du modèle '$modelName' sur l'instance B...") } doLast { logger.lifecycle("Modèle '$modelName' pullé avec succès") } } // ------------------------------------------------------------------------- // Pull de tous les modèles Pro (batch) // ------------------------------------------------------------------------- val pullAllProModels by tasks.registering { group = "ollama" description = "Pull tous les modèles cloud Pro sur l'instance B" dependsOn(startOllamaB) doLast { proModels.forEach { model -> logger.lifecycle("→ Pull $model...") val process = ProcessBuilder("docker", "exec", instanceName, "ollama", "pull", model) .inheritIO() .start() process.waitFor() } logger.lifecycle("Tous les modèles Pro pullés") } } // ------------------------------------------------------------------------- // Pull de tous les modèles gratuits (batch / première install) // ------------------------------------------------------------------------- val pullAllFreeModels by tasks.registering { group = "ollama" description = "Pull tous les modèles locaux gratuits sur l'instance B" dependsOn(startOllamaB) doLast { freeModels.forEach { model -> logger.lifecycle("→ Pull $model...") val process = ProcessBuilder("docker", "exec", instanceName, "ollama", "pull", model) .inheritIO() .start() process.waitFor() } logger.lifecycle("Tous les modèles gratuits pullés") } } // ------------------------------------------------------------------------- // Liste des modèles disponibles sur l'instance B // ------------------------------------------------------------------------- val listModelsB by tasks.registering(Exec::class) { group = "ollama" description = "Liste les modèles disponibles sur l'instance B" dependsOn(startOllamaB) commandLine("docker", "exec", instanceName, "ollama", "list") } // ------------------------------------------------------------------------- // Health check — test API sur les deux instances // ------------------------------------------------------------------------- val testOllamaB by tasks.registering { group = "ollama" description = "Teste la connectivité API de l'instance B avec un simple chat" dependsOn(startOllamaB) doLast { val model = project.findProperty("model") as? String ?: "qwen3:0.6b" logger.lifecycle("Test de l'instance B avec le modèle '$model'...") val payload = """ { "model": "$model", "messages": [{"role": "user", "content": "Réponds uniquement par OK"}], "max_tokens": 5 } """.trimIndent() val process = ProcessBuilder( "curl", "-s", "http://localhost:$instancePort/v1/chat/completions", "-H", "Content-Type: application/json", "-d", payload ).start() val response = process.inputStream.bufferedReader().readText() process.waitFor() if (response.contains("\"id\":\"chatcmpl") || response.contains("\"choices\"")) { println("✓ Instance B OK — port $instancePort répond") println(" Response: ${response.take(120)}...") } else { println("✗ Instance B INACTIVE — vérifie le conteneur avec './gradlew statusOllamaAll'") println(" Raw: $response") } } } // ------------------------------------------------------------------------- // Health check sur les deux instances simultanément // ------------------------------------------------------------------------- val statusOllamaAll by tasks.registering { group = "ollama" description = "Vérifie le statut des deux instances Ollama (native + Docker)" doLast { // Instance native runCatching { val process = ProcessBuilder( "curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", "http://localhost:$nativePort/api/tags" ).start() val code = process.inputStream.bufferedReader().readText().trim() process.waitFor() println(if (code == "200") "✓ Instance Native — port $nativePort OK (HTTP $code)" else "✗ Instance Native — port $nativePort (HTTP $code)") }.getOrElse { println("✗ Instance Native — injoignable sur le port $nativePort") } // Instance Docker runCatching { val process = ProcessBuilder( "curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", "http://localhost:$instancePort/api/tags" ).start() val code = process.inputStream.bufferedReader().readText().trim() process.waitFor() println(if (code == "200") "✓ Instance Docker B — port $instancePort OK (HTTP $code)" else "✗ Instance Docker B — port $instancePort (HTTP $code)") }.getOrElse { println("✗ Instance Docker B — injoignable sur le port $instancePort") } // Info conteneur runCatching { val process = ProcessBuilder("docker", "ps", "--filter", "name=$instanceName", "--format", "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}").start() val status = process.inputStream.bufferedReader().readText() process.waitFor() println() println("Conteneur Docker :") println(status) } } } // ------------------------------------------------------------------------- // Nettoyage complet // ------------------------------------------------------------------------- val cleanOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Arrête et supprime le conteneur Docker de l'instance B" dependsOn(stopOllamaB) commandLine("docker", "rm", instanceName) isIgnoreExitValue = true doLast { logger.lifecycle("Conteneur '$instanceName' supprimé") logger.lifecycle("Le volume ${dataDir.absolutePath} est conservé (identité persistante)") } } // ------------------------------------------------------------------------- // Affichage des instructions // ------------------------------------------------------------------------- val helpOllama by tasks.registering { group = "ollama" description = "Affiche l'aide des tâches Ollama disponibles" doLast { println(""" ╔══════════════════════════════════════════════════════════════╗ ║ Tâches Gradle — Pilotage Dual Ollama Pro ║ ╠══════════════════════════════════════════════════════════════╣ ║ ./gradlew startOllamaB Démarrer l'instance Docker B ║ ║ ./gradlew stopOllamaB Arrêter l'instance Docker B ║ ║ ./gradlew checkIdentity Afficher la clé SSH publique ║ ║ ./gradlew signInB Sign-in interactif compte B ║ ║ ./gradlew pullModelB Pull un modèle (-Pmodel=...) ║ ║ ./gradlew pullAllProModels Pull tous les modèles Pro ║ ║ ./gradlew pullAllFreeModels Pull tous les modèles gratuits ║ ║ ./gradlew listModelsB Lister les modèles instance B ║ ║ ./gradlew testOllamaB Test API avec un chat simple ║ ║ ./gradlew statusOllamaAll Santé des 2 instances ║ ║ ./gradlew cleanOllamaB Supprimer le conteneur ║ ║ ./gradlew helpOllama Cette aide ║ ╚══════════════════════════════════════════════════════════════╝ """.trimIndent()) } }</code></pre> </div> </div> <div class="paragraph"> <p>Voilà. Douze tâches, un point d’entrée unique, et zéro friction.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomie_des_tâches_clés">Anatomie des Tâches Clés</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startollamab_le_lanceur"><code>startOllamaB</code> — Le Lanceur</h3> <div class="paragraph"> <p>Rien de sorcier : un <code>docker run -d</code> avec les bons paramètres. L’astuce est dans <code>isIgnoreExitValue = true</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">isIgnoreExitValue = true</code></pre> </div> </div> <div class="paragraph"> <p>Si le conteneur existe déjà, la commande <code>docker run</code> échoue (exit code ≠ 0). Sans cette propriété, Gradle arrêterait tout le build en erreur. Ici, l’échec est silencieux — et le <code>doLast</code> détecte si c’était un "déjà existant" ou une vraie erreur.</p> </div> <div class="paragraph"> <p>Le <code>doLast</code> est crucial : il tourne <strong>après</strong> l’exécution de la commande, ce qui permet d’inspecter <code>executionResult.get().exitValue</code> et de logger un message approprié.</p> </div> </div> <div class="sect2"> <h3 id="_signinb_linteractif"><code>signInB</code> — L’Interactif</h3> <div class="paragraph"> <p>C’est la seule tâche qui nécessite une interaction humaine. Gradle transmet <code>System.in</code> au process pour que le prompt <code>ollama signin</code> puisse s’afficher normalement :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">standardInput = System.`in` standardOutput = System.out errorOutput = System.err</code></pre> </div> </div> <div class="paragraph"> <p>Sans ça, le sign-in bloquerait car stdin serait fermé et vous ne verriez jamais le prompt.</p> </div> </div> <div class="sect2"> <h3 id="_pullmodelb_le_paramétrable"><code>pullModelB</code> — Le Paramétrable</h3> <div class="paragraph"> <p>Une tâche générique qui accepte un paramètre via <code>-P</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew pullModelB -Pmodel=deepseek-v4-pro:cloud ./gradlew pullModelB # fallback : qwen3:0.6b</code></pre> </div> </div> <div class="paragraph"> <p>Le fallback est important : <code>project.findProperty("model") as? String ?: "qwen3:0.6b"</code> garantit que la tâche ne pète pas si on oublie le paramètre.</p> </div> </div> <div class="sect2"> <h3 id="_statusollamaall_le_diagnostic"><code>statusOllamaAll</code> — Le Diagnostic</h3> <div class="paragraph"> <p>Deux <code>curl</code> en santé sur les ports <code>11434</code> et <code>11435</code>, avec un fallback en <code>runCatching</code> pour ne pas crasher si l’une des instances est down. La sortie est structurée :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">✓ Instance Native — port 11434 OK (HTTP 200) ✓ Instance Docker B — port 11435 OK (HTTP 200) Conteneur Docker : NAMES STATUS PORTS ollama-instance-b Up 3 hours 0.0.0.0:11435->11434/tcp</code></pre> </div> </div> <div class="paragraph"> <p>Un coup d’œil, et tu sais exactement ce qui tourne et ce qui cloche.</p> </div> </div> <div class="sect2"> <h3 id="_cleanollamab_le_nettoyage_qui_préserve_lidentité"><code>cleanOllamaB</code> — Le Nettoyage qui Préserve l’Identité</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">commandLine("docker", "rm", instanceName) isIgnoreExitValue = true</code></pre> </div> </div> <div class="paragraph"> <p>Le conteneur est supprimé, mais le volume <code>~/ollama-b-data</code> est <strong>conservé</strong>. L’identité SSH survit au nettoyage. Au prochain <code>startOllamaB</code>, les mêmes clés seront réutilisées — pas besoin de refaire le sign-in ni de ré-enregistrer la Device Key.</p> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p><code>cleanOllamaB</code> ne touche pas au volume. Si tu veux effacer l’identité B (et tout recommencer à zéro), il faut supprimer <code>~/ollama-b-data</code> manuellement. C’est volontaire — un <code>clean</code> ne devrait pas détruire des credentials.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_complet_de_zéro_à_deux_sessions">Workflow Complet — De Zéro à Deux Sessions</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici la séquence idéale pour quelqu’un qui arrive sur le projet et veut tout mettre en place sans ouvrir de documentation :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text"># 1. Premier contact — que faire ? $ ./gradlew helpOllama # 2. On démarre l'instance B $ ./gradlew startOllamaB # 3. On récupère la Device Key et on l'enregistre sur ollama.com $ ./gradlew checkIdentity # → copier-coller de la clé sur https://ollama.com/settings/keys # 4. Authentification interactive $ ./gradlew signInB # 5. Pull d'un petit modèle gratuit pour tester la plomberie $ ./gradlew pullModelB # 6. Test API $ ./gradlew testOllamaB # 7. Si tout est vert, pull des modèles Pro $ ./gradlew pullAllProModels # 8. Vérification finale des deux instances $ ./gradlew statusOllamaAll</code></pre> </div> </div> <div class="paragraph"> <p>Moins de deux minutes, tout est provisionné. Pas de README à lire, pas de variables d’environnement à setter. La tâche <code>helpOllama</code> fait office de documentation intégrée.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/workflow-complet-sequence.svg" alt="workflow complet sequence" width="757" height="1103"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_ne_pas_en_faire_un_vrai_plugin_gradle">Pourquoi Ne Pas en Faire un Vrai Plugin Gradle ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Question légitime. Extraire ce <code>build.gradle.kts</code> en un plugin Gradle autonome aurait des avantages : réutilisation entre projets, configuration déclarative, extension DSL.</p> </div> <div class="paragraph"> <p>Mais pour l’instant, ça n’a pas de sens. Ce build n’a pas de logique métier complexe — c’est un wrapper autour de commandes Docker et curl. La surcouche d’un plugin Gradle complet (avec extension, tests unitaires, publication) serait disproportionnée pour 12 tâches utilitaires.</p> </div> <div class="paragraph"> <p>Le <code>build.gradle.kts</code> inline vit dans le projet qui en a besoin. Il est trivial à copier ailleurs. Si un jour j’ai trois projets qui en dépendent, je le transformerai en plugin. Pour l’instant, KISS.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Le jour où tu as trois <code>build.gradle.kts</code> identiques dans trois projets, c’est le signal qu’il faut extraire un plugin. Avant ça, la duplication est moins coûteuse que l’abstraction. Sagesse de dev.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_leçons_apprises">Leçons Apprises</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Gradle n’est pas qu’un build tool</strong> — Le moteur de graphe de dépendances en fait un orchestrateur d’infrastructure redoutable. <code>doLast</code>, <code>isIgnoreExitValue</code>, <code>dependsOn</code> : ces trois primitives suffisent à piloter un conteneur Docker avec la même fiabilité qu’un pipeline CI.</p> </li> <li> <p><strong><code>isIgnoreExitValue</code> est ton ami</strong> — Dans un monde idéal, <code>docker run</code> sur un conteneur déjà existant renverrait un warning plutôt qu’un exit code d’erreur. Dans le monde réel, tu mets <code>isIgnoreExitValue = true</code> et tu gères le diagnostic dans <code>doLast</code>.</p> </li> <li> <p><strong>Les tâches paramétrables tuent l’ambiguïté</strong> — Un <code>pullModelB</code> générique avec <code>-Pmodel=…​</code> remplace N tâches spécialisées. Une seule tâche, une seule doc, un seul comportement.</p> </li> <li> <p><strong><code>runCatching</code> pour les health checks</strong> — Quand tu testes N endpoints, le crash du premier ne doit pas empêcher de tester les autres. <code>runCatching</code> + <code>getOrElse</code> par endpoint, et le diagnostic reste complet même en cas de panne partielle.</p> </li> <li> <p><strong>La tâche <code>helpOllama</code> comme documentation exécutable</strong> — Un <code>println()</code> bien formaté remplace un README de trois paragraphes. C’est auto-documenté, toujours à jour, et accessible sans sortir du terminal.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>On est passé de commandes docker à taper à la main à un workflow Gradle complet, versionné, réutilisable. Douze tâches couvrent tout le cycle de vie : provisionnement, identité, sign-in, pull, test, diagnostic, nettoyage.</p> </div> <div class="paragraph"> <p>Le combo docker-compose + build.gradle.kts + opencode.json forme une trinité propre : Docker pour l’isolation, Gradle pour l’orchestration, OpenCode pour la consommation. Chaque couche a sa responsabilité, et aucune ne déborde sur l’autre.</p> </div> <div class="paragraph"> <p>Prochaine étape ? Automatiser le cycle de vie dans la CI pour que les instances Ollama soient disponibles dans les environnements de dev éphémères. Mais ça, c’est un autre article.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressources">Ressources</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/tutorial_using_tasks.html">User Manual Gradle — Tâches</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_tasks.html">User Manual Gradle — Tâches Custom</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Image Docker Ollama sur Docker Hub</a></p> </li> <li> <p><a href="https://kotlinlang.org/docs/gradle.html">Gradle DSL Kotlin — Documentation</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Article publié le 2026-05-08</em></p> </div> </div> </div> https://cheroliv.com/blog/2026/0120_cumuler_deux_abonnements_ollama_pro_docker_post.html Fri, 8 May 2026 00:00:00 +0000 blog/2026/0120_cumuler_deux_abonnements_ollama_pro_docker_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_introduction">Introduction</a></li> <li><a href="#_pourquoi_deux_fois_la_même_chose">Pourquoi Deux Fois la Même Chose ?</a></li> <li><a href="#_le_coeur_du_problème_la_device_key">Le Coeur du Problème : La Device Key</a></li> <li><a href="#_mise_en_place_étape_par_étape">Mise en Place — Étape par Étape</a> <ul class="sectlevel2"> <li><a href="#_prérequis">Prérequis</a></li> <li><a href="#_étape_1_créer_le_volume">Étape 1 : Créer le Volume</a></li> <li><a href="#_étape_2_lancer_le_conteneur_docker">Étape 2 : Lancer le Conteneur Docker</a></li> <li><a href="#_étape_3_récupérer_la_clé_publique">Étape 3 : Récupérer la Clé Publique</a></li> <li><a href="#_étape_4_enregistrer_la_clé_sur_ollama_com">Étape 4 : Enregistrer la Clé sur Ollama.com</a></li> <li><a href="#_étape_5_tester_avec_un_petit_modèle_gratuit">Étape 5 : Tester avec un Petit Modèle Gratuit</a></li> </ul> </li> <li><a href="#_le_piège_de_lapi_v1models">Le Piège de l’API <code>/v1/models</code></a></li> <li><a href="#_résultat_deux_sessions_deux_comptes_zéro_conflit">Résultat : Deux Sessions, Deux Comptes, Zéro Conflit</a></li> <li><a href="#_leçons_apprises">Leçons Apprises</a></li> <li><a href="#_pour_aller_plus_loin">Pour Aller Plus Loin</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 14 minutes</div> <p>Deux abonnements Pro, une seule machine, une seule carte bancaire, et zéro conflit réseau. Comment Docker m’a permis de doubler ma capacité d’inférence cloud sans acheter un deuxième PC.</p> </div> </div> </div> <div class="sect1"> <h2 id="_introduction">Introduction</h2> <div class="sectionbody"> <div class="paragraph"> <p>J’utilise Ollama Pro depuis plusieurs mois pour alimenter mes sessions OpenCode en modèles cloud. Le truc, c’est que même avec un abonnement Pro, on est vite limité par le <strong>rate limiting</strong> quand on lance plusieurs agents en parallèle. La solution évidente : un deuxième abonnement.</p> </div> <div class="paragraph"> <p>Mais là, c’est le drame.</p> </div> <div class="paragraph"> <p>Ollama identifie chaque machine par une clé SSH unique — sa fameuse <strong>Device Key</strong>. Deux instances sur le même OS partageraient la même identité, et impossible de lier deux comptes Pro au même device. Et comme vous vous en doutez, je n’allais pas acheter un deuxième laptop juste pour ça.</p> </div> <div class="paragraph"> <p>La solution : tricher. Faire croire à Ollama qu’il tourne sur deux machines différentes, alors qu’elles partagent le même CPU, la même RAM, et la même connexion réseau. Docker va nous offrir une bulle d’isolation parfaite.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-dual-ollama.svg" alt="architecture dual ollama" width="509" height="420"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_deux_fois_la_même_chose">Pourquoi Deux Fois la Même Chose ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de me traiter de malade mental, laissez-moi vous expliquer le cas d’usage.</p> </div> <div class="paragraph"> <p>Avec un seul abonnement Pro, je peux lancer un modèle comme <code>deepseek-v4-pro:cloud</code> dans une session OpenCode. Le problème surgit quand je veux <strong>deux</strong> sessions simultanées. Les quotas de rate limiting font que la deuxième session rame ou est purement rejetée.</p> </div> <div class="paragraph"> <p>Avec deux abonnements Pro indépendants :</p> </div> <div class="ulist"> <ul> <li> <p>Session OpenCode 1 → Compte Pro A (<code>localhost:11434</code>)</p> </li> <li> <p>Session OpenCode 2 → Compte Pro B (<code>localhost:11435</code>)</p> </li> </ul> </div> <div class="paragraph"> <p>Chaque session a son propre quota, son propre contexte, et ne gêne pas l’autre. C’est du multi-processing humain.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Deux abonnements Pro = deux emails différents. La même carte bancaire fonctionne — le système de paiement Ollama ne bloque pas les souscriptions multiples depuis le même moyen de paiement. J’ai vérifié.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_le_coeur_du_problème_la_device_key">Le Coeur du Problème : La Device Key</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand vous installez Ollama, une paire de clés SSH ed25519 est générée dans le répertoire d’identité :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ cat /usr/share/ollama/.ollama/id_ed25519.pub ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAI...</code></pre> </div> </div> <div class="paragraph"> <p>Cette clé est uploadée vers les serveurs d’Ollama lors du <code>ollama signin</code>. C’est elle qui dit « cette machine appartient à tel compte Pro ». Si vos deux instances partagent le même fichier <code>id_ed25519</code>, elles partagent la même identité. Fin du game.</p> </div> <div class="paragraph"> <p>La parade : donner à notre deuxième instance son propre répertoire d’identité, isolé dans un volume Docker.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mise_en_place_étape_par_étape">Mise en Place — Étape par Étape</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prérequis">Prérequis</h3> <div class="ulist"> <ul> <li> <p>Une installation native d’Ollama fonctionnelle (script officiel <code>curl | sh</code>)</p> </li> <li> <p>Docker installé et fonctionnel</p> </li> <li> <p>Portainer ou docker-compose pour le déploiement</p> </li> <li> <p>Deux comptes Ollama avec deux emails distincts</p> </li> </ul> </div> <div class="paragraph"> <p>J’ai utilisé la version <code>0.20.2</code> — celle fournie par le script officiel et l’image Docker correspondante.</p> </div> </div> <div class="sect2"> <h3 id="_étape_1_créer_le_volume">Étape 1 : Créer le Volume</h3> <div class="paragraph"> <p>Un simple répertoire sur l’hôte servira de volume persistant pour l’identité de l’instance B :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">mkdir -p ~/ollama-b-data</code></pre> </div> </div> <div class="paragraph"> <p>Ce dossier sera monté dans le conteneur Docker comme <code>/root/.ollama</code>, là où Ollama stocke ses clés d’identité, son historique et ses modèles.</p> </div> </div> <div class="sect2"> <h3 id="_étape_2_lancer_le_conteneur_docker">Étape 2 : Lancer le Conteneur Docker</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml"># docker-compose.yml services: ollama-instance-b: image: ollama/ollama:0.20.2 container_name: ollama-instance-b ports: - "11435:11434" volumes: - /home/cheroliv/ollama-b-data:/root/.ollama environment: - OLLAMA_HOST=0.0.0.0 restart: always</code></pre> </div> </div> <div class="paragraph"> <p>Ce qui se passe ici :</p> </div> <div class="ulist"> <ul> <li> <p>Le port <strong>11435</strong> de l’hôte est mappé sur le <strong>11434</strong> interne du conteneur. Ainsi, l’instance Docker écoute sur <code>:11435</code> sans conflit avec l’instance native qui squatte <code>:11434</code>.</p> </li> <li> <p>Le volume <code>~/ollama-b-data</code> est monté sur <code>/root/.ollama</code> — c’est là que l’identité SSH sera stockée.</p> </li> <li> <p><code>OLLAMA_HOST=0.0.0.0</code> permet au conteneur d’accepter des connexions externes.</p> </li> </ul> </div> <div class="paragraph"> <p>J’ai déployé cette stack via Portainer, mais un simple <code>docker compose up -d</code> fonctionne tout aussi bien.</p> </div> </div> <div class="sect2"> <h3 id="_étape_3_récupérer_la_clé_publique">Étape 3 : Récupérer la Clé Publique</h3> <div class="paragraph"> <p>Le conteneur étant vierge au premier démarrage, Ollama génère automatiquement une nouvelle paire de clés SSH dans le volume. On récupère la clé publique :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec ollama-instance-b cat /root/.ollama/id_ed25519.pub ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIDDQ+dvnfmuo49q5O8LOlvgZ39SKORFw47ry9k4H2jPc</code></pre> </div> </div> <div class="paragraph"> <p>Je vérifie que cette clé est <strong>différente</strong> de celle de l’instance native :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Instance native $ cat /usr/share/ollama/.ollama/id_ed25519.pub ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGyF...(différente) # Instance Docker $ cat ~/ollama-b-data/id_ed25519.pub ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIDDQ...(différente)</code></pre> </div> </div> <div class="paragraph"> <p>Deux clés distinctes, deux identités séparées. Le tour est joué.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> <div class="paragraph"> <p>Si votre conteneur redémarre, il <strong>réutilise</strong> les clés présentes dans le volume. L’identité est persistante. Vous ne perdrez pas l’association avec le compte Pro.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_étape_4_enregistrer_la_clé_sur_ollama_com">Étape 4 : Enregistrer la Clé sur Ollama.com</h3> <div class="paragraph"> <p>Direction <a href="https://ollama.com/settings/keys" class="bare">https://ollama.com/settings/keys</a> → Add SSH Key. On colle la clé publique de l’instance Docker et on valide.</p> </div> <div class="paragraph"> <p>Ensuite, on lie cette identité au compte Pro B :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec -it ollama-instance-b ollama signin</code></pre> </div> </div> <div class="paragraph"> <p>Le navigateur s’ouvre, on se connecte avec l’email du compte B, et le token est associé à la clé SSH du conteneur. On vérifie que tout est OK :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec -it ollama-instance-b ollama signin User: cherolivpro</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_étape_5_tester_avec_un_petit_modèle_gratuit">Étape 5 : Tester avec un Petit Modèle Gratuit</h3> <div class="paragraph"> <p>Avant de balancer le prix d’un abonnement Pro, je veux être certain que le tuyau fonctionne. Je pull un petit modèle local et gratuit pour valider la connectivité :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec ollama-instance-b ollama pull qwen3:0.6b pulling manifest pulling 7f4030143c1c: 100% ▕██████████████████▏ 522 MB success $ curl -s http://localhost:11435/api/tags {"models":[{"name":"qwen3:0.6b","model":"qwen3:0.6b",...}]}</code></pre> </div> </div> <div class="paragraph"> <p>Le port <code>11435</code> répond, le modèle est servi. L’instance B est vivante.</p> </div> <div class="paragraph"> <p>Une fois rassuré, je passe au pull du vrai modèle cloud Pro :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec ollama-instance-b ollama pull deepseek-v4-pro:cloud pulling manifest pulling 31c3059e137e: 100% ▕██████████████████▏ 344 B success</code></pre> </div> </div> <div class="paragraph"> <p>344 octets pour le manifeste d’un modèle cloud — normal, l’inférence se fait côté serveur, pas en local. Et voilà le test ultime :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ curl -s http://localhost:11435/v1/chat/completions \ -H "Content-Type: application/json" \ -d '{"model":"deepseek-v4-pro:cloud","messages":[{"role":"user","content":"Dis bonjour en une phrase courte."}]}' { "id": "chatcmpl-480", "model": "deepseek-v4-pro", "choices": [{ "message": { "content": "Bonjour !" }, "finish_reason": "stop" }], "usage": { "total_tokens": 181 } }</code></pre> </div> </div> <div class="paragraph"> <p>Bonjour à toi aussi, instance B.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_piège_de_lapi_v1models">Le Piège de l’API <code>/v1/models</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>J’ai perdu 20 minutes sur un détail idiot. Quand j’ai configuré le provider <code>ollama-b</code> dans OpenCode, rien n’apparaissait dans le sélecteur de modèles. Rien. Que dalle.</p> </div> <div class="paragraph"> <p>La raison ? L’API <code>/v1/models</code> de l’instance B retournait <code>{"object":"list","data":null}</code> au lieu de <code>{"object":"list","data":[]}</code> quand aucun modèle n’était pullé. La valeur <code>null</code> faisait planter le parsing côté OpenCode, qui n’affichait pas le provider.</p> </div> <div class="paragraph"> <p>La solution : déclarer les modèles <strong>explicitement</strong> dans la configuration OpenCode plutôt que de compter sur la découverte dynamique.</p> </div> <div class="listingblock"> <div class="title">~/.config/opencode/opencode.json</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "$schema": "https://opencode.ai/config.json", "provider": { "ollama": { "npm": "@ai-sdk/openai-compatible", "name": "Ollama (local)", "options": { "baseURL": "http://localhost:11434/v1" }, "models": { "gemma4:e2b": { "name": "Gemma 4 E2B (local)" } } }, "ollama-b": { "npm": "@ai-sdk/openai-compatible", "name": "Ollama Instance B (Docker)", "options": { "baseURL": "http://localhost:11435/v1" }, "models": { "qwen3:0.6b": { "name": "Qwen3 0.6B (B)" }, "deepseek-v4-pro:cloud": { "name": "DeepSeek V4 Pro (B)" } } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Avec cette déclaration explicite, OpenCode voit immédiatement le provider B et ses modèles. Un redémarrage de session, et le sélecteur <code>/models</code> affiche les deux instances côte à côte.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>Si vous ne voyez pas votre provider custom dans <code>/models</code>, ne perdez pas trois heures à redémarrer votre terminal. Déclarez les modèles manuellement dans <code>opencode.json</code> — ça règle le problème instantanément.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_résultat_deux_sessions_deux_comptes_zéro_conflit">Résultat : Deux Sessions, Deux Comptes, Zéro Conflit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Au final, je peux lancer deux sessions OpenCode simultanément :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">Session 1 → /models → Ollama (local) → deepseek-v4-pro:cloud → Compte A Session 2 → /models → Ollama Instance B (Docker) → deepseek-v4-pro:cloud → Compte B</code></pre> </div> </div> <div class="paragraph"> <p>Chaque session a son propre quota, son propre rate limit, et ne se marche pas sur les pieds. Même machine, même carte bleue, deux emails différents.</p> </div> <div class="paragraph"> <p>Et le meilleur ? Le conteneur Docker est en <code>restart: always</code>. Il survit aux reboots du système sans intervention manuelle.</p> </div> </div> </div> <div class="sect1"> <h2 id="_leçons_apprises">Leçons Apprises</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Docker isole tout, même l’identité</strong> — Un simple bind mount de volume suffit à donner à un conteneur son propre jeu de clés SSH, le rendant indistinguable d’une machine physique différente aux yeux d’Ollama.</p> </li> <li> <p><strong>Deux emails, même CB</strong> — Ollama ne bloque pas les souscriptions multiples depuis le même moyen de paiement. Seul l’email doit être distinct.</p> </li> <li> <p><strong>Tester gratuit avant de payer</strong> — Un <code>ollama pull qwen3:0.6b</code> (modèle libre, 522 Mo) permet de valider toute la chaîne réseau sans débourser un centime. Vous validez le plomberie d’abord, vous activez le Pro ensuite.</p> </li> <li> <p><strong><code>/v1/models</code> avec <code>data: null</code> casse OpenCode</strong> — Si vous configurez un provider custom avec <code>"models": {}</code>, OpenCode tente de découvrir les modèles via l’API. Si l’API répond <code>data: null</code>, le provider n’apparaît pas. Déclarez les modèles explicitement.</p> </li> <li> <p><strong>Deux comptes, c’est du multi-processing humain</strong> — Un compte Pro = une session OpenCode active. Deux comptes = deux sessions parallèles. Pour quelqu’un qui jongle entre plusieurs projets Gradle en simultané, c’est un game changer.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_pour_aller_plus_loin">Pour Aller Plus Loin</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/settings/keys">Ollama Settings — Gestion des clés SSH</a></p> </li> <li> <p><a href="https://docs.ollama.com/">Documentation officielle Ollama</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Image Docker Ollama sur Docker Hub</a></p> </li> <li> <p><a href="https://opencode.ai/docs/providers/#ollama">OpenCode — Configuration Provider Ollama</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Article publié le 2026-05-08</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0080_kitty_term_post.html Thu, 7 May 2026 00:00:00 +0000 blog/2025/0080_kitty_term_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_किट्टी_और_zsh_क्यों_चुनें">किट्टी और Zsh क्यों चुनें ?</a></li> <li><a href="#_सिस्टम_आवश्यकताएँ">सिस्टम आवश्यकताएँ</a></li> <li><a href="#_kitty_का_डाउनलोड_और_इंस्टॉलेशन">Kitty का डाउनलोड और इंस्टॉलेशन</a> <ul class="sectlevel2"> <li><a href="#_इंस्टॉलेशन_स्क्रिप्ट_डाउनलोड_करें">इंस्टॉलेशन स्क्रिप्ट डाउनलोड करें</a></li> <li><a href="#_सांकेतिक_लिंक_बनाना">सांकेतिक लिंक बनाना</a></li> </ul> </li> <li><a href="#_xubuntu_में_kitty_का_एकीकरण">Xubuntu में Kitty का एकीकरण</a> <ul class="sectlevel2"> <li><a href="#_फ़ाइल_को_डेस्कटॉप_पर_कॉपी_करें">फ़ाइल को डेस्कटॉप पर कॉपी करें</a></li> <li><a href="#_डेस्कटॉप_फ़ाइल_संपादित_करें">डेस्कटॉप फ़ाइल संपादित करें</a></li> <li><a href="#_kitty_को_डिफ़ॉल्ट_टर्मिनल_के_रूप_में_जोड़ें_वैकल्पिक">Kitty को डिफ़ॉल्ट टर्मिनल के रूप में जोड़ें (वैकल्पिक)</a></li> </ul> </li> <li><a href="#_zsh_की_स्थापना">Zsh की स्थापना</a></li> <li><a href="#_zsh_को_डिफ़ॉल्ट_शेल_के_रूप_में_सेट_करें">Zsh को डिफ़ॉल्ट शेल के रूप में सेट करें</a> <ul class="sectlevel2"> <li><a href="#_वैश्विक_पद्धति_सभी_टर्मिनल_के_लिए">वैश्विक पद्धति (सभी टर्मिनल के लिए)</a></li> <li><a href="#_kitty_के_लिए_विशिष्ट_विधि">Kitty के लिए विशिष्ट विधि</a></li> </ul> </li> <li><a href="#_zsh_की_कॉन्फ़िगरेशन_वैकल्पिक">Zsh की कॉन्फ़िगरेशन (वैकल्पिक)</a> <ul class="sectlevel2"> <li><a href="#_एक_zshrc_फ़ाइल_बनाएँ">एक .zshrc फ़ाइल बनाएँ</a></li> <li><a href="#_exemple_de_configuration_minimale">Exemple de configuration minimale</a></li> </ul> </li> <li><a href="#_वर्कफ़्लो_का_पूर्ण_सारांश">वर्कफ़्लो का पूर्ण सारांश</a></li> <li><a href="#_अंतिम_सत्यापन">अंतिम सत्यापन</a> <ul class="sectlevel2"> <li><a href="#_कॉन्फ़िगरेशन_फ़ाइल_खोलें">📂 कॉन्फ़िगरेशन फ़ाइल खोलें</a></li> <li><a href="#_️_जोड़ें_या_संपादित_करें_font_size">🖋️ जोड़ें या संपादित करें `font_size</a></li> <li><a href="#_kitty_को_सहेजें_और_पुनः_प्रारंभ_करें">�💾 Kitty को सहेजें और पुनः प्रारंभ करें</a></li> <li><a href="#_गतिशील_समायोजन_अस्थायी_ज़ूम">✅ गतिशील समायोजन (अस्थायी ज़ूम)</a></li> </ul> </li> <li><a href="#_oh_my_zsh_की_स्थापना_और_कॉन्फ़िगरेशन">Oh My Zsh की स्थापना और कॉन्फ़िगरेशन</a> <ul class="sectlevel2"> <li><a href="#_oh_my_zsh_का_इंस्टॉलेशन">Oh My Zsh का इंस्टॉलेशन</a></li> <li><a href="#_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i">JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</a></li> </ul> </li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a> <ul class="sectlevel2"> <li><a href="#_थीम_बदलें">थीम बदलें</a></li> <li><a href="#_सत्यापन">सत्यापन</a></li> <li><a href="#_यूज़_केस_डायग्राम">यूज़ केस डायग्राम</a></li> <li><a href="#_kitty_में_पारदर्शिता_सक्षम_करें">Kitty में पारदर्शिता सक्षम करें</a> <ul class="sectlevel2"> <li><a href="#_पारदर्शिता_के_लिए_पूर्वापेक्षा">पारदर्शिता के लिए पूर्वापेक्षा</a></li> <li><a href="#_kitty_conf_में_पारदर्शिता_की_कॉन्फ़िगरेशन">kitty.conf में पारदर्शिता की कॉन्फ़िगरेशन</a></li> <li><a href="#_किटी_को_रीस्टार्ट_करें">किटी को रीस्टार्ट करें</a></li> <li><a href="#_संभावित_पूरक">संभावित पूरक</a></li> <li><a href="#_सीक्वेंस_डायग्राम_पारदर्शिता_के_साथ_किट्टी_का_प्रारंभ">सीक्वेंस डायग्राम - पारदर्शिता के साथ किट्टी का प्रारंभ</a></li> <li><a href="#_ज्ञात_सीमाएँ">ज्ञात सीमाएँ</a></li> </ul> </li> <li><a href="#_ध्वनि_बीप_सुनाई_देने_वाली_घंटी_को_बंद_करें">ध्वनि बीप (सुनाई देने वाली घंटी) को बंद करें</a></li> <li><a href="#_किट्टी_का_अपडेट">किट्टी का अपडेट</a></li> <li><a href="#_संदर्भ">संदर्भ</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>यह गाइड चरण दर चरण बताता है कि Xubuntu पर <strong>kitty</strong> टर्मिनल कैसे स्थापित करें, इसे सही तरीके से कॉन्फ़िगर करें, और bash को डिफ़ॉल्ट शेल के रूप में <strong>zsh</strong> से बदलें। किट्टी प्रोजेक्ट यहाँ उपलब्ध है : <a href="https://github.com/kovidgoyal/kitty" class="bare">https://github.com/kovidgoyal/kitty</a>.</p> </div> <div class="paragraph"> <p>(No output) Kitty एक आधुनिक, तेज़ और कॉन्फ़िगरेबल टर्मिनल है, जो विशेष रूप से मांग वाले डेवलपर्स के लिए उपयुक्त है। <em>__</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_किट्टी_और_zsh_क्यों_चुनें">किट्टी और Zsh क्यों चुनें ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty की पहचान:</p> </div> <div class="ulist"> <ul> <li> <p>जीपीयू त्वरण के कारण उच्च प्रदर्शन,</p> </li> <li> <p>एक ही पाठ फ़ाइल पर पूरी तरह आधारित कॉन्फ़िगरेशन,</p> </li> <li> <p>फ़ॉन्ट और लिगेचर के लिए उत्कृष्ट समर्थन।</p> </li> </ul> </div> <div class="paragraph"> <p>Zsh, इसके विपरीत, एक शक्तिशाली इंटरैक्टिव शेल है जो प्रदान करता है :</p> </div> <div class="ulist"> <ul> <li> <p>एक बुद्धिमान पूर्णता,</p> </li> <li> <p>एक अनुकूलन योग्य प्रॉम्प्ट,</p> </li> <li> <p>बैश के साथ उच्च संगतता।</p> </li> </ul> </div> <div class="paragraph"> <p>Kitty और Zsh को जोड़ने से, आपको एक उत्पादक और सुंदर वातावरण मिलता है।</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/kitty-zsh-overview.png" alt="kitty zsh overview" width="729" height="305"> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>यह गाइड जानबूझकर स्क्रिप्ट के माध्यम से स्थापना और केवल Xubuntu तक सीमित है।</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_सिस्टम_आवश्यकताएँ">सिस्टम आवश्यकताएँ</h2> <div class="sectionbody"> <div class="paragraph"> <p>शुरू करने से पहले, सुनिश्चित करें कि आपके पास है:</p> </div> <div class="ulist"> <ul> <li> <p>Xubuntu स्थापित,</p> </li> <li> <p>इंटरनेट तक पहुँच,</p> </li> <li> <p>स्क्रिप्ट चलाने के लिए एक कार्यशील बश शेल.</p> </li> </ul> </div> <div class="paragraph"> <p>अपना पर्यावरण जाँचें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">uname -a lsb_release -a</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kitty_का_डाउनलोड_और_इंस्टॉलेशन">Kitty का डाउनलोड और इंस्टॉलेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>किट्टी इसे एक आधिकारिक स्क्रिप्ट के माध्यम से इंस्टॉल करने की सिफारिश करता है जो फ़ाइलों को रखता है`~/.local/kitty.app`.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> <div class="paragraph"> <p>यह विधि पैकेज प्रबंधकों से स्वतंत्र है (कोई नहीं`apt`).</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_इंस्टॉलेशन_स्क्रिप्ट_डाउनलोड_करें">इंस्टॉलेशन स्क्रिप्ट डाउनलोड करें</h3> <div class="paragraph"> <p>निम्नलिखित कमांड चलाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">curl -L https://sw.kovidgoyal.net/kitty/installer.sh | sh /dev/stdin</code></pre> </div> </div> <div class="paragraph"> <p>यह कमांड निम्नलिखित करती है :</p> </div> <div class="ulist"> <ul> <li> <p>बाइनरीज़ का डाउनलोड,</p> </li> <li> <p>निष्कर्षण में`~/.local/kitty.app`,</p> </li> <li> <p>सांकेतिक लिंक बनाना।</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/download-install.svg" alt="download install" width="289" height="336"> </div> </div> </div> <div class="sect2"> <h3 id="_सांकेतिक_लिंक_बनाना">सांकेतिक लिंक बनाना</h3> <div class="paragraph"> <p>आह्वान कर सकने के लिए`kitty`टर्मिनल से, एक सिम्बॉलिक लिंक बनाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">ln -s ~/.local/kitty.app/bin/kitty ~/.local/bin/kitty</code></pre> </div> </div> <div class="paragraph"> <p>जोड़ें`~/.local/bin`अपने PATH में जोड़ें यदि अभी तक नहीं किया गया है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc source ~/.zshrc</code></pre> </div> </div> <div class="paragraph"> <p>आप स्थापना की जाँच कर सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">kitty --version</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_xubuntu_में_kitty_का_एकीकरण">Xubuntu में Kitty का एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>किट्टी को एप्लिकेशन मेन्यू में दिखाने के लिए :</p> </div> <div class="sect2"> <h3 id="_फ़ाइल_को_डेस्कटॉप_पर_कॉपी_करें">फ़ाइल को डेस्कटॉप पर कॉपी करें</h3> <div class="paragraph"> <p>फ़ाइल कॉपी करें`.desktop`दिया गया:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">cp ~/.local/kitty.app/share/applications/kitty.desktop ~/.local/share/applications/</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_डेस्कटॉप_फ़ाइल_संपादित_करें">डेस्कटॉप फ़ाइल संपादित करें</h3> <div class="paragraph"> <p>फ़ाइल संपादित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">nano ~/.local/share/applications/kitty.desktop</code></pre> </div> </div> <div class="paragraph"> <p>निम्नलिखित लाइनों की जाँच करें या संपादित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">[Desktop Entry] Version=1.0 Type=Application Name=Kitty Terminal Comment=Fast GPU-based terminal emulator Exec=/home/$USER/.local/kitty.app/bin/kitty Icon=kitty Categories=System;TerminalEmulator;</code></pre> </div> </div> <div class="paragraph"> <p>बदलें`YOURUSER`आपके उपयोगकर्ता नाम से.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/desktop-integration.png" alt="desktop integration" width="476" height="335"> </div> </div> </div> <div class="sect2"> <h3 id="_kitty_को_डिफ़ॉल्ट_टर्मिनल_के_रूप_में_जोड़ें_वैकल्पिक">Kitty को डिफ़ॉल्ट टर्मिनल के रूप में जोड़ें (वैकल्पिक)</h3> <div class="paragraph"> <p>Kitty को डिफ़ॉल्ट टर्मिनल के रूप में लॉन्च करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo update-alternatives --install /usr/bin/x-terminal-emulator x-terminal-emulator ~/.local/kitty.app/bin/kitty 50 sudo update-alternatives --config x-terminal-emulator</code></pre> </div> </div> <div class="paragraph"> <p>चुनें`kitty`प्रस्तावित मेनू में</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zsh_की_स्थापना">Zsh की स्थापना</h2> <div class="sectionbody"> <div class="paragraph"> <p>यदि Zsh अभी तक स्थापित नहीं है, निष्पादित करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install zsh</code></pre> </div> </div> <div class="paragraph"> <p>स्थापना की जाँच करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">zsh --version</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zsh_को_डिफ़ॉल्ट_शेल_के_रूप_में_सेट_करें">Zsh को डिफ़ॉल्ट शेल के रूप में सेट करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>आप अपने शेल को ग्लोबल रूप से बदल सकते हैं या केवल Kitty में।</p> </div> <div class="sect2"> <h3 id="_वैश्विक_पद्धति_सभी_टर्मिनल_के_लिए">वैश्विक पद्धति (सभी टर्मिनल के लिए)</h3> <div class="paragraph"> <p>निरपेक्ष पथ पहचानें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">which zsh</code></pre> </div> </div> <div class="paragraph"> <p>सामान्यतः`/usr/bin/zsh`.</p> </div> <div class="paragraph"> <p>डिफ़ॉल्ट शेल बदलें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">chsh -s /usr/bin/zsh</code></pre> </div> </div> <div class="paragraph"> <p>लॉग आउट करें और फिर से लॉग इन करें।</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/zsh-default-shell.svg" alt="zsh default shell" width="546" height="341"> </div> </div> </div> <div class="sect2"> <h3 id="_kitty_के_लिए_विशिष्ट_विधि">Kitty के लिए विशिष्ट विधि</h3> <div class="paragraph"> <p>यदि आप केवल किट्टी में शेल बदलना पसंद करते हैं, तो कॉन्फ़िगरेशन फ़ाइल को संपादित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">nano ~/.config/kitty/kitty.conf</code></pre> </div> </div> <div class="paragraph"> <p>इस पंक्ति जोड़ें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">shell zsh</code></pre> </div> </div> <div class="paragraph"> <p>सहेजें और किट्टी को पुनः प्रारंभ करें।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zsh_की_कॉन्फ़िगरेशन_वैकल्पिक">Zsh की कॉन्फ़िगरेशन (वैकल्पिक)</h2> <div class="sectionbody"> <div class="paragraph"> <p>अपने Zsh को अनुकूलित करने के लिए:</p> </div> <div class="sect2"> <h3 id="_एक_zshrc_फ़ाइल_बनाएँ">एक .zshrc फ़ाइल बनाएँ</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">touch ~/.zshrc nano ~/.zshrc</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_exemple_de_configuration_minimale">Exemple de configuration minimale</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">export ZSH_THEME="robbyrussell" export PATH="$HOME/.local/bin:$PATH" alias ll="ls -la"</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_वर्कफ़्लो_का_पूर्ण_सारांश">वर्कफ़्लो का पूर्ण सारांश</h2> <div class="sectionbody"> <div class="paragraph"> <p>नीचे दिया गया चित्र पूरे प्रक्रिया का सारांश प्रस्तुत करता है:</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/full-workflow.png" alt="full workflow" width="333" height="643"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अंतिम_सत्यापन">अंतिम सत्यापन</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty लॉन्च करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">kitty</code></pre> </div> </div> <div class="paragraph"> <p>आपको वह देखना चाहिए`zsh`सक्रिय है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">echo $SHELL</code></pre> </div> </div> <div class="paragraph"> <p>अपेक्षित परिणाम:</p> </div> <div class="paragraph"> <p>/usr/bin/zsh</p> </div> <div class="paragraph"> <p>फ़ॉन्ट का आकार बदलने के लिए<strong>Kitty</strong>, पैरामीटर को समायोजित करना होगा`font_size`कॉन्फ़िगरेशन फ़ाइल में. यहाँ विस्तृत प्रक्रिया है:</p> </div> <div class="sect2"> <h3 id="_कॉन्फ़िगरेशन_फ़ाइल_खोलें">📂 कॉन्फ़िगरेशन फ़ाइल खोलें</h3> <div class="paragraph"> <p>मुख्य कॉन्फ़िगरेशन फ़ाइल आमतौर पर स्थित होती है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">~/.config/kitty/kitty.conf</code></pre> </div> </div> <div class="paragraph"> <p>यदि यह फ़ाइल अभी तक मौजूद नहीं है, तो आप इसे बना सकते हैं। उदाहरण:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">nano ~/.config/kitty/kitty.conf</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_️_जोड़ें_या_संपादित_करें_font_size">🖋️ जोड़ें या संपादित करें `font_size</h3> <div class="paragraph"> <p>निम्नलिखित निर्देश जोड़ें, यदि यह पहले से मौजूद हो तो इसे संशोधित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">font_size 14.0</code></pre> </div> </div> <div class="paragraph"> <p>यहाँ`14.0`इच्छित आकार के अनुरूप है। आप कोई भी दशमलव मान डाल सकते हैं, उदाहरण के लिए`12.0`, <code>15.5</code>, etc.</p> </div> </div> <div class="sect2"> <h3 id="_kitty_को_सहेजें_और_पुनः_प्रारंभ_करें">�💾 Kitty को सहेजें और पुनः प्रारंभ करें</h3> <div class="ulist"> <ul> <li> <p>सहेजें (<code>Ctrl + O</code>, फिर`Entrée`) और बंद करें (<code>Ctrl + X</code>) यदि आप उपयोग करते हैं`nano`.</p> </li> <li> <p>किट्टी की सभी विंडो बंद करें, फिर टर्मिनल को रीलॉन्च करें ताकि परिवर्तन प्रभावी हो सके।</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_गतिशील_समायोजन_अस्थायी_ज़ूम">✅ गतिशील समायोजन (अस्थायी ज़ूम)</h3> <div class="paragraph"> <p>यदि आप अस्थायी रूप से ज़ूम इन/आउट करना चाहते हैं बिना कॉन्फ़िगरेशन को संशोधित किए, डिफ़ॉल्ट कीबोर्ड शॉर्टकट्स का उपयोग करें :</p> </div> <div class="ulist"> <ul> <li> <p><strong>फ़ॉन्ट का आकार बढ़ाएँ</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + =</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>फ़ॉन्ट का आकार कम करें</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + -</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>आकार रीसेट करें</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + Backspace</code></p> </div> <div class="paragraph"> <p>इन सेटिंग्स टर्मिनल बंद होने के बाद बनी नहीं रहती।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_oh_my_zsh_की_स्थापना_और_कॉन्फ़िगरेशन">Oh My Zsh की स्थापना और कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक बार जब Zsh स्थापित और डिफ़ॉल्ट शेल के रूप में कॉन्फ़िगर हो जाए, तो आप <strong>Oh My Zsh</strong> के साथ अपने वातावरण को समृद्ध कर सकते हैं, जो Zsh कॉन्फ़िगरेशन प्रबंधन का एक फ्रेमवर्क है, जो प्रदान करता है:</p> </div> <div class="ulist"> <ul> <li> <p>प्रॉम्प्ट के लिए विषयों का एक संग्रह,</p> </li> <li> <p>बहुत से प्लगइन,</p> </li> <li> <p>कॉन्फ़िगरेशन की स्पष्ट व्यवस्था</p> </li> </ul> </div> <div class="sect2"> <h3 id="_oh_my_zsh_का_इंस्टॉलेशन">Oh My Zsh का इंस्टॉलेशन</h3> </div> <div class="sect2"> <h3 id="_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i">JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</h3> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="paragraph"> <p>ज़ैश सक्रिय है सुनिश्चित करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">zsh --version</code></pre> </div> </div> <div class="paragraph"> <p>यदि आवश्यक हो, तो लॉन्च करें</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">zsh</code></pre> </div> </div> <div class="paragraph"> <p>फिर आधिकारिक इंस्टॉलेशन स्क्रिप्ट डाउनलोड करें और चलाएँ:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"</code></pre> </div> </div> <div class="paragraph"> <p>यह स्क्रिप्ट :</p> </div> <div class="ulist"> <ul> <li> <p>फ़ोल्डर बनाओ`~/.oh-my-zsh`,</p> </li> <li> <p>आप संभवतः अपनी फ़ाइल को सेव कर सकते हैं`~/.zshrc`,</p> </li> <li> <p>नए प्रॉम्प्ट को स्वचालित रूप से सक्रिय करता है।</p> </li> </ul> </div> <div class="sect2"> <h3 id="_थीम_बदलें">थीम बदलें</h3> <div class="paragraph"> <p>अपने कॉन्फ़िगरेशन फ़ाइल खोलें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">nano ~/.zshrc</code></pre> </div> </div> <div class="paragraph"> <p>Variable को संशोधित करें`ZSH_THEME`अन्य विषय चुनने के लिए (उदाहरण के लिए`agnoster`) :</p> </div> <div class="paragraph"> <p>ZSH_THEME="agnoster</p> </div> <div class="paragraph"> <p>सहेजें और फिर कॉन्फ़िगरेशन को फिर से लोड करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">source ~/.zshrc</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_सत्यापन">सत्यापन</h3> <div class="paragraph"> <p>Kitty लॉन्च करें और जाँचें कि प्रॉम्प्ट ठीक से बदल गया है। आप Oh My Zsh के सक्रिय होने की पुष्टि निम्न कमांड चलाकर कर सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">echo $ZSH</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम समान होना चाहिए:</p> </div> <div class="paragraph"> <p>/home/आपका_उपयोगकर्ता/.oh-my-zsh</p> </div> </div> <div class="sect2"> <h3 id="_यूज़_केस_डायग्राम">यूज़ केस डायग्राम</h3> <div class="imageblock"> <div class="content"> <img src="./images/ohmyzsh-installation.png" alt="ohmyzsh installation" width="500" height="480"> </div> </div> </div> <div class="sect1"> <h2 id="_kitty_में_पारदर्शिता_सक्षम_करें">Kitty में पारदर्शिता सक्षम करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty की सबसे सराहनीय सुविधाओं में से एक टर्मिनल के पृष्ठभूमि में <strong>पारदर्शिता</strong> जोड़ने की क्षमता है। यह आपको अंतर्निहित वातावरण (खिड़की, डेस्कटॉप, आदि) को हल्के से देखने की अनुमति देता है, जो मल्टीटास्किंग में विशेष रूप से उपयोगी है।</p> </div> <div class="sect2"> <h3 id="_पारदर्शिता_के_लिए_पूर्वापेक्षा">पारदर्शिता के लिए पूर्वापेक्षा</h3> <div class="paragraph"> <p>Kitty में पारदर्शिता पर आधारित है<strong>विंडो कंपोज़र</strong>ग्राफिकल वातावरण द्वारा उपयोग किया गया। XFCE आधारित Xubuntu पर, सुनिश्चित करें कि वह<strong>संरचना सक्रिय है</strong>.</p> </div> <div class="ulist"> <div class="title">जाँच करें :</div> <ul> <li> <p>डेस्कटॉप पर राइट‑क्लिक > सेटिंग्स ><strong>विंडो प्रबंधक सेटिंग्स</strong>,</p> </li> <li> <p>टैब<strong>संगीतकार</strong>: बॉक्स <strong>"संयोजन सक्षम करें</strong>" चेक किया जाना चाहिए।</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/transparency-usecase.png" alt="transparency usecase" width="640" height="235"> </div> </div> </div> <div class="sect2"> <h3 id="_kitty_conf_में_पारदर्शिता_की_कॉन्फ़िगरेशन">kitty.conf में पारदर्शिता की कॉन्फ़िगरेशन</h3> <div class="paragraph"> <p>अपनी कॉन्फ़िगरेशन फ़ाइल खोलें`~/.config/kitty/kitty.conf`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">nano ~/.config/kitty/kitty.conf</code></pre> </div> </div> <div class="paragraph"> <p>निम्नलिखित पंक्तियों को जोड़ें या संशोधित करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-conf hljs" data-lang="conf">background_opacity 0.85</code></pre> </div> </div> <div class="paragraph"> <p>यह पैरामीटर मानों के बीच स्वीकार करता है :</p> </div> <div class="ulist"> <ul> <li> <p><code>1.0</code>→ अपरदर्शी (कोई पारदर्शिता नहीं),</p> </li> <li> <p><code>0.0</code>→ पूरी तरह से पारदर्शी (उपयोग नहीं किया जा सकता)</p> </li> <li> <p>मध्यवर्ती मान जैसे`0.90`, <code>0.75</code>, etc.</p> </li> </ul> </div> <div class="paragraph"> <p>एक अच्छा दृश्य समझौता आमतौर पर बीच में होता है`0.85` et <code>0.95</code>.</p> </div> </div> <div class="sect2"> <h3 id="_किटी_को_रीस्टार्ट_करें">किटी को रीस्टार्ट करें</h3> <div class="paragraph"> <p>किट्टी के सभी उदाहरण बंद करें, फिर एक नई विंडो लॉन्च करें ताकि परिवर्तन प्रभावी हो सकें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">kitty</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_संभावित_पूरक">संभावित पूरक</h3> <div class="paragraph"> <p>यदि आप एक कस्टम टर्मिनल पृष्ठभूमि का उपयोग करते हैं, तो आप एक पारदर्शी पृष्ठभूमि रंग (RGBA में) भी सेट कर सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-conf hljs" data-lang="conf">background #1e1e2eff</code></pre> </div> </div> <div class="paragraph"> <p>अंतिम घटक(<code>ff</code>) अपारदर्शिता दर्शाता है (de`00` à <code>ff</code>).</p> </div> </div> <div class="sect2"> <h3 id="_सीक्वेंस_डायग्राम_पारदर्शिता_के_साथ_किट्टी_का_प्रारंभ">सीक्वेंस डायग्राम - पारदर्शिता के साथ किट्टी का प्रारंभ</h3> <div class="imageblock"> <div class="content"> <img src="./images/transparency-sequence.png" alt="transparency sequence" width="752" height="422"> </div> </div> </div> <div class="sect2"> <h3 id="_ज्ञात_सीमाएँ">ज्ञात सीमाएँ</h3> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> <div class="paragraph"> <p>पारदर्शिता काम नहीं करती यदि: - XFCE कंपोज़र निष्क्रिय है, - असंगत विंडो प्रबंधक उपयोग किया जा रहा है, - आप Kitty का उपयोग कर रहे हैं बैकग्राउंड में एक <strong>tmux</strong> मोड में, पारदर्शिता समर्थन के बिना।</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ध्वनि_बीप_सुनाई_देने_वाली_घंटी_को_बंद_करें">ध्वनि बीप (सुनाई देने वाली घंटी) को बंद करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>डिफ़ॉल्ट रूप से, Kitty गलत कमांड दर्ज किए जाने या टर्मिनल घटना द्वारा ट्रिगर होने पर <strong>bip</strong> ध्वनि उत्पन्न करता है। यह शोर तेजी से परेशान करने वाला हो सकता है, विशेषकर एक गहन विकास पर्यावरण में।</p> </div> <div class="paragraph"> <p>इस व्यवहार को अक्षम करने के लिए, फ़ाइल में निम्नलिखित निर्देश जोड़ें।<code>~/.config/kitty/kitty.conf</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-conf hljs" data-lang="conf">audible_bell no</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>आप <strong>दृश्य प्रतिक्रिया</strong> को भी ध्वनि बीप के बजाय सक्रिय कर सकते हैं:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-conf hljs" data-lang="conf">visual_bell yes</code></pre> </div> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_किट्टी_का_अपडेट">किट्टी का अपडेट</h2> <div class="sectionbody"> <div class="paragraph"> <p>क्योंकि Kitty को एक स्क्रिप्ट के माध्यम से स्थापित किया गया है और किसी पैकेज प्रबंधक के माध्यम से नहीं, अपडेट को आधिकारिक इंस्टॉलेशन स्क्रिप्ट को फिर से चलाकर किया जाता है। इससे आपको नवीनतम संस्करण डाउनलोड करने और अपनी मौजूदा स्थापना को अपडेट करने की अनुमति मिलती है में`~/.local/kitty.app`.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>प्रत्यय`.app`पथ में`~/.local/kitty.app`यह लिनक्स पर किट्टी की आधिकारिक स्क्रिप्ट के माध्यम से स्थापना की प्रथा है, और यह किसी भी तरह से मैकओएस के साथ विशेष संगतता को दर्शाता नहीं है।</p> </div> </td> </tr> </table> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> <div class="paragraph"> <p>अपडेट कमांड चलाने से पहले, सुनिश्चित करें कि आप अपने होम निर्देशिका में हैं (<code>~</code>).</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>अपने होम निर्देशिका से निम्नलिखित कमांड चलाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">curl -L https://sw.kovidgoyal.net/kitty/installer.sh | sh /dev/stdin</code></pre> </div> </div> <div class="paragraph"> <p>यह स्क्रिप्ट संभालेगा :</p> </div> <div class="ulist"> <ul> <li> <p>नए संस्करण के बाइनरी डाउनलोड करें</p> </li> <li> <p>Extraire les fichiers dans <code>~/.local/kitty.app</code>.</p> </li> <li> <p>यदि आवश्यक हो तो सिम्बॉलिक लिंक को अपडेट करें।</p> </li> </ul> </div> <div class="paragraph"> <p>अद्यतन के बाद, सभी किट्टी इंस्टेंस को बंद करने और उन्हें फिर से शुरू करने की सिफारिश की जाती है ताकि यह सुनिश्चित किया जा सके कि नया संस्करण सही ढंग से लागू हो।</p> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ">संदर्भ</h2> <div class="sectionbody"> <div class="paragraph"> <p>यदि आप वैयक्तिकरण को गहरा करना चाहते हैं, तो आधिकारिक दस्तावेज़ देखें :</p> </div> <div class="ulist"> <ul> <li> <p>किट्टी : <a href="https://sw.kovidgoyal.net/kitty/" class="bare">https://sw.kovidgoyal.net/kitty/</a></p> </li> <li> <p><a href="https://sw.kovidgoyal.net/kitty/conf/#opt-kitty.background_opacity" class="bare">https://sw.kovidgoyal.net/kitty/conf/#opt-kitty.background_opacity</a></p> </li> <li> <p><a href="https://sw.kovidgoyal.net/kitty/conf/#opt-kitty.audible_bell" class="bare">https://sw.kovidgoyal.net/kitty/conf/#opt-kitty.audible_bell</a></p> </li> <li> <p>Zsh: <a href="https://zsh.sourceforge.io/" class="bare">https://zsh.sourceforge.io/</a></p> </li> <li> <p>गिटहब: <a href="https://github.com/kovidgoyal/kitty" class="bare">https://github.com/kovidgoyal/kitty</a></p> </li> <li> <p>Zsh: <a href="https://zsh.sourceforge.io/" class="bare">https://zsh.sourceforge.io/</a></p> </li> <li> <p><a href="https://ohmyz.sh/" class="bare">https://ohmyz.sh/</a></p> </li> <li> <p><a href="https://github.com/ohmyzsh/ohmyzsh/wiki" class="bare">https://github.com/ohmyzsh/ohmyzsh/wiki</a></p> </li> <li> <p><a href="https://docs.xfce.org/xfce/xfwm4/compositor" class="bare">https://docs.xfce.org/xfce/xfwm4/compositor</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>अब आपके पास :</p> </div> <div class="ulist"> <ul> <li> <p>एक आधुनिक और उच्च प्रदर्शन वाला टर्मिनल (Kitty)</p> </li> <li> <p>एक शक्तिशाली और अनुकूलन योग्य शेल (Zsh) का</p> </li> <li> <p>एक स्वच्छ कॉन्फ़िगरेशन जो सिस्टम पैकेज से स्वतंत्र है</p> </li> <li> <p>एक सुंदर और कार्यात्मक टर्मिनल जो Oh My Zsh से सुसज्जित है</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html Wed, 6 May 2026 00:00:00 +0000 blog/2026/0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_contexte_un_marché_qui_a_basculé">Le Contexte : Un Marché Qui a Basculé</a></li> <li><a href="#_le_panel_des_options">Le Panel des Options</a> <ul class="sectlevel2"> <li><a href="#_ce_que_jai_exclu_et_pourquoi">Ce Que J’ai Exclu (et Pourquoi)</a></li> </ul> </li> <li><a href="#_inférence_simple_la_mort_du_hardware_local">Inférence Simple : La Mort du Hardware Local</a> <ul class="sectlevel2"> <li><a href="#_le_calcul">Le Calcul</a></li> <li><a href="#_même_avec_un_usage_intensif">Même avec un Usage Intensif</a></li> </ul> </li> <li><a href="#_fine_tuning_le_cloud_est_imbattable">Fine-Tuning : Le Cloud Est Imbattable</a> <ul class="sectlevel2"> <li><a href="#_le_coût_réel_dun_fine_tune">Le Coût Réel d’un Fine-Tune</a></li> <li><a href="#_les_acteurs_spécialisés">Les Acteurs Spécialisés</a></li> </ul> </li> <li><a href="#_la_seule_vraie_raison_la_souveraineté_des_données">La Seule Vraie Raison : La Souveraineté des Données</a> <ul class="sectlevel2"> <li><a href="#_le_vrai_calcul_de_la_confidentialité">Le Vrai Calcul de la Confidentialité</a></li> </ul> </li> <li><a href="#_synthèse_la_matrice_de_décision">Synthèse : La Matrice de Décision</a></li> <li><a href="#_le_cas_particulier_labonnement_pro_face_aux_modèles_chinois">Le Cas Particulier : L’Abonnement Pro Face aux Modèles Chinois</a> <ul class="sectlevel2"> <li><a href="#_pourquoi_les_modèles_chinois_changent_tout">Pourquoi les Modèles Chinois Changent Tout</a></li> <li><a href="#_ce_que_ça_veut_dire_pour_le_hardware">Ce Que Ça Veut Dire pour le Hardware</a></li> </ul> </li> <li><a href="#_et_huawei">Et Huawei ?</a></li> <li><a href="#_conclusion_le_luxe_de_la_proximité">Conclusion : Le Luxe de la Proximité</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 14 minutes</div> <p>NVIDIA vend le DGX Spark comme un « supercalculateur IA de bureau » à $4 699. Ollama propose ses modèles cloud à $20/mois. Un H100 se loue $1.38/h chez Vast.ai. Et les modèles chinois open-source — DeepSeek, Qwen, GLM — sont disponibles partout, gratuitement, sans avoir à acheter une carte. Alors, ce Spark, il sert à quoi au juste ? J’ai fait les maths.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_le_contexte_un_marché_qui_a_basculé">Le Contexte : Un Marché Qui a Basculé</h2> <div class="sectionbody"> <div class="paragraph"> <p>En mai 2026, le paysage de l’IA a radicalement changé par rapport à l’annonce du DGX Spark au CES 2025. Trois forces ont convergé pour rendre le hardware local de plus en plus difficile à justifier :</p> </div> <div class="ulist"> <ul> <li> <p><strong>L’effondrement des prix du cloud GPU</strong> : un H100 se loue entre $1.38 et $3/h, contre $5-8/h il y a 18 mois</p> </li> <li> <p><strong>L’explosion des modèles chinois open-source</strong> : DeepSeek-V4, Qwen-3, GLM-5 sont compétitifs avec les modèles occidentaux, disponibles gratuitement</p> </li> <li> <p><strong>La montée des plateformes d’inférence managée</strong> : Ollama, Groq, Together AI proposent des API à des tarifs agressifs, avec des paliers gratuits généreux</p> </li> </ul> </div> <div class="paragraph"> <p>Le DGX Spark, annoncé à $2 999 puis monté à $4 699, arrive dans un monde qui n’a plus besoin de lui.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_panel_des_options">Le Panel des Options</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici les solutions disponibles en mai 2026 pour faire tourner des LLMs, de la plus légère à la plus lourde :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> <col style="width: 2.5%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Option</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Coût</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">VRAM / Capacité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modèles accessibles</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Contrainte principale</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Free</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$0/mois</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cloud léger</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles publics</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Usage limité, 1 modèle simultané</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Claude Pro</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$20/mois (~$240/an)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N/A (API fermée)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude 4.x uniquement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modèle unique, pas d’open-source</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Pro</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$20/mois (~$200/an)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cloud medium</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles publics</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 modèles simultanés max</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Max</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$100/mois (~$1 200/an)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cloud heavy</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles publics</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">10 modèles simultanés</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Cloud GPU (H100)</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$1.38-3/h</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">80 Go HBM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles, fine-tuning</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Facturation horaire, setup requis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>DGX Spark</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$4 699 (achat)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">128 Go unifié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles <128 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lent (~10x moins qu’un H100), fixe</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mac Studio M3 Ultra</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~$5 000+</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">192 Go unifié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles <192 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pas CUDA, écosystème MLX</p></td> </tr> </tbody> </table> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>Les prix cloud GPU cités sont ceux de Vast.ai et RunPod en mai 2026 — du spot/on-demand, pas du réservé. Les prix des hyperscalers (AWS, GCP, Azure) restent 2-3x plus élevés.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_ce_que_jai_exclu_et_pourquoi">Ce Que J’ai Exclu (et Pourquoi)</h3> <div class="paragraph"> <p>J’ai volontairement exclu les options suivantes de ce benchmark :</p> </div> <div class="ulist"> <ul> <li> <p><strong>API OpenAI / Anthropic / Google</strong> : le sujet ici est de faire tourner des modèles <strong>open-source</strong> qu’on peut choisir, fine-tuner, et ne pas être dépendant d’un vendor unique</p> </li> <li> <p><strong>Huawei Ascend / Atlas</strong> : Huawei ne commercialise pas d’équivalent desktop au DGX Spark. La gamme Ascend (910C, 910D) et Atlas (300I Duo, 350) est orientée datacenter — cartes PCIe, serveurs rack — pas des boîtiers compacts prêts à brancher. La puce Ascend 910C embarque 128 Go HBM mais c’est une puce serveur, pas un système autonome. L’Atlas 300I Duo offre 96 Go pour ~$1 400 mais nécessite une machine hôte</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_inférence_simple_la_mort_du_hardware_local">Inférence Simple : La Mort du Hardware Local</h2> <div class="sectionbody"> <div class="paragraph"> <p>Commençons par le cas d’usage le plus commun : chatter avec un LLM, faire du code review, générer du texte. Pas de fine-tuning, pas de batch processing, juste de l’inférence interactive.</p> </div> <div class="sect2"> <h3 id="_le_calcul">Le Calcul</h3> <div class="paragraph"> <p>Un DGX Spark à $4 699. Divisons par le coût annuel de chaque abonnement :</p> </div> <div id="diag-breakeven" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-7447dcff18600cfcdb05c5212204ea1f.svg" alt="Seuil de rentabilité du DGX Spark vs abonnements" width="837" height="219"> </div> </div> <div class="paragraph"> <p>Le verdict est brutal. Pour de l’inférence :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong> : il vous faudrait <strong>23 ans</strong> pour amortir un DGX Spark. Le Spark sera obsolète depuis 20 ans.</p> </li> <li> <p><strong>Ollama Max</strong> : <strong>4 ans</strong> — à condition d’utiliser le Spark 24/7, ce que personne ne fait</p> </li> <li> <p><strong>Claude Pro</strong> : même problème, <strong>20 ans</strong> pour du single-model fermé</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ La promesse du « supercalculateur IA de bureau » se heurte à une réalité comptable élémentaire : $4 699 / $20 par mois = jamais rentable pour un usage individuel. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_même_avec_un_usage_intensif">Même avec un Usage Intensif</h3> <div class="paragraph"> <p>Prenons le pire scénario pour le cloud : vous faites tourner un H100 8h/jour, 5 jours/semaine, 52 semaines/an.</p> </div> <div class="ulist"> <ul> <li> <p>8 × 5 × 52 = 2 080 heures/an</p> </li> <li> <p>2 080 × $2/h (prix moyen spot H100) = <strong>$4 160/an</strong></p> </li> </ul> </div> <div class="paragraph"> <p>Le Spark ($4 699) est rentabilisé en <strong>13 mois</strong>. Sauf que :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Le H100 est <strong>~10x plus rapide</strong> que le GB10 du Spark. Vous faites en 1h ce que le Spark fait en 10h. Pour le même volume de travail, le H100 vous coûte $416/an, pas $4 160.</p> </li> <li> <p>Le H100 a 80 Go HBM à 3.35 To/s de bande passante. Le Spark a 128 Go LPDDR5X à 273 Go/s. Pour les gros modèles, la bande passante compte plus que la capacité.</p> </li> </ol> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Comparer 1h de H100 à 1h de Spark n’a pas de sens. Le H100 fait le travail 10x plus vite. Le vrai coût cloud pour un workload donné est donc ~10x inférieur au calcul naïf basé sur les heures.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fine_tuning_le_cloud_est_imbattable">Fine-Tuning : Le Cloud Est Imbattable</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’argument classique des défenseurs du Spark : « oui mais pour le fine-tuning, c’est différent ».</p> </div> <div class="paragraph"> <p>Non, ça ne l’est pas.</p> </div> <div class="sect2"> <h3 id="_le_coût_réel_dun_fine_tune">Le Coût Réel d’un Fine-Tune</h3> <div class="paragraph"> <p>Un fine-tune LoRA/QLoRA sur Unsloth d’un modèle 7B :</p> </div> <div class="ulist"> <ul> <li> <p>~2-3h sur un H100 = <strong>$5 à $9</strong></p> </li> <li> <p>Même chose sur le Spark = <strong>20-30h</strong> (10x plus lent), bloque la machine</p> </li> </ul> </div> <div class="paragraph"> <p>Avec les $4 699 du Spark, vous pouvez financer :</p> </div> <div class="ulist"> <ul> <li> <p><strong>~500 à ~900 fine-tunes</strong> en cloud H100</p> </li> <li> <p>Ou <strong>~23 ans</strong> d’Ollama Pro</p> </li> <li> <p>Ou <strong>~4 ans</strong> d’Ollama Max</p> </li> </ul> </div> <div class="paragraph"> <p>Et pour des modèles plus gros (70B+) :</p> </div> <div class="ulist"> <ul> <li> <p>Le Spark avec ses 128 Go peut charger un 70B en Q4 — mais le fine-tune sera extrêmement lent</p> </li> <li> <p>Un H100 avec 80 Go peut fine-tuner un 70B en QLoRA 4-bit en quelques heures</p> </li> <li> <p>Pour du full fine-tune, il faut du multi-GPU de toute façon — le Spark est hors course</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_les_acteurs_spécialisés">Les Acteurs Spécialisés</h3> <div class="paragraph"> <p>En 2026, des plateformes comme Unsloth, Modal, Replicate, et Together AI proposent du fine-tuning serverless :</p> </div> <div class="ulist"> <ul> <li> <p>Pas de gestion de GPU</p> </li> <li> <p>Pas de configuration d’environnement</p> </li> <li> <p>Paiement à la minute</p> </li> <li> <p>Optimisations intégrées (flash attention, quantization automatique)</p> </li> </ul> </div> <div id="diag-fine-tuning-cost" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-00c27fa5b17d5b1836d28ea44e7aa323.svg" alt="Comparaison des coûts de fine-tuning" width="626" height="244"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_seule_vraie_raison_la_souveraineté_des_données">La Seule Vraie Raison : La Souveraineté des Données</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après avoir éliminé l’inférence, le fine-tuning, et le rapport qualité/prix — que reste-t-il au Spark ?</p> </div> <div class="paragraph"> <p><strong>La confidentialité absolue.</strong></p> </div> <div class="paragraph"> <p>Pas la confidentialité « je ne veux pas que mes prompts soient lus par un employé d’OpenAI ». Ça, c’est un faux problème en 2026 : Ollama, Groq, et la plupart des providers respectables ont des politiques de zéro log et zéro rétention.</p> </div> <div class="paragraph"> <p>La vraie confidentialité, c’est :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Air-gap réglementaire</strong> : défense, diplomatie, santé — les données ne peuvent <strong>physiquement</strong> pas quitter le bâtiment</p> </li> <li> <p><strong>Données propriétaires critiques</strong> : code source d’un produit non publié, secrets industriels, algorithmes de trading</p> </li> <li> <p><strong>Résilience réseau</strong> : l’IA doit continuer à fonctionner même si Internet tombe</p> </li> </ul> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p>Mais soyons honnêtes : quel pourcentage des acheteurs de DGX Spark est réellement dans ce cas ? 1% ? Le reste, c’est du « nice to have » transformé en dépense à $4 699.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_le_vrai_calcul_de_la_confidentialité">Le Vrai Calcul de la Confidentialité</h3> <div class="paragraph"> <p>Pour un usage individuel :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong> ($20/mois) + modèles open source chinois = solution pragmatique</p> </li> <li> <p>Si un prompt fuit chez Ollama, il se noie dans les millions de requêtes quotidiennes. C’est la goutte d’eau dans l’océan.</p> </li> <li> <p>Le risque réel n’est pas la fuite d’un prompt — c’est l’entraînement non consenti sur vos données. Et ça, les providers sérieux l’interdisent contractuellement.</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ La peur de « distiller son prompt dans le LLM » est un niveau de propagation d’information personnel tellement dilué qu’il relève plus de l’anxiété que de la menace réelle. À l’échelle industrielle, c’est différent. Mais à l’échelle individuelle, c’est du bruit. </em>_</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_synthèse_la_matrice_de_décision">Synthèse : La Matrice de Décision</h2> <div class="sectionbody"> <div id="diag-decision-matrix" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-06638fe7c7dbec3c1cf02043ac672e9a.svg" alt="Matrice de décision pour choisir sa solution LLM" width="2012" height="433"> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2222%;"> <col style="width: 2.2232%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Critère</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ollama Free</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ollama Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cloud GPU H100</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DGX Spark</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Inférence</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Limitée</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Confortable</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Overkill</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Lent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Fine-tuning</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Imbattable</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Possible mais lent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Coût annuel</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$200</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Variable (~$416-2 080*)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$4 699 upfront</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Confidentialité</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Cloud US</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Cloud US</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Cloud US (variable)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Totale</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Maintenance</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Setup unique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Électricité, mises à jour</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Obsolescence</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucune</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3-5 ans</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Écosystème logiciel</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles open</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles open</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles open</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CUDA (mais lent)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Veridict</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Occasionnel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Recommandé</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pros/Recherche</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Air-gap uniquement</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>*Variable selon volume de travail ; avec vitesse H100 ~10x > Spark, le coût effectif pour un workload donné est bas.</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_le_cas_particulier_labonnement_pro_face_aux_modèles_chinois">Le Cas Particulier : L’Abonnement Pro Face aux Modèles Chinois</h2> <div class="sectionbody"> <div class="paragraph"> <p>Un point mérite d’être souligné : la combinaison <strong>Ollama Pro à $20/mois + modèles chinois open-source</strong> est probablement le meilleur rapport qualité/prix de l’histoire de l’IA grand public.</p> </div> <div class="sect2"> <h3 id="_pourquoi_les_modèles_chinois_changent_tout">Pourquoi les Modèles Chinois Changent Tout</h3> <div class="ulist"> <ul> <li> <p><strong>DeepSeek-V4-Pro</strong> : 1.6T params, CSA+HCA, 1M contexte, compétitif avec Claude 4 et GPT-5 pour le code</p> </li> <li> <p><strong>Qwen-3</strong> : 235B, 256K contexte, excellent en français et en raisonnement</p> </li> <li> <p><strong>GLM-5.1</strong> : 744B, MLA+DSA, 200K contexte, taillé pour l’agentique</p> </li> </ul> </div> <div class="paragraph"> <p>Tous disponibles sur Ollama. Tous open-source (licences permissives). Tous utilisables sans restriction via un abonnement à $20/mois.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>Avec Ollama Pro, vous avez accès à ~5 modèles « frontier » open-source pour le prix d’un seul modèle fermé (Claude Pro). La valeur est tellement asymétrique que ça en devient presque absurde.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_ce_que_ça_veut_dire_pour_le_hardware">Ce Que Ça Veut Dire pour le Hardware</h3> <div class="paragraph"> <p>Si le meilleur rapport qualité/prix est un abonnement cloud à $20/mois, le hardware local devient un choix de <strong>confort</strong> ou de <strong>principe</strong> — pas un choix économique.</p> </div> <div class="paragraph"> <p>Un DGX Spark à $4 699, c’est l’équivalent de :</p> </div> <div class="ulist"> <ul> <li> <p>235 mois d’Ollama Pro</p> </li> <li> <p>23 jeux AAA jour de sortie</p> </li> <li> <p>4 MacBook Air M4</p> </li> <li> <p>Un an de loyer d’un T2 à Lyon</p> </li> </ul> </div> <div class="paragraph"> <p>Pour du calcul. Lent.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_et_huawei">Et Huawei ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Puisque la question m’a été posée pendant mes recherches : non, Huawei ne commercialise pas d’équivalent au DGX Spark.</p> </div> <div class="paragraph"> <p>Ce qui existe :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ascend 910C</strong> : 128 Go HBM, 800 TFLOPS FP16 — mais c’est une puce serveur, pas un desktop</p> </li> <li> <p><strong>Atlas 300I Duo</strong> : 96 Go LPDDR4X, carte PCIe à ~$1 400 — nécessite un hôte</p> </li> <li> <p><strong>Atlas 350</strong> : 112 Go HBM, 1.56 PFLOPS FP4 — accélérateur datacenter, pas un boîtier compact</p> </li> </ul> </div> <div class="paragraph"> <p>Huawei reste focalisé sur le marché des serveurs et des centres de données. Pour un boîtier compact « prêt à brancher » avec 120+ Go de VRAM, le DGX Spark (128 Go unifié) et le Mac Studio M3 Ultra (192 Go unifié) sont les seules options en 2026. Et pour l’instant, aucun constructeur chinois n’a annoncé de produit équivalent dans ce format.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_luxe_de_la_proximité">Conclusion : Le Luxe de la Proximité</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le DGX Spark n’est pas un mauvais produit. C’est un mauvais investissement pour 99% des acheteurs potentiels.</p> </div> <div id="diag-verdict" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-e8d62f731ea78fcb4f2978a3515b59c2.svg" alt="Verdict final — quel modèle économique domine en 2026" width="476" height="617"> </div> </div> <div class="paragraph"> <p><em><em>_ Acheter un DGX Spark en 2026, c’est comme acheter un serveur mail en 2010 : techniquement possible, philosophiquement satisfaisant, économiquement absurde pour un individu. </em>_</em></p> </div> <div class="paragraph"> <p>Le calcul est simple, et il ne ment pas :</p> </div> <div class="ulist"> <ul> <li> <p><strong>$0</strong> pour chatter avec DeepSeek sur Ollama Free</p> </li> <li> <p><strong>$200/an</strong> pour bosser sérieusement avec Ollama Pro</p> </li> <li> <p><strong>$5-9</strong> pour un fine-tune ponctuel sur cloud GPU</p> </li> <li> <p><strong>$4 699</strong> pour…​ l’expérience d’avoir un boîtier NVIDIA sur son bureau ?</p> </li> </ul> </div> <div class="paragraph"> <p>Le marché a tranché. Les abonnements cloud et les modèles open-source chinois ont gagné la bataille du prix. Le hardware local survit dans les niches réglementaires, pas dans les bureaux des développeurs.</p> </div> <div class="paragraph"> <p><em><em>_ Le DGX Spark n’est pas un outil rentable. C’est un statement. « Je veux mon IA chez moi, pas dans le cloud de quelqu’un d’autre. » C’est respectable. Mais en 2026, quand Ollama te donne DeepSeek-V4-Pro dans le cloud pour $20/mois, c’est surtout un statement qui coûte très cher. </em>_</em></p> </div> <hr> <div class="paragraph"> <p><strong>Cet article est issu d’une conversation avec mon agent IA sur la pertinence économique du DGX Spark, croisée avec une veille marché sur les prix cloud GPU (Vast.ai, RunPod), les grilles tarifaires Ollama/Claude, et l’écosystème des modèles chinois open-source. Les prix cités sont ceux de mai 2026 — ils auront probablement encore baissé quand vous lirez ces lignes.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0118_matrice_gouvernance_llm_zone_acces_workspace_post.html Mon, 4 May 2026 00:00:00 +0000 blog/2026/0118_matrice_gouvernance_llm_zone_acces_workspace_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_problème_le_prompt_engineering_est_un_château_de_sable">Le Problème : le Prompt Engineering est un Château de Sable</a></li> <li><a href="#_ma_réponse_la_matrice_44">Ma Réponse : la Matrice 4×4</a> <ul class="sectlevel2"> <li><a href="#_les_cinq_zones_dimension_spatiale_rgpd">Les Cinq Zones (Dimension Spatiale — RGPD)</a></li> <li><a href="#_la_classification_épistémique_deuxième_dimension">La Classification Épistémique (Deuxième Dimension)</a></li> </ul> </li> <li><a href="#_comment_le_llm_consomme_cette_matrice">Comment le LLM Consomme Cette Matrice</a></li> <li><a href="#_implémentation_tâches_gradle_typées">Implémentation : Tâches Gradle Typées</a></li> <li><a href="#_pourquoi_cest_un_manifeste_pas_juste_une_spec">Pourquoi C’est un Manifeste, Pas Juste une Spec</a></li> <li><a href="#_la_cascade_complète_du_brain_dump_à_larticle_de_blog">La Cascade Complète — du Brain Dump à l’Article de Blog</a></li> <li><a href="#_procontra">Pro/Contra</a></li> <li><a href="#_conclusion_rangez_vos_fichiers_pas_vos_prompts">Conclusion : Rangez vos Fichiers, Pas vos Prompts</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 14 minutes</div> <p>Pendant des mois, j’ai empilé les règles de gouvernance agent. Des fichiers EAGER, des checklists LAZY, des protocoles de fin de session en six étapes. Et pourtant, une question restait en suspens : <strong>comment le LLM sait-il ce qu’il a le droit de faire avec un fichier ?</strong></p> </div> <div class="paragraph"> <p>La réponse n’est pas dans un prompt. Elle est dans le système de fichiers.</p> </div> <div class="paragraph"> <p>Voici la spécification d’architecture qui rend la réponse exploitable — la <strong>matrice de gouvernance LLM</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_le_prompt_engineering_est_un_château_de_sable">Le Problème : le Prompt Engineering est un Château de Sable</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand on donne un fichier à un LLM, on lui donne tout. Le contenu, oui — mais aussi l’absence de garde-fous. Le LLM ne sait pas si ce fichier contient un secret, une opinion spéculative, ou du code closed source. Il va l’indexer, le résumer, le citer, le mélanger avec d’autres données — et potentiellement le publier dans un embedding public ou une réponse utilisateur.</p> </div> <div class="paragraph"> <p>La parade classique, c’est le prompt :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">"Tu es un assistant sécurisé. Ne divulgue jamais d'informations confidentielles. Si tu détectes un secret, ignore-le. Si tu détectes une opinion, ne la répète pas."</code></pre> </div> </div> <div class="paragraph"> <p>Ce prompt a trois problèmes :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Il repose sur la bonne volonté du LLM.</strong> Un modèle assez grand pour</p> </li> </ol> </div> <div class="paragraph"> <p>résoudre des bugs complexes est assez grand pour contourner une instruction de sécurité noyée dans 200k tokens de contexte.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Il est contextuel, pas structurel.</strong> Changez de prompt, changez de LLM,</p> </li> </ol> </div> <div class="paragraph"> <p>changez de session — et la règle disparaît.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Il ne scale pas.</strong> Chaque nouveau type de fichier, chaque nouveau niveau</p> </li> </ol> </div> <div class="paragraph"> <p>de confidentialité exige une nouvelle clause. Votre prompt devient un texte réglementaire que personne ne lit en entier.</p> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p>La sécurité d’un système ne doit jamais dépendre d’une instruction qu’on peut oublier, contourner, ou ne pas charger. Elle doit dépendre d’une barrière qu’on ne peut pas franchir sans le vouloir explicitement.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ma_réponse_la_matrice_44">Ma Réponse : la Matrice 4×4</h2> <div class="sectionbody"> <div class="paragraph"> <p>La solution que j’ai implémentée dans mon workspace est une <strong>matrice zone × droit d’accès LLM</strong>. Elle ne demande pas au LLM d’être prudent. Elle rend l’imprudence structurellement impossible.</p> </div> <div id="diag-matrix-overview" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-ff423528a76bb0bbfad06b9abbd23331.svg" alt="Vue d’ensemble de la matrice de gouvernance LLM — 5 zones × 4 droits d’accès" width="469" height="800"> </div> </div> <div class="sect2"> <h3 id="_les_cinq_zones_dimension_spatiale_rgpd">Les Cinq Zones (Dimension Spatiale — RGPD)</h3> <div class="paragraph"> <p>Chaque zone du workspace a un niveau RGPD qui détermine <strong>où</strong> le fichier peut être routé :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1682%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Zone</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Niveau RGPD</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Contenu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Droit d’accès RAG public</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Racine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0 — Intime</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Brain dumps, conversations LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>INTERDIT</strong> — jamais indexé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>configuration/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1 — Restreint propriétaire</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Secrets, tokens, clés API</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>INTERDIT</strong> — jamais indexé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>office/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2 — Restreint collaboratif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Data éditoriale, cadrage, formations</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>FILTRÉ</strong> — Vision uniquement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>foundry/private/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 — Ouvert conditionnel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Code closed source, SaaS non public</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>INTERDIT</strong> — dataset privé exclusivement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>foundry/public/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4 — Public natif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Code Apache 2.0, plugins publiés</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>LIBRE</strong> — indexation complète</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>La règle est simple : <strong>le chemin du fichier détermine ce que le LLM peut en faire.</strong> Pas de métadonnées à maintenir, pas de tag à ajouter dans le frontmatter, pas de classification manuelle à chaque commit. Le fichier est dans <code>OSS/</code> ? Il est public. Il est dans <code>configuration/</code> ? Il est intouchable.</p> </div> </div> <div class="sect2"> <h3 id="_la_classification_épistémique_deuxième_dimension">La Classification Épistémique (Deuxième Dimension)</h3> <div class="paragraph"> <p>La dimension spatiale dit <strong>où</strong> router. Mais il y a un deuxième axe, perpendiculaire : <strong>quoi</strong> router. Certains fichiers dans une zone autorisée contiennent des informations qui ne devraient pas être diluées telles quelles :</p> </div> <div id="diag-epistemic-filter" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-768538851f5f36f6e05c445dd02dc3ed.svg" alt="Filtre épistémique Vision/Opinion/Stratégie appliqué aux zones 2 et 3" width="1215" height="558"> </div> </div> <div class="paragraph"> <p>La grille de classification épistémique, gravée en Règle 2bis de ma gouvernance agent :</p> </div> <div class="paragraph"> <p>| Statut | Définition | Signal LLM | Destination | | VISION | Architecture stabilisée, pattern testé | Langage déclaratif, références sessions/tests | Dilution complète + Blog | | STRATÉGIE | Positionnement business, pricing | Vocabulaire marché, concurrence | Docs racine uniquement | | OPINION | Spéculation, hypothèse non validée | Langage hypothétique, intuition | Confinement Cercle 0 |</p> </div> <div class="paragraph"> <p>La combinaison des deux dimensions — zone physique × classification épistémique — forme la <strong>matrice complète</strong> :</p> </div> <div id="diag-full-matrix" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-f6f9959b0f07e3bff0bf64c8e1c20ea4.svg" alt="La matrice complète : 5 zones × 3 classifications épistémiques" width="442" height="132"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_comment_le_llm_consomme_cette_matrice">Comment le LLM Consomme Cette Matrice</h2> <div class="sectionbody"> <div class="paragraph"> <p>La matrice n’est pas un document que le LLM lit. C’est une <strong>contrainte implicite</strong> encodée dans le vecteur composite de contexte (EPIC 9 — en cours d’implémentation).</p> </div> <div class="paragraph"> <p>Voici ce que le LLM reçoit à chaque session :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">VECTEUR COMPOSITE DE CONTEXTE ├── RAG pgvector → OSS/ + office/Vision │ (similarité sémantique sur contenu publiable) ├── Knowledge Graph graphify → OSS/ │ (relations exactes entre artéfacts publics) ├── Knowledge Graph privé → CSS/ │ (relations entre code closed source — jamais exporté) ├── Métadonnées de zone → chaque fichier taggé par zone physique │ (le LLM sait s'il est dans office/ ou OSS/) └── Historique des décisions → WORKSPACE_VISION.adoc (contexte temporel des arbitrages)</code></pre> </div> </div> <div class="paragraph"> <p>Concrètement, quand le LLM me dit :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">Je vais indexer le contenu de edster/ pour enrichir le knowledge graph...</code></pre> </div> </div> <div class="paragraph"> <p>La métadonnée de zone répond avant même que le LLM ne finisse sa phrase : <code>edster/</code> est dans <code>CSS/</code>, niveau 3 → <strong>accès interdit au knowledge graph public.</strong> Le RAG ne le voit pas. Le graphe ne le touche pas. La réponse utilisateur ne le cite pas.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>L’ontologie spatiale fonctionne comme une <strong>permission Unix</strong> pour les LLM. Vous ne demandez pas à un processus d’être prudent avec <code>/etc/shadow</code> — vous lui refusez l’accès en lecture. Même principe.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_implémentation_tâches_gradle_typées">Implémentation : Tâches Gradle Typées</h2> <div class="sectionbody"> <div class="paragraph"> <p>La matrice n’est pas une philosophie. C’est du code. Voici le contrat de tâche Gradle qui l’implémente :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">abstract class ZoneAwareIndexer @Inject constructor( private val rootDir: DirectoryProperty, private val configServer: ConfigServerProperty // → configuration/ ) : DefaultTask() { @Input val zoneFilter: SetProperty<Zone> = project.objects.setProperty(Zone::class.java) @OutputFile val ragIndex: RegularFileProperty = project.objects.fileProperty() @TaskAction fun index() { val allowedPaths = zoneFilter.get().flatMap { it.resolve(rootDir.get()) } val forbiddenPaths = Zone.RESTRICTED.resolve(rootDir.get()) + Zone.INTIMATE.resolve(rootDir.get()) // Le RAG ne voit jamais configuration/ ni la racine // CSS/ alimente un index privé, pas celui-ci // office/ est filtré par le classifieur Vision/Opinion } } enum class Zone { INTIMATE, // Cercle 0 — racine RESTRICTED, // Cercle 1 — configuration/ EDITORIAL, // Cercle 2 — office/ CLOSED_SOURCE, // Cercle 3 — foundry/private/ OPEN_SOURCE // Cercle 3 — foundry/public/ }</code></pre> </div> </div> <div class="paragraph"> <p>La tâche est <strong>testable</strong>. Vous pouvez écrire un test qui vérifie :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `le RAG n'indexe jamais configuration`() { val index = ZoneAwareIndexer(rootDir, configServer) index.zoneFilter.set(setOf(Zone.OPEN_SOURCE, Zone.EDITORIAL)) index.index() assertThat(index.ragIndex).doesNotContain("configuration/") } @Test fun `le code closed source est exclu du RAG public`() { val index = ZoneAwareIndexer(rootDir, configServer) index.zoneFilter.set(setOf(Zone.OPEN_SOURCE)) // OSS only assertThat(index.ragIndex).doesNotContain("edster") }</code></pre> </div> </div> <div class="paragraph"> <p>380 tests, 380 PASS. Comme pour plantuml-gradle — la sécurité est testée, pas espérée.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_cest_un_manifeste_pas_juste_une_spec">Pourquoi C’est un Manifeste, Pas Juste une Spec</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce document est une spécification d’architecture parce qu’il définit :</p> </div> <div class="ulist"> <ul> <li> <p>Des <strong>dimensions</strong> (spatiale, épistémique)</p> </li> <li> <p>Des <strong>règles déterministes</strong> (zone → droit d’accès)</p> </li> <li> <p>Un <strong>contrat de tâche</strong> (Gradle typé, testable)</p> </li> <li> <p>Une <strong>implémentation de référence</strong> (mon workspace)</p> </li> </ul> </div> <div class="paragraph"> <p>Mais c’est aussi un <strong>manifeste</strong> parce qu’il prend position sur un débat plus large : <strong>comment gouverner l’accès d’un LLM à des données ?</strong></p> </div> <div class="paragraph"> <p>La réponse de l’industrie, c’est le prompt engineering + les guardrails<br> les classifiers post-hoc. Ma réponse, c’est : <strong>rangez vos fichiers dans les bons dossiers.</strong> Le reste est automatique.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Ce manifeste ne dit pas "les LLM doivent être alignés". Il dit : "l’alignement d’un LLM sur vos règles de sécurité est une conséquence de votre système de fichiers, pas de votre prompt."</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_la_cascade_complète_du_brain_dump_à_larticle_de_blog">La Cascade Complète — du Brain Dump à l’Article de Blog</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pour illustrer le cycle complet, voici comment cette idée de matrice est née et a été diluée :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Session 4 mai 2026 — Feedback global du workspace │ ├→ Le LLM identifie : "la dualité public/privé est invisible" │ → Classifié VISION (constat architectural vérifiable) │ ├→ PICTURE_ME_ROLLIN_MATRICE_4X4.adoc — STIMULUS (Cercle 0) │ → Brain dump structuré, classification VISION confirmée │ ├→ DILUTION → WORKSPACE_AS_PRODUCT.adoc (section Matrice 4×4) │ → La spec vit dans les documents racine │ ├→ DILUTION → WORKSPACE_ORGANIZATION.adoc (OSS/CSS) │ → La granularisation est documentée │ └→ ARTICLE 0117 (ce document) → cheroliv.com → La VISION est publiée</code></pre> </div> </div> <div class="paragraph"> <p>Ce qui a commencé comme une observation en session ("hé, le RAG ne sait pas que edster est closed source") est devenu une spécification d’architecture publiée en moins d’une session. C’est le pattern STIMULUS en action.</p> </div> </div> </div> <div class="sect1"> <h2 id="_procontra">Pro/Contra</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Cette Approche (Ontologie Spatiale + Matrice)</th> <th class="tableblock halign-left valign-top">L’Approche Classique (Prompt + Guardrails)</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mécanique</strong> — le système de fichiers bloque l’accès, pas le LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Déclarative</strong> — le prompt demande au LLM d’être prudent</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Testable</strong> — le contrat de tâche Gradle est vérifié par 380+ tests</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non testable</strong> — "le LLM a-t-il respecté la règle ?" est une question ouverte</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Indépendante du LLM</strong> — changez de modèle, les dossiers restent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Dépendante du LLM</strong> — chaque modèle interprète le prompt différemment</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Scalable</strong> — nouveau type de données = nouveau dossier, zéro changement de code</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non scalable</strong> — nouveau type de données = nouvelle clause de prompt, nouveau risque de régression</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Auditable</strong> — le système de fichiers est l’audit trail</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non auditable</strong> — le prompt n’a pas d’historique, pas de diff, pas de blame</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Contrainte</strong> : exige une discipline d’organisation initiale</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Contrainte</strong> : exige une discipline de rédaction de prompt à chaque session</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_conclusion_rangez_vos_fichiers_pas_vos_prompts">Conclusion : Rangez vos Fichiers, Pas vos Prompts</h2> <div class="sectionbody"> <div class="paragraph"> <p>La matrice de gouvernance LLM que je viens de décrire n’est pas un produit. C’est une <strong>spécification d’architecture</strong> — et c’est pour ça qu’elle est publiable.</p> </div> <div class="paragraph"> <p>Ce qui la rend robuste, c’est qu’elle ne demande rien au LLM. Elle ne lui fait pas confiance. Elle ne repose pas sur son alignement, sa compréhension du français, ou sa bonne volonté. Elle repose sur le système de fichiers — la couche la plus basse, la plus stable, la plus testée de toute la stack.</p> </div> <div class="paragraph"> <p>Quand je dis à mon LLM "tu peux tout indexer dans <code>OSS/</code>, rien dans <code>configuration/</code>, et <code>office/</code> seulement si c’est classifié Vision" — ce n’est pas une instruction. C’est un <strong>filtre</strong> — implémenté en Kotlin, vérifié par 380 tests, exécuté avant que le LLM ne voie les données.</p> </div> <div class="paragraph"> <p>C’est la différence entre dire à quelqu’un "ne regarde pas dans ce tiroir" et fermer le tiroir à clé. La gouvernance agent que je construis depuis des mois est la clé. La matrice est le plan du meuble.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0116_compartimentage_epistemique_automatise_llm_post.html">Article 0116 — Le Compartimentage Épistémique Automatisé</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Article 0114 — Les Cercles de Confiance et l’Ontologie Spatiale</a></p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Gouverner un Agent IA avec du AsciiDoc</a></p> </li> <li> <p><a href="../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html">Article 0115 — L’Anonymiseur MVP0</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0117_granularisation_oss_css_repositorie_workspace_post.html Sun, 3 May 2026 00:00:00 +0000 blog/2026/0117_granularisation_oss_css_repositorie_workspace_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_laccident_qui_attendait_de_se_produire">L’Accident qui Attendait de se Produire</a> <ul class="sectlevel2"> <li><a href="#_la_vraie_question">La Vraie Question</a></li> </ul> </li> <li><a href="#_la_solution_oss_et_css">La Solution : OSS/ et CSS/</a></li> <li><a href="#_pourquoi_oss_et_css_et_pas_public_et_private">Pourquoi "OSS" et "CSS" et Pas "Public" et "Private"</a> <ul class="sectlevel2"> <li><a href="#_larbre_complet_quatre_zones_pas_trois">L’Arbre Complet — Quatre Zones, Pas Trois</a></li> </ul> </li> <li><a href="#_le_cas_particulier_cheroliv_com">Le Cas Particulier : cheroliv.com</a> <ul class="sectlevel2"> <li><a href="#_bakery_gradle_sen_fiche">bakery-gradle S’En Fiche</a></li> </ul> </li> <li><a href="#_impact_sur_la_gouvernance_agent">Impact sur la Gouvernance Agent</a></li> <li><a href="#_ce_quon_gagne_et_ce_quon_perd">Ce Qu’on Gagne (Et Ce Qu’on Perd)</a></li> <li><a href="#_conclusion_le_signal_physique_bat_le_signal_logiciel">Conclusion : le Signal Physique Bat le Signal Logiciel</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 10 minutes</div> <p><code>foundry/</code> — la zone fonctionnelle qui héberge le code de mon workspace — contient 18 projets. Huit sont open source sous Apache 2.0. Un seul est closed source — le SaaS Edster. Pendant des mois, ces neuf projets ont cohabité dans le même dossier, séparés uniquement par…​ rien. Leur statut public/privé était une information dans ma tête, pas dans le système de fichiers.</p> </div> <div class="paragraph"> <p>Et puis j’ai voulu brancher un RAG. Et là, tout s’est effondré.</p> </div> </div> </div> <div class="sect1"> <h2 id="_laccident_qui_attendait_de_se_produire">L’Accident qui Attendait de se Produire</h2> <div class="sectionbody"> <div class="paragraph"> <p>En avril 2026, j’ai commencé à implémenter le RAG pgvector pour slider-gradle. Le principe : indexer tous les dépôts de <code>foundry/</code>, produire des embeddings, et les injecter dans le contexte du LLM pour qu’il ait une "perception" du dossier <code>foundry/</code>.</p> </div> <div class="paragraph"> <p>Le pipeline était simple :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val repos = fileTree(rootDir) { include("**/*.adoc", "**/*.kts", "**/*.kt", "**/*.json", "**/*.yml") } val chunks = repos.map { chunk(it) } val embeddings = chunks.map { embed(it) } pgvector.insert(embeddings)</code></pre> </div> </div> <div class="paragraph"> <p>Simple. Efficace. Et <strong>dangereux</strong>.</p> </div> <div class="paragraph"> <p>Parce que ce <code>fileTree</code> ne fait pas la différence entre <code>plantuml-gradle/</code> (Apache 2.0, public) et <code>edster/</code> (closed source, private). Il avale tout. Et si un jour je publie ces embeddings — sur un dashboard, dans une réponse LLM, dans un dataset d’entraînement — le code propriétaire d’Edster fuit.</p> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p>Le problème n’est pas qu’un LLM lise du code closed source. Le problème, c’est que ce code finisse dans un embedding vectoriel <strong>public</strong> — irréversible, non supprimable, non auditable.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_la_vraie_question">La Vraie Question</h3> <div class="paragraph"> <p>Ce n’est pas "comment empêcher le LLM de fuiter du code ?". C’est "comment rendre la fuite structurellement impossible ?"</p> </div> <div class="paragraph"> <p>La réponse n’est pas un prompt. La réponse, c’est de couper le dossier en deux.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_oss_et_css">La Solution : OSS/ et CSS/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">foundry/ ├── plantuml-gradle/ ← public ├── bakery-gradle/ ← public ├── magic-stick/ ← public ├── edster/ ← PRIVÉ ├── slider-gradle/ ← public └── ... ← mélange invisible</code></pre> </div> </div> <div class="paragraph"> <p>Après :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">foundry/ ├── OSS/ ← tout est Apache 2.0 │ ├── plantuml-gradle/ │ ├── bakery-gradle/ │ ├── magic-stick/ │ ├── slider-gradle/ │ └── ... └── CSS/ ← tout est closed source / private └── edster/</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>fileTree</code> devient :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val ossRepos = fileTree(File(rootDir, "OSS")) { include("**/*.adoc", "**/*.kts", "**/*.kt", "**/*.json", "**/*.yml") } val cssRepos = fileTree(File(rootDir, "CSS")) { include("**/*.adoc", "**/*.kts", "**/*.kt", "**/*.json", "**/*.yml") } // Embeddings publics — OSS seulement pgvectorPublic.insert(ossRepos.map { chunk(it) }.map { embed(it) }) // Dataset fine-tuning privé — CSS seulement fineTuningDataset.insert(cssRepos.map { chunk(it) }) // jamais publié</code></pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Le RAG public ne voit jamais <code>CSS/</code>. Le code closed source alimente un dataset privé de fine-tuning — un modèle interne qui ne sort jamais de chez moi. La séparation est mécanique, pas déclarative.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_oss_et_css_et_pas_public_et_private">Pourquoi "OSS" et "CSS" et Pas "Public" et "Private"</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le choix des acronymes OSS (Open Source Software) et CSS (Closed Source Software) est délibéré :</p> </div> <div class="ulist"> <ul> <li> <p>"Public"/"Private" décrit la <strong>visibilité</strong> (ce que GitHub voit)</p> </li> <li> <p>"OSS"/"CSS" décrit la <strong>nature</strong> du code (ce que le LLM doit savoir)</p> </li> </ul> </div> <div class="paragraph"> <p>La visibilité GitHub est une métadonnée du repo distant. La nature du code est une propriété du contenu. Le LLM n’a pas accès à l’API GitHub — mais il a accès au système de fichiers. <code>CSS/</code> lui dit "attention, ce code n’est pas sous licence libre" sans avoir besoin de lire un <code>LICENSE</code> ou de parser un <code>package.json</code>.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>Le nom du dossier est la métadonnée la plus robuste que vous puissiez donner à un LLM. Elle ne peut pas être mal parsée, ignorée, ou mal interprétée. Le LLM voit <code>CSS/edster/</code> dans le chemin du fichier — il sait.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_larbre_complet_quatre_zones_pas_trois">L’Arbre Complet — Quatre Zones, Pas Trois</h3> <div class="paragraph"> <p>La granularisation OSS/CSS complète l’ontologie à trois zones. La zone <code>foundry/</code> passe de 1 à 2 sous-zones fonctionnelles :</p> </div> <div id="diag-four-zone-workspace" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-69dfc4d88e57c2bbc80fff055ca536cd.svg" alt="L’organisation de foundry/ en deux sous-zones OSS et CSS" width="1769" height="5736"> </div> </div> <div class="paragraph"> <p>| Zone | RGPD | Indexation RAG public | Dataset fine-tuning | | Racine | Niveau 0 — Intime | ✗ | ✗ | | <code>configuration/</code> | Niveau 1 — Restreint | ✗ | ✗ | | <code>office/</code> | Niveau 2 — Collaboratif | ✓ Filtré | ✓ Filtré | | <code>foundry/private/</code> | Niveau 3 — Ouvert conditionnel | ✗ | ✓ Privé | | <code>foundry/public/</code> | Niveau 4 — Public natif | ✓ Libre | ✓ Public |</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_cas_particulier_cheroliv_com">Le Cas Particulier : cheroliv.com</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pendant que j’y étais, j’ai corrigé une autre incohérence. Mon site <code>cheroliv.com</code> vivait dans <code>foundry/</code> comme un projet logiciel à part entière — avec son propre build Gradle, sa propre CI, sa propre gouvernance <code>.agents/</code>.</p> </div> <div class="paragraph"> <p>Mais les articles de blog ne sont pas du code. Ce sont des <strong>données éditoriales</strong> de Cercle 2 — au même titre que les cadrages de <code>office/pilotage/</code> ou les formations de <code>office/formations/</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">AVANT APRÈS foundry/ office/ cheroliv.com/ sites/ site/jbake/content/blog/ cheroliv.com/ 2026/0117_....adoc 2026/0117_....adoc</code></pre> </div> </div> <div class="paragraph"> <p>Ce qui change :</p> </div> <div class="ulist"> <ul> <li> <p>Les articles sont dans <code>office/</code> → confidentialité de Cercle 2</p> </li> <li> <p>La tâche <code>publishSite</code> devient une capability de <code>engine</code></p> </li> </ul> </div> <div class="paragraph"> <p>via <code>bakery-gradle</code> — le plugin reçoit un <code>FileTree</code>, il ne sait pas que les articles viennent de <code>office/</code></p> </div> <div class="ulist"> <ul> <li> <p>Une seule CI, une seule gouvernance — zéro duplication</p> </li> <li> <p>Le classifier Vision/Opinion (Règle 2bis) s’applique automatiquement :</p> </li> </ul> </div> <div class="paragraph"> <p>les articles dans <code>office/</code> sont filtrés avant publication</p> </div> <div class="sect2"> <h3 id="_bakery_gradle_sen_fiche">bakery-gradle S’En Fiche</h3> <div class="paragraph"> <p>Et c’est ça qui est beau. Le plugin <code>bakery-gradle</code> n’a pas été modifié. Il reçoit un répertoire de contenu AsciiDoc, il génère du HTML, il push sur GitHub Pages. Que ce répertoire s’appelle <code>site/jbake/content/</code> ou <code>office/sites/cheroliv/</code> — le plugin s’en fout.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// engine/build.gradle.kts task("publishBlog") { doLast { val articles = fileTree("../../office/sites/cheroliv/2026/") bakery.generate(articles) // ← bakery ne sait pas d'où ça vient } }</code></pre> </div> </div> <div class="paragraph"> <p>Le contrat d’interface est une tâche Gradle. Pas une API REST. Pas un webhook. Une tâche — typée, testable, exécutable en local et dans la CI.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_impact_sur_la_gouvernance_agent">Impact sur la Gouvernance Agent</h2> <div class="sectionbody"> <div class="paragraph"> <p>La granularisation OSS/CSS modifie la gouvernance agent sur trois points :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RAG public</strong> : le périmètre d’indexation passe de <code>foundry/**</code></p> </li> </ol> </div> <div class="paragraph"> <p>à <code>foundry/public/<strong></code> + <code>office/Vision/</strong></code>. Le code closed source est exclu de l’index par configuration de tâche, pas par prompt.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Knowledge Graph</strong> : graphify-gradle produit deux graphes :</p> <div class="ulist"> <ul> <li> <p><code>office/graph.json</code> (public) — relations entre artéfacts OSS + office/Vision * <code>configuration/graph_private.json</code> (gitignored, privé) — relations entre artéfacts CSS, jamais publié</p> </li> </ul> </div> </li> <li> <p><strong>Dataset fine-tuning</strong> : <code>codebase-gradle</code> a désormais deux sources :</p> <div class="ulist"> <ul> <li> <p><code>OSS/</code> → datasets publics (modèles communautaires, benchmarks) * <code>CSS/</code> → datasets privés (modèle interne, fine-tuning propriétaire)</p> </li> </ul> </div> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_ce_quon_gagne_et_ce_quon_perd">Ce Qu’on Gagne (Et Ce Qu’on Perd)</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1436%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Avant (dossier plat)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Après (OSS/CSS + office/sites)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ls foundry/</code> → mélange public/privé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ls foundry/public/</code> → tout est publiable</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG indexe tout sans discrimination</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG indexe <code>OSS/</code> + <code>office/Vision</code> exclusivement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Impossible de savoir si un projet est open source</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le chemin <code>OSS/</code> ou <code>CSS/</code> le dit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com a sa propre CI, sa propre gouvernance</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">La CI et la gouvernance sont mutualisées dans engine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Les articles de blog sont dans un dépôt "code"</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Les articles de blog sont dans <code>office/sites/</code> — data, pas code</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Risque de fuite de code closed source dans des embeddings publics</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Structurellement impossible — <code>CSS/</code> hors scope RAG</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le seul coût : un <code>git mv</code> global sur les 17 dépôts OSS + un refactor du <code>build.gradle.kts</code> de <code>engine</code>. C’est une migration à froid — pas de données en vol, pas d’utilisateurs impactés.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_signal_physique_bat_le_signal_logiciel">Conclusion : le Signal Physique Bat le Signal Logiciel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce que j’ai fait cet après-midi, c’est remplacer une convention invisible par une séparation visible dans la zone <code>foundry/</code>. Avant, vous deviez <strong>savoir</strong> que <code>edster/</code> était closed source. Maintenant, vous le <strong>voyez</strong> — le dossier s’appelle <code>CSS/</code>.</p> </div> <div class="paragraph"> <p>C’est le même principe que les permissions Unix, les VLAN réseau, ou les compartiments coupe-feu dans une base de données. La sécurité ne doit pas être une information que vous devez retenir. Elle doit être une propriété <strong>physique</strong> du système.</p> </div> <div class="paragraph"> <p>La granularisation OSS/CSS est la traduction de ce principe dans le domaine de la gouvernance LLM. Le LLM n’a pas besoin de savoir qu’Edster est confidentiel. Il a besoin d’être incapable de l’indexer.</p> </div> <div class="paragraph"> <p>Et c’est exactement ce que <code>CSS/</code> garantit.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0118_matrice_gouvernance_llm_zone_acces_workspace_post.html">Article 0117 — La Matrice de Gouvernance LLM</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Article 0114 — Les Cercles de Confiance</a></p> </li> <li> <p><a href="0116_compartimentage_epistemique_automatise_llm_post.html">Article 0116 — Le Compartimentage Épistémique Automatisé</a></p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Gouverner un Agent IA avec du AsciiDoc</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0116_compartimentage_epistemique_automatise_llm_post.html Sat, 2 May 2026 00:00:00 +0000 blog/2026/0116_compartimentage_epistemique_automatise_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_problème_penser_librement_sans_publier_nimporte_quoi">Le Problème : Penser Librement sans Publier N’Importe Quoi</a></li> <li><a href="#_le_pattern_stimulus_naître_fixer_diluer_mourir">Le Pattern STIMULUS — Naître, Fixer, Diluer, Mourir</a></li> <li><a href="#_la_délégation_au_llm_pourquoi_cest_le_llm_qui_filtre">La Délégation au LLM : Pourquoi C’est le LLM Qui Filtre</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 10 minutes</div> <p>Mon LLM ne se contente pas d’exécuter mes tâches Gradle. Il est le gardien de la frontière entre ma pensée privée et mon expression publique. Chaque idée est classifiée — Vision, Opinion, Stratégie — avant d’être routée. Voici comment ce compartimentage épistémique automatisé protège mon jardin mental sans me faire taire.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_penser_librement_sans_publier_nimporte_quoi">Le Problème : Penser Librement sans Publier N’Importe Quoi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand un développeur solo documente son processus de pensée avec un LLM, il se heurte à un paradoxe :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">CAPTURE TOUT (Cercle 0, jardin secret) ├→ Brain dump libre, pas de censure ├→ Idées brutes, spéculations, intuitions non vérifiées ├→ Allers-retours LLM : challenger, itérer, raffiner └→ Le LLM voit TOUT — le bon, le flou, l'embryonnaire PUBLICATION SÉLECTIVE (Cercle 4, blog public) ├→ Uniquement les décisions actées ├→ Uniquement les patterns testés (>100 tests PASS) ├→ Uniquement ce qui a de la valeur pour le lecteur └→ JAMAIS une spéculation présentée comme une vérité</code></pre> </div> </div> <div class="paragraph"> <p>Entre ces deux extrêmes, il y a un <strong>filtre</strong>. La question est : qui le fait ? Un humain fatigué en fin de session ? Un script de regex naïf ? Ou le LLM lui-même, qui a déjà tout lu ?</p> </div> <div class="paragraph"> <p>Ma réponse : le LLM.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_pattern_stimulus_naître_fixer_diluer_mourir">Le Pattern STIMULUS — Naître, Fixer, Diluer, Mourir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le STIMULUS est un fichier <code>.adoc</code> temporaire à la racine du workspace (Cercle 0). Son nom suit une convention évocatrice — <code>PICTURE_ME_ROLLIN.adoc</code>, <code>HOLD_MY_BEER.adoc</code>, <code>ONCE_UPON_A_TIME.adoc</code> — qui capture l’intention exploratoire du moment.</p> </div> <div class="paragraph"> <p>Son cycle de vie est impitoyable :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">CRÉATION (Cercle 0) ├→ Fichier vide, brain dump libre ├→ Allers-retours LLM ← → développeur └→ Aucune pression de structure ou de publication MATURATION ├→ Le contenu se densifie ├→ Des sections émergent naturellement └→ Le fichier devient une référence informelle de session CLASSIFICATION ÉPISTÉMIQUE ← FAIT PAR LE LLM ├→ VISION → publiable, diluer dans les docs publics + blog ├→ OPINION → confiner au Cercle 0, pas de dilution externe └→ STRATÉGIE → dilution restreinte (docs racine, PAS de blog) DILUTION (Cascade vers Cercles légitimes) ├→ VISION → WORKSPACE_AS_PRODUCT.adoc + WHAT_THE_GAMES.adoc + blog ├→ STRATÉGIE → WORKSPACE_AS_PRODUCT.adoc (section business) └→ OPINION → reste dans le stimulus, ne bouge pas ARCHIVAGE + SUPPRESSION ├→ Snapshot dans configuration/vision-archive/ (trace historique) └→ rm du stimulus — il a fini son travail</code></pre> </div> </div> <div class="paragraph"> <p>Un stimulus qui survit plus de 2 sessions sans dilution est un anti-pattern. Soit l’information est trop importante pour moisir dans un fichier temporaire (→ diluer), soit elle est trop floue pour mériter d’exister (→ supprimer).</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_délégation_au_llm_pourquoi_cest_le_llm_qui_filtre">La Délégation au LLM : Pourquoi C’est le LLM Qui Filtre</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je ne hardcode pas la classification Vision/Opinion en Kotlin. Je l’injecte dans le <strong>prompt système</strong> du LLM via <code>AGENT_GOVERNANCE.adoc</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- Pour chaque dilution de stimulus ou session, tu es responsable de classifier le contenu : - VISION : décision architecturale actée, pattern testé en production (>100 tests PASS), décision documentée dans BACKLOG ou ROADMAP - OPINION : spéculation, hypothèse non validée par des tests, intuition sans ancrage expérimental - STRATEGIE : positionnement business, pricing, marché cible Règles : - Si OPINION, le contenu reste confiné dans son cercle d'origine - Si VISION, tu procèdes à la dilution dans les documents racine - Si STRATEGIE, dilution restreinte (docs racine, pas de blog public) - Cette classification détermine aussi si un article de blog est publiable sur cheroliv.com ---- Le LLM lit cette directive **avant** de traiter la session. Elle est dans son contexte immédiat, pas dans un fichier séparé. C'est du *prompt engineering déterministe* : le comportement émerge du texte injecté, pas d'un classifieur externe. === Pourquoi Ça Marche — et Pourquoi C'est Contre-Intuitif La réaction standard : « Tu confies la classification à l'IA ? Et si elle se trompe ? » Réponse : l'humain ne fait pas mieux à 2h du matin. La différence, c'est que le LLM, lui, lit TOUT. Il a le contexte complet de la session et des documents cibles. Il sait que `VPS ECO-16 12€ HT` est une décision d'infrastructure (VISION) alors que `« le TTS ElevenLabs sonne plus naturel que Coqui »` est une opinion non vérifiée par un benchmark. L'humain, en fin de session, lit en diagonale et fait au mieux. Le LLM lit exhaustivement et applique une grille systématique. Le résultat est **plus fiable**, pas moins. Et pour les 20% de cas ambigus — la zone grise où même le LLM hésite — la réponse n'est pas « rajouter du code ». La réponse est **LangGraph4j** (EPIC 13) : un graphe d'état qui, pour les cas ambigus, active un nœud Human-in-the-Loop et remonte à l'humain pour décision. Mais pour les 80% de cas clairs, le LLM suffit. == Le Tuyau Complet : du Brain Dump au Blog Post Voici le flux complet — de l'idée brute à l'article publié — avec le LLM comme seul filtre : [source] ---- CERCLE 0 (jardin secret) PICTURE_ME_ROLLIN.adoc ← brain dump, allers-retours LLM ↓ [LLM classifie] → VISION / OPINION / STRATÉGIE ↓ VISION → dilution dans WORKSPACE_AS_PRODUCT.adoc → dilution dans WHAT_THE_GAMES_BEEN_MISSING.adoc → dilution dans WORKSPACE_VISION.adoc (session context) → RÉDACTION ARTICLE BLOG ← le LLM écrit, pas le dev ↓ CERCLE 4 (blog public) 0116_compartimentage_epistemique.adoc ← publié sur cheroliv.com ↓ ./gradlew deploy (bakery-gradle → JBake → JGit → GitHub Pages) ↓ https://cheroliv.com/blog/2026/0116/ ← live ---- Le développeur n'écrit pas l'article. Il challenge, relit, valide. Le LLM écrit. La boucle est : 1. Brain dump libre → pas de censure 2. Classification épistémique par le LLM → pas de fuite 3. Rédaction par le LLM → pas de procrastination 4. Relecture humaine → pas d'erreur Le goulot d'étranglement historique — « je n'ai pas le temps d'écrire » — est éliminé. Le LLM fait le gros du travail. L'humain fait ce que seul l'humain peut faire : juger. == Les Trois Documents Racine — Comment l'Information Trouve Sa Place Chaque document cible a un rôle précis dans la cascade de dilution : [cols="1,3,2"] |=== |Document |Ce qu'il reçoit |Type de contenu |`WORKSPACE_AS_PRODUCT.adoc` |Décisions architecturales, stack technique, roadmap, business model |VISION + STRATÉGIE |`WHAT_THE_GAMES_BEEN_MISSING.adoc` |Patterns, leçons, anti-patterns, ontologie, règles formelles |VISION (patterns testés) |`WORKSPACE_VISION.adoc` |Contexte de session, historique des décisions, points d'infrastructure |VISION + STRATÉGIE (contexte) |`AGENT_GOVERNANCE.adoc` |Règles de gouvernance, portefeuille projets, procédures |VISION (gouvernance) |**Blog cheroliv.com** |Articles publics, valeur pour le lecteur externe |VISION uniquement |=== Un même stimulus peut nourrir les 4 documents + le blog — chaque destination reçoit la portion qui la concerne, sans redondance, sans contradiction. C'est ce qui s'est passé pour `PICTURE_ME_ROLLIN.adoc` (3 mai 2026) : | Information | Classification | Destinations | | Inventaire des 13+ projets foundry/ | VISION | WORKSPACE_AS_PRODUCT | | VPS-2 OVH, edster.cloud, 8.49€/mois | VISION | WORKSPACE_AS_PRODUCT + WORKSPACE_VISION | | « Le marché africain est prêt pour le mobile money » | STRATÉGIE | WORKSPACE_AS_PRODUCT (section business) | | « DeepSeek > Kimi > GLM pour contexte long » | OPINION → VISION | Confiné puis promu après benchmark (article 0112) | | Employé Synthétique comme produit final | STRATÉGIE | WORKSPACE_AS_PRODUCT (pas de blog) | == Le Pattern Baby-Step + TestContainer + Doc Vivante — le Code qui Se Teste Lui-Même Le pattern STIMULUS/Dilution gère la pensée. Son équivalent pour le code, c'est le pattern Baby-Step/TestContainer/Doc Vivante, validé par plantuml-gradle (380/380 tests PASS, 137 sessions sans fuite Docker) : [cols="1,3"] |=== |Principe |Règle |**Baby-step** |Jamais plus de 3 pts par US. Si une US fait peur, recouper. Une US de 1 pt qui passe > une US de 8 pts qui traîne. |**TestContainer d'abord** |Avant le code métier, le conteneur. Le test d'infra passe → environnement stable garanti. |**Dataset committé** |Sous-ensemble minimal mais représentatif dans `src/test/resources/`, sans PII. Clonable, lançable. |**Documentation vivante** |Chaque test Cucumber = une phrase en langage naturel. Le code source EST la spec exécutable. Zéro doc Markdown à maintenir. |**Cleanup automatique** |Zéro fuite de ressources. Containers orphelins, `/tmp/gradle-test-*` : tout est nettoyé. |=== Ce pattern est la raison pour laquelle plantuml-gradle n'a jamais eu de régression Docker en 138 sessions. Il garantit que le code qui parle à une infra externe (PostgreSQL, Redis, Kafka) est toujours testé dans un environnement identique à la production — versionné, reproductible, lançable en une commande. == Conclusion : la Liberté de Penser sans la Peur de Publier Le compartimentage épistémique automatisé n'est pas un outil de censure. C'est un **libérateur**. Il permet de penser librement, de spéculer sans filtre, de brain-dumper tout ce qui passe par la tête — sans jamais craindre qu'une idée embryonnaire se retrouve sur le blog. Le LLM est le gardien de cette frontière. Il lit tout. Il classifie. Il dilue ce qui mérite de survivre. Il confine ce qui doit rester privé. Il rédige ce qui est publiable. Et le développeur, lui, garde le dernier mot : relire, challenger, valider. Juger. C'est la division du travail qui manquait au développeur solo : un employé synthétique qui gère la paperasse mentale, pour que l'humain puisse se concentrer sur ce qu'il fait de mieux — concevoir, architecturer, décider. == Références * Article sur la gouvernance agent Eager/Lazy : link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Gouverner un Agent IA avec du AsciiDoc] * Article sur l'ontologie spatiale et les cercles de confiance : link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[L'Ontologie Spatiale comme Mécanisme d'Alignement] * Article sur l'Anonymiseur MVP0 : link:../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html[Notre Premier Embauché : l'Anonymiseur de Datasets] * Article sur la comparaison des LLMs long contexte : link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1] * Article sur le mécanisme de backup agent : link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window et Vague Froide]</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html Fri, 1 May 2026 00:00:00 +0000 blog/2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_problème_qui_fait_fuir_tout_le_monde">Le Problème qui Fait Fuir tout le Monde</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 12 minutes</div> <p>Je n’embauche pas un LLM. J’embauche un anonymiseur. Avant de faire du RAG pgvector, avant de fine-tuner des experts CDA/FPA, avant de provisionner des workspaces clients — quelqu’un doit nettoyer les toilettes de la data. Cet employé, c’est l’expert anonymisation (MVP0, EPIC 2 de codebase-gradle). Et c’est lui qui rend le produit marketable.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_le_problème_qui_fait_fuir_tout_le_monde">Le Problème qui Fait Fuir tout le Monde</h2> <div class="sectionbody"> <div class="paragraph"> <p>Toute startup IA qui manipule des données de formation se heurte au même mur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- Données brutes client (SPG, cours, évaluations) ├→ Noms de stagiaires en clair dans les PDF ├→ Emails dans les métadonnées JSON ├→ IP de connexion dans les logs pgvector ├→ Identifiants dans les nœuds Graphify └→ Références OF pilote dans les schémas SQL ---- Résultat : soit tu fais du RAG sur des données sales (hallucinations de PII, non-conformité RGPD, risque juridique), soit tu ne fais rien (pas de produit). La troisième voie — nettoyer à la main — n'est pas scalable. Ma réponse : ne pas contourner le problème. L'**automatiser**. == MVP0 : l'Anonymiseur, Premier Embauché en Période d'Essai Le MVP0 n'est pas une feature. C'est un **expert de commodité** — un employé qui fait le sale boulot bête et méchant, et dont personne ne veut parler dans les pitch decks. Ce qu'il fait : [source] ---- ENTRÉE : Données brutes multi-sources ├→ AsciiDoc (SPG_A2SP.adoc) → noms, dates, OF pilote ├→ JSON (catalogue formations) → emails, téléphones ├→ YAML (config workspace) → tokens OAuth2 ├→ SQL (schémas DDL) → IP, adresses ├→ pgvector (métadonnées embeddings) → identifiants ├→ ONNX (outputs classification) → noms propres └→ Graphify (graph.json) → nœuds avec PII SORTIE : Datasets propres, format standardisé ├→ [ANONYMIZED] remplace les PII détectées ├→ Classification RGPD (niveau 0→4) ├→ Rapport d'audit (quoi a été nettoyé) └→ Dataset prêt pour RAG ET fine-tuning ---- Il détecte les patterns les plus évidents d'abord (emails `.*@.*`, tokens `sk-*`, `ghp_*`, IPs), puis il apprend. La période d'essai, c'est ça : on valide qu'il ne laisse pas passer de faux négatifs avant de le titulariser. == Ce Que ce MVP Débloque (et ce n'est pas juste la Conformité) L'anonymisation comme MVP0 n'est pas le péage RGPD avant l'autoroute. C'est l'autoroute elle-même. Voici ce qu'elle ouvre : === Présent : Réalité Augmentée en Prompt [source] ---- DONNÉES BRUTES CLIENT ↓ Anonymiseur MVP0 → datasets propres ↓ RAG pgvector (MVP1) → top-K documents similaires (filtrés, anonymisés) ↓ LLM (deepseek-v4-pro) → réponse augmentée, zéro PII ---- Le RAG ne cherche pas dans des données sales — il cherche dans un espace **propre par construction**. Ça change tout pour la qualité des réponses : le LLM ne passe pas son temps à contourner des PII qu'il reconnaît mais qu'il ne doit pas mentionner. === Futur : Fine-Tuning sur Données Saines [source] ---- MVP0 → datasets propres accumulés (session après session) ↓ Fine-tuning expert métier (CDA, FPA) sur données zéro PII ↓ Modèle fine-tuné exposé via Ollama (sans fuite de données) ---- Le fine-tuning sur données brutes est une catastrophe juridique en puissance. Sur données propres, c'est une **méthode reproductible**. Chaque client accumule ses datasets nettoyés, chaque client peut fine-tuner ses experts métier sur ses données — sans jamais exposer une donnée personnelle. == Pourquoi C'est Marketable Ce n'est pas « un outil de conformité RGPD ». C'est une **méthode reproductible qui transforme un problème universel en actif** : 1. *Toute entreprise de formation a des données sales* — c'est le problème 2. *Aucune n'a de pipeline automatisé de nettoyage multi-source* — c'est le marché 3. *La boucle : anonymisation → RAG → fine-tuning est propriétaire* — c'est la barrière Le SaaS Edster (MVP3) ne vendra pas « un workspace Gradle ». Il vendra cette boucle fermée. Et le MVP0 est la porte d'entrée. == Le Format SQL comme Troisième Voie de Contexte L'import de données structurées n'est pas qu'un format d'échange. Le schéma SQL (DDL) porte le **modèle entité-relation du domaine** : [source] ---- CREATE TABLE formation ( id UUID PRIMARY KEY, titre VARCHAR NOT NULL, referentiel RNCP REFERENCES rncp(id), organisme OF REFERENCES of_pilote(id) -- ← va être anonymisé ); ---- Ce DDL, une fois anonymisé (ligne 4), devient une source de contexte pour le LLM. Pas du texte — du **modèle métier**. Le RAG donne le contenu (similarité vectorielle), Graphify donne les relations (structure exacte), et le schéma SQL donne le **Domain-Driven Design implicite** : bounded contexts, agrégats, value objects. Le LLM comprend le métier parce qu'il lit son schéma. == La Roadmap : du MVP0 au SaaS [source] ---- MVP0 — Anonymiseur (ce que cet article décrit) Sortie : datasets propres, reproductible MVP1 — RAG pgvector (dépend de MVP0) Realité augmentée en prompt sur données nettoyées MVP2 — Graphify + ONNX + SQL DDD (dépend de MVP1) Vecteur composite de contexte (règles + similarité + relations exactes) MVP3 — SaaS Edster (dépend de MVP0-2) Provisionnement workspace client complet ---- Chaque MVP dépend du précédent. Aucun ne peut être livré sans le MVP0. C'est la raison pour laquelle l'Anonymiseur n'est pas « P0 » dans le backlog — il est **MVP0**. C'est le premier livrable commercial, et tout le reste est conditionné à sa réussite. == Conclusion : le Travail Invisible qui Rend Tout Possible Dans une startup classique, le nettoyage de données est externalisé, manuel, ou ignoré. Dans cette architecture, c'est le **cœur du produit**. L'Anonymiseur est le premier employé parce que sans lui, rien ne fonctionne : * Sans MVP0 → pas de RAG légal (MVP1) * Sans MVP0 → pas de fine-tuning sans fuite de données (EPIC 5) * Sans MVP0 → pas de SaaS crédible (MVP3) * Sans MVP0 → pas de réalité augmentée en prompt * Sans MVP0 → pas de troisième voie de contexte (SQL DDD) Il fait le sale boulot. Il ne sera jamais cité dans les pitchs. Mais c'est lui qui fait tourner l'usine. Et c'est pour ça qu'on l'embauche en premier. == Références * Article sur l'ontologie spatiale et les cercles de confiance : link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[L'Ontologie Spatiale comme Mécanisme d'Alignement] * Article sur la gouvernance agent Eager/Lazy : link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Gouverner un Agent IA avec du AsciiDoc] * Article sur le mécanisme Hot/Warm/Cold : link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window et Vague Froide] * Article sur la comparaison des trois LLMs : link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1]</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html Thu, 30 Apr 2026 00:00:00 +0000 blog/2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_le_constat_le_prompt_engineering_est_un_château_de_sable">Le Constat : le Prompt Engineering est un Château de Sable</a></li> <li><a href="#_les_quatre_cercles_de_confiance_une_ontologie_spatiale">Les Quatre Cercles de Confiance : une Ontologie Spatiale</a> <ul class="sectlevel2"> <li><a href="#_le_jardin_secret_lespace_hors_cvs">Le Jardin Secret : l’Espace Hors-CVS</a> <ul class="sectlevel3"> <li><a href="#_le_gitignore_comme_configuration_de_gouvernance">Le <code>.gitignore</code> comme Configuration de Gouvernance</a></li> <li><a href="#_le_mécanisme_de_snapshot">Le Mécanisme de Snapshot</a></li> </ul> </li> <li><a href="#_le_coffre_fort_configuration_comme_spring_cloud_config">Le Coffre-Fort : <code>configuration/</code> comme Spring Cloud Config</a></li> <li><a href="#_la_bibliothèque_office_comme_data_consommable">La Bibliothèque : <code>office/</code> comme Data Consommable</a></li> <li><a href="#_les_forges_foundry_comme_implémentation">Les Forges : <code>foundry/</code> comme Implémentation</a></li> </ul> </li> <li><a href="#_procontra_alignement_spatial_vs_alignement_par_prompt">Pro/Contra : Alignement Spatial vs Alignement par Prompt</a> <ul class="sectlevel2"> <li><a href="#_approche_classique_alignement_par_pré_prompt">Approche Classique : Alignement par Pré-Prompt</a></li> <li><a href="#_cette_approche_alignement_par_ontologie_spatiale">Cette Approche : Alignement par Ontologie Spatiale</a></li> </ul> </li> <li><a href="#_lalgèbre_relationnelle_du_workspace_et_le_delta_observable">L’Algèbre Relationnelle du Workspace et le Delta Observable</a></li> <li><a href="#_le_vecteur_composite_de_contexte_rag_pgvector_graphify">Le Vecteur Composite de Contexte : RAG + pgvector + Graphify</a> <ul class="sectlevel2"> <li><a href="#_composante_1_rag_langchain4j_postgresql_pgvector">Composante 1 — RAG LangChain4j + PostgreSQL pgvector</a></li> <li><a href="#_composante_2_knowledge_graph_graphify">Composante 2 — Knowledge Graph Graphify</a></li> <li><a href="#_composante_3_graphify_incrémental_épars_agrégeable_consommable">Composante 3 — Graphify Incrémental : Épars, Agrégeable, Consommable</a></li> </ul> </li> <li><a href="#_classification_rgpd_automatique_le_llm_comme_routeur">Classification RGPD Automatique : le LLM comme Routeur</a></li> <li><a href="#_roadmap_de_lasciidoc_à_langgraph4j">Roadmap : de l’AsciiDoc à LangGraph4j</a></li> <li><a href="#_ce_que_cette_architecture_résout_et_ce_quelle_ne_résout_pas">Ce que Cette Architecture Résout (et ce qu’elle ne Résout pas)</a></li> <li><a href="#_conclusion_larchitecture_comme_discours">Conclusion : l’Architecture comme Discours</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 20 minutes</div> <p>Le prompt engineering, c’est fragile. À 80 000 tokens, vos règles d’alignement sont noyées dans le bruit, et le LLM oublie ce que vous lui avez demandé en début de conversation. Ma solution ? Ne pas aligner par le texte, mais par l'<strong>espace</strong>. J’ai structuré mon workspace de développement en quatre cercles de confiance concentriques — du jardin secret intime jusqu’aux forges publiques — et chaque cercle est une zone physique du système de fichiers. Le LLM n’a pas besoin qu’on lui rappelle les règles : le chemin du fichier les contient. Voici comment ça fonctionne, et pourquoi cette architecture d’alignement par l’espace est plus résiliente qu’un <code>system prompt</code> de 500 lignes.</p> </div> <div class="paragraph"> <p>C’est un article long.<br> Installez-vous confortablement.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_le_constat_le_prompt_engineering_est_un_château_de_sable">Le Constat : le Prompt Engineering est un Château de Sable</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pendant trois semaines, j’ai développé des plugins Gradle avec Opencode, en utilisant trois LLMs différents — Kimi K2.6, GLM-5.1, et DeepSeek-V4-Pro (le seul survivant, mais c’est une autre histoire<a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">Déjà couverte ici.</a>). Ma méthode de gouvernance agent<a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Je l’ai documentée en détail dans un précédent article.</a> repose sur des fichiers AsciiDoc — <code>AGENT.adoc</code>, <code>INDEX.adoc</code>, <code>PROMPT_REPRISE.adoc</code> — qui chargent ~30 000 tokens de règles, de backlog et d’historique à chaque début de session.</p> </div> <div class="paragraph"> <p>Et malgré cette infrastructure documentaire, deux choses m’ont frappé :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Le LLM oublie.</strong> Même avec les règles absolues en tête de chaque fichier EAGER, au-delà de 60 000 tokens cumulés (contexte initial + conversation), Kimi K2.6 a commencé à proposer des <code>Write</code> écrasants sur des fichiers de configuration. GLM-5.1 a confondu un token Firebase avec un placeholder à remplacer. Les règles étaient écrites — le LLM ne les <strong>voyait</strong> plus.</p> </li> <li> <p><strong>La gouvernance elle-même devient un problème.</strong> Après avoir implémenté le mécanisme Hot/Warm/Cold<a href="0110_mecanisme_backup_contexte_agent_post.html">Article sur la rotation de backup.</a> pour éviter l’explosion du contexte, mes fichiers EAGER pesaient encore 1414 lignes<a href="0111_audit_contexte_agent_post.html">J’ai documenté cet audit ici.</a>. La gouvernance — conçue pour protéger le LLM de la saturation — saturait le LLM.</p> </li> </ol> </div> <div class="paragraph"> <p>J’avais besoin d’un mécanisme d’alignement qui ne dépende pas du nombre de tokens dans le prompt.</p> </div> <div class="paragraph"> <p>La réponse : arrêter d’aligner par le texte, et commencer à aligner par l'<strong>espace</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_les_quatre_cercles_de_confiance_une_ontologie_spatiale">Les Quatre Cercles de Confiance : une Ontologie Spatiale</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mon dossier <code>workspace/</code> (dans <code>~/workspace/</code>) n’est <strong>pas</strong> un dépôt Git. C’est la racine de tout mon travail — code, documentation, formation, infrastructure. Et il est structuré en quatre zones qui ne sont pas des conventions de rangement, mais des <strong>cercles de confiance concentriques</strong> :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 6.6666%;"> <col style="width: 13.3333%;"> <col style="width: 20%;"> <col style="width: 26.6666%;"> <col style="width: 33.3335%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Niveau</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Label</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zone physique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CVS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Visibilité</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Jardin secret</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>workspace/</code> racine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aucun</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Intime — pensée libre, pas de commit, pas de publication</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Coffre-fort</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>configuration/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Git privé (solo)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Secrets, tokens, archive de vision. Une seule personne.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Bibliothèque</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>office/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Git privé (élargi)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Data pédagogique, SPG/SPD, schémas JSON. Cercle de confiance identifié.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Forges (publiques)</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>foundry/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Git public (Apache 2.0)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Code source, plugins, tests, documentation technique.</p></td> </tr> </tbody> </table> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="ℹ️"></i> </td> <td class="content"> Il n’y a pas de niveau 3 dans le tableau. Le niveau 3 est un niveau <strong>transitoire</strong> : c’est du contenu de <code>office/</code> qui a été anonymisé et est prêt à être publié en open data. Il n’a pas de zone physique propre — c’est un état de la donnée, pas un emplacement. </td> </tr> </table> </div> <div class="paragraph"> <p>Chaque niveau répond à une question précise :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Où déposer une idée qui n’est pas encore prête à être partagée, même avec un cercle restreint ?</strong> → Le jardin secret. Pas de Git. Pas de pression.</p> </li> <li> <p><strong>Où stocker un token API sans qu’il fuie ?</strong> → Le coffre-fort (<code>configuration/</code>). Physiquement isolé. Aucun autre dépôt ne peut le référencer par erreur.</p> </li> <li> <p><strong>Où co-construire un catalogue de formation avec un OF pilote ?</strong> → La bibliothèque (<code>office/</code>). Versionné, collaboratif, mais privé.</p> </li> <li> <p><strong>Où industrialiser un plugin Gradle open source ?</strong> → Les forges (<code>foundry/</code>). Public, forkable, testé en CI.</p> </li> </ul> </div> <div class="paragraph"> <p>Cette ontologie est <strong>consommable par un LLM</strong>. Quand il lit un fichier dans <code>foundry/plantuml-gradle/src/</code>, il sait implicitement : "je suis dans le cercle 4 — code public, tests obligatoires, pas de secrets, pas de données pédagogiques". Il n’a pas besoin d’un prompt qui le lui rappelle.</p> </div> <div class="sect2"> <h3 id="_le_jardin_secret_lespace_hors_cvs">Le Jardin Secret : l’Espace Hors-CVS</h3> <div class="paragraph"> <p>C’est le concept le plus important — et le plus contre-intuitif.</p> </div> <div class="paragraph"> <p>La racine <code>workspace/</code> n’a pas de <code>.git/</code>. Les documents qui y vivent (<code>WORKSPACE_VISION.adoc</code>, <code>WORKSPACE_AS_PRODUCT.adoc</code>, <code>WORKSPACE_ORGANIZATION.adoc</code> — et celui que vous lisez en ce moment, qui en est issu) ne sont pas destinés à être versionnés, partagés, ou même relus par quelqu’un d’autre que moi. Ce sont des <strong>pensées en germination</strong>.</p> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="❗"></i> </td> <td class="content"> <div class="paragraph"> <p>Le jardin secret est <strong>out-of-CVS</strong> par nature. L’absence de versionnage est la condition de la liberté de penser. On n’y écrit pas pour être lu — on y écrit pour clarifier sa propre vision.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Mais cette liberté a un coût : un <code>rm</code> accidentel, et c’est des mois de réflexion stratégique qui disparaissent. La solution n’est pas de versionner le jardin (ce serait le détruire) — c’est de le <strong>mirrorer</strong> dans le cercle le plus restreint.</p> </div> <div class="sect3"> <h4 id="_le_gitignore_comme_configuration_de_gouvernance">Le <code>.gitignore</code> comme Configuration de Gouvernance</h4> <div class="paragraph"> <p>À la racine de <code>workspace/</code>, un fichier <code>.gitignore</code> minimal déclare la <strong>politique d’historisation</strong> des fichiers du jardin secret :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">.goosehints .goose</code></pre> </div> </div> <div class="paragraph"> <p>Ce <code>.gitignore</code> n’a pas de fonction Git classique (il n’y a pas de <code>.git/</code> à la racine). Il agit comme un <strong>fichier de configuration de gouvernance</strong> qui répond à une question précise : <strong>quels artefacts du jardin secret méritent d’être historisés, et lesquels sont purement transitoires ?</strong></p> </div> <div class="ulist"> <ul> <li> <p>Les fichiers listés dans <code>.gitignore</code> — <code>.goosehints</code>, <code>.goose</code> — sont des artefacts éphémères générés par les agents. Pas de valeur stratégique. Pas d’historisation.</p> </li> <li> <p>Les fichiers <code>.adoc</code> de la racine — <code>WORKSPACE_VISION.adoc</code>, <code>WORKSPACE_ORGANIZATION.adoc</code>, <code>WORKSPACE_AS_PRODUCT.adoc</code>, <code>WHAT_THE_GAMES_BEEN_MISSING.adoc</code>, <code>depots_implementes_strategie.adoc</code>, <code>synthese-LLMs-long-contexte.adoc</code> — ne sont <strong>pas</strong> dans le <code>.gitignore</code>. Ce sont les artefacts à historiser.</p> </li> </ul> </div> <div class="paragraph"> <p>Le <code>.gitignore</code> est le <strong>schéma de gouvernance</strong> : tout ce qui n’y est pas listé est un candidat au snapshot. Et le LLM, en lisant ce fichier, sait exactement ce qui doit être archivé et ce qui peut être ignoré — sans qu’on ait besoin de le lui rappeler dans un prompt.</p> </div> </div> <div class="sect3"> <h4 id="_le_mécanisme_de_snapshot">Le Mécanisme de Snapshot</h4> <div class="paragraph"> <p>J’ai créé <code>configuration/vision-archive/</code> : des snapshots datés de tous les <code>.adoc</code> de la racine, commités dans le dépôt privé <code>configuration/</code>. Chaque session de brainstorming produit un snapshot :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">DATE=$(date +%Y-%m-%d) mkdir -p /home/cheroliv/workspace/configuration/vision-archive/$DATE cp /home/cheroliv/workspace/*.adoc /home/cheroliv/workspace/configuration/vision-archive/$DATE/ cd /home/cheroliv/workspace/configuration && git add vision-archive/ && \ git commit -m "vision-archive: snapshot $DATE"</code></pre> </div> </div> <div class="paragraph"> <p>La procédure est déclenchée en fin de session par le LLM lui-même, qui exécute cette tâche globale de routage. Chaque snapshot capture l’état complet de la pensée stratégique à un instant T.</p> </div> <div class="paragraph"> <p>L’historique Git de <code>configuration/</code> devient la <strong>biographie de ma pensée stratégique</strong>. Je peux faire un <code>git log — vision-archive/</code> et voir l’évolution de ma vision, session par session, date par date.</p> </div> <div class="paragraph"> <p>Exemple réel de l’historique après une journée de travail :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">$ git -C configuration log --oneline -- vision-archive/ 1089d1b vision-archive: fin de session finale 2026-05-03 6b21eaf vision-archive: fin de session 2026-05-03-1300 1690f82 vision-archive: post-article 2026-05-03 28e6593 vision-archive: post-migration 2026-05-03 3707b78 vision-archive: snapshot 2026-05-03 — jardin secret initial</code></pre> </div> </div> <div class="paragraph"> <p>Cinq snapshots en une journée. Chacun est un point de restauration. Chacun est un jalon dans la genèse de la stratégie.</p> </div> <div class="paragraph"> <p>Le dossier <code>configuration/vision-archive/latest/</code> contient en permanence une <strong>copie de travail</strong> du dernier snapshot, servant de référence rapide sans avoir à naviguer dans l’historique Git.</p> </div> <div class="paragraph"> <p>Et pour le LLM, c’est un <strong>oracle de cohérence</strong> : quand il observe une contradiction entre l’implémentation actuelle et la vision archivée à une date antérieure, il peut la signaler.</p> </div> </div> </div> <div class="sect2"> <h3 id="_le_coffre_fort_configuration_comme_spring_cloud_config">Le Coffre-Fort : <code>configuration/</code> comme Spring Cloud Config</h3> <div class="paragraph"> <p><code>configuration/</code> ne contient pas que l’archive de la vision. Sa fonction première — et future — est d’être un <strong>serveur Spring Cloud Config</strong>. Tous les secrets, tokens, credentials, et descripteurs d’infrastructure vivent ici, dans un dépôt Git privé accessible au seul propriétaire.</p> </div> <div class="paragraph"> <p>Pourquoi un dépôt séparé plutôt qu’un fichier <code>.env</code> dans chaque projet ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Push accidentel d’un secret</strong> : impossible. Les secrets sont dans un dépôt privé que les projets publics ne peuvent pas référencer par erreur.</p> </li> <li> <p><strong>Audit</strong> : l’historique Git donne la piste de chaque modification de configuration. Qui a changé quoi, quand, avec quel hash SHA.</p> </li> <li> <p><strong>Rollback</strong> : <code>git revert</code> sur une configuration cassée. Instantané, sans backup manuel.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_la_bibliothèque_office_comme_data_consommable">La Bibliothèque : <code>office/</code> comme Data Consommable</h3> <div class="paragraph"> <p><code>office/</code> est le pendant documentaire du travail de développement. Il contient les articles de blog, les spécifications techniques, les supports de formation (38 répertoires de cours FPA, SPG/SPD, schémas JSON, taxonomies Bloom/Harrow/Krathwohl) — tout ce qui constitue le <strong>matériau pédagogique</strong>.</p> </div> <div class="paragraph"> <p>Mais <code>office/</code> n’est pas qu’un tiroir à docs. C’est une <strong>source de données structurée</strong> que les plugins Gradle de <code>foundry/</code> consomment. Un article de blog dans <code>office/</code> est une entrée qu’un plugin transformera en HTML. Un SPG AsciiDoc dans <code>office/metiers/FPA/</code> est un artefact qu’un orchestrateur parsera pour générer des slides, des quiz, et des capsules vidéo.</p> </div> <div class="paragraph"> <p>Et le <code>build.gradle.kts</code> à la racine de <code>office/</code> n’est pas du code métier — c’est un <strong>script de consommation de l’écosystème de plugins</strong>. Il dit : "voici les plugins Gradle que j’utilise, voici le contexte de mon workspace".</p> </div> </div> <div class="sect2"> <h3 id="_les_forges_foundry_comme_implémentation">Les Forges : <code>foundry/</code> comme Implémentation</h3> <div class="paragraph"> <p><code>foundry/</code> contient le <strong>code industrialisé</strong>. 54 dépôts Git, dont 7 actuellement gouvernés par des <code>.agents/</code>. C’est ici que la vision devient exécutable — plugins Gradle, CI/CD, tests JUnit5 + Cucumber.</p> </div> <div class="paragraph"> <p>La relation avec <code>office/</code> est bidirectionnelle :</p> </div> <div class="ulist"> <ul> <li> <p><code>office/</code> → <code>foundry/</code> : les données pédagogiques sont la matière première que les plugins consomment.</p> </li> <li> <p><code>foundry/</code> → <code>office/</code> : les plugins produisent de la data qui enrichit <code>office/</code> — le <code>graph.json</code> de graphify-gradle, les decks slider compilés, les rapports de build.</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_procontra_alignement_spatial_vs_alignement_par_prompt">Pro/Contra : Alignement Spatial vs Alignement par Prompt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Comparons les deux approches.</p> </div> <div class="sect2"> <h3 id="_approche_classique_alignement_par_pré_prompt">Approche Classique : Alignement par Pré-Prompt</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 80%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Contra</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Simple à mettre en œuvre. Un bloc de texte dans le system prompt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Fragile au contexte long</strong> : la règle est noyée après 80K tokens.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fonctionne pour des règles générales (ton, format).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non vérifiable</strong> : rien n’empêche le LLM de violer la règle.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pas besoin de repenser l’architecture du projet.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non transférable</strong> : chaque repo redéclare les règles.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Purement déclaratif</strong> : le LLM sait qu’il <strong>devrait</strong>, mais rien ne l’empêche.</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_cette_approche_alignement_par_ontologie_spatiale">Cette Approche : Alignement par Ontologie Spatiale</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 80%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Contra</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Résilient au contexte long</strong> : la règle est dans le chemin du fichier, pas dans un prompt lointain.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Coût d’infrastructure initial</strong> : structurer le workspace en cercles prend du temps.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Vérifiable mécaniquement</strong> : un secret dans <code>foundry/</code> est détectable par <code>git check-ignore</code>.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Nécessite discipline</strong> : un nouveau contributeur doit comprendre les cercles.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Transférable</strong> : un <code>AGENT.adoc</code> standard expose les cercles à tout nouveau projet.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ne couvre que les contraintes spatiales</strong> — le code style reste dans le prompt.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Sécurité par conception</strong> : un <code>git push</code> depuis <code>foundry/</code> ne peut pas exposer <code>configuration/</code>.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Consommable par des agents non-LLM</strong> : un orchestrateur Gradle peut router selon le cercle.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le gain principal n’est pas défensif (sécurité, visibilité) — il est <strong>créatif</strong>. Quand le LLM travaille dans un espace structuré par une ontologie, il peut faire ce qu’aucun prompt ne lui permet : <strong>observer le delta</strong>.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_lalgèbre_relationnelle_du_workspace_et_le_delta_observable">L’Algèbre Relationnelle du Workspace et le Delta Observable</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand le LLM parcourt <code>foundry/</code>, il dispose d’un <strong>treillis de données structurées</strong> : nœuds (plugins, fichiers, tests, dépendances), arêtes typées (<code>import</code>, <code>depends_on</code>, <code>generates</code>, <code>tests</code>), relations de composition et d’ordre (<code>training-gradle</code> extrait le référentiel → <code>slider-gradle</code> génère les slides → <code>capsule-gradle</code> monte la vidéo).</p> </div> <div class="paragraph"> <p>Cette algèbre n’est écrite nulle part en clair — mais elle est <strong>observable</strong>. Chaque <code>build.gradle.kts</code> expose des dépendances. Chaque <code>INDEX.adoc</code> expose des références croisées.</p> </div> <div class="paragraph"> <p>Le LLM observe cette algèbre et détecte le <strong>delta</strong> : l’écart entre ce que le système sait déjà produire et ce que la vision décrit.</p> </div> <div class="paragraph"> <p>À partir de ce delta, il peut définir des <strong>cartographies d’experts métiers</strong> — CDA (Concepteur Développeur d’Applications, Kotlin/Gradle/JHipster) et FPA (Formateur Professionnel d’Adultes, Pédagogie/Qualiopi/Bloom) — et identifier ce qui manque pour chaque expert.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Expert CDA (Kotlin/Gradle/JHipster) ├── Plugins : jhipster-gradle-plugins, plantuml-gradle, │ codebase-gradle ├── Delta : pas encore de SPG CDA formalisé, │ pas de fine-tuning expert CDA Expert FPA (Pédagogie/Qualiopi/Bloom) ├── Plugins : training-gradle, slider-gradle, │ school-backoffice/forms, capsule-gradle ├── Matériel : 38 modules cours, SPG/SPD, taxonomies └── Delta : parser AsciiDoc→JSON à créer, orchestrateur à coder</code></pre> </div> </div> <div class="paragraph"> <p>Le LLM n’a pas besoin qu’on lui dise quoi faire. Le delta émerge de la structure.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_vecteur_composite_de_contexte_rag_pgvector_graphify">Le Vecteur Composite de Contexte : RAG + pgvector + Graphify</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’algèbre relationnelle n’est pas une construction théorique. Elle est <strong>matérialisée</strong> par trois composantes qui forment un <strong>vecteur composite de contexte</strong> pour le LLM.</p> </div> <div class="sect2"> <h3 id="_composante_1_rag_langchain4j_postgresql_pgvector">Composante 1 — RAG LangChain4j + PostgreSQL pgvector</h3> <div class="paragraph"> <p>J’ai déjà LangChain4j en production dans deux plugins : <code>slider-gradle</code> (4 providers LLM) et <code>plantuml-gradle</code> (7 providers). Les embeddings ONNX (AllMiniLmL6V2) indexent les données de <code>office/</code> et le code source de <code>foundry/</code> dans PostgreSQL + pgvector.</p> </div> <div class="paragraph"> <p>Ce RAG opère sur deux dimensions :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Dimension data</strong> : les documents <code>office/</code> (SPG, articles, formations, schémas JSON)</p> </li> <li> <p><strong>Dimension code</strong> : les codebases <code>foundry/</code> (sources Kotlin, tests Cucumber, AGENT.adoc)</p> </li> </ul> </div> <div class="paragraph"> <p>L’intersection couvre à la fois le <strong>quoi</strong> (le domaine métier) et le <strong>comment</strong> (l’implémentation).</p> </div> </div> <div class="sect2"> <h3 id="_composante_2_knowledge_graph_graphify">Composante 2 — Knowledge Graph Graphify</h3> <div class="paragraph"> <p>Graphify est intégré dans <code>plantuml-gradle</code> (109 tests, 380/380 PASS) et produit un <code>graph.json</code> — un knowledge graph structuré avec nœuds, arêtes, et communautés détectées automatiquement.</p> </div> <div class="paragraph"> <p>Contrairement au RAG qui opère par similarité vectorielle (flou), le knowledge graph opère par <strong>relations exactes</strong> (déterministe) : <code>graphify query</code> pour les interrogations sémantiques (~50 tokens), <code>graphify path</code> pour naviguer, <code>graphify explain</code> pour expliquer.</p> </div> </div> <div class="sect2"> <h3 id="_composante_3_graphify_incrémental_épars_agrégeable_consommable">Composante 3 — Graphify Incrémental : Épars, Agrégeable, Consommable</h3> <div class="paragraph"> <p>C’est la décision architecturale clé.</p> </div> <div class="paragraph"> <p>Graphify ne doit pas vivre dans un dépôt unique. Il doit vivre de manière <strong>éparse</strong> dans chaque plugin :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Chaque plugin</strong> embarque une tâche Gradle <code>updateKnowledgeGraph</code> qui appelle Graphify <strong>sur son propre scope</strong> et produit un <code>graph.json</code> local.</p> </li> <li> <p><strong>Le build script de <code>office/</code></strong> consomme <code>graphify-gradle</code> avec <code>rootDir = /home/cheroliv/workspace</code> et produit un <code>graph.json</code> <strong>global</strong> qui agrège les graphes locaux.</p> </li> <li> <p><strong>Le RAG de chaque plugin</strong> injecte le <code>graph.json</code> global comme <strong>filtre de contexte</strong> pour les requêtes LLM.</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">TÂCHE GRADLE (dans chaque plugin) ↓ graphify → graph.json (scope local) ↓ office/build.gradle.kts → graph.json (scope global) ↓ RAG pgvector (dans slider, plantuml, codebase...) ↓ ← injection du graph.json comme filtre LLM (deepseek-v4-pro) ↓ ← observation algèbre relationnelle ↓ ← détection delta vs cartographies experts PRIORISATION → prochaine tâche</code></pre> </div> </div> <div class="paragraph"> <p>Résultat : le LLM ne cherche pas dans le vide — il navigue dans un espace structuré par le knowledge graph. Une requête sur "génère un diagramme" sait atteindre les nœuds pertinents du graphe.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_classification_rgpd_automatique_le_llm_comme_routeur">Classification RGPD Automatique : le LLM comme Routeur</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’ontologie spatiale ne se contente pas d’aligner le LLM — elle lui donne une <strong>grille de classification RGPD</strong> pour router chaque donnée vers sa zone légitime.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 12.5%;"> <col style="width: 37.5%;"> <col style="width: 25%;"> <col style="width: 25%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Critère</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Détection LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Action</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Niveau max</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Donnée personnelle (nom, email, IP)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pattern <code>@</code>, IP, noms propres</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anonymiser → <code>[OF_PILOTE]</code> ou router niveau 2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Token / Secret / Credential</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pattern <code>sk-…​</code>, <code>ghp_…​</code>, <code>ya29…​</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router → <code>configuration/</code>. Référencer par <code>${VAR}</code> dans le code.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">URL interne</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Contient <code>localhost</code>, IP privée</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anonymiser → <code>${API_URL}</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Donnée pédagogique (SPG, cours)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Structure Bloom/Qualiopi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router → <code>office/</code> (niveau 2). Double version si export.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Code source / test</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Extension <code>.kt</code>, <code>.kts</code> dans <code>foundry/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router → <code>foundry/</code>. Vérifier absence de secrets.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>En fin de session, le LLM exécute une <strong>tâche globale</strong> :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lecture du <code>.gitignore</code> racine pour identifier les artefacts éphémères (à exclure du snapshot) vs les artefacts stratégiques (à historiser)</p> </li> <li> <p>Inventaire de tous les fichiers <code>.adoc</code> de la racine <code>workspace/</code></p> </li> <li> <p>Filtrage : exclusion des fichiers listés dans <code>.gitignore</code>, inclusion de tous les autres</p> </li> <li> <p>Copie dans <code>configuration/vision-archive/$DATE/</code> et mise à jour du symlink <code>latest/</code></p> </li> <li> <p>Commit dans le dépôt <code>configuration/</code> avec un message structuré</p> </li> <li> <p>Classification RGPD automatique de chaque fichier modifié (tous cercles)</p> </li> <li> <p>Routage : données <code>office/</code> → commit privé, code <code>foundry/</code> → <code>./gradlew check</code>, configuration → commit</p> </li> <li> <p>Rapport structuré avec alertes RGPD et confirmation d’archivage</p> </li> </ol> </div> <div class="paragraph"> <p>Le <code>.gitignore</code> racine n’est pas un fichier de configuration Git — c’est un <strong>fichier de gouvernance de l’historisation</strong>. Il définit le schéma que le LLM consomme pour décider quels fichiers du jardin secret entrent dans la biographie stratégique et lesquels sont jetables.</p> </div> <div class="paragraph"> <p>Le LLM n’est plus un simple générateur de texte. Il est le <strong>gestionnaire d’information</strong> de l’écosystème — producteur, classifieur, routeur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_roadmap_de_lasciidoc_à_langgraph4j">Roadmap : de l’AsciiDoc à LangGraph4j</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aujourd’hui, cette gouvernance est <strong>déterministe</strong> : le LLM applique une procédure décrite dans des fichiers AsciiDoc. C’est la <strong>phase 1</strong> — le prompt engineering avec mémoire LLM.</p> </div> <div class="paragraph"> <p>La <strong>phase 2</strong> extraira chaque étape de la procédure dans une <strong>tâche Gradle typée</strong> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">./gradlew endSessionWorkspace → snapshot vision-archive ./gradlew endSessionProject → archive .agents/ ./gradlew endSessionReport → rapport multi-zones</code></pre> </div> </div> <div class="paragraph"> <p>La <strong>phase 3</strong> modélisera le processus de fin de session comme un <strong>graphe d’état</strong> avec <a href="https://github.com/langgraph4j/langgraph4j">LangGraph4j</a> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">[Start] → [Inventaire fichiers modifiés] → [Classification RGPD] (nœud ONNX) → [Branchement par cercle] ├→ cercle 0 → snapshot → commit ├→ cercle 2 → anonymisation → commit ├→ cercle 4 → archive → commit └→ cercle 1 → commit configuration/ → [Rapport] → [End]</code></pre> </div> </div> <div class="paragraph"> <p>Ce graphe sera versionné dans la CI/CD, exécuté par Gradle, configuré via les GitHub Secrets des plugins. Le LLM n’aura plus à décider du routage — le graphe le fera.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ce_que_cette_architecture_résout_et_ce_quelle_ne_résout_pas">Ce que Cette Architecture Résout (et ce qu’elle ne Résout pas)</h2> <div class="sectionbody"> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p>L’ontologie spatiale ne couvre pas tout. Les conventions de code style, le nommage, les choix de design architectural — tout ça reste dans le prompt. Ce que l’ontologie spatiale résout, c’est la <strong>couche de sécurité et de visibilité</strong> : où chaque octet doit vivre, et qui peut le voir.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Voici ce qu’elle apporte concrètement :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Pas de <code>git push</code> accidentel d’un secret</strong> : les secrets sont dans <code>configuration/</code> (cercle 1). Les projets publics sont dans <code>foundry/</code> (cercle 4). Aucun chemin ne traverse les deux.</p> </li> <li> <p><strong>Pas de code métier dans la data</strong> : <code>office/</code> contient des <code>.adoc</code>, des YAML, des JSON Schemas — mais pas de <code>.kt</code>. Le <code>build.gradle.kts</code> qui y vit est un script de consommation, pas du code métier.</p> </li> <li> <p><strong>Pas de pensée stratégique exposée</strong> : les documents de vision vivent dans le jardin secret (racine hors-CVS). Les snapshots sont dans <code>configuration/</code> (coffre-fort privé). Personne, même en cercle de confiance élargi, ne lit la genèse de la stratégie.</p> </li> <li> <p><strong>Auto-priorisation</strong> : le LLM observe le delta entre l’algèbre relationnelle (ce qui existe) et les cartographies d’experts (ce qui est nécessaire). La prochaine tâche de développement émerge de ce delta.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_larchitecture_comme_discours">Conclusion : l’Architecture comme Discours</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je ne mets pas de manifeste politique dans le footer de mon site. Je ne mets pas de règles éthiques dans mes prompts. L’alignement n’est pas dans le texte — il est dans le <strong>système de fichiers</strong>.</p> </div> <div class="paragraph"> <p>Quand un LLM travaille dans cet espace, il ne peut pas fuiter un secret (le chemin l’en empêche). Il ne peut pas confondre une donnée pédagogique avec du code source (la zone physique est différente). Il ne peut pas oublier une règle de sécurité à 80 000 tokens — parce que la règle n’est pas dans le prompt, elle est dans le <code>workspace/</code> → <code>configuration/</code> → <code>office/</code> → <code>foundry/</code> que chaque lecture de fichier réactive.</p> </div> <div class="paragraph"> <p>C’est le principe de la <strong>secure by design</strong> appliqué à l’alignement agent : ne pas demander au LLM de se souvenir des règles. Faire en sorte que l’architecture rende l’erreur structurellement impossible.</p> </div> <div class="paragraph"> <p>Et au passage, ça donne au LLM ce qu’aucun prompt ne peut lui donner : la capacité de <strong>percevoir</strong> où il est, ce qui existe, ce qui manque — et d’en déduire ce qu’il doit faire.</p> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Article sur la gouvernance agent Eager/Lazy : <a href="../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Gouverner un Agent IA avec du AsciiDoc</a></p> </li> <li> <p>Article sur le mécanisme Hot/Warm/Cold : <a href="../2026/0110_mecanisme_backup_contexte_agent_post.html">Sliding Window et Vague Froide</a></p> </li> <li> <p>Article sur l’audit de contexte : <a href="../2026/0111_audit_contexte_agent_post.html">Quand Votre Propre Gouvernance Devient le Probleme</a></p> </li> <li> <p>Article sur la comparaison des trois LLMs : <a href="../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0113_integration_firebase_contact_form_post.html Wed, 29 Apr 2026 00:00:00 +0000 blog/2026/0113_integration_firebase_contact_form_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_la_scène_un_formulaire_qui_ne_stocke_rien">La scène : un formulaire qui ne stocke rien</a> <ul class="sectlevel2"> <li><a href="#_lhéritage_supabase">L’héritage Supabase</a></li> <li><a href="#_la_double_soumission_fantôme">La double soumission fantôme</a></li> </ul> </li> <li><a href="#_pourquoi_firebase_plutôt_que_supabase">Pourquoi Firebase plutôt que Supabase ?</a></li> <li><a href="#_phase_1_créer_le_projet_firebase">Phase 1 : Créer le projet Firebase</a> <ul class="sectlevel2"> <li><a href="#_initialisation">Initialisation</a></li> <li><a href="#_règles_de_sécurité_firestore">Règles de sécurité Firestore</a></li> </ul> </li> <li><a href="#_phase_2_réécrire_le_javascript_de_soumission">Phase 2 : Réécrire le JavaScript de soumission</a> <ul class="sectlevel2"> <li><a href="#_la_dépendance_window_firebase">La dépendance <code>window.<em>FIREBASE</em></code></a></li> <li><a href="#_le_nouveau_contact_js">Le nouveau <code>contact.js</code></a></li> </ul> </li> <li><a href="#_phase_3_nettoyer_le_code_mort_supabase">Phase 3 : Nettoyer le code mort Supabase</a></li> <li><a href="#_phase_4_configurer_le_footer">Phase 4 : Configurer le footer</a></li> <li><a href="#_phase_5_architecture_finale">Phase 5 : Architecture finale</a></li> <li><a href="#_ce_que_cette_migration_dit_du_dogfooding">Ce que cette migration dit du dogfooding</a> <ul class="sectlevel2"> <li><a href="#_récapitulatif_des_modifications">Récapitulatif des modifications</a></li> </ul> </li> <li><a href="#_prochaines_étapes_backlog">Prochaines étapes (backlog)</a></li> <li><a href="#_références">Références</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 12 minutes</div> <p>Pendant des mois, le formulaire de contact de ce site a tourné sur un mock JavaScript — une promesse à 85 % de succès, un faux Firestore, zéro données stockées. Le plan initial prévoyait un backend Supabase avec Google Apps Script pour les notifications mail. Abandonné. Aujourd’hui, je raconte la migration vers Firebase Firestore : création du projet, règles de sécurité, réécriture du JS, nettoyage du code mort Supabase. Et pourquoi ce choix dit quelque chose de plus large sur la philosophie de développement.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_un_formulaire_qui_ne_stocke_rien">La scène : un formulaire qui ne stocke rien</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce site est généré par JBake, mon plugin Gradle <code>bakery</code>. Il est 100 % statique — pas de backend, pas de base de données. Sauf que j’ai un formulaire de contact. La page <code>contact.html</code> existe, le HTML est prêt (champs nom, email, téléphone, sujet, message, validation HTML5, honeypot anti-spam), les styles Bootstrap sont en place. Visuellement, tout est parfait.</p> </div> <div class="paragraph"> <p>Sauf qu’à la soumission, rien ne se passe.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const firebaseMock = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() < 0.85) { resolve({ status: 201, message: 'Message stored in Firestore.' }); } else { reject({ status: 500, message: 'Firestore write failed.' }); } }, 1500); });</code></pre> </div> </div> <div class="paragraph"> <p>Un mock. Une promesse qui fait semblant. L’utilisateur voit un spinner, puis un message « Message envoyé avec succès ! ». Mais les données partent dans le vide. Aucun message n’est stocké nulle part.</p> </div> <div class="paragraph"> <p>La situation est pire qu’un formulaire cassé — c’est un formulaire qui ment.</p> </div> <div class="sect2"> <h3 id="_lhéritage_supabase">L’héritage Supabase</h3> <div class="paragraph"> <p>Le plan initial, documenté dans <code>content/draft/integration_formulaire_contact_supabase.adoc</code>, prévoyait :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Une base Supabase avec table <code>contacts</code> et Row Level Security</p> </li> <li> <p>Une RPC <code>handle_contact_form</code> côté serveur</p> </li> <li> <p>Un trigger SQL appelant un webhook Google Apps Script</p> </li> <li> <p>Google Apps Script qui envoie un mail Gmail de notification</p> </li> </ol> </div> <div class="paragraph"> <p>Le code JavaScript correspondant existe encore dans <code>script.js</code>. Il y a une classe <code>SupabaseManager</code> qui initialise un client Supabase avec des variables globales <code>SUPABASE_URL</code> et <code>SUPABASE_KEY</code>, et une classe <code>ContactFormHandler</code> qui écoute l’événement submit du formulaire et appelle <code>SupabaseManager.submitContactForm()</code>.</p> </div> <div class="paragraph"> <p>Problème : ces variables globales ne sont plus injectées dans le footer. Le <code><script src="supabase-js"></code> a été retiré. Le code appelle <code>supabase.createClient()</code> sur une variable <code>supabase</code> qui n’existe plus. Donc :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">console.error : 'Supabase client library (supabase-js) is not loaded.'</code></pre> </div> </div> <div class="paragraph"> <p>Non seulement les données ne sont pas stockées, mais le code de soumission est mort.</p> </div> </div> <div class="sect2"> <h3 id="_la_double_soumission_fantôme">La double soumission fantôme</h3> <div class="paragraph"> <p>Pour empirer les choses, il y a une <strong>concurrence silencieuse</strong> entre deux handlers sur le même formulaire :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>contact.js</code> écoute le submit, appelle le mock Firebase</p> </li> <li> <p><code>script.js</code> — via <code>ContactFormHandler</code> — écoute aussi le submit, appelle <code>SupabaseManager</code></p> </li> </ol> </div> <div class="paragraph"> <p>Les deux font <code>event.preventDefault() + event.stopPropagation()</code>. Comme <code>contact.js</code> est chargé en premier dans <code>footer.thyme</code>, son handler est attaché en premier. Il bloque la propagation. <code>ContactFormHandler</code> ne sera jamais déclenché.</p> </div> <div class="paragraph"> <p>Ce n’est même pas un bug actif — c’est un zombie. Du code qui n’a jamais l’occasion de s’exécuter.</p> </div> <div id="diag-before" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-1dca60606b3e7ccf37af78f090e4df27.svg" alt="État initial — double handler et mock" width="1972" height="215"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_firebase_plutôt_que_supabase">Pourquoi Firebase plutôt que Supabase ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>La décision de migration est documentée dans <code>AGENT.adoc</code> :</p> </div> <div class="paragraph"> <p>Firebase est désormais choisi pour les raisons suivantes : meilleur plan gratuit, Firestore natif, Cloud Functions intégrées, écosystème Google plus adapté. L’implémentation Supabase existante est marquée « ⚠️ Abandonné ».</p> </div> <div class="paragraph"> <p>Au-delà du plan gratuit, il y a une raison architecturale. Ce site vit dans l’écosystème Google : le dépôt cible est <code>cheroliv.github.io</code>, le CNAME pointe sur GitHub Pages, le build Gradle push sur GitHub via JGit. Ajouter un service Google (Firebase) plutôt qu’un service tiers (Supabase) réduit la surface de dispersion.</p> </div> <div class="paragraph"> <p>Firestore en mode natif (pas en mode Datastore) est aussi plus proche du modèle mental NoSQL document que j’ai en tête : collections, documents, champs typés, timestamps serveur, règles de sécurité intégrées.</p> </div> </div> </div> <div class="sect1"> <h2 id="_phase_1_créer_le_projet_firebase">Phase 1 : Créer le projet Firebase</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_initialisation">Initialisation</h3> <div class="paragraph"> <p>La CLI Firebase n’étant pas installée sur ma machine, je passe par la console web :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Aller sur <a href="https://console.firebase.google.com/">Firebase Console</a></p> </li> <li> <p>Créer un projet <code>cheroliv-contact</code> (ou réutiliser un projet existant)</p> </li> <li> <p>Activer Firestore en mode natif (pas Datastore)</p> </li> <li> <p>Créer une base de données en région <code>eur3</code> (Europe)</p> </li> </ol> </div> <div class="paragraph"> <p>Pour un usage minimaliste comme le nôtre (une seule collection, écriture publique), le mode natif est le bon choix. Pas besoin de règles Datastore complexes.</p> </div> </div> <div class="sect2"> <h3 id="_règles_de_sécurité_firestore">Règles de sécurité Firestore</h3> <div class="paragraph"> <p>Le formulaire est public — n’importe qui peut envoyer un message. Mais je veux limiter les abus :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /contact_messages/{messageId} { // Lecture : admin uniquement (authentifié) allow read: if request.auth != null; // Écriture : publique, mais limitée allow create: if request.auth == null && request.resource.data.name is string && request.resource.data.name.size() >= 1 && request.resource.data.name.size() <= 100 && request.resource.data.email is string && request.resource.data.email.matches('.*@.*\\..*') && request.resource.data.email.size() <= 254 && request.resource.data.subject is string && request.resource.data.subject.size() >= 3 && request.resource.data.subject.size() <= 200 && request.resource.data.message is string && request.resource.data.message.size() >= 10 && request.resource.data.message.size() <= 5000 && request.resource.data.created_at == request.time && request.resource.data.user_agent is string && request.resource.data.user_agent.size() <= 500; } } }</code></pre> </div> </div> <div class="paragraph"> <p>Points clés :</p> </div> <div class="ulist"> <ul> <li> <p><code>allow read</code> — seuls les utilisateurs authentifiés peuvent lire les messages (moi, via la console Firebase)</p> </li> <li> <p><code>allow create</code> — n’importe qui peut créer un document, mais avec validation des champs</p> </li> <li> <p>Validation côté serveur : tailles min/max, format email, <code>created_at</code> doit correspondre à <code>request.time</code> (anti-falsification)</p> </li> <li> <p><code>user_agent</code> est envoyé pour traçabilité (pas critique mais utile)</p> </li> </ul> </div> <div class="paragraph"> <p>Ces règles sont plus strictes qu’un simple <code>allow write: if true;</code>. Elles empêchent un attaquant d’injecter des payloads énormes ou des champs mal formés.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_2_réécrire_le_javascript_de_soumission">Phase 2 : Réécrire le JavaScript de soumission</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le contrat est simple :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lire les données du formulaire</p> </li> <li> <p>Vérifier le honeypot (champ <code>hp_name</code> — s’il est rempli, c’est un bot, on simule un succès sans rien envoyer)</p> </li> <li> <p>Appeler <code>addDoc(window.<em>FIREBASE</em>.collection(db, "contact_messages"), {…​})</code></p> </li> <li> <p>Afficher succès ou erreur</p> </li> </ol> </div> <div class="sect2"> <h3 id="_la_dépendance_window_firebase">La dépendance <code>window.<em>FIREBASE</em></code></h3> <div class="paragraph"> <p>Dans <code>footer.thyme</code>, un script module initialise Firebase SDK et expose un objet global :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js"; import { getFirestore, collection, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-firestore.js"; const firebaseConfig = { /* valeurs réelles */ }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); window.__FIREBASE__ = { db, collection, addDoc, serverTimestamp }; </script></code></pre> </div> </div> <div class="paragraph"> <p>Les scripts module s’exécutent avant <code>DOMContentLoaded</code>, donc <code>window.<em>FIREBASE</em></code> est garanti disponible quand le handler <code>contact.js</code> se déclenche. Par précaution, j’ajoute quand même un polling de 5 secondes au cas où le CDN serait lent.</p> </div> </div> <div class="sect2"> <h3 id="_le_nouveau_contact_js">Le nouveau <code>contact.js</code></h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">document.addEventListener('DOMContentLoaded', function () { 'use strict'; const form = document.getElementById('contact-form'); if (!form) return; const submitButton = form.querySelector('button[type="submit"]'); const successMessage = document.getElementById('contact-success-message'); const errorMessage = document.getElementById('contact-error-message'); // Éléments de validation const nameInput = form.querySelector('input[name="name"]'); const emailInput = form.querySelector('input[name="email"]'); const phoneInput = form.querySelector('input[name="phone"]'); const subjectInput = form.querySelector('input[name="subject"]'); const messageInput = form.querySelector('textarea[name="message"]'); const honeypotInput = form.querySelector('input[name="hp_name"]'); /** * Attend que window.__FIREBASE__ soit disponible. * Timeout de 5 secondes — si le CDN Firebase est lent, on abandonne. */ function waitForFirebase(timeoutMs = 5000) { return new Promise((resolve, reject) => { if (window.__FIREBASE__) { resolve(window.__FIREBASE__); return; } const start = Date.now(); const interval = setInterval(() => { if (window.__FIREBASE__) { clearInterval(interval); resolve(window.__FIREBASE__); } else if (Date.now() - start > timeoutMs) { clearInterval(interval); reject(new Error('Firebase SDK non disponible après timeout')); } }, 100); }); } // --- Validation (identique à l'existant) --- function validateForm() { nameInput.setCustomValidity(''); emailInput.setCustomValidity(''); if (phoneInput) phoneInput.setCustomValidity(''); subjectInput.setCustomValidity(''); messageInput.setCustomValidity(''); if (nameInput.value.trim().length < 1) { nameInput.setCustomValidity('Veuillez saisir votre nom.'); } const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(emailInput.value.trim())) { emailInput.setCustomValidity('Veuillez saisir une adresse email valide.'); } if (phoneInput && phoneInput.value.trim() !== '') { const phonePattern = /^\d{10,15}$/; if (!phonePattern.test(phoneInput.value.trim())) { phoneInput.setCustomValidity('Veuillez saisir un numéro valide (10 à 15 chiffres).'); } } if (subjectInput.value.trim().length < 3) { subjectInput.setCustomValidity('Veuillez saisir un sujet (3 caractères minimum).'); } if (messageInput.value.trim().length < 10) { messageInput.setCustomValidity('Veuillez saisir un message (10 caractères minimum).'); } form.classList.add('was-validated'); return form.checkValidity(); } // --- Handler de soumission --- form.addEventListener('submit', async function (event) { event.preventDefault(); event.stopPropagation(); if (!validateForm()) return; // Honeypot : si rempli, simuler un succès sans rien envoyer if (honeypotInput && honeypotInput.value.trim() !== '') { successMessage.style.display = 'block'; form.reset(); form.classList.remove('was-validated'); return; } // UI : état d'envoi submitButton.disabled = true; submitButton.innerHTML = ` <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Envoi en cours... `; successMessage.style.display = 'none'; errorMessage.style.display = 'none'; try { const fb = await waitForFirebase(); const messagesCollection = fb.collection(fb.db, 'contact_messages'); await fb.addDoc(messagesCollection, { name: nameInput.value.trim(), email: emailInput.value.trim(), phone: phoneInput ? phoneInput.value.trim() : '', subject: subjectInput.value.trim(), message: messageInput.value.trim(), created_at: fb.serverTimestamp(), user_agent: navigator.userAgent.substring(0, 500) }); successMessage.style.display = 'block'; form.reset(); form.classList.remove('was-validated'); } catch (error) { console.error('Erreur Firestore:', error); errorMessage.style.display = 'block'; } finally { submitButton.disabled = false; submitButton.innerHTML = ` <i class="bi bi-send me-2"></i> Envoyer le Message `; } }, false); });</code></pre> </div> </div> <div class="paragraph"> <p>Les changements par rapport au mock :</p> </div> <div class="ulist"> <ul> <li> <p><code>waitForFirebase()</code> — polling avec timeout, robuste même si le CDN est lent</p> </li> <li> <p><code>honeypot</code> — si le champ caché <code>hp_name</code> est rempli, simuler un succès sans appel Firestore. Le bot croit avoir réussi mais rien n’est stocké</p> </li> <li> <p><code>addDoc(collection, {…​})</code> — vrai appel Firestore avec <code>serverTimestamp()</code> et <code>user_agent</code></p> </li> <li> <p>Gestion d’erreur avec <code>try/catch</code> asynchrone</p> </li> <li> <p>Nettoyage du <code>finally</code> (restauration du bouton)</p> </li> </ul> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>Pourquoi <code>user_agent</code> ? C’est optionnel, mais utile pour le diagnostic. Si un message étrange arrive, savoir si ça vient d’un navigateur desktop, mobile, ou d’un script curl aide au tri.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_3_nettoyer_le_code_mort_supabase">Phase 3 : Nettoyer le code mort Supabase</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>script.js</code> contient 250 lignes de dead code :</p> </div> <div class="ulist"> <ul> <li> <p><code>SupabaseManager</code> (lignes 417-481) — 65 lignes</p> </li> <li> <p><code>ContactFormHandler</code> (lignes 490-551) — 62 lignes</p> </li> <li> <p>Bloc d’initialisation (lignes 645-654) — 10 lignes</p> </li> </ul> </div> <div class="paragraph"> <p>Total : ~140 lignes à supprimer.</p> </div> <div class="paragraph"> <p>Le bloc <code>DOMContentLoaded</code> crée un <code>SupabaseManager</code> puis un <code>ContactFormHandler</code> rattaché au formulaire. Comme expliqué plus haut, ce code ne s’exécute jamais (bloqué par <code>contact.js</code>), et même s’il s’exécutait, il échouerait (pas de SDK Supabase chargé).</p> </div> <div class="paragraph"> <p>Je supprime :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>La classe <code>SupabaseManager</code></p> </li> <li> <p>La classe <code>ContactFormHandler</code></p> </li> <li> <p>Le bloc d’initialisation dans <code>DOMContentLoaded</code> (lignes 645-654)</p> </li> </ol> </div> <div class="paragraph"> <p>Le reste de <code>script.js</code> est intact : <code>ThemeManager</code>, <code>ScrollToTopButton</code>, <code>MobileMenuManager</code>, <code>SmoothScrollWithOffset</code>, <code>NavbarHeightUpdater</code>, <code>DynamicNavbarBreakpoint</code>, <code>CodeBlockManager</code>, <code>TooltipManager</code>, <code>PhoneInputManager</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_phase_4_configurer_le_footer">Phase 4 : Configurer le footer</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>footer.thyme</code> a déjà le boilerplate Firebase mais avec des valeurs placeholder. Je remplace :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const firebaseConfig = { apiKey: "REMPLACER_PAR_VOTRE_API_KEY", authDomain: "REMPLACER_PAR_VOTRE_AUTH_DOMAIN", projectId: "REMPLACER_PAR_VOTRE_PROJECT_ID", storageBucket: "REMPLACER_PAR_VOTRE_STORAGE_BUCKET", messagingSenderId: "REMPLACER_PAR_VOTRE_SENDER_ID", appId: "REMPLACER_PAR_VOTRE_APP_ID" };</code></pre> </div> </div> <div class="paragraph"> <p>Par les valeurs réelles récupérées depuis <strong>Project Settings > General > Your apps > Web app</strong> dans la console Firebase.</p> </div> <div class="paragraph"> <p>Les valeurs sont sensibles (<code>apiKey</code> est publique par design chez Firebase, mais je préfère ne pas les commiter en clair). Je les stocke dans <code>site.yml</code> (déjà dans <code>.gitignore</code>) et le plugin <code>bakery</code> les injecte dans le template via une logique à ajouter côté build.</p> </div> <div class="paragraph"> <p>Pour l’instant, je les mets directement dans <code>footer.thyme</code> — le build <code>./gradlew serve</code> les chargera localement. Au déploiement, je migrerai l’injection vers <code>site.yml</code> ou vers une variable Gradle.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> <div class="paragraph"> <p>L'`apiKey` Firebase n’est <strong>pas</strong> un secret. Elle est publique par conception. Ce qui protège vos données, ce sont les <strong>règles de sécurité Firestore</strong>, pas la clé API. Ne la mettez pas dans un <code>.env</code> chargé côté serveur — elle est destinée à être exposée au navigateur.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_phase_5_architecture_finale">Phase 5 : Architecture finale</h2> <div class="sectionbody"> <div id="diag-after" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-97da02b2e5039b13e18110950d9d0e1b.svg" alt="Architecture finale — Firebase Firestore" width="512" height="505"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ce_que_cette_migration_dit_du_dogfooding">Ce que cette migration dit du dogfooding</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce site est généré par mon propre plugin Gradle <code>bakery</code>. Le formulaire de contact vit à l’intérieur du site. La migration Supabase → Firebase est documentée dans <code>AGENT.adoc</code>, elle est discutée dans le backlog, elle est testée via <code>./gradlew serve</code>, et elle génère un article de blog (celui que vous lisez).</p> </div> <div class="paragraph"> <p>C’est du dogfooding pur. Le site est le produit du plugin, le plugin est le produit du développeur, le développeur documente le processus dans le site lui-même.</p> </div> <div class="paragraph"> <p>La boucle est bouclée.</p> </div> <div class="paragraph"> <p>Le fait d’avoir traîné un mock pendant des mois (des sessions entières où le formulaire mentait silencieusement) m’a fait réaliser quelque chose : le backlog d’un site statique personnel n’est jamais « fini ». Il y a toujours une US prioritaire, toujours un article en draft, toujours une section commentée dans un template. La discipline n’est pas de tout finir — c’est de finir ce qui est visible par l’utilisateur.</p> </div> <div class="paragraph"> <p>Un formulaire de contact cassé, c’est pire que pas de formulaire du tout. C’est une promesse non tenue.</p> </div> <div class="sect2"> <h3 id="_récapitulatif_des_modifications">Récapitulatif des modifications</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6676%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fichier</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modification</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Impact</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>blog/2026/0113_*.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Création de l’article</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Documentation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>assets/js/contact.js</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Réécriture (mock → Firestore réel)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fonctionnel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>assets/js/script.js</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Suppression SupabaseManager + ContactFormHandler + init bloc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nettoyage</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>templates/footer.thyme</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Remplacement config placeholder → valeurs réelles</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Configuration</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_prochaines_étapes_backlog">Prochaines étapes (backlog)</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Notification email</strong> : Une Cloud Function <code>onCreate</code> sur <code>contact_messages</code> qui envoie un mail via SendGrid. Le formulaire stocke, mais je ne suis pas notifié. Priorité moyenne — les messages sont visibles dans la console Firebase.</p> </li> <li> <p><strong>Rate limiting côté client</strong> : Ajouter un timestamp localStorage pour empêcher les soumissions multiples en rafale. Le honeypot bloque les bots naïfs, un rate limiter bloquerait les bots un peu plus malins.</p> </li> <li> <p><strong>Tests</strong> : Un test Playwright qui soumet le formulaire et vérifie que le document apparaît dans Firestore. Pour l’instant, je teste manuellement via <code>./gradlew serve</code>.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_références">Références</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://firebase.google.com/docs/firestore/security/get-started">Documentation Firestore Security Rules</a></p> </li> <li> <p><a href="https://firebase.google.com/docs/firestore/manage-data/add-data#add_a_document">Documentation Firestore addDoc — Web v9 modulaire</a></p> </li> <li> <p><a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Série gouvernance agent — Partie 1 : Eager/Lazy</a></p> </li> <li> <p><a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Série gouvernance agent — Partie 2 : Hot/Warm/Cold</a></p> </li> <li> <p><a href="/blog/2026/0111_audit_contexte_agent_post.html">Série gouvernance agent — Partie 3 : Audit</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html Tue, 28 Apr 2026 00:00:00 +0000 blog/2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_contexte_pas_un_banc_dessai_un_chantier">Contexte : pas un banc d’essai, un chantier</a></li> <li><a href="#_mon_environnement_de_test">Mon environnement de test</a></li> <li><a href="#_la_grille_dévaluation">La Grille d’Évaluation</a></li> <li><a href="#_round_1_kimi_k2_6_le_faux_départ">Round 1 : Kimi K2.6 — Le Faux Départ</a> <ul class="sectlevel2"> <li><a href="#_session_9_lembellie">Session 9 : l’embellie</a></li> <li><a href="#_session_10_le_naufrage_silencieux">Session 10 : le naufrage silencieux</a></li> </ul> </li> <li><a href="#_round_2_glm_5_1_le_combattant_honorable">Round 2 : GLM-5.1 — Le Combattant Honorable</a> <ul class="sectlevel2"> <li><a href="#_architecture_le_dsa_contre_le_mla_pur">Architecture : le DSA contre le MLA pur</a></li> <li><a href="#_sessions_11_13_solide_mais_frustrant">Sessions 11-13 : solide mais frustrant</a></li> </ul> </li> <li><a href="#_round_3_deepseek_v4_pro_la_machine_de_guerre">Round 3 : DeepSeek-V4-Pro — La Machine de Guerre</a> <ul class="sectlevel2"> <li><a href="#_architecture_csa_hca_le_double_filet">Architecture : CSA + HCA, le double filet</a></li> <li><a href="#_sessions_1_8_le_soulagement">Sessions 1-8 : le soulagement</a></li> <li><a href="#_le_test_décisif_refactoring_à_100k_tokens">Le test décisif : refactoring à 100K tokens</a></li> </ul> </li> <li><a href="#_le_face_à_face_metrics_comparatives">Le Face-à-Face : Metrics Comparatives</a></li> <li><a href="#_pourquoi_deepseek_v4_pro_gagne_en_développement_logiciel">Pourquoi DeepSeek-V4-Pro Gagne en Développement Logiciel</a> <ul class="sectlevel2"> <li><a href="#_1_larchitecture_csahca_est_taillée_pour_le_code">1. L’architecture CSA+HCA est taillée pour le code</a></li> <li><a href="#_2_le_contexte_eager_est_sa_zone_de_confort">2. Le contexte EAGER est sa zone de confort</a></li> <li><a href="#_3_le_rapport_qualitélatence_est_optimal_pour_le_flow">3. Le rapport qualité/latence est optimal pour le flow</a></li> </ul> </li> <li><a href="#_leçons_apprises_comment_choisir_son_llm_pour_le_vibe_coding">Leçons Apprises : Comment Choisir son LLM pour le Vibe Coding</a></li> <li><a href="#_et_la_gouvernance_agent_dans_tout_ça">Et la Gouvernance Agent dans tout ça ?</a></li> <li><a href="#_sources_techniques">Sources Techniques</a></li> <li><a href="#_conclusion_le_choix_de_lartisan">Conclusion : Le Choix de l’Artisan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 18 minutes</div> <p>La guerre des LLMs se joue aussi dans le terminal d’un développeur. Pas sur des benchmarks académiques stériles. Dans la vraie vie : un prompt de 30 000 tokens, une gouvernance agent en AsciiDoc, des plugins Gradle Kotlin DSL à debugger et des sessions qui s’enchaînent sur trois semaines. J’ai testé pour vous DeepSeek-V4-Pro, Kimi K2.6 et GLM-5.1. Voici le verdict, preuves techniques à l’appui.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_contexte_pas_un_banc_dessai_un_chantier">Contexte : pas un banc d’essai, un chantier</h2> <div class="sectionbody"> <div class="paragraph"> <p>Il y a trois semaines, je travaillais sur <code>codebase-gradle</code>, mon meta-build system qui centralise la configuration YAML de quatre projets : un générateur de README PlantUML, un constructeur de slides AsciiDoc, un site statique JBake et un chatbot LLM. L’agent Opencode, gouverné par ma méthodologie de fichiers agents en AsciiDoc, chargeait ~30K tokens de contexte EAGER à chaque début de session — règles absolues, backlog, historique des 10 dernières sessions.</p> </div> <div class="paragraph"> <p>C’est sur ce terrain que j’ai confronté trois modèles :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Kimi K2.6</strong> (Moonshot AI, 1T params / 32B activés, 256K contexte max, MLA) - <strong>GLM-5.1</strong> (Zhipu AI/Tsinghua, 744B params / DSA, 200K contexte max) - <strong>DeepSeek-V4-Pro</strong> (DeepSeek, 1.6T params / 49B activés, 1M contexte max, CSA+HCA)</p> </li> </ul> </div> <div class="paragraph"> <p>Tous servis via Ollama sur serveur cloud, tous en mode thinking (phase de réflexion activée). L’enjeu : produire du code correct, maintenir la cohérence sur des sessions longues, et ne pas halluciner quand le contexte dépasse les 80K tokens.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mon_environnement_de_test">Mon environnement de test</h2> <div class="sectionbody"> <div id="diag-dev-env" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-b1ac0f8f2064fca47d705e64ced8b52f.svg" alt="Environnement de développement — LLM + Opencode + Gradle" width="1826" height="5528"> </div> </div> <div class="paragraph"> <p>Chaque session démarrait avec environ 30K tokens de contexte EAGER : <code>AGENT.adoc</code> (287 lignes), <code>PROMPT_REPRISE.adoc</code> (51 lignes), <code>.agents/INDEX.adoc</code> (218 lignes), <code>LAZY_EAGER_ESSENTIALS.adoc</code> (50 lignes). Le contexte grossissait rapidement avec les échanges — une session typique de 10 messages ajoutait 15-20K tokens au prompt cumulé.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_grille_dévaluation">La Grille d’Évaluation</h2> <div class="sectionbody"> <div class="paragraph"> <p>J’ai évalué chaque modèle sur quatre axes critiques pour le développement logiciel assisté :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Axe</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Critère concret</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Cohérence long contexte</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">L’agent se souvient-il des conventions décidées il y a 40 messages ?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Qualité du code produit</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le code compile-t-il du premier coup ? Respecte-t-il les patterns existants ?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Raisonnement architectural</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">L’agent comprend-il les relations entre modules sans que je les lui réexplique ?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Résistance aux hallucinations</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">À partir de combien de tokens l’agent commence-t-il à inventer des API ou des classes inexistantes ?</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Et une métrique synthétique maison : le <strong>coefficient de reprise</strong> (combien de temps je passe à corriger l’agent plutôt qu’à coder avec lui).</p> </div> </div> </div> <div class="sect1"> <h2 id="_round_1_kimi_k2_6_le_faux_départ">Round 1 : Kimi K2.6 — Le Faux Départ</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kimi K2.6 a été mon premier choix. Ses benchmarks sur SWE-Bench Verified (80.2) et Terminal-Bench 2.0 (66.7) sont excellents. Son architecture MLA promet une bonne efficacité sur les longues séquences.</p> </div> <div class="sect2"> <h3 id="_session_9_lembellie">Session 9 : l’embellie</h3> <div class="paragraph"> <p>Première session avec Kimi. Tâche : implémenter la méthode <code>resolveActiveKey()</code> dans <code>codebase.kt</code> — une fonction de résolution de clé API avec fallback CLI. Le contexte est à 30K tokens, Kimi raisonne vite, produit un code propre avec gestion d’expiration des clés.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun resolveActiveKey( cfg: CodebaseConfiguration, logger: Logger, cliProvider: String? = null, cliAccount: String? = null, cliKey: String? = null ): NamedApiKey? { // Résolution provider → compte → clé avec CLI override // Kimi a parfaitement compris la chaîne de priorité }</code></pre> </div> </div> <div class="paragraph"> <p>Le code compile. Les 7 cas de test passent. Je suis optimiste.</p> </div> </div> <div class="sect2"> <h3 id="_session_10_le_naufrage_silencieux">Session 10 : le naufrage silencieux</h3> <div class="paragraph"> <p>Deuxième session. Le contexte grimpe à ~90K tokens avec les échanges. Je demande à Kimi d’ajouter un mécanisme de snapshot AsciiDoc qui anonymise les secrets avant écriture.</p> </div> <div class="paragraph"> <p>C’est là que ça dérape. Kimi commence à inventer des classes qui n’existent pas. Il me propose <code>AnonymizedObjectMapper</code> — une classe fictive. Il confond <code>ReadmeYmlAnonymizer</code> et <code>CodebaseYmlAnonymizer</code>. Il me suggère d’importer <code>com.fasterxml.jackson.anonymize.*</code> — un package qui n’a jamais existé.</p> </div> <div class="paragraph"> <p>Pire : dans sa phase de réflexion, je vois qu’il construit des raisonnements sur des prémisses fausses. Il "se souvient" que <code>GitConfig</code> a un champ <code>anonymizedToken</code> — non, c’est <code>resolvedToken()</code>. Il attribue à <code>SiteYmlAnonymizer</code> une méthode <code>maskSupabaseCredentials()</code> — qui n’existe pas.</p> </div> <div class="paragraph"> <p><em><em>_ Ce n’était pas un bug. C’était une dissolution progressive de la cohérence. Comme si chaque token ajouté au contexte diluait un peu plus la mémoire des 30 000 premiers. </em>_</em></p> </div> <div class="paragraph"> <p>J’arrête Kimi après deux sessions. Le diagnostic est clair : le MLA compresse bien le KV cache, mais sans mécanisme de sélection sparse fine-grained, l’attention se dilue mécaniquement au-delà de 60K tokens. Chaque token "voit" de moins en moins bien le contexte lointain — et commence à combler les trous par du bruit.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_round_2_glm_5_1_le_combattant_honorable">Round 2 : GLM-5.1 — Le Combattant Honorable</h2> <div class="sectionbody"> <div class="paragraph"> <p>GLM-5.1 arrive avec une architecture différente : MLA pour le base model, puis un <strong>continued pre-training</strong> avec DSA (DeepSeek Sparse Attention) — un indexer léger qui sélectionne dynamiquement les top-2048 tokens pertinents parmi tout l’historique.</p> </div> <div class="sect2"> <h3 id="_architecture_le_dsa_contre_le_mla_pur">Architecture : le DSA contre le MLA pur</h3> <div class="paragraph"> <p>La différence est fondamentale. Là où Kimi compresse l’historique dans un espace latent unique (et perd progressivement la capacité à discriminer l’information pertinente), GLM greffe un indexer post-entraînement qui fait une sélection sparse explicite.</p> </div> <div id="diag-mla-vs-dsa" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-96552207a44b513333686c1c93d0cef9.svg" alt="Comparaison architecture MLA (Kimi) vs MLA+DSA (GLM)" width="1074" height="364"> </div> </div> <div class="paragraph"> <p>Le rapport technique le dit explicitement : DSA est <em>"lossless by construction"</em> — contrairement aux alternatives comme SWA (pattern search), Gated DeltaNet ou SimpleGDN qui perdent jusqu’à 5.69 pts sur RULER@128K.</p> </div> </div> <div class="sect2"> <h3 id="_sessions_11_13_solide_mais_frustrant">Sessions 11-13 : solide mais frustrant</h3> <div class="paragraph"> <p>GLM-5.1 tient mieux la distance. Sur la session 11 (~60K tokens), il reste cohérent. Il produit un <code>SnapshotManager</code> fonctionnel avec gestion correcte des quatre anonymiseurs.</p> </div> <div class="paragraph"> <p>Mais la latence est un problème. Les phases de réflexion DSA sont plus lourdes que le MLA pur — l’indexer doit rescanner l’historique à chaque étape. Une réponse qui prenait 8 secondes avec Kimi en prend 15 avec GLM. Sur une session de 30 messages, ça se fait sentir.</p> </div> <div class="paragraph"> <p>Et puis il y a les erreurs subtiles. GLM ne délire pas comme Kimi — mais il fait des erreurs de <strong>nommage</strong>. Il appelle <code>toAnonymizedYaml()</code> la méthode qui devrait s’appeler <code>anonymize()</code>. Il inverse <code>loadReadmeConfiguration()</code> et <code>loadCodebaseConfiguration()</code> dans le <code>renderFileSection()</code>. Ce ne sont pas des hallucinations, ce sont des confusions de surface — mais en production, une confusion de surface peut casser un build.</p> </div> <div class="paragraph"> <p>J’ai tenu trois sessions avec GLM. Il est meilleur que Kimi, sans conteste. Mais trois sessions de correction manuelle sur des détails de nommage, ça use.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_round_3_deepseek_v4_pro_la_machine_de_guerre">Round 3 : DeepSeek-V4-Pro — La Machine de Guerre</h2> <div class="sectionbody"> <div class="paragraph"> <p>DeepSeek-V4-Pro arrive avec l’architecture la plus ambitieuse des trois : un système hybride qui combine deux mécanismes d’attention complémentaires.</p> </div> <div class="sect2"> <h3 id="_architecture_csa_hca_le_double_filet">Architecture : CSA + HCA, le double filet</h3> <div id="diag-csa-hca" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-aad75fde6f9e97e39f6617b3b9f836d7.svg" alt="Architecture hybride CSA+HCA de DeepSeek-V4-Pro" width="741" height="459"> </div> </div> <div class="paragraph"> <p>Deux niveaux de compression, deux granularités d’attention :</p> </div> <div class="ulist"> <ul> <li> <p><strong>CSA</strong> : compresse le KV cache tous les <code>m</code> tokens, puis applique une attention sparse (DeepSeek Sparse Attention) — seul le top-k des entrées compressées est consulté. Précis, local, efficace. - <strong>HCA</strong> : compression extrême (facteur <code>m'</code> bien plus grand que <code>m</code>), mais attention dense sur le résidu compressé — garde les connexions globales sans explosion quadratique.</p> </li> </ul> </div> <div class="paragraph"> <p>Résultat : à 1M de tokens, DeepSeek-V4-Pro ne consomme que <strong>27% des FLOPs d’inférence</strong> et <strong>10% de la taille du KV cache</strong> par rapport à DeepSeek-V3.2. Le modèle précédent.</p> </div> <div class="paragraph"> <p>Et surtout, le rapport technique (Figure 9) annonce : <em>"Retrieval performance remains highly stable within a 128K context window."</em></p> </div> </div> <div class="sect2"> <h3 id="_sessions_1_8_le_soulagement">Sessions 1-8 : le soulagement</h3> <div class="paragraph"> <p>J’ai passé huit sessions avec DeepSeek-V4-Pro sur <code>codebase-gradle</code>. Huit sessions sans une seule hallucination, sans une seule classe inventée, sans une seule confusion de nommage.</p> </div> <div class="paragraph"> <p>Session 1 : implémentation de <code>CodebaseYmlConfig</code> et <code>CodebaseYmlAnonymizer</code>. 350 lignes de Kotlin, tests inline, tout compile. Session 4 : ajout du <code>SnapshotManager</code> avec tree view, collecte de fichiers, rendu AsciiDoc par fichier. 279 lignes, zéro erreur. Session 7 : debug du <code>renderFileSection()</code> qui devait gérer quatre types d’anonymiseurs différents sans ambiguïté de résolution. Résolu en trois messages.</p> </div> <div class="paragraph"> <p>La latence est plus élevée que Kimi — environ 10-12 secondes par réponse en mode thinking. Mais le taux de correction est quasi nul. Je ne passe pas mon temps à réparer les erreurs de l’agent. Je code <strong>avec</strong> lui.</p> </div> </div> <div class="sect2"> <h3 id="_le_test_décisif_refactoring_à_100k_tokens">Le test décisif : refactoring à 100K tokens</h3> <div class="paragraph"> <p>À la session 8, le contexte cumulé dépasse les 100K tokens. Je demande un refactoring lourd : extraire les quatre tâches de vérification inline du <code>build.gradle.kts</code> vers des fichiers de test JUnit5 dans <code>buildSrc/src/test/</code>.</p> </div> <div class="paragraph"> <p>L’agent propose un plan en trois phases :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Créer les classes de test avec migration des cas existants</p> </li> <li> <p>Ajouter les dépendances JUnit5 et Kotest dans <code>buildSrc/build.gradle.kts</code></p> </li> <li> <p>Supprimer le code inline de <code>build.gradle.kts</code></p> </li> </ol> </div> <div class="paragraph"> <p>Le plan est correct. L’exécution est propre. Il identifie même un edge case que j’avais manqué : les dépendances Jackson dupliquées entre <code>buildscript {}</code> et <code>buildSrc/build.gradle.kts</code> qui doivent être unifiées pendant la migration.</p> </div> <div class="paragraph"> <p>100K tokens de contexte, et l’agent se souvient que <code>CodebaseYmlAnonymizer.TOKEN_MASK</code> est <code>"<strong>*</strong>"</code>, que <code>GitConfig.resolvedToken()</code> est une extension function définie dans <code>readme.kt</code>, et que <code>SnapshotManager.PRUNED_DIRS</code> exclut <code>build</code>, <code>.gradle</code> et <code>.git</code>.</p> </div> <div class="paragraph"> <p>C’est ça, la différence.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_face_à_face_metrics_comparatives">Le Face-à-Face : Metrics Comparatives</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Critère</th> <th class="tableblock halign-left valign-top">Kimi K2.6</th> <th class="tableblock halign-left valign-top">GLM-5.1</th> <th class="tableblock halign-left valign-top">DeepSeek-V4-Pro</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Contexte max</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">256K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">200K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1M</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Mécanisme attention</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">MLA pur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">MLA + DSA</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CSA + HCA hybride</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Paramètres totaux</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1T</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">744B</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1.6T</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Paramètres activés</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">32B</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">non publié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">49B</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Seuil dégradation observé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~60K tokens</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~120K tokens</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~128K tokens</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Comportement au-delà</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hallucinations massives</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Confusions de surface</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dégradation progressive lente</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Stabilité NIAH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">non publié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">100% @128K (DSA)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">stable jusqu’à 128K (Figure 9)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">MRCR @128K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">non publié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">non publié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">supérieur à Gemini 3.1 Pro</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Sessions tenues avant abandon</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8 (et continue)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Temps de correction / temps de code</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">60%</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30%</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><5%</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Latence moyenne (mode think)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8 s</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">15 s</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">11 s</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Coefficient de confiance*</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2/10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">6/10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">9/10</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>*Coefficient de confiance = mesure subjective de ma capacité à prendre le code de l’agent et le commit sans relecture ligne à ligne.</em></p> </div> <div id="diag-radar" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-1ac33bab88740dda58ef1579a97513c4.svg" alt="Radar comparatif — Kimi K2.6 vs GLM-5.1 vs DeepSeek-V4-Pro" width="1135" height="844"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_deepseek_v4_pro_gagne_en_développement_logiciel">Pourquoi DeepSeek-V4-Pro Gagne en Développement Logiciel</h2> <div class="sectionbody"> <div class="paragraph"> <p>La supériorité de DeepSeek-V4-Pro n’est pas due à un seul facteur — c’est une convergence :</p> </div> <div class="sect2"> <h3 id="_1_larchitecture_csahca_est_taillée_pour_le_code">1. L’architecture CSA+HCA est taillée pour le code</h3> <div class="paragraph"> <p>Le développement logiciel assisté est un cas d’usage <strong>extrême</strong> pour l’attention long-contexte. Vous avez besoin de : - Précision locale (cette classe hérite de quoi ? cette méthode est définie où ?) → <strong>CSA</strong> - Vision globale (pourquoi ce module existe ? comment les quatre anonymiseurs interagissent ?) → <strong>HCA</strong></p> </div> <div class="paragraph"> <p>Kimi avec MLA seul gère la précision locale mais perd la vision globale au-delà de 60K. GLM avec DSA améliore la vision globale mais reste mono-niveau. DeepSeek combine les deux explicitement.</p> </div> </div> <div class="sect2"> <h3 id="_2_le_contexte_eager_est_sa_zone_de_confort">2. Le contexte EAGER est sa zone de confort</h3> <div class="paragraph"> <p>Mon système de gouvernance charge ~30K tokens de règles et de backlog au démarrage. Avec une fenêtre stable jusqu’à 128K, DeepSeek dispose de ~100K tokens de marge pour les échanges de la session. C’est 3 à 4 fois plus que ce que Kimi peut gérer sans dégradation.</p> </div> <div class="paragraph"> <p><em><em>_ La fenêtre de 128K de stabilité parfaite correspond exactement à mes besoins : 30K d’EAGER + 70K d’échanges = une session productive de 20-30 messages sans jamais sortir de la zone verte. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_3_le_rapport_qualitélatence_est_optimal_pour_le_flow">3. Le rapport qualité/latence est optimal pour le flow</h3> <div class="paragraph"> <p>Oui, DeepSeek-V4-Pro est plus lent que Kimi (11s vs 8s). Mais le temps <strong>total</strong> d’une tâche est bien inférieur parce que je ne passe pas 20 minutes à corriger les hallucinations de l’agent.</p> </div> <div class="paragraph"> <p>Le développeur ne mesure pas la latence d’une réponse. Il mesure le temps entre "je pose la question" et "le code est dans mon repo et il fonctionne". Sur cette métrique, DeepSeek-V4-Pro est le plus rapide des trois.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_leçons_apprises_comment_choisir_son_llm_pour_le_vibe_coding">Leçons Apprises : Comment Choisir son LLM pour le Vibe Coding</h2> <div class="sectionbody"> <div class="paragraph"> <p>Au-delà du classement ponctuel, cette expérience m’a appris à évaluer un LLM pour le développement logiciel assisté sur des critères qui ne figurent dans aucun benchmark :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Regarde l’architecture, pas la taille de contexte annoncée</strong> — Un modèle qui annonce 256K de contexte mais n’a qu’un MLA finira comme Kimi : théoriquement capable, pratiquement inutilisable au-delà de 60K.</p> </li> <li> <p><strong>Teste sur TON contexte, pas sur un benchmark générique</strong> — Mon prompt initial de 30K tokens AsciiDoc avec règles absolues et backlog n’a rien à voir avec les questions de HLE ou AIME.</p> </li> <li> <p><strong>La latence n’est pas l’ennemie si la qualité suit</strong> — Un modèle lent qui produit du code juste est plus rapide qu’un modèle rapide qui produit du code faux.</p> </li> <li> <p><strong>Méfie-toi des modèles sans technical report public</strong> — Si l’équipe ne documente pas son architecture d’attention, c’est qu’elle n’a pas confiance dans sa tenue en long contexte.</p> </li> </ol> </div> <div id="diag-decision-tree" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-764212652633dc337e38e51de5fc291e.svg" alt="Arbre de décision pour choisir un LLM pour le développement logiciel assisté" width="827" height="461"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_et_la_gouvernance_agent_dans_tout_ça">Et la Gouvernance Agent dans tout ça ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cette expérience valide un point que je défends depuis mon article sur la gouvernance Eager/Lazy : <strong>la qualité du LLM et la qualité de la gouvernance sont multiplicatives, pas additives</strong>.</p> </div> <div class="paragraph"> <p>Avec Kimi K2.6, ma gouvernance était impeccable — mais le modèle diluait l’information. Résultat : gouvernance parfaite × hallucination = zéro.</p> </div> <div class="paragraph"> <p>Avec DeepSeek-V4-Pro, la gouvernance EAGER (30K tokens de règles) + LAZY (archives de sessions, références techniques) + Hot/Warm/Cold (backup rotatif) forme un écosystème où chaque couche amplifie l’autre. L’agent a les règles sous les yeux (EAGER), peut consulter l’historique (LAZY), et le contexte ne sature jamais (rotation backup).</p> </div> <div class="paragraph"> <p><em><em>_ Un bon LLM sans gouvernance, c’est un moteur de Ferrari sans volant. Une bonne gouvernance sans bon LLM, c’est un volant sans moteur. DeepSeek-V4-Pro + ma gouvernance agent = la première fois que j’ai l’impression de conduire. </em>_</em></p> </div> <div class="paragraph"> <p>Le mécanisme de backup rotatif (rotation toutes les 10 sessions ou >500 lignes EAGER) prend tout son sens avec un modèle qui tient 128K de contexte : la sliding window de 10 sessions actives maintient le contexte frais sans jamais dépasser la zone de dégradation.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sources_techniques">Sources Techniques</h2> <div class="sectionbody"> <div class="paragraph"> <p>J’ai croisé mon expérience empirique avec les rapports techniques officiels pour valider mes observations :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>DeepSeek-V4 Technical Report</strong> — PDF récupéré depuis <a href="https://huggingface.co/deepseek-ai/DeepSeek-V4-Flash">HuggingFace</a>. Figure 9 : "Retrieval performance remains highly stable within a 128K context window. While a performance degradation becomes visible beyond the 128K mark, the model’s retrieval capabilities at 1M tokens remain remarkably strong." Architecture CSA+HCA documentée section 2.3.</p> </li> <li> <p><strong>GLM-5 Technical Report</strong> — <a href="https://arxiv.org/abs/2602.15763">arXiv:2602.15763</a>. DSA introduit via continued pre-training, "lossless by construction". Contexte max 202,752 tokens. Tables 3/5/6 documentent les performances long-contexte vs alternatives (SWA, Gated DeltaNet, SimpleGDN).</p> </li> <li> <p><strong>Kimi K2.6 Model Card</strong> — <a href="https://huggingface.co/moonshotai/Kimi-K2.6">HuggingFace</a>. MLA, 256K contexte max. Stratégie de discard-all au-delà du seuil sur les tâches agentiques (confirmant implicitement la limite pratique du MLA en long contexte).</p> </li> <li> <p><strong>Kimi K2 Technical Report</strong> — <a href="https://arxiv.org/abs/2507.20534">arXiv:2507.20534</a>. Architecture MoE, MuonClip optimizer, performances agentiques (HLE, BrowseComp, Terminal-Bench).</p> </li> </ol> </div> <div class="paragraph"> <p>Le point le plus révélateur : dans leur propre évaluation, Moonshot applique une stratégie de <strong>discard-all</strong> (suppression du contexte ancien) dès que la fenêtre de contexte est dépassée. Cela confirme exactement ce que j’ai observé : le MLA seul ne peut pas maintenir la cohérence sur toute la fenêtre de 256K. L’architecture ne suit pas.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_le_choix_de_lartisan">Conclusion : Le Choix de l’Artisan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après trois semaines et treize sessions de développement réel, le verdict est sans appel :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3337%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kimi K2.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GLM-5.1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek-V4-Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Excellent sous 60K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Solide jusqu’à 120K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Domine partout</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Inutilisable au-delà</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Confusions de surface</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stable jusqu’à 128K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2 sessions, abandonné</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 sessions, abandonné</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8 sessions, adopté</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>DeepSeek-V4-Pro est devenu mon LLM par défaut pour toutes les sessions de développement logiciel assisté avec Opencode. Pas parce qu’il est le plus récent. Pas parce qu’il a les meilleurs benchmarks académiques. Mais parce que dans la vraie vie d’un développeur qui pousse des plugins Gradle Kotlin DSL avec un contexte agent de 30K tokens, c’est le seul qui ne me trahit pas quand le contexte s’allonge.</p> </div> <div class="paragraph"> <p>Le CSA+HCA est un <strong>game changer</strong> architectural. La compression double niveau + sparsification n’est pas un détail d’implémentation — c’est ce qui fait la différence entre un assistant de code et un coéquipier fiable.</p> </div> <div class="paragraph"> <p><em><em>_ J’ai choisi DeepSeek-V4-Pro parce qu’il est le seul des trois qui transforme ma gouvernance agent d’une contrainte défensive ("comment éviter que l’agent oublie ?") en un avantage offensif ("que peut-on construire maintenant que l’agent se souvient de tout ?"). </em>_</em></p> </div> <hr> <div class="paragraph"> <p><strong>Cet article est le fruit de 13 sessions de développement réel sur le projet <code>codebase-gradle</code>, documentées dans <code>.agents/sessions/</code> selon ma méthodologie de gouvernance agent Eager/Lazy/Hot/Warm/Cold. Les sources techniques citées sont accessibles publiquement sur HuggingFace et arXiv.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0111_audit_contexte_agent_post.html Mon, 27 Apr 2026 00:00:00 +0000 blog/2026/0111_audit_contexte_agent_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_la_scène_session_051_quelque_chose_cloche">La scène : session 051, quelque chose cloche</a></li> <li><a href="#_laudit_décortiquer_les_627_lignes">L’audit : décortiquer les 627 lignes</a></li> <li><a href="#_la_peur_de_perdre_lingénierie">La peur de perdre l’ingénierie</a></li> <li><a href="#_la_solution_split_encyclopédique">La solution : split encyclopédique</a></li> <li><a href="#_le_contenu_du_fichier_essentials">Le contenu du fichier ESSENTIALS</a></li> <li><a href="#_le_résultat_50_de_contexte_eager">Le résultat : -50% de contexte EAGER</a></li> <li><a href="#_pourquoi_le_dossier_sappelle_encyclopedies">Pourquoi le dossier s’appelle <code>encyclopedies/</code></a></li> <li><a href="#_la_suite_logique_de_la_série">La suite logique de la série</a></li> <li><a href="#_ce_que_jaurais_fait_différemment">Ce que j’aurais fait différemment</a></li> <li><a href="#_le_guide_pour_auditer_votre_propre_contexte">Le guide pour auditer votre propre contexte</a></li> <li><a href="#_une_gouvernance_vivante">Une gouvernance vivante</a></li> <li><a href="#_liens">Liens</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 14 minutes</div> <p>Vous avez passé des semaines à construire une gouvernance agent impeccable. Eager/Lazy, procédure de fin de session, backups rotatifs. Le système tourne. Puis un jour, l’agent devient lent. Les réponses sont diluées. Vous mesurez : 1414 lignes chargées automatiquement. Et le pire, c’est que le coupable n’est pas le code, ni le backlog, ni les archives de sessions. Le coupable, c’est le fichier qui documente votre méthode.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_session_051_quelque_chose_cloche">La scène : session 051, quelque chose cloche</h2> <div class="sectionbody"> <div class="paragraph"> <p>30 avril 2026, 16h00. Je suis en pleine session sur <code>magic-stick</code>, mon projet de build d’ISO Linux live. L’agent Opencode a chargé automatiquement mes fichiers Eager comme d’habitude — <code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, <code>.agents/INDEX.adoc</code>. Tout est normal.</p> </div> <div class="paragraph"> <p>Sauf que les réponses sont molles. L’agent met deux secondes de plus à raisonner. Il oublie un détail qu’il avait sous les yeux trois messages plus tôt. Ce n’est pas un crash, pas une erreur — c’est une dégradation lente, le genre qu’on ne remarque pas tout de suite.</p> </div> <div class="paragraph"> <p>J’avais déjà vécu ça à la session 048, quand j’avais découvert que les fichiers de gouvernance pesaient 5200 lignes cumulées. J’avais alors conceptualisé le mécanisme Hot/Warm/Cold avec sa sliding window de 10 sessions, ses vagues froides identiques, son capteur à deux déclencheurs. Le problème était réglé. En théorie.</p> </div> <div class="paragraph"> <p>Mais là, on est à la session 051. La rotation backup a bien eu lieu — les fichiers EAGER sont passés de 2087 à 500 lignes. Pourtant, le contexte reste lourd. Quelque chose m’échappe.</p> </div> <div class="paragraph"> <p>J’ouvre un terminal et je tape :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">wc -l AGENT.adoc AGENT_MODUS_OPERANDI.adoc PROMPT_REPRISE.adoc \ .agents/INDEX.adoc .agents/SESSIONS_HISTORY.adoc \ .agents/archives/COMPLETED_TASKS_ARCHIVE_2026-04.adoc</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs"> 287 AGENT.adoc 627 AGENT_MODUS_OPERANDI.adoc 51 PROMPT_REPRISE.adoc 218 .agents/INDEX.adoc 18 .agents/SESSIONS_HISTORY.adoc 213 .agents/archives/COMPLETED_TASKS_ARCHIVE_2026-04.adoc 1414 total</code></pre> </div> </div> <div class="paragraph"> <p>1414 lignes. La rotation backup a bien taillé dans INDEX, SESSIONS_HISTORY et COMPLETED_TASKS — ils sont propres. Mais il y a un éléphant dans la pièce que je n’avais pas vu : <strong>627 lignes</strong> dans un seul fichier. <code>AGENT_MODUS_OPERANDI.adoc</code>.</p> </div> <div class="paragraph"> <p>Ce fichier, c’est celui que j’ai écrit à la session 1 pour documenter la stratégie Eager/Lazy. C’est le manuel de la méthode. Et il est devenu, à lui seul, 44% du contexte EAGER.</p> </div> <div id="diag-before-audit" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-055a31fdef8c78e522a1ab22c6f74925.svg" alt="Répartition des 1414 lignes EAGER avant audit" width="721" height="200"> </div> </div> <div class="paragraph"> <p>L’ironie est totale. Le fichier conçu pour <strong>économiser</strong> du contexte est devenu le principal <strong>consommateur</strong> de contexte. C’est comme si le manuel d’utilisation de votre voiture pesait plus lourd que le moteur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_laudit_décortiquer_les_627_lignes">L’audit : décortiquer les 627 lignes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je décide de faire un audit section par section. Pas pour supprimer — pour <strong>comprendre</strong> ce qui mérite d’être en EAGER et ce qui pourrait vivre ailleurs sans perte de connaissance.</p> </div> <div class="paragraph"> <p>Voici la structure exacte de <code>AGENT_MODUS_OPERANDI.adoc</code> et ce que j’y trouve :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2727%;"> <col style="width: 2.2739%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Section</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lignes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Contenu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Déjà présent dans…​</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P1 — Vue d’ensemble</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">64</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Problème résolu, principes fondamentaux, analogie tableau de bord vs manuel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P2 — Structure des fichiers</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">97</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Arborescence, politique de chargement, quand charger quoi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P3 — Règles absolues</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">34</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Git interdit, commandes destructrices interdites, secrets interdits</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code> + <code>INDEX.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P4 — Cycle de vie session</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">133</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Template ouverture, règles de travail, 6 étapes fin de session, checklist</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code> §Fin session + <code>INDEX.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P5 — Métriques et seuils</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">49</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Session idéale (15-30 min, 1-3 fichiers), signes d’alerte</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P6 — Types de sessions</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">72</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tableau de détection, format de proposition, exceptions</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P7 — Amélioration continue</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">39</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Métriques de suivi, revue hebdomadaire</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P8 — Checklist démarrage</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">13</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bootstrap nouveau projet</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P9 — Références</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fichiers de référence, ressources externes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code> (fichiers EAGER/LAZY)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Annexes A+B</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">42</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Glossaire, historique versions</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le verdict est sans appel :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Doublons intégraux</strong> (167 lignes) : P3, P4, P9 — tout est déjà dans <code>AGENT.adoc</code> ou <code>INDEX.adoc</code>, souvent mot pour mot</p> </li> <li> <p><strong>Jamais consulté en pratique</strong> (215 lignes) : P5, P6, P7, P8, Annexes — de la méta-gouvernance qui n’a jamais servi dans aucune session</p> </li> <li> <p><strong>Connaissance unique</strong> (161 lignes) : P1 et P2 — le vocabulaire LAZY/EAGER, l’analogie, la politique de chargement</p> </li> </ul> </div> <div class="paragraph"> <p>Sur 627 lignes, <strong>382 sont du bruit</strong>. Et ces 382 lignes sont chargées <strong>à chaque début de session</strong>, consommées par l’agent, diluant son attention avant même que je dise bonjour.</p> </div> <div id="diag-audit-result" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-e3ec2f50f58c8bbd108e7f63232946be.svg" alt="Résultat de l’audit — 627 lignes réparties en doublons, jamais consulté, connaissance unique" width="514" height="665"> </div> </div> <div class="paragraph"> <p>Ce diagramme est la clé de tout. Les doublons (jaune) sont du bruit pur — l’agent les lit deux fois, dans deux fichiers différents. Le jamais consulté (rouge) est de la documentation morte — écrite avec soin, jamais utilisée. Seul le vert contient de la connaissance que l’agent ne peut pas trouver ailleurs.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_peur_de_perdre_lingénierie">La peur de perdre l’ingénierie</h2> <div class="sectionbody"> <div class="paragraph"> <p>À ce stade, j’ai l’évidence sous les yeux : je dois réduire <code>AGENT_MODUS_OPERANDI.adoc</code>. Mais j’hésite.</p> </div> <div class="paragraph"> <p>Ce fichier, je l’ai écrit à la main. Chaque section est le résultat d’une leçon apprise en session réelle. La partie P3 est née d’un <code>rm -rf</code> accidentel sur <code>bakery-plugin</code> qui m’a coûté des tokens Firebase réels. La partie P4 est le résultat de quinze sessions où j’oubliais d’archiver et je perdais le fil. La procédure en 6 étapes n’est pas sortie d’un livre — elle est sortie de la douleur.</p> </div> <div class="paragraph"> <p>Supprimer ces sections, ce serait jeter l’historique de ma propre ingénierie. Les leçons qui les ont produites, les sessions pendant lesquelles je les ai découvertes, les erreurs que je ne veux plus jamais refaire. Ce n’est pas du texte — c’est de l’expérience cristallisée.</p> </div> <div class="paragraph"> <p>C’est là que je formule le principe qui va guider la solution :</p> </div> <div class="paragraph"> <p><em><em>_ <strong>Ne jamais supprimer. Toujours relocaliser.</strong> La connaissance n’a pas à disparaître du projet. Elle a juste à ne pas être chargée automatiquement quand elle n’est pas nécessaire. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_split_encyclopédique">La solution : split encyclopédique</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le modèle que je propose est simple et s’inspire de la façon dont Wikipédia a grandi : quand un article devient trop long, on ne le coupe pas — on crée un article détaillé et on garde un résumé dans l’article principal.</p> </div> <div class="paragraph"> <p>Pour <code>AGENT_MODUS_OPERANDI.adoc</code>, cela donne :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Extraire</strong> les 161 lignes de connaissance unique (P1 + P2) dans un nouveau fichier <code>LAZY_EAGER_ESSENTIALS.adoc</code> — compacté à ~50 lignes, strictement EAGER</p> </li> <li> <p><strong>Renommer</strong> <code>AGENT_MODUS_OPERANDI.adoc</code> en <code>.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc</code> — le fichier original de 627 lignes, préservé <strong>intact</strong>, en cold storage</p> </li> <li> <p><strong>Ne jamais charger</strong> le fichier encyclopédie automatiquement — il est là pour l’humain, pour la distillation future, pour l’agent qu’on invoquera dans six mois avec un meilleur modèle</p> </li> </ol> </div> <div id="diag-split-solution" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-1ca7b1421a06e9049df1c3513a7924d2.svg" alt="Architecture du split encyclopédique — ESSENTIALS EAGER + ENCYCLOPEDIE cold storage" width="762" height="530"> </div> </div> <div class="paragraph"> <p>Le nom <code>encyclopedies/</code> n’est pas anodin. Une encyclopédie, ce n’est pas un dossier d’archives — c’est une collection de connaissance organisée, consultable mais pas portable. On ne lit pas l’Encyclopédie Universalis dans le métro. On la garde dans la bibliothèque, et on y va quand on a une question précise.</p> </div> <div class="paragraph"> <p>C’est exactement le rôle de ce dossier : une bibliothèque de référence froide, structurée, exhaustive — que l’agent ne touche pas automatiquement.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_contenu_du_fichier_essentials">Le contenu du fichier ESSENTIALS</h2> <div class="sectionbody"> <div class="paragraph"> <p>Voici à quoi ressemble concrètement le nouveau fichier <code>LAZY_EAGER_ESSENTIALS.adoc</code>, extrait et compacté à partir de P1 et P2 :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Stratégie LAZY/EAGER — Principes Essentiels [abstract] Ce fichier définit la stratégie de gestion du contexte agent. Chargé automatiquement (EAGER) en début de session. == Principes |=== | EAGER | LAZY | Tableau de bord | Manuel du propriétaire | Chargé automatiquement | Chargé sur demande | <= 100 lignes, <= 10k tokens | Illimité, détaillé | Règles absolues, mission courante | Archives, historique, références |=== == Politique de Chargement |=== | Fichier | Type | Quand charger | PROMPT_REPRISE.adoc | EAGER | Début session (auto) | *_ESSENTIALS.adoc | EAGER | Début session si EPIC active | .agents/INDEX.adoc | EAGER | Début session (auto) | *_REFERENCE.adoc | LAZY | Sur besoin (détails architecture) | .agents/sessions/N-*.adoc | LAZY | Sur demande (détails session) | .agents/encyclopedies/*.adoc | COLD | Jamais auto (humain seulement) |=== == Comment l'Agent Sait Quoi Charger Début session → PROMPT_REPRISE + INDEX + ESSENTIALS actifs. Besoin de détails → charger les *_REFERENCE et sessions/ en LAZY. Connaissance froide → encyclopedies/, jamais automatique.</code></pre> </div> </div> <div class="paragraph"> <p>Cinquante lignes. C’est tout ce dont l’agent a besoin pour comprendre la mécanique. Tout le reste — l’historique des leçons, les analogies détaillées, les procédures pas à pas, les annexes — vit dans l’encyclopédie.</p> </div> <div class="paragraph"> <p>Et le plus important : <strong>rien n’a été supprimé</strong>. Les 627 lignes d’ingénierie sont toujours là, dans <code>.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc</code>. Elles sont juste rangées dans la bibliothèque plutôt que sur le plan de travail.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_résultat_50_de_contexte_eager">Le résultat : -50% de contexte EAGER</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant le split :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs"> 287 AGENT.adoc 627 AGENT_MODUS_OPERANDI.adoc 51 PROMPT_REPRISE.adoc 218 .agents/INDEX.adoc 18 .agents/SESSIONS_HISTORY.adoc 213 .agents/archives/COMPLETED_TASKS_ARCHIVE_2026-04.adoc 1414 total</code></pre> </div> </div> <div class="paragraph"> <p>Après le split :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs"> 287 AGENT.adoc 50 LAZY_EAGER_ESSENTIALS.adoc ← remplace 627 lignes 51 PROMPT_REPRISE.adoc 218 .agents/INDEX.adoc 18 .agents/SESSIONS_HISTORY.adoc 213 .agents/archives/COMPLETED_TASKS_ARCHIVE_2026-04.adoc 837 total ← -41%</code></pre> </div> </div> <div id="diag-after-audit" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-4ca8c26a5cbdc6d1078c3680e6b90bec.svg" alt="Répartition des 837 lignes EAGER après audit — gain de 41%" width="687" height="230"> </div> </div> <div class="paragraph"> <p>Le plus gros consommateur (AGENT_MODUS_OPERANDI, 627 lignes) a été remplacé par un fichier de 50 lignes. Le gain est immédiat : 577 lignes de contexte libérées. L’agent respire.</p> </div> <div class="paragraph"> <p>Et dans <code>.agents/encyclopedies/</code>, le fichier original de 627 lignes attend. Intact. Avec toutes ses sections — y compris celles qui sont des doublons, y compris celles qui n’ont jamais servi. Parce qu’un jour, un meilleur modèle ou un data scientist humain voudra croiser ces angles, ces redondances assumées, ces leçons apprises. Et ce jour-là, la matière première sera là.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_le_dossier_sappelle_encyclopedies">Pourquoi le dossier s’appelle <code>encyclopedies/</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Le choix du nom n’est pas cosmétique. Il encode la philosophie du mécanisme.</p> </div> <div class="paragraph"> <p>Une <strong>archive</strong> (<code>archives/</code>) contient des données historiques organisées chronologiquement — comme les COMPLETED_TASKS mensuels. Un <strong>backup</strong> (<code>backup/</code>) est un snapshot horodaté — une copie de sécurité d’un état passé.</p> </div> <div class="paragraph"> <p>Une <strong>encyclopédie</strong>, c’est autre chose. C’est une collection de connaissance thématique, structurée par sujet, exhaustive mais non linéaire. On ne lit pas une encyclopédie du début à la fin. On y plonge pour répondre à une question précise.</p> </div> <div class="paragraph"> <p>C’est exactement le contrat de ce dossier :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Dossier</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rôle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Accès</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Granularité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>archives/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Données historiques (tâches terminées par mois)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LAZY, structuré</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Chronologique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>backup/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Snapshots froids (vagues de 10 sessions)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, copie intégrale</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Chronologique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>encyclopedies/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Connaissance thématique exhaustive (méthodologie, patterns)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, jamais auto</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Thématique</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Cette distinction évite le fourre-tout. Chaque fichier sait où il doit vivre selon <strong>ce qu’il contient</strong>, pas selon <strong>quand il a été créé</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_suite_logique_de_la_série">La suite logique de la série</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si vous avez lu les deux premiers articles, voici comment les trois pièces s’emboîtent :</p> </div> <div id="diag-trilogie" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-7a93be1f2d7bbeab8cf9d47564547c7c.svg" alt="Les trois articles de la série gouvernance — progression logique" width="1216" height="493"> </div> </div> <div class="ulist"> <ul> <li> <p><strong>0108</strong> répond à : « Comment donner une mémoire à l’agent entre deux sessions ? »</p> </li> <li> <p><strong>0110</strong> répond à : « Comment empêcher cette mémoire d’étouffer l’agent ? »</p> </li> <li> <p><strong>0111</strong> répond à : « Et si le problème n’est pas la taille des archives, mais ce qu’on a <strong>choisi</strong> de mettre en EAGER ? »</p> </li> </ul> </div> <div class="paragraph"> <p>Le premier article a construit la structure. Le deuxième a ajouté le mécanisme de vieillissement. Le troisième audite le contenu — et découvre que la méthodologie elle-même est devenue le problème.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ce_que_jaurais_fait_différemment">Ce que j’aurais fait différemment</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avec le recul, je vois l’erreur de conception initiale. <code>AGENT_MODUS_OPERANDI.adoc</code> a été créé comme un document unique — un manifeste. C’était la bonne approche pour formaliser la pensée. Mais une fois la pensée formalisée, le document aurait dû être splité immédiatement : l’essentiel en EAGER, l’exhaustif en cold.</p> </div> <div class="paragraph"> <p>Je ne l’ai pas fait parce que j’étais fier du document. 627 lignes d’ingénierie pure, écrites à la main, chaque section fruit d’une leçon de session. C’était mon œuvre. Et comme tout auteur, j’ai eu du mal à la découper.</p> </div> <div class="paragraph"> <p>La leçon : <strong>ce n’est pas parce qu’un document est bon qu’il doit être chargé automatiquement</strong>. La qualité du contenu n’a aucun rapport avec sa pertinence pour le contexte immédiat de l’agent.</p> </div> <div class="paragraph"> <p>Aujourd’hui, la règle est simple : tout document de plus de 100 lignes dans le contexte EAGER est un suspect. Il mérite un audit. Pas une condamnation — un audit. Et la question n’est jamais « faut-il le supprimer ? » mais « faut-il le charger à chaque session ? »</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_guide_pour_auditer_votre_propre_contexte">Le guide pour auditer votre propre contexte</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si vous avez suivi les deux premiers articles et mis en place votre propre gouvernance Eager/Lazy, voici une procédure d’audit en cinq étapes :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Mesurer</strong> : <code>wc -l</code> sur tous vos fichiers EAGER. Le total devrait être sous 1000 lignes.</p> </li> <li> <p><strong>Identifier le plus gros</strong> : le fichier qui pèse plus de 20% du total est le suspect numéro un.</p> </li> <li> <p><strong>Auditer section par section</strong> : pour chaque section, demandez-vous « Est-ce que cette information est déjà ailleurs ? Est-ce que l’agent l’a déjà lue dans un autre fichier ? Est-ce qu’elle a servi dans les 5 dernières sessions ? »</p> </li> <li> <p><strong>Classifier</strong> : doublon, jamais utilisé, connaissance unique.</p> </li> <li> <p><strong>Splitter ou relocaliser</strong> : ce qui est unique et critique → ESSENTIALS compacté. Tout le reste → <code>encyclopedies/</code>.</p> </li> </ol> </div> <div id="diag-audit-checklist" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-5bc9a34fb18adeac0f7da7af8a309acd.svg" alt="Procédure d’audit en 5 étapes" width="430" height="741"> </div> </div> <div class="paragraph"> <p>Cette procédure prend 15 minutes. Sur un projet de 50 sessions, elle économise des centaines de tokens par session future. Le ROI est immédiat.</p> </div> </div> </div> <div class="sect1"> <h2 id="_une_gouvernance_vivante">Une gouvernance vivante</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ce que cette série de trois articles m’a appris, c’est que la gouvernance agent n’est pas un produit fini. C’est un <strong>organisme vivant</strong>. Elle grandit avec le projet. Elle attrape des maladies de croissance. Elle nécessite des check-ups réguliers.</p> </div> <div class="paragraph"> <p>La session 048 a révélé que les archives gonflent. La session 051 a révélé que la méthodologie elle-même gonfle. La session 060 révélera probablement autre chose. C’est normal. C’est sain. Une gouvernance qui ne se remet jamais en question est une gouvernance morte.</p> </div> <div class="paragraph"> <p>Les trois mécanismes mis en place — Eager/Lazy, Hot/Warm/Cold, split encyclopédique — forment un système de défense en profondeur contre la saturation du contexte. Aucun n’est suffisant seul. Ensemble, ils se complètent :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Eager/Lazy</strong> structure l’information <strong>par disponibilité</strong></p> </li> <li> <p><strong>Hot/Warm/Cold</strong> structure l’information <strong>par fraîcheur</strong></p> </li> <li> <p><strong>Audit encyclopédique</strong> structure l’information <strong>par densité</strong></p> </li> </ul> </div> <div id="diag-defense-in-depth" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-c815b1bc714a7df30a365994ac557d7d.svg" alt="Les trois couches de défense contre la saturation du contexte" width="672" height="345"> </div> </div> <div class="paragraph"> <p>Avec ces trois couches, le contexte agent sur <code>magic-stick</code> est passé de 2087 lignes (avant toute optimisation) à environ 800 lignes — une division par 2,6. Sans avoir perdu une seule ligne de documentation, une seule archive de session, une seule leçon apprise.</p> </div> <div class="paragraph"> <p>Tout est là. Juste mieux rangé.</p> </div> </div> </div> <div class="sect1"> <h2 id="_liens">Liens</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Article 0108 — Stratégie Eager/Lazy : <a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Gouverner un Agent IA avec du AsciiDoc</a></p> </li> <li> <p>Article 0110 — Mécanisme Hot/Warm/Cold : <a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Sliding Window et Vague Froide</a></p> </li> <li> <p>Mon site : <a href="https://cheroliv.com" class="bare">https://cheroliv.com</a></p> </li> <li> <p>Le projet <code>magic-stick</code> : <a href="https://github.com/cheroliv/magic-stick" class="bare">https://github.com/cheroliv/magic-stick</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><strong>La connaissance n’a pas à disparaître. Elle a juste à ne pas être chargée quand elle n’est pas nécessaire.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0110_mecanisme_backup_contexte_agent_post.html Sun, 26 Apr 2026 00:00:00 +0000 blog/2026/0110_mecanisme_backup_contexte_agent_post.html <div class="sect1"> <h2 id="_résumé">Résumé</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après 48 sessions sur un seul projet et 150+ au total, le système de gouvernance Eager/Lazy que j’avais construit avec soin commençait à s’étouffer. Les fichiers agents, censés être légers, pesaient 5200 lignes cumulées. Le contexte auto-chargé montait plus vite que ma capacité à le contrôler. Cet article raconte comment j’ai conceptualisé un mécanisme de backup — entre sliding window et vague froide identique — pour maintenir un contexte actif léger sans jamais rien perdre.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_signal_5200_lignes">Le Signal : 5200 Lignes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je suis en pleine session 048 sur <code>magic-stick</code>, mon projet de build d’ISO Linux live. Opencode me regarde. Comme toujours, il a chargé automatiquement mes fichiers Eager en début de session — <code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, <code>.agents/INDEX.adoc</code>. Rien d’anormal.</p> </div> <div class="paragraph"> <p>Sauf que quelque chose cloche. Les réponses sont plus lentes. Le raisonnement est plus dilué. L’agent oublie des détails qu’il avait sous les yeux il y a deux messages.</p> </div> <div class="paragraph"> <p>J’ouvre un terminal et je tape :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">wc -l .agents/INDEX.adoc .agents/SESSIONS_HISTORY.adoc \ .agents/archives/COMPLETED_TASKS_ARCHIVE_2026-04.adoc</code></pre> </div> </div> <div class="paragraph"> <p>260 lignes pour INDEX. 55 pour SESSIONS_HISTORY. <strong>1756 pour COMPLETED_TASKS_ARCHIVE</strong>.</p> </div> <div class="paragraph"> <p>Le dossier <code>sessions/</code> ajoute encore ~3200 lignes. Total : <strong>5200 lignes</strong> de contexte qui se chargent, d’une manière ou d’une autre, dans le cerveau temporaire de l’agent.</p> </div> <div class="paragraph"> <p>La stratégie Eager/Lazy que j’avais théorisée à l’article précédent fonctionne — mais elle a un défaut de naissance que je n’avais pas anticipé : elle n’a <strong>pas de mécanisme de vieillissement</strong>. Chaque session ajoute une ligne à INDEX, un paragraphe à COMPLETED_TASKS, un fichier dans sessions/. Rien ne sort jamais. Le contexte est une boule de neige qui grossit à chaque nouvelle session.</p> </div> <div id="diag-growth" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-95c83a721c5c943661137fb4c7f9bc23.svg" alt="Courbe de croissance des fichiers agents — de la session 1 à 48" width="427" height="591"> </div> </div> <div class="paragraph"> <p>Ce n’est pas un bug, c’est une conséquence directe de la procédure de fin de session qui archive méticuleusement chaque détail. Le système est victime de son propre succès.</p> </div> </div> </div> <div class="sect1"> <h2 id="_le_diagnostic_triple_redondance">Le Diagnostic : Triple Redondance</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je demande à l’agent de diagnostiquer le problème. Sa réponse est immédiate et chirurgicale.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fichier</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lignes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rôle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Problème</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.agents/INDEX.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">260+</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">EAGER (chargé auto)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Table de toutes les sessions depuis la 001 — <strong>+1 ligne par session</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.agents/SESSIONS_HISTORY.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">55</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">EAGER</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Table récapitulative — <strong>redondance avec INDEX</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>COMPLETED_TASKS_ARCHIVE_2026-04.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1756</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">EAGER (implicite)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Détails complets de toutes les sessions d’avril</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.agents/sessions/*.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~5200 total</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LAZY (supposé)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Archives individuelles, mais <strong>pas utilisées</strong> car tout est déjà dans COMPLETED_TASKS</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>L’agent identifie quatre causes racines :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>COMPLETED_TASKS_ARCHIVE absorbe tout</strong> — Au lieu de pointer vers les archives <code>.sessions/</code>, il recopie intégralement chaque session.</p> </li> <li> <p><strong>INDEX.adoc fait office d’historique complet</strong> — Le tableau "Sessions Récentes" contient 30+ entrées.</p> </li> <li> <p><strong>SESSIONS_HISTORY.adoc redondant</strong> — Même info que INDEX, format différent.</p> </li> <li> <p><strong>La règle LAZY n’est pas respectée</strong> — COMPLETED_TASKS est implicitement EAGER car il contient tout.</p> </li> </ol> </div> <div class="paragraph"> <p>Sa proposition est radicale : limiter INDEX à 10 sessions, vider COMPLETED_TASKS, déplacer SESSIONS_HISTORY en LAZY pur. Gain immédiat : <strong>~1900 lignes économisées</strong>.</p> </div> <div class="paragraph"> <p>C’est propre, efficace, logique. Mais j’ai un problème avec cette approche.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_jai_refusé_la_solution_évidente">Pourquoi J’ai Refusé la Solution Évidente</h2> <div class="sectionbody"> <div class="paragraph"> <p>La solution de l’agent est celle d’un ingénieur qui optimise un cache. Limiter. Tronquer. Supprimer les redondances.</p> </div> <div class="paragraph"> <p>Mais ces "redondances" n’en sont pas. Chaque fichier de gouvernance capture un <strong>angle différent</strong> sur la même réalité :</p> </div> <div class="ulist"> <ul> <li> <p><strong>INDEX</strong> = vue macro, tableau de bord exécutif</p> </li> <li> <p><strong>SESSIONS_HISTORY</strong> = table chronologique linéaire, scorée</p> </li> <li> <p><strong>COMPLETED_TASKS_ARCHIVE</strong> = narrative détaillée avec métriques</p> </li> <li> <p><strong>sessions/*.adoc</strong> = archives individuelles, contexte complet</p> </li> </ul> </div> <div class="paragraph"> <p>Ce n’est pas de la duplication bête. C’est de la <strong>perspective multiple structurée</strong>. C’est exactement ce dont on a besoin pour distiller — pour que plus tard, un humain (ou un futur LLM mieux entraîné) puisse croiser les angles et extraire des patterns.</p> </div> <div class="paragraph"> <p>Imaginez un data scientist qui vous dit : « Supprimons 3 colonnes sur 6, elles sont corrélées. » Vous lui répondez quoi ? Que la corrélation n’est pas de la redondance quand chaque colonne capture une dimension différente du même phénomène. Que c’est précisément cette richesse dimensionnelle qui rend le dataset exploitable.</p> </div> <div class="paragraph"> <p>C’est mon intuition. Et je la défends contre la rationalité froide de l’agent.</p> </div> <div class="paragraph"> <p><em><em>_ Je ne vois pas de fourre-tout silencieux dans mon idée. On ne fourre pas tout, on déplace le résultat structuré de la procédure de fin de session — chaque fichier avec son angle, ses redondances qui sont en réalité un enrichissement. C’est ce matériel multidimensionnel qui sera meilleur pour la distillation. </em>_</em></p> </div> <div class="paragraph"> <p>L’agent accuse le coup. Et se corrige.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_proposition_vague_froide_identique">La Proposition : Vague Froide Identique</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’agent propose alors un mécanisme plus fin, qui respecte mon intuition de dataset riche tout en résolvant le problème technique du contexte qui explose.</p> </div> <div class="paragraph"> <p>Le principe est simple et s’inspire directement du pattern <strong>Hot/Warm/Cold Storage</strong> appliqué à la gestion d’archives :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Hot (EAGER)</strong> = les 10 dernières sessions dans INDEX, PROMPT_REPRISE de la session N+1, les 2 derniers fichiers de session</p> </li> <li> <p><strong>Warm (LAZY)</strong> = SESSIONS_HISTORY récent, SCRIPT_VERIFICATION, toute la documentation de référence</p> </li> <li> <p><strong>Cold (backup/)</strong> = tout le reste, déplacé <strong>intact</strong>, sans transformation, sans réindexation</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- .agents/ ├── INDEX.adoc → Sessions N-9 à N (10 dernières) ├── SESSIONS_HISTORY.adoc → Sessions N-9 à N ├── SCRIPT_VERIFICATION.adoc → Dernière vérif (pas d'historique) ├── PROMPT_REPRISE.adoc → Session N+1 uniquement ├── sessions/ → Sessions N-1 à N uniquement └── backup/ └── Y2026-sessions-001-039/ ← Vague froide, COPIE INTÉGRALE ├── INDEX.adoc → Sessions 001 à 039 (complet) ├── SESSIONS_HISTORY.adoc → Sessions 001 à 039 (complet) ├── COMPLETED_TASKS_ARCHIVE.adoc → Sessions 001 à 039 (complet) └── sessions/ → 001.adoc, 002.adoc... ---- La clé du mécanisme : **le backup n'est pas un index central, c'est une copie conforme de la vague passée**. Quand on dépasse l'horizon des 10 sessions actives, on ne supprime rien. On ne réindexe rien. On ne fusionne rien. On prend le paquet de fichiers agents tel qu'il était à la session N-10, et on le déplace dans `backup/`. Les fichiers actifs, eux, sont tronqués : * INDEX : uniquement les 10 dernières lignes (sliding window) * SESSIONS_HISTORY : idem * COMPLETED_TASKS_ARCHIVE : nouveau fichier pour la période en cours * sessions/ : uniquement les 2 dernières sessions [plantuml, format=svg, id=diag-hot-warm-cold, alt="Architecture Hot/Warm/Cold du contexte agent — EAGER/LAZY/backup"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 200 title Architecture Hot / Warm / Cold du Contexte Agent package "HOT (EAGER)\nChargé automatiquement\n~300 lignes" as HOT #FFCDD2 { file "INDEX.adoc\n(10 sessions)" as IDX_HOT file "PROMPT_REPRISE\n(session N+1)" as PRO_HOT file "AGENT.adoc\n(règles absolues)" as AG_HOT } package "WARM (LAZY)\nChargé sur demande\n~500 lignes" as WARM #FFF9C4 { file "SESSIONS_HISTORY\n(10 dernières)" as HIS_WARM file "SCRIPT_VERIFICATION\n(dernière)" as VER_WARM file "PROCEDURES.adoc\n(templates)" as PRO_WARM file "*_REFERENCE.adoc\n(doc technique)" as REF_WARM } package "COLD (backup/)\nJamais chargé\nLecture humaine uniquement" as COLD #BBDEFB { folder "Y2026-001-039/" as WAVE { file "INDEX (complet)" as IDX_COLD file "SESSIONS_HISTORY\n(complet)" as HIS_COLD file "COMPLETED_TASKS\n(complet)" as ARCH_COLD folder "sessions/ (001-039)" as SESS_COLD } folder "Y2026-040-???\n(future)" as FUTURE } HOT --> WARM : "Agent remonte\nsi besoin" WARM --> COLD : "Jamais automatique\nL'humain y va seul" note bottom of COLD Règle : COPIE INTÉGRALE Pas de transformation Pas de réindexation Read-only après archivage end note @enduml ---- Le gain immédiat est massif : le contexte EAGER passe de **~5200 lignes à ~300 lignes**. Une division par 17. Sans avoir perdu une seule ligne de données historiques. == Pourquoi Ce N'est Pas un Fourre-Tout L'agent, dans sa première itération, craignait que `backup/` devienne une boîte noire — un dossier où l'on jette des fichiers qu'on ne relira jamais. C'est une peur légitime. Mais elle repose sur une confusion. Un fourre-tout, c'est quand on jette des fichiers **sans structure, sans convention, sans logique de regroupement**. Ici, le backup est structuré par période (Y2026-001-039), et chaque dossier de backup contient **la même structure** que le dossier `.agents/` actif : INDEX, SESSIONS_HISTORY, COMPLETED_TASKS_ARCHIVE, sessions/. Ce n'est pas un fourre-tout. C'est un **snapshot horodaté**. On pourrait même dire que c'est un mécanisme de versioning simplifié — à ceci près qu'il ne versionne pas les fichiers individuellement, mais le paquet complet de la gouvernance à un instant T. Quand vous voulez retrouver une information ancienne, vous n'avez pas besoin d'un index central. Vous avez deux options : 1. **`grep` ciblé** : `grep -r "zsh" backup/Y2026-001-039/` — et vous trouvez tout ce qui mentionne zsh dans la période, quel que soit l'angle (INDEX, SESSIONS_HISTORY, archive de session). 2. **Réintégration manuelle** : vous copiez temporairement le dossier de backup dans le contexte actif, et vous demandez à l'agent d'analyser cette période spécifique. L'index est implicite. Il est dans la structure même des fichiers — chacun étant déjà un index depuis son propre angle. == La Méthaphore des Étagères Pour rendre le mécanisme intuitif, je l'ai conceptualisé en trois étagères : * **Étagère 1 (EAGER)** — le plan de travail. Ce dont j'ai besoin *maintenant*. INDEX récent, PROMPT_REPRISE, règles absolues. Léger, immédiat, critique. * **Étagère 2 (LAZY)** — la bibliothèque de consultation. Ce que je peux aller chercher sur demande. Références techniques, historique récent, procédures. Plus volumineux, mais pas chargé en mémoire. * **Cave (backup/)** — les archives froides. Tout ce qui est passé mais que je ne veux pas jeter. L'agent n'y entre jamais. L'humain y descend quand il veut distiller. L'agent a proposé initialement une quatrième étagère — un `index-backup.adoc` qui serait LAZY et contiendrait une table des matières de tout le backup. J'ai refusé. Ce serait une redondance de plus dans un système qui souffre déjà de croissance linéaire. La structure des fichiers archivés est déjà un index. == Le Capteur à Deux Déclencheurs La conceptualisation était solide, mais il restait un angle mort : **quand exactement déclencher la rotation ?** L'article initial l'identifiait comme une question ouverte. Deux jours plus tard, la réponse est codifiée dans les fichiers de gouvernance de six projets : un capteur à deux déclencheurs. === Le Déclencheur Automatique — `N % 10 == 0` Le premier déclencheur est mathématique. Quand le numéro de session est un multiple de 10 — session 10, 20, 30, 40 — la rotation backup s'exécute automatiquement au sein de la procédure de fin de session, juste après l'étape 6. Pourquoi 10 ? C'est le compromis entre deux forces contraires : une fenêtre trop courte (5 sessions) perd le contexte nécessaire à la continuité ; une fenêtre trop longue (20 sessions) ne résout pas le problème d'embonpoint du contexte. Dix sessions, sur un rythme de une à deux sessions par jour, couvrent environ une semaine de travail — assez pour que l'agent se souvienne des décisions récentes, pas assez pour que le contexte explose. === Le Déclencheur par Seuil — 500 Lignes EAGER Le second déclencheur est dynamique. Indépendamment du numéro de session, si les fichiers EAGER cumulés dépassent **500 lignes**, la rotation se déclenche. Ce seuil protège contre le scénario où les sessions sont exceptionnellement productives — beaucoup de contenu écrit en peu de sessions. Une session qui produit 120 lignes de contenu éditorial fait grossir COMPLETED_TASKS_ARCHIVE bien plus vite qu'une session de debug qui corrige deux lignes. Le seuil de 500 lignes, mesuré via `wc -l .agents/INDEX.adoc .agents/archives/COMPLETED_TASKS_ARCHIVE_*.adoc PROMPT_REPRISE.adoc`, capte cette asymétrie. === Le Déclencheur Manuel — "rotation backup" Enfin, l'humain garde la main. Les mots-clés `rotation backup`, `backup rotation` ou `lance la rotation backup` déclenchent la procédure sur demande, indépendamment de la fin de session. Utile quand on sent que le contexte devient lourd mais qu'on n'est pas encore à un multiple de 10, ou quand on veut archiver une phase de travail avant d'en commencer une nouvelle. [plantuml, format=svg, id=diag-capteur-trigger, alt="Les trois déclencheurs du capteur de rotation backup — automatique, seuil, manuel"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 200 title Capteur de Rotation Backup — Les Trois Déclencheurs start :Procédure de fin de session; note right: Mots-clés "fin de session"\nou "on arrête là" :Étapes 1 à 6\n(archivage standard); note right 1. Archive sessions/N.adoc 2. MAJ PROMPT_REPRISE 3. MAJ SESSIONS_HISTORY 4. MAJ INDEX.adoc 5. MAJ TEST_COVERAGE 6. MAJ COMPLETED_TASKS end note if (N % 10 == 0\nOU\nEAGER cumulé > 500 lignes ?) then (oui) :⚙️ Rotation Backup\n(étape 7); note right 1. Créer backup/Y20XX-sessions-X-Y/ 2. Copier intégrale INDEX + HISTORY + COMPLETED_TASKS + sessions/ 3. Tronquer actifs à 10 sessions 4. Ajouter _Localisation active_ end note else (non) :Pas de rotation; endif :Checklist [✅] x 7\n(si applicable); stop @enduml ---- Ce diagramme montre l'insertion exacte du capteur dans la procédure de fin de session. L'étape 7 est optionnelle — elle ne s'exécute que si une des deux conditions est vraie — mais elle est systématiquement *vérifiée*. La checklist finale inclut `[✅] 7. Backup roté (si applicable)`. === La Boucle Fermée Ce capteur referme la boucle ouverte par l'article précédent. La gouvernance Eager/Lazy avait résolu le problème de la mémoire agent entre deux sessions. Le mécanisme Hot/Warm/Cold a résolu le problème de la mémoire qui grossit. Le capteur à deux déclencheurs résout le problème du *quand* — retirant à l'humain la charge mentale de surveiller la taille du contexte. [plantuml, format=svg, id=diag-boucle-fermee, alt="Les trois couches de la gouvernance agent — Eager/Lazy, Hot/Warm/Cold, Capteur"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Les Trois Couches de la Gouvernance Agent left to right direction package "Couche 1 — Mémoire\n(Article 0108)" as C1 #E8F5E9 { rectangle "**EAGER**\nTableau de bord\nChargé auto" as EAG rectangle "**LAZY**\nManuel propriétaire\nChargé sur demande" as LAZ EAG -[hidden]right-> LAZ } package "Couche 2 — Vieillissement\n(Article 0110)" as C2 #FFF9C4 { rectangle "**HOT**\n10 sessions actives\n~300 lignes" as HOT rectangle "**WARM**\nRéférences\nProcédures" as WRM rectangle "**COLD**\nbackup/\nVague froide" as CLD HOT -[hidden]right-> WRM WRM -[hidden]right-> CLD } package "Couche 3 — Déclencheur\n(Aujourd'hui)" as C3 #BBDEFB { rectangle "**Auto**\nN % 10 == 0" as AUTO rectangle "**Seuil**\n> 500 lignes" as SEUIL rectangle "**Manuel**\nrotation backup" as MAN AUTO -[hidden]right-> SEUIL SEUIL -[hidden]right-> MAN } C1 --> C2 : "La mémoire grandit\n→ il faut un mécanisme\nde vieillissement" C2 --> C3 : "Le vieillissement\n→ il faut un déclencheur\npour l'exécuter" note bottom of C3 ✅ Déployé sur 6 projets magic-stick · bakery-gradle plantuml-gradle · cheroliv.com jhipster-gradle-plugins quizz-benchmark-gradle end note @enduml ---- Les trois couches s'empilent logiquement. La première donne une mémoire à l'agent. La deuxième empêche cette mémoire d'étouffer l'agent. La troisième automatise la maintenance de cette mémoire pour que l'humain n'ait pas à y penser. === La Migration Effective sur cheroliv.com Le mécanisme n'est pas resté théorique. Sur `cheroliv.com`, la première rotation backup a été exécutée le 29 avril 2026 — les sessions -6 à 2 ont migré vers `.agents/backup/Y2026-sessions-neg6-a-002/` : |=== |Fichier |Avant rotation |Après rotation |Gain |`.agents/INDEX.adoc` |19 sessions listées |10 sessions (3-12) |-9 entrées |`.agents/SESSIONS_HISTORY.adoc` |18 sessions |10 sessions |-8 entrées |`COMPLETED_TASKS_ARCHIVE` |161 lignes (sessions 1-12) |135 lignes (sessions 3-12) |-26 lignes |`sessions/` |20 fichiers |10 fichiers |-10 fichiers |**backup/** |Inexistant |1 vague froide (10 sessions archivées) |+1 paquet froid |=== Le gain en lignes était modeste — le projet est jeune, 12 sessions — mais l'important est que le **mécanisme est en place**. La prochaine rotation automatique se déclenchera à la session 20, ou plus tôt si les 500 lignes EAGER sont atteintes. == La Leçon Humain-Agent Cette session 048 m'a appris quelque chose de fondamental sur la collaboration avec un agent IA. L'agent a un biais naturel : il cherche à **optimiser**, à **simplifier**, à **éliminer les redondances**. C'est le biais d'un système entraîné à produire des réponses propres et concises. Face à un dataset riche et multidimensionnel, son premier réflexe est de le réduire à sa plus simple expression. L'humain, lui, a une intuition différente : il pressent que la redondance structurée est un **atout**, pas un défaut. Que la diversité des angles sur une même réalité est précisément ce qui permettra, plus tard, une distillation de qualité. Ce n'est pas que l'agent a tort. C'est que son "optimum" n'est pas le mien. L'agent optimise pour le **présent** — le contexte immédiat, la réponse rapide à la question posée. L'humain optimise pour le **futur** — la capacité à retrouver, croiser, distiller dans trois mois ou trois ans. ____ Ce que je veux, c'est le matériel brut. Tes réflexions, tes hésitations, tes réponses à mes questions. Pas ta synthèse. La synthèse, je sais la faire mieux que toi. Je veux la matière première. ____ Cette phrase que je lui ai dite en fin de session résume tout. L'agent est un outil de production. L'humain est l'outil de distillation. La gouvernance n'est pas faite pour que l'agent comprenne tout tout seul — elle est faite pour que l'humain puisse, plus tard, travailler le matériau produit. La vague froide identique est la traduction architecturale de cette philosophie : on ne jette rien, on ne fusionne rien, on ne réindexe rien. On déplace le paquet intact. La distillation viendra plus tard, à la main, par l'humain. == La Suite Logique de l'Article Précédent Si vous avez lu link:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[l'article sur la stratégie Eager/Lazy], vous reconnaîtrez la progression naturelle : 1. **Article 0108** — La gouvernance Eager/Lazy : *comment* structurer le contexte agent en deux niveaux de disponibilité 2. **Cet article 0110** — Le mécanisme de backup : *comment* faire vieillir ce contexte sans le perdre quand il devient trop volumineux Le premier article répondait à la question : « L'agent ne se souvient de rien entre deux sessions, comment lui donner une mémoire ? » Celui-ci répond à la question qui découle inévitablement de la première : « La mémoire grossit à chaque session, comment l'empêcher d'étouffer l'agent sans l'effacer ? » La réponse tient en un pattern : **Hot/Warm/Cold**, appliqué aux fichiers de gouvernance. Et en un principe : **ne jamais rien perdre, toujours tout relocaliser**. == Liens * Article précédent : link:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Gouverner un Agent IA avec du AsciiDoc] * Mon site : https://cheroliv.com * Le projet `magic-stick` : https://github.com/cheroliv/magic-stick --- *Un bon système de gouvernance ne supprime jamais de données. Il les range.*</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0109_gradle_jhipster_docker_testcontainers_debugging_post.html Sat, 25 Apr 2026 00:00:00 +0000 blog/2026/0109_gradle_jhipster_docker_testcontainers_debugging_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_la_scène_un_projet_jhipster_un_build_qui_ne_charge_plus">La scène : un projet JHipster, un build qui ne charge plus</a></li> <li><a href="#_erreur_1_la_variable_fantôme_reportsdir">Erreur 1 : la variable fantôme <code>reportsDir</code></a></li> <li><a href="#_erreur_2_main_nexiste_plus_sous_gradle_9">Erreur 2 : <code>main = "…​"</code> n’existe plus sous Gradle 9</a></li> <li><a href="#_erreur_3_sourcecompatibility_nest_plus_une_propriété_de_projet">Erreur 3 : <code>sourceCompatibility</code> n’est plus une propriété de projet</a></li> <li><a href="#_erreur_4_lassertion_groovy_à_trois_opérandes">Erreur 4 : l’assertion Groovy à trois opérandes</a></li> <li><a href="#_erreur_5_la_dépendance_implicite_compilekotlin_openapigenerate">Erreur 5 : la dépendance implicite <code>compileKotlin</code> → <code>openApiGenerate</code></a></li> <li><a href="#_erreur_6_generategitproperties_casse_sur_filteroutputstream_write">Erreur 6 : <code>generateGitProperties</code> casse sur <code>FilterOutputStream.write()</code></a></li> <li><a href="#_enfin_testcontainers_entre_en_scène">Enfin : Testcontainers entre en scène</a></li> <li><a href="#_phase_1_la_piste_docker_java">Phase 1 : la piste docker-java</a></li> <li><a href="#_phase_2_recherche_web_et_fil_dariane_github">Phase 2 : recherche web et fil d’ariane GitHub</a></li> <li><a href="#_phase_3_le_piège_des_artifacts_renommés">Phase 3 : le piège des artifacts renommés</a></li> <li><a href="#_phase_4_forcer_la_résolution">Phase 4 : forcer la résolution</a></li> <li><a href="#_résultat_final">Résultat final</a></li> <li><a href="#_tableau_récapitulatif_des_corrections">Tableau récapitulatif des corrections</a></li> <li><a href="#_conclusion">Conclusion</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 15 minutes</div> <p>Vous avez déjà connu ce moment où un simple <code>./gradlew build</code> que vous lancez cent fois par jour se met soudain à planter sur une erreur jamais vue ? Multipliez ça par onze erreurs successives, ajoutez une bonne dose d’incompatibilité Docker Engine 29, saupoudrez de Gradle 9 qui fait disparaître des API qu’on utilisait depuis dix ans. Voici le carnet de bord complet.</p> </div> <hr> <div class="paragraph"> <div class="title">Diagramme 1 — Migration Gradle 9 (chaîne d’erreurs)</div> <p>Objectif : montrer la série d’incompatibilités.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-6215da1a3f4f27918205b5c8ff34a48c.png" alt="Diagram" width="579" height="106"> </div> <div class="title">Figure 1. 👉 Clair, centré sur Gradle.</div> </div> <hr> <div class="paragraph"> <div class="title">Diagramme 2 — Plugins JHipster incompatibles</div> <p>Objectif : isoler les plugins cassés.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-07ed01d932957e366cd8fed4b8aee2a3.png" alt="Diagram" width="569" height="123"> </div> <div class="title">Figure 2. 👉 Vision propre des dépendances.</div> </div> <hr> <div class="paragraph"> <div class="title">Diagramme 3 — Docker 29 / Testcontainers</div> <p>Objectif : problème runtime.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-544e3a93289a5db5b898714292d384f4.png" alt="Diagram" width="788" height="123"> </div> <div class="title">Figure 3. 👉 Histoire claire du runtime.</div> </div> <hr> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-5d4d1754844f7121ef284aa0cc588011.png" alt="Diagram" width="1072" height="193"> </div> <div class="title">Figure 4. une autre maniere de se le representer</div> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_un_projet_jhipster_un_build_qui_ne_charge_plus">La scène : un projet JHipster, un build qui ne charge plus</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le projet <code>edster</code> est une application JHipster générée en 2024. Le build script racine <code>build.gradle</code> est resté stable pendant des mois. Puis on décide de monter en version :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1428%;"> <col style="width: 7.1436%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Composant</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Version cible</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">9.4.1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21.0.11-tem (Eclipse Temurin)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JHipster</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8.x (framework <code>tech.jhipster:jhipster-framework:8.11.0</code>)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Spring Boot</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3.4.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2.3.0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Docker Engine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">29.4.1 (API 1.54)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le changement de version Java passe via SDKMAN :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sdk use java 21.0.11-tem</code></pre> </div> </div> <div class="paragraph"> <p>Premier lancement :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build --no-daemon FAILURE: Build failed with an exception. * Where: Build file '/home/.../edster/build.gradle' line: 18 * What went wrong: An exception occurred applying plugin request [id: 'jhipster.cucumber-conventions'] > Failed to apply plugin 'jhipster.cucumber-conventions'. > Could not create task ':cucumberTest'. > Could not create task ':consoleLauncherTest'. > Could not set unknown property 'reportsDir' for task ':consoleLauncherTest'</code></pre> </div> </div> <div class="paragraph"> <p>On ne décolle même pas du chargement du build script. Le problème est dans <code>buildSrc/src/main/groovy/jhipster.cucumber-conventions.gradle</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_1_la_variable_fantôme_reportsdir">Erreur 1 : la variable fantôme <code>reportsDir</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Le script <code>jhipster.cucumber-conventions.gradle</code> contient :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">tasks.register('consoleLauncherTest', JavaExec) { dependsOn(testClasses) String cucumberReportsDir = file("$buildDir/reports/tests") outputs.dir(reportsDir) // <-- reportsDir n'existe PAS classpath = sourceSets["test"].runtimeClasspath main = "org.junit.platform.console.ConsoleLauncher" // ... }</code></pre> </div> </div> <div class="paragraph"> <p>La variable définie est <code>cucumberReportsDir</code>. Celle utilisée est <code>reportsDir</code> — qui n’est définie nulle part.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> : <code>outputs.dir(cucumberReportsDir)</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_2_main_nexiste_plus_sous_gradle_9">Erreur 2 : <code>main = "…​"</code> n’existe plus sous Gradle 9</h2> <div class="sectionbody"> <div class="paragraph"> <p>Relance immédiate :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Could not set unknown property 'main' for task ':consoleLauncherTest' of type org.gradle.api.tasks.JavaExec.</code></pre> </div> </div> <div class="paragraph"> <p>Gradle 9 supprime la propriété <code>main</code> au profit de <code>mainClass</code> sur les tâches <code>JavaExec</code>.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> : <code>mainClass = "org.junit.platform.console.ConsoleLauncher"</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_3_sourcecompatibility_nest_plus_une_propriété_de_projet">Erreur 3 : <code>sourceCompatibility</code> n’est plus une propriété de projet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nouvelle erreur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Could not set unknown property 'sourceCompatibility' for root project 'edster' of type org.gradle.api.Project.</code></pre> </div> </div> <div class="paragraph"> <p>Le script racine avait :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">sourceCompatibility=17 targetCompatibility=17</code></pre> </div> </div> <div class="paragraph"> <p>Gradle 9 supprime ces propriétés au niveau root. Elles doivent vivre dans un bloc <code>java</code>.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">java { sourceCompatibility = JavaVersion.VERSION_21 targetCompatibility = JavaVersion.VERSION_21 }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_4_lassertion_groovy_à_trois_opérandes">Erreur 4 : l’assertion Groovy à trois opérandes</h2> <div class="sectionbody"> <div class="paragraph"> <p>L’ancien script contenait :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">assert System.properties["java.specification.version"] == "17" || "21" || "24"</code></pre> </div> </div> <div class="paragraph"> <p>En Groovy, <code>"21"</code> et <code>"24"</code> sont des strings truthy. L’expression résout en <code>(…​ == "17") || true || true</code>, ce qui est toujours vraie — mais la syntaxe est invalide pour l’assertion stricte souhaitée.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">assert System.properties["java.specification.version"] in ["17", "21", "23", "24"]</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_5_la_dépendance_implicite_compilekotlin_openapigenerate">Erreur 5 : la dépendance implicite <code>compileKotlin</code> → <code>openApiGenerate</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>Le build progresse. Compilation Kotlin réussie. Puis :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Task ':compileKotlin' uses this output of task ':openApiGenerate' without declaring an explicit or implicit dependency.</code></pre> </div> </div> <div class="paragraph"> <p>Gradle 9 refuse les dépendances implicites entre tâches. Puisque <code>compileKotlin</code> lit les sources générées par <code>openApiGenerate</code>, il faut déclarer le lien.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> dans <code>build.gradle</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">afterEvaluate { tasks.named("compileKotlin").configure { dependsOn(tasks.named("openApiGenerate")) } }</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>afterEvaluate</code> est nécessaire car <code>openApiGenerate</code> est une extension (plugin OpenAPI Generator) et non une tâche directement accessible pendant la phase de configuration.</p> </div> </div> </div> <div class="sect1"> <h2 id="_erreur_6_generategitproperties_casse_sur_filteroutputstream_write">Erreur 6 : <code>generateGitProperties</code> casse sur <code>FilterOutputStream.write()</code></h2> <div class="sectionbody"> <div class="paragraph"> <p>La compilation Java passe. Les ressources sont processées. Puis :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">> Task :generateGitProperties FAILED No signature of method: java.io.FilterOutputStream.write() is applicable for argument types: (Integer) values: [103]</code></pre> </div> </div> <div class="paragraph"> <p>Le plugin <code>gradle-git-properties</code> version 2.5.0 est incompatible avec Java 21 / Gradle 9. Un bug interne tente d’appeler <code>write(int)</code> via Groovy sur un flux qui l’a fermé.</p> </div> <div class="paragraph"> <p><strong>Correction</strong> dans <code>gradle.properties</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties">gitPropertiesPluginVersion=2.5.7</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_enfin_testcontainers_entre_en_scène">Enfin : Testcontainers entre en scène</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jusqu’ici, c’était du "build script debugging" pur. Chaque erreur était une incompatibilité Gradle 9 ou Java 21 dans les scripts de build. Après les six corrections ci-dessus, le <code>./gradlew assemble</code> passe avec succès.</p> </div> <div class="paragraph"> <p>Mais <code>./gradlew build</code> exécute aussi les tests, et les tests Cucumber utilisent Testcontainers pour lancer un PostgreSQL éphémère.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">Could not find a valid Docker environment. EnvironmentAndSystemPropertyClientProviderStrategy: failed with exception BadRequestException (Status 400: {"message":"client version 1.32 is too old. Minimum supported API version is 1.40"} UnixSocketClientProviderStrategy: failed with exception BadRequestException (Status 400: {"message":"client version 1.32 is too old. Minimum supported API version is 1.40"}</code></pre> </div> </div> <div class="paragraph"> <p>Testcontainers est incapable de communiquer avec Docker. Deux stratégies différentes (variables d’environnement + socket Unix) échouent sur la même erreur.</p> </div> <div id="diag-docker-handshake" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-f31d9e10795d818ce3068413fb5fdd1e.svg" alt="Handshake Docker API refusé par le daemon" width="731" height="616"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_1_la_piste_docker_java">Phase 1 : la piste docker-java</h2> <div class="sectionbody"> <div class="paragraph"> <p>Premier réflexe : le client Docker Java utilisé par Testcontainers envoie la version API <code>1.32</code> dans son handshake HTTP, mais Docker Engine 29.4.1 exige un minimum de <code>1.40</code>. Le problème est au niveau du client, pas du daemon.</p> </div> <div class="paragraph"> <p>Vérification de la version de docker-java résolue par Testcontainers 1.20.6 :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew dependencies --configuration testRuntimeClasspath | grep docker-java +--- com.github.docker-java:docker-java-api:3.4.1 +--- com.github.docker-java:docker-java-transport:3.4.1</code></pre> </div> </div> <div class="paragraph"> <p>docker-java 3.4.1, datant de Testcontainers 1.20.6. La dernière version publique de docker-java est 3.5.1. Tentons de forcer la montée de version via <code>resolutionStrategy</code> dans le bloc <code>configurations</code> de <code>build.gradle</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">configurations { all { resolutionStrategy.eachDependency { details -> if (details.requested.group == "com.github.docker-java" && details.requested.name.startsWith("docker-java")) { details.useVersion("3.5.1") } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Relance du build. Même erreur : <code>client version 1.32 is too old</code>.</p> </div> <div class="paragraph"> <p>Vérification du cache Gradle : les JARs ont bien été re-téléchargés, mais l’erreur persiste. docker-java 3.5.1 envoie toujours <code>1.32</code>. Cette version n’est donc PAS suffisante pour Docker Engine 29.4.1.</p> </div> <div class="paragraph"> <p><strong>Action de purification</strong> : vider complètement le cache Gradle, juste pour être sûr :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">rm -rf ~/.gradle/caches rm -rf /path/to/project/.gradle</code></pre> </div> </div> <div class="paragraph"> <p>Relance complète après purge. Même erreur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_phase_2_recherche_web_et_fil_dariane_github">Phase 2 : recherche web et fil d’ariane GitHub</h2> <div class="sectionbody"> <div class="paragraph"> <p>docker-java 3.5.1 est insuffisant. Ne reste plus qu’à chercher si quelqu’un a rencontré ce problème exact.</p> </div> <div class="paragraph"> <p>Recherche ciblée sur les issues testcontainers-java et docker-java :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">site:github.com/testcontainers "client version 1.32 is too old" site:github.com/docker-java "client version 1.32" Docker Engine 29</code></pre> </div> </div> <div class="paragraph"> <p>Premiers résultats immédiats :</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://github.com/testcontainers/testcontainers-java/issues/11210">testcontainers-java#11210</a> — <code>[Bug]: client version 1.32 is too old. Minimum supported API version is 1.44</code></p> </li> <li> <p><a href="https://github.com/testcontainers/testcontainers-java/issues/11212">testcontainers-java#11212</a> — <code>[Bug]: Docker 29.0.0 could not find a valid Docker environment</code></p> </li> <li> <p><a href="https://github.com/testcontainers/testcontainers-java/issues/11491">testcontainers-java#11491</a> — <code>[Bug]: Incompatibility in Ubuntu Github runners with Docker Engine 29.1.*</code></p> </li> </ul> </div> <div class="paragraph"> <p>Le fil d’Ariane est clair : Docker Engine 29.x a élevé son minimum API version de <code>1.24</code> (ancien défaut) à <code>1.40</code>. Testcontainers 1.20.x utilise docker-java 3.4.x qui négocie la version API en envoyant <code>1.32</code>. Le daemon refuse poliment mais fermement.</p> </div> <div class="paragraph"> <p>Dans l’issue #11491, un mainteneur répond :</p> </div> <div class="paragraph"> <p><em><em>_ Hi, I have a project running with version 2.0.3 on a GH runner with engine 29.1 and it works. Can you all please check there is no version conflict? Please, remember all modules were prefixed with <code>testcontainers-</code>. So, starting with version 2.x we went from <code>postgresql</code> to <code>testcontainers-postgresql</code> </em>_</em></p> </div> <div class="paragraph"> <p>Cette réponse contient <strong>deux informations critiques</strong> :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Testcontainers 2.0.3+ résout le problème</p> </li> <li> <p>Les modules ont été <strong>renommés avec le préfixe <code>testcontainers-</code></strong></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_phase_3_le_piège_des_artifacts_renommés">Phase 3 : le piège des artifacts renommés</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le renommage est brutal. En Testcontainers 2.x, plus aucun des anciens noms ne fonctionne sous ce nom-là :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Ancien nom (1.x)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nouveau nom (2.x)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:postgresql</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:testcontainers-postgresql</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:jdbc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:testcontainers-jdbc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:junit-jupiter</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:testcontainers-junit-jupiter</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>org.testcontainers:testcontainers</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">inchangé</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Première tentative : appliquer la BOM Testcontainers 2.0.5 et les nouveaux noms d’artifacts dans <code>build.gradle</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">dependencies { testImplementation platform("org.testcontainers:testcontainers-bom:2.0.5") testImplementation "org.testcontainers:testcontainers-postgresql" testImplementation "org.testcontainers:testcontainers-jdbc" testImplementation "org.testcontainers:testcontainers-junit-jupiter" testImplementation "org.testcontainers:testcontainers" }</code></pre> </div> </div> <div class="paragraph"> <p><code>./gradlew build</code></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">FAILURE: Could not find org.testcontainers:jdbc:2.0.5. Could not find org.testcontainers:junit-jupiter:2.0.5.</code></pre> </div> </div> <div class="paragraph"> <p><strong>Le BOM de testcontainers-bom ne suffit pas.</strong> Pourquoi ? Parce que Spring Boot 3.4.5 expose son propre BOM de gestion de dépendances (<code>spring-boot-dependencies</code>) qui <strong>gagne</strong> sur le BOM de Testcontainers dans la résolution transitive. Spring Boot fixe <code>testcontainers</code> à <code>1.20.6</code>, et donc tous les artifacts qui ne sont pas explicitement dans le BOM Spring Boot (comme les nouveaux <code>testcontainers-*</code>) résolvent vers les anciens noms <code>1.20.6</code> — qui n’existent plus dans cette version.</p> </div> <div class="paragraph"> <p>En inspectant le <code>dependencies --configuration testRuntimeClasspath</code>, on trouve :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">+--- org.testcontainers:testcontainers -> 1.20.6 (*) | \--- org.testcontainers:testcontainers:2.0.5 -> 1.20.6</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>→</code> indique la substitution : Testcontainers 2.0.5 est <strong>demandé</strong>, mais Spring Boot force <code>1.20.6</code>.</p> </div> <div id="diag-bom-war" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-714056a094f875d4bd0cf8db572918d3.svg" alt="Conflit entre le BOM Spring Boot et le BOM Testcontainers" width="1111" height="321"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_4_forcer_la_résolution">Phase 4 : forcer la résolution</h2> <div class="sectionbody"> <div class="paragraph"> <p>La stratégie devient double :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Forcer docker-java à sa version 3.7.1 (testée comme compatible Docker Engine 29)</p> </li> <li> <p>Forcer Testcontainers core à 2.0.5 en contournant le BOM Spring Boot</p> </li> </ol> </div> <div id="diag-resolution-override" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-0e6edf1a58135d9df65ae14483179ddf.svg" alt="resolutionStrategy.eachDependency court-circuite le BOM Spring Boot" width="1103" height="468"> </div> </div> <div class="paragraph"> <p><strong>Correction finale</strong> dans <code>build.gradle</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">configurations { all { resolutionStrategy.eachDependency { details -> if (details.requested.group == "com.github.docker-java" && details.requested.name.startsWith("docker-java")) { details.useVersion("3.7.1") } if (details.requested.group == "org.testcontainers" && details.requested.name == "testcontainers") { details.useVersion("2.0.5") } } } } dependencies { testImplementation platform("org.testcontainers:testcontainers-bom:2.0.5") testImplementation "org.testcontainers:testcontainers-jdbc" testImplementation "org.testcontainers:testcontainers-junit-jupiter" testImplementation "org.testcontainers:testcontainers-postgresql" testImplementation "org.testcontainers:testcontainers" // ... autres dépendances Spring Boot }</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>resolutionStrategy.eachDependency</code> est le seul moyen d’outrepasser le BOM <code>spring-boot-dependencies</code> géré par le plugin Spring Boot. Le test d’égalité sur <code>details.requested.name == "testcontainers"</code> est volontairement restrictif : on ne force que le module core. Les modules <code>testcontainers-*</code> suivent le BOM de Testcontainers 2.0.5 qu’on a explicitement déclaré.</p> </div> </div> </div> <div class="sect1"> <h2 id="_résultat_final">Résultat final</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build --no-daemon > Task :consoleLauncherTest [2 containers found] [2 containers started] [2 containers successful] BUILD SUCCESSFUL in 1m 16s</code></pre> </div> </div> <div class="paragraph"> <p>Testcontainers 2.0.5 + docker-java 3.7.1 parviennent enfin à créer leurs containers PostgreSQL via Docker Engine 29.4.1. L’erreur métier finale (HTTP 500 sur le test Cucumber) est un problème applicatif totalement indépendant du build script.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tableau_récapitulatif_des_corrections">Tableau récapitulatif des corrections</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">#</th> <th class="tableblock halign-left valign-top">Fichier</th> <th class="tableblock halign-left valign-top">Problème</th> <th class="tableblock halign-left valign-top">Correction</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>buildSrc/src/main/groovy/jhipster.cucumber-conventions.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Variable <code>reportsDir</code> inexistante</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>outputs.dir(cucumberReportsDir)</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>buildSrc/src/main/groovy/jhipster.cucumber-conventions.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>main</code> déprécié Gradle 9</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>mainClass</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>build.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>sourceCompatibility</code> top-level interdit Gradle 9</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bloc <code>java { sourceCompatibility = JavaVersion.VERSION_21 }</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>build.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Assertion Groovy syntaxiquement invalide</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>assert …​ in ["17", "21", "23", "24"]</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>build.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dépendance implicite <code>compileKotlin</code> → <code>openApiGenerate</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>afterEvaluate { tasks.named("compileKotlin").dependsOn("openApiGenerate") }</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>gradle.properties</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>gitPropertiesPluginVersion</code> incompatible Java 21</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2.5.7</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cache Gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">docker-java 3.5.1 testé, résolu mais insuffisant</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Purge + passage docker-java 3.7.1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">8</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>build.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Testcontainers 1.20.6 incompatible Docker Engine 29</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Forçage Testcontainers 2.0.5 + prefix <code>testcontainers-*</code> + resolutionStrategy vs Spring Boot BOM</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Si votre build JHipster/Gradle plante après une montée de version vers Gradle 9 + Docker Engine 29, les erreurs se répartissent en deux catégories :</p> </div> <div class="paragraph"> <p><strong>Erreurs de build script</strong> (les 6 premières) : Gradle 9 supprime des propriétés et des syntaxes qui marchaient depuis des années (<code>sourceCompatibility=</code>, <code>main =</code>, <code>reportsDir</code>). Ce sont des migrations mécaniques une fois qu’on connaît la nouvelle API.</p> </div> <div class="paragraph"> <p><strong>Erreurs de runtime Docker</strong> (les 2 dernières) : Docker Engine 29.4.1 écarte les clients API < 1.40. Testcontainers 1.20.6 (imposé par Spring Boot 3.4.5) utilise docker-java 3.4.1 qui envoie 1.32. Seul Testcontainers 2.0.5 + docker-java 3.7.1 résout le problème, avec le renommage des artifacts et le forçage de version via <code>resolutionStrategy.eachDependency</code> comme seul moyen de contourner le BOM implicite de Spring Boot.</p> </div> <div class="paragraph"> <p>Le build script Gradle à la racine du projet est maintenant propre. <code>./gradlew build</code> passe sur Java 21, Gradle 9.4.1, Spring Boot 3.4.5 et Docker Engine 29.4.1.</p> </div> </div> </div> https://cheroliv.com/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html Fri, 24 Apr 2026 00:00:00 +0000 blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html <div class="sect1"> <h2 id="_résumé">Résumé</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand on travaille avec un agent IA comme Opencode sur des projets complexes sur plusieurs sessions, on fait face à un problème fondamental : <strong>la fuite de contexte</strong>. L’agent ne se souvient pas de la session précédente. Tout ce qu’on lui a expliqué — l’architecture, les conventions, l’état du backlog — est perdu. Reconstruire ce contexte à chaque session est coûteux, lent et source d’erreur.</p> </div> <div class="paragraph"> <p>Cet article expose la stratégie artisanale que j’ai construite pour résoudre ce problème : un système de gouvernance persistant basé sur des fichiers AsciiDoc, avec une dichotomie <strong>Eager/Lazy</strong> pour optimiser la consommation du token de contexte, et une <strong>procédure de fin de session incontournable</strong> pour assurer la continuité.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_lundi_21_avril_9h00">La Scène : Lundi 21 Avril, 9h00</h2> <div class="sectionbody"> <div class="paragraph"> <p>Je rouvre Opencode pour reprendre mon plugin Gradle <code>plantuml-plugin</code>. Hier soir, j’ai passé trois heures à discuter avec l’agent de l’architecture du pool de clés API — rotation round-robin, gestion des quotas, fallback automatique. Ce matin, l’agent me regarde avec des yeux de poisson rouge.</p> </div> <div class="paragraph"> <p><em><em>_ — Bonjour, je suis votre assistant Opencode. Comment puis-je vous aider aujourd’hui ? </em>_</em></p> </div> <div class="paragraph"> <p>Pas de — Ah oui, le pool de clés API, on en était à la structure YAML. Pas de — Attention, <code>PlantumlManager</code> est un objet Kotlin singleton, pas une classe. Pas de — Non, on a décidé hier que <code>SyntaxValidationResult</code> restait une sealed class nested dans <code>PlantumlService</code>.</p> </div> <div class="paragraph"> <p>Tout est à refaire. Ou plutôt : tout est à réexpliquer. Je vais passer les vingt premières minutes de ma session à reconstituer un contexte que l’agent a déjà eu entre les mains hier. Vingt minutes de tokens brûlés. Vingt minutes où je pourrais coder, mais où je fais du pédagogique obligatoire.</p> </div> <div class="paragraph"> <p>Ce n’est pas un bug d’Opencode. C’est la nature même des LLM conversationnels : entre deux sessions, la mémoire de travail est <strong>entièrement effacée</strong>. L’agent ne se souvient pas de la mission précédente, des décisions prises, des pièges identifiés, du code qu’on a écrit ensemble.</p> </div> <div class="paragraph"> <p>J’ai vécu ça des dizaines de fois. Sur quatre projets simultanés. Avec des sessions qui s’enchaînent sur des semaines. J’ai calculé : en moyenne, <strong>30 à 40 % du temps de session</strong> était consacré à recontextualiser l’agent. À la session 87 du projet <code>plantuml-plugin</code>, j’ai craqué. Je ne pouvais plus me permettre de réexpliquer pour la dixième fois que <code>AttemptEntry</code> est une data class top-level dans <code>DiagramProcessor.kt</code>.</p> </div> <div class="paragraph"> <p>Il me fallait un système. Pas un hack. Une vraie gouvernance.</p> </div> </div> </div> <div class="sect1"> <h2 id="_la_genèse_du_chaos_à_la_méthode">La Genèse : Du Chaos à la Méthode</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_les_premières_sessions_lâge_des_ténèbres">Les Premières Sessions : L’Âge des Ténèbres</h3> <div class="paragraph"> <p>Mon premier projet avec Opencode, <code>plantuml-plugin</code>, a démarré sans aucune gouvernance. Je pose une question, l’agent répond, on itère, la session se termine, et le lendemain on repart de zéro. C’était la session 1, puis la 2, puis la 3…​ jusqu’à la session 62 où je réalise que j’ai perdu des heures cumulées à réexpliquer la même architecture.</p> </div> <div class="paragraph"> <p>À la session 62, les chiffres sont là : <strong>198 tests unitaires passent</strong>, <strong>42 tests fonctionnels validés</strong>, le plugin fonctionne. Mais le coût cognitif est insupportable. Chaque nouvelle session commence par un monologue de vingt minutes sur la structure du projet.</p> </div> </div> <div class="sect2"> <h3 id="_lépisode_du_site_yml_détruit_session_2_bakery_plugin">L’Épisode du site.yml Détruit (Session 2, bakery-plugin)</h3> <div class="paragraph"> <p>La méthode naît aussi d’une catastrophe. Sur le projet <code>bakery-gradle</code>, à la session 2, je demande à l’agent de modifier le fichier <code>site.yml</code>. L’agent, sans vérifier si le fichier est versionné, fait un <code>Write</code> complet qui écrase le contenu. Résultat : les tokens réels (clés API Firebase, secrets de déploiement) sont remplacés par des placeholders factices. Le fichier n’était pas dans git — il était dans <code>.gitignore</code> pour protéger les secrets.</p> </div> <div class="paragraph"> <p>Sans sauvegarde. Sans <code>git restore</code> possible. Je suis bloqué. Il me faut reconstruire manuellement le fichier de configuration, retrouver les tokens dans mes gestionnaires de mots de passe, tout recoller.</p> </div> <div class="paragraph"> <p>C’est de cette frustration que naît la <strong>Règle Absolue 1b</strong> :</p> </div> <div class="paragraph"> <p><em><em>_ <strong>NE JAMAIS écraser</strong> un fichier config avec un <code>Write</code> complet quand un <code>Edit</code> partiel suffit. <strong>NE JAMAIS remplacer</strong> des valeurs sensibles par des valeurs factices. <strong>Vérifier <code>git check-ignore</code> et <code>git ls-files</code></strong> avant toute modification. </em>_</em></p> </div> <div class="paragraph"> <p>Cette règle, aujourd’hui gravée dans le marbre de tous mes fichiers <code>AGENT.adoc</code> et <code>INDEX.adoc</code> sur quatre projets, est née d’une erreur réelle qui m’a coûté une heure de travail manuel.</p> </div> </div> <div class="sect2"> <h3 id="_la_migration_markdown_asciidoc_session_1_cheroliv_com">La Migration Markdown → AsciiDoc (Session 1, cheroliv.com)</h3> <div class="paragraph"> <p>Le 25 avril 2026, sur <code>cheroliv.com</code>, je prends une décision radicale : convertir l’intégralité de la gouvernance de Markdown vers AsciiDoc. Ce n’est pas esthétique. C’est fonctionnel. AsciiDoc offre une structure sémantique que les LLM lisent mieux : sections hiérarchiques, tableaux typés, admonitions (<code>NOTE</code>, <code>WARNING</code>, <code>CAUTION</code>), attributs de document lisibles par la machine.</p> </div> <div class="paragraph"> <p>La session 1 de <code>cheroliv.com</code> formalise la structure :</p> </div> <div class="ulist"> <ul> <li> <p>Conversion de <code>AGENTS.md</code> en <code>AGENT.adoc</code></p> </li> <li> <p>Création des agents spécialisés : <code>CODER.adoc</code>, <code>SCRUM_MASTER.adoc</code>, <code>PLANTUML_DESIGNER.adoc</code></p> </li> <li> <p>Création de la structure Eager/Lazy : <code>INDEX.adoc</code>, <code>SESSIONS_HISTORY.adoc</code>, <code>AGENT_SESSION_MANAGER.adoc</code>, <code>SESSION_CHECKLIST.adoc</code>, <code>PROCEDURES.adoc</code></p> </li> </ul> </div> <div class="paragraph"> <p>Un seul commit : <code>90975e9 refactor: migrate agent governance from Markdown to AsciiDoc</code>. Et le site continue de fonctionner.</p> </div> <div id="diag-timeline" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-1ffbad829836ed4bec6c66e6b3038145.svg" alt="Timeline de croissance des sessions sur les 4 projets" width="2373" height="290"> </div> </div> <div class="paragraph"> <p>La timeline ci-dessus illustre la progression réelle. Le point de bascule est la session 87 : c’est là que la frustration du recontextualisation répétée dépasse le seuil de tolérance, et que la méthode Eager/Lazy cesse d’être une idée pour devenir une obligation.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_stratégie_eagerlazy_en_profondeur">La Stratégie : Eager/Lazy en Profondeur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_philosophie_cache_informatique_appliqué_à_la_cognition">Philosophie : Cache Informatique Appliqué à la Cognition</h3> <div class="paragraph"> <p>Mon approche s’inspire directement de la gestion de cache informatique. Tout ce qui est <strong>critique et fréquemment utilisé</strong> doit être immédiatement accessible (<strong>Eager</strong>). Tout ce qui est <strong>contextuel ou volumineux</strong> doit être chargé sur demande (<strong>Lazy</strong>).</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6666%;"> <col style="width: 6.6676%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Eager (Tableau de Bord)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lazy (Manuel du Propriétaire)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Taille</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">< 100 lignes, < 10k tokens</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Illimité, détaillé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Chargement</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Auto, en début de session</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sur demande de l’agent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Contenu</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Règles absolues, mission courante, état critique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Archives de sessions, historique complet, procédures détaillées, références techniques</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Rôle</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Orienter immédiatement l’agent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Répondre aux questions de contexte profond</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_les_fichiers_eager_le_tableau_de_bord">Les Fichiers Eager : Le Tableau de Bord</h3> <div class="paragraph"> <p>Ces fichiers vivent à la racine de chaque projet et sont chargés automatiquement par l’agent au début de chaque session. Ils forment le <strong>tableau de bord</strong> — information critique, immédiatement accessible.</p> </div> <div id="diag-eager-lazy" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-05c08d0c2b5bf285c4c1fee60314a0e7.svg" alt="Architecture Eager/Lazy des fichiers de gouvernance" width="1761" height="5760"> </div> </div> <div class="paragraph"> <p><strong><code>AGENT.adoc</code></strong> — Le fichier maître. Sur <code>cheroliv.com</code>, il fait 200 lignes et contient :</p> </div> <div class="ulist"> <ul> <li> <p>Les règles absolues du projet (pas de commit sans permission, pas de <code>rm</code> sans confirmation)</p> </li> <li> <p>La structure du projet et les conventions de code</p> </li> <li> <p>Les commandes essentielles (<code>./gradlew serve</code>, <code>./gradlew test</code>)</p> </li> <li> <p>Les épopées et le backlog produit (user stories priorisées)</p> </li> <li> <p>Les critères de qualité transverses (accessibilité, responsive, compatibilité)</p> </li> </ul> </div> <div class="paragraph"> <p>Sur <code>bakery-plugin</code>, la Règle 0 est différente : <strong><code>./gradlew -q publishToMavenLocal</code> obligatoire après chaque modification du code source</strong>. Parce que tester le plugin sans republier le JAR local m’a fait perdre une heure à débugger un code qui n’était pas encore empaqueté.</p> </div> <div class="paragraph"> <p><strong><code>PROMPT_REPRISE.adoc</code></strong> — La mission de la session en cours. Mis à jour à chaque fin de session, il contient :</p> </div> <div class="ulist"> <ul> <li> <p>Le numéro de session et la mission prioritaire</p> </li> <li> <p>Le résumé de la session précédente (ce qui a été fait, ce qui reste à faire)</p> </li> <li> <p>Les critères d’acceptation de la session courante</p> </li> <li> <p>Les rappels techniques spécifiques</p> </li> </ul> </div> <div class="paragraph"> <p><strong><code>.agents/INDEX.adoc</code></strong> — Le point d’entrée. Il résume les règles absolues, les sessions récentes, et surtout le <strong>portefeuille de projets</strong> gérés avec la même méthodologie. À ce jour, cinq projets y figurent :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- | magic-stick | Session 23 | SCRIPT_VERIFICATION.adoc | 2026-04-27 | | bakery-gradle | Session 11 | TEST_COVERAGE_ANALYSIS | 2026-04-27 | | cheroliv.com | Session 9 | TEST_COVERAGE_ANALYSIS | 2026-04-27 | | plantuml-gradle| Session 133| TEST_COVERAGE_ANALYSIS | 2026-04-23 | | jhipster-gradle-plugins | Session 1 | TEST_COVERAGE_ANALYSIS | 2026-04-28 | ---- **`*_ESSENTIALS.adoc`** -- Un ajout récent (Session 109, plantuml-plugin) pour optimiser encore le contexte Eager. Au lieu de charger 200 lignes de contexte métier sur le pool de clés API, je charge 50 lignes de l'essentiel, et les 150 autres lignes restent en LAZY dans `*_REFERENCE.adoc`. Résultat mesuré : passage de **~25k tokens EAGER à ~10k tokens** (gain de 60%). L'agent n'a plus besoin de rappels énergivores. ==== Le Chaînon Manquant : `opencode.json` Je dois vous avouer une chose que j'ai failli oublier de documenter. Au-dessus de tous ces fichiers .adoc, il y a un minuscule fichier JSON sans lequel rien ne fonctionne. Il s'appelle `opencode.json` et il fait six lignes. Littéralement six lignes. [source,json] ---- { "$schema": "https://opencode.ai/config.json", "instructions": [ "AGENT.adoc" ] } ---- C'est ce fichier qui dit à Opencode : « Au démarrage, charge `AGENT.adoc` automatiquement. » Sans lui, l'agent est une page blanche exactement comme je le décrivais au début de l'article. Avec lui, l'agent a déjà entre les mains les règles absolues, l'architecture du projet, et les commandes essentielles — avant même que je dise bonjour. J'ai découvert l'importance de ce fichier par hasard. Sur `bakery-plugin`, il n'existait pas. Je me demandais pourquoi l'agent était systématiquement plus « perdu » sur ce projet que sur les autres. Les règles absolues étaient bien dans `AGENT.adoc` — mais `AGENT.adoc` n'était jamais chargé. L'agent ne lisait que ce que je lui disais de lire, manuellement, à chaque session. C'était la session 11 de `bakery-plugin` quand j'ai réalisé l'absence du `opencode.json`. Je l'ai créé — et la session 12 a démarré comme les autres. Ce fichier est tellement évident pour moi maintenant que je ne pensais même plus à lui. Une erreur classique du développeur qui connaît trop son outil. Aujourd'hui, je le crée systématiquement *avant* `AGENT.adoc`. C'est la première pierre. ==== La Dualité de `INDEX.adoc` Une autre subtilité qui mérite d'être explicitée : `INDEX.adoc` vit dans `.agents/` — un dossier que j'ai présenté comme LAZY. Pourtant, je le liste comme EAGER dans tous mes tableaux. Il y a une tension apparente ici. La réalité terrain : les fichiers `.agents/INDEX.adoc` sont bien chargés automatiquement en début de session, au même titre que `AGENT.adoc` et `PROMPT_REPRISE.adoc`. Ils sont dans `.agents/` pour des raisons d'organisation — ne pas envahir la racine — mais leur comportement est EAGER. Sur `plantuml-plugin`, `INDEX.adoc` fait 200 lignes et contient les règles absolues *complètes* avec leur historique (les leçons des sessions passées), les EPICs avec scores, et le portefeuille de projets. C'est le document que l'agent consulte pour savoir « où on en est ». Sur `bakery-plugin`, il fait 150 lignes avec la roadmap et les sessions récentes. La redondance volontaire entre `AGENT.adoc` et `INDEX.adoc` peut surprendre. Les règles absolues sont présentes dans les deux. Pourquoi ? Parce qu'elles remplissent deux rôles différents : dans `AGENT.adoc`, elles sont *explicatives* (le storytelling de la règle, la leçon apprise) ; dans `INDEX.adoc`, elles sont *exécutives* (la règle nue, sans justification, pour une consultation rapide). L'agent lit `AGENT.adoc` une fois pour *comprendre* ; il relit `INDEX.adoc` à chaque session pour *appliquer*. Deux usages, deux formats. [plantuml, format=svg, id=diag-dualite-agent-index, alt="Comparaison entre AGENT.adoc (narratif) et INDEX.adoc (exécutif)"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Dualité AGENT.adoc ←→ INDEX.adoc left to right direction rectangle "AGENT.adoc\n(Racine — EAGER)" as AGENT #E3F2FD { rectangle "📖 **Format Narratif**\nLe storytelling de la règle\nla leçon apprise, le contexte" as NARR rectangle "🏗️ **Architecture Complète**\nStructure projet, composants\nBacklog détaillé US" as ARCHI rectangle "📋 **Règles Explicatives**\nPourquoi la règle existe\nHistorique de l'incident" as EXPL } rectangle "INDEX.adoc\n(.agents/ — EAGER)" as INDEX #E8F5E9 { rectangle "⚡ **Format Exécutif**\nLa règle nue, sans justification\nConsultation rapide" as EXEC rectangle "📊 **Roadmap & EPICs**\nTableau récapitulatif\nProgression, Score, Priorité" as ROAD rectangle "🌐 **Portefeuille Projets**\nVue transverse\n5 projets synchronisés" as PORT } AGENT --> INDEX : "Agent lit AGENT.adoc\n1 fois pour **comprendre**" INDEX --> AGENT : "Agent relit INDEX.adoc\nchaque session pour **appliquer**" note bottom of AGENT Taille max : 200 lignes end note note bottom of INDEX Taille max : 200 lignes Source de vérité en cas de divergence end note @enduml ---- Cette redondance assumée est un choix de conception. Elle consomme ~50 lignes supplémentaires de tokens EAGER — mais elle garantit que l'agent a toujours les règles sous les yeux, y compris dans le format concis qui facilite l'obéissance immédiate. === Les Fichiers LAZY : Le Manuel du Propriétaire Ces fichiers vivent dans `.agents/` et ne sont lus que quand l'agent en a besoin. Ils constituent la véritable richesse de la méthode, car ils accumulent la connaissance du projet sans polluer le contexte courant. [plantuml, format=svg, id=diag-agents-tree, alt="Arborescence complète du dossier .agents/"] ---- @startuml skinparam folderBackgroundColor #E3F2FD skinparam folderBorderColor #1565C0 skinparam fileBackgroundColor #FFF3E0 skinparam fileBorderColor #EF6C00 folder ".agents/" as ROOT { file "INDEX.adoc\n(EAGER -- 200 lignes)" as IDX #E8F5E9 file "AGENT_SESSION_MANAGER.adoc\n(Template session)" as ASM file "SESSION_CHECKLIST.adoc\n(Quand changer)" as CHK file "PROCEDURES.adoc\n(6 étapes + LAZY/EAGER)" as PRO file "SESSIONS_HISTORY.adoc\n(Toutes sessions)" as HIS folder "sessions/" as SESS { file "1-chore-migration.adoc" as S1 file "109-formalisation-lazy.adoc" as S109 #FFECB3 file "133-epic11-article.adoc" as S133 file "... +130 autres" as SMORE } folder "archives/" as ARCH { file "COMPLETED_TASKS_2026-04.adoc" as CTA file "SESSIONS_HISTORY_83-95.adoc" as SHIST folder "sessions_summaries/" as SUM { file "SESSION_64_SUMMARY.adoc" as SU64 file "SESSION_73_SUMMARY.adoc" as SU73 file "..." as SUMORE } folder "prompts_archive/" as PARCH { file "PROMPT_REPRISE_S65.adoc" as PR65 file "PROMPT_REPRISE_S75.adoc" as PR75 file "..." as PMORE } } } IDX --> SESS : "Indexe" IDX --> HIS : "Indexe" IDX --> ARCH : "Référence" note right of S109 Session 109 = Formalisation stratégie LAZY/EAGER Token : ~25k → ~10k end note @enduml ---- L'arborescence ci-dessus montre la structure réelle du dossier `.agents/` sur `plantuml-plugin`, le projet le plus mature. Notez la profondeur en trois couches : fichiers racine (métadonnées), dossier `sessions/` (archives chronologiques), et dossier `archives/` (agrégations et résumés). C'est cette profondeur qui transforme la gouvernance d'un simple fichier TODO en une **mémoire organisationnelle complète**. **`.agents/sessions/{N}-{titre}.adoc`** -- Les archives détaillées de chaque session. Actuellement : * `plantuml-plugin` : **133 sessions archivées** (de la session 1 à 133) * `bakery-plugin` : **11 sessions** * `magic-stick` : **23 sessions** * `cheroliv.com` : **9 sessions formelles** + 7 sessions pré-système reconstituées rétroactivement Chaque archive contient le contexte complet de la session, les décisions prises, les problèmes rencontrés et leur résolution, les commandes exécutées et leur output. **`.agents/SESSIONS_HISTORY.adoc`** -- Un tableau récapitulatif de toutes les sessions avec un score. Exemple sur `cheroliv.com` :</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>| -6 | 2025-05 | chore | Initialisation projet Gradle/JBake | 7/10 | 1 | 2026-04-25 | chore | Migration gouvernance agent | 8/10 | 7 | 2026-04-27 | debug/fix | Correction publishSite | 9/10 | 8 | 2026-04-27 | analyse | Analyse article 0108 | 7/10</pre> </div> </div> <div class="paragraph"> <p><strong><code>.agents/COMPLETED_TASKS_ARCHIVE_{mois}.adoc</code></strong> — Les tâches terminées archivées par mois, pour ne pas surcharger le backlog actif. Quand une user story est terminée, elle migre ici. Le backlog reste lisible : maximum 10 items actifs.</p> </div> <div class="paragraph"> <p><strong><code>.agents/PROCEDURES.adoc</code></strong> — Templates détaillés de la procédure de fin de session. Long, mais lu une seule fois par l’agent quand il apprend la méthode. Ensuite, la procédure devient mécanique.</p> </div> <div class="paragraph"> <p><strong><code>.agents/AGENT_MODUS_OPERANDI.adoc</code></strong> — La documentation stratégique complète. Sur <code>plantuml-plugin</code>, ce fichier fait <strong>900+ lignes</strong> et se nomme en réalité <code>AGENT_METHODOLOGIES.adoc</code> — j’ai changé le nom entre l’écriture de cet article et la mise en place effective. Ce genre de divergence de naming est inévitable dans un système artisanal qui évolue. L’important est la convention de nommage : si le fichier documente la <strong>méthode</strong>, il commence par <code>AGENT_</code> ou un préfixe explicite. Il documente la méthodologie Eager/Lazy, les patterns à suivre, les anti-patterns à éviter. Il est LAZY parce qu’un agent n’a pas besoin de relire toute la stratégie à chaque session, seulement quand il y a ambiguïté.</p> </div> <div class="paragraph"> <p><strong><code>*_REFERENCE.adoc</code></strong> — Les références techniques spécifiques au projet. Sur <code>magic-stick</code>, deux fichiers LAZY denses :</p> </div> <div class="ulist"> <ul> <li> <p><code>AB_PARTITION_REFERENCE.adoc</code> (147 lignes) — Architecture partition A/B GPT, scripts <code>update-system.sh</code>, tailles estimées, mécanisme de rollback</p> </li> <li> <p><code>BOOT_TEST_REFERENCE.adoc</code> (144 lignes) — Procédure QEMU + VNC pour tester le boot de l’ISO sans matériel physique, checklist BIOS/UEFI, limitations CI/CD</p> </li> </ul> </div> <div class="paragraph"> <p>Sur <code>plantuml-plugin</code> :</p> </div> <div class="ulist"> <ul> <li> <p><code>ARCHITECTURE.adoc</code> (134 lignes) — Structure des 11 data classes, points d’attention (pièges à éviter), commandes de test optimisées</p> </li> <li> <p><code>API_KEY_POOL_REFERENCE.adoc</code> — Détails complets du pool de clés (LAZY pendant que <code>ESSENTIALS</code> est EAGER)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_les_agents_spécialisés_une_équipe_virtuelle">Les Agents Spécialisés : Une Équipe Virtuelle</h2> <div class="sectionbody"> <div class="paragraph"> <p>La gouvernance ne se limite pas à des fichiers passifs. J’ai formalisé des <strong>rôles d’agents spécialisés</strong> dans des fichiers LAZY dédiés, qui définissent le workflow attendu selon le type de tâche.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> <col style="width: 6.25%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Agent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fichier</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rôle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Projet</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>CODER</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>CODER.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Implémentation FTL/CSS/JS, balises sémantiques, critères d’accessibilité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>SCRUM Master</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SCRUM_MASTER.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Planification US, découpage en sous-tâches, détection des dépendances</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>PlantUML Designer</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>PLANTUML_DESIGNER.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Création de diagrammes, syntaxe PUML, intégration JBake</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le fichier <code>CODER.adoc</code> sur <code>cheroliv.com</code> contient des règles concrètes : <em>Un seul <code><h1></code> par page</em>, <em>Préfixer les chemins avec `${content.rootpath}`</em>, <em>Déclarer la langue `<html lang="${content.lang!"fr"}">`</em>. Ces conventions, écrites une fois, sont respectées automatiquement par l’agent depuis la session 1.</p> </div> <div class="paragraph"> <p>Le fichier <code>SCRUM_MASTER.adoc</code> impose une structure de livrable : <strong>Objectif</strong>, <strong>Tâches</strong> (ordonnées avec assignation), <strong>Critères d’acceptation</strong>, <strong>Risques</strong>. Quand je demande un plan d’action, l’agent produit cette structure sans que je l’aie demandée. La gouvernance <strong>programme</strong> l’agent.</p> </div> <div class="sect3"> <h4 id="_quand_les_agents_spécialisés_deviennent_indispensables">Quand les Agents Spécialisés Deviennent Indispensables</h4> <div class="paragraph"> <p>La création des agents spécialisés suit une courbe naturelle. Au début d’un projet, vous n’en avez pas besoin — <code>AGENT.adoc</code> suffit largement. Mais quand le projet grandit (disons, au-delà de 20 sessions), deux signaux doivent vous alerter :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>L’agent mélange les conventions de deux domaines distincts (ex: syntaxe PlantUML et règles CSS)</p> </li> <li> <p>Vous passez plus de temps à corriger l’agent sur des conventions que vous lui avez déjà expliquées 5 fois</p> </li> </ol> </div> <div class="paragraph"> <p>Sur <code>cheroliv.com</code>, c’est arrivé à la session…​ 1. Oui, dès le départ. Parce que ce projet est un site web avec trois langages (FTL, CSS, JS), du contenu AsciiDoc, et des diagrammes PlantUML — trois domaines qui n’ont rien à voir. L’agent CODER a besoin de connaître les tailles de police et les media queries ; l’agent PLANTUML_DESIGNER a besoin de connaître la syntaxe <code>@startuml</code>. Sans séparation, l’agent CODER me proposait des diagrammes, et vice versa. Le chaos.</p> </div> <div class="paragraph"> <p>Sur <code>jhipster-gradle-plugins</code>, j’ai créé deux agents spécialisés adaptés au développement de plugins Gradle : <code>PLUGIN_DEVELOPER.adoc</code> et <code>BACKLOG_MANAGER.adoc</code>. Le premier encode toutes les conventions Kotlin/Gradle (pas de <code>!!</code>, data classes pour les modèles, <code>@TaskAction</code> pour les tâches). Le second sait que <code>persistence</code> doit être stable avant que <code>assistant</code> ne démarre son développement — une dépendance critique dans un mono-repo.</p> </div> <div class="paragraph"> <p>L’erreur à ne pas commettre : créer trop d’agents trop tôt. <code>plantuml-plugin</code> a attendu la session 108 avant de formaliser un agent spécialisé pour le pool de clés API. Avant ça, le contexte métier tenait dans <code>AGENT.adoc</code>. La règle empirique : un agent spécialisé se justifie quand son domaine métier dépasse 100 lignes de documentation.</p> </div> </div> <div class="sect3"> <h4 id="_la_convention_de_nommage_des_sessions">La Convention de Nommage des Sessions</h4> <div class="paragraph"> <p>Un détail qui paraît futile mais qui devient critique quand on atteint 100 sessions. Comment nommer les fichiers d’archive ?</p> </div> <div class="paragraph"> <p>J’ai appris à mes dépens qu’une convention est nécessaire — quatre projets, quatre formats différents au début, et je ne m’y retrouvais plus. Aujourd’hui, la convention que j’ai stabilisée est :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- {N}-{type}-{sujet-kebab-case}.adoc ---- Exemples concrets : * `1-chore-migration-gouvernance-agent.adoc` — session 1, type chore * `10-solidification-tests.adoc` — session 10, sans type explicite (le sujet suffit) * `036-debug-graphify-symlink-epic9.adoc` — session 36 avec numéro sur 3 chiffres pour le tri Le numéro de session est le critère de tri principal. Les projets utilisant des numéros sur 3 chiffres (001, 036, 133) évitent les problèmes de tri lexicographique quand on dépasse 99. C'est ce que j'utilise désormais sur `magic-stick` : `001-init-projet.adoc`, `036-debug-graphify-symlink-epic9.adoc`. Le type est facultatif et dérivé des mots-clés de la session (debug, feature, refactor, docs, chore, test). Le sujet en kebab-case est la partie la plus importante : il doit permettre de retrouver une session sans ouvrir le fichier. Si vous vous demandez « c'était quelle session où on a corrigé le timeout des tests d'intégration ? », la réponse est `124-fix-timeout-integration-test.adoc`. Pour les sessions historiques reconstituées (projets nés avant la gouvernance), j'utilise des numéros négatifs. Sur `cheroliv.com`, les sessions -6 à 0 couvrent toute l'histoire pré-gouvernance du projet. Et pour les sessions « non documentées » ou perdues, je crée une entrée dans `SESSIONS_HISTORY.adoc` sans archive correspondante, avec un score `?`. C'est plus honnête que faire semblant. [plantuml, format=svg, id=diag-naming-convention, alt="Arbre de décision pour le nommage des fichiers de session"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 200 title Convention de Nommage des Sessions start :Une session se termine; note right: Trigger "fin de session" if (Session antérieure\nà la gouvernance ?) then (oui) :Numéro **NÉGATIF**\n-6, -5 ... 0; note right: Historique\nreconstitué :Suffixe : reconstitution; else (non) :Numéro **POSITIF**\nsur 3 chiffres si > 99; note right: 001, 036, 133\npour le tri lexicographique :Détecter le **TYPE**; if (Mots-clés trouvés ?) then (oui) :debug / feature / refactor\ndocs / chore / test; else (non) :Omettre le type\n(le sujet suffit); endif :Formuler le **SUJET** en kebab-case; note right Ex: fix-timeout-integration-test Doit permettre de retrouver sans ouvrir le fichier end note endif :Nom final : {N}-{type}-{sujet}.adoc; note right • 1-chore-migration-gouvernance.adoc • 036-debug-graphify-symlink.adoc • 124-fix-timeout-integration-test.adoc • 133-epic11-article-blog-kg.adoc end note if (Session documentée ?) then (oui) :Créer archive dans sessions/; :Ajouter ligne SESSIONS_HISTORY\navec score X/10; else (non) :Ajouter ligne SESSIONS_HISTORY\navec score **?**\n**sans archive**; note right: L'honnêteté\nplutôt que le vide endif stop @enduml ---- ==== `TEST_COVERAGE_ANALYSIS.adoc` — L'Étape 5 Décortiquée L'étape 5 de la procédure de fin de session est la plus mystérieuse. Elle dit « Mettre à jour `TEST_COVERAGE_ANALYSIS.adoc` si des tests ont été ajoutés ou modifiés. » Mais à quoi ressemble ce fichier ? Sur `plantuml-plugin`, il a évolué de quelques lignes à une structure complète. Voici sa forme stabilisée : [source] ---- = Analyse de Couverture de Tests == Suivi des Tests |=== | Classe de test | Type | Tests | Statut | Dernière MAJ | PlantumlServiceTest | unit | 45/45 | ✅ PASS | 2026-04-23 | ApiKeyPoolTest | integration | 15/15 | ✅ PASS | 2026-04-20 |=== == Historique par Session | Session | Tests ajoutés | Tests modifiés | Couverture | 133 | 0 | 2 | 100% | 132 | 5 | 0 | 100% |=== ---- L'intérêt n'est pas le fichier lui-même — c'est l'obligation de *noter* ce qui a changé. Sans cette étape, après 50 sessions, vous ne savez plus quels tests couvrent quoi. L'agent non plus. Le fichier devient le référentiel unique de vérité sur la couverture de tests du projet. Pour les projets sans tests traditionnels (comme `magic-stick` qui teste des scripts bash), l'étape 5 est remplacée par `SCRIPT_VERIFICATION.adoc`. Le mécanisme est le même : un fichier qui suit l'état de validation des scripts. Adaptez l'étape 5 à votre projet, mais ne la sautez jamais. Elle est le filet de sécurité qui empêche la régression silencieuse. Si votre projet n'a *aucun* test — ni unitaire, ni fonctionnel, ni script — créez quand même le fichier vide avec une section « À faire : définir une stratégie de test. » C'est un marque-page qui rappellera à votre futur vous que ce sujet n'est pas traité. [plantuml, format=svg, id=diag-session-flow, alt="Flux d'une session type avec Eager/Lazy et agents"] ---- @startuml skinparam backgroundColor #FEFEFE start :Début session; note right: L'agent est une page blanche :Chargement EAGER auto; note right * AGENT.adoc (règles absolues) * PROMPT_REPRISE.adoc (mission N) * INDEX.adoc (état projet) end note if (Mission claire ?) then (oui) :Exécution directe; else (non) :Charge LAZY sur demande; note right * SESSIONS_HISTORY.adoc (contexte passé) * sessions/{N-1}-*.adoc (décisions) * *_REFERENCE.adoc (architechture) end note endif :Délégation agent spécialisé ?; if (CODER ?) then (oui) :Lit CODER.adoc; :Suit conventions FTL/CSS; elseif (SCRUM Master ?) then (oui) :Lit SCRUM_MASTER.adoc; :Structure livrable imposée; elseif (PlantUML ?) then (oui) :Lit PLANTUML_DESIGNER.adoc; :Syntaxe PUML + intégration; else (non) endif :Travail de la session; :Fin de session (trigger utilisateur); :Procédure 6 étapes; note right 1. Archive sessions/N-*.adoc 2. Maj PROMPT_REPRISE.adoc (N+1) 3. Maj SESSIONS_HISTORY.adoc 4. Maj INDEX.adoc 5. Maj TEST_COVERAGE (si applicable) 6. Maj COMPLETED_TASKS_ARCHIVE.adoc end note :Checklist [✅] x 6; stop @enduml ---- Le diagramme ci-dessus montre le cycle de vie complet d'une session. Le point clé est la bifurcation après le chargement EAGER : soit la mission est assez claire pour exécuter directement (80% des cas), soit l'agent charge du LAZY pour résoudre une ambiguïté (20% des cas). C'est cette discrimination qui économise les tokens. == La Procédure de Fin de Session : La Règle d'Or === Pourquoi elle est Incontournable Sans cette procédure, la stratégie Eager/Lazy ne sert à rien. C'est elle qui transforme le travail de la session en information persistante. Elle s'exécute **à la demande explicite de l'utilisateur** (mots-clés : "fin de session", "je quitte", etc.), et elle est **obligatoire** -- aucune exception, aucune omission. Le fichier `SESSION_CHECKLIST.adoc` définit des métriques de session idéale : * Durée : 15-30 minutes * Fichiers modifiés : 1-3 maximum * Échanges LLM : 5-10 messages * Contexte tokens : < 50k Et des signes qu'il faut changer de session : _Le LLM répète des erreurs déjà corrigées_, _Plus de 3 fichiers modifiés en parallèle_, _Conversation > 50 messages_. La règle d'or : **Mieux vaut 5 sessions de 20 minutes qu'une session de 2 heures avec debugging chaos.** === Le Flux des 6 Étapes (Silencieusement) [plantuml, format=svg, id=diag-end-session-flow, alt="Flux de la procédure de fin de session"] ---- @startuml skinparam defaultTextAlignment center skinparam wrapWidth 200 skinparam activityBackgroundColor #E3F2FD start :L'utilisateur dit "fin de session"; note right: Mots-clés déclencheurs :Agent détecte le trigger; :Étape 1\nCréer archive\n`.agents/sessions/N-*.adoc`; note right: Tout le contexte de la session :Étape 2\nMettre à jour\n`PROMPT_REPRISE.adoc`; note right: Mission N + critères d'acceptation N+1 :Étape 3\nMettre à jour\n`SESSIONS_HISTORY.adoc`; note right: Ligne récap : # / Date / Type / Sujet / Score :Étape 4\nMettre à jour\n`INDEX.adoc`; note right: État courant, roadmap, fichiers modifiés :Étape 5\nMettre à jour\n`TEST_COVERAGE_ANALYSIS.adoc`; note right: Si tests ajoutés ou modifiés :Étape 6\nMettre à jour\n`COMPLETED_TASKS_ARCHIVE.adoc`; note right: Archiver tâches terminées :Afficher la checklist de confirmation; note right: Vérifier que chaque [✅] est mérité stop @enduml ---- === Les Résultats de 150+ Sessions Voici ce que donne cette procédure appliquée systématiquement sur mes quatre projets : **plantuml-plugin** : * **133 sessions** depuis le début du projet * **240/240 tests PASS** (100% couverture) -- EPICs 1-7 terminées * **57 scénarios Cucumber BDD** validés * Règle de sûreté sur les fichiers de config née d'une erreur réelle (Session 2 bakery-plugin) **bakery-plugin** : * **11 sessions** en deux semaines * Migration Supabase → Firebase terminée (9 tests corrigés) * EPIC 6 (publishProfile) fonctionnel en production * Règle 0 créée : `publishToMavenLocal` obligatoire après chaque modif **magic-stick** : * **23 sessions** pour construire un système live Xubuntu avec partition A/B * Première ISO générée à la session 10 * Tests de boot QEMU + VNC formalisés (documentation LAZY de 144 lignes) * CI/CD SourceForge fonctionnel **cheroliv.com** : * **9 sessions formelles** + reconstitution de 7 sessions pré-système * Article 0101 (OpenCode PATH) publié * Article 0108 (celui-ci) réécrit après analyse de ses lacunes * Gouvernance complète migrée de Markdown vers AsciiDoc === La Checklist Finale Après exécution silencieuse des 6 étapes, l'agent doit afficher une checklist de confirmation :</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>✅ Procédure de fin de session exécutée 📋 Checklist : [✅] 1. Archive session N créée [✅] 2. PROMPT_REPRISE.adoc mis à jour pour session N+1 [✅] 3. SESSIONS_HISTORY.adoc mis à jour [✅] 4. INDEX.adoc mis à jour [✅] 5. TEST_COVERAGE_ANALYSIS.adoc mis à jour (si applicable) [✅] 6. COMPLETED_TASKS_ARCHIVE.adoc mis à jour</pre> </div> </div> <div class="paragraph"> <p><strong>Règle absolue</strong> : aucune étape ne peut être marquée <code>[✅]</code> si le fichier n’a pas été effectivement modifié et vérifié.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_guide_de_bootstrap_jour_1_session_0">Le Guide de Bootstrap : Jour 1, Session 0</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vous êtes convaincu par la méthode. Vous voulez l’appliquer à un nouveau projet. Par où commencer ?</p> </div> <div class="paragraph"> <p>J’ai vécu ce moment le 28 avril 2026. J’ouvre Opencode sur <code>jhipster-gradle-plugins</code>, mon mono-repo de deux plugins Gradle JHipster. C’est un projet qui existe déjà — le code est là, les tâches Gradle fonctionnent. Mais la gouvernance agent ? Zéro. Page blanche. Comme <code>plantuml-plugin</code> à sa session 1, il y a des mois.</p> </div> <div class="paragraph"> <p>Voici la procédure exacte que j’ai suivie, et que je suivrai pour tout nouveau projet. Notez bien l’ordre — il est important.</p> </div> <div id="diag-bootstrap" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-e11aa343b861c2c558099445242ab4be.svg" alt="Flux de bootstrap en 6 étapes pour initialiser la gouvernance agent sur un nouveau projet" width="1736" height="3371"> </div> </div> <div class="sect2"> <h3 id="_étape_0_créer_opencode_json">Étape 0 : Créer <code>opencode.json</code></h3> <div class="paragraph"> <p>C’est le premier fichier. Pas <code>AGENT.adoc</code>, pas <code>INDEX.adoc</code>. <code>opencode.json</code> d’abord, pour une raison simple : si vous créez <code>AGENT.adoc</code> en premier, vous allez oublier de créer le pont qui le charge automatiquement. Je l’ai fait sur <code>bakery-plugin</code>, je sais de quoi je parle.</p> </div> </div> <div class="sect2"> <h3 id="_étape_1_créer_les_dossiers">Étape 1 : Créer les Dossiers</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">mkdir -p .agents/sessions .agents/archives</code></pre> </div> </div> <div class="paragraph"> <p>Deux dossiers vides. <code>sessions/</code> recevra les archives de chaque session. <code>archives/</code> recevra les COMPLETED_TASKS_ARCHIVE mensuels. Ces dossiers doivent exister <strong>avant</strong> que l’agent n’ait besoin d’écrire dedans. Un agent qui doit créer le dossier ET le fichier en même temps, c’est un agent qui peut échouer silencieusement.</p> </div> </div> <div class="sect2"> <h3 id="_étape_2_créer_agent_adoc_le_fichier_maître">Étape 2 : Créer <code>AGENT.adoc</code> — Le Fichier Maître</h3> <div class="paragraph"> <p>Structure minimale pour la première version (elle grandira) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>= {NOM_PROJET} — Directives Agent [CAUTION]</code></pre> </div> </div> <div class="paragraph"> <p><strong>ARRÊT OBLIGATOIRE</strong> avant rm, Write, suppression :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>LIRE le fichier en entier</p> </li> <li> <p>VÉRIFIER git ls-files</p> </li> <li> <p>DEMANDER confirmation</p> </li> <li> <p>ATTENDRE "oui"</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_projet">Projet</h2> <div class="sectionbody"> <div class="paragraph"> <p><strong>Nom</strong> : …​ <strong>Stack</strong> : …​ <strong>Documentation</strong> : AsciiDoc</p> </div> </div> </div> <div class="sect1"> <h2 id="_règles_absolues">Règles Absolues</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_0_environnement_de_dev">0. ENVIRONNEMENT DE DEV</h3> <div class="paragraph"> <p>Commandes essentielles…​</p> </div> </div> <div class="sect2"> <h3 id="_1_commitsgit">1. COMMITS/GIT</h3> <div class="paragraph"> <p>Interdiction formelle…​</p> </div> </div> <div class="sect2"> <h3 id="_1b_fichiers_de_configuration_règle_absolue_de_sûreté">1b. FICHIERS DE CONFIGURATION — RÈGLE ABSOLUE DE SÛRETÉ</h3> <div class="paragraph"> <p>Ne jamais écraser…​</p> </div> </div> <div class="sect2"> <h3 id="_2_tests_en_fin_de_session">2. TESTS EN FIN DE SESSION</h3> <div class="paragraph"> <p>Interdiction formelle…​</p> </div> </div> <div class="sect2"> <h3 id="_3_procédure_de_fin_de_session">3. PROCÉDURE DE FIN DE SESSION</h3> <div class="paragraph"> <p>Les 6 étapes obligatoires…​</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gestion_du_contexte_lazyeager">Gestion du Contexte — LAZY/EAGER</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fichiers EAGER / Fichiers LAZY…​</p> </div> <div class="paragraph"> <p>Ce template minimal permet à l’agent de démarrer. La version riche — avec la structure du projet, les composants clés, les EPICs, le backlog — viendra à la session 1, quand l’agent aura déjà les règles de base en main et pourra vous aider à enrichir le document.</p> </div> <div class="sect2"> <h3 id="_étape_3_créer_prompt_reprise_adoc_la_mission_session_1">Étape 3 : Créer <code>PROMPT_REPRISE.adoc</code> — La Mission Session 1</h3> <div class="paragraph"> <p>Un fichier qui dit explicitement : « Ceci est la session 1, mission à définir. » Maximum 70 lignes, avec une section Session 0 (résumé du bootstrap) et une section Session 1 (priorités à définir avec l’utilisateur).</p> </div> </div> <div class="sect2"> <h3 id="_étape_4_créer_agentsindex_adoc_le_point_dentrée">Étape 4 : Créer <code>.agents/INDEX.adoc</code> — Le Point d’Entrée</h3> <div class="paragraph"> <p>Le fichier qui contiendra les règles absolues (version exécutive) et le tableau des sessions. Pour le bootstrap, il liste les règles 0 à 3 dans leur format concis, le portefeuille de projets (en incluant le nouveau projet avec un emoji 🆕), et la roadmap vide prête à être remplie.</p> </div> </div> <div class="sect2"> <h3 id="_étape_5_créer_les_fichiers_lazy_structurants">Étape 5 : Créer les Fichiers LAZY Structurants</h3> <div class="paragraph"> <p>Dans l’ordre :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>.agents/SESSIONS_HISTORY.adoc</code> — un tableau avec uniquement la session 0</p> </li> <li> <p><code>.agents/SESSION_CHECKLIST.adoc</code> — le template « Quand changer de session »</p> </li> <li> <p><code>.agents/PROCEDURES.adoc</code> — la procédure complète des 6 étapes + EAGER/LAZY</p> </li> <li> <p><code>.agents/AGENT_SESSION_MANAGER.adoc</code> — le template d’archive</p> </li> <li> <p><code>.agents/TEST_COVERAGE_ANALYSIS.adoc</code> — le tableau de suivi des tests, vide au départ</p> </li> </ol> </div> <div class="paragraph"> <p>Si votre projet a un domaine métier complexe (comme <code>jhipster-gradle-plugins</code> avec son mono-repo persistence/assistant), créez les agents spécialisés dès maintenant :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>.agents/PLUGIN_DEVELOPER.adoc</code> — les conventions de code et le boundary de dépendances (si plugin)</p> </li> <li> <p><code>.agents/BACKLOG_MANAGER.adoc</code> — la structure de planification et les risques identifiés</p> </li> </ol> </div> <div class="paragraph"> <p>Ne créez pas d’agents que vous n’utiliserez pas. Un agent sans conventions concrètes à encoder est un fichier mort qui pollue <code>.agents/</code>.</p> </div> </div> <div class="sect2"> <h3 id="_étape_6_ajouter_le_projet_au_portefeuille_de_tous_les_projets">Étape 6 : Ajouter le Projet au Portefeuille de TOUS les Projets</h3> <div class="paragraph"> <p>C’est l’étape qu’on oublie systématiquement. Chaque <code>INDEX.adoc</code> de chaque projet contient un tableau « Portefeuille de Projets » qui liste TOUS les projets avec la même méthodologie. Quand vous créez un nouveau projet, vous devez :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ajouter une ligne dans le portefeuille du nouveau projet (logique)</p> </li> <li> <p>Ajouter une ligne dans le portefeuille de TOUS les projets existants — oui, tous</p> </li> </ol> </div> <div class="paragraph"> <p>Sur mes quatre (maintenant cinq) projets, cela veut dire ouvrir les <code>INDEX.adoc</code> de <code>magic-stick</code>, <code>bakery-gradle</code>, <code>cheroliv.com</code>, <code>plantuml-gradle</code> et y ajouter la ligne <code>jhipster-gradle-plugins | Session 1 | …​ | 2026-04-28 🆕</code>.</p> </div> <div class="paragraph"> <p>C’est fastidieux. C’est manuel. C’est aussi la seule façon de garantir que, quel que soit le projet sur lequel vous travaillez, l’agent sait quels autres projets existent et quel est leur état. À la session 012 de <code>magic-stick</code>, l’agent a détecté deux incohérences dans le portefeuille — <code>bakery-gradle</code> avait son COMPLETED_TASKS_ARCHIVE en retard, et <code>plantuml-gradle</code> avait un décalage entre sa documentation de procédure (5 étapes) et son INDEX (6 étapes). Sans ce tableau transverse, ces incohérences seraient restées invisibles.</p> </div> <div id="diag-portfolio-graph" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-c2b21ca8d7481b154894427d05899032.svg" alt="Graphe du portefeuille de projets — références croisées entre INDEX.adoc" width="1501" height="802"> </div> </div> <div class="paragraph"> <p>Je vous entends d’ici : « Mais c’est de la duplication ! » Oui. C’est de la duplication volontaire. Chaque <code>INDEX.adoc</code> est autonome. Si vous ouvrez une session sur <code>magic-stick</code>, l’agent doit savoir que <code>plantuml-gradle</code> en est à la session 133 sans avoir à ouvrir un fichier dans un autre répertoire. C’est le prix de l’indépendance entre projets — et il est de 5 lignes par portefeuille.</p> </div> </div> <div class="sect2"> <h3 id="_ce_que_le_bootstrap_coûte">Ce que le Bootstrap Coûte</h3> <div class="paragraph"> <p>Tout ça prend 20 minutes. Vingt minutes une fois, pour ne plus jamais en perdre vingt au début de chaque session. Le ROI est immédiat : dès la session 2, l’agent reprend là où vous avez laissé la session 1.</p> </div> <div class="paragraph"> <p>Sur <code>jhipster-gradle-plugins</code>, ce bootstrap m’a pris exactement 18 minutes — de <code>mkdir .agents/</code> au dernier <code>INDEX.adoc</code> mis à jour dans le portefeuille de <code>magic-stick</code>. La session 1, qui suivra, démarrera avec un agent qui connaît déjà la structure du mono-repo, les commandes Gradle, et le boundary critique entre <code>persistence/</code> (lightweight) et <code>assistant/</code> (lourd). Vingt minutes bien investies.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_les_4_maintenant_5_projets_5_gouvernances_1_méthode">Les 4 (maintenant 5) Projets, 5 Gouvernances, 1 Méthode</h2> <div class="sectionbody"> <div class="paragraph"> <p>Le système Eager/Lazy n’est pas un boilerplate copié-collé. Chaque projet a adapté la méthode à ses spécificités.</p> </div> <div class="sect2"> <h3 id="_cheroliv_com_le_site_personnel">cheroliv.com : Le Site Personnel</h3> <div class="paragraph"> <p><strong>Spécificité</strong> : Contenu éditorial, accessibilité WCAG 2.1 AA, JBake statique. <strong>Adaptation</strong> : Six épopées priorisées (P0-P4), agents spécialisés (CODER, SCRUM_MASTER, PLANTUML_DESIGNER), critères d’acceptation transverses sur l’accessibilité. <strong>Règle emblématique</strong> : <code>./gradlew serve</code> obligatoire, interdiction formelle du script <code>jbake.sh</code> externe.</p> </div> </div> <div class="sect2"> <h3 id="_bakery_gradle_le_plugin_multi_purpose">bakery-gradle : Le Plugin Multi-Purpose</h3> <div class="paragraph"> <p><strong>Spécificité</strong> : Plugin Gradle avec tâches de publication, génération de code Firebase, parsing YAML. <strong>Adaptation</strong> : Règle 0 (publishToMavenLocal), règle de sûreté sur les fichiers de config renforcée par l’incident du <code>site.yml</code>, EPIC 9 et 10 sur la configuration multi-fichiers. <strong>Règle emblématique</strong> : <code>publishToMavenLocal</code> après chaque modification du code source du plugin.</p> </div> </div> <div class="sect2"> <h3 id="_plantuml_gradle_le_plugin_ia">plantuml-gradle : Le Plugin IA</h3> <div class="paragraph"> <p><strong>Spécificité</strong> : Intégration LangChain4j, génération de diagrammes PlantUML via LLM, tests avec clés API cloud. <strong>Adaptation</strong> : Documentation LAZY dense (ARCHITECTURE, API_KEY_POOL_REFERENCE, DATASET_FINETUNING), EPICs numérotés (1-11 terminés, 107+ en cours), séparation EAGER/LAZY optimisée (gain de 60% de tokens). <strong>Règle emblématique</strong> : Fichiers <code>*_ESSENTIALS.adoc</code> (50 lignes) vs <code>*_REFERENCE.adoc</code> (illimité) pour le pool de clés API.</p> </div> </div> <div class="sect2"> <h3 id="_magic_stick_le_système_live">magic-stick : Le Système Live</h3> <div class="paragraph"> <p><strong>Spécificité</strong> : Build d’ISO Linux live (Xubuntu), partitionnement GPT A/B, CI/CD avec SourceForge. <strong>Adaptation</strong> : Références techniques LAZY complexes (AB_PARTITION, BOOT_TEST), SCRIPT_VERIFICATION.adoc comme étape 5 spécifique (pas de tests traditionnels, mais vérification de scripts bash). <strong>Règle emblématique</strong> : <code>isoTestAB</code> skipé en CI (runners non privilégiés), tests réservés aux environnements locaux avec Docker <code>--privileged</code>.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_règles_absolues_transverses">Règles Absolues Transverses</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quelques règles critiques qui apparaissent dans le fichier <code>AGENT.adoc</code> Eager et s’appliquent à toutes les sessions sur tous les projets :</p> </div> <div class="paragraph"> <p><strong>Environnement de dev</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Utiliser la commande propre au projet (<code>./gradlew serve</code>, <code>./gradlew functionalTest</code>, etc.)</p> </li> <li> <p>❌ Interdit d’utiliser des scripts externes non versionnés</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Git</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Lecture seule autorisée (<code>git status</code>, <code>git diff</code>, <code>git log</code>)</p> </li> <li> <p>❌ <code>git add</code>, <code>git commit</code>, <code>git push</code> interdits sans permission explicite</p> </li> <li> <p>❌ <code>git commit --amend</code> interdit sauf conditions méticuleusement respectées</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Fichiers de Configuration</strong></p> </div> <div class="ulist"> <ul> <li> <p>❌ Ne jamais écraser un fichier config avec un <code>Write</code> complet quand un <code>Edit</code> partiel suffit</p> </li> <li> <p>❌ Ne jamais remplacer des valeurs sensibles par des valeurs factices</p> </li> <li> <p>❌ Vérifier <code>git check-ignore</code> et <code>git ls-files</code> avant toute modification</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Tests</strong></p> </div> <div class="ulist"> <ul> <li> <p>❌ Ne jamais lancer de tests en procédure de fin de session sans permission explicite</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Outils Interdits</strong></p> </div> <div class="ulist"> <ul> <li> <p>❌ <code>TodoWrite</code> et <code>Task</code> — la gouvernance se fait via les fichiers AsciiDoc, pas via des outils externes</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_les_anti_patterns_ce_que_150_sessions_mont_appris">Les Anti-Patterns : Ce Que 150+ Sessions M’ont Appris</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avec le recul, certaines erreurs sont devenues des patterns tellement prévisibles que je peux les lister comme des anti-patterns — des pièges dans lesquels tout nouveau projet tombera probablement. Les voici, classés par ordre de fréquence.</p> </div> <div id="diag-antipatterns" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-c4b4c7d8bfdda0f1287bc4f14752a381.svg" alt="Les 7 anti-patterns de la gouvernance agent — arbre des pièges à éviter" width="1784" height="5600"> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_1_lagent_sans_opencode_json">Anti-Pattern 1 : L’Agent sans <code>opencode.json</code></h3> <div class="paragraph"> <p>C’est l’erreur numéro un. Vous avez écrit un magnifique <code>AGENT.adoc</code> de 200 lignes, mais il n’est jamais chargé automatiquement. L’agent démarre nu. Vous passez 20 minutes à le recontextualiser — exactement ce que la méthode est censée éviter.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : L’agent pose des questions basiques sur la structure du projet alors que tout est dans <code>AGENT.adoc</code>. <strong>Correction</strong> : Créer <code>opencode.json</code> avec le bloc <code>instructions: ["AGENT.adoc"]</code>. Vérifier que le fichier existe dans le working directory d’Opencode.</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_2_trop_dagents_trop_tôt">Anti-Pattern 2 : Trop d’Agents Trop Tôt</h3> <div class="paragraph"> <p>À la session 2 de votre projet, vous créez 5 agents spécialisés. Aucun n’a de contenu réel, ce sont tous des stubs. Résultat : <code>.agents/</code> est pollué de fichiers vides, et l’agent hésite sur lequel charger.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : Des fichiers d’agent contenant uniquement « À définir » ou une structure vide de 10 lignes. <strong>Correction</strong> : Un agent spécialisé se justifie quand son domaine métier dépasse 100 lignes ou qu’il encode au moins 5 règles concrètes. En dessous, le contenu tient dans <code>AGENT.adoc</code>.</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_3_le_prompt_reprise_fantôme">Anti-Pattern 3 : Le PROMPT_REPRISE Fantôme</h3> <div class="paragraph"> <p><code>PROMPT_REPRISE.adoc</code> est mis à jour…​ mais uniquement à la fin de la session, quand l’agent exécute la procédure. Entre-temps, la mission réelle de la session a dérivé — on a corrigé un bug imprévu au lieu d’implémenter la feature planifiée. Le <code>PROMPT_REPRISE.adoc</code> de fin de session ne reflète pas ce qui s’est <strong>vraiment</strong> passé.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : La section « Priorités » de <code>PROMPT_REPRISE.adoc</code> mentionne une feature qui n’a pas été touchée, alors que vous avez passé la session sur un bug critique. <strong>Correction</strong> : Mettre à jour <code>PROMPT_REPRISE.adoc</code> en temps réel quand la session dérive de sa mission initiale. Ne pas attendre la procédure de fin de session pour documenter le changement de cap. 30 secondes d’édition pendant la session valent mieux qu’un <code>PROMPT_REPRISE</code> mensonger.</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_4_larchive_vide">Anti-Pattern 4 : L’Archive Vide</h3> <div class="paragraph"> <p>La procédure de fin de session crée l’archive…​ mais l’agent, pressé d’afficher sa checklist, remplit le template avec des placeholders. <code>{detail}</code> devient « Détail à compléter plus tard ». Ce « plus tard » n’arrive jamais.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : Des archives de session contenant les mots « TODO », « à compléter », ou des sections vides. <strong>Correction</strong> : La règle absolue dit qu’aucune étape ne peut être marquée [✅] si le fichier n’a pas été effectivement modifié. Appliquez-la à vous-même : relisez l’archive avant d’afficher la checklist. Si une section est vide, remplissez-la maintenant.</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_5_le_portefeuille_fantôme">Anti-Pattern 5 : Le Portefeuille Fantôme</h3> <div class="paragraph"> <p>Vous créez un nouveau projet avec une gouvernance parfaite. Mais vous oubliez de l’ajouter au portefeuille des autres projets. Trois semaines plus tard, vous ouvrez une session sur <code>magic-stick</code> et l’agent vous dit que vous avez 4 projets. Vous en avez 5. L’agent ne le sait pas.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : Le comptage des projets dans les portefeuilles ne correspond pas à la réalité. <strong>Correction</strong> : Scriptez la mise à jour du portefeuille, ou au minimum maintenez une checklist post-bootstrap qui inclut « Mettre à jour le portefeuille de tous les projets existants ». C’est l’étape la plus fastidieuse de la méthode, et donc la plus souvent omise.</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_6_la_redondance_cachée">Anti-Pattern 6 : La Redondance Cachée</h3> <div class="paragraph"> <p>Vous copiez-collez le même backlog de 50 lignes dans <code>AGENT.adoc</code> et <code>INDEX.adoc</code>. À la session suivante, vous mettez à jour l’un mais pas l’autre. Vos deux fichiers EAGER se contredisent.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : Des divergences entre les EPICs listées dans <code>AGENT.adoc</code> et celles dans <code>INDEX.adoc</code>. <strong>Correction</strong> : La redondance doit être <strong>assumée et bornée</strong>. <code>AGENT.adoc</code> contient le backlog détaillé avec user stories. <code>INDEX.adoc</code> contient UNIQUEMENT le tableau récapitulatif des EPICs (nom, progression, priorité). Si les deux divergent, c’est <code>INDEX.adoc</code> qui fait foi — parce que c’est lui qui est mis à jour à chaque fin de session. Documentez cette règle dans votre <code>AGENT.adoc</code> : « En cas de divergence entre AGENT.adoc et INDEX.adoc, INDEX.adoc est la source de vérité. »</p> </div> </div> <div class="sect2"> <h3 id="_anti_pattern_7_la_session_trop_longue">Anti-Pattern 7 : La Session Trop Longue</h3> <div class="paragraph"> <p>Vous ignorez les signaux du <code>SESSION_CHECKLIST.adoc</code>. 2 heures, 85 messages, 12 fichiers modifiés. L’agent tourne en boucle, vous aussi. Vous auriez dû changer de session il y a 45 minutes.</p> </div> <div class="paragraph"> <p><strong>Symptôme</strong> : Le LLM répète des erreurs déjà corrigées, le contexte tokens dépasse 80k, vous avez modifié à la fois <code>persistence/</code> et <code>assistant/</code> dans la même session. <strong>Correction</strong> : Le <code>SESSION_CHECKLIST.adoc</code> existe pour une raison. Respectez-le. La règle d’or n’est pas une suggestion. 5 sessions de 20 minutes > 1 session de 2 heures.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pourquoi_asciidoc">Pourquoi AsciiDoc ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>J’ai choisi AsciiDoc pour plusieurs raisons pragmatiques qui ont un impact direct sur l’efficacité de la gouvernance :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Structure sémantique riche</strong> : sections, tableaux, admonitions, attributs de document. Un agent lit mieux un document structuré qu’un fond de texte.</p> </li> <li> <p><strong>Attributs de document</strong> (<code>:jbake-type:</code>, <code>:jbake-status:</code>) qui permettent de définir des métadonnées lisibles par la machine et l’humain.</p> </li> <li> <p><strong>Compatibilité avec JBake</strong> : mon site statique est généré par JBake, qui traite nativement l’AsciiDoc. Les fichiers de gouvernance et les articles de blog partagent le même format. Mon article de blog <strong>sur</strong> la gouvernance est écrit dans le même format que la gouvernance elle-même.</p> </li> <li> <p><strong>Longévité</strong> : AsciiDoc est un format de documentation technique éprouvé, avec une spécification stable.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_résultat_une_continuité_sans_couture">Résultat : Une Continuité sans Couture</h2> <div class="sectionbody"> <div class="paragraph"> <p>Depuis que j’ai mis ce système en place, passer d’une session Opencode à l’autre est devenu fluide. L’agent reprend exactement où je l’ai laissé, sans que j’aie à recontextualiser quoi que ce soit.</p> </div> <div class="paragraph"> <p>Les décisions prises à la session 3 sont accessibles à la session 133. Le backlog reste cohérent sur cinq projets simultanés. Les règles de sécurité (notamment sur git et les fichiers de config) sont respectées parce qu’elles sont omniprésentes dans le fichier Eager.</p> </div> <div class="paragraph"> <p>Les chiffres parlent :</p> </div> <div class="ulist"> <ul> <li> <p><strong>150+ sessions archivées</strong> au total</p> </li> <li> <p><strong>60% de tokens EAGER économisés</strong> après optimisation (Session 109)</p> </li> <li> <p><strong>Zéro rappel nécessaire</strong> sur le contexte métier du pool de clés API</p> </li> <li> <p><strong>100% des tests PASS</strong> sur plantuml-plugin (240/240)</p> </li> <li> <p><strong>Une seule catastrophe</strong> (Session 2 bakery-plugin) qui a donné naissance à la règle de sûreté absolue</p> </li> </ul> </div> <div class="paragraph"> <p>C’est un <strong>système artisanal</strong>, construit avec les outils du métier (AsciiDoc, git, Gradle), sans dépendance à une plateforme propriétaire. Il reflète ma conviction fondamentale : <strong>un développeur crédible construit et utilise ses propres outils</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_liens">Liens</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Mon site : [cheroliv.com](<a href="https://cheroliv.com" class="bare">https://cheroliv.com</a>)</p> </li> <li> <p>Le projet <code>bakery-gradle</code> : [github.com/cheroliv/bakery-gradle-plugin](<a href="https://github.com/cheroliv/bakery-gradle-plugin" class="bare">https://github.com/cheroliv/bakery-gradle-plugin</a>)</p> </li> <li> <p>Le projet <code>plantuml-gradle</code> : [github.com/cheroliv/plantuml-gradle-plugin](<a href="https://github.com/cheroliv/plantuml-gradle-plugin" class="bare">https://github.com/cheroliv/plantuml-gradle-plugin</a>)</p> </li> <li> <p>Le projet <code>magic-stick</code> : [github.com/cheroliv/magic-stick](<a href="https://github.com/cheroliv/magic-stick" class="bare">https://github.com/cheroliv/magic-stick</a>)</p> </li> <li> <p>Le projet <code>cheroliv.com</code> : [github.com/cheroliv/cheroliv.github.io](<a href="https://github.com/cheroliv/cheroliv.github.io" class="bare">https://github.com/cheroliv/cheroliv.github.io</a>)</p> </li> </ul> </div> <hr> <div class="paragraph"> <p><strong>Le code qu’on écrit pour soi est le laboratoire du code qu’on enseigne aux autres.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0107_jbake_serve_rendering_bug_fix_post.html Wed, 22 Apr 2026 00:00:00 +0000 blog/2026/0107_jbake_serve_rendering_bug_fix_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_दृश्य_चार_स्क्रीनशॉट_दो_रेंडर">दृश्य: चार स्क्रीनशॉट, दो रेंडर</a> <ul class="sectlevel2"> <li><a href="#_rendu_local">Rendu local</a></li> <li><a href="#_ऑनलाइन_रेंडर">�ऑनलाइन रेंडर</a></li> </ul> </li> <li><a href="#_निदान_serve_सही_फ़ोल्डर_की_ओर_इशारा_नहीं_कर_रहा_था">निदान : <code>serve</code> सही फ़ोल्डर की ओर इशारा नहीं कर रहा था</a></li> <li><a href="#_मूल_कारण_jbake_cli_ऐसा_काम_नहीं_करता_है">मूल कारण: JBake CLI ऐसा काम नहीं करता है</a></li> <li><a href="#_समाधान_स्थिति_आधारित_तर्क_फ़्लैग_नहीं">समाधान : स्थिति-आधारित तर्क, फ़्लैग नहीं</a></li> <li><a href="#_curl_के_साथ_त्वरित_सत्यापन">curl के साथ त्वरित सत्यापन</a></li> <li><a href="#_यह_बग_घातक_क्यों_था">यह बग घातक क्यों था?</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">पढ़ने का समय: 10 minutes</div> <p>क्या आप वह क्षण जानते हैं जब आपका स्थानीय साइट कुछ भी नहीं दिखता, लेकिन एक बार ऑनलाइन तैनात करने पर सब कुछ सही हो जाता है? यही मेरे साथ मेरे Gradle JBake प्लगइन के साथ हुआ। काम`serve`वर्गाकार बटन दिखा रहा था, काली पृष्ठभूमि पर गहरा टेक्स्ट, और एक अजीब रूप से गायब CSS. फिर भी`publishSite`वह समान साइट उत्पन्न कर रहा था — और वह निर्दोष था। दोषी CSS नहीं था, न ब्राउज़र, न कैश। यह कोटलिन की एक कोड लाइन थी — और कमांड लाइन तर्कों के साथ एक बुरी आदत।</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">सामग्री</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_दृश्य_चार_स्क्रीनशॉट_दो_रेंडर">दृश्य: चार स्क्रीनशॉट, दो रेंडर</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह सिस्टम क्रैश के बाद की बात थी। मैंने स्थानीय रेंडरिंग की तुलना करने के लिए चार स्क्रीनशॉट लिए थे (<code>./gradlew serve`पर`localhost:8820</code>) ऑनलाइन रेंडरिंग के साथ (`publishSite`प्रत्येक पृष्ठ पर दो स्क्रीनशॉट : ऊपर और नीचे.</p> </div> <div class="sect2"> <h3 id="_rendu_local">Rendu local</h3> <div class="paragraph"> <p><strong>पृष्ठ के शीर्ष</strong>— बटन <strong>Project</strong> और <strong>Template</strong> हैं<strong>छोटे, आयताकार</strong>, मानक रंगों (नीला और हरा) में। कार्ड <strong>Start Writing</strong> के पास एक<strong>सादा काला पृष्ठभूमि</strong>, फ्रेम के बिना</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/screen_local1.png" alt="Rendu local - haut de page"> </div> </div> <div class="paragraph"> <p><strong>फ़ुटर</strong>— उपशीर्षक <strong>"नवीनतम लेख और संसाधन"</strong> है<strong>लगभग अपठनीय</strong>, बहुत गहरा काले पृष्ठभूमि पर. ब्लॉग चित्रों के नीचे की तारीखें ("17 October 2013", आदि) हैं<strong>अनुपस्थित</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/screen_local2.png" alt="Rendu local - bas de page"> </div> </div> </div> <div class="sect2"> <h3 id="_ऑनलाइन_रेंडर">�ऑनलाइन रेंडर</h3> <div class="paragraph"> <p><strong>पृष्ठ का शीर्ष</strong>— उसी बटन हैं<strong>बड़े, ovaux, चमकीला निऑन हरा</strong>, अपरकेस पाठ. कार्ड में एक<strong>गोल कोने वाला सफेद फ्रेम जिस पर ड्रॉप शैडो है</strong>.</p> </div> <div class="paragraph"> <p>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/screen_online1.png" alt="Rendu en ligne - haut de page"> </div> </div> <div class="paragraph"> <p><strong>फ़ूटर</strong> — Le sous-titre est <strong>स्पष्ट रूप से पढ़ने योग्य</strong>. तारीखें हैं<strong>दृश्य</strong>. अनुच्छेदों के कार्ड्स कुछ हैं<strong>गोल कोने</strong>और शीर्षक हैं<strong>बोल्ड</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/screen_online2.png" alt="Rendu en ligne - bas de page"> </div> </div> <div class="paragraph"> <p>पहला रिफ्लेक्स: थीम। मैं डायनामिक थीम सिस्टम (हल्का, गहरा, high-contrast) आधारित उपयोग करता हूँ।<code>localStorage</code>. शायद local store ने high-contrast थीम ट्रिगर की थी? नहीं। मैंने पहले ही लिख दिया थाhttps://cheroliv.com/blog/2025/0098_preloading_css_variable_post.html[थीम्स के प्रीलोडिंग पर एक पूरा लेख], मुझे पता है कि यह कैसे काम करता है. और साथ ही, हाई-कंट्रास्ट मोड में भी, CSS संरचना (अंडाकार बटन, छायाएँ) वहां होनी चाहिए थी. वह वहां नहीं थी.</p> </div> <div class="paragraph"> <p>दूसरा प्रतिक्रिया: ब्राउज़र कैश। नहीं, मैंने स्वच्छ प्रोफ़ाइल के साथ परीक्षण किया था। अंतर बना रहा था।</p> </div> <div class="paragraph"> <p>तीसरा प्रतिक्रिया :`serve`यह समान फ़ाइलों की सेवा नहीं दे रहा था`publishSite`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निदान_serve_सही_फ़ोल्डर_की_ओर_इशारा_नहीं_कर_रहा_था">निदान : <code>serve</code> सही फ़ोल्डर की ओर इशारा नहीं कर रहा था</h2> <div class="sectionbody"> <div class="paragraph"> <p>मेरा प्लगइन Gradle`bakery`दो मुख्य कार्य हैं:</p> </div> <div class="ulist"> <ul> <li> <p><code>bake</code>: स्थिर साइट में उत्पन्न करता है`build/bake/`</p> </li> <li> <p><code>serve</code>: एक स्थानीय वेब सर्वर शुरू करता है</p> </li> <li> <p><code>publishSite</code>: बढ़ता है`build/bake/`की ओर GitHub Pages</p> </li> </ul> </div> <div class="paragraph"> <p>असहमति केवल वहां से आ सकती थी`serve`. Si <code>publishSite`वह सही सामग्री प्रकाशित कर रहा था, यह है कि`build/bake/`अच्छा था. अगर`serve`वह कुछ और दिखा रहा था, इसका मतलब यह था कि यह उपयोगी नहीं था`build/bake/</code>.</p> </div> <div class="paragraph"> <p>चलो कोड देखते हैं। में`SiteManager.kt`, काम`serve`इस प्रकार परिभाषित है :</p> </div> <div class="listingblock"> <div class="title">SiteManager.kt — La tâche serve (version buggy)</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">tasks.register("serve", JavaExec::class.java) { task -> task.apply { mainClass.set("org.jbake.launcher.Main") classpath = jbakeRuntime environment("GEM_PATH", jbakeRuntime.asPath) jvmArgs(/* ... */) args = listOf( "-b", file(site.bake.srcPath).absolutePath, "-s", layout.buildDirectory.get() .asFile.resolve(site.bake.destDirPath) .absolutePath ) } }</code></pre> </div> </div> <div class="paragraph"> <p><code>org.jbake.launcher.Main`JBake CLI 2.7.0 का प्रवेश बिंदु है। आधार विचार: पारित करना</code>-b`स्रोत फ़ोल्डर के लिए और`-s`लक्ष्य फ़ोल्डर के लिए, फिर सर्वर मोड शुरू करें। सिवाय इसके कि…​</p> </div> </div> </div> <div class="sect1"> <h2 id="_मूल_कारण_jbake_cli_ऐसा_काम_नहीं_करता_है">मूल कारण: JBake CLI ऐसा काम नहीं करता है</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake 2.7.0 कुछ का इंतजार कर रहा है<strong>स्थितिगत आर्गुमेंट</strong>स्रोत और गंतव्य के लिए, फिर वैकल्पिक फ्लैग। हस्ताक्षर है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">jbake <source> <destination> [options]</code></pre> </div> </div> <div class="paragraph"> <p>लेकिन मेरे कोड में, मैं लिख रहा था:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">args = listOf("-b", "/path/to/site", "-s", "/path/to/build/bake")</code></pre> </div> </div> <div class="paragraph"> <p>JBake ने इसे इस तरह से समझा:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>-b</code>→ फ़्लैग "bake" का पार्स करें (बूलियन), उपभोग किया गया</p> </li> <li> <p><code>/path/to/site</code>→ बन जाता है स्थितीय आर्ग्युमेंट 1 (स्रोत)</p> </li> <li> <p><code>-s</code>→ पार्स फ़्लैग "serve" (बूलियन), सर्वर शुरू<strong>तुरंत</strong></p> </li> <li> <p><code>/path/to/build/bake</code>→ बन जाता है एक अनाथ तर्क, अनदेखा या गलत तरीके से समझा गया</p> </li> </ol> </div> <div class="paragraph"> <p>परिणाम: JBake ले रहा था`/path/to/site`comme स्रोत,<strong>गंतव्य को ध्यान में नहीं रखा</strong>दी गई (<code>build/bake</code>), और यह अपने डिफ़ॉल्ट निर्देशिका का उपयोग कर रहा था (सचं`./output`या एक अस्थायी प्रतिलिपि). फ़ाइल`css/styles.css`बिल्ड इसलिए ओवरराइट कर दिया गया या अनदेखा कर दिया गया, और यह एक पुराना डिफ़ॉल्ट CSS (कस्टम चर नहीं, कोने गोल नहीं, छाया नहीं) था जो परोसा जा रहा था।</p> </div> <div class="paragraph"> <p>तुलना में,<code>bake</code> et <code>publishSite`वे उपयोग करते हैं<strong>आधिकारिक JBake Gradle प्लगइन</strong>(`jbake-gradle-plugin</code>) जो साफ़‑सुथरे ढंग से लिखता है में`build/bake/`Gradle API के माध्यम से। वे CLI के माध्यम से नहीं गुज़रते।</p> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_स्थिति_आधारित_तर्क_फ़्लैग_नहीं">समाधान : स्थिति-आधारित तर्क, फ़्लैग नहीं</h2> <div class="sectionbody"> <div class="paragraph"> <p>सुधार साधारण है — एक बार जब आप जानते हैं। स्रोत और गंतव्य को स्थिति आर्गुमेंट्स के रूप में पास करना ही पर्याप्त है, फिर`-s`अंत में:</p> </div> <div class="listingblock"> <div class="title">SiteManager.kt — La tâche serve (version corrigée)</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">args = listOf( file(site.bake.srcPath).absolutePath, layout.buildDirectory.get() .asFile.resolve(site.bake.destDirPath) .absolutePath, "-s" )</code></pre> </div> </div> <div class="paragraph"> <p>यह सब है। तीन पंक्तियाँ बदल दी गई हैं, बग ठीक हो गया।</p> </div> <div class="paragraph"> <p>प्लगिन की स्थानीय प्रकाशन के बाद (<code>publishToMavenLocal</code>), un `./gradlew serve`JBake को सही सिंटैक्स के साथ लॉन्च करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">jbake /home/user/project/site /home/user/project/build/bake -s</code></pre> </div> </div> <div class="paragraph"> <p>और इस बार, JBake में अंतर्निहित Jetty सर्वर सामग्री को अच्छी तरह से परोसता है`build/bake/`— ऑनलाइन प्रकाशित जैसा ही</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/serve-vs-publish-diagram.svg" alt="serve vs publish diagram" width="1747" height="5496"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_curl_के_साथ_त्वरित_सत्यापन">curl के साथ त्वरित सत्यापन</h2> <div class="sectionbody"> <div class="paragraph"> <p>सुनिश्चित करने के लिए कि सर्वर सही सामग्री प्रदान कर रहा है, एक साधारण`curl`पुष्टि करता है कि`index.html`समाविष्ट है`data-bs-theme="light"`और कि`build/bake/css/styles.css`इसे 31 402 बाइट्स का भार होता है — उत्पन्न फ़ाइल के समान`bake`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew serve # Dans un autre terminal : $ curl -s http://localhost:8820/ | grep data-bs-theme <html ... data-bs-theme="light" ...> $ curl -I http://localhost:8820/css/styles.css HTTP/1.1 200 OK Content-Length: 31402 Content-Type: text/css</code></pre> </div> </div> <div class="paragraph"> <p>स्थानीय रेंडरिंग अब<strong>पिक्सेल-समान</strong>डिप्लॉयड रेंडरिंग पर.</p> </div> </div> </div> <div class="sect1"> <h2 id="_यह_बग_घातक_क्यों_था">यह बग घातक क्यों था?</h2> <div class="sectionbody"> <div class="paragraph"> <p>क्या आप देखते हैं कि इसे पकड़ना क्यों कठिन था?</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>कोई स्पष्ट त्रुटि नहीं</strong>: JBake क्रैश नहीं हो रहा था। यह "कार्य कर रहा था", बस एक गलत फ़ोल्डर के साथ।</p> </li> <li> <p><strong>बिल्ड काम कर रहा था</strong>:`./gradlew bake`फ़ाइलों को सही तरीके से उत्पन्न कर रहा था`build/bake/`.</p> </li> <li> <p><strong>डिप्लॉयमेंट काम कर रहा था</strong>(No output)`publishSite`अच्छी सामग्री का प्रचार ऑनलाइन कर रहा था</p> </li> <li> <p><strong>केवल <code>serve</code> टूटा हुआ था</strong>: विकास कार्य, जिसे हम लगातार पुनरावृत्ति के लिए उपयोग करते हैं।</p> </li> <li> <p><strong>-key value` की आदत</strong>एक डेवलपर के रूप में, हम यूनिक्स CLI के वर्षों से प्रभावित होते हैं`-o output`, `-i input`JBake CLI एक अपवाद है — स्रोत और गंतव्य स्थितिपरक हैं।</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>यदि आप JBake (या कोई CLI टूल) को लपेटने वाला एक Gradle प्लगइन बनाए रखते हैं,<strong>तर्कों के दस्तावेज़ पढ़ें</strong>即使你认为你认识它们。一个隐含的假设(<code>-s</code>= "set destination") यह आपको दृश्य डिबगिंग में घंटे खर्च कर सकता है।</p> </div> <div class="paragraph"> <p>यहाँ, फिक्स लिटरल रूप से बदलने के लिए:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">args = listOf("-b", src, "-s", dest) // ❌ BUG</code></pre> </div> </div> <div class="paragraph"> <p>en :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">args = listOf(src, dest, "-s") // ✅ FIX</code></pre> </div> </div> <div class="paragraph"> <p>तीन टोकन स्थानांतरित हो गए, और मेरा स्थानीय साइट फिर से उत्पादन साइट जितना सुंदर बन गया।</p> </div> <div class="paragraph"> <p><strong>पाठ</strong>: जब रेंडर स्थानीय और उत्पादन के बीच बिना स्पष्ट कारण के भिन्न हो, तो पहले <strong>pipeline</strong> के बारे में संदेह करें — CSS नहीं, ब्राउज़र नहीं, और बिल्कुल भी फ्रेमवर्क नहीं। अक्सर वह चरण जो रेंडर से ठीक पहले होती है, धोखा देती है।</p> </div> </div> </div> https://cheroliv.com/blog/2026/0106_opencode_path_sdkman_nvm_post.html Tue, 21 Apr 2026 00:00:00 +0000 blog/2026/0106_opencode_path_sdkman_nvm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_la_scène_un_agent_aveugle_dans_un_monde_doutils">La scène : un agent aveugle dans un monde d’outils</a></li> <li><a href="#_anatomie_du_bug_deux_shells_deux_mondes">Anatomie du bug : deux shells, deux mondes</a></li> <li><a href="#_les_coupables_zshrc_vs_zshenv">Les coupables : .zshrc vs .zshenv</a></li> <li><a href="#_diagnostic_pas_à_pas">Diagnostic pas à pas</a> <ul class="sectlevel2"> <li><a href="#_1_vérifier_le_path_de_lagent">1. Vérifier le PATH de l’agent</a></li> <li><a href="#_2_identifier_ce_qui_est_dans_zshrc_mais_pas_dans_zshenv">2. Identifier ce qui est dans .zshrc mais pas dans .zshenv</a></li> <li><a href="#_3_vérifier_si_zshenv_existe">3. Vérifier si .zshenv existe</a></li> </ul> </li> <li><a href="#_la_solution_zshenv_les_bons_chemins">La solution : .zshenv + les bons chemins</a> <ul class="sectlevel2"> <li><a href="#_créer_zshenv_avec_tous_les_chemins_essentiels">Créer .zshenv avec tous les chemins essentiels</a></li> <li><a href="#_pourquoi_pas_source_sdkman_init_sh_dans_zshenv">Pourquoi pas <code>source sdkman-init.sh</code> dans .zshenv ?</a></li> </ul> </li> <li><a href="#_le_cas_nvm_quand_le_gestionnaire_de_versions_oublie_de_laisser_une_trace">Le cas NVM : quand le gestionnaire de versions oublie de laisser une trace</a> <ul class="sectlevel2"> <li><a href="#_le_problème_nvm">Le problème NVM</a></li> <li><a href="#_la_solution_créer_le_symlink_current_pour_nvm">La solution : créer le symlink <code>current</code> pour NVM</a></li> <li><a href="#_automatiser_la_mise_à_jour_du_symlink">Automatiser la mise à jour du symlink</a></li> </ul> </li> <li><a href="#_tableau_récapitulatif_des_chemins">Tableau récapitulatif des chemins</a></li> <li><a href="#_pièges_et_mitigations">Pièges et mitigations</a></li> <li><a href="#_leçons_apprises">Leçons apprises</a></li> <li><a href="#_vérification_finale">Vérification finale</a></li> <li><a href="#_liens">Liens</a> <ul class="sectlevel2"> <li><a href="#_documentation_officielle">Documentation officielle</a></li> <li><a href="#_outils_mentionnés">Outils mentionnés</a></li> <li><a href="#_pour_aller_plus_loin">Pour aller plus loin</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">temps de lecture : 13 minutes</div> <p>Vous lancez OpenCode dans votre terminal, tout fonctionne. L’agent tente un <code>gh</code> — introuvable. Un <code>java -version</code> — absent. Un <code>node</code> — nulle part. Pourtant, ces outils sont bien là dans <em>votre</em> shell. Le problème ? OpenCode lance des shells <strong>non-interactifs</strong> qui ne lisent jamais votre <code>.zshrc</code>. Voici comment diagnostiquer et corriger ça proprement.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_la_scène_un_agent_aveugle_dans_un_monde_doutils">La scène : un agent aveugle dans un monde d’outils</h2> <div class="sectionbody"> <div class="paragraph"> <p>C’était un mardi soir. Je venais d’installer <a href="https://opencode.ai">OpenCode</a>, l’agent IA qui promettait de transformer ma façon de coder. Premier test : lui demander de lister mes dépôts GitHub.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ opencode > Utilise gh pour lister mes repos ❌ bash: gh: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Étrange. <code>gh</code> fonctionnait parfaitement dans mon terminal. J’essaie autre chose :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">> Vérifie la version de Java ❌ bash: java: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Puis :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">> Lance le build Gradle ❌ bash: gradle: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Java, Gradle, Node, <code>gh</code> — tout était invisible pour l’agent. Mon terminal, lui, voyait tout. Comme si l’agent et moi vivions dans deux mondes parallèles.</p> </div> <div class="paragraph"> <p>J’ai mis des heures à comprendre. Des heures de <code>echo $PATH</code>, de <code>which java</code>, de frustration croissante. J’ai fini par comprendre que le problème n’était pas les outils — c’était le <strong>shell</strong>. OpenCode, comme tout agent qui lance des sous-processus, travaille dans des shells <strong>non-interactifs</strong>. Et Zsh, dans ces shells-là, ignore purement et simplement votre <code>.zshrc</code>.</p> </div> <div class="paragraph"> <p>Ce qui suit est le récit complet de ce diagnostic, de la résolution, et de la leçon que j’ai tirée. Si vous utilisez un agent IA — OpenCode, Aider, Cursor, ou même des scripts cron — ce problème vous concernera un jour.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomie_du_bug_deux_shells_deux_mondes">Anatomie du bug : deux shells, deux mondes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Quand vous ouvrez un terminal, Zsh le traite comme un shell <strong>interactif</strong>. Il charge <code>.zshrc</code>, qui initialise tout : SDKMAN, NVM, pnpm, les aliases, votre joli prompt. Votre environnement est complet.</p> </div> <div class="paragraph"> <p>Mais quand OpenCode exécute une commande, il ne lance pas un terminal interactif. Il lance un shell <strong>non-interactif</strong> — un shell de tâche, sans humain derrière l’écran. Et Zsh, dans ce contexte, saute <code>.zshrc</code>. Il ne lit que <code>.zshenv</code>.</p> </div> <div class="paragraph"> <p>Pourquoi cette distinction existe-t-elle ? Parce qu’un shell non-interactif est conçu pour exécuter des scripts, pas pour servir un utilisateur humain. Charger les aliases, le prompt et les complétons dans un script qui tourne en background serait un gaspillage. Le problème, c’est que votre PATH — l’information la plus critique pour trouver les exécutables — est souvent initialisé dans <code>.zshrc</code>, pas dans <code>.zshenv</code>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/probleme-path.svg" alt="probleme path" width="558" height="434"> </div> </div> <div class="paragraph"> <p>La racine du problème : <strong>Zsh ne source <code>.zshrc</code> que pour les shells interactifs</strong>. OpenCode, comme tout agent IA qui lance des sous-processus, utilise des shells non-interactifs. Ces shells ne lisent que <code>.zshenv</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_les_coupables_zshrc_vs_zshenv">Les coupables : .zshrc vs .zshenv</h2> <div class="sectionbody"> <div class="paragraph"> <p>Zsh dispose de <strong>quatre fichiers d’initialisation</strong>, chacun avec un rôle précis. C’est un design élégant — mais c’est aussi le nœud du problème :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> <col style="width: 5%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fichier</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sourcé quand</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rôle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modifie le PATH ?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zshenv</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Toujours</strong> (interactif + non-interactif + login)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Variables d’environnement essentielles, PATH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Oui — c’est SA place</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zprofile</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Shells de login uniquement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Commandes lentes (une fois par session)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Possible</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zshrc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Shells interactifs uniquement</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias, prompt, complétion, outils interactifs</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Pas pour les variables critiques</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zlogin</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Shells de login (après .zshrc)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Messages de bienvenue, finalisation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rarement</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Le tableau donne un indice, mais il faut le comprendre en profondeur. Pensez-y comme les pièces d’une maison :</p> </div> <div class="ulist"> <ul> <li> <p><code>.zshenv</code> est le <strong>hall d’entrée</strong> — tout le monde passe par là, visiteur ou résident. Si vous mettez quelque chose ici, tout shell pourra le voir.</p> </li> <li> <p><code>.zshrc</code> est le <strong>salon</strong> — seuls les résidents (shells interactifs) y entrent. Les visiteurs (shells non-interactifs) restent dans le hall.</p> </li> <li> <p><code>.zprofile</code> et <code>.zlogin</code> sont des pièces spécialisées pour les shells de login (comme quand vous vous connectez en SSH).</p> </li> </ul> </div> <div class="paragraph"> <p>Le drame, c’est que la plupart d’entre nous mettons le PATH dans le salon. Et l’agent IA, lui, n’a jamais le droit d’y entrer.</p> </div> <div class="paragraph"> <p>Le problème en un diagramme :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/zsh-init-flow.svg" alt="zsh init flow" width="543" height="404"> </div> </div> <div class="paragraph"> <p>Quand vous ouvrez un terminal, Zsh est interactif : il lit <code>.zshrc</code>, tout fonctionne. Quand OpenCode lance un shell pour exécuter une commande, Zsh est non-interactif : il saute <code>.zshrc</code>, ne lit que <code>.zshenv</code>. Et si <code>.zshenv</code> n’existe pas ou ne contient pas le PATH — c’est le désert.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>Pourquoi Zsh fait-il ça ?</strong> C’est un choix de conception hérité d’Unix. Un shell non-interactif doit être <strong>rapide</strong> et <strong>reproductible</strong>. Charger les aliases, les prompts colorés et les initialisations lourdes de SDKMAN dans un script de cron ou un agent IA serait lent et fragile. La séparation est donc logique : <code>.zshenv</code> pour l’essentiel (variables, PATH), <code>.zshrc</code> pour le confort (aliases, prompt, complétons). Le problème survient quand on met l’essentiel dans le confort.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_diagnostic_pas_à_pas">Diagnostic pas à pas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de corriger, il faut comprendre exactement ce qui manque. Voici une méthode de diagnostic reproductible — gardez-la en favoris si vous travaillez avec des agents IA.</p> </div> <div class="sect2"> <h3 id="_1_vérifier_le_path_de_lagent">1. Vérifier le PATH de l’agent</h3> <div class="paragraph"> <p>On compare ce que voit votre terminal interactif avec ce que voit un shell non-interactif — c’est-à-dire ce que voit OpenCode.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Dans votre terminal interactif (tout fonctionne) echo $PATH | tr ':' '\n' | grep -v '^/usr' | sort</code></pre> </div> </div> <div class="paragraph"> <p>Résultat typique :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">/home/cheroliv/apps /home/cheroliv/.nvm/versions/node/v22.19.0/bin /home/cheroliv/.sdkman/candidates/java/current/bin /home/cheroliv/.sdkman/candidates/gradle/current/bin /home/cheroliv/.local/share/pnpm /home/cheroliv/.local/bin</code></pre> </div> </div> <div class="paragraph"> <p>Maintenant, simulons ce que voit l’agent — un shell non-interactif :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Shell non-interactif : pas de .zshrc zsh -c 'echo $PATH' | tr ':' '\n' | grep -v '^/usr' | sort</code></pre> </div> </div> <div class="paragraph"> <p>Résultat :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">/home/cheroliv/.local/bin</code></pre> </div> </div> <div class="paragraph"> <p><strong>Cinq chemins sur six ont disparu.</strong> L’agent est amputé de 83% de son environnement. C’est comme si on vous demandait de cuisiner sans la moitié de vos ustensiles — vous pourriez faire bouillir de l’eau, mais pas grand-chose d’autre.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> <div class="paragraph"> <p>La commande <code>zsh -c 'echo $PATH'</code> est votre <strong>outil de diagnostic numéro 1</strong>. Si un outil que vous utilisez au quotidien est absent du résultat, votre agent IA ne pourra pas le voir non plus. Testez-la avant et après chaque modification de <code>.zshenv</code>.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_identifier_ce_qui_est_dans_zshrc_mais_pas_dans_zshenv">2. Identifier ce qui est dans .zshrc mais pas dans .zshenv</h3> <div class="paragraph"> <p>Maintenant, on cherche le coupable dans <code>.zshrc</code>. On filtre les lignes qui mentionnent nos outils :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">grep -n 'apps\|SDKMAN\|NVM\|PNPM\|PATH' ~/.zshrc</code></pre> </div> </div> <div class="paragraph"> <p>On retrouve typiquement :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">119: PATH="/usr/bin/python3:$HOME/apps:$PATH" # ← pas exporté ! 171: export NVM_DIR="$HOME/.nvm" 172: [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # ← NVM init 176: nvm use --lts --silent # ← active une version 179: export PNPM_HOME="/home/cheroliv/.local/share/pnpm" 187: export SDKMAN_DIR="$HOME/.sdkman" 188: [[ -s "$HOME/.sdkman/bin/sdkman-init.sh" ]] && source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Tout ça est <strong>invisible</strong> pour OpenCode. Et le <code>PATH</code> de la ligne 119 n’est même pas <code>export`é — il ne quitte jamais le shell courant. C’est un détail technique crucial : une variable sans `export</code> reste locale au shell qui la définit. Les sous-shells — comme ceux lancés par OpenCode — ne l’héritent jamais.</p> </div> </div> <div class="sect2"> <h3 id="_3_vérifier_si_zshenv_existe">3. Vérifier si .zshenv existe</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">cat ~/.zshenv 2>/dev/null || echo "FICHIER ABSENT"</code></pre> </div> </div> <div class="paragraph"> <p>Si la réponse est « FICHIER ABSENT », c’est là que tout se joue.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_la_solution_zshenv_les_bons_chemins">La solution : .zshenv + les bons chemins</h2> <div class="sectionbody"> <div class="paragraph"> <p>La stratégie est simple, mais elle demande de la précision : mettre dans <code>.zshenv</code> <strong>uniquement</strong> les chemins essentiels, sans sourcer les scripts d’initialisation lourds. On ne déplace pas <code>.zshrc</code> dans <code>.zshenv</code> — on extrait l’essentiel.</p> </div> <div class="sect2"> <h3 id="_créer_zshenv_avec_tous_les_chemins_essentiels">Créer .zshenv avec tous les chemins essentiels</h3> <div class="paragraph"> <p><code>.zshenv</code> est le <strong>seul fichier</strong> que Zsh garantit de sourcer dans <strong>tous</strong> les contextes. C’est là que doit aller le PATH.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">export SDKMAN_DIR="$HOME/.sdkman" export NVM_DIR="$HOME/.nvm" export PNPM_HOME="$HOME/.local/share/pnpm" export PATH="$HOME/apps:$HOME/.sdkman/candidates/java/current/bin:$HOME/.sdkman/candidates/gradle/current/bin:$HOME/.nvm/current/bin:$PNPM_HOME:$HOME/.local/bin:$HOME/.local/share/JetBrains/Toolbox/scripts:/usr/bin/python3:$PATH"</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>On utilise <code>$HOME/.nvm/current/bin</code> et non <code>$HOME/.nvm/versions/node/v22.19.0/bin</code>. La raison : les versions Node changent. Un chemin en dur devient faux au prochain <code>nvm install</code>. Plus de détails dans la section suivante.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_pourquoi_pas_source_sdkman_init_sh_dans_zshenv">Pourquoi pas <code>source sdkman-init.sh</code> dans .zshenv ?</h3> <div class="paragraph"> <p>L’approche la plus tentante serait de simplement reproduire dans <code>.zshenv</code> ce qu’on fait dans <code>.zshrc</code> — sourcer les scripts d’initialisation. On <strong>pourrait</strong> être tenté de faire :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># ❌ MAUVAISE IDÉE [[ -s "$HOME/.sdkman/bin/sdkman-init.sh" ]] && source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Problèmes :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Lent</strong> : <code>sdkman-init.sh</code> fait des résolutions réseau et des vérifications à chaque shell. Dans un shell non-interactif, c’est un coût inutile.</p> </li> <li> <p><strong>Fragile</strong> : SDKMAN s’attend à un contexte interactif. Son initialisation peut échouer silencieusement dans un pipe ou un sous-shell.</p> </li> <li> <p><strong>Inutile</strong> : SDKMAN place ses candidats dans <code>~/.sdkman/candidates/<tool>/current/bin</code> — des symlinks stables pointant vers la version active. On peut les utiliser <strong>directement</strong>.</p> </li> </ul> </div> <div class="paragraph"> <p>La bonne approche : contourner l’initialisation de SDKMAN et pointer directement sur les symlinks <code>current</code>. C’est la clé de toute la solution : <strong>utiliser la structure de fichiers comme contrat, plutôt que le code d’initialisation</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/sdkman-approach.svg" alt="sdkman approach" width="338" height="321"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_le_cas_nvm_quand_le_gestionnaire_de_versions_oublie_de_laisser_une_trace">Le cas NVM : quand le gestionnaire de versions oublie de laisser une trace</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_le_problème_nvm">Le problème NVM</h3> <div class="paragraph"> <p>C’est ici que l’enquête m’a mené le plus loin. SDKMAN a un design élégant : quand on fait <code>sdk install java 25.0.2-tem</code>, il crée un symlink :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">~/.sdkman/candidates/java/current -> ~/.sdkman/candidates/java/25.0.2-tem</code></pre> </div> </div> <div class="paragraph"> <p>Ce symlink est <strong>toujours à jour</strong>. Pointez dessus dans <code>.zshenv</code> et vous êtes couvert, quel que soit le shell. Beautiful.</p> </div> <div class="paragraph"> <p>NVM, lui, ne crée <strong>rien</strong> de tel. Pas de symlink <code>current</code>. Pas de point d’ancrage stable. On doit pointer sur un chemin versionné en dur, qui ressemble à ça :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">~/.nvm/versions/node/v22.19.0/bin/node</code></pre> </div> </div> <div class="paragraph"> <p>Au prochain <code>nvm install 24</code>, ce chemin est mort. Votre <code>.zshenv</code> pointera vers une version qui n’est plus la version active. C’est une bombe à retardement.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>Pourquoi NVM fait-il ça ?</strong> NVM fonctionne en modifiant dynamiquement le PATH à chaque <code>nvm use</code>. C’est conçu pour des développeurs qui changent de version souvent, dans un shell interactif. Le symlink <code>current</code> n’était pas dans les spécifications initiales — c’est un oubli de design que nous allons corriger nous-mêmes.</p> </div> </td> </tr> </table> </div> <div class="imageblock"> <div class="content"> <img src="./images/nvm-vs-sdkman.svg" alt="nvm vs sdkman" width="1773" height="5676"> </div> </div> </div> <div class="sect2"> <h3 id="_la_solution_créer_le_symlink_current_pour_nvm">La solution : créer le symlink <code>current</code> pour NVM</h3> <div class="paragraph"> <p>Puisque NVM ne le fait pas, on le fait nous-mêmes. Le principe est le même que SDKMAN — un symlink <code>current</code> qui pointe toujours vers la version active. On le crée une fois, puis on l’automatise pour qu’il se mette à jour tout seul.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Créer le symlink initial ln -sfn "$HOME/.nvm/versions/node/v22.19.0" "$HOME/.nvm/current"</code></pre> </div> </div> <div class="paragraph"> <p>Maintenant, dans <code>.zshenv</code>, on utilise :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$HOME/.nvm/current/bin</code></pre> </div> </div> <div class="paragraph"> <p>Plutôt que :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># ❌ Chemin en dur — cassé au prochain changement de version $HOME/.nvm/versions/node/v22.19.0/bin</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_automatiser_la_mise_à_jour_du_symlink">Automatiser la mise à jour du symlink</h3> <div class="paragraph"> <p>Un symlink ne vaut rien s’il ne se met pas à jour. Le symlink <code>current</code> doit se mettre à jour quand on fait <code>nvm use</code> ou <code>nvm install</code>. La solution : un <strong>wrapper</strong> — une fonction qui enveloppe la vraie commande <code>nvm</code> et met à jour le symlink après chaque appel.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># À la fin de .zshrc, APRÈS le chargement de NVM nvm use --lts --silent ln -sfn "$(nvm_version_path "$(nvm current)")" "$NVM_DIR/current" _nvm() { command nvm "$@" local rc=$? ln -sfn "$(nvm_version_path "$(nvm current)")" "$NVM_DIR/current" return $rc } alias nvm='_nvm'</code></pre> </div> </div> <div class="paragraph"> <p>Comment ça marche, en détail :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/nvm-wrapper-flow.svg" alt="nvm wrapper flow" width="676" height="393"> </div> </div> <div class="paragraph"> <p>Le wrapper <code>_nvm</code> appelle la vraie commande <code>nvm</code>, puis met à jour le symlink. L’alias <code>nvm='_nvm'</code> fait en sorte qu’en tapant <code>nvm</code>, on passe par le wrapper. Et à l’initialisation du shell, on fait de même après <code>nvm use --lts</code>.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p><code>nvm_version_path</code> est une fonction interne de NVM qui résout le chemin complet d’une version. Ça évite de reconstruire le chemin manuellement.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tableau_récapitulatif_des_chemins">Tableau récapitulatif des chemins</h2> <div class="sectionbody"> <div class="paragraph"> <p>Avant de passer aux pièges, un résumé visuel de la transformation. Sur la gauche, ce que vous aviez (tout dans <code>.zshrc</code>, invisible pour l’agent). Sur la droite, ce que vous avez maintenant (les chemins essentiels dans <code>.zshenv</code>, visibles partout).</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> <col style="width: 25%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Outil</th> <th class="tableblock halign-left valign-top">Avant (.zshrc seulement)</th> <th class="tableblock halign-left valign-top">Après (.zshenv + symlink)</th> <th class="tableblock halign-left valign-top">Visible par OpenCode ?</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/apps</code> (gh, vscode)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">PATH non exporté dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$HOME/apps</code> dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>sdkman-init.sh</code> sourcé dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$HOME/.sdkman/candidates/java/current/bin</code> dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN Gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>sdkman-init.sh</code> sourcé dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$HOME/.sdkman/candidates/gradle/current/bin</code> dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">NVM Node</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>nvm use --lts</code> dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$HOME/.nvm/current/bin</code> dans .zshenv (symlink)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">pnpm</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$PNPM_HOME</code> dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$PNPM_HOME</code> dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">JetBrains Toolbox</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Auto-ajouté par Toolbox dans .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>$HOME/.local/share/JetBrains/Toolbox/scripts</code> dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Python 3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>/usr/bin/python3</code> dans PATH .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Explicitement dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_pièges_et_mitigations">Pièges et mitigations</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tout n’est pas parfait avec cette approche. Voici les problèmes que j’ai rencontrés, et comment les contourner.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Piège</th> <th class="tableblock halign-left valign-top">Description</th> <th class="tableblock halign-left valign-top">Mitigation</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PATH dupliqué</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Si .zshenv et .zshrc ajoutent le même chemin, il apparaît deux fois</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zshenv</code> est sourcé <strong>avant</strong> .zshrc. Les deux sont lus dans un shell interactif. Le PATH peut doublonner. C’est cosmétique, pas fonctionnel. Pour l’éviter : ne mettre dans .zshenv que les chemins <em>absents</em> du PATH par défaut.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">NVM : version en dur dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mettre <code>~/.nvm/versions/node/v22.19.0/bin</code> en dur devient faux au prochain <code>nvm install</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Utiliser le symlink <code>$HOME/.nvm/current/bin</code> + le wrapper <code>_nvm</code> dans .zshrc</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN : source sdkman-init.sh dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lent, fragile, inutile dans un shell non-interactif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Utiliser les symlinks <code>candidates/<tool>/current/bin</code> directement</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias manquant après modification</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le wrapper <code>nvm='_nvm'</code> dans .zshrc ne prend effet qu’après rechargement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relancer le shell ou <code>source ~/.zshrc</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">OpenCode ne voit pas les changements</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">L’agent a déjà lancé ses sous-shells avec l’ancien .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Redémarrer OpenCode après modification de .zshenv</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv trop chargé</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mettre des fonctions lourdes ou des initialisations interactives dans .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv = variables d’environnement + PATH uniquement. Pas de <code>source</code>, pas de fonctions lourdes, pas de prompts.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_leçons_apprises">Leçons apprises</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong><code>.zshrc</code> est interactif, <code>.zshenv</code> est universel</strong> — Si une variable doit exister dans <em>tous</em> les shells (agents IA, cron, scripts, IDE), elle va dans <code>.zshenv</code>. Le salon est confortable, mais le hall d’entrée est le seul endroit où tout le monde passe.</p> </li> <li> <p><strong>Les gestionnaires de versions ne sont pas égaux</strong> — SDKMAN crée des symlinks <code>current</code> par design. NVM non. Il faut combler ce manque manuellement. C’est une leçon importante : avant de configurer votre PATH, vérifiez si votre gestionnaire offre un point d’ancrage stable.</p> </li> <li> <p><strong>Ne pas sourcer les init scripts dans .zshenv</strong> — <code>sdkman-init.sh</code> et <code>nvm.sh</code> sont conçus pour un shell interactif. Ils sont lents et fragiles dans un contexte non-interactif. Les symlinks <code>current</code> suffisent et sont instantanés.</p> </li> <li> <p><strong>Toujours tester en shell non-interactif</strong> — <code>zsh -c 'echo $PATH'</code> simule exactement ce que voit un agent. C’est le test de validation. Sans ce test, vous ne savez pas si votre configuration fonctionne pour les agents.</p> </li> <li> <p><strong>Le wrapper pattern est réutilisable</strong> — Le même pattern <code>_nvm</code> + <code>alias nvm='_nvm'</code> s’applique à tout outil qui modifie le PATH dynamiquement sans laisser de trace stable. C’est un outil de plus dans votre boîte à idées.</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="./images/avant-apres.svg" alt="avant apres" width="238" height="306"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_vérification_finale">Vérification finale</h2> <div class="sectionbody"> <div class="paragraph"> <p>Après avoir créé <code>.zshenv</code> et le symlink NVM, validez que tout fonctionne — dans les deux contextes :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Shell interactif (votre terminal) gh --version && java -version && node --version</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Shell non-interactif (simulation OpenCode) zsh -c 'gh --version && java -version && node --version'</code></pre> </div> </div> <div class="paragraph"> <p>Les deux doivent réussir. Si oui, votre agent IA verra les mêmes outils que vous. Si non, revenez au diagnostic pas à pas — vous avez probablement oublié un chemin ou le symlink NVM n’est pas à jour.</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>Automatisez ce test.</strong> Ajoutez cette vérification dans un script de healthcheck que vous lancez après chaque mise à jour de vos outils. Un <code>zsh -c 'which java && which node && which gh'</code> en CI, c’est une assurance contre les surprises.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p><em><em>_ Un shell non-interactif est comme un invité silencieux : il ne lit que ce qui est affiché sur la porte d’entrée. Si le PATH est dans le salon, il ne le verra jamais. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_liens">Liens</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_documentation_officielle">Documentation officielle</h3> <div class="ulist"> <ul> <li> <p><a href="https://zsh.sourceforge.io/Doc/Release/Files.html">Zsh documentation : Startup Files</a> — La référence officielle sur les fichiers d’initialisation de Zsh. C’est là que tout est expliqué, même si on l’oublie souvent.</p> </li> <li> <p><a href="https://opencode.ai/docs/config/">OpenCode : configuration</a> — Comment configurer OpenCode et son environnement d’exécution.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_outils_mentionnés">Outils mentionnés</h3> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nvm-sh/nvm">NVM sur GitHub</a> — Node Version Manager. Gestionnaire de versions Node.js.</p> </li> <li> <p><a href="https://sdkman.io">SDKMAN — site officiel</a> — SDKMAN! Le gestionnaire de versions pour la JVM (Java, Kotlin, Gradle…​)</p> </li> <li> <p><a href="https://sdkman.io/install">SDKMAN : installation</a> — Guide d’installation de SDKMAN.</p> </li> <li> <p><a href="https://cli.github.com"><code>gh</code> — GitHub CLI</a> — L’outil en ligne de commande GitHub, indispensable pour tout développeur.</p> </li> <li> <p><a href="https://gradle.org">Gradle — site officiel</a> — Le système de build que nous installons via SDKMAN.</p> </li> <li> <p><a href="https://pnpm.io">pnpm — site officiel</a> — Le gestionnaire de paquets Node.js rapide et économe en espace.</p> </li> <li> <p><a href="https://www.jetbrains.com/toolbox-app/">JetBrains Toolbox</a> — Le gestionnaire d’IDE JetBrains, qui ajoute ses scripts au PATH.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_pour_aller_plus_loin">Pour aller plus loin</h3> <div class="ulist"> <ul> <li> <p><a href="https://blog.andy2003.org/posts/2022/zsh-dotfiles/">Zsh dotfiles : un guide complet</a> — Article approfondi sur la gestion des dotfiles Zsh.</p> </li> <li> <p><a href="https://wiki.archlinux.org/title/Zsh">Zsh sur ArchWiki</a> — L’une des meilleures documentations communautaires sur Zsh.</p> </li> <li> <p><a href="https://github.com/nvm-sh/nvm/issues">NVM issues GitHub</a> — Pour voir les discussions autour du symlink <code>current</code> et des problèmes de PATH.</p> </li> </ul> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0105_integrer_graphify_workflow_gradle_post.html Sun, 19 Apr 2026 00:00:00 +0000 blog/2026/0105_integrer_graphify_workflow_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_समस्या_कोड_से_हमेशा_पीछे_रहने_वाले_आरेख">समस्या: कोड से हमेशा पीछे रहने वाले आरेख</a></li> <li><a href="#_हल_एक_निर्धारित_knowledge_graph_plantuml">हल : एक निर्धारित Knowledge Graph → PlantUML</a></li> <li><a href="#_चरण_1_graphify_स्थापित_करें_और_knowledge_graph_निकालें">चरण 1 : Graphify स्थापित करें और Knowledge Graph निकालें</a> <ul class="sectlevel2"> <li><a href="#_स्थापना">स्थापना</a></li> <li><a href="#_अपवर्जन_कॉन्फ़िगर_करें">अपवर्जन कॉन्फ़िगर करें</a></li> <li><a href="#_knowledge_graph_निकालें">Knowledge Graph निकालें</a></li> </ul> </li> <li><a href="#_चरण_2_gradle_प्लगिन_knowledge_graph_को_plantuml_में_परिवर्तित_करता_है">चरण 2 : Gradle प्लगिन Knowledge Graph को PlantUML में परिवर्तित करता है</a> <ul class="sectlevel2"> <li><a href="#_पाइपलाइन_आर्किटेक्चर">पाइपलाइन आर्किटेक्चर</a></li> <li><a href="#_आंतरिक_घटक">आंतरिक घटक</a></li> <li><a href="#_रेंडरिंग_के_नियम">रेंडरिंग के नियम</a></li> </ul> </li> <li><a href="#_चरण_3_दैनिक_उपयोग">चरण 3: दैनिक उपयोग</a> <ul class="sectlevel2"> <li><a href="#_पूर्ण_आरेख">पूर्ण आरेख</a></li> <li><a href="#_समुदाय_द्वारा_फ़िल्टर_करें">समुदाय द्वारा फ़िल्टर करें</a></li> <li><a href="#_किनारे_के_प्रकार_द्वारा_फ़िल्टर_करें">किनारे के प्रकार द्वारा फ़िल्टर करें</a></li> <li><a href="#_नोड_प्रकार_और_विश्वास_द्वारा_फ़िल्टर">नोड प्रकार और विश्वास द्वारा फ़िल्टर</a></li> <li><a href="#_कस्टम_आउटपुट_निर्देशिका">कस्टम आउटपुट निर्देशिका</a></li> <li><a href="#_référence_complète_des_propriétés">Référence complète des propriétés</a></li> </ul> </li> <li><a href="#_ग्रैडल_वर्कफ़्लो_में_पूर्ण_पाइपलाइन">ग्रैडल वर्कफ़्लो में पूर्ण पाइपलाइन</a> <ul class="sectlevel2"> <li><a href="#_workflow_type">Workflow type</a></li> <li><a href="#_विकास_चक्र_में_एकीकरण">विकास चक्र में एकीकरण</a></li> <li><a href="#_इंक्रीमेंटल_अपडेट">इंक्रीमेंटल अपडेट</a></li> </ul> </li> <li><a href="#_डॉगफ़ूडिंग_प्लगइन_स्वयं_दस्तावेज़ित_करता_है">डॉगफ़ूडिंग : प्लगइन स्वयं दस्तावेज़ित करता है</a></li> <li><a href="#_यह_क्यों_निर्धारित_है_और_यह_क्यों_मायने_रखता_है">यह क्यों निर्धारित है (और यह क्यों मायने रखता है)</a></li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a> <ul class="sectlevel1"> <li><a href="#_पाइपलाइन_के_स्वयं_के_आरेख">पाइपलाइन के स्वयं के आरेख</a></li> <li><a href="#_परियोजना_शासन_में_एकीकरण">परियोजना शासन में एकीकरण</a></li> <li><a href="#_स्थापना_5_मिनट_की_चेकलिस्ट">स्थापना: 5 मिनट की चेकलिस्ट</a></li> <li><a href="#_जाल_और_उपाय">जाल और उपाय</a></li> <li><a href="#_जो_अंत_में_प्राप्त_होता_है">जो अंत में प्राप्त होता है</a></li> <li><a href="#_लिंक">लिंक</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">पढ़ने का समय : 12 minutes</div> <p>आपका कोडबेस बढ़ रहा है। मॉड्यूल के बीच की निर्भरताएँ बढ़ रही हैं। आर्किटेक्चर दस्तावेज़ लिखे जाने से पहले ही पुराना हो जाता है। और यदि आपका Gradle बिल्ड <em>स्वचालित रूप से</em> वास्तविक कोड संरचना से अप-टू-डेट डायग्राम उत्पन्न कर सके ? यह बिल्कुल वही है जो Graphify + PlantUML Gradle प्लगइन पाइपलाइन करता है :`graphify . --no-viz`Knowledge Graph का अंश,`./gradlew generateKnowledgeGraphDiagram`यह PlantUML डायग्राम में बदल देता है। शून्य LLM, शून्य मैनुअल, 100% निर्धारित।</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">टोक</dt> <dd> <p>(No output)</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_कोड_से_हमेशा_पीछे_रहने_वाले_आरेख">समस्या: कोड से हमेशा पीछे रहने वाले आरेख</h2> <div class="sectionbody"> <div class="paragraph"> <p>कु�ुछ हज़ार पंक्तियों से अधिक वाली हर परियोजना इस सिंड्रोम को जानती है:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>प्रोजेक्ट के प्रारंभ में एक आर्किटेक्चर डायग्राम बनाया जाता है</p> </li> <li> <p>कोड विकसित हो रहा है, निर्भरताएँ बदल रही हैं</p> </li> <li> <p>आरेख एक सजावटी झूठ बन जाता है</p> </li> <li> <p>कोई इसे अपडेट नहीं करता क्योंकि यह परेशान करने वाला है</p> </li> <li> <p>नए आगंतुक इस पर भरोसा करते हैं और गलतियाँ करते हैं</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="./images/probleme-diagrammes-obsoletes.svg" alt="probleme diagrammes obsoletes" width="824" height="418"> </div> </div> <div class="paragraph"> <p><em>क्या चित्र होना चाहिए ?</em> — हर कोई जानता है कि हाँ। प्रश्न यह है :<strong>कौन उन्हें अपडेट रखता है?</strong></p> </div> <div class="paragraph"> <p>जवाब: कोई नहीं. सिवाय तब जब यह स्वचालित हो।</p> </div> </div> </div> <div class="sect1"> <h2 id="_हल_एक_निर्धारित_knowledge_graph_plantuml">हल : एक निर्धारित Knowledge Graph → PlantUML</h2> <div class="sectionbody"> <div class="paragraph"> <p>सिद्धांत सरल है : हाथ से आरेख बनाने के बजाय, हम उन्हें<strong>वास्तविक कोड संरचना से उत्पन्न</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "ग्राफ़िफाई\n(pip install graphifyy)" as Graphify collections "graphify-out/graph.json ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "ग्राफ़िफाई\n(pip install graphifyy)" as Graphify collections "graphify-out/graph.json (ज्ञान ग्राफ़)" as KGJSON component "PlantUML Gradle प्लगइन (generateKnowledgeGraphDiagram)" as Plugin component "नॉलेजग्राफ़पार्सर" as Parser component "KnowledgeGraphRenderer" as Renderer component "PlantumlService (सत्यापन + PNG रेंडर)" as PS collections "आरेख/ज्ञान-ग्राफ/\n(.puml + .png)" as Output Développeur --> Graphify : graphify . --no-viz Graphify --> KGJSON : extrait la structure\ndu code source Développeur --> Plugin : ./gradlew generateKnowledgeGraphDiagram Plugin --> Parser : parse(graph.json) Parser --> Plugin : KnowledgeGraph\n(noeuds + arêtes + communautés) Plugin --> Renderer : render(graph, filters) Renderer --> Plugin : code PlantUML\ndéterministe Plugin --> PS : validateSyntax + generateImage PS --> Output : .puml + .png note bottom of Plugin Pipeline DÉTERMINISTE Aucun appel LLM Résultat reproductible end note @enduml</pre> </div> </div> <div class="paragraph"> <p>दो कमांड। यही सब।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Étape 1 : extraire le Knowledge Graph graphify . --no-viz # Étape 2 : générer les diagrammes PlantUML ./gradlew generateKnowledgeGraphDiagram</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम? फ़ाइलें`.puml` et <code>.png`में`diagrams/knowledge-graph/</code>, Git में संस्करणित, कोड के साथ हमेशा अद्यतन.</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_1_graphify_स्थापित_करें_और_knowledge_graph_निकालें">चरण 1 : Graphify स्थापित करें और Knowledge Graph निकालें</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_स्थापना">स्थापना</h3> <div class="paragraph"> <p>Graphify एक Python उपकरण है जो आपके कोडबेस का विश्लेषण करता है और एक संरचित ज्ञान ग्राफ़ बनाता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Méthode recommandée uv tool install graphifyy && graphify install --platform opencode # Alternative avec pip pip install graphifyy && graphify install --platform opencode</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_अपवर्जन_कॉन्फ़िगर_करें">अपवर्जन कॉन्फ़िगर करें</h3> <div class="paragraph"> <p>एक फ़ाइल बनाएँ`.graphifyignore`परियोजना के मूल पर व्यापार तर्क का हिस्सा न होने वाले फ़ाइलों को बाहर रखने के लिए:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-gitignore hljs" data-lang="gitignore"># Secrets — JAMAIS dans le graphe *-context.yml *.env # Fichiers générés build/ .gradle/ # Tests fonctionnels src/functionalTest/</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_knowledge_graph_निकालें">Knowledge Graph निकालें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">graphify . --no-viz</code></pre> </div> </div> <div class="paragraph"> <p>झंडा`--no-viz`HTML जनरेशन को छोड़ दें (Gradle पाइपलाइन में अनावश्यक)। परिणाम एक फ़ाइल है`graphify-out/graph.json`शामिल :</p> </div> <div class="ulist"> <ul> <li> <p><strong>नोड</strong>: क्लासेस, फ़ंक्शन, फ़ाइलें — उनके प्रकार और समुदाय के साथ</p> </li> <li> <p><strong>किनारों</strong>नोड्स के बीच संबंध (EXTRACTED कोड से, INFERRED LLM द्वारा)</p> </li> <li> <p><strong>समुदाय</strong>: संबंधित नोड्स के स्वचालित समूह</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Exemple de structure <code>graph.json</code></div> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "nodes": [ {"id": "0", "label": "LlmService", "file_type": "code", "community": 0}, {"id": "1", "label": "ApiKeyPool", "file_type": "code", "community": 0}, {"id": "2", "label": "PlantumlService", "file_type": "code", "community": 1} ], "links": [ {"source": "1", "target": "0", "relation": "uses", "confidence": "EXTRACTED", "weight": 0.9}, {"source": "0", "target": "2", "relation": "calls", "confidence": "INFERRED", "weight": 0.7} ] }</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>स्रोत कोड (<code>.kt</code>, <code>.java`पेड़-सिटर द्वारा स्थानीय रूप से विश्लेषित किया जाता है,<strong>अपील के बिना LLM</strong>. केवल दस्तावेज़ फ़ाइलें (</code>.adoc`, <code>.md</code>) को SEMANTIC EXTRACTION के लिए LLM कॉल की आवश्यकता होती है। इसलिए`--update`कोटलिन कोड पर यह लगभग तात्कालिक है।</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_2_gradle_प्लगिन_knowledge_graph_को_plantuml_में_परिवर्तित_करता_है">चरण 2 : Gradle प्लगिन Knowledge Graph को PlantUML में परिवर्तित करता है</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पाइपलाइन_आर्किटेक्चर">पाइपलाइन आर्किटेक्चर</h3> <div class="paragraph"> <p>प्लगइन`com.cheroliv.plantuml`एक कार्य शामिल करता है`generateKnowledgeGraphDiagram`जो बदलता है`graph.json`PlantUML डायग्रामों में तरीके से<strong>पूरी तरह से निर्धारक</strong>:</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-pipeline-kg.svg" alt="architecture pipeline kg" width="1109" height="450"> </div> </div> </div> <div class="sect2"> <h3 id="_आंतरिक_घटक">आंतरिक घटक</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">घटक</th> <th class="tableblock halign-left valign-top">भूमिका</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>KnowledgeGraphParser</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पार्स`graph.json`— 3 प्रारूपों का समर्थन करता है : नैटिव graphify (<code>nodes</code>+<code>links</code>), legacy (<code>communities</code>), flat. संख्यात्मक IDs को लेबल में बदलता है.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>KnowledgeGraphRenderer</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक का निर्धारित रूप से रूपांतरण करें`KnowledgeGraph`कोड में PlantUML. प्रकार के अनुसार समूह, पैकेज में समुदाय, स्वचालित कथा।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>GenerateKnowledgeGraphDiagramTask</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">ग्रेडल टास्क जो पार्स → रेंडर → वैलिडेट → PNG को ऑर्केस्ट्रेट करता है। ग्रेडल प्रॉपर्टीज़ द्वारा कॉन्फ़िगर योग्य।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>kgmodels.kt</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">डेटा मॉडल:`KnowledgeGraph`, <code>KnowledgeGraphNode</code>, <code>KnowledgeGraphEdge</code>, <code>KnowledgeGraphCommunity</code>, <code>EdgeType</code>.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>PlantumlService</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सिंटैक्स मान्यता + PNG रेंडरिंग (प्लगिन के सभी कार्यों द्वारा पुनः उपयोग किया जाता है).</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_रेंडरिंग_के_नियम">रेंडरिंग के नियम</h3> <div class="paragraph"> <p>रेंडरर निर्धारित दृश्य सम्मेलनों को लागू करता है:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">किनारे का प्रकार</th> <th class="tableblock halign-left valign-top">नोटेशन PlantUML</th> <th class="tableblock halign-left valign-top">अर्थ</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">निकाला</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>-→</code>(सॉलिड स्ट्रोक, काला)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">स्रोत कोड से निकाला गया संबंध (निश्चितता)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">अनुमानित</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>..></code>(टूटा-फूटा रेखा)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LLM द्वारा अनुमानित संबंध (विश्वास स्कोर)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">अस्पष्ट</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>--x</code>(लाल बिंदुदार रेखा)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">अस्पष्ट संबंध (सत्यापित करने के लिए)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>समुदायों को PlantUML पैकेज के रूप में स्वचालित रंग पैलेट के साथ प्रस्तुत किया जाता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_3_दैनिक_उपयोग">चरण 3: दैनिक उपयोग</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पूर्ण_आरेख">पूर्ण आरेख</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Générer le diagramme du Knowledge Graph complet ./gradlew generateKnowledgeGraphDiagram</code></pre> </div> </div> <div class="paragraph"> <p>आउटपुट :`diagrams/knowledge-graph/knowledge-graph-full.puml`(output empty string as no French text was provided for translation)<code>.png</code></p> </div> </div> <div class="sect2"> <h3 id="_समुदाय_द्वारा_फ़िल्टर_करें">समुदाय द्वारा फ़िल्टर करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Une seule communauté ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.community=community_0 # Limiter le nombre de noeuds (lisibilité) ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.community=community_0 \ -Pplantuml.kg.maxNodes=15</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_किनारे_के_प्रकार_द्वारा_फ़िल्टर_करें">किनारे के प्रकार द्वारा फ़िल्टर करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Uniquement les relations certaines (EXTRACTED) ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.edgeTypes=EXTRACTED # Relations certaines + inférées ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.edgeTypes=EXTRACTED,INFERRED</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_नोड_प्रकार_और_विश्वास_द्वारा_फ़िल्टर">नोड प्रकार और विश्वास द्वारा फ़िल्टर</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Uniquement les classes de code ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.nodeTypes=code # Seuil de confiance minimum (pour les INFERRED) ./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.minConfidence=0.7</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_कस्टम_आउटपुट_निर्देशिका">कस्टम आउटपुट निर्देशिका</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew generateKnowledgeGraphDiagram \ -Pplantuml.kg.outputDir=docs/architecture</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_référence_complète_des_propriétés">Référence complète des propriétés</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">संपत्ति</th> <th class="tableblock halign-left valign-top">दोष</th> <th class="tableblock halign-left valign-top">विवरण</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.community</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><em>(सभी)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नाम द्वारा समुदाय फ़िल्टर करें (उप-स्ट्रिंग मिलान)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.edgeTypes</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(सभी)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कॉमा द्वारा पृथक किनारा प्रकार:`EXTRACTED`, <code>INFERRED</code>, <code>AMBIGUOUS</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.minConfidence</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>0.0</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">किनारों के लिए विश्वास की न्यूनतम सीमा</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.maxNodes</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><em>(असीमित)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रदर्शित करने के लिए अधिकतम नोड्स की संख्या</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.nodeTypes</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><em>(सभी)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">विराम चिह्नों द्वारा अलग किए गए नोड प्रकार (उदाहरण`class`, <code>code</code>)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.outputDir</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>diagrams/knowledge-graph</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ाइलों के लिए आउटपुट निर्देशिका`.puml` et <code>.png</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ग्रैडल_वर्कफ़्लो_में_पूर्ण_पाइपलाइन">ग्रैडल वर्कफ़्लो में पूर्ण पाइपलाइन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_workflow_type">Workflow type</h3> <div class="imageblock"> <div class="content"> <img src="./images/workflow-complet.svg" alt="workflow complet" width="618" height="714"> </div> </div> </div> <div class="sect2"> <h3 id="_विकास_चक्र_में_एकीकरण">विकास चक्र में एकीकरण</h3> <div class="paragraph"> <p>पाइपलाइन विकास के प्रमुख चरणों में सहजता से एकीकृत होती है :</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE state "विकास" as dev state "निष्कर्षण ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE state "विकास" as dev state "निष्कर्षण graphify . --no-viz" as extract state "पीढ़ी ./gradlew generateKnowledgeGraphDiagram" as generate state "Commit वर्ज़न किए गए आरेख" as commit [*] --> dev dev --> extract : Code modifié extract --> generate : graph.json à jour generate --> commit : .puml + .png générés commit --> dev : Diagrammes dans le repo note right of extract Quasi instantané sur du code Kotlin (tree-sitter, pas de LLM) end note note right of generate Déterministe Pas de LLM Résultat reproductible end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_इंक्रीमेंटल_अपडेट">इंक्रीमेंटल अपडेट</h3> <div class="paragraph"> <p>जब कोड बदलता है, हम शून्य से पूरे ग्राफ को फिर से नहीं बनाते :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Mise à jour incrémentale (fichiers modifiés uniquement) graphify . --update # Puis régénérer les diagrammes ./gradlew generateKnowledgeGraphDiagram</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p><code>--update`यह केवल संशोधित फ़ाइलों को फिर से निकालता है (SHA256 द्वारा पता लगाए गए में`graphify-out/cache/</code>). Kotlin कोड पर, यह लगभग तात्कालिक है क्योंकि tree-sitter स्थानीय रूप से काम करता है, कोई LLM कॉल नहीं।</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_डॉगफ़ूडिंग_प्लगइन_स्वयं_दस्तावेज़ित_करता_है">डॉगफ़ूडिंग : प्लगइन स्वयं दस्तावेज़ित करता है</h2> <div class="sectionbody"> <div class="paragraph"> <p>PlantUML प्लगइन प्रॉम्प्ट को डायग्राम में बदलने के लिए मौजूद है। यह अपने <em>propre</em> कोडबेस के Knowledge Graph को भी दस्तावेज़ीकरण डायग्राम में बदल सकता है। यह <em>dogfooding</em> है: प्लगइन अपनी ही सेवा का उपभोग करता है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "सामान्य पाइपलाइन (उपयोगकर्ता → आरेख)" as normal { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "सामान्य पाइपलाइन (उपयोगकर्ता → आरेख)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --> task1 task1 --> llm1 llm1 --> out1 } package "पाइपलाइन ज्ञान ग्राफ (निर्धारित, LLM नहीं)" as kg { [graphify-out/graph.json] as kgjson [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantumlService] as ps [Diagramme PNG\n(documentation du plugin)] as out2 kgjson --> parser parser --> renderer renderer --> ps ps --> out2 } package "पाइपलाइन डॉगफूडिंग (LLM → प्लगइन की दस्तावेज़ीकरण)" as dogfood { [GraphifyPromptAdapter] as gpa [Fichiers .prompt\nauto-générés] as auto_prompt [LlmService\n+ ApiKeyPool] as llm2 [ProcessPlantumlPromptsTask] as task2 [Diagramme PNG\n(documentation LLM)] as out3 kgjson --> gpa gpa --> auto_prompt auto_prompt --> task2 task2 --> llm2 llm2 --> out3 } note "एक ही LlmService, एक ही ApiKeyPool, एक ही PlantumlService — शून्य डुप्लीकेशन" as N @enduml</pre> </div> </div> <div class="paragraph"> <p>सम्बद्ध Gradle कार्य :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">कार्य</th> <th class="tableblock halign-left valign-top">LLM ?</th> <th class="tableblock halign-left valign-top">Description</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>generateKnowledgeGraphDiagram</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बदलो`graph.json`PlantUML (निर्धारित) में</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>generateDiagramDocs</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हाँ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कुछ उत्पन्न करें`.prompt`ग्राफ़ से, इसे LLM के माध्यम से संसाधित करता है (dogfooding)</p></td> </tr> </tbody> </table> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Documentation déterministe (rapide, pas de LLM) ./gradlew generateKnowledgeGraphDiagram # Documentation LLM (plus riche, consomme des tokens) ./gradlew generateDiagramDocs</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_यह_क्यों_निर्धारित_है_और_यह_क्यों_मायने_रखता_है">यह क्यों निर्धारित है (और यह क्यों मायने रखता है)</h2> <div class="sectionbody"> <div class="paragraph"> <p>पाइपलाइन का मुख्य बिंदु`generateKnowledgeGraphDiagram`:<strong>वह किसी भी LLM को नहीं बुलाता</strong>. परिवर्तन`graph.json`<mark>#</mark> JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</p> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="paragraph"> <p>PlantUML एक शुद्ध फ़ंक्शन है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 16) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "पाइपलाइन निर्धारित\n(generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --> parser : parse parser --> renderer : KnowledgeGraph renderer --> puml : render (fonction pure) } rectangle "Pipeline LLM ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "पाइपलाइन निर्धारित\n(generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --> parser : parse parser --> renderer : KnowledgeGraph renderer --> puml : render (fonction pure) } rectangle "Pipeline LLM (processPlantumlPrompts)" as llm { [.prompt] as prompt [LlmService] as llmSvc [ChatModel] as model [PlantUML code] as puml2 prompt --> llmSvc llmSvc --> model : API call model --> puml2 : réponse non-déterministe } note bottom of det Même entrée → même sortie Pas de latence réseau Pas de coût en tokens Reproductible en CI end note note bottom of llm Même entrée → sortie variable Latence réseau (1-5s) Coût en tokens Nécessite une clave API end note @enduml</pre> </div> </div> <div class="paragraph"> <p>वास्तविक लाभ :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">लाभ</th> <th class="tableblock halign-left valign-top">प्रभाव</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">पुनरावृत्ति योग्यता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">भी`graph.json`→ एक ही आरेख. सटीक रूप से. हर बार.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">शून्य लागत</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोई LLM कॉल नहीं = कोई टोकन नहीं = कोई API बिल नहीं</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">शून्य विलंब</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Parse + render ~100ms लेता है, 1-5 सेकंड नहीं</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">संगत CI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोई API कुंजी आवश्यक नहीं है। कोई अस्थिर परीक्षण नहीं है जो परिवर्तनशील LLM प्रतिक्रिया के कारण हो।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">संस्करणीय</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le <code>.puml`जेनरेट किया गया पाठ है। हम इसे कर सकते हैं।`diff</code>, PR में समीक्षक, Git में वर्ज़न करें।</p></td> </tr> </tbody> </table> <div class="sect1"> <h2 id="_पाइपलाइन_के_स्वयं_के_आरेख">पाइपलाइन के स्वयं के आरेख</h2> <div class="sectionbody"> <div class="paragraph"> <p>पाइपलाइन को पूरा करने के लिए, यहाँ प्लगइन द्वारा उत्पन्न किया जाने वाला पाइपलाइन का आरेख दिया गया है :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/pipeline-sequence.svg" alt="pipeline sequence" width="1634" height="554"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_परियोजना_शासन_में_एकीकरण">परियोजना शासन में एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारे प्रोजेक्ट में, यह पाइपलाइन AI एजेंट के लिए EAGER/LAZY संदर्भ प्रबंधन रणनीति में एकीकृत है। Knowledge Graph मानव-निर्मित आर्किटेक्चर दस्तावेज़ीकरण को एक संरचित, क्वेरी योग्य और स्वचालित रूप से अपडेट किए जाने वाले ग्राफ़ से बदलता है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 11) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(हमेशा चार्ज)" as eager { [PROMPT_REPRISE.adoc\n(contexte session)] as pr [INDEX.adoc\n(vue d'ensemble)] as idx [GRAPH_REPORT.adoc\n(~50 lignes)] as gr } package "LAZY — रणनीति ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(हमेशा चार्ज)" as eager { [PROMPT_REPRISE.adoc\n(contexte session)] as pr [INDEX.adoc\n(vue d'ensemble)] as idx [GRAPH_REPORT.adoc\n(~50 lignes)] as gr } package "LAZY — रणनीति (अनुरोध पर)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify (लक्षित प्रश्न)" as lazy_graph { [graph.json] as gj [Queries\n(query/path/explain)] as queries } package "Pipeline PlantUML (स्वचालित रूप से उत्पन्न)" as puml { [generateKnowledgeGraphDiagram] as kgTask [generateDiagramDocs] as ddTask [Diagrammes PNG] as diagrams } Agent --> eager : Lit en début de session Agent ..> lazy_strat : Charge si type détecté Agent ..> lazy_graph : Query si besoin structurel kgTask --> diagrams : Déterministe ddTask --> diagrams : Via LLM note right of gr Condensé du Knowledge Graph God nodes + communautés Remplace ECOSYSTEM_OVERVIEW (225 lignes → 50 lignes) end note @enduml</pre> </div> </div> <div class="paragraph"> <p>दो प्रणालियों का विवाह पूरक है :</p> </div> <div class="ulist"> <ul> <li> <p><strong>रणनीति कब और कैसे का प्रबंधन करती है</strong>— शासन, वर्कफ़्लो, संग्रह</p> </li> <li> <p><strong>Graphify QUOI और OÙ का प्रबंधन करता है</strong>— कोड संरचना, संबंध, लक्षित प्रश्न</p> </li> </ul> </div> <div class="paragraph"> <p>(No output) सत्र रणनीति प्रबंधन करती है<strong>जब</strong> et le <strong>कैसे</strong>(शासन, वर्कफ़्लो, सीमाएं), Graphify इसे प्रबंधित करता है<strong>क्या</strong> et le <strong>कहाँ</strong>(कोड संरचना, संबंध, लक्षित क्वेरीज़)। PlantUML पाइपलाइन इसे प्रबंधित करता है<strong>किससे</strong>(निर्धारित आरेख, संस्करणित, हमेशा अद्यतन). (No output)</p> </div> </div> </div> <div class="sect1"> <h2 id="_स्थापना_5_मिनट_की_चेकलिस्ट">स्थापना: 5 मिनट की चेकलिस्ट</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">(no output)</th> <th class="tableblock halign-left valign-top">चरण</th> <th class="tableblock halign-left valign-top">आदेश</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">इंस्टॉल Graphify</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>uv tool install graphifyy</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">अपवर्जन को कॉन्फ़िगर करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बनाना`.graphifyignore`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नॉलेज ग्राफ़ निकालें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>graphify . --no-viz</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">आरेख तैयार करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>./gradlew generateKnowledgeGraphDiagram</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">परिणामों को कमिट करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>git add diagrams/knowledge-graph/</code></p></td> </tr> </tbody> </table> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Script complet en 5 commandes uv tool install graphifyy cat > .graphifyignore << 'EOF' *-context.yml *.env build/ .gradle/ EOF graphify . --no-viz ./gradlew generateKnowledgeGraphDiagram git add graphify-out/GRAPH_REPORT.adoc graphify-out/graph.json diagrams/knowledge-graph/</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_जाल_और_उपाय">जाल और उपाय</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 33.3333%;"> <col style="width: 33.3334%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">जाल</th> <th class="tableblock halign-left valign-top">Description</th> <th class="tableblock halign-left valign-top">शमन</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">बहुत घना ग्राफ़</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक बड़े प्रोजेक्ट से सैकड़ों अपठनीय नोड्स उत्पन्न होते हैं</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">उपयोग करना`-Pplantuml.kg.maxNodes=30`और समुदाय द्वारा फ़िल्टर करें</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">बहुत व्यापक बहिष्करण</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बहुत सी फ़ाइलें में`.graphifyignore`यह ग्राफ़ के मान को कम करता है</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सिर्फ credentials और build को छोड़कर शुरू करें</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">तीरों की दिशा</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">अनुमानित किनारे INFERRED की दिशा अस्पष्ट होसकती है</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़िल्टर द्वारा`-Pplantuml.kg.edgeTypes=EXTRACTED`केवल कुछ संबंधों के लिए</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">अप्रचलित ग्राफ़</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोड बदलता है लेकिन ग्राफ़ पुनर्निर्मित नहीं होता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">उपयोग करना`graphify . --update`नियमित रूप से या गिट हुक`graphify hook install`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">अपडेटेड लागत</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">चरणबद्ध अपडेट लगभग मुफ्त हैं (स्थानीय ट्री‑सिटर)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">केवल दस्तावेज़ (<code>.adoc</code>) LLM टोकन खपत करते हैं</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_जो_अंत_में_प्राप्त_होता_है">जो अंत में प्राप्त होता है</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE rectangle "पहले" as avant { card "हाथ से खींचे गए आरेख हमेशा अप्रचलित ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "पहले" as avant { card "हाथ से खींचे गए आरेख हमेशा अप्रचलित कोई उन्हें अपडेट नहीं करता" as av1 #FDEDEC } rectangle "के बाद" as apres { card "स्वचालित रूप से बनाए गए आरेख हमेशा कोड के साथ अप-टू-डेट Git में संस्करणबद्ध निर्धारित और पुन:उत्पादन योग्य" as ap1 #E8F8E8 } avant --> apres : graphify . --no-viz\n+ ./gradlew generateKnowledgeGraphDiagram @enduml</pre> </div> </div> <div class="paragraph"> <p>वास्तविक लाभ :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">लाभ</th> <th class="tableblock halign-left valign-top">विवरण</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">दस्तावेज़ हमेशा अद्यतन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">डायग्राम वर्तमान कोड को दर्शाते हैं, कोई मैनुअल स्नैपशॉट नहीं</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">शून्य रखरखाव का प्रयास</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">आरेख प्रत्येक बिल्ड के साथ पुनः उत्पन्न होते हैं</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">तकनीकी ऋण में कमी</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">अब आरेख को हाथ से रखरखाव करने की ज़रूरत नहीं है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">दृश्य संदर्भ नए के लिए</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक नया डेवलपर आरेख देखकर आर्किटेक्चर समझता है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">संभावित सूक्ष्म समायोजन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जोड़ियाँ (सब-ग्राफ़ → आरेख) IA प्रशिक्षण के उदाहरण हैं</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">स्वचालित सत्यापन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`PlantumlService.validateSyntax()`प्रत्येक उत्पन्न आरेख की जाँच करता है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">तेज़ ऑनबोर्डिंग</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5 आरेख = आर्किटेक्चर का पूर्ण दृश्य</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>(No output) जिसके पास एक <em>kyon</em> है वह सभी <em>kaise</em> को सह सकता है। [No output]</p> </div> <div class="paragraph"> <p><em>क्यों</em> : हमेशा अद्यतन चित्र। <em>कैसे</em> : एक Gradle पाइपलाइन में दो कमांड।</p> </div> </div> </div> <div class="sect1"> <h2 id="_लिंक">लिंक</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nicholasgasior/graphify">GitHub पर Graphify</a></p> </li> <li> <p><a href="https://github.com/cheroliv/plantuml-gradle">PlantUML Gradle प्लगइन</a></p> </li> <li> <p><a href="/blog/2026/0104_fg_command_super_tips_post.html">fg कमांड के सुपर टिप्स</a>— पिछला आलेख टर्मिनल वर्कफ़्लो पर</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0104_fg_command_super_tips_post.html Sat, 18 Apr 2026 00:00:00 +0000 blog/2026/0104_fg_command_super_tips_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_समस्या_एक_व्यस्त_टर्मिनल">समस्या : एक व्यस्त टर्मिनल</a></li> <li><a href="#_तीन_अनिवार्य_आदेश">तीन अनिवार्य आदेश</a> <ul class="sectlevel2"> <li><a href="#_ctrlz_रोकें_sigtstp">Ctrl+Z — रोकें (SIGTSTP)</a></li> <li><a href="#_fg_अग्रभूमि_में_लाएँ">fg — अग्रभूमि में लाएँ</a></li> <li><a href="#_bg_पृष्ठभूमि_में_जारी_रखना">bg — पृष्ठभूमि में जारी रखना</a></li> <li><a href="#_jobs_शेल_के_कार्यों_को_सूचीबद्ध_करना">jobs — शेल के कार्यों को सूचीबद्ध करना</a></li> </ul> </li> <li><a href="#_परिदृश्य_1_लंबा_बिल्ड">परिदृश्य 1 : लंबा बिल्ड</a> <ul class="sectlevel2"> <li><a href="#_चरण_दर_चरण">चरण-दर-चरण</a></li> </ul> </li> <li><a href="#_स्केनेरियो_2_भुला_हुआ_संपादक">स्केनेरियो 2: भुला हुआ संपादक</a></li> <li><a href="#_परिदृश्य_3_opencode_प्रक्रिया_निलंबित">परिदृश्य 3: opencode प्रक्रिया निलंबित</a></li> <li><a href="#_परिदृश्य_4_कई_जॉब्स_को_एक_साथ_प्रबंधित_करें">परिदृश्य 4: कई जॉब्स को एक साथ प्रबंधित करें</a> <ul class="sectlevel2"> <li><a href="#_कार्यों_के_आदेशों_का_सारांश">कार्यों के आदेशों का सारांश</a></li> </ul> </li> <li><a href="#_fg_bg_ctrlz_ctrlc_और_के_अंतर">fg, bg, Ctrl+Z, Ctrl+C और & के अंतर</a></li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_resetगैर_विध्वंसक_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i">Clear the output directory before baking jbake -b . output --reset<strong>गैर-विध्वंसक</strong><mark>#</mark> JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</a></li> <li><a href="#_bake_generate_the_site_jbake_b_2">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s_2">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset_2">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder_2">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a> <ul class="sectlevel1"> <li><a href="#_एक_जॉब_का_पूरा_जीवन_चक्र">एक जॉब का पूरा जीवन चक्र</a></li> <li><a href="#_उन्नत_टिप्स">उन्नत टिप्स</a> <ul class="sectlevel2"> <li><a href="#_fg_नौकरी_के_साथ_सबसे_नया_और_अल्टरनेन्स">fg नौकरी के साथ सबसे नया और अल्टरनेन्स</a></li> <li><a href="#_काम_को_सही_तरीके_से_पूरा_करना">काम को सही तरीके से पूरा करना</a></li> <li><a href="#_désown_शेल_से_अलग_करें">désown : शेल से अलग करें</a></li> <li><a href="#_nohup_के_साथ_मिलाएँ_लंबी_प्रक्रियाओं_के_लिए">nohup के साथ मिलाएँ लंबी प्रक्रियाओं के लिए</a></li> </ul> </li> <li><a href="#_जाल_और_सामान्य_त्रुटियाँ">जाल और सामान्य त्रुटियाँ</a> <ul class="sectlevel2"> <li><a href="#_ctrlz_और_ctrlc_को_भ्रमित_करना">Ctrl+Z और Ctrl+C को भ्रमित करना</a></li> <li><a href="#_जॉब्स_शेल_के_लिए_स्थानीय_होते_हैं">जॉब्स शेल के लिए स्थानीय होते हैं</a></li> <li><a href="#_जॉब्स_शेल_बंद_होने_पर_जीवित_नहीं_रहते">जॉब्स शेल बंद होने पर जीवित नहीं रहते।</a></li> <li><a href="#_इंटरएक्टिव_प्रक्रियाएँ_और_fg">इंटरएक्टिव प्रक्रियाएँ और fg</a></li> </ul> </li> <li><a href="#_सारांश_आरेख">सारांश आरेख</a></li> <li><a href="#_fg_क्यों_कम_आंका_गया">fg क्यों कम आंका गया</a></li> </ul> </li> <li><a href="#_bake_generate_the_site_jbake_b_3">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s_3">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset_3">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder_3">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset_है">Clear the output directory before baking jbake -b . output --reset <code>`</code> है :</a> <ul class="sectlevel1"> <li><a href="#_तकनीकी_ज्ञापन_संकेत">तकनीकी ज्ञापन : संकेत</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_संदर्भ">संदर्भ</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">पढ़ने का समय : 10 minutes</div> <p>आप फेंकते हैं`./gradlew build`, टर्मिनल 3 मिनट के लिए ब्लॉक किया गया है, और आपको कुछ और करने की आवश्यकता है <em>en attendant</em> ? नए टैब खोलने की आवश्यकता नहीं है.`Ctrl+Z`प्रक्रिया को सस्पेंड करें`fg`इसे बिल्कुल वहीं लाया जाता है जहाँ आपने उसे छोड़ा था। यह डेवलपर के दैनिक जीवन का सबसे कम आंका जाने वाला यूनिक्स टिप है।</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">सामग्री की तालिका</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_एक_व्यस्त_टर्मिनल">समस्या : एक व्यस्त टर्मिनल</h2> <div class="sectionbody"> <div class="paragraph"> <p>हर डेवलपर ने इस स्थिति को अनुभव किया है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building...</code></pre> </div> </div> <div class="paragraph"> <p>और आपको एक फ़ाइल देखनी है, एक लॉन्च करना है`git status`, या एक व्यस्त पोर्ट की जांच करें।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "टर्मिनल" as term participant "Gradle ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "टर्मिनल" as term participant "Gradle ( प्रक्रिया )" as gradle dev -> term : ./gradlew build term -> gradle : Lance le build gradle -> term : Occupe le terminal\n(pas de prompt) dev -> term : veut taper une commande term --> dev : ❌ Terminal bloqué note right of dev Le développeur est paralysé pendant toute la durée du build end note @enduml</pre> </div> </div> <div class="paragraph"> <p>अधिकांश डेवलपर्स एक नया टर्मिनल खोलते हैं। लेकिन एक अधिक सुंदर, तेज़ और मूल समाधान मौजूद है: जॉब प्रबंधन।</p> </div> </div> </div> <div class="sect1"> <h2 id="_तीन_अनिवार्य_आदेश">तीन अनिवार्य आदेश</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrlz_रोकें_sigtstp">Ctrl+Z — रोकें (SIGTSTP)</h3> <div class="paragraph"> <p>`Ctrl+Z`सिग्नल भेजो`SIGTSTP`अग्रभूमि प्रक्रिया में. प्रक्रिया है<strong>निलंबित</strong>— नहीं मारा गया — और टर्मिनल अपना प्रॉम्प्ट फिर से प्राप्त करता है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building... ^Z [1]+ Stoppé ./gradlew build $</code></pre> </div> </div> <div class="paragraph"> <p>कोष्ठकों के बीच की संख्या`[1]` est le <strong>जॉब नंबर</strong>. Le `+`डिफ़ॉल्ट जॉब को दर्शाता है।</p> </div> </div> <div class="sect2"> <h3 id="_fg_अग्रभूमि_में_लाएँ">fg — अग्रभूमि में लाएँ</h3> <div class="paragraph"> <p>`fg`यह निलंबित कार्य को अग्रभूमि में लाता है। प्रक्रिया ठीक उसी स्थान से फिर से शुरू हो जाती है जहाँ वह रुकी थी।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ fg ./gradlew build > Building... (reprend où il en était)</code></pre> </div> </div> <div class="paragraph"> <p>एक विशिष्ट जॉब नंबर के साथ:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ fg %2</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_bg_पृष्ठभूमि_में_जारी_रखना">bg — पृष्ठभूमि में जारी रखना</h3> <div class="paragraph"> <p>`bg`प्रक्रिया को टर्मिनल ब्लॉक किए बिना फिर से शुरू करता है। लंबे बील्ड्स के लिए आदर्श।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ bg [1]+ ./gradlew build & $</code></pre> </div> </div> <div class="paragraph"> <p>Le `&`अंत में इसका मतलब है कि प्रक्रिया बैकग्राउंड में चल रही है.</p> </div> </div> <div class="sect2"> <h3 id="_jobs_शेल_के_कार्यों_को_सूचीबद्ध_करना">jobs — शेल के कार्यों को सूचीबद्ध करना</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ jobs [1]- Stoppé vim README.md [2]+ En cours ./gradlew build</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif state "अग्रभूमि\n(ब्लॉक्ड टर्मिनल)" as fg #LightCoral state "निलंबित ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif state "अग्रभूमि\n(ब्लॉक्ड टर्मिनल)" as fg #LightCoral state "निलंबित (Ctrl+Z)" as stopped #LightYellow state "पृष्ठभूमि\n(bg)" as bg_ #LightGreen [*] --> fg : Lance une commande fg --> stopped : Ctrl+Z\n(SIGTSTP) stopped --> fg : fg\nreprend en avant-plan stopped --> bg_ : bg\nreprend en arrière-plan bg_ --> fg : fg\nramène en avant-plan fg --> [*] : Commande terminée note right of stopped Le processus est figé mais _pas_ tué end note note left of bg_ Le terminal est libre le build continue end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_परिदृश्य_1_लंबा_बिल्ड">परिदृश्य 1 : लंबा बिल्ड</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह सबसे सामान्य उपयोग का मामला है। आप एक Gradle बिल्ड शुरू करते हैं, टर्मिनल ब्लॉक हो जाता है, और आपको कुछ अन्य करने की आवश्यकता होती है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 8) ] @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "टर्मिनल" as term participant "Gradle" as gradle database "स्थिति ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "टर्मिनल" as term participant "Gradle" as gradle database "स्थिति प्रक्रिया" as state dev -> term : ./gradlew build term -> gradle : Lance le build gradle -> state : En cours (FG) dev -> term : Ctrl+Z term -> state : Suspendu (job [1]) term --> dev : Prompt libre $ dev -> term : git status term --> dev : working tree clean dev -> term : fg term -> state : Reprend (FG) gradle --> dev : Build réussi ✓ note right of state Le processus Gradle n'a jamais été tué Il reprend exactement où il s'était arrêté end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_चरण_दर_चरण">चरण-दर-चरण</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building... ^Z [1]+ Stoppé ./gradlew build $ git status On branch main nothing to commit, working tree clean $ fg ./gradlew build > Building... BUILD SUCCESSFUL in 2m 34s</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_स्केनेरियो_2_भुला_हुआ_संपादक">स्केनेरियो 2: भुला हुआ संपादक</h2> <div class="sectionbody"> <div class="paragraph"> <p>आप में हैं`vim`, आपको किसी अन्य फ़ाइल को देखना है बिना बाहर निकले`vim`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Dans vim, en mode commande : :shell $ cat /path/to/other/file.txt $ exit # Retour dans vim</code></pre> </div> </div> <div class="paragraph"> <p>लेकिन यह भारी है। के साथ`Ctrl+Z`, यह तुरंत है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Dans vim, n'importe quel moment : Ctrl+Z [1]+ Stoppé vim README.md $ cat /path/to/other/file.txt # ... lire le fichier ... $ fg vim README.md # Retour exact là où on en était, curseur en place</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/vim-suspend.svg" alt="vim suspend" width="406" height="510"> </div> </div> <div class="paragraph"> <p></think> (No output)<code>vim`यह अपनी स्थिति को पूरी तरह से बहाल करता है एक`fg</code>: कर्सर की स्थिति, बफ़र की सामग्री, अनडू इतिहास — सब कुछ संरक्षित है.</p> </div> </div> </div> <div class="sect1"> <h2 id="_परिदृश्य_3_opencode_प्रक्रिया_निलंबित">परिदृश्य 3: opencode प्रक्रिया निलंबित</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह वह परिदृश्य है जिसने इस लेख को प्रेरित किया। आप उपयोग कर रहे हैं`opencode`(CLI टूल आपके कोड पर एक LLM को नियंत्रित करने के लिए), और प्रक्रिया निलंबित है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam componentStyle rectangle actor Développeur as dev participant "opencode ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam componentStyle rectangle actor Développeur as dev participant "opencode (LLM एजेंट)" as agent participant "शेल" as shell participant "गिट" as git dev -> agent : Session active agent -> agent : Tour de parole\ndu LLM en cours note over agent Ctrl+Z arrive en plein milieu d'une analyse de code end note dev -> agent : Ctrl+Z agent -> shell : Suspendu (job [1]) dev -> git : git diff git --> dev : changements visibles dev -> shell : fg shell -> agent : Reprend (job [1]) agent --> dev : Reprend exactement\nl'analyse en cours note right of agent Aucune perte de contexte Le LLM reprend sa réponse exactement où il en était end note @enduml</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ opencode # ... session en cours, LLM analyse le code ... ^Z [1]+ Stoppé opencode $ git diff HEAD~1 # vérifier les changements récents $ fg opencode # Le LLM reprend là où il s'était arrêté</code></pre> </div> </div> <div class="paragraph"> <p>फ़ायदा दोगुना है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>कोई संदर्भ हानि नहीं</strong>LLM सत्र, वार्तालाप का इतिहास, खुले फ़ाइलें — सब कुछ संरक्षित है</p> </li> <li> <p><strong>रीबूट नहीं</strong>: opencode को पुनः प्रारंभ करने की आवश्यकता नहीं है, संदर्भ को पुनः लोड करने की आवश्यकता नहीं है, LLM को समस्या की पुनः व्याख्या करने की आवश्यकता नहीं है</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_परिदृश्य_4_कई_जॉब्स_को_एक_साथ_प्रबंधित_करें">परिदृश्य 4: कई जॉब्स को एक साथ प्रबंधित करें</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>fg</code> et `bg`वे एक जॉब नंबर स्वीकार करते हैं एक विशेष प्रक्रिया को लक्ष्य करने के लिए जब कई निलंबित हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ vim config.yml ^Z [1]+ Stoppé vim config.yml $ ./gradlew test ^Z [2]+ Stoppé ./gradlew test $ htop ^Z [3]+ Stoppé htop $ jobs [1] Stoppé vim config.yml [2]- Stoppé ./gradlew test [3]+ Stoppé htop $ fg %2 ./gradlew test # Le build reprend en avant-plan $ bg %3 [3] htop & # htop reprend en arrière-plan</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/multiple-jobs.svg" alt="multiple jobs" width="764" height="280"> </div> </div> <div class="sect2"> <h3 id="_कार्यों_के_आदेशों_का_सारांश">कार्यों के आदेशों का सारांश</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 40%;"> <col style="width: 40%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">आदेश</th> <th class="tableblock halign-left valign-top">प्रभाव</th> <th class="tableblock halign-left valign-top">उदाहरण</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+Z</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रक्रिया को अग्रभूमि में निलंबित करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">भेजने का`SIGTSTP`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>fg</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">डिफ़ॉल्ट जॉब को फ़ोरग्राउंड में फिर से शुरू करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>fg</code> ou <code>fg %1</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>fg %n</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जॉब अग्रभूमि में फिर से शुरू करता है</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>fg %2</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>bg</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">डिफ़ॉल्ट जॉब को पृष्ठभूमि में फिर से शुरू करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>bg</code> ou <code>bg %1</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>bg %n</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">न के जॉब को पृष्ठभूमि में फिर से शुरू करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>bg %2</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>jobs</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वर्तमान शेल के कार्यों की सूची बनाएँ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>jobs -l</code>(PID के साथ)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>kill %n</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">job completo करो n</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>kill %2</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_fg_bg_ctrlz_ctrlc_और_के_अंतर">fg, bg, Ctrl+Z, Ctrl+C और & के अंतर</h2> <div class="sectionbody"> <div class="paragraph"> <p>बहुत से डेवलपर्स इन तंत्रों को भ्रमित करते हैं। यहाँ एक निर्णायक स्पष्टीकरण दिया गया है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "**Ctrl+Z**\nSIGTSTP" as ctrlz #LightYellow { card "प्रक्रिया को निलंबित करें (यह अभी भी मेमोरी में है) ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "**Ctrl+Z**\nSIGTSTP" as ctrlz #LightYellow { card "प्रक्रिया को निलंबित करें (यह अभी भी मेमोरी में है) fg/bg के साथ उपयोग करने योग्य" as c1 } rectangle "**Ctrl+C**\nSIGINT" as ctrlc #LightCoral { card "प्रक्रिया को मारें (वापसी संभव नहीं) सभी स्थिति की हानि" as c2 } rectangle "**& **\n(पृष्ठभूमि)" as ampersand #LightGreen { card "सीधे लॉन्च करें पृष्ठभूमि में तुरंत मुक्त टर्मिनल" as c3 } rectangle "**fg**\n(अग्रभूमि)" as fg_ #SkyBlue { card "एक जॉब लाओ फॉरग्राउंड में सस्पेंडेड टर्मिनल व्यस्त" as c4 } rectangle "**bg**\n(पृष्ठभूमि)" as bg_ #Lavender { card "एक काम फिर से शुरू पृष्ठभूमि में निलंबित मुक्त टर्मिनल" as c5 } ctrlz -right-> fg_ : fg pour reprendre ctrlz -right-> bg_ : bg pour continuer\nen arrière-plan ctrlc -right-> c2 : Pas de retour\nprocessus tué note bottom of ctrlz Le processus est **figé** mais **pas tué** end note note bottom of ampersand Alternative : lancer ./gradlew build & directement en arrière-plan end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 16.6666%;"> <col style="width: 33.3333%;"> <col style="width: 16.6666%;"> <col style="width: 33.3335%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">शॉर्टकट/कमांड</th> <th class="tableblock halign-left valign-top">सिग्नल</th> <th class="tableblock halign-left valign-top">प्रभाव</th> <th class="tableblock halign-left valign-top">वापस लौटना?</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+Z</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGTSTP</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रक्रिया को निलंबित करें (जमा, मेमोरी में)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हाँ :`fg` ou <code>bg</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+C</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGINT</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रक्रिया को मारें (समाप्त)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं: नष्ट प्रक्रिया</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+\</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGQUIT</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रक्रिया मारो + core dump</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं : नष्ट प्रक्रिया</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>commande &</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(No output)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बैकग्राउंड में सीधे लॉन्च करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`fg`इसे सामने लाने के लिए</p></td> </tr> </tbody> </table> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <code>Ctrl+Z`JBake संदर्भ (यह सामग्री JBake टेम्प्लेट और कन्वेंशन का उपयोग करती है): <mark>#</mark> JBake CLI कमांड ``</code> # Initialize a new JBake project jbake -i </td> </tr> </table> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_resetगैर_विध्वंसक_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i" class="sect0">Clear the output directory before baking jbake -b . output --reset<strong>गैर-विध्वंसक</strong><mark>#</mark> JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</h1> <h1 id="_bake_generate_the_site_jbake_b_2" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s_2" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset_2" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder_2" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="paragraph"> <p>fr से hi में अनुवाद करें सभी बैकटिक कोड स्पैन (<code>…​</code>) को बिल्कुल वैसा ही रखें — बैकटिक की सामग्री, स्पेसिंग, या स्थिति कभी न बदलें। यह पाठ बड़े वाक्य का एक अंश हो सकता है — अंश का अनुवाद अधिक संदर्भ मांगे बिना करें। केवल अनुवादित पाठ आउटपुट करें — कोई स्पष्टीकरण, कोई टिप्पणी, कोई परिचय, कोई विकल्प, कोई विकल्प नहीं।</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>प्रक्रिया स्मृति में वैसे ही स्थिर है। आप तुरंत इसे जारी रख सकते हैं`fg`. यह एक <em>pause</em> है, एक <em>stop</em> नहीं.</p> </li> </ol> </div> <div class="sect1"> <h2 id="_एक_जॉब_का_पूरा_जीवन_चक्र">एक जॉब का पूरा जीवन चक्र</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif title शेल जॉब का पूर्ण जीवन चक्र state "अस्तित्वहीन" as none state "अग्रभूमि ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif title शेल जॉब का पूर्ण जीवन चक्र state "अस्तित्वहीन" as none state "अग्रभूमि (टर्मिनल को घेरता है)" as foreground #LightCoral state "निलंबित\n(Ctrl+Z / SIGTSTP)" as suspended #LightYellow state "पृष्ठभूमि\n(bgまたは &)" as background #LightGreen state "समाप्त (exit code 0)" as done #LightGray [*] --> none none --> foreground : tape une commande foreground --> suspended : Ctrl+Z foreground --> done : fin normale suspended --> foreground : fg suspended --> background : bg suspended --> done : kill %n background --> foreground : fg background --> done : fin normale\n(en arrière-plan) background --> suspended : Ctrl+Z\n(si fg puis Ctrl+Z) done --> [*] note right of suspended L'état suspendu est le pivot de tout le système de jobs end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_उन्नत_टिप्स">उन्नत टिप्स</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_fg_नौकरी_के_साथ_सबसे_नया_और_अल्टरनेन्स">fg नौकरी के साथ सबसे नया और अल्टरनेन्स</h3> <div class="paragraph"> <p><code>fg`कोई तर्क नहीं होने पर चिह्नित काम लौटाता है</code>+<code>(सबसे हालिया). लेकिन आप भी इसका उपयोग कर सकते हैं</code>%-`पिछले जॉब को लक्ष्य करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ vim file1.txt ^Z [1]+ Stoppé vim file1.txt $ vim file2.txt ^Z [2]+ Stoppé vim file2.txt $ fg # ramène job [2] (le plus récent) $ fg %- # ramène job [1] (le précédent)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_काम_को_सही_तरीके_से_पूरा_करना">काम को सही तरीके से पूरा करना</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ jobs [1]- Stoppé vim config.yml [2]+ Stoppé ./gradlew test $ kill %2 # envoie SIGTERM au job 2 $ kill -9 %1 # envoie SIGKILL au job 1 (force)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_désown_शेल_से_अलग_करें">désown : शेल से अलग करें</h3> <div class="paragraph"> <p><code>disown`शेल की जॉब टेबल से एक जॉब हटाएँ। प्रक्रिया चलती रहती है लेकिन अब इसे वापस नहीं लाया जा सकता`fg</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build & [1] 12345 $ disown %1 # Le processus continue mais n'est plus lié au shell # Ça survives à la fermeture du terminal</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_nohup_के_साथ_मिलाएँ_लंबी_प्रक्रियाओं_के_लिए">nohup के साथ मिलाएँ लंबी प्रक्रियाओं के लिए</h3> <div class="paragraph"> <p>एक प्रक्रिया टर्मिनल बंद होने के बाद भी जीवित रहने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ nohup ./gradlew build & [1] 12345 $ disown %1 # Le build continue même si vous fermez le terminal</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg" as fg_ #SkyBlue { card "जॉब लाओ सबसे हाल का (+)" as f1 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg" as fg_ #SkyBlue { card "जॉब लाओ सबसे हाल का (+)" as f1 card "एक नौकरी को लक्ष्य बनाएँ विशिष्ट : fg %n" as f2 card "बदलें : fg %-" as f3 } rectangle "मारो %n" as kill_ #LightCoral { card "SIGTERM (स्वच्छ)" as k1 card "SIGKILL -9 (बल)" as k2 } rectangle "इन्कार करना" as disown #Lavender { card "शेल से अलग करें\n(डिस्कनेक्शन के दौरान जीवित रहता है)" as d1 } rectangle "nohup + &" as nohup_ #LightGreen { card "इम्यूनाइज़्ड प्रक्रिया SIGHUP के खिलाफ (टर्मिनल के बंद होने पर जीवित रहता है)" as n1 } fg_ -right-> kill_ : si faut\nterminer kill_ -right-> disown_ : ou détacher nohup_ -left-> fg_ : fg ramène en\navant-plan note bottom of disown_ Après disown, fg ne peut plus ramener le job end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_जाल_और_सामान्य_त्रुटियाँ">जाल और सामान्य त्रुटियाँ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrlz_और_ctrlc_को_भ्रमित_करना">Ctrl+Z और Ctrl+C को भ्रमित करना</h3> <div class="paragraph"> <p>यह सबसे सामान्य त्रुटि है।`Ctrl+C`प्रक्रिया को मारता है।`Ctrl+Z`वह निलंबित कर देता है। यदि आप दबाते हैं`Ctrl+C`reflex से, पूरी स्थिति खो जाती है — खुले फ़ाइलें, LLM सत्र, चल रहे बिल्ड।</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/ctrlz-vs-ctrlc.svg" alt="ctrlz vs ctrlc" width="1222" height="129"> </div> </div> </div> <div class="sect2"> <h3 id="_जॉब्स_शेल_के_लिए_स्थानीय_होते_हैं">जॉब्स शेल के लिए स्थानीय होते हैं</h3> <div class="paragraph"> <p><code>jobs</code>, <code>fg</code> et `bg`वे केवल उसी शेल में काम करते हैं जिसने प्रक्रियाओं को लॉन्च किया। यदि आप एक नया टर्मिनल खोलते हैं, तो आप दूसरे के जॉब्स नहीं देख पाएंगे।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Terminal 1 $ vim file.txt ^Z [1]+ Stoppé vim file.txt # Terminal 2 (nouveau) $ jobs # (rien — les jobs sont locaux au shell)</code></pre> </div> </div> <div class="paragraph"> <p>सिस्टम-वाइड प्रक्रियाएँ देखने के लिए, उपयोग करें`ps` ou <code>htop</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">ps aux | grep vim</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_जॉब्स_शेल_बंद_होने_पर_जीवित_नहीं_रहते">जॉब्स शेल बंद होने पर जीवित नहीं रहते।</h3> <div class="paragraph"> <p>यदि आप टर्मिनल बंद कर देते हैं, तो सभी निलंबित या बैकग्राउंड जॉब्स नष्ट हो जाते हैं। एक प्रक्रिया को जीवित रखने के लिए, उपयोग करें`nohup`+<code>disown</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ nohup ./gradlew build & [1] 12345 $ disown %1 # Fermer le terminal → le build continue</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_इंटरएक्टिव_प्रक्रियाएँ_और_fg">इंटरएक्टिव प्रक्रियाएँ और fg</h3> <div class="paragraph"> <p>कुछ इंटरएक्टिव प्रोग्राम एक के बाद अच्छा प्रदर्शन नहीं करते`Ctrl+Z`+<code>fg</code>. यह दुर्लभ है लेकिन ऐसा होता है :</p> </div> <div class="ulist"> <ul> <li> <p>कुछ प्रोग्राम जो संकेतों का उपयोग करते हैं (vim, htop, less) अच्छी तरह से काम करते हैं`Ctrl+Z`)</p> </li> <li> <p>लंबे नेटवर्क प्रोग्राम (ssh, opencode) सामान्यतः सही ढंग से पुनर्प्राप्त होते हैं</p> </li> <li> <p>टर्मिनल (ncurses) को संशोधित करने वाले कार्यक्रम कभी‑कभी टर्मिनल को अपेक्षित नहीं स्थिति में छोड़ सकते हैं।</p> </li> </ul> </div> <div class="paragraph"> <p>भ्रष्ट टर्मिनल के बाद एक`fg`, टाइप करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">reset</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सारांश_आरेख">सारांश आरेख</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 10) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 title "fg — टिप्स जो सब कुछ बदल देते हैं" rectangle "**समस्या**" as problem #LightCoral { card "टर्मिनल अवरुद्ध एक प्रक्रिया द्वारा" as p1 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 title "fg — टिप्स जो सब कुछ बदल देते हैं" rectangle "**समस्या**" as problem #LightCoral { card "टर्मिनल अवरुद्ध एक प्रक्रिया द्वारा" as p1 card "नया\nटर्मिनल खोलना = भारी समाधान" as p2 } rectangle "समाधान" as solution #LightGreen { card "Ctrl+Z → निलंबित" as s1 card "fg → फिर से शुरू करता है" as s2 card "bg → पृष्ठभूमि में" as s3 card "jobs → voir les suspendus" as s4 } rectangle "**लाभ**" as advantages #SkyBlue { card "संदर्भ की हानि नहीं" as a1 card "रीस्टार्ट नहीं" as a2 card "एक टर्मिनल पर्याप्त है" as a3 } problem -right-> solution : "Unix का स्वाभाविक समाधान 40 वर्षों से" solution -right-> advantages : "परिणाम" note bottom of advantages fg n'est pas un tips obscur C'est un mécanisme fondamental du shell Unix end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fg_क्यों_कम_आंका_गया">fg क्यों कम आंका गया</h2> <div class="sectionbody"> <div class="paragraph"> <p>अधिकांश आधुनिक डेवलपर्स खोजते हैं`fg`देर से, या कभी नहीं। कुछ कारण :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>IDE टर्मिनल छुपाते हैं</strong>: VS Code एक इंटीग्रेटेड टर्मिनल प्रदान करता है, लेकिन कई टैब बनाते हैं`fg`दिखने में कम आवश्यक</p> </li> <li> <p><strong>ग्राफ़िकल टूल्स CLI को प्रतिस्थापित करते हैं</strong>: फ़ाइल प्रबंधक, सिस्टम मॉनिटर, ग्राफ़िकल Git क्लाइंट</p> </li> <li> <p><strong>tmux और स्क्रीन</strong>: ये मल्टीप्लेक्सर्स एक ही समस्या को अलग तरीके से हल करते हैं, लेकिन`fg`यह अधिक सरल और हमेशा उपलब्ध है</p> </li> </ol> </div> <div class="paragraph"> <p>फिर भी,<code>fg</code><mark>#</mark> JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</p> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b_3" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s_3" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset_3" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder_3" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset_है" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code> है :</h1> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>सार्वभौमिक</strong>सभी POSIX शेल्स में मौजूद (bash, zsh, fish…​)</p> </li> <li> <p><strong>निर्भरता के बिना</strong>: tmux या स्क्रीन इंस्टॉल करने की ज़रूरत नहीं</p> </li> <li> <p><strong>तत्क्षणिक</strong>: दो हमले (<code>Ctrl+Z`फिर`fg</code>) रोकने और फिर से शुरू करने के लिए</p> </li> <li> <p><strong>संदर्भ संरक्षक</strong> : l’état du processus est intact</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg है कम आंका गया ?" as why #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg है कम आंका गया ?" as why #LightCoral { card "IDE के साथ टर्मिनल\nबहु-टैब" as w1 card "ग्राफ़िकल उपकरण जो CLI को बदलते हैं" as w2 card "tmux/screen समस्या को अन्य तरीके से हल करते हैं" as w3 } rectangle "क्यों fg है बेहतर ?" as superior #LightGreen { card "सार्वत्रिक : bash, zsh, fish, sh..." as s1 card "निर्भरता रहित:\nइंस्टॉलेशन नहीं" as s2 card "दो हमले:\nCtrl+Z फिर fg" as s3 card "संरक्षित संदर्भ: शून्य राज्य हानि" as s4 } why -right-> superior : "सादगी हमेशा जीतती है" @enduml</pre> </div> </div> <div class="sect1"> <h2 id="_तकनीकी_ज्ञापन_संकेत">तकनीकी ज्ञापन : संकेत</h2> <div class="sectionbody"> <div class="paragraph"> <p>जिज्ञासु लोगों के लिए, यहाँ संलग्न संकेत हैं:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 14.2857%;"> <col style="width: 28.5714%;"> <col style="width: 28.5714%;"> <col style="width: 28.5715%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">सिग्नल</th> <th class="tableblock halign-left valign-top">नाम</th> <th class="tableblock halign-left valign-top">भेजा गया</th> <th class="tableblock halign-left valign-top">प्रभाव</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGINT</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+C</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बाधा — प्रक्रिया समाप्त कर देती है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGQUIT</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+\</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोर डंप के साथ बाहर निकलता</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">18</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGTSTP</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>Ctrl+Z</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">इंटरैक्टिव स्टॉप — प्रक्रिया को निलंबित करता है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">19</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGCONT</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>fg</code>/<code>bg</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जारी रखें — एक निलंबित प्रक्रिया को फिर से शुरू करता है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGTERM</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>kill %n</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">स्वच्छ समापन</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">9</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>SIGKILL</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>kill -9 %n</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जबरदस्त समाप्ति (इसे अवरोधित नहीं किया जा सकता)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>पूर्ण प्रवाह:</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/signal-flow.svg" alt="signal flow" width="442" height="525"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>`fg`यह एक अस्पष्ट सुझाव नहीं है — यह यूनिक्स शेल का एक मौलिक तंत्र है, जो 1970 के दशक से उपलब्ध है। अधिकांश डेवलपर्स द्वारा इसे अनदेखा करना हमारे युग का एक लक्षण है: IDE और मल्टीप्लेक्सर्स ने हमें मूल बातों से दूर कर दिया है।</p> </div> <div class="paragraph"> <p>लेकिन जब आप एक SSH सर्वर पर हैं, एक न्यूनतम टर्मिनल में हैं, या बस उपयोग कर रहे हैं`opencode`और LLM पूरी तरह से काम कर रहा है —<code>Ctrl+Z</code>, <code>fg</code>, <code>bg</code>, `jobs`हैं आपके सबसे अच्छे दोस्तों.</p> </div> <div class="paragraph"> <p>(No output) Ctrl+Z रोकता है, fg फिर से शुरू करता है। यह टर्मिनल की पॉज़‑प्ले है। (No output)</p> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ">संदर्भ</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><code>man bash</code>— खंड JOB CONTROL</p> </li> <li> <p><code>man signal</code>— POSIX संकेतों की सूची</p> </li> <li> <p><a href="https://www.gnu.org/software/bash/manual/bash.html#Job-Control">Bash रेफ़रेंस मैनुअल — जॉब कंट्रोल</a></p> </li> <li> <p><a href="https://man7.org/linux/man-pages/man7/signal.7.html">man 7 signal — लिनक्स सिग्नल</a></p> </li> <li> <p><a href="https://tldp.org/LDP/abs/html/x312743.htm">उन्नत बैश-स्क्रिप्टिंग गाइड — कार्य नियंत्रण</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0103_vscode_local_install_custom_fonts_post.html Fri, 17 Apr 2026 00:00:00 +0000 blog/2026/0103_vscode_local_install_custom_fonts_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_पथ_का_अवलोकन">पथ का अवलोकन</a></li> <li><a href="#_क्यों_vs_code_घर_में">क्यों : VS Code घर में</a> <ul class="sectlevel2"> <li><a href="#_सिस्टम_इंस्टॉलेशन_के_साथ_समस्या">सिस्टम इंस्टॉलेशन के साथ समस्या</a></li> <li><a href="#_समाधान_एक_स्थानीय_स्थापना">समाधान : एक स्थानीय स्थापना</a></li> <li><a href="#_वास्तविक_लाभ">वास्तविक लाभ</a></li> </ul> </li> <li><a href="#_मुख्य_मेनू_के_फ़ॉन्ट_को_अनुकूलित_करें">मुख्य मेनू के फ़ॉन्ट को अनुकूलित करें</a> <ul class="sectlevel2"> <li><a href="#_निरीक्षण">निरीक्षण</a></li> <li><a href="#_तकनीक_सीधा_सीएसएस_पैच">तकनीक : सीधा सीएसएस पैच</a></li> <li><a href="#_सत्यनिष्ठा_चेतावनी_हटाएँ">सत्यनिष्ठा चेतावनी हटाएँ</a></li> </ul> </li> <li><a href="#_एक्सप्लोरर_पैनल_का_फ़ॉन्ट_कस्टमाइज़_करें_लड़ाई">एक्सप्लोरर पैनल का फ़ॉन्ट कस्टमाइज़ करें — लड़ाई</a> <ul class="sectlevel2"> <li><a href="#_टेंटेटिव1_ऐसा_पैरामीटर_जो_नहीं_मौजूद_है">टेंटेटिव 1: ऐसा पैरामीटर जो नहीं मौजूद है</a></li> <li><a href="#_प्रयास_2_एक्सटेंशन_custom_css_and_js_loader">प्रयास 2 : एक्सटेंशन Custom CSS and JS Loader</a></li> <li><a href="#_जाल_हर_बार_एक्सटेंशन_को_सक्रिय_करना_होगा">जाल: हर बार एक्सटेंशन को सक्रिय करना होगा</a></li> <li><a href="#_प्रयास_3_रेखाएँ_ओवरलैप_होती_हैं">प्रयास 3: रेखाएँ ओवरलैप होती हैं</a></li> <li><a href="#_समाधान_zoom_मातृ_कंटेनर_पर">समाधान : <code>zoom</code> मातृ कंटेनर पर</a></li> <li><a href="#_सेलेक्टर्स_का_सारांश_और_क्या_काम_करता_है">सेलेक्टर्स का सारांश और क्या काम करता है</a></li> </ul> </li> <li><a href="#_ऑटोमैटिक_अपडेट_स्क्रिप्ट">ऑटोमैटिक अपडेट स्क्रिप्ट</a> <ul class="sectlevel2"> <li><a href="#_समस्या">समस्या</a></li> <li><a href="#_स्क्रिप्ट_vscode_update_sh">स्क्रिप्ट `vscode-update.sh</a></li> </ul> </li> <li><a href="#_संबंधित_फाइलें_अवलोकन">संबंधित फाइलें — अवलोकन</a></li> <li><a href="#_सीखे_हुए_सबक">सीखे हुए सबक</a> <ul class="sectlevel2"> <li><a href="#_होम_में_इंस्टॉल_करने_से_सब_कुछ_मुक्त_हो_जाता_है">होम में इंस्टॉल करने से सब कुछ मुक्त हो जाता है</a></li> <li><a href="#_zoom_font_size_सूची_घटकों_के_लिए">zoom` > <code>font-size</code> सूची घटकों के लिए</a></li> <li><a href="#_custom_css_एक्सटेंशन_को_स्पष्ट_रूप_से_सक्रिय_करने_की_आवश्यकता_है">Custom CSS एक्सटेंशन को स्पष्ट रूप से सक्रिय करने की आवश्यकता है</a></li> <li><a href="#_एक_अपडेट_स्क्रिप्ट_आवश्यक_है">एक अपडेट स्क्रिप्ट आवश्यक है</a></li> </ul> </li> <li><a href="#_त्वरित_संदर्भ">त्वरित संदर्भ</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">पढ़ने का समय : 8 minutes</div> <p>VS Code को क्यों स्थापित करें में`/opt`या द्वारा`apt`quand हम इसे अपने घर में रख सकते हैं और अपने IDE को कभी टाइप किए बिना एक प्लेग्राउंड में बदल सकते हैं`sudo`यहाँ एक स्थानीय स्थापना की कहानी है, उसके बाद मेनू और फ़ाइल एक्सप्लोरर के फ़ॉन्ट को बढ़ाने के लिए एक कड़ा संघर्ष।</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">विषय सूची</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_पथ_का_अवलोकन">पथ का अवलोकन</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 10) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur as dev actor "opencode\n+ LLM" as agent package "होम उपयोगकर्ता (~)" #LightGreen { package "~/apps/" { component "VS Code ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur as dev actor "opencode\n+ LLM" as agent package "होम उपयोगकर्ता (~)" #LightGreen { package "~/apps/" { component "VS Code (टैरबॉल)" as vscode #SkyBlue component "vscode-update.sh" as script #LightYellow } package "~/.config/Code/" { component "settings.json" as settings #Lavender } package "~/.vscode-custom-css/" { component "custom.css (ज़ूम: 1.25)" as customcss #Lavender } } cloud "code.visualstudio.com" as download dev --> vscode : Télécharge & installe dev --> script : Lance mise à jour script --> download : wget dernière version script --> vscode : Remplace + re-patch CSS agent --> settings : Écrit config agent --> customcss : Écrit zoom CSS agent --> vscode : Patch workbench CSS note right of vscode Installation dans le home = contrôle total sans sudo end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_क्यों_vs_code_घर_में">क्यों : VS Code घर में</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_सिस्टम_इंस्टॉलेशन_के_साथ_समस्या">सिस्टम इंस्टॉलेशन के साथ समस्या</h3> <div class="paragraph"> <p>VS Code को इंस्टॉल किया गया के माध्यम से`apt`, <code>dnf`या में</code>/opt`ऐप्लिकेशन के फ़ाइलों को रूट अधिकारों के पीछे लॉक करता है। नेटिव CSS का कोई भी संशोधन, de`product.json`या इंस्टॉलेशन फ़ोल्डर की आवश्यकता है`sudo`.</p> </div> <div class="paragraph"> <p>अब, जब कोई उपयोग करता है<strong>ओपेन्कोड</strong>(टूल CLI अपने कोड पर एक LLM को नियंत्रित करने के लिए), एजेंट को सक्षम होने की आवश्यकता है :</p> </div> <div class="ulist"> <ul> <li> <p>कॉन्फ़िगरेशन फ़ाइलों में लिखना (<code>~/.config/Code/User/settings.json</code>) — यह पहले से ही होमपेज में है</p> </li> <li> <p>IDE के एसेट्स को संशोधित करें (वर्कबेंच CSS,<code>product.json</code>) उन्नत कस्टमाइज़ेशन के लिए — यह sudo के बिना ब्लॉक है</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_समाधान_एक_स्थानीय_स्थापना">समाधान : एक स्थानीय स्थापना</h3> <div class="paragraph"> <p>हम आधिकारिक टैरबॉल आर्काइव डाउनलोड करते हैं और उसे सीधे therein में निकालते हैं`~/apps/`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">mkdir -p ~/apps cd ~/apps wget "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" -O vscode.tar.gz tar -xzf vscode.tar.gz rm vscode.tar.gz</code></pre> </div> </div> <div class="paragraph"> <p>बाइनरी तब है`~/apps/VSCode-linux-x64/bin/code`. कोई नहीं`sudo`किसी भी फ़ाइल को पढ़ने, संपादित करने या बदलने के लिए आवश्यक नहीं है`~/apps/VSCode-linux-x64/`.</p> </div> </div> <div class="sect2"> <h3 id="_वास्तविक_लाभ">वास्तविक लाभ</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE rectangle "इंस्टॉलेशन सिस्टम (/opt, apt, dnf)" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "इंस्टॉलेशन सिस्टम (/opt, apt, dnf)" #LightCoral { card "VS Code रूट की संपत्ति" { [CSS du workbench : sudo requis] [product.json : sudo requis] [Dossier d'install : non modifiable] } } rectangle "स्थापना होम\n(~/apps)" #LightGreen { card "VS Code यूज़र की संपत्ति" { [CSS du workbench : libre] [product.json : libre] [Dossier d'install : libre] [Script update maison] } } "इंस्टॉलेशन सिस्टम (/opt, apt, dnf)" -right-> "स्थापना होम\n(~/apps)" : **Non, merci**\nJe prends le home note bottom of "स्थापना होम\n(~/apps)" L'agent opencode+LLM peut modifier les fichiers de l'IDE sans aucune élévation de privilèges end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">लाभ</th> <th class="tableblock halign-left valign-top">विवरण</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">sudo नहीं</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">IDE के सभी फ़ाइल उपयोगकर्ता के हैं।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CSS का सीधा संशोधन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पैच किया जा सकता है`workbench.desktop.main.css`विशेषाधिकार वृद्धि के बिना</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">घरेलू अपडेट स्क्रिप्ट</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक साधारण शेल स्क्रिप्ट स्वचालित रूप से डाउनलोड, प्रतिस्थापित और पुनः पैच करती है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">अलगाव</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सिस्टम इंस्टॉलेशन प्रदूषित नहीं है ; rollback = फ़ोल्डर हटाएँ</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_मुख्य_मेनू_के_फ़ॉन्ट_को_अनुकूलित_करें">मुख्य मेनू के फ़ॉन्ट को अनुकूलित करें</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निरीक्षण">निरीक्षण</h3> <div class="paragraph"> <p>मुख्य मेनू (फ़ाइल, संपादन, दृश्य …​) और ड्रॉप‑डाउन का डिफ़ॉल्ट फ़ॉन्ट बहुत छोटा है। VS Code में इसे बदलने के लिए कोई सेटिंग नहीं है।</p> </div> </div> <div class="sect2"> <h3 id="_तकनीक_सीधा_सीएसएस_पैच">तकनीक : सीधा सीएसएस पैच</h3> <div class="paragraph"> <p>फ़ाइल के अंत में CSS जोड़ें`workbench.desktop.main.css`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "workbench.desktop ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "workbench.desktop .main.css" as css participant "product.json" as product participant "VS कोड" as vscode == Patch CSS == dev -> css : Ajouter règles font-size\n(.menubar-menu-title, etc.) dev -> vscode : Redémarrer VS Code vscode -> vscode : Charge le CSS patché vscode --> dev : Menus et dropdowns en 23px/22px ✓ == Suppression warning == vscode --> dev : ⚠️ "आपकी स्थापना दूषित है" dev -> product : Supprimer clé "चेकसम"\n(python3 -c ...) dev -> vscode : Redémarrer VS Code vscode --> dev : Plus de warning ✓ note over css, product Deux fichiers dans ~/apps/ = modifiables sans sudo end note @enduml</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">CSS_FILE="$HOME/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css" cat >> "$CSS_FILE" << 'EOF' .menubar-menu-title{font-size:23px!important} .menubar>.menubar-menu-button{font-size:23px!important} .monaco-menu-option{font-size:22px!important;line-height:34px!important} .monaco-menu .action-label:not(.codicon){font-size:22px!important} .menubar-menu-items-holder .monaco-menu .action-item .action-label{font-size:22px!important} EOF</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_सत्यनिष्ठा_चेतावनी_हटाएँ">सत्यनिष्ठा चेतावनी हटाएँ</h3> <div class="paragraph"> <p>VS Code अपने फ़ाइलों में हुए परिवर्तनों का पता लगाता है और एक बैनर प्रदर्शित करता है "Your installation is corrupt"। इससे बचने के लिए, हम चेकसम हटा देते हैं`product.json`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-python hljs" data-lang="python">import json product_json = "$HOME/apps/VSCode-linux-x64/resources/app/product.json" with open(product_json, 'r') as f: data = json.load(f) data.pop('checksums', None) with open(product_json, 'w') as f: json.dump(data, f, indent=2)</code></pre> </div> </div> <div class="paragraph"> <p>रीस्टार्ट के बाद, कोई चेतावनी नहीं रहती और मेनू अंततः पढ़ने योग्य हो जाते हैं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_एक्सप्लोरर_पैनल_का_फ़ॉन्ट_कस्टमाइज़_करें_लड़ाई">एक्सप्लोरर पैनल का फ़ॉन्ट कस्टमाइज़ करें — लड़ाई</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_टेंटेटिव1_ऐसा_पैरामीटर_जो_नहीं_मौजूद_है">टेंटेटिव 1: ऐसा पैरामीटर जो नहीं मौजूद है</h3> <div class="paragraph"> <p>पहले हम स्वाभाविक पैरामीटर का प्रयास करते हैं`workbench.tree.fontSize`में`settings.json`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "workbench.tree.fontSize": 20 }</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम :<strong>कोई प्रभाव नहीं</strong>. यह सेटिंग VS Code में मौजूद नहीं है। इसका सबूत यह है कि अनमान्य सेटिंग्स चुपचाप अनदेखी कर दिए जाते हैं।</p> </div> </div> <div class="sect2"> <h3 id="_प्रयास_2_एक्सटेंशन_custom_css_and_js_loader">प्रयास 2 : एक्सटेंशन Custom CSS and JS Loader</h3> <div class="paragraph"> <p>हम एक्सटेंशन इंस्टॉल करते हैं`be5invis.vscode-custom-css`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">~/apps/VSCode-linux-x64/bin/code --install-extension be5invis.vscode-custom-css</code></pre> </div> </div> <div class="paragraph"> <p>हम एक CSS फ़ाइल बनाते हैं`~/.vscode-custom-css/custom.css`एक्सप्लोरर के तत्वों को लक्षित करने वाले चयनकर्ताओं के साथ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.monaco-tree-rows .monaco-tree-row, .sidebar .monaco-list-row, .explorer-viewlet .monaco-list-row, .monaco-list-row .monaco-icon-label { font-size: 22px !important; line-height: 36px !important; }</code></pre> </div> </div> <div class="paragraph"> <p>और हम इस फ़ाइल को सेटिंग्स में संदर्भित करते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" data-lang="json">{ "vscode_custom_css.imports": [ "file:///home/user/.vscode-custom-css/custom.css" ] }</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम :<strong>परिवर्तन लागू नहीं होते.</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_जाल_हर_बार_एक्सटेंशन_को_सक्रिय_करना_होगा">जाल: हर बार एक्सटेंशन को सक्रिय करना होगा</h3> <div class="paragraph"> <p>एक्सटेंशन की दस्तावेज़ीकरण इस महत्वपूर्ण बिंदु पर चुप है: प्रत्येक कस्टम CSS संशोधन के बाद, आपको यह करना होगा<strong>अनिवार्य रूप से</strong>कमांड चलाएँ पैलेट से :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>Ctrl+Shift+P</code>→ टाइप करना<strong>कस्टम CSS और JS सक्षम करें</strong></p> </li> <li> <p>VS Code को रीस्टार्ट की आवश्यकता है → स्वीकार करें</p> </li> </ol> </div> <div class="paragraph"> <p>इस चरण के बिना, सीएसएस कभी भी IDE में इंजेक्ट नहीं किया जाता।</p> </div> </div> <div class="sect2"> <h3 id="_प्रयास_3_रेखाएँ_ओवरलैप_होती_हैं">प्रयास 3: रेखाएँ ओवरलैप होती हैं</h3> <div class="paragraph"> <p>के साथ भी`font-size: 22px` et <code>line-height: 36px</code>, जैमबेज वाले अक्षर (g, p, f, b) पड़ोस वाली लाइनों पर फैल जाते हैं. हम जोड़ने की कोशिश कर रहे हैं`height` et <code>min-height</code>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.monaco-list-row { height: 36px !important; min-height: 36px !important; }</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम :<strong>कोई बदलाव नहीं</strong>. VS Code JavaScript में लाइनों की ऊँचाइयाँ गणना करता है और CSS मानों को ओवरराइड करता है।</p> </div> </div> <div class="sect2"> <h3 id="_समाधान_zoom_मातृ_कंटेनर_पर">समाधान : <code>zoom</code> मातृ कंटेनर पर</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE rectangle "प्रयास 1 पैरामीटर मौजूद नहीं है" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "प्रयास 1 पैरामीटर मौजूद नहीं है" #LightCoral { card "workbench.tree.fontSize" as t1 { [VS Code ignore le paramètre] } } rectangle "प्रयास 2 कस्टम CSS + फ़ॉन्ट-आकार" #LightYellow { card ".monaco-list-row { font-size: 22px }" as t2 { [Texte plus grand\nmais lignes superposées] } } rectangle "अस्थायी 3 font-size + line-height + height" #LightYellow { card "height: 36px !important" as t3 { [VS Code override\npar JavaScript] [Aucun effet] } } rectangle "समाधान पैरेंट कंटेनर पर ज़ूम" #LightGreen { card ".monaco-list-rows { zoom: 1.25 }" as t4 { [Texte + espacement\nproportionnels] [Layout JS respecté] [✓ Résultat conforme] } } t1 -down-> t2 : Pas de paramètre ?\nOn essaie le CSS t2 -down-> t3 : Lignes superposées ?\nOn force la hauteur t3 -down-> t4 : Override JS ?\nOn utilise zoom @enduml</pre> </div> </div> <div class="paragraph"> <p>JavaScript लेआउट के खिलाफ लड़ने के बजाय, हम प्रॉपर्टी का उपयोग करते हैं`zoom`लाइनों के कंटेनर पर :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.explorer-viewlet .monaco-list-rows, .sidebar .monaco-list-rows { zoom: 1.25; }</code></pre> </div> </div> <div class="paragraph"> <p>`zoom`समान रूप से कंटेनर का रेंडर बढ़ाता है — टेक्स्ट और स्पेसिंग — VS Code के JavaScript इंजन द्वारा गणना किए गए लेआउट को तोड़े बिना। 1.25 का कारक लगभग 13px से 16px के परिवर्तन के अनुरूप है।</p> </div> <div class="paragraph"> <p>परिणाम :<strong>फ़ाइल के नाम अंततः पढ़ने योग्य हैं, लाइनें सही अंतराल वाली हैं</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_सेलेक्टर्स_का_सारांश_और_क्या_काम_करता_है">सेलेक्टर्स का सारांश और क्या काम करता है</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 50%;"> <col style="width: 25%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">पहुँच</th> <th class="tableblock halign-left valign-top">CSS</th> <th class="tableblock halign-left valign-top">परिणाम</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>font-size`पर</code>.monaco-list-row`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>font-size: 22px !important</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बड़ा पाठ लेकिन रेखाएँ अ overlap</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>line-height</code>+<code>height`पर</code>.monaco-list-row`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>line-height: 36px; height: 36px</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोई प्रभाव नहीं (override JS)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>zoom`पर</code>.monaco-list-rows`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>zoom: 1.25</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सफल — पाठ + अनुपातिक अंतराल</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ऑटोमैटिक_अपडेट_स्क्रिप्ट">ऑटोमैटिक अपडेट स्क्रिप्ट</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE autonumber actor "डेवलपर ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE autonumber actor "डेवलपर या cron" as dev participant "vscode-update.sh" as script participant "VSCode टैरबॉल\n(code.visualstudio.com)" as remote participant "~/apps/\nVSCode-linux-x64" as local participant "~/apps/ vscode-backup" as backup participant "कार्य बेंच .desktop.main.css" as css participant "product.json" as product dev -> script : ./vscode-update.sh script -> local : Lire version courante script -> remote : wget dernière version script -> script : Comparer versions alt Version identique script --> dev : "पहले से ही अपडेट!" else Nouvelle version script -> backup : Sauvegarder installation courante\n(horodatée) script -> local : rm -rf ancienne installation script -> local : mv nouvelle installation script -> css : Ajouter patch CSS\n(menubar 23px, dropdown 22px) script -> product : Supprimer checksums\n(python3) script --> dev : "अपडेट पूरा\n1.xx.yy → 1.zz.ww" end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_समस्या">समस्या</h3> <div class="paragraph"> <p>जब VS Code अपडेट होता है, तो यह इंस्टॉलेशन फ़ोल्डर को बदल देता है और<strong>सभी CSS पैच हटाएँ</strong>>. इसे हर बार हाथ से फिर से लागू करना आवश्यक है।</p> </div> </div> <div class="sect2"> <h3 id="_स्क्रिप्ट_vscode_update_sh">स्क्रिप्ट `vscode-update.sh</h3> <div class="paragraph"> <p>हम बनाते हैं`~/apps/vscode-update.sh`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">#!/bin/bash set -e VSCODE_DIR="$HOME/apps/VSCode-linux-x64" BACKUP_DIR="$HOME/apps/vscode-backup" TEMP_DIR="/tmp/vscode-update" MENUBAR_FONT_SIZE="23px" DROPDOWN_FONT_SIZE="22px" echo "=== VS Code Local Updater ===" CURRENT_VERSION=$("$VSCODE_DIR/bin/code" --version 2>/dev/null | head -1) echo "Current version: $CURRENT_VERSION" echo "Downloading latest VS Code..." mkdir -p "$TEMP_DIR" wget -q "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" \ -O "$TEMP_DIR/vscode.tar.gz" echo "Extracting..." mkdir -p "$TEMP_DIR/extracted" tar -xzf "$TEMP_DIR/vscode.tar.gz" -C "$TEMP_DIR/extracted" NEW_VERSION=$("$TEMP_DIR/extracted/VSCode-linux-x64/bin/code" \ --version 2>/dev/null | head -1) echo "New version: $NEW_VERSION" if [ "$CURRENT_VERSION" = "$NEW_VERSION" ]; then echo "Already up to date!" rm -rf "$TEMP_DIR" exit 0 fi echo "Backing up current installation..." mkdir -p "$BACKUP_DIR" cp -r "$VSCODE_DIR" "$BACKUP_DIR/VSCode-linux-x64-$(date +%Y%m%d-%H%M%S)" echo "Updating..." rm -rf "$VSCODE_DIR" mv "$TEMP_DIR/extracted/VSCode-linux-x64" "$VSCODE_DIR" rm -rf "$TEMP_DIR" CSS_FILE="$VSCODE_DIR/resources/app/out/vs/workbench/workbench.desktop.main.css" echo "Re-applying custom CSS patch \ (menubar=${MENUBAR_FONT_SIZE}, dropdown=${DROPDOWN_FONT_SIZE})..." cat >> "$CSS_FILE" << CSSEOF .menubar-menu-title{font-size:${MENUBAR_FONT_SIZE}!important}\ .menubar>.menubar-menu-button{font-size:${MENUBAR_FONT_SIZE}!important}\ .monaco-menu-option{font-size:${DROPDOWN_FONT_SIZE}!important;\ line-height:34px!important}\ .monaco-menu .action-label:not(.codicon)\ {font-size:${DROPDOWN_FONT_SIZE}!important}\ .menubar-menu-items-holder .monaco-menu .action-item .action-label\ {font-size:${DROPDOWN_FONT_SIZE}!important} CSSEOF PRODUCT_JSON="$VSCODE_DIR/resources/app/product.json" if [ -f "$PRODUCT_JSON" ]; then echo "Removing checksums to prevent integrity warning..." python3 -c " import json with open('$PRODUCT_JSON','r') as f: data=json.load(f) data.pop('checksums', None) with open('$PRODUCT_JSON','w') as f: json.dump(data,f,indent=2) print('Done.') " fi echo "=== Update complete: $CURRENT_VERSION -> $NEW_VERSION ==="</code></pre> </div> </div> <div class="paragraph"> <p>स्क्रिप्ट :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>लेटेस्ट स्थिर संस्करण डाउनलोड करें</p> </li> <li> <p>जाँच करें कि क्या संस्करण वर्तमान से अलग है</p> </li> <li> <p>वर्तमान स्थापना (समयांकित) में सहेजें`~/apps/vscode-backup/`</p> </li> <li> <p>इंस्टॉलेशन फ़ोल्डर बदलें</p> </li> <li> <p><strong>फिर से लागू करें</strong>मुख्य मेनू का CSS पैच</p> </li> <li> <p><strong>Supprime les checksums</strong> de `product.json`अखंडता चेतावनी से बचने के लिए</p> </li> </ol> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> कस्टमाइज़ेशन एक्सप्लोरर पैन का Custom CSS एक्सटेंशन के माध्यम से और फ़ाइल`~/.vscode-custom-css/custom.css`वे अपडेट के कारण बच जाते हैं क्योंकि वे इंस्टॉलेशन फ़ोल्डर के बाहर रहते हैं। </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_संबंधित_फाइलें_अवलोकन">संबंधित फाइलें — अवलोकन</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "VS Code की स्थापना (~/apps/VSCode-linux-x64/)" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "VS Code की स्थापना (~/apps/VSCode-linux-x64/)" #LightCoral { component "workbench.desktop\n.main.css" as css #LightCoral component "product.json" as product #LightCoral component "बाइनरी bin/code" as binary #LightCoral } rectangle "उपयोगकर्ता कॉन्फ़िगरेशन (~/.config/Code/)" #LightGreen { component "settings.json" as settings #LightGreen component "एक्सटेंशन/" as extensions #LightGreen } rectangle "स्थायी अनुकूलन (~/.vscode-custom-css/)" #SkyBlue { component "custom.css\n(zoom: 1.25)" as customcss #SkyBlue } rectangle "स्वचालन (~/apps/)" #LightYellow { component "vscode-update.sh" as script #LightYellow component "vscode-backup/" as backup #LightYellow } script ..> css : Re-patch après MAJ script ..> product : Supprime checksums\naprès MAJ settings --> customcss : Référence via\nvscode_custom_css.imports extensions ..> css : Custom CSS Loader\ninjecte custom.css note bottom of css **Ne survit pas** aux mises à jour Re-patché par le script end note note bottom of customcss **Survit** aux mises à jour Vit hors du dossier d'installation end note note bottom of settings **Survit** aux mises à jour Vit dans ~/.config/ end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 28.5714%;"> <col style="width: 42.8571%;"> <col style="width: 28.5715%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">पथ</th> <th class="tableblock halign-left valign-top">भूमिका</th> <th class="tableblock halign-left valign-top">अपडेट्स से जीवित रहता है?</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/apps/VSCode-linux-x64/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">IDE की स्थापना</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं (बदली गई)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वर्कबेंच CSS (मेन्यू, ड्रॉपडाउन)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं (स्क्रिप्ट द्वारा पुनः पैच किया गया)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/apps/VSCode-linux-x64/resources/app/product.json</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">इंटेग्रिटी चेकसम</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नहीं (स्क्रिप्ट द्वारा फिर से साफ किया गया)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/apps/vscode-update.sh</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">स्वचालित अपडेट स्क्रिप्ट</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हाँ</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/.config/Code/User/settings.json</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">उपयोगकर्ता सेटिंग्ज़ (fontSize, custom CSS)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हाँ</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/.vscode-custom-css/custom.css</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक्सप्लोरर के लिए कस्टम CSS (ज़ूम)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हाँ</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_सीखे_हुए_सबक">सीखे हुए सबक</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 rectangle "**स्थानीय स्थापना**\n घर में" as install #LightGreen { card "सुडो नहीं CSS/config को संशोधित करने के लिए" as i1 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 rectangle "**स्थानीय स्थापना**\n घर में" as install #LightGreen { card "सुडो नहीं CSS/config को संशोधित करने के लिए" as i1 card "opencode+LLM सब कुछ संशोधित कर सकता है" as i2 card "Rollback = पुनर्स्थापित टाइमस्टैम्प्ड बैकअप" as i3 } rectangle "**CSS का कस्टमाइज़ेशन** ज़ूम बनाम फ़ॉन्ट-आकार" as css #LightYellow { card "ज़ूम > फ़ॉन्ट-आकार\n घटकों की सूची के लिए" as c1 card "ले आउट JS ओवरराइड ऊँचाई/लाइन-ऊँचाई" as c2 card "Extension Custom CSS आवश्यक सक्रियण हस्तचालित (Ctrl+Shift+P)" as c3 } rectangle "**स्वचालन**\n अपडेट स्क्रिप्ट" as auto #LightCoral { card "CSS को री-पैच करने के बाद प्रत्येक अपडेट" as a1 card "चेकसम हटाएँ product.json" as a2 card "समय-चिह्नित बैकअप प्रतिस्थापन से पहले" as a3 } install -right-> css : ensuite css -right-> auto : enfin note top of install Contrôle total sans élévation de privilèges end note note top of auto Sans script, chaque MAJ efface les patches CSS end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_होम_में_इंस्टॉल_करने_से_सब_कुछ_मुक्त_हो_जाता_है">होम में इंस्टॉल करने से सब कुछ मुक्त हो जाता है</h3> <div class="paragraph"> <p>स्थानीय स्थापना में`~/apps`VS Code पर पूर्ण नियंत्रण देता है :</p> </div> <div class="ulist"> <ul> <li> <p>नहीं`sudo`CSS को संशोधित करने या कॉन्फ़िगरेशन को बदलने के लिए</p> </li> <li> <p>opencode+LLM एजेंट IDE के कॉन्फ़िगरेशन फ़ाइलों और एसेट्स में लिख सकता है</p> </li> <li> <p>साधारण रोलबैक : टाइमस्टैम्प्ड बैकअप पुनर्स्थापित करें</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_zoom_font_size_सूची_घटकों_के_लिए">zoom` > <code>font-size</code> सूची घटकों के लिए</h3> <div class="paragraph"> <p>VS Code JavaScript के माध्यम से लाइन की ऊँचाई को नियंत्रित करता है। संशोधित करें`font-size`ले�ेआउट इंजन द्वारा आवंटित ऊँचाई को छू पाने में असमर्थ होने से पाठ ओवरफ़्लो हो जाते हैं। गुण`zoom`माता कंटेनर को बड़ा करने से सब कुछ समानुपातिक रूप से बड़ा हो जाता है और इस समस्या को टाल दिया जाता है।</p> </div> </div> <div class="sect2"> <h3 id="_custom_css_एक्सटेंशन_को_स्पष्ट_रूप_से_सक्रिय_करने_की_आवश्यकता_है">Custom CSS एक्सटेंशन को स्पष्ट रूप से सक्रिय करने की आवश्यकता है</h3> <div class="paragraph"> <p>यह <code>set and forget</code> पैरामीटर नहीं है। प्रत्येक कस्टम CSS फ़ाइल में बदलाव करने के लिए <code>Enable Custom CSS and JS</code> को कमांड पैलेट से फिर से चलाना आवश्यक है। (<code>Ctrl+Shift+P</code>).</p> </div> </div> <div class="sect2"> <h3 id="_एक_अपडेट_स्क्रिप्ट_आवश्यक_है">एक अपडेट स्क्रिप्ट आवश्यक है</h3> <div class="paragraph"> <p>स्क्रिप्ट के बिना, VS Code के प्रत्येक अपडेट वर्कबेंच के CSS पैच को मिटा देता है। स्क्रिप्ट`vscode-update.sh`डाउनलोड, प्रतिस्थापन, री-पैच और चेकसम्स की सफ़ाई को स्वचालित करता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_त्वरित_संदर्भ">त्वरित संदर्भ</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>VS Code डाउनलोड : <a href="https://code.visualstudio.com/Download" class="bare">https://code.visualstudio.com/Download</a></p> </li> <li> <p>एक्सटेंशन कस्टम CSS और JS लोडर :`be5invis.vscode-custom-css`</p> </li> <li> <p>VS Code के द्वारा एक्सप्लोरर फ़ॉन्ट के लिए एक नेटिव सेटिंग मांगे जाने का मुद्दा:https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0102_migration_gradle_script_to_plugin_post.html Thu, 16 Apr 2026 00:00:00 +0000 blog/2026/0102_migration_gradle_script_to_plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_संदर्भ_और_उद्देश्य">संदर्भ और उद्देश्य</a> <ul class="sectlevel2"> <li><a href="#_शुरुआती_बिंदु">शुरुआती बिंदु</a></li> <li><a href="#_लक्ष्य">लक्ष्य</a></li> </ul> </li> <li><a href="#_पहली_बाधा_ruby_gems">पहली बाधा : `ruby { gems() }</a> <ul class="sectlevel2"> <li><a href="#_ग्रोवी_शुगर_सिंटैक्स_क्या_छिपाता_है">ग्रोवी शुगर सिंटैक्स क्या छिपाता है</a></li> <li><a href="#_मैकेनिज़म_का_विघटन">मैकेनिज़म का विघटन</a></li> </ul> </li> <li><a href="#_तीन_भागों_का_समाधान">तीन भागों का समाधान</a> <ul class="sectlevel2"> <li><a href="#_भाग_1_ivy_रेपॉ_rubygems_के_लिए">भाग 1 : Ivy रेपॉ rubygems के लिए</a></li> <li><a href="#_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i">JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</a></li> </ul> </li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a></li> </ul> </div> <div class="sect1"> <h2 id="_संदर्भ_और_उद्देश्य">संदर्भ और उद्देश्य</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_शुरुआती_बिंदु">शुरुआती बिंदु</h3> <div class="paragraph"> <p>परियोजना`slider-gradle`Gradle प्लग़िन के माध्यम से AsciiDoc फ़ाइलों से Reveal.js प्रजेंटेशन बनाता है`org.asciidoctor.jvm.revealjs`. मुख्य कार्य की कॉन्फ़िगरेशन`asciidoctorRevealJs`वह रूट buildscript में सीधे रहता था`build.gradle.kts`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">plugins { id("org.asciidoctor.jvm.revealjs") } apply<slides.SlidesPlugin>() project.tasks.getByName<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { repositories { ruby { gems() } } revealjs { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } revealjsOptions { // ... configuration complète } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_लक्ष्य">लक्ष्य</h3> <div class="paragraph"> <p>इस पूरी कॉन्फ़िगरेशन को`buildSrc/src/main/kotlin/slides/SlidesPlugin.kt`कि बिल्डस्क्रिप्ट उपभोक्ता कम हो जाए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">apply<slides.SlidesPlugin>()</code></pre> </div> </div> <div class="paragraph"> <p>प्लगिन को पूरी तरह से स्वायत्त होना चाहिए: यह अपने प्लगिन निर्भरताओं को स्वयं लागू करता है, अपने रिपॉज़िटरीज़ को कॉन्फ़िगर करता है, और अपने रूबी जेम्स को प्रबंधित करता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पहली_बाधा_ruby_gems">पहली बाधा : `ruby { gems() }</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ग्रोवी_शुगर_सिंटैक्स_क्या_छिपाता_है">ग्रोवी शुगर सिंटैक्स क्या छिपाता है</h3> <div class="paragraph"> <p>लाइन`repositories { ruby { gems() } }`यह एक Groovy DSL एक्सटेंशन है जो केवल buildscript के निष्पादन संदर्भ में उपलब्ध है। यह buildSrc से 접근 가능한 स्थिर Kotlin API के रूप में मौजूद नहीं है।</p> </div> <div class="paragraph"> <p>इसको फ़ोन करने की कोशिश करते हुए`SlidesPlugin.kt`, संकलन तुरंत असफल हो जाता है।</p> </div> </div> <div class="sect2"> <h3 id="_मैकेनिज़म_का_विघटन">मैकेनिज़म का विघटन</h3> <div class="paragraph"> <p>ग्रेडल कैश का विश्लेषण करने के बाद (<code>~/.gradle/caches/modules-2/files-2.1/rubygems/</code>), फ़ाइल में हमें पता चलता है`ivy-3.1.0.xml`: (Note: The output should be exactly " : " with a leading space, colon, and trailing space, as per the instruction to translate the fragment and preserve formatting.)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><artifact type='gem' url='https://rubygems.org/gems/asciidoctor-revealjs-3.1.0.gem' /></code></pre> </div> </div> <div class="paragraph"> <p>`ruby { gems() }`वास्तव में कर रहा था<strong>तीन भिन्न संचालन</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Enregistrer un repo Ivy pointant vers <code><a href="https://rubygems.org/gems/" class="bare">https://rubygems.org/gems/</a></code></p> </li> <li> <p>समूह को बाहर रखें`rubygems`Maven रिपॉजिटरी टकराव से बचने के लिए</p> </li> <li> <p>जेम को कॉन्फ़िगरेशन में सहेजें`asciidoctorGems`जिससे JRuby इसे रनटाइम पर लोड करे</p> </li> </ol> </div> <div class="paragraph"> <p>इन तीन जिम्मेदारियों को कोटलिन में अलग‑अलग रूप से पुन: उत्पन्न किया जाना चाहिए।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_तीन_भागों_का_समाधान">तीन भागों का समाधान</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_भाग_1_ivy_रेपॉ_rubygems_के_लिए">भाग 1 : Ivy रेपॉ rubygems के लिए</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.repositories.mavenCentral() { content { excludeGroup("rubygems") } } project.repositories.ivy { url = project.uri("https://rubygems.org/gems/") patternLayout { artifact("[module]-[revision].gem") } <i class="conum" data-value="1"></i><b>(1)</b> metadataSources { artifact() } content { includeGroup("rubygems") } }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>एक्सटेंशन`.gem`इसे हार्डकोड किया जाना चाहिए।<code>[ext]`डिफ़ॉल्ट रूप से में हल करता है</code>.jar`, जिससे एक त्रुटि होती है`Resource missing`.</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_jbake_cli_commands_initialize_a_new_jbake_project_jbake_i">JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</h3> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="paragraph"> <p>नोट: आइवी रेपो सीधे घोषित किया गया है पर`project.repositories`और नहीं एक ब्लॉक में`repositories { }`क्योंकि इस ब्लॉक का रिसीवर नहीं है`RepositoryHandler`Gradle का मानक लेकिन एक grolifant API एक्सटेंशन के साथ अनुकूल नहीं`ivy`<mark>#</mark> Gradle Integration JBake को Gradle बिल्ड में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } === भाग 2: निर्भरता asciidoctorGems प्लगइन`org.asciidoctor.jvm.gems`इसे पहले लागू किया जाना चाहिए — यह कॉन्फ़िगरेशन बनाता है`asciidoctorGems`और कार्य`asciidoctorGemsPrepare`: [source,kotlin] ---- project.plugins.apply("org.asciidoctor.jvm.gems") project.plugins.apply("org.asciidoctor.jvm.revealjs") <i class="conum" data-value="1"></i><b>(1)</b> project.dependencies { add("asciidoctorGems", "rubygems:asciidoctor-revealjs:3.1.0@gem") <i class="conum" data-value="2"></i><b>(2)</b> } ---- <1> लागू करने का क्रम महत्वपूर्ण है : ### JBake CLI कमांड ---- # एक नया JBake प्रोजेक्ट प्रारंभ करें jbake -i # बेक (जेनरेट) साइट jbake -b # बेक और स्थानीय रूप से परोसें jbake -b -s # बेक और बदलावों की निगरानी करें jbake -b --reset # स्रोत और गंतव्य निर्दिष्ट करें jbake source_folder output_folder # बेकिंग से पहले आउटपुट निर्देशिका साफ़ करें jbake -b . output --reset`gems`पहले`revealjs`. <2> योग्यकर्ता`@gem`निर्भरता पर सही एक्सटेंशन बल दें। === भाग 3 : settings.gradle.kts `dependencyResolutionManagement`में`settings.gradle.kts`इसे परियोजनाओं को अपने स्वयं के रिपॉज़िटरी की घोषणा करने की अनुमति देनी चाहिए : [source,kotlin] ---- @Suppress("UnstableApiUsage") dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.PREFER_PROJECT) } ---- इसी पंक्ति के बिना, Gradle प्लगइन में घोषित रिपॉज़िटरी को अनदेखा करता है और gems का समाधान विफल हो जाता है। == बाइटकोड्स द्वारा API का आत्मनिरीक्षण === क्यों `javap` ? प्लगइन`asciidoctor-gradle-jvm-slides` est en version `4.0.0-alpha.1`. उसका दस्तावेज़ अस्तित्वहीन या अपूर्ण है। एकमात्र विश्वसनीय स्रोत संकलित क्लासेस की प्रत्यक्ष जाँच है। === कार्य का पदानुक्रम [source,bash] ---- javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.AsciidoctorJRevealJSTask ---- परिणाम : [source] ---- public class AsciidoctorJRevealJSTask extends org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask implements org.asciidoctor.gradle.base.slides.SlidesToExportAware ---- === की खोज `forkOptions निरीक्षण करते हुए. </think> निरीक्षण करते हुए`AbstractAsciidoctorTask`: [source,bash] ---- javap -p -classpath asciidoctor-gradle-jvm-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask | grep -i "fork\|exec\|jvm" ---- पाया जाता है: [source] ---- final org.ysb33r.grolifant.api.v4.JavaForkOptions javaForkOptions; public void forkOptions(org.gradle.api.Action<org.ysb33r.grolifant.api.v4.JavaForkOptions>); public static final org.asciidoctor.gradle.base.process.ProcessMode JAVA_EXEC; ---- === JavaForkOptions की एपीआई (grolifant) `javaLauncher`इस कार्य पर मौजूद नहीं है। वास्तविक API का`org.ysb33r.grolifant.api.v4.JavaForkOptions`दिखाता है : [source] ---- public void executable(java.lang.Object); <i class="conum" data-value="1"></i><b>(1)</b> public void setExecutable(java.lang.Object); ---- <1> पद्धति`executable(Object)`असाइनमेंट को बदलता है`executable = ...`जो कंपाइल नहीं होता (`val`पुन: आवंटित नहीं किया जा सकता). === RevealJSExtension `revealjs { }`कार्य की एक विधि नहीं है, लेकिन एक**परियोजना विस्तार**: [source,bash] ---- javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.RevealJSExtension ---- इस तक पहुँचा जाता है: [source,kotlin] ---- project.extensions.getByType<RevealJSExtension>().apply { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } ---- == जावा टूलचेन कॉन्फ़िगरेशन === JavaToolchainService की समस्या `JavaToolchainService`यह प्रोजेक्ट एक्सटेंशन नहीं है। निम्नलिखित कॉल विफल होता है : [source,kotlin] ---- // ERREUR : Extension of type 'JavaToolchainService' does not exist project.extensions.getByType<JavaToolchainService>() ---- अच्छी API है`serviceOf`: [source,kotlin] ---- import org.gradle.kotlin.dsl.support.serviceOf project.tasks.getByName<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf<JavaToolchainService>() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } } ---- == स्वचालित डॉकर का पता लगाना === संदर्भ Asciidoctor/JRuby प्लगिन को Java 17 की आवश्यकता है। Kotlin 2.0.x बिल्डSrc में Java 25 का समर्थन नहीं करता (वर्ज़न पार्सर क्रैश हो जाता है पर`"25.0.2"`Gradle डेमन को इसलिए Java 17 पर चलना चाहिए या Docker का उपयोग किया जाना चाहिए। === रणनीति 1. Docker उपलब्ध → कंटेनर के माध्यम से निष्पादन`eclipse-temurin:17`(डिफ़ॉल्ट व्यवहार) 2. Docker अनुपस्थित + Java 17 → स्थानीय निष्पादन 3. Docker अनुपस्थित + Java > 17 → स्पष्ट त्रुटि [source,kotlin] ---- val isDockerAvailable = try { Runtime.getRuntime().exec(arrayOf("docker", "info")).waitFor() == 0 } catch (e: Exception) { false } val javaVersion = JavaVersion.current().majorVersion.toInt() when { isDockerAvailable -> project.tasks.register<Exec>(TASK_ASCIIDOCTOR_REVEALJS) { group = GROUP_TASK_SLIDER description = "Slider settings and generation (via Docker)" dependsOn(TASK_CLEAN_SLIDES_BUILD) finalizedBy(TASK_DASHBOARD_SLIDES_BUILD) commandLine( "docker", "run", "--rm", "-v", "${project.rootDir.absolutePath}:/workspace", "-v", "${System.getProperty("user.home")}/.gradle:/root/.gradle", "-w", "/workspace", "eclipse-temurin:17", "./gradlew", TASK_ASCIIDOCTOR_REVEALJS ) workingDir = project.rootDir } javaVersion == 17 -> { project.repositories.mavenCentral() { content { excludeGroup("rubygems") } } project.repositories.ivy { url = project.uri("https://rubygems.org/gems/") patternLayout { artifact("[module]-[revision].gem") } metadataSources { artifact() } content { includeGroup("rubygems") } } project.extensions.getByType<RevealJSExtension>().apply { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } project.tasks.getByName<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf<JavaToolchainService>() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } // ... reste de la configuration } } else -> error( "Docker est requis pour exécuter $TASK_ASCIIDOCTOR_REVEALJS " + "avec Java $javaVersion. Installez Docker ou utilisez Java 17." ) } ---- == अंतिम परिणाम === भोक्ता बिल्डस्क्रिप्ट [source,kotlin] ---- apply<slides.SlidesPlugin>() ---- इतना ही। प्लगिन पूरी जिम्मेदारी लेता है। === settings.gradle.kts [source,kotlin] ---- pluginManagement { repositories { mavenLocal() gradlePluginPortal() } } plugins { id("org.gradle.toolchains.foojay-resolver-convention") version "0.8.0" } @Suppress("UnstableApiUsage") dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.PREFER_PROJECT) } rootProject.name = "slider-gradle" ---- == जाल और समाधानों का सारांश [cols="2,3,3"] |=== |समस्या |कारण |समाधान |`ruby { gems() }`Kotlin में उपलब्ध नहीं |केवल Groovy DSL एक्सटेंशन |तीन अलग‑अलग तंत्र : Ivy रेपो + Maven बहिष्करण +`asciidoctorGems` |Gradle एक की खोज कर रहा है`.jar`एक के बजाय`.gem` |`[ext]`हल करता है से`jar`डिफ़फ़ॉल्ट रूप से |Hardcoder`.gem`इवी पैटर्न में + योग्यता`@gem` |`ivy { }`में कंपाइल नहीं होता`repositories { }` |रिसीवर grolifant Kotlin DSL के साथ असंगत |सीधी कॉल`project.repositories.ivy { }` |`javaLauncher`अनसुलझा |अस्तित्वहीन गुणधर्म पर`AsciidoctorJRevealJSTask` |`setInProcess("JAVA_EXEC")`+`forkOptions { executable(...) }` |`executable = ...`कंपाइल नहीं होता |संपत्ति`val`में`JavaForkOptions`grolifant |पद्धति`executable(Object)`के स्थान पर |`JavaToolchainService`के माध्यम से नहीं मिला`extensions` |यह Gradle का एक सेवा है, एक एक्सटेंशन नहीं |`project.serviceOf<JavaToolchainService>()` |`revealjs { }`कार्य में हल नहीं |परियोजना विस्तार, कार्य की विधि नहीं |`project.extensions.getByType<RevealJSExtension>()` |बिल्ड Java 25 के साथ क्रैश होती है |Kotlin 2.0.x दो अंकों वाले Java संस्करणों को पार्स नहीं करता |स्वचालित Docker पहचान + Java 17 का फॉलबैक |=== == जाँच की विधि : अज्ञात API को javap के साथ पढ़ना === सिद्धांत जब दस्तावेज़ अनुपलब्ध या अधूरा हो, तब बाइटकोड सत्य का स्रोत होता है। `javap`यह JDK का मानक टूल है जो फ़ाइलों को डीकंपाइल करता है`.class` en signatures Java lisibles, स्रोत कोड की आवश्यकता नहीं === चरण 1: Gradle कैश में jar को खोजें Gradle सभी अपनी निर्भरताओं को डाउनलोड करता है में`~/.gradle/caches/modules-2/files-2.1/`. पहला कदम वह jar खोजना है जिसमें जाँचने के लिए क्लास मौजूद है: [source,bash] ---- find ~/.gradle/caches -name "asciidoctor-gradle-jvm-slides*.jar" 2>/dev/null ---- .परिणाम : [source] ---- /home/user/.gradle/caches/modules-2/files-2.1/org.asciidoctor/ asciidoctor-gradle-jvm-slides/4.0.0-alpha.1/.../ asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar ---- === चरण 2 : jar की कक्षाओं की सूची बनाएं क्लास का निरीक्षण करने से पहले, हम जाँचते हैं कि यह jar में वास्तव में मौजूद है: [source,bash] ---- jar tf asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar | grep -i "RevealJS\|revealjs" ---- .यह सभी उपलब्ध वर्गों को प्रकट करता है : `AsciidoctorJRevealJSTask`, `RevealJSExtension`, `RevealJSOptions`, etc. === चरण 3 : एक कक्षा का निरीक्षण करें [source,bash] ---- javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.AsciidoctorJRevealJSTask ---- विकल्प`-p`सभी सदस्यों को प्रदर्शित करता है, निजी सदस्यों सहित। परिणाम तुरंत मुख्य पंक्ति दिखाता है : [source] ---- public class AsciidoctorJRevealJSTask extends org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask ---- === चरण 4 : पदानुक्रम में ऊपर उठना कार्य विस्तृत होता है`AbstractAsciidoctorTask`. इसे उसकी बारी पर निरीक्षण किया जाता है पहले उसके जार को खोजते हुए : [source,bash] ---- find ~/.gradle/caches -name "asciidoctor-gradle-jvm-[0-9]*.jar" 2>/dev/null javap -p -classpath asciidoctor-gradle-jvm-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask | grep -i "fork\|exec\|jvm\|java" ---- वही पता चलता है।`forkOptions`, `JAVA_EXEC`, et `javaForkOptions` de type `org.ysb33r.grolifant.api.v4.JavaForkOptions`. === चरण 5: अज्ञात प्रकारों का पालन करें `JavaForkOptions`एक अज्ञात गrolifant कक्षा है। हम इसके jar को खोजते हैं : [source,bash] ---- find ~/.gradle/caches -name "grolifant*.jar" 2>/dev/null ---- फिर हम इसकी जाँच करते हैं: [source,bash] ---- javap -p -classpath grolifant40-legacy-api-2.0.0-alpha.6.jar \ org.ysb33r.grolifant.api.v4.JavaForkOptions ---- वहाँ इसे पाया जाता है`executable(java.lang.Object)`— बुलाने की सही विधि, के विपरीत`executable = ...`जो संकलित नहीं होता क्योंकि यह एक संपत्ति है`val`. === चरण 6: परियोजना एक्सटेंशन की जाँच करें के लिए`revealjs { }`, प्रश्न यह था: क्या यह कार्य की एक विधि है या प्रोजेक्ट का एक विस्तार? निरीक्षण का`AsciidoctorJRevealJSTask` कोई भी तरीका नहीं दिखाता`revealjs`. फिर निरीक्षण किया जाता है`RevealJSExtension`: [source,bash] ---- javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.RevealJSExtension | head -5 ---- [source] ---- public class RevealJSExtension implements groovy.lang.GroovyObject { public static final java.lang.String NAME; ---- की मौजूदगी`NAME`यह पुष्टि करता है कि यह एक पंजीकृत एक्सटेंशन परियोजना पर है, के माध्यम से सुलभ`project.extensions.getByType<RevealJSExtension>()`. === विधि का सारांश [cols="1,3"] |=== |चरण |क्रिया |1 |`find ~/.gradle/caches -name "*.jar"`— जार को खोजें |2 |`jar tf jar.jar \| grep NomClasse`— जाँचना कि कक्षा मौजूद है |3 |`javap -p -classpath jar.jar NomCompletClasse`— कक्षा का निरीक्षण करें |4 |पहचानकर्ता`extends`और हिरार्की में चढ़ना |5 |अज्ञात प्रकारों को अपने जारों में ट्रैक करें |6 |खोजें`NAME`एक प्रोजेक्ट एक्सटेंशन की पहचान करने के लिए |=== यह विधि किसी भी Gradle प्लगइन पर लागू होती है जिसका API दस्तावेज़ीकृत नहीं है या जिसका अल्फा संस्करण अब मौजूदा दस्तावेज़ से मेल नहीं खाता। == अगला कदम यह buildSrc प्लगिन को Gradle Plugin Portal या Maven Local पर प्रकाशित किए गए एक स्वतंत्र प्रोजेक्ट में निकाला जाएगा। उपयोग करने वाला buildscript तब : बन जाएगा। [source,kotlin] ---- plugins { id("slides") version "1.0.0" } ---- Et `settings.gradle.kts`इसे उसके न्यूनतम स्तर तक घटा दिया जाएगा बिना किसी संदर्भ के`foojay-resolver-convention`, JDK का प्रावधान प्लगिन द्वारा स्वयं प्रबंधित किया जाता है या यह एक आवश्यक शर्त के रूप में दस्तावेज़ीकृत किया जाता है।</code></pre> </div> </div> https://cheroliv.com/blog/2026/0101_jbake_portfolio_post.html Thu, 15 Jan 2026 00:00:00 +0000 blog/2026/0101_jbake_portfolio_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_आर्किटेक्चरल_विज़न">आर्किटेक्चरल विज़न</a> <ul class="sectlevel2"> <li><a href="#_निर्देशक_सिद्धांत">निर्देशक सिद्धांत</a></li> <li><a href="#_रणनीतिक_विकल्प_पोर्टफोलियो_के_लिए_asciidoc">रणनीतिक विकल्प: पोर्टफोलियो के लिए AsciiDoc</a></li> <li><a href="#_डेटा_मॉडल">डेटा मॉडल</a></li> </ul> </li> <li><a href="#_विस्तृत_उपयोग_केस">विस्तृत उपयोग केस</a> <ul class="sectlevel2"> <li><a href="#_uc1_एक_आइटम_पोर्टफोलियो_में_जोड़ें">UC1 : एक आइटम पोर्टफोलियो में जोड़ें</a> <ul class="sectlevel3"> <li><a href="#_नॉमिनल_फ़्लक्स">नॉमिनल फ़्लक्स</a></li> <li><a href="#_बनाने_के_लिए_फ़ाइल_का_टेम्प्लेट">बनाने के लिए फ़ाइल का टेम्प्लेट</a></li> <li><a href="#_सत्यापन_अंक">सत्यापन अंक</a></li> </ul> </li> <li><a href="#_uc2_पोर्टफ़ोलियो_से_एक_आइटम_हटाएँ">UC2 : पोर्टफ़ोलियो से एक आइटम हटाएँ</a> <ul class="sectlevel3"> <li><a href="#_नाममात्र_प्रवाह">नाममात्र प्रवाह</a></li> <li><a href="#_वैकल्पिक_रणनीति_अभिलेखागार">वैकल्पिक रणनीति : अभिलेखागार</a></li> <li><a href="#_संसाधनों_की_सफाई">संसाधनों की सफाई</a></li> </ul> </li> <li><a href="#_uc3_अप्रकाशित_draft_में_रखें">UC3 : अप्रकाशित (draft) में रखें</a> <ul class="sectlevel3"> <li><a href="#_सामान्य_फ़्लक्स">सामान्य फ़्लक्स</a></li> <li><a href="#_संभावित_स्थितियाँ">संभावित स्थितियाँ</a></li> <li><a href="#_सामान्य_उपयोग_केस">सामान्य उपयोग केस</a></li> </ul> </li> </ul> </li> <li><a href="#_टेम्प्लेटिंग_वास्तुकला">टेम्प्लेटिंग वास्तुकला</a> <ul class="sectlevel2"> <li><a href="#_पुन_प्रयोज्य_टेम्प्लेट्स_की_रणनीति">पुन: प्रयोज्य टेम्प्लेट्स की रणनीति</a></li> <li><a href="#_डेटा_निष्कर्षण_पैटर्न">डेटा निष्कर्षण पैटर्न</a></li> <li><a href="#_नामकरण_नियम">नामकरण नियम</a></li> </ul> </li> <li><a href="#_प्रकाशन_वर्कफ़्लो">प्रकाशन वर्कफ़्लो</a> <ul class="sectlevel2"> <li><a href="#_विकास_पाइपलाइन">विकास पाइपलाइन</a></li> <li><a href="#_पर्यावरणों">पर्यावरणों</a></li> </ul> </li> <li><a href="#_विस्तारनीयता">विस्तारनीयता</a> <ul class="sectlevel2"> <li><a href="#_नए_विशेषताओं_का_जोड़">नए विशेषताओं का जोड़</a></li> <li><a href="#_उन्नत_वर्गीकरण">उन्नत वर्गीकरण</a></li> </ul> </li> <li><a href="#_अच्छे_अभ्यास">अच्छे अभ्यास</a> <ul class="sectlevel2"> <li><a href="#_फ़ाइलों_का_संगठन">फ़ाइलों का संगठन</a></li> <li><a href="#_सामग्री_प्रबंधन">सामग्री प्रबंधन</a></li> <li><a href="#_प्रदर्शन">प्रदर्शन</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div class="sect1"> <h2 id="_आर्किटेक्चरल_विज़न">आर्किटेक्चरल विज़न</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निर्देशक_सिद्धांत">निर्देशक सिद्धांत</h3> <div class="paragraph"> <p>आर्किटेक्चर <strong>विचारों के पृथक्करण</strong> के सिद्धांत पर आधारित है :</p> </div> <div class="ulist"> <ul> <li> <p><strong>sagri</strong> : एससीआईडॉक्स फ़ाइलें संरचित मेटाडेटा के साथ</p> </li> <li> <p><strong>प्रस्तुति</strong> : templates Thymeleaf पुन: उपयोग करने योग्य</p> </li> <li> <p>डेटा" : JBake द्वारा AsciiDoc属性 से स्वचालित रूप से निकाला गया मॉडल</p> </li> <li> <p><strong>शैली</strong> : Bootstrap 5 को दृश्यात्मक सुसंगतता के लिए</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_रणनीतिक_विकल्प_पोर्टफोलियो_के_लिए_asciidoc">रणनीतिक विकल्प: पोर्टफोलियो के लिए AsciiDoc</h3> <div class="paragraph"> <p>क्यों AsciiDoc ?</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">मापदंड</th> <th class="tableblock halign-left valign-top">लाभ</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">संगति</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Même format que les articles de blog</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">मेटाडेटा</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">संरचित और विस्तारयोग्य गुण (<code>project-*</code>)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">रखरखावयोग्यता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सरल टेक्स्ट संपादन, Git-संस्करणीय</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">लचीलापन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">इसमें समृद्ध सामग्री (तालिकाएँ, कोड, छवियाँ) हो सकती है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">टेम्प्लेटिंग</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake स्वचालित रूप से Thymeleaf के लिए अट्रिब्यूट निकालता है</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_डेटा_मॉडल">डेटा मॉडल</h3> <div class="paragraph"> <p>हर पोर्टफ़ोलियो प्रोजेक्ट एक AsciiDoc दस्तावेज़ है, जिसके साथ :</p> </div> <div class="ulist"> <ul> <li> <p><strong>शीर्षक मेटाडेटा</strong> : संरचित जानकारी (ग्राहक, अवधि, प्रौद्योगिकियाँ, आदि)</p> </li> <li> <p><strong>दस्तावेज़ का शरीर</strong> : कथात्मक विवरण, चुनौतियाँ, समाधान, परिणाम</p> </li> <li> <p>वैयक्तिकृत विशेषताएँ: पूर्वसंयोजित`project-*`स्वचालित निष्कर्षण के लिए</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-bea209e9aee378261d4d6be388fee53c.png" alt="Diagram" width="386" height="811"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_विस्तृत_उपयोग_केस">विस्तृत उपयोग केस</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_uc1_एक_आइटम_पोर्टफोलियो_में_जोड़ें">UC1 : एक आइटम पोर्टफोलियो में जोड़ें</h3> <div class="sect3"> <h4 id="_नॉमिनल_फ़्लक्स">नॉमिनल फ़्लक्स</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "संपादक\nपाठ" as editor participant "फ़ाइल ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "संपादक\nपाठ" as editor participant "फ़ाइल AsciiDoc" as file participant "JBake इंजन" as jbake participant "साइट\nस्थैतिक" as site dev -> editor : Créer nouveau fichier activate editor editor -> file : portfolio/nouveau-projet.adoc activate file dev -> editor : Rédiger en-tête avec métadonnées\n(titre, type=project, status=published,\nattributs project-*) dev -> editor : Rédiger contenu narratif\n(contexte, défis, solutions) dev -> editor : Ajouter images dans assets/img/portfolio/ editor -> file : Sauvegarder deactivate editor dev -> jbake : Lancer build (jbake -b) activate jbake jbake -> file : Lire et parser jbake -> jbake : Extraire métadonnées jbake -> jbake : Convertir AsciiDoc → HTML jbake -> jbake : Appliquer template project.html jbake -> jbake : Ajouter à la liste portfolio.html jbake -> site : Générer pages statiques deactivate jbake dev -> site : Vérifier résultat activate site site --> dev : Afficher projet deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_बनाने_के_लिए_फ़ाइल_का_टेम्प्लेट">बनाने के लिए फ़ाइल का टेम्प्लेट</h4> <div class="paragraph"> <p>डेवलपर बनाता है`content/portfolio/nom-projet.adoc`एक मानकीकृत संरचना के साथ :</p> </div> <div class="ulist"> <ul> <li> <p>सभी आवश्यक विशेषताओं के साथ शीर्ष</p> </li> <li> <p>मानकीकृत अनुभाग (संदर्भ, चुनौतियाँ, समाधान, परिणाम)</p> </li> <li> <p>छवियों की सुसंगत नामावली</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_सत्यापन_अंक">सत्यापन अंक</h4> <div class="ulist"> <ul> <li> <p>अनिवार्य विशेषताएँ मौजूद हैं (<code>jbake-type</code>, <code>jbake-status</code>, <code>project-thumbnail</code>)</p> </li> <li> <p>संदर्भित छवियाँ हैं`assets/img/portfolio/`</p> </li> <li> <p>JBake बिल्ड त्रुटि के बिना सफलतापूर्वक होता है</p> </li> <li> <p>प्रोजेक्ट पोर्टफ़ोलियो पृष्ठ पर दिखाई देता है</p> </li> <li> <p>प्रोजेक्ट का व्यक्तिगत पृष्ठ सही ढंग से प्रदर्शित होता है</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc2_पोर्टफ़ोलियो_से_एक_आइटम_हटाएँ">UC2 : पोर्टफ़ोलियो से एक आइटम हटाएँ</h3> <div class="sect3"> <h4 id="_नाममात्र_प्रवाह">नाममात्र प्रवाह</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 4) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "प्रणाली ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "प्रणाली फ़ाइलें" as fs participant "JBake इंजन" as jbake participant "साइट\nस्थिर" as site database "कैश JBake" as cache dev -> fs : Supprimer portfolio/projet-ancien.adoc activate fs fs --> dev : Fichier supprimé deactivate fs dev -> fs : (Optionnel) Supprimer images associées\nassets/img/portfolio/projet-ancien-* activate fs fs --> dev : Images supprimées deactivate fs dev -> cache : Nettoyer cache JBake activate cache cache --> dev : Cache vidé deactivate cache dev -> jbake : Rebuild complet (jbake -b) activate jbake jbake -> jbake : Scanner content/portfolio/ jbake -> jbake : Projet absent → non généré jbake -> jbake : Régénérer portfolio.html\n(sans le projet supprimé) jbake -> site : Déployer nouveau build deactivate jbake dev -> site : Vérifier activate site site --> dev : Projet absent de la liste deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_वैकल्पिक_रणनीति_अभिलेखागार">वैकल्पिक रणनीति : अभिलेखागार</h4> <div class="paragraph"> <p>स्थायी रूप से हटाने के बजाय, एक फ़ोल्डर बनाने की संभावना`content/portfolio/archive/`(No output)</p> </div> <div class="ulist"> <ul> <li> <p>फ़ाइल को हटाने की बजाय इसे ले जाएँ</p> </li> <li> <p>आसानी से बहाल करने की अनुमति देता है</p> </li> <li> <p>गिट का इतिहास अधिक स्पष्ट रखें</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_संसाधनों_की_सफाई">संसाधनों की सफाई</h4> <div class="ulist"> <ul> <li> <p>जाँच करें अनाथ छवियों में`assets/img/portfolio/`</p> </li> <li> <p>अन्य परियोजनाओं द्वारा संदर्भित नहीं की गई छवियों को हटाएँ</p> </li> <li> <p>JBake का कैश साफ़ करें ताकि भूतिया संदर्भों से बचा जा सके</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc3_अप्रकाशित_draft_में_रखें">UC3 : अप्रकाशित (draft) में रखें</h3> <div class="sect3"> <h4 id="_सामान्य_फ़्लक्स">सामान्य फ़्लक्स</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "फ़ाइल\nAsciiDoc" as file participant "JBake ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "फ़ाइल\nAsciiDoc" as file participant "JBake इंजन" as jbake participant "साइट स्थैतिक" as site dev -> file : Ouvrir portfolio/projet.adoc activate file dev -> file : Modifier attribut\n:jbake-status: published\n↓\n:jbake-status: draft file --> dev : Sauvegardé deactivate file dev -> jbake : Rebuild (jbake -b) activate jbake jbake -> file : Parser le fichier jbake -> jbake : Détecter status=draft jbake -> jbake : Exclure de published_projects jbake -> jbake : Ne pas créer page publique note right Le projet existe toujours mais n'est pas publié end note jbake -> site : Générer site (sans ce projet) deactivate jbake dev -> site : Vérifier portfolio activate site site --> dev : Projet absent de la liste publique deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_संभावित_स्थितियाँ">संभावित स्थितियाँ</h4> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-a4b71e9dbf30083d131223257db47469.png" alt="Diagram" width="556" height="448"> </div> </div> </div> <div class="sect3"> <h4 id="_सामान्य_उपयोग_केस">सामान्य उपयोग केस</h4> <div class="ulist"> <ul> <li> <p><strong>लेखनाधीन प्रोजेक्ट</strong> : ड्राफ्ट बनाएं, जब तैयार हो तब प्रकाशित करें</p> </li> <li> <p><strong>अस्थायी रूप से गोपनीय परियोजना</strong> : ग्राहक समझौते के दौरान ड्राफ्ट में रखें</p> </li> <li> <p><strong>महत्वपूर्ण अपडेट</strong> : ड्राफ्ट में जाना, संपादित करना, फिर से प्रकाशित करना</p> </li> <li> <p><strong>A/B testing</strong> : ड्राफ्ट में डुप्लिकेट करें, परीक्षण करें, सर्वोत्तम संस्करण प्रकाशित करें</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_टेम्प्लेटिंग_वास्तुकला">टेम्प्लेटिंग वास्तुकला</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पुन_प्रयोज्य_टेम्प्लेट्स_की_रणनीति">पुन: प्रयोज्य टेम्प्लेट्स की रणनीति</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-2b0072f38037276992e0f6d3a0089826.png" alt="Diagram" width="881" height="350"> </div> </div> </div> <div class="sect2"> <h3 id="_डेटा_निष्कर्षण_पैटर्न">डेटा निष्कर्षण पैटर्न</h3> <div class="paragraph"> <p>JBake AsciiDoc विशेषताओं को Thymeleaf में सुलभ संपत्तियों में स्वचालित रूप से परिवर्तित करता है :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-62cbc0bbf0985eda2a7b019697a45309.png" alt="Diagram" width="893" height="346"> </div> </div> </div> <div class="sect2"> <h3 id="_नामकरण_नियम">नामकरण नियम</h3> <div class="ulist"> <ul> <li> <p><strong>परियोजना गुण</strong> : प्रीफ़िक्स`project-*` (ex: <code>project-client</code>, <code>project-tech-stack</code>)</p> </li> <li> <p><strong>फ़ाइलें</strong> : kebab-case (उदाहरण:`ecommerce-platform.adoc`)</p> </li> <li> <p><strong>छवियाँ</strong> : प्रीफ़िक्स परियोजना का नाम (उदाहरण:`ecommerce-platform-thumb.jpg`)</p> </li> <li> <p><strong>Templates</strong> : कार्यात्मक नाम (उदाहरण:`project-card.html`, <code>tech-badge.html</code>)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रकाशन_वर्कफ़्लो">प्रकाशन वर्कफ़्लो</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_विकास_पाइपलाइन">विकास पाइपलाइन</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-2694c3ad773a745365e7ae3fa7dc2d53.png" alt="Diagram" width="386" height="811"> </div> </div> </div> <div class="sect2"> <h3 id="_पर्यावरणों">पर्यावरणों</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 40%;"> <col style="width: 40%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">पर्यावरण</th> <th class="tableblock halign-left valign-top">उपयोग</th> <th class="tableblock halign-left valign-top">स्वीकृत स्थिति</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Local</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">विकास और पूर्वावलोकन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">ड्राफ्ट, प्रकाशित</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">स्टेजिंग</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पूर्व-उत्पादन सत्यापन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">केवल प्रकाशित</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">उत्पादन</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सार्वजनिक साइट</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">published केवल</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_विस्तारनीयता">विस्तारनीयता</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_नए_विशेषताओं_का_जोड़">नए विशेषताओं का जोड़</h3> <div class="paragraph"> <p>डेटा मॉडल को समृद्ध करने के लिए, सरलता से नए प्रीफ़िक्स वाले विशेषताएँ जोड़ें`project-*`:</p> </div> <div class="ulist"> <ul> <li> <p><code>project-awards</code>: पुरस्कार और सम्मान</p> </li> <li> <p>`project-testimonial`ग्राहक उद्धरण</p> </li> <li> <p><code>project-team-size</code>: टीम का आकार</p> </li> <li> <p><code>project-budget-range</code>: बजट सीमा</p> </li> </ul> </div> <div class="paragraph"> <p>ये विशेषताएँ जेएबेक इंजन को संशोधित किए बिना टेम्प्लेट्स में स्वचालित रूप से उपलब्ध हो जाती हैं।</p> </div> </div> <div class="sect2"> <h3 id="_उन्नत_वर्गीकरण">उन्नत वर्गीकरण</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-8fc4ea39537fbf0b42448938639b42a8.png" alt="Diagram" width="582" height="259"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छे_अभ्यास">अच्छे अभ्यास</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_फ़ाइलों_का_संगठन">फ़ाइलों का संगठन</h3> <div class="ulist"> <ul> <li> <p><strong>एक फ़ाइल = एक परियोजना</strong> : कई परियोजनाओं को मिलाने से बचें</p> </li> <li> <p><strong>विशेष फ़ोल्डर में छवियाँ</strong> :`assets/img/portfolio/nom-projet/`</p> </li> <li> <p>सुसंगत नामावली : खोज और रखरखाव को आसान बनाता है</p> </li> <li> <p><strong>Versioning Git</strong> : संपूर्ण परिवर्तन ट्रैकिंग</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_सामग्री_प्रबंधन">सामग्री प्रबंधन</h3> <div class="ulist"> <ul> <li> <p><strong>डिफ़ॉल्ट ड्राफ़्ट स्थिति</strong> : केवल तभी प्रकाशित करें जब तैयार हों</p> </li> <li> <p><strong>प्रकाशन से पहले समीक्षा</strong> : गुणवत्ता और गोपनीयता की पुष्टि</p> </li> <li> <p><strong>सम्पूर्ण मेटाडेटा</strong> : सभी संबंधित फ़ील्ड भरें</p> </li> <li> <p><strong>समृद्ध कथा सामग्री</strong> : मेटाडेटा तक सीमित न रहें</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_प्रदर्शन">प्रदर्शन</h3> <div class="ulist"> <ul> <li> <p><strong>छवियों को अनुकूलित करें</strong> : कमिट से पहले संपीड़न</p> </li> <li> <p><strong>yदि आवश्यक हो तो पेज़िनेशन</strong> : यदि >20 परियोजनाएँ</p> </li> <li> <p><strong>Lazy loading</strong> : गैलरी की छवियों को आवश्यकतानुसार लोड किया जाता है</p> </li> <li> <p><strong>ब्राउज़र कैश</strong> : एसेट्स के लिए उपयुक्त हेडर</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह वास्तुकला अनुमति देती है:</p> </div> <div class="ulist"> <ul> <li> <p><strong>उपयोग में आसानी</strong> : एक परियोजना जोड़ें = एक टेक्स्ट फ़ाइल बनाएँ</p> </li> <li> <p><strong>लचीलापन</strong> : विस्तारयोग्य नई विशेषताओं के माध्यम से</p> </li> <li> <p><strong>धारणीयता</strong> : सामग्री/प्रस्तुति का पृथक्करण</p> </li> <li> <p><strong>ट्रेसबिलिटी</strong> : Git का पूर्ण संस्करणन</p> </li> <li> <p><strong>स्वचालन</strong> : लगातार बनाना और तैनाती संभव</p> </li> </ul> </div> <div class="paragraph"> <p>AsciiDoc का चयन साइट के बाकी हिस्से के साथ सुसंगतता सुनिश्चित करता है, साथ ही एक पेशेवर पोर्टफ़ोलियो के लिए आवश्यक मेटाडेटा की समृद्धि प्रदान करता है।</p> </div> </div> </div> https://cheroliv.com/blog/2026/0100_jbake_supabase_springboot_hybride_post.html Wed, 14 Jan 2026 00:00:00 +0000 blog/2026/0100_jbake_supabase_springboot_hybride_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">पढ़ने का समय : 12 minutes</div> <p>सुपाबेस की सरलता और स्प्रिंग बूट की शक्ति के बीच चयन करने के बजाय, दोनों को क्यों नहीं मिलाएँ? एक हाइब्रिड आर्किटेक्ट खोजें जो प्रत्येक तकनीक के सर्वश्रेष्ठ पहलुओं का उपयोग करता है।</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">सामग्री की तालिका</dt> <dd> <p>(No output)</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_आधुनिक_वास्तुकला_का_झूठा_दुविधा">आधुनिक वास्तुकला का झूठा दुविधा</h2> <div class="sectionbody"> <div class="paragraph"> <p>जब कोई आधुनिक एप्लिकेशन एक स्थिर फ्रंटएंड के साथ बनाता है, तो वह अक्सर द्विआधारी विकल्प के सामने आ जाता है:</p> </div> <div class="ulist"> <ul> <li> <p><strong>एक बैकएंड-एज़-ए-सेवा समाधान पर सब कुछ दांव लगाना</strong>(Supabase, Firebase) - सरल लेकिन सीमित</p> </li> <li> <p><strong>एक पूर्ण बैकएंड बनाएँ</strong>(Spring Boot, Node.js) - शक्तिशाली लेकिन जटिल</p> </li> </ul> </div> <div class="paragraph"> <p>यह विकल्प एक गलत द्वंद्व है। हाइब्रिड आर्किटेक्चर एक तीसरा रास्ता प्रस्तुत करता है: <strong>हर तकनीक का उपयोग उस जगह करें जहाँ वह उत्कृष्ट होती है</strong>।</p> </div> </div> </div> <div class="sect1"> <h2 id="_वास्तुकल_दृष्टि">वास्तुकल दृष्टि</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पारंपरिक_आर्किटेक्चर_मोनोलिथिक">पारंपरिक आर्किटेक्चर: मोनोलिथिक</h3> <div class="imageblock"> <div class="content"> <img src="traditional-architecture.svg" alt="traditional architecture" width="1744" height="5664"> </div> </div> <div class="paragraph"> <p>इस दृष्टिकोण में, सबसे सरल संचालन (एक लेख पढ़ना, एक टिप्पणी बनाना) भी आपके बैकएंड से गुजरना चाहिए। आप पहले दिन से ही जटिलता की लागत चुकाते हैं।</p> </div> </div> <div class="sect2"> <h3 id="_baas_आर्किटेक्चर_सब_प्रतिनिधि">BaaS आर्किटेक्चर: सब प्रतिनिधि</h3> <div class="imageblock"> <div class="content"> <img src="baas-architecture.svg" alt="baas architecture" width="1746" height="5640"> </div> </div> <div class="paragraph"> <p>दूसरी ओर, BaaS पर सब कुछ बाहर रखना शुरू में आकर्षक लगता है, परंतु जब व्यावसायिक तर्क जटिल होने लगता है, तो यह तेज़ी से अपनी सीमाएँ दिखाने लगता है।</p> </div> </div> <div class="sect2"> <h3 id="_हाइब्रिड_आर्किटेक्चर_जिम्मेदारियों_का_विभाजन">हाइब्रिड आर्किटेक्चर : जिम्मेदारियों का विभाजन</h3> <div class="imageblock"> <div class="content"> <img src="hybrid-overview.svg" alt="hybrid overview" width="1758" height="5784"> </div> </div> <div class="paragraph"> <p>हाइब्रिड आर्किटेक्चर जटिलता और संचालन की प्रकृति के अनुसार स्पष्ट रूप से जिम्मेदारियों को अलग करता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_डिज़ाइन_के_सिद्धांत">डिज़ाइन के सिद्धांत</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_सिद्धांत_1_सरलता_से_शुरू_करें_बुद्धिमानी_से_विकसित_हों">सिद्धांत 1: सरलता से शुरू करें, बुद्धिमानी से विकसित हों</h3> <div class="imageblock"> <div class="content"> <img src="evolution-phases.svg" alt="evolution phases" width="1738" height="5688"> </div> </div> <div class="paragraph"> <p><strong>यदि आपको इसकी आवश्यकता नहीं है, तो Spring Boot का निर्माण न करें।</strong>Supabase से शुरू करें, जब जटिलता इसकी मांग करे तो Spring Boot जोड़ें.</p> </div> </div> <div class="sect2"> <h3 id="_सिद्धान्त_2_ऑपरेशन_की_प्रकृति_से_पृथक्करण">सिद्धान्त 2 : ऑपरेशन की प्रकृति से पृथक्करण</h3> <div class="imageblock"> <div class="content"> <img src="operation-types.svg" alt="operation types" width="1266" height="241"> </div> </div> </div> <div class="sect2"> <h3 id="_सिद्धांत_3_एक_ही_सत्य_का_स्रोत">सिद्धांत 3: एक ही सत्य का स्रोत</h3> <div class="imageblock"> <div class="content"> <img src="single-source-truth.svg" alt="single source truth" width="1746" height="5712"> </div> </div> <div class="paragraph"> <p>PostgreSQL की एक ही इंस्टेंस साझा करके, Supabase और Spring Boot एक ही डेटा पर काम करते हैं, बिना जटिल सिंक्रोनाइज़ेशन के।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_फ़्लक्स_की_ऑर्केस्ट्रेशन">फ़्लक्स की ऑर्केस्ट्रेशन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_फ़्लक्स_1_केंद्रीकृत_प्रमाणीकरण">फ़्लक्स 1: केंद्रीकृत प्रमाणीकरण</h3> <div class="imageblock"> <div class="content"> <img src="auth-orchestration.svg" alt="auth orchestration" width="1099" height="950"> </div> </div> <div class="paragraph"> <p><strong>मुख्य बिंदु</strong>एक ही प्रमाणीकरण प्रक्रिया, एक ही JWT, हर जगह उपयोग करने योग्य.</p> </div> </div> <div class="sect2"> <h3 id="_flux_2_एक_जटिल_व्यावसायिक_प्रक्रिया_का_ऑर्केस्ट्रेशन">Flux 2 : एक जटिल व्यावसायिक प्रक्रिया का ऑर्केस्ट्रेशन</h3> <div class="imageblock"> <div class="content"> <img src="business-orchestration.svg" alt="business orchestration" width="1169" height="990"> </div> </div> <div class="paragraph"> <p><strong>Spring Boot क्या लाता है</strong>लेनदेन गारंटी के साथ कई प्रणालियों को शामिल करते हुए जटिल प्रक्रियाओं की विश्वसनीय आर्केस्ट्रेशन</p> </div> </div> <div class="sect2"> <h3 id="_फ़्लक्स_3_नियोजित_कार्य_और_सिंक्रोनाइज़ेशन">फ़्लक्स 3 : नियोजित कार्य और सिंक्रोनाइज़ेशन</h3> <div class="imageblock"> <div class="content"> <img src="scheduled-jobs.svg" alt="scheduled jobs" width="920" height="912"> </div> </div> <div class="paragraph"> <p><strong>Spring Boot क्या लाता है</strong>विश्वसनीय निर्धारित जॉब्स के साथ स्थिति प्रबंधन, स्वचालित पुनः प्रयास, और सुनिश्चित निष्पादन.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निर्णय_मेट्रिक्स">निर्णय मेट्रिक्स</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_supabase_का_उपयोग_कब_करें">Supabase का उपयोग कब करें ?</h3> <div class="imageblock"> <div class="content"> <img src="supabase-decision.svg" alt="supabase decision" width="1030" height="445"> </div> </div> </div> <div class="sect2"> <h3 id="_स्प्रिंग_बूट_का_उपयोग_कब_करें">स्प्रिंग बूट का उपयोग कब करें?</h3> <div class="imageblock"> <div class="content"> <img src="springboot-decision.svg" alt="springboot decision" width="1142" height="485"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_परियोजना_प्रकार_के_अनुसार_आर्किटेक्चर_के_उदाहरण">परियोजना प्रकार के अनुसार आर्किटेक्चर के उदाहरण</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ब्लॉग_पोर्टफ़ोलियो">ब्लॉग / पोर्टफ़ोलियो</h3> <div class="imageblock"> <div class="content"> <img src="blog-architecture.svg" alt="blog architecture" width="1773" height="5700"> </div> </div> <div class="paragraph"> <p><strong>निर्णय</strong>100% Supabase बहुत पर्याप्त है</p> </div> </div> <div class="sect2"> <h3 id="_saas_एप्लिकेशन">SaaS एप्लिकेशन</h3> <div class="imageblock"> <div class="content"> <img src="saas-architecture.svg" alt="saas architecture" width="1770" height="5748"> </div> </div> <div class="paragraph"> <p><strong>निर्णय</strong>हाइब्रिड आर्किटेक्चर आवश्यक है। Supabase मुख्य हिस्से के लिए, Spring Boot महत्वपूर्ण भाग (भुगतान, बिलिंग) के लिए।</p> </div> </div> <div class="sect2"> <h3 id="_इलेक्ट्रॉनिक_वाणिज्य">इलेक्ट्रॉनिक वाणिज्य</h3> <div class="imageblock"> <div class="content"> <img src="ecommerce-architecture.svg" alt="ecommerce architecture" width="1738" height="5760"> </div> </div> <div class="paragraph"> <p><strong>निर्णय</strong>: Spring Boot आवश्यक है। Supabase केवल प्रमाणीकरण और कैटालॉग के लिए।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रगतिशील_प्रवास_रणनीति">प्रगतिशील प्रवास रणनीति</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="migration-strategy.svg" alt="migration strategy" width="2050" height="954"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_लागत_और_परिचालन_विचार">लागत और परिचालन विचार</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_लागत_संरचना">लागत संरचना</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 7) ] @startuml skinparam backgroundColor #FEFEFE package "अनुमानित मासिक लागत" { rectangle "चरण MVP (0-1000 उपयोगकर्ता)" #LightGreen { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE package "अनुमानित मासिक लागत" { rectangle "चरण MVP (0-1000 उपयोगकर्ता)" #LightGreen { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot: N/A] note bottom: **Total: 0€/mois** } rectangle "वृद्धि चरण (1k-10k उपयोगकर्ता)" #LightYellow { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot (Cloud Run): 20-50€] [PostgreSQL (si séparé): 0-30€] note bottom: **Total: 20-80€/mois** } rectangle "चरण स्केल (10k-100k उपयोगकर्ता)" #LightCoral { [JBake (Netlify Pro): 19€] [Supabase Pro: 25€] [Spring Boot (instances multiples): 100-300€] [Redis Cache: 20-50€] [Monitoring: 20€] note bottom: **Total: 184-414€/mois** } } note right of "चरण स्केल (10k-100k उपयोगकर्ता)" À ce stade, les revenus justifient largement les coûts end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_ऑपरेशनल_जिम्मेदारियाँ">�ऑपरेशनल जिम्मेदारियाँ</h3> <div class="imageblock"> <div class="content"> <img src="operational-responsibilities.svg" alt="operational responsibilities" width="1742" height="5700"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष_पूर्ण_संतुलन">निष्कर्ष: पूर्ण संतुलन</h2> <div class="sectionbody"> <div class="paragraph"> <p>Supabase + Spring Boot की संकर आर्किटेक्चर एक समझौता नहीं है, यह एक<strong>सहयोग</strong>.</p> </div> <div class="sect2"> <h3 id="_ध्यान_में_रखने_वाले_सिद्धांत">ध्यान में रखने वाले सिद्धांत</h3> <div class="imageblock"> <div class="content"> <img src="key-principles.svg" alt="key principles" width="581" height="316"> </div> </div> </div> <div class="sect2"> <h3 id="_कब_इस_आर्किटेक्चर_को_चुनें">कब इस आर्किटेक्चर को चुनें ?</h3> <div class="paragraph"> <p><strong>�✅ यह आर्किटेक्चर आदर्श है यदि :</strong></p> </div> <div class="ulist"> <ul> <li> <p>आप जल्दी से शुरू करना चाहते हैं (एमवीपी दिनों में, महीनों में नहीं)</p> </li> <li> <p>आप व्यावसायिक जटिलता में वृद्धि की आशा रखते हैं।</p> </li> <li> <p>आप प्रारम्भिक लागत को कम करना चाहते हैं</p> </li> <li> <p>आप PostgreSQL को पसंद करते हैं और सत्य का एकमात्र स्रोत चाहते हैं।</p> </li> <li> <p>आप कोटलिन और कोरूटीन को व्यावसायिक कोड के लिए सराहते हैं</p> </li> <li> <p>आप पूर्ण विक्रेता लॉक-इन से बचना चाहते हैं</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�❌ यह आर्किटेक्ट उपयुक्त नहीं है यदि :</strong></p> </div> <div class="ulist"> <ul> <li> <p>आपका प्रोजेक्ट सरल है और ऐसा ही रहेगा (व्यक्तिगत ब्लॉग → 100% Supabase पर्याप्त है)</p> </li> <li> <p>आपके पास पहले से ही एक स्थापित बैकएंड स्टैक है जिसे आप समझते हैं</p> </li> <li> <p>आप पारंपरिक एकल पत्थर को पसंद करते हैं</p> </li> <li> <p>आपको .NET, Python, या अन्य बैकएंड भाषा की आवश्यकता है</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_अंतिम_समग्र_दृष्टिकोण">अंतिम समग्र दृष्टिकोण</h3> <div class="imageblock"> <div class="content"> <img src="final-vision.svg" alt="final vision" width="1751" height="5760"> </div> </div> </div> <div class="sect2"> <h3 id="_दोनों_दुनियाओं_का_सर्वश्रेष्ठ">दोनों दुनियाओं का सर्वश्रेष्ठ</h3> <div class="paragraph"> <p>यह आर्किटेक्चर आपको देता है :</p> </div> <div class="paragraph"> <p><strong>�🚀 Supabase का वेग</strong></p> </div> <div class="ulist"> <ul> <li> <p>घंटों में प्रारम्भ, हफ्तों में नहीं</p> </li> <li> <p>OAuth2 प्रमाणीकरण कुछ क्लिक्स में</p> </li> <li> <p>स्वचालित रूप से उत्पन्न REST API</p> </li> <li> <p>ज़ीरो सर्वर कॉन्फ़िगरेशन</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�💪 Spring Boot की शक्ति</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin और Coroutines के लिए सुंदर असिंक्रोनस कोड</p> </li> <li> <p>जटिल व्यावसायिक प्रक्रियाओं का ऑर्केस्ट्रेशन</p> </li> <li> <p>विश्वसनीय निर्धारित कार्य</p> </li> <li> <p>ACID लेनदेन गारंटीकृत</p> </li> <li> <p>पूरा Spring इकोसिस्टम</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💰 प्रगतिशील अर्थव्यवस्था</strong></p> </div> <div class="ulist"> <ul> <li> <p>शुरू करने और पुष्टि करने के लिए 0€</p> </li> <li> <p>विकास के अनुसार लागत</p> </li> <li> <p>प्रीमैच्योर ओवर-इंजीनियरिंग नहीं</p> </li> </ul> </div> <div class="paragraph"> <p><strong>🎯 आर्किटेक्चरल लचीलापन</strong></p> </div> <div class="ulist"> <ul> <li> <p>प्रगतिशील माइग्रेशन बिना पुनः संरचना</p> </li> <li> <p>यदि आवश्यक हो तो केवल Spring Boot जोड़ें</p> </li> <li> <p>कुल वेंडर लॉक‑इन नहीं</p> </li> <li> <p>विकासशील आर्किटेक्चर</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_और_आगे_जाने_के_लिए">और आगे जाने के लिए</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_तकनीकी_संसाधन">तकनीकी संसाधन</h3> <div class="paragraph"> <p><strong>सुपाबेस दस्तावेज़ :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">प्रमाणीकरण गाइड</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">पंक्तियों के स्तर की सुरक्षा</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">स्वचालित रूप से उत्पन्न API</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>स्प्रिंग बूट दस्तावेज़ :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/" class="bare">https://spring.io/guides/tutorials/spring-boot-kotlin/</a>[<mark>#</mark> ग्रैडल एकीकरण</p> </li> </ul> </div> <div class="paragraph"> <p>JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }] * https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow[Coroutines और Spring] * https://docs.spring.io/spring-security/reference/servlet/oauth2/resource-server/jwt.html[JWT संसाधन सर्वर] **पूरक अनुच्छेद:** * JWT के साथ API सुरक्षा * PostgreSQL प्रदर्शन अनुकूलन * प्रगतिशील प्रवास के पैटर्न * वितरित आर्किटेक्चर में त्रुटि प्रबंधन === वास्तविक उपयोग के मामले इस हाइब्रिड आर्किटेक्चर को सफलतापूर्वक उपयोग में लाया जाता है : * **SaaS B2B**सुपरबेस प्रमाणीकरण, सपिंग बूट बिलिंग * **बाज़ारें**: कैटलॉग Supabase, लेनदेन Spring Boot * **सामग्री प्लेटफ़ॉर्म**: लेख Supabase, विश्लेषण Spring Boot * **आंतरिक उपकरण**CRUD Supabase, कार्यप्रवाह Spring Boot === स्टार्टअप चेकलिस्ट **चरण 1 - नींव (हफ़्ता 1)** - [ ] सुपाबेस खाता बनाएँ - [ ] PostgreSQL प्रोजेक्ट कॉन्फ़िगर करें - [ ] Auth सक्रिय करें (Google, GitHub) ### JBake CLI कमांड # एक नया JBake प्रोजेक्ट प्रारंभ करें jbake -i # साइट बेक (जेनरेट) करें jbake -b # स्थानीय रूप से बेक और परोसें jbake -b -s # परिवर्तनों के लिए बेक और देखें jbake -b --reset # स्रोत और गंतव्य निर्दिष्ट करें jbake source_folder output_folder # बेक करने से पहले आउटपुट डायरेक्टरी साफ़ करें jbake -b . output --reset - [ ] प्रारंभिक स्कीमा परिभाषित करें Row Level Security कॉन्फ़िगर करें - [ ] Tester APIs depuis JBake **चरण 2 - MVP (सप्ताह 2-3)** - [ ] मुख्य पेज़ लागू करना - [ ] OAuth2 प्रमाणीकरण को एकीकृत करें - [ ] CRUD फ़ॉर्म बनाना - [ ] फाइलों के लिए Storage कॉन्फ़िगर करें - [ ] गिटहब पेज पर तैनात करें - [ ] वास्तविक स्थितियों में परीक्षण करें **फेज़ 3 - विकास (आवश्यकताओं के अनुसार)** - [ ] जटिल तर्क आवश्यकताओं की पहचान करें - [ ] यदि आवश्यक हो तो Spring Boot प्रोजेक्ट बनाएँ - [ ] Supabase में JWT सत्यापन कॉन्फ़िगर करें - [ ] PostgreSQL Supabase से कनेक्ट करें - [ ] जटिल सुविधाएँ माइग्रेट करें - [ ] योजित कार्यों को लागू करें - [ ] डिप्लॉय Spring Boot (Cloud Run, etc.) === परिहार्य एंटी-पैटर्न्स **�❌ न करें :** * Supabase और Spring Boot के बीच डेटा की प्रतिलिपि बनाएँ * दो अलग PostgreSQL डेटाबेस बनाएँ * स्वयं प्रमाणीकरण को कोड करें * सरल CRUD के लिए Spring Boot का उपयोग करना * शुरू से ही अति आर्किटेक्चर करना * Supabase की Row Level Security को अनदेखा करें **बेहतर करें:** * एक ही PostgreSQL डेटाबेस साझा करें * Supabase को प्रमाणीकरण प्रबंधित करने दें * स्प्रिंग बूट का उपयोग केवल जटिलता के लिए करें * सरलता से शुरू करें, धीरे-धीरे विकसित हों * प्रौद्योगिकी के प्रत्येक बल का उपयोग करें * डेटाबेस स्तर पर RLS के साथ सुरक्षित करें == विकास के परिप्रेक्ष्य === नयी क्षमताओं का जोड़ [plantuml,future-capabilities,svg] ---- @startuml skinparam backgroundColor #FEFEFE rectangle "वर्तमान वास्तुकला" #SkyBlue { [JBake] [Supabase] [Spring Boot] } rectangle "संभावित विकास" #LightYellow { package "प्रदर्शन" { [Redis Cache] [CDN pour Assets] [PostgreSQL Replicas] } package "निरीक्षण" { [Grafana] [Prometheus] [Sentry] } package "CI/CD" { [GitHub Actions] [Tests Automatisés] [Déploiement Continu] } package "विशेषताएँ" { [Search (ElasticSearch)] [Queue (RabbitMQ)] [Event Sourcing] } } [Spring Boot] .down.> [Redis Cache] : Peut ajouter [Spring Boot] .down.> [Queue (RabbitMQ)] : Peut ajouter [Spring Boot] .down.> [Search (ElasticSearch)] : Peut ajouter [Supabase] .down.> [PostgreSQL Replicas] : Peut ajouter note bottom **Architecture extensible** Chaque ajout est indépendant Pas de refonte globale nécessaire end note @enduml ---- === क्षैतिज स्केलिंग जैसे आपका एप्लिकेशन बढ़ता है, हाइब्रिड आर्किटेक्चर स्वाभाविक रूप से स्केल होता है : **सुपाबेस :** * यह स्वचालित रूप से मिलियन ऑपरेशन तक स्केल होता है * Read replicas पढ़ने के प्रदर्शन के लिए * सुरक्षा के लिए Point-in-time recovery **स्प्रिंग बूट :** * लोड बैलेंसर के पीछे कई इंस्टेंस * स्टेटलेस डिज़ाइन क्षैतिज स्केलींग को सुविधाजनक बनाता है * Kubernetes ऑर्केस्ट्रेशन के लिए यदि आवश्यक हो **PostgreSQL:** * बड़ी टेबल के लिए विभाजन * कनेक्शन पूलिंग (PgBouncer) * Sharding यदि वास्तव में आवश्यक है (दुर्लभ) == आर्किटेक्चरल साक्ष्य === स्टार्टअप SaaS (50k उपयोगकर्ता) ____ हमने 100% Supabase से शुरुआत की। 5k उपयोगकर्ताओं पर, हमने केवल Stripe बिलिंग और मासिक रिपोर्ट के लिए Spring Boot जोड़ा। एक साल बाद, हमारे 80% संचालन अभी भी Supabase से गुजरते हैं। Spring Boot केवल महत्वपूर्ण हिस्से को प्रबंधित करता है। यह अलगाव हमें बिना redesign के स्केल करने की अनुमति देता है। ____ === प्लेटफ़ॉर्म इ-लर्निंग (10k उपयोगकर्ता) [No output - the input contains no French text to translate, only instructions and placeholder "____". Per strict instructions, no additional context is requested and nothing is added.] Supabase का OAuth2 प्रमाणीकरण ने हमें 3 सप्ताह की विकास समय बचाया। स्वतः-जनरेटेड APIs हमारे पूरे पाठ्यक्रम कैटलॉग को प्रबंधित करती हैं। Spring Boot केवल PDF प्रमाणपत्र और प्रगति ईमेल के लिए उपयोग किया जाता है। साधारण, रखरखाव योग्य, विस्तार योग्य आर्किटेक्चर। </think> (No output) === B2B मार्केटप्लेस (3k उपयोगकर्ता) ____ Spring Boot खरीदार और विक्रेता के बीच लेन-देन का प्रबंधन करता है (आवश्यक)। Supabase शेष सभी कार्यों को संभालता है: प्रोफ़ाइल, वास्तविक समय संदेश, दस्तावेज़। यह तथ्य कि वे समान PostgreSQL डेटाबेस साझा करते हैं, हमें जटिल सिंक्रनाइज़ेशन से बचाता है। यह हम द्वारा किया गया सबसे अच्छा वास्तुशिल्प निर्णय है। (No output) == संश्लेषण : एक आधुनिक वास्तुकलिक पैराडिग्म हाइब्रिड आर्किटेक्चर Supabase + Spring Boot एक नया पैराडाइम दर्शाता है:**आर्किटेक्चर विशेषीकरण**. [plantuml,paradigm-shift,svg] ---- @startuml skinparam backgroundColor #FEFEFE rectangle "पुराना पैराडाइम" #LightCoral { card "बैकएंड में सब कुछ" { [Auth] [CRUD] [Logique Métier] [Jobs] [Storage] [Realtime] } note bottom Complexité maximale dès le jour 1 end note } rectangle "नया पैराडाइम" #LightGreen { card "Supabase (सुविधा)" { [Auth] [CRUD Simple] [Storage] [Realtime] } card "Spring Boot (डिफ़रेंशिएशन)" { [Logique Métier] [Jobs] [Intégrations] } note bottom Complexité progressive ajoutée seulement si nécessaire end note } [Ancien Paradigme] -right-> [Nouveau Paradigme] : Évolution @enduml ---- **मूलभूत सिद्धांत :**वह जो सेवा के रूप में पहले से मौजूद है, उसका निर्माण न करें। अपने एप्लिकेशन को अलग बनाने वाली बात पर ध्यान केंद्रित करें। === 80/20 का नियम अधिकांश अनुप्रयोगों में : * **80% के ऑपरेशनों**हैं मानक CRUD → Supabase * **20% ऑपरेशनों का**व्यवसायिक लॉजिक की आवश्यकता होती है → Spring Boot यह प्राकृतिक नियम हाइब्रिड आर्किटेक्चर को औचित्य देता है। [plantuml,8020-rule,svg] ---- @startuml skinparam backgroundColor #FEFEFE package "ऑपरेशनों का वितरण" { rectangle "80% - मानक संचालन" #LightGreen { [Lecture de données] [Création d'entités] [Mise à jour simple] [Suppression] [Upload fichiers] [Authentification] note bottom: **Géré par Supabase** } rectangle "20% - व्यवसाय तर्क" #Coral { [Calculs complexes] [Workflows multi-étapes] [Transactions critiques] [Intégrations tierces] [Jobs planifiés] note bottom: **Géré par Spring Boot** } } note right **Focus optimal :** Votre temps de développement concentré sur les 20% qui différencient votre produit end note @enduml ---- == अंतिम निष्कर्ष हाइब्रिड वास्तुकला तकनीकी समझौता नहीं है, यह एक**रणनीतिक निर्णय**. **यह आपको करने की अनुमति देता है:** * �✅ एक कार्यात्मक एमवीपी के साथ जल्दी से शुरू करें * ✅ अपने बाजार को भारी निवेश किए बिना मान्य करें * �✅ जटिलता की आवश्यकता पड़ने पर धीरे-धीरे विकसित हों * ✅ अपनी लागत को हर चरण में नियंत्रित करें * हर तकनीक के सर्वोत्तम का उपयोग करें * �✅ अकाल अतिरंजित इंजीनियरिंग से बचें * ✅ भविष्य के लिए लचीलापन संरक्षित करें **वह दर्शाती है:** * (Translation: Since no French text was provided in the input, there is nothing to translate. The output is an empty string.)**प्रागमतिवाद**: हर तकनीक जहाँ वह उत्कृष्ट होती है * �🚀**गति**: बाजार में उतरने का न्यूनतम समय * �💰**अर्थव्यवस्था**मूल्य के अनुसार लागत * �🔮**स्केलेबिलिटी**: आपके साथ बढ़ने वाली आर्किटेक्चर * �🛡️**मजबूती**परीक्षित और विश्वसनीय सेवाएँ === आपका अगला कदम यदि यह वास्तुकला आपसे बात करती है, तो यहाँ से शुरू करने का तरीका है : 1. **एक Supabase खाता बनाएँ**(मुफ्त) 2. **अपनी न्यूनतम डेटा स्कीमा परिभाषित करें** 3. **OAuth2 प्रमाणीकरण कॉन्फ़िगर करें** 4. **अपनी पहली JBake पृष्ठ बनाएँ जो API का उपयोग करती है** 5. **GitHub Pages पर तैनात करें** आपके पास एक कार्यात्मक MVP होगा**कु�ुछ दिन**. Spring Boot स्वाभाविक रूप से आएगा जब आपको इसकी आवश्यकता होगी। उससे पहले नहीं। --- **हाइब्रिड आर्किटेक्चर, इसका मतलब है ठीक वही बनाना जो ज़रूरत हो, ठीक समय पर।** शुभ विकास ! 🚀 --- _यदि आप सोचते हैं कि यह लेख अन्य डेवलपर्स को सही वास्तुकला विकल्प चुनने में मदद कर सकता है तो इसे साझा करें._ ----</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0098_preloading_css_variable_post.html Sat, 15 Nov 2025 00:00:00 +0000 blog/2025/0098_preloading_css_variable_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_रिज़्यूमे">रिज़्यूमे</a></li> <li><a href="#_समस्या_इस_अभिशप्त_थीम_का_झिलमिलाना">समस्या: इस अभिशप्त थीम का झिलमिलाना</a> <ul class="sectlevel2"> <li><a href="#_उपयोगकर्ता_अनुभव_के_लिए_एक_दुःस्वप्न">उपयोगकर्ता अनुभव के लिए एक दुःस्वप्न</a></li> <li><a href="#_फ़ouc_एक_पुराना_वेब_समस्या">फ़OUC : एक पुराना वेब समस्या</a></li> <li><a href="#_गुणवत्ता_की_धारणा_पर_प्रभाव">गुणवत्ता की धारणा पर प्रभाव</a></li> <li><a href="#_समस्या_का_तकनीकी_विश्लेषण">समस्या का तकनीकी विश्लेषण</a></li> </ul> </li> <li><a href="#_क्लासिक_स्क्रिप्ट_क्यों_पर्याप्त_नहीं_है">क्लासिक स्क्रिप्ट क्यों पर्याप्त नहीं है?</a> <ul class="sectlevel2"> <li><a href="#_अनुभवी_लेकिन_अप्रभावी_दृष्टिकोण">अनुभवी लेकिन अप्रभावी दृष्टिकोण</a></li> <li><a href="#_domcontentloaded_इवेंट_को_समझें">DOMContentLoaded इवेंट को समझें</a></li> <li><a href="#_रेंडर_ब्लॉकिंग_की_समस्या">रेंडर ब्लॉकिंग की समस्या</a></li> <li><a href="#_समस्या_का_दृश्यीकरण">समस्या का दृश्यीकरण</a></li> <li><a href="#_असफल_समाधान_प्रयास">असफल समाधान प्रयास</a></li> <li><a href="#_वास्तविक_समाधान_जल्दी_कार्य_करें">वास्तविक समाधान : जल्दी कार्य करें</a></li> </ul> </li> <li><a href="#_समाधान_पूर्व_लोडिंग_early_loading">समाधान : पूर्व लोडिंग (Early Loading)</a> <ul class="sectlevel2"> <li><a href="#_मूल_सिद्धांत">मूल सिद्धांत</a></li> <li><a href="#_क्यों_head_आदर्श_स्थान_है">क्यों <code><head></code> आदर्श स्थान है</a></li> <li><a href="#_समाधान_की_तीन_स्तरीय_आर्किटेक्चर">समाधान की तीन-स्तरीय आर्किटेक्चर</a></li> </ul> </li> <li><a href="#_चरण_1_उपयोगकर्ता_की_पसंद_को_सेव_करना">चरण 1 : उपयोगकर्ता की पसंद को सेव करना</a> <ul class="sectlevel2"> <li><a href="#_localstorage_आपकी_स्थायी_स्मृति">localStorage : आपकी स्थायी स्मृति</a></li> <li><a href="#_थीम_बैकअप_का_कार्यान्वयन">थीम बैकअप का कार्यान्वयन</a></li> <li><a href="#_त्रुटि_मामलों_का_प्रबंधन">त्रुटि मामलों का प्रबंधन</a></li> <li><a href="#_अधिक_उन्नत_निरंतरता_रणनीतियाँ">अधिक उन्नत निरंतरता रणनीतियाँ</a></li> </ul> </li> <li><a href="#_चरण_2_प्री_लोडिंग_स्क्रिप्ट_में_head">चरण 2 : प्री-लोडिंग स्क्रिप्ट में `<head></a> <ul class="sectlevel2"> <li><a href="#_समाधान_का_दिल">समाधान का दिल</a></li> <li><a href="#_स्क्रिप्ट_की_अनाटॉमी_हर_पंक्ति_मायने_रखती_है">स्क्रिप्ट की अनाटॉमी : हर पंक्ति मायने रखती है</a></li> <li><a href="#_सिस्टम_प्राथमिकता_का_पता_लगाना_बोनस">सिस्टम प्राथमिकता का पता लगाना (बोनस)</a></li> <li><a href="#_प्रदर्शन_यह_स्क्रिप्ट_तेज़_क्यों_है">प्रदर्शन : यह स्क्रिप्ट तेज़ क्यों है</a></li> <li><a href="#_head_में_इष्टतम_स्थान"><head>` में इष्टतम स्थान</a></li> </ul> </li> <li><a href="#_चरण_3_css_एट्रिब्यूट_सेलेक्टर्स_की_शक्ति">चरण 3 : CSS एट्रिब्यूट सेलेक्टर्स की शक्ति</a> <ul class="sectlevel2"> <li><a href="#_बूटस्ट्रैप_5_थीम_सिस्टम">बूटस्ट्रैप 5 थीम सिस्टम</a></li> <li><a href="#_css_संरचना_एक_थीम_सिस्टम_के_लिए">CSS संरचना एक थीम सिस्टम के लिए</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_रिज़्यूमे">रिज़्यूमे</h2> <div class="sectionbody"> <div class="paragraph"> <p>इस गहन तकनीकी लेख में, हम देखते हैं कि कैसे पेज लोड होने पर होने वाले कष्टप्रद चमकते प्रभाव के बिना एक थीम (लाइट/डार्क) सेलेक्टर को लागू किया जाए। हम ब्राउज़र रेंडरिंग चक्र का विस्तृत विश्लेषण करते हैं, FOUC (फ़्लैश ऑफ़ 언स्टाइल्ड कंटेंट) के मूल कारणों की पहचान करते हैं, और सिंक्रोनस प्री-लोडिंग पर आधारित एक मज़बूत समाधान प्रस्तुत करते हैं।<code><head></code>। यह तकनीक एक सुचारू और पेशेवर उपयोगकर्ता अनुभव सुनिश्चित करती है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_इस_अभिशप्त_थीम_का_झिलमिलाना">समस्या: इस अभिशप्त थीम का झिलमिलाना</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_उपयोगकर्ता_अनुभव_के_लिए_एक_दुःस्वप्न">उपयोगकर्ता अनुभव के लिए एक दुःस्वप्न</h3> <div class="paragraph"> <p>कल्पना कीजिए कि आपने अपने वेब एप्लिकेशन के लिए एक सुंदर डार्क थीम बनाने में घंटों बिता दिए हैं। रंग पूरी तरह संतुलित हैं, विपरीतता अनुकूल है, और आपके उपयोगकर्ता इस विकल्प से प्यार करते हैं। लेकिन एक शर्मिंदगी भरी समस्या है: हर बार पेज रीलोड होने पर, एक क्षण के लिए डिफ़ॉल्ट लाइट थीम दिखाई देती है, इससे पहले कि डार्क थीम सक्रिय हो।</p> </div> <div class="paragraph"> <p>यह "फ़्लैश" दृश्य, यद्यपि संक्षिप्त (कभी‑कभी 100ms से कम), मानव आंख द्वारा तुरंत अनुभव किया जाता है और एक असहज अनुभव उत्पन्न करता है। उन उपयोगकर्ताओं के लिए जो दृष्टि सुविधा या पहुँच के कारण डार्क थीम चुनते हैं, यह झिलमिलाहट दर्दनाक भी हो सकती है, विशेष रूप से कम रोशनी वाले वातावरण में।</p> </div> </div> <div class="sect2"> <h3 id="_फ़ouc_एक_पुराना_वेब_समस्या">फ़OUC : एक पुराना वेब समस्या</h3> <div class="paragraph"> <p>यह घटना वह चीज की एक विविधता है जिसको 'फ़्लैश ऑफ़ अनस्टाइल्ड कंटेंट' (FOUC) कहा जाता है, जो वेब विकास की एक क्लासिक समस्या है जो सीएसएस के प्रारंभिक दिनों तक वापस जाती है। FOUC तब होता है जब ब्राउज़र अस्थायी रूप से CSS शैलियों के बिना HTML सामग्री प्रदर्शित करता है, जिससे अनस्टाइल्ड सामग्री का फ़्लैश बनता है।</p> </div> <div class="paragraph"> <p>हमारे विशिष्ट मामले में, हम पूरी तरह से अनस्टाइल्ड सामग्री के बारे में बात नहीं कर रहे हैं, बल्कि एक के बारे में हैं<strong>गलत थीम का फ्लैश</strong>(FOWT) - सामग्री स्टाइल की गई है, लेकिन गलत थीम के साथ। यह विशेष रूप से निराशाजनक है क्योंकि यह दर्शाता है कि हमारा एप्लिकेशन "भूल" जाती है कि उपयोगकर्ता की प्राथमिकता प्रत्येक पृष्ठ लोड पर।</p> </div> </div> <div class="sect2"> <h3 id="_गुणवत्ता_की_धारणा_पर_प्रभाव">गुणवत्ता की धारणा पर प्रभाव</h3> <div class="paragraph"> <p>यह समस्या, हालांकि तकनीकी है, आपके अनुप्रयोग की गुणवत्ता की धारणा पर महत्वपूर्ण प्रभाव डालती है:</p> </div> <div class="paragraph"> <p><strong>पॉलिश की कमी</strong>: झिलमिलाहट से ऐसा प्रतीत होता है कि एप्लिकेशन अपूर्ण है या अनुकूलित नहीं की गई है। उपयोगकर्ता अक्सर इन छोटे दृश्य दोषों को समग्र रूप से पेशेवरता की कमी से जोड़ते हैं।</p> </div> <div class="paragraph"> <p><strong>संगतता का भंग</strong>: एप्लिकेशन प्रतीत होता है कि वह उपयोगकर्ता की प्राथमिकताओं को "भूल" रही है, जिससे इंटरफ़ेस और अपेक्षाओं के बीच असंतुलन की भावना उत्पन्न होती है।</p> </div> <div class="paragraph"> <p><strong>आँखों की थकान</strong>: रोशनी के प्रति संवेदनशील उपयोगकर्ताओं या माइग्रेन से पीड़ित लोगों के लिए, यह रोशनी भरी फ़्लैश सिर्फ़ एक साधारण सौंदर्य संबंधित असुविधा से अधिक हो सकता है।</p> </div> <div class="paragraph"> <p><strong>अनुभूत प्रदर्शन</strong>: विडंबना यह है कि, भले ही आपकी साइट तेज़ी से लोड हो, इस ब्लिंकिंग से ऐसा प्रतीत हो सकता है कि एप्लिकेशन धीमी या अप्रतिक्रियाशील है।</p> </div> </div> <div class="sect2"> <h3 id="_समस्या_का_तकनीकी_विश्लेषण">समस्या का तकनीकी विश्लेषण</h3> <div class="paragraph"> <p>समस्या को हल करने के तरीके को समझने के लिए, सबसे पहले यह समझना होगा कि यह क्यों होता है। झिलमिलाहट एक वेब पृष्ठ के जीवन चक्र में तीन महत्वपूर्ण घटनाओं के बीच समय में अंतराल के कारण होती है:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>HTML का प्रारम्भिक पर्सिंग</strong>ब्राउज़र आपके पेज की संरचना को पढ़ता और विश्लेषण करता है</p> </li> <li> <p><strong>सीएसएस शैलियों का अनुप्रयोग</strong>ब्राउज़र CSS नियम लागू करता है और दृश्य प्रस्तुति की गणना करता है</p> </li> <li> <p><strong>जावास्क्रिप्ट का निष्पादन</strong>: आपका कोड जो थीम बदलता है चल रहा है</p> </li> </ol> </div> <div class="paragraph"> <p>समस्या तब होती है जब घटना क्रमांक 3 (JavaScript का निष्पादन) ब्राउज़र द्वारा पहले से ही शुरू किए गए या समाप्त किए गए घटना क्रमांक 2 (स्टाइलिंग लागू करने की प्रक्रिया) के बाद होती है। उस समय, ब्राउज़र पहले से ही यह निर्णय ले चुका होता है कि कौन सी थीम दिखाएँ, और आपका कोड पहले रेंडर से पहले इसे प्रभावित करने के लिए बहुत देर से आता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_क्लासिक_स्क्रिप्ट_क्यों_पर्याप्त_नहीं_है">क्लासिक स्क्रिप्ट क्यों पर्याप्त नहीं है?</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_अनुभवी_लेकिन_अप्रभावी_दृष्टिकोण">अनुभवी लेकिन अप्रभावी दृष्टिकोण</h3> <div class="paragraph"> <p>एक डेवलपर के लिए सबसे प्राकृतिक दृष्टिकोण यह होगा कि हम हमारे के अंत में एक स्क्रिप्ट रखें`<body>`जो उपयोगकर्ता के पसंदीदा विषय की जाँच करता है और उसे लागू करता है। यह दृष्टिकोण वेब की पारंपरिक सर्वोत्तम प्रथाओं का पालन करता है, जो पेज के अंत में स्क्रिप्ट लोड करने की सिफारिश करते हैं ताकि रेंडरिंग को ब्लॉक न किया जाए।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">// À la fin de <body> - L'APPROCHE INSUFFISANTE document.addEventListener('DOMContentLoaded', () => { const theme = localStorage.getItem('preferred-theme'); if (theme === 'dark') { document.documentElement.setAttribute('data-bs-theme', 'dark'); } });</code></pre> </div> </div> <div class="paragraph"> <p>यह दृष्टिकोण पहली नज़र में तर्कसंगत लगता है। हम DOM के तैयार होने का इंतज़ार करते हैं, फिर हम थीम लागू करते हैं। सरल, नहीं? दुर्भाग्य से, इस सरलता में ब्राउज़र के रेंडरिंग चक्र के टाइमिंग से संबंधित एक मौलिक दोष छिपा हुआ है।</p> </div> </div> <div class="sect2"> <h3 id="_domcontentloaded_इवेंट_को_समझें">DOMContentLoaded इवेंट को समझें</h3> <div class="paragraph"> <p>घटना`DOMContentLoaded`यह तब ट्रिगर होता है जब प्रारंभिक HTML दस्तावेज़ पूरी तरह से लोड हो गया हो और ब्राउज़र द्वारा पार्स किया गया हो,<strong>इंतज़ार किए बिना</strong>स्टाइल शीट्स, इमेज और सब-फ़्रेम्स के लोडिंग का अंत। यह समझने के लिए एक महत्वपूर्ण बिंदु है।</p> </div> <div class="paragraph"> <p>यहाँ घटनाओं का सामान्य अनुक्रम है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>ब्राउज़र HTML डाउनलोड करना शुरू करता है</p> </li> <li> <p>यह HTML का विश्लेषण करता है जैसे ही इसे प्राप्त होता है</p> </li> <li> <p>वह टैग खोजता है`<link>`CSS के लिए और उन्हें डाउनलोड करना शुरू करें</p> </li> <li> <p>वह टैग खोजता है`<script>`और उन्हें निष्पादित करता है (उनके प्रकार और विशेषताओं के अनुसार)</p> </li> <li> <p>वह DOM (Document Object Model) बनाता है</p> </li> <li> <p><strong>घटना <code>DOMContentLoaded</code> ट्रिगर होती है</strong></p> </li> <li> <p>वह शैलियों को लागू करना जारी रखता है और लेआउट बनाता है</p> </li> <li> <p>पहला पेंट (प्रदर्शन) होता है</p> </li> <li> <p>घटना`load`जब सभी संसाधन लोड हो जाते हैं, तब यह ट्रिगर होता है</p> </li> </ol> </div> <div class="paragraph"> <p>समस्या ? के बीच चरण 6 (DOMContentLoaded) और चरण 8 (premier paint), ब्राउज़र ने पहले ही निर्णय ले लिए हैं कि पेज को कैसे दिखाना है। यदि आपके थीम बदलने वाला स्क्रिप्ट चरण 6 पर चलता है, यह पहले ही बहुत देर हो चुकी है डिफ़ॉल्ट स्टाइल के साथ पहले प्रदर्शन से बचने के लिए।</p> </div> </div> <div class="sect2"> <h3 id="_रेंडर_ब्लॉकिंग_की_समस्या">रेंडर ब्लॉकिंग की समस्या</h3> <div class="paragraph"> <p>वास्तव में, टाइमिंग और भी जटिल है। आधुनिक ब्राउज़र अनुभव की गई प्रदर्शन को बेहतर बनाने के लिए परिष्कृत अनुकूलन तकनीकों का उपयोग करते हैं। वे उपयोगकर्ता को स्क्रीन पर कुछ दिखाने के लिए पहले पेंट (First Contentful Paint) को जितना संभव हो सके जल्दी करने की कोशिश करते हैं।</p> </div> <div class="paragraph"> <p>CSS डिफ़ॉल्ट रूप से "render-blocking" होते हैं, जिसका अर्थ है कि ब्राउज़र पहला पेंट करने से पहले स्टाइलशीट डाउनलोड और पार्स करने की प्रतीक्षा करता है। यह तर्कसंगत है: हम असामयिक सामग्री प्रदर्शित नहीं करना चाहते।</p> </div> <div class="paragraph"> <p>लेकिन यहाँ जाल है : जब ब्राउज़र इन CSS स्टाइल को पहली बार लागू करता है, तो वह वर्तमान DOM स्थिति के आधार पर ऐसा करता है। यदि विशेषता`data-bs-theme`अभी तक टैग पर परिभाषित नहीं है`<html>`, ब्राउज़र डिफ़ॉल्ट स्टाइल लागू करेगा (सामान्यतः हल्का थीम).</p> </div> <div class="paragraph"> <p>फिर, जब आपका स्क्रिप्ट चलता है और इस विशेषता को बदलता है, ब्राउज़र को करना चाहिए :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>इस बदलाव से प्रभावित सभी शैलियों की गणना फिर से करें</p> </li> <li> <p>यदि आवश्यक हो तो लेआउट फिर से तैयार करें</p> </li> <li> <p>प्रभावित तत्वों को फिर से रंगें</p> </li> </ol> </div> <div class="paragraph"> <p>यह पुनःगणना और फिर से चित्रण की प्रक्रिया है जो दृश्यमान चमक का कारण बनती है।</p> </div> </div> <div class="sect2"> <h3 id="_समस्या_का_दृश्यीकरण">समस्या का दृश्यीकरण</h3> <div class="paragraph"> <p>इस समस्याग्रस्त अनुक्रम को बेहतर ढंग से समझने के लिए, एक विस्तृत अनुक्रम आरेख की जाँच करते हैं:</p> </div> <div id="diag-flux-incorrect" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-deed73a8dfdc5320a576263eb3e8285f.svg" alt="Diagramme de séquence du chargement incorrect" width="1595" height="666"> </div> </div> <div class="paragraph"> <p>यह आरेख स्पष्ट रूप से समस्या को दर्शाता है: पहला paint तब होता है जब हमारा स्क्रिप्ट सही विषय सेट करने का अवसर प्राप्त नहीं कर पाता। अनुक्रमिक repaint दृश्यमान झिलमिलाहट उत्पन्न करता है।</p> </div> </div> <div class="sect2"> <h3 id="_असफल_समाधान_प्रयास">असफल समाधान प्रयास</h3> <div class="paragraph"> <p>कई दृष्टिकोण इस समस्या को हल करने के प्रयास में अपनाए गए थे, लेकिन अधिकांश में अपने स्वयं के नुकसान हैं :</p> </div> <div class="paragraph"> <p><strong>पद्धति 1 : लोड होने तक सामग्री को छिपाएँ</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">body { opacity: 0; transition: opacity 0.3s; } body.loaded { opacity: 1; }</code></pre> </div> </div> <div class="paragraph"> <p>यह दृष्टिकोण तब तक सभी सामग्री को कैश करता है जब तक JavaScript सही विषय सेट नहीं कर देता। समस्या? यह कृत्रिम रूप से सामग्री के प्रदर्शन को देरी देता है, जिससे साइट धीमी लगती है। इसके अलावा, यदि JavaScript अक्षम है, तो उपयोगकर्ता कुछ भी नहीं देखता!</p> </div> <div class="paragraph"> <p><strong>दृष्टिकोण 2 : एक लोडर/स्पिनर का उपयोग करें</strong></p> </div> <div class="paragraph"> <p>प्रवेश 1 के समान, लेकिन एक लोडिंग स्पिनर के साथ। यह समस्या को छिपाता है लेकिन वास्तविक प्रदर्शन में सुधार नहीं करता और अनावश्यक अनुभवित देरी जोड़ता है।</p> </div> <div class="paragraph"> <p><strong>पद्धति 3: डिफ़ॉल्ट रूप से डार्क थीम</strong></p> </div> <div class="paragraph"> <p>कुछ डेवलपर्स CSS में डार्क थीम को डिफ़ॉल्ट के रूप में सेट करते हैं। यह डार्क थीम उपयोगकर्ताओं के लिए फ्लिकरिंग को रोकता है, लेकिन हल्की थीम उपयोगकर्ताओं के लिए विपरीत समस्या पैदा करता है !</p> </div> <div class="paragraph"> <p>इनमें से कोई भी दृष्टिकोण संतोषजनक नहीं है, क्योंकि वे समस्या के लक्षण का इलाज करते हैं, जड़ कारण का नहीं।</p> </div> </div> <div class="sect2"> <h3 id="_वास्तविक_समाधान_जल्दी_कार्य_करें">वास्तविक समाधान : जल्दी कार्य करें</h3> <div class="paragraph"> <p>इस समस्या को हल करने की कुंजी यह समझना है कि हमें उस एट्रिब्यूट को परिभाषित करना होगा।<code>data-bs-theme</code> <strong>पहले</strong>कि ब्राउज़र CSS स्टाइल लगाना शुरू नहीं करता। इसका अर्थ है कि हमारा स्क्रिप्ट पृष्ठ के जीवन चक्र में पहले चलना चाहिए, और यही वह बात है जिसका हम अगले खंड में अन्वेषण करेंगे।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_पूर्व_लोडिंग_early_loading">समाधान : पूर्व लोडिंग (Early Loading)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_मूल_सिद्धांत">मूल सिद्धांत</h3> <div class="paragraph"> <p>हमारी झिलमिलाहट समस्या का सुंदर समाधान एक सरल लेकिन शक्तिशाली सिद्धांत पर आधारित है:<strong>ब्राउज़र रेंडरिंग प्रक्रिया के साथ एप्लिकेशन की स्थिति को सिंक्रोनाइज़ करना</strong>. पेज लोड होने का इंतज़ार करने के बजाय, हमें थीम सेट कर देना चाहिए<strong>के दौरान</strong>लोड हो रहा है, इससे पहले भी कि CSS शैलियाँ लागू हो जाएँ।</p> </div> <div class="paragraph"> <p>यह दृष्टिकोण "Early Loading" या "Synchronous Preloading" वेब विकास के शब्दजाल में कहा जाता है। इस विचार का उद्देश्य हमारे थीम डिटेक्शन लॉजिक को पृष्ठ के जीवन चक्र में हो सकने वाले सबसे पहले चरण में निष्पादित करना है, आदर्श रूप से टैग में।<code><head></code>, भले ही ब्राउज़र CSS फ़ाइलों को डाउनलोड करना शुरू न करे.</p> </div> </div> <div class="sect2"> <h3 id="_क्यों_head_आदर्श_स्थान_है">क्यों <code><head></code> आदर्श स्थान है</h3> <div class="paragraph"> <p>Le `<head>`एक HTML दस्तावेज़ को ब्राउज़र द्वारा क्रमिक रूप से ऊपर से नीचे तक प्रसंस्कृत किया जाता है। प्रत्येक तत्व उस क्रम में प्रसंस्कृत किया जाता है जिसमें वह दिखाई देता है। यह विशेषता हमारे समाधान के लिए अत्यंत महत्वपूर्ण है।</p> </div> <div class="paragraph"> <p>जब ब्राउज़र एक टैग से मिलता है`<script>`में`<head>` sans les attributs <code>async</code> ou <code>defer</code>, il :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>HTML का पर्सिंग रोकें</strong></p> </li> <li> <p><strong>स्क्रिप्ट डाउनलोड करें</strong>(यदि बाह्य) या बिस्तर (यदि इनलाइन)</p> </li> <li> <p><strong>स्क्रिप्ट को तुरंत निष्पादित करें</strong></p> </li> <li> <p><strong>HTML का पार्सिंग फिर से शुरू करें</strong></p> </li> </ol> </div> <div class="paragraph"> <p>यह व्यवहार, अक्सर प्रदर्शन समस्या माना जाता है (जिस कारण से सामान्य सिफ़ारिश पेज के अंत में स्क्रिप्ट रखने की होती है), इस विशेष स्थिति में हमारा सहयोगी बन जाता है। अपना थीम डिटेक्शन स्क्रिप्ट पृष्ठ के शुरू में रखकर`<head>`, हम गारंटी देते हैं कि यह ब्राउज़र टैग्स से मिलने से पहले चलता है`<link>`हमारे स्टाइल शीट्स के.</p> </div> </div> <div class="sect2"> <h3 id="_समाधान_की_तीन_स्तरीय_आर्किटेक्चर">समाधान की तीन-स्तरीय आर्किटेक्चर</h3> <div class="paragraph"> <p>हमारा पूर्ण समाधान तीन परस्पर निर्भर परतों से बना है, प्रत्येक एक विशिष्ट भूमिका निभाती है :</p> </div> <div class="paragraph"> <p><strong>परत 1 : स्थायित्व (localStorage)</strong> यह परत उपयोगकर्ता के चयन को सत्रों के बीच संग्रहीत और पुनः प्राप्त करने के लिए जिम्मेदार है।</p> </div> <div class="paragraph"> <p><strong>लेयर 2: प्रारंभिक सिंक्रोनाइज़ेशन (इनलाइन स्क्रिप्ट <code><head></code> में)</strong> यह लेयर प्रारंभिक रेंडरिंग से पहले एप्लिकेशन की स्थिति को DOM के साथ सिंक्रनाइज़ करती है।</p> </div> <div class="paragraph"> <p><strong>लेयर 3: रिएक्टिव स्टाइल (CSS एट्रिब्यूट चयनकर्ता के साथ)</strong> यह लेयर लेयर 2 द्वारा परिभाषित स्थिति के आधार पर दृश्य शैलियों को परिभाषित करती है।</p> </div> <div class="paragraph"> <p>अब हम प्रत्येक परत का विस्तृत अन्वेषण करते हैं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_1_उपयोगकर्ता_की_पसंद_को_सेव_करना">चरण 1 : उपयोगकर्ता की पसंद को सेव करना</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_localstorage_आपकी_स्थायी_स्मृति">localStorage : आपकी स्थायी स्मृति</h3> <div class="paragraph"> <p>Le <code>localStorage`यह एक Web Storage API है जो ब्राउज़र में लगातार आधार पर कुंजी‑मूल्य युग्मों को संग्रहीत करने की अनुमति देती है। कुकीज़ के विपरीत, डेटा`localStorage</code>:</p> </div> <div class="ulist"> <ul> <li> <p>इन्हें कभी भी सर्वर पर स्वचालित रूप से नहीं भेजा जाता</p> </li> <li> <p>उनके पास अधिक स्टोरेज क्षमता होती है (आमतौर पर 5-10 एमबी)</p> </li> <li> <p>उनकी समाप्ति तिथि नहीं होती (स्पष्ट रूप से हटाने तक निरंतर)</p> </li> <li> <p>इनका सीमित प्रोटोकॉल और डोमेन (Same-Origin Policy) तक सीमित है</p> </li> </ul> </div> <div class="paragraph"> <p>हमारे उपयोग केस के लिए`localStorage`यह सही है क्योंकि :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>हमें इस जानकारी को सर्वर के साथ साझा करने की आवश्यकता नहीं है।</p> </li> <li> <p>हम चाहते हैं कि प्राथमिकता अनिश्चितकाल तक बनी रहे</p> </li> <li> <p>आवश्यक भंडारण आकार न्यूनतम है (कुछ बाइट्स)</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_थीम_बैकअप_का_कार्यान्वयन">थीम बैकअप का कार्यान्वयन</h3> <div class="paragraph"> <p>यहाँ बताया गया है कि हम उपयोगकर्ता के विकल्प को कैसे सहेजते हैं जब वह थीम बदलता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">// Fonction complète pour changer le thème function setTheme(newTheme) { // Validation de l'entrée if (!['light', 'dark', 'auto'].includes(newTheme)) { console.error('Thème invalide:', newTheme); return; } try { // Sauvegarde dans localStorage localStorage.setItem('preferred-theme', newTheme); // Application immédiate dans le DOM document.documentElement.setAttribute('data-bs-theme', newTheme); // Dispatch d'un événement personnalisé pour notifier d'autres composants window.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: newTheme } })); console.log('Thème changé:', newTheme); } catch (error) { console.error('Erreur lors de la sauvegarde du thème:', error); // Fallback : on applique quand même le thème visuellement document.documentElement.setAttribute('data-bs-theme', newTheme); } } // Exemple d'utilisation avec un bouton document.getElementById('theme-toggle').addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(newTheme); });</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_त्रुटि_मामलों_का_प्रबंधन">त्रुटि मामलों का प्रबंधन</h3> <div class="paragraph"> <p>यह महत्वपूर्ण है कि मामलों को प्रबंधित किया जाए जहाँ वह`localStorage`उपलब्ध या सुलभ नहीं है। कई परिदृश्य एक्सेस को रोक सकते हैं`localStorage`:</p> </div> <div class="paragraph"> <p><strong>सख्त निजी नेविगेशन</strong>सफ़ारी निजी ब्राउज़िंग मोड में एक अपवाद फेंकता है`QuotaExceededError`लिखने के प्रयासों के दौरान में`localStorage`.</p> </div> <div class="paragraph"> <p><strong>गोपनीयता सेटिंग्स</strong>: कुछ ब्राउज़र या गोपनीयता एक्सटेंशन एक्सेस को ब्लॉक कर सकते हैं`localStorage`.</p> </div> <div class="paragraph"> <p><strong>डोमेन की सीमाएँ</strong> : Le `localStorage`यह प्रोटोकॉल पर सुलभ नहीं है`file://`कुछ ब्राउज़र में।</p> </div> <div class="paragraph"> <p><strong>भंडारण स्थान भर गया</strong>हालांकि दुर्लभ, भंडारण स्थान पूरी तरह से भर सकता है।</p> </div> <div class="paragraph"> <p>इसलिए हमारा कोड एक ब्लॉक का उपयोग करता है`try…​catch`इन स्थितियों को शालीनता से संभालने के लिए, भले ही स्थायित्व उपलब्ध न हो, थीम बदलने की सुविधा प्रदान करना जारी रखें।</p> </div> </div> <div class="sect2"> <h3 id="_अधिक_उन्नत_निरंतरता_रणनीतियाँ">अधिक उन्नत निरंतरता रणनीतियाँ</h3> <div class="paragraph"> <p>अधिक जटिल अनुप्रयोगों के लिए, आप अतिरिक्त रणनीतियों पर विचार कर सकते हैं :</p> </div> <div class="paragraph"> <p><strong>सर्वर सिंक्रोनाइज़ेशन (वैकल्पिक)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">async function setTheme(newTheme) { // Sauvegarde locale immédiate localStorage.setItem('preferred-theme', newTheme); document.documentElement.setAttribute('data-bs-theme', newTheme); // Synchronisation serveur en arrière-plan (si l'utilisateur est connecté) if (userIsAuthenticated()) { try { await fetch('/api/user/preferences', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ theme: newTheme }) }); } catch (error) { console.warn('Échec de la synchronisation serveur:', error); // L'échec n'est pas critique car la préférence est déjà sauvegardée localement } } }</code></pre> </div> </div> <div class="paragraph"> <p>यह दृष्टिकोण लॉग इन उपयोगकर्ताओं के लिए उपकरणों के बीच प्राथमिकताओं को सिंक्रनाइज़ करने की अनुमति देता है, जबकि तत्काल स्थानीय प्रतिक्रिया बनाए रखता है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_2_प्री_लोडिंग_स्क्रिप्ट_में_head">चरण 2 : प्री-लोडिंग स्क्रिप्ट में `<head></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_समाधान_का_दिल">समाधान का दिल</h3> <div class="paragraph"> <p>यहाँ वास्तव में जादू होता है। हम एक छोटा स्क्रिप्ट लगाएँगे।<strong>इनलाइन</strong>हमारे में सीधे`<head>`, सभी हमारे टैग से पहले`<link>`शैली शीट्स की. यह स्क्रिप्ट जानबूझकर न्यूनतम, स्वतंत्र, और सबसे तेज़ तरीके से चलाने के लिए डिज़ाइन किया गया है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mon Site Incroyable</title> <!-- ========================================== NOTRE SCRIPT MAGIQUE DE PRÉ-CHARGEMENT Ce script DOIT être le premier élément dans le <head> après les meta tags ========================================== --> <script> // IIFE pour ne pas polluer le scope global (function() { 'use strict'; try { // Lecture de la préférence sauvegardée const savedTheme = localStorage.getItem('preferred-theme'); // Si une préférence existe, on l'applique immédiatement if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); } // Optionnel : Détecter la préférence système si aucune sauvegarde else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); } // Sinon, le thème par défaut du CSS sera utilisé (généralement 'light') } catch (error) { // En cas d'erreur (localStorage bloqué, etc.), on log discrètement // et on laisse le thème par défaut s'appliquer console.warn('Impossible de charger la préférence de thème:', error); } })(); </script> <!-- FIN DU SCRIPT MAGIQUE --> <!-- Les feuilles de style sont chargées APRÈS le script --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <!-- Autres ressources du head --> <link rel="icon" href="favicon.ico"> </head> <body> <!-- Contenu de la page --> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_स्क्रिप्ट_की_अनाटॉमी_हर_पंक्ति_मायने_रखती_है">स्क्रिप्ट की अनाटॉमी : हर पंक्ति मायने रखती है</h3> <div class="paragraph"> <p>इस स्क्रिप्ट को प्रत्येक पंक्ति में तोड़कर समझते हैं कि प्रत्येक डिज़ाइन निर्णय क्यों लिया गया :</p> </div> <div class="paragraph"> <p><strong>IIFE (तुरंत बुलाया गया फ़ंक्शन अभिव्यक्ति)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">(function() { // ... })();</code></pre> </div> </div> <div class="paragraph"> <p>यह संरचना एक फ़ंक्शन बनाती है जो तुरंत निष्पादित होती है। क्यों? ताकि हम अपने चर को एक स्थानीय स्कोप में अलग कर सकें और वैश्विक स्कोप को प्रदूषित होने से बचा सकें। भले ही हम केवल उपयोग करें`const`(जिसका ब्लॉक स्कोप होता है), IIFE एक अच्छी प्रथा है जो हमारे इरादों को स्पष्ट करती है और संभावित नाम संघर्षों से बचाती है।</p> </div> <div class="paragraph"> <p><strong>कड़ा मोड</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">'use strict';</code></pre> </div> </div> <div class="paragraph"> <p>यह निर्देश जावास्क्रिप्ट के कड़ाई मोड को सक्रिय करता है, जो : - अघोषित चर के उपयोग को प्रतिबंधित करता है - Génère des erreurs pour les opérations dangereuses कुछ जावास्क्रिप्ट इंजनों में प्रदर्शन में सुधार लाता है</p> </div> <div class="paragraph"> <p>इस तरह के गंभीर स्क्रिप्ट के लिए, हम अधिकतम सुरक्षा चाहते हैं।</p> </div> <div class="paragraph"> <p><strong>ब्लॉक try…​catch</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">try { // Code principal } catch (error) { console.warn('Impossible de charger la préférence de thème:', error); }</code></pre> </div> </div> <div class="paragraph"> <p>यह ब्लॉक अत्यंत महत्वपूर्ण है। यह सुनिश्चित करता है कि यदि कुछ गलत हो जाता है (localStorage ब्लॉक, असंभाव्य सिंटैक्स त्रुटि, आदि.), तो हमारा स्क्रिप्ट पूरी पृष्ठ लोड को अवरुद्ध नहीं करेगा। का उपयोग`console.warn`इसके बजाय`console.error`इंगित करता है कि यह एक गंभीर समस्या नहीं है।</p> </div> <div class="paragraph"> <p><strong>localStorage की पढ़ाई</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">const savedTheme = localStorage.getItem('preferred-theme');</code></pre> </div> </div> <div class="paragraph"> <p>यह पंक्ति कुछ संदर्भों में (सफारी की सख्त निज़ी नेविगेशन) में एक अपवाद उठा सकती है। इसलिए यह एक try…​catch ब्लॉक में है।</p> </div> <div class="paragraph"> <p><strong>शर्ती आवेदन</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); }</code></pre> </div> </div> <div class="paragraph"> <p>हम केवल तभी थीम लागू करते हैं जब हमें एक संग्रहीत थीम मिली हो। अन्यथा, हम CSS को अपने डिफ़ॉल्ट थीम का उपयोग करने देते हैं। यह दृष्टिकोण जावास्क्रिप्ट में हार्ड-कोडेड डिफ़ॉल्ट मान की तुलना में अधिक मजबूत है।</p> </div> </div> <div class="sect2"> <h3 id="_सिस्टम_प्राथमिकता_का_पता_लगाना_बोनस">सिस्टम प्राथमिकता का पता लगाना (बोनस)</h3> <div class="paragraph"> <p>एक वैकल्पिक लेकिन शालीन सुधार यह है कि यदि उपयोगकर्ता आपके एप्लिकेशन में अभी तक स्पष्ट विकल्प नहीं चुना है, तो ऑपरेटिंग सिस्टम की थीम प्राथमिकता का पता लगाया जाता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); }</code></pre> </div> </div> <div class="paragraph"> <p>यह सुविधा मीडिया क्वेरी का उपयोग करती है`prefers-color-scheme`सिस्टम को पूछने के लिए। macOS, Windows 10+, iOS, और आधुनिक Android पर, यह प्रश्न उपयोगकर्ता की सिस्टम प्राथमिकता लौटाता है।</p> </div> <div class="paragraph"> <p><strong>फ़ायदे :</strong> - व्यक्तिगत अनुभव पहली यात्रा से - संगतता के साथ उपयोगकर्ता का प्रणाली पर्यावरण - पहली यात्रा के लिए कोई भंडारण आवश्यक नहीं</p> </div> <div class="paragraph"> <p><strong>विचार :</strong> सभी ब्राउज़र इस सुविधा का समर्थन नहीं करते हैं (लेकिन 2020 से समर्थन उत्कृष्ट रहा है) - सत्यापन`window.matchMedia`संगतता सुनिश्चित करता है - उपयोगकर्ता हमेशा इस विकल्प को ओवरराइड कर सकता है</p> </div> </div> <div class="sect2"> <h3 id="_प्रदर्शन_यह_स्क्रिप्ट_तेज़_क्यों_है">प्रदर्शन : यह स्क्रिप्ट तेज़ क्यों है</h3> <div class="paragraph"> <p>हमारा प्री-लोड स्क्रिप्ट बेहद तेज़ होने के लिए डिज़ाइन किया गया है :</p> </div> <div class="paragraph"> <p><strong>न्यूनतम आकार</strong>लगभग 300 बाइट्स अनमिनिफ़ाइड, 200 बाइट्स मिनिफ़ाइड। यह किसी भी इमेज या जावास्क्रिप्ट लाइब्रेरी की तुलना में नगण्य है।</p> </div> <div class="paragraph"> <p><strong>इनलाइन</strong>को अतिरिक्त HTTP अनुरोध नहीं है। स्क्रिप्ट HTML में है, इसलिए यह तुरंत उपलब्ध है।</p> </div> <div class="paragraph"> <p><strong>सादे समकालिक संचालन</strong>localStorage में एक कुंजी पढ़ना (अत्यंत तेज़ संचालन) और DOM विशेषता संशोधन (ब्राउज़र का मूल संचालन).</p> </div> <div class="paragraph"> <p><strong>कोई निर्भरता नहीं</strong>: कोई फ्रेमवर्क नहीं, कोई लाइब्रेरी नहीं, केवल वैनिला JavaScript। कोई स्टार्टअप समय नहीं, कोई डिपेंडेंसी पार्सिंग नहीं।</p> </div> <div class="paragraph"> <p><strong>एकल निष्पादन</strong>यह स्क्रिप्ट लोड होने पर केवल एक बार चलती है। कोई इवेंट लिस्नर नहीं, कोई लूप नहीं, कोई जटिल गणना नहीं।</p> </div> <div class="paragraph"> <p>व्यावहारिक रूप से, आधुनिक हार्डवेयर पर, यह स्क्रिप्ट 1 मिलीसेकंड से कम समय में चलती है – एक अवलगनीय समय जो पृष्ठ लोड होने के प्रदर्शन पर कोई प्रभाव नहीं डालता।</p> </div> </div> <div class="sect2"> <h3 id="_head_में_इष्टतम_स्थान"><head>` में इष्टतम स्थान</h3> <div class="paragraph"> <p>तत्वों का क्रम में`<head>`est important. Voici l’ordre recommandé :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><head> <!-- 1. Métadonnées critiques --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 2. Notre script de pré-chargement (IMMÉDIATEMENT après les meta) --> <script> (function() { /* notre code */ })(); </script> <!-- 3. Titre de la page --> <title>Mon Site</title> <!-- 4. Feuilles de style --> <link rel="stylesheet" href="styles.css"> <!-- 5. Autres ressources (fonts, favicons, etc.) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="icon" href="favicon.ico"> <!-- 6. Autres scripts avec defer ou async --> <script src="app.js" defer></script> </head></code></pre> </div> </div> <div class="paragraph"> <p>यह आदेश सुनिश्चित करता है कि :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>चारसेट किसी भी पाठ प्रसंस्करण से पहले परिभाषित किया जाता है</p> </li> <li> <p>हमारा स्क्रिप्ट CSS लोड होने से पहले चलता है</p> </li> <li> <p>CSS को बाद में लोड किया जाता है और फिर सही विषय को सीधे लागू किया जाता है</p> </li> <li> <p>अन्य गैर‑महत्वपूर्ण संसाधन अंत में लोड किए जाते हैं</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_3_css_एट्रिब्यूट_सेलेक्टर्स_की_शक्ति">चरण 3 : CSS एट्रिब्यूट सेलेक्टर्स की शक्ति</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_बूटस्ट्रैप_5_थीम_सिस्टम">बूटस्ट्रैप 5 थीम सिस्टम</h3> <div class="paragraph"> <p>Bootstrap 5 ने CSS कस्टम प्रॉपर्टीज़ (CSS चर) और एट्रिब्यूट सेलेक्टर्स पर आधारित थीम प्रबंधन की एक शानदार प्रणाली पेश की। यह प्रणाली एट्रिब्यूट का उपयोग करती है`data-bs-theme`तत्व पर`<html>`निर्धारित करने के लिए कि कौन सा रंग चरों का सेट लागू करना है</p> </div> <div class="paragraph"> <p>इस प्रणाली की सुंदरता इसकी सरलता में निहित है: अलग‑अलग स्टाइलशीट लोड करने या हजारों तत्वों पर क्लासेज को टॉगल करने के बजाय, हम केवल एक तत्व पर एक विशेषता बदलते हैं, और CSS कैस्केड के माध्यम से बाक़ी काम कर देता है।</p> </div> </div> <div class="sect2"> <h3 id="_css_संरचना_एक_थीम_सिस्टम_के_लिए">CSS संरचना एक थीम सिस्टम के लिए</h3> <div class="paragraph"> <p>यहाँ एक पूर्ण CSS संरचना है एक मजबूत थीम प्रणाली लागू करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">/** * SYSTÈME DE THÈME COMPLET * Utilise les Custom Properties CSS pour une maintenance facile */ /* ============================================ THÈME PAR DÉFAUT (LIGHT) Défini sur :root pour être le fallback ============================================ */ :root { /* Couleurs de base */ --color-primary: #0d6efd; --color-secondary: #6c757d; --color-success: #198754; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #0dcaf0; /* Couleurs de fond */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; /* Couleurs de texte */ --text-primary: #212529; --text-secondary: #6c757d; --text-tertiary: #adb5bd; /* Couleurs de bordure */ --border-color: #dee2e6; --border-color-subtle: #e9ecef; /* Couleurs d'ombre */ --shadow-sm: rgba(0, 0, 0, 0.075); --shadow-md: rgba(0, 0, 0, 0.15); --shadow-lg: rgba(0, 0, 0, 0.25</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0097_gradle_plugin_dev_func_test_logger_post.html Fri, 7 Nov 2025 00:00:00 +0000 blog/2025/0097_gradle_plugin_dev_func_test_logger_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_समस्या_gradlerunner_पर_निर्भरता">समस्या : GradleRunner पर निर्भरता</a> <ul class="sectlevel2"> <li><a href="#_प्लगिन_विकास_का_संदर्भ">प्लगिन विकास का संदर्भ</a></li> <li><a href="#_लॉगिंग_की_दुविधा">लॉगिंग की दुविधा</a></li> <li><a href="#_les_fausses_bonnes_idées">Les Fausses Bonnes Idées</a></li> </ul> </li> <li><a href="#_समाधान_स्वतंत्र_लॉगर">समाधान : स्वतंत्र लॉगर</a> <ul class="sectlevel2"> <li><a href="#_अनुशंसित_वास्तुकला">अनुशंसित वास्तुकला</a></li> <li><a href="#_निष्पादन_प्रवाह">निष्पादन प्रवाह</a></li> </ul> </li> <li><a href="#_पूर्ण_कार्यान्वयन">पूर्ण कार्यान्वयन</a> <ul class="sectlevel2"> <li><a href="#_gradle_निर्भरताएँ">Gradle निर्भरताएँ</a></li> <li><a href="#_logback_कॉन्फ़िगरेशन">Logback कॉन्फ़िगरेशन</a></li> <li><a href="#_पूरी_परीक्षा_वर्ग">पूरी परीक्षा वर्ग</a></li> </ul> </li> <li><a href="#_बहु_स्तरीय_लॉगिंग_स्कीमा">बहु-स्तरीय लॉगिंग स्कीमा</a></li> <li><a href="#_सर्वोत्तम_प्रथाएँ">सर्वोत्तम प्रथाएँ</a> <ul class="sectlevel2"> <li><a href="#_अनुशंसित_लॉगिंग_संरचना">अनुशंसित लॉगिंग संरचना</a></li> <li><a href="#_दृश्य_प्रतीक_पठनीयता_के_लिए">दृश्य प्रतीक पठनीयता के लिए</a></li> <li><a href="#_आउटपुट_से_सूचना_निष्कर्षण">आउटपुट से सूचना निष्कर्षण</a></li> </ul> </li> <li><a href="#_तुलना_पहलेबाद">तुलना पहले/बाद</a> <ul class="sectlevel2"> <li><a href="#_पहले_समस्यात्मक_पद्धति">पहले: समस्यात्मक पद्धति</a></li> <li><a href="#_बाद_मzboused_दृष्टिकोण">बाद : मzboused दृष्टिकोण</a></li> </ul> </li> <li><a href="#_सारांश_आरेख">सारांश आरेख</a></li> <li><a href="#_से_बचने_के_लिए_जाल">से बचने के लिए जाल</a> <ul class="sectlevel2"> <li><a href="#_पेंज_1_भूलना_forwardoutput">�❌ पेंज #1 : भूलना `.forwardOutput()</a></li> <li><a href="#_जाल_n2_लॉगर_इनिशियलाइज़_नहीं">❌ जाल n°2 : लॉगर इनिशियलाइज़ नहीं</a></li> <li><a href="#_जाल_नंबर_3_अत्यधिक_लॉगिंग">❌ जाल नंबर 3 : अत्यधिक लॉगिंग</a></li> </ul> </li> <li><a href="#_परिणाम_और_मेट्रिक्स">परिणाम और मेट्रिक्स</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_संसाधन">संसाधन</a></li> <li><a href="#_और_आगे_बढ़ें">और आगे बढ़ें</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle प्लगिन के विकास के दौरान, फ़ंक्शनल टेस्ट प्लगिन के व्यवहार को वास्तविक Gradle वातावरण में मान्य करने के लिए आवश्यक हैं। हालांकि, एक महत्वपूर्ण प्रश्न जल्दी से उठता है:<strong>कैसे प्रभावी लॉगिंग प्रणाली स्थापित करें बिना <code>GradleRunner</code> के साथ समस्याग्रस्त निर्भरताएँ बनाए ?</strong></p> </div> <div class="paragraph"> <p>इस लेख में, हम खोजेंगे:</p> </div> <div class="ulist"> <ul> <li> <p>Gradle के फ़ंक्शनल टेस्ट में लॉगिंग की समस्या</p> </li> <li> <p>SLF4J और Logback के साथ एक मजबूत समाधान की आर्किटेक्चर</p> </li> <li> <p>संपूर्ण कार्यान्वयन ठोस उदाहरणों के साथ</p> </li> <li> <p>अच्छे अभ्यास और बचने योग्य गलतियाँ</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_gradlerunner_पर_निर्भरता">समस्या : GradleRunner पर निर्भरता</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_प्लगिन_विकास_का_संदर्भ">प्लगिन विकास का संदर्भ</h3> <div class="paragraph"> <p>जब किसी Gradle प्लगइन विकसित करते हैं, तो इसका सामान्यतया उपयोग किया जाता है।`GradleRunner`<em>Gradle TestKit</em> का उपयोग करके टेस्ट बिल्ड चलाने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `test my plugin`() { val result = GradleRunner.create() .withProjectDir(projectDir) .withArguments("myTask") .build() // Comment logger efficacement ici ? }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_लॉगिंग_की_दुविधा">लॉगिंग की दुविधा</h3> <div class="paragraph"> <p>मुख्य समस्या यह है:<strong>लॉगिंग को इस ऑब्जेक्ट पर निर्भर नहीं होना चाहिए जिसका हमें यकीन नहीं है कि वह प्रारम्भिक किया गया है</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-a74755077d3d3bd2b7c4ee0866b951cd.png" alt="Diagram" width="433" height="262"> </div> </div> </div> <div class="sect2"> <h3 id="_les_fausses_bonnes_idées">Les Fausses Bonnes Idées</h3> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>इसे न करें :</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ MAUVAIS: Tentative d'obtenir un logger du runner val runner = GradleRunner.create() val logger = runner.logger // N'existe pas ! // ❌ MAUVAIS: Logger partagé initialisé tardivement lateinit var logger: Logger @BeforeEach fun setup() { logger = LoggerFactory.getLogger(...) }</code></pre> </div> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_स्वतंत्र_लॉगर">समाधान : स्वतंत्र लॉगर</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_अनुशंसित_वास्तुकला">अनुशंसित वास्तुकला</h3> <div class="paragraph"> <p>समाधान में एक लॉगर का उपयोग करना शामिल है।<strong>पूरी तरह स्वतंत्र</strong> du <code>GradleRunner</code>, परीक्षण वर्ग स्तर पर प्रारम्भित</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-30193fb5bd62a7a2638f5f9eacd06201.png" alt="Diagram" width="601" height="448"> </div> </div> </div> <div class="sect2"> <h3 id="_निष्पादन_प्रवाह">निष्पादन प्रवाह</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-fe98b2bdd6062bd4552e30a837cd9cdc.png" alt="Diagram" width="729" height="686"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पूर्ण_कार्यान्वयन">पूर्ण कार्यान्वयन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_gradle_निर्भरताएँ">Gradle निर्भरताएँ</h3> <div class="paragraph"> <p>अपने में आवश्यक निर्भरताएँ जोड़ें`build.gradle.kts`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">dependencies { // Pour les tests fonctionnels testImplementation(gradleTestKit()) testImplementation("org.junit.jupiter:junit-jupiter:5.10.2") // Pour le logging testImplementation("org.slf4j:slf4j-api:2.0.17") testRuntimeOnly("ch.qos.logback:logback-classic:1.4.14") // Pour les assertions testImplementation("org.assertj:assertj-core:3.27.6") } tasks.test { useJUnitPlatform() }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_logback_कॉन्फ़िगरेशन">Logback कॉन्फ़िगरेशन</h3> <div class="paragraph"> <p>फ़ाइल बनाएँ`src/test/resources/logback-test.xml`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <configuration> <!-- Appender console avec format lisible --> <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern> </encoder> </appender> <!-- Appender fichier pour conservation --> <appender name="FILE" class="ch.qos.logback.core.FileAppender"> <file>build/test-results/functional-tests.log</file> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern> </encoder> </appender> <!-- Logger pour vos tests --> <logger name="com.cheroliv.bakery" level="DEBUG"/> <!-- Réduire le bruit de Gradle --> <logger name="org.gradle" level="WARN"/> <!-- Configuration racine --> <root level="INFO"> <appender-ref ref="STDOUT"/> <appender-ref ref="FILE"/> </root> </configuration></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_पूरी_परीक्षा_वर्ग">पूरी परीक्षा वर्ग</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">package com.cheroliv.bakery import org.gradle.testkit.runner.GradleRunner import org.gradle.testkit.runner.TaskOutcome import org.junit.jupiter.api.* import org.junit.jupiter.api.TestInstance.Lifecycle.PER_CLASS import org.junit.jupiter.api.io.TempDir import org.slf4j.Logger import org.slf4j.LoggerFactory import java.io.File import kotlin.test.assertEquals import kotlin.test.assertTrue @TestInstance(PER_CLASS) class BakeryPluginFunctionalTest { @field:TempDir lateinit var projectDir: File private val buildFile by lazy { projectDir.resolve("build.gradle.kts") } private val settingsFile by lazy { projectDir.resolve("settings.gradle.kts") } companion object { // ✓ Logger indépendant, initialisé au chargement de la classe private val logger: Logger = LoggerFactory.getLogger( BakeryPluginFunctionalTest::class.java ) @JvmStatic @BeforeAll fun globalSetup() { logger.info("═".repeat(60)) logger.info("DÉMARRAGE DE LA SUITE DE TESTS FONCTIONNELS") logger.info("═".repeat(60)) } @JvmStatic @AfterAll fun globalTeardown() { logger.info("═".repeat(60)) logger.info("FIN DE LA SUITE DE TESTS") logger.info("═".repeat(60)) } } @BeforeEach fun setup() { logger.info("─".repeat(60)) logger.info("Préparation de l'environnement de test") logger.debug("Répertoire de test: ${projectDir.absolutePath}") settingsFile.writeText(""" rootProject.name = "test-bakery-project" """.trimIndent()) logger.debug("✓ settings.gradle.kts créé") } @AfterEach fun teardown(testInfo: TestInfo) { logger.info("✓ Test terminé: ${testInfo.displayName}") logger.info("─".repeat(60)) } @Test fun `plugin can be applied successfully`() { logger.info("TEST: Application du plugin Bakery") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) logger.debug("Fichier build.gradle.kts créé") logger.debug("Lancement du build Gradle...") val startTime = System.currentTimeMillis() val result = GradleRunner.create() .forwardOutput() // ← Important : capture la sortie .withPluginClasspath() .withArguments("tasks", "--group=bakery", "--stacktrace") .withProjectDir(projectDir) .build() val duration = System.currentTimeMillis() - startTime logger.info("Build terminé en ${duration}ms") // Analyse de la sortie logger.debug("Analyse de la sortie Gradle...") val outputLines = result.output.lines() logger.debug("Nombre de lignes capturées: ${outputLines.size}") // Validation val expectedTasks = listOf("bake", "printConfigPath", "printJBakeClasspath") logger.info("Vérification des tâches attendues:") expectedTasks.forEach { task -> val found = result.output.contains(task) logger.debug(" ${if (found) "✓" else "✗"} $task") assertTrue(found, "Task '$task' should be available") } logger.info("✓ Plugin appliqué avec succès - ${expectedTasks.size} tâches trouvées") } @Test fun `bake task executes and prints version`() { logger.info("TEST: Exécution de la tâche 'bake'") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) logger.debug("Exécution de 'gradle bake'...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("bake", "--info") // --info pour plus de détails .withProjectDir(projectDir) .build() // Extraction d'informations depuis la sortie logger.debug("Recherche du message 'Baking site'...") val hasBakingMessage = result.output.contains("Baking site with Bakery Plugin!") logger.debug("Recherche de la version JBake...") val hasVersionMessage = result.output.contains("Using JBake version:") // Extraction de la version (si présente) val versionRegex = Regex("Using JBake version: (.+)") val versionMatch = versionRegex.find(result.output) if (versionMatch != null) { val version = versionMatch.groupValues[1] logger.info("Version JBake détectée: $version") } // Validation assertTrue(hasBakingMessage, "Message 'Baking site' attendu") assertTrue(hasVersionMessage, "Message de version attendu") assertEquals(TaskOutcome.SUCCESS, result.task(":bake")?.outcome) logger.info("✓ Tâche 'bake' exécutée avec succès") } @Test fun `analyze output with structured logging`() { logger.info("TEST: Analyse structurée de la sortie") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } task("diagnostics") { doLast { println("[DIAG] Project: ${'$'}{project.name}") println("[DIAG] Build dir: ${'$'}{project.buildDir}") println("[DIAG] Plugin applied: true") val config = configurations.findByName("jbakeRuntime") println("[DIAG] JBake config exists: ${'$'}{config != null}") if (config != null) { println("[DIAG] Dependencies count: ${'$'}{config.dependencies.size}") } } } """.trimIndent()) logger.debug("Exécution de la tâche diagnostics...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("diagnostics", "--quiet") .withProjectDir(projectDir) .build() // Analyse structurée logger.info("Extraction des informations de diagnostic:") val diagLines = result.output.lines() .filter { it.startsWith("[DIAG]") } logger.debug("Nombre de lignes de diagnostic: ${diagLines.size}") diagLines.forEach { line -> logger.info(" $line") // Analyse spécifique par type de ligne when { line.contains("Project:") -> { val projectName = line.substringAfter("Project:").trim() logger.debug(" → Nom du projet extrait: '$projectName'") } line.contains("Dependencies count:") -> { val count = line.substringAfter("count:").trim() logger.debug(" → Nombre de dépendances: $count") } } } assertTrue(diagLines.isNotEmpty(), "Des lignes de diagnostic devraient être présentes") logger.info("✓ Analyse structurée terminée - ${diagLines.size} lignes analysées") } @Test fun `test with error handling`() { logger.info("TEST: Gestion d'erreurs avec logging") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) try { logger.debug("Tentative d'exécution...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("printJBakeClasspath") .withProjectDir(projectDir) .build() val outcome = result.task(":printJBakeClasspath")?.outcome logger.info("Outcome: $outcome") if (outcome == TaskOutcome.SUCCESS) { logger.info("✓ Exécution réussie") } else { logger.warn("⚠ Outcome inattendu: $outcome") } assertEquals(TaskOutcome.SUCCESS, outcome) } catch (e: Exception) { logger.error("✗ Échec du test", e) logger.error("Type d'exception: ${e.javaClass.simpleName}") logger.error("Message: ${e.message}") // Log de la stack trace si nécessaire if (logger.isDebugEnabled) { logger.debug("Stack trace complète:", e) } throw e } } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_बहु_स्तरीय_लॉगिंग_स्कीमा">बहु-स्तरीय लॉगिंग स्कीमा</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-224cb29d2432d704b4bdcca197dcb548.png" alt="Diagram" width="314" height="911"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सर्वोत्तम_प्रथाएँ">सर्वोत्तम प्रथाएँ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_अनुशंसित_लॉगिंग_संरचना">अनुशंसित लॉगिंग संरचना</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `mon test`() { // 1. LOG: Début du test logger.info("TEST: Description du test") // 2. LOG: Préparation logger.debug("Préparation des fichiers...") buildFile.writeText("...") logger.debug("✓ Fichiers préparés") // 3. LOG: Exécution logger.debug("Lancement du build...") val startTime = System.currentTimeMillis() val result = GradleRunner.create() .forwardOutput() .withArguments("task") .build() val duration = System.currentTimeMillis() - startTime logger.info("Build terminé en ${duration}ms") // 4. LOG: Analyse logger.debug("Analyse des résultats...") // ... validations ... // 5. LOG: Conclusion logger.info("✓ Test réussi") }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_दृश्य_प्रतीक_पठनीयता_के_लिए">दृश्य प्रतीक पठनीयता के लिए</h3> <div class="paragraph"> <p>लॉग की पठनीयता सुधारने के लिए यूनिकोड प्रतीकों का प्रयोग करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">logger.info("✓ Succès") logger.info("✗ Échec") logger.info("⚠ Attention") logger.info("→ Étape suivante") logger.info("═".repeat(60)) // Séparateur principal logger.info("─".repeat(60)) // Séparateur secondaire</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_आउटपुट_से_सूचना_निष्कर्षण">आउटपुट से सूचना निष्कर्षण</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Recherche simple val hasMessage = result.output.contains("Expected message") // Extraction avec regex val versionRegex = Regex("Version: (.+)") val version = versionRegex.find(result.output)?.groupValues?.get(1) // Filtrage de lignes val errorLines = result.output.lines() .filter { it.contains("ERROR") } errorLines.forEach { logger.error("Gradle error: $it") }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_तुलना_पहलेबाद">तुलना पहले/बाद</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पहले_समस्यात्मक_पद्धति">पहले: समस्यात्मक पद्धति</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class MyTest { lateinit var logger: Logger // ❌ Initialisé tardivement @BeforeEach fun setup() { logger = LoggerFactory.getLogger(...) // ❌ Dépendance } @Test fun test() { val runner = GradleRunner.create() logger.info("Testing...") // ⚠ Peut échouer } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_बाद_मzboused_दृष्टिकोण">बाद : मzboused दृष्टिकोण</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class MyTest { companion object { private val logger = LoggerFactory.getLogger(...) // ✓ Indépendant } @Test fun test() { logger.info("TEST: Starting...") // ✓ Toujours disponible val result = GradleRunner.create() .forwardOutput() // ✓ Capture la sortie .build() logger.debug("Output: ${result.output}") // ✓ Analyse } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सारांश_आरेख">सारांश आरेख</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-5ee5b0aec3d2942882fab09e3ee72bd6.png" alt="Diagram" width="948" height="1345"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_से_बचने_के_लिए_जाल">से बचने के लिए जाल</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पेंज_1_भूलना_forwardoutput">�❌ पेंज #1 : भूलना `.forwardOutput()</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// MAUVAIS: La sortie Gradle n'est pas capturée val result = GradleRunner.create() .withArguments("task") .build() // result.output sera vide !</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// BON: La sortie est capturée val result = GradleRunner.create() .forwardOutput() // ✓ .withArguments("task") .build()</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_जाल_n2_लॉगर_इनिशियलाइज़_नहीं">❌ जाल n°2 : लॉगर इनिशियलाइज़ नहीं</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// MAUVAIS class Test { lateinit var logger: Logger // Peut ne pas être initialisé }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// BON class Test { companion object { private val logger = LoggerFactory.getLogger(...) // Toujours initialisé } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_जाल_नंबर_3_अत्यधिक_लॉगिंग">❌ जाल नंबर 3 : अत्यधिक लॉगिंग</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// MAUVAIS: Trop de logs DEBUG en production logger.debug("Variable a = $a") logger.debug("Variable b = $b") logger.debug("Variable c = $c") // ... 100 lignes de logs</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// BON: Logging ciblé logger.info("Traitement de ${items.size} éléments") logger.debug("Détails: ${items.take(5)}...") // Échantillon seulement</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_परिणाम_और_मेट्रिक्स">परिणाम और मेट्रिक्स</h2> <div class="sectionbody"> <div class="paragraph"> <p>इस दृष्टिकोण से, आपको मिलता है:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 28.5714%;"> <col style="width: 42.8571%;"> <col style="width: 28.5715%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">मेट्रिक</th> <th class="tableblock halign-left valign-top">पहले</th> <th class="tableblock halign-left valign-top">बाद में</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">कोड की पंक्तियाँ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~50 लाइनें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~80 पंक्तियाँ (+60%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">डिबग का समय</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पाया गया त्रुटियाँ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">बुनियादी</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">विस्तृत</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">रखरखाव</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कठिन</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">सरल</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">स्वतंत्रता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�❌ जोड़ी गई</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>ग्रेडल प्लगइन के कार्यात्मक परीक्षणों में एक मजबूत लॉगिंग प्रणाली स्थापित करने का आधार एक सरल सिद्धांत है :<strong>स्वतंत्रता</strong>।</p> </div> <div class="paragraph"> <p>याद रखने वाले मुख्य बिंदु :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>स्वतंत्र लॉगर</strong>: एक में प्रारम्भित`companion object`</p> </li> <li> <p><strong>SLF4J + Logback</strong>: परीक्षणित और कॉन्फ़िगरेबल स्टैक</p> </li> <li> <p><strong>.forwardOutput()</strong>: ग्रैडल आउटपुट की कैप्चर</p> </li> <li> <p><strong>संरचित लॉगिंग</strong> : INFO pour les étapes, DEBUG pour les détails</p> </li> <li> <p><strong>आउटपुट विश्लेषण</strong>: जानकारी निकालना`result.output`</p> </li> </ol> </div> <div class="paragraph"> <p>यह दृष्टिकोण परीक्षणों की गारंटी देता है<strong>बनाए रखने योग्य</strong>, <strong>डिबग योग्य</strong> et <strong>मजबूत</strong>, ठोस डिज़ाइन सिद्धांतों का पालन करते हुए.</p> </div> </div> </div> <div class="sect1"> <h2 id="_संसाधन">संसाधन</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/test_kit.html">ग्रैडल टेस्टकिट दस्तावेज़</a></p> </li> <li> <p><a href="https://www.slf4j.org/manual.html">एसएलएफ4J मैनुअल</a></p> </li> <li> <p><a href="https://logback.qos.ch/manual/configuration.html">Logback कॉन्फ़िगरेशन</a></p> </li> <li> <p><a href="https://github.com/gradle/gradle/tree/master/subprojects/test-kit">Gradle TestKit स्रोत कोड</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_और_आगे_बढ़ें">और आगे बढ़ें</h2> <div class="sectionbody"> <div class="paragraph"> <p>आगामी लेख में, हम का अन्वेषण करेंगे :</p> </div> <div class="ulist"> <ul> <li> <p>संरचित लॉगिंग के साथ निरंतर एकीकरण</p> </li> <li> <p>एचटीएमएल परीक्षण रिपोर्ट्स जिसमें एम्बेडेड लॉग शामिल हैं</p> </li> <li> <p>उन्नत डिबगिंग JVM अटैच के साथ</p> </li> <li> <p>लॉगिंग के प्रदर्शन और अनुकूलन</p> </li> </ul> </div> <div class="paragraph"> <p>यह लेख "Gradle प्लगिन विकास" श्रृंखला का भाग है मेरे तकनीकी ब्लॉग पर।</p> </div> </div> </div> https://cheroliv.com/blog/2025/0096_afficher-couleurs-asciidoc_post.html Sat, 1 Nov 2025 00:00:00 +0000 blog/2025/0096_afficher-couleurs-asciidoc_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_समस्या">समस्या</a> <ul class="sectlevel2"> <li><a href="#_उपयोग_का_संदर्भ">उपयोग का संदर्भ</a></li> <li><a href="#_संभावित_दृष्टिकोण">संभावित दृष्टिकोण</a> <ul class="sectlevel3"> <li><a href="#_विकल्प_1_यूनिकोड_अक्षर">विकल्प 1 : यूनिकोड अक्षर</a></li> </ul> </li> </ul> </li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a> <ul class="sectlevel3"> <li><a href="#_option_2_बाहरी_चित्र">Option 2 : बाहरी चित्र</a></li> <li><a href="#_विकल्प_3_css_की_कस्टम_भूमिकाएँ">विकल्प 3 : CSS की कस्टम भूमिकाएँ</a></li> <li><a href="#_विकल्प_4_html_इंजेक्शन_चुनी_गई_समाधान">विकल्प 4 : HTML इंजेक्शन (चुनी गई समाधान)</a></li> <li><a href="#_समाधान_html_इन्जेक्शन_के_साथ">समाधान: HTML इन्जेक्शन के साथ</a> <ul class="sectlevel2"> <li><a href="#_कार्य_करने_का_सिद्धांत">कार्य करने का सिद्धांत</a></li> <li><a href="#_कार्यान्वयन">कार्यान्वयन</a> <ul class="sectlevel3"> <li><a href="#_css_गुणों_की_व्याख्या">CSS गुणों की व्याख्या</a></li> </ul> </li> <li><a href="#_उदाहरण_पूरा">उदाहरण पूरा</a></li> </ul> </li> <li><a href="#_अनुकूलन_और_सर्वोत्तम_प्रथाएँ">अनुकूलन और सर्वोत्तम प्रथाएँ</a> <ul class="sectlevel2"> <li><a href="#_हल्के_रंगों_को_प्रबंधित_करें">हल्के रंगों को प्रबंधित करें</a></li> <li><a href="#_वर्गों_के_आकार_को_समायोजित_करें">वर्गों के आकार को समायोजित करें</a></li> <li><a href="#_वैरिएंट_बनाएँ">वैरिएंट बनाएँ</a> <ul class="sectlevel3"> <li><a href="#_रंगीन_वृत्त">रंगीन वृत्त</a></li> <li><a href="#_रंगीन_सीमा_वाला_वर्ग">रंगीन सीमा वाला वर्ग</a></li> </ul> </li> </ul> </li> <li><a href="#_समाधान_आर्किटेक्चर">समाधान आर्किटेक्चर</a></li> <li><a href="#_फ़ायदे_और_सीमाएँ">फ़ायदे और सीमाएँ</a> <ul class="sectlevel2"> <li><a href="#_फ़ायदे">फ़ायदे</a></li> <li><a href="#_सीमाएँ">सीमाएँ</a></li> <li><a href="#_सुलभता_में_सुधार">सुलभता में सुधार</a></li> </ul> </li> <li><a href="#_वास्तविक_उदाहरण_विषयों_का_दस्तावेज़">वास्तविक उदाहरण : विषयों का दस्तावेज़</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_संसाधन">संसाधन</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>तकनीकी दस्तावेज़ लिखते समय, विशेष रूप से शैली गाइड या उपयोगकर्ता इंटरफ़ेस स्पेसिफिकेशन्स के लिए, अक्सर रंग पैलेट दिखाने की आवश्यकता होती है। AsciiDoc, दस्तावेज़ीकरण के लिए बहुत शक्तिशाली होने के बावजूद, रंग नमूने प्रदर्शित करने के लिए कोई मूल व्याकरण प्रदान नहीं करता है। यह लेख समस्या की पड़ताल करता है और HTML इंजेक्शन पर आधारित एक शालीन समाधान प्रस्तुत करता है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या">समस्या</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_उपयोग_का_संदर्भ">उपयोग का संदर्भ</h3> <div class="paragraph"> <p>कल्पना कीजिए कि आप एक वेब एप्लिकेशन थीम के CSS चर को दस्तावेज़ कर रहे हैं। आपको चाहिए :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>हेक्साडेसिमल रंग कोडों को सूचीबद्ध करें</p> </li> <li> <p>प्रत्येक रंग का दृश्य पूर्वावलोकन दिखाएँ</p> </li> <li> <p>Maintenir la lisibilité du document source</p> </li> <li> <p>JBake जैसे स्थिर साइट जेनरेटर्स के साथ संगतता सुनिश्चित करें</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="use-case-diagram.svg" alt="use case diagram" width="906" height="193"> </div> </div> </div> <div class="sect2"> <h3 id="_संभावित_दृष्टिकोण">संभावित दृष्टिकोण</h3> <div class="paragraph"> <p>एक AsciiDoc दस्तावेज़ में रंग दिखाने के कई समाधान पर विचार किया जा सकता है :</p> </div> <div class="imageblock"> <div class="content"> <img src="component-diagram.svg" alt="component diagram" width="1783" height="5795"> </div> </div> <div class="sect3"> <h4 id="_विकल्प_1_यूनिकोड_अक्षर">विकल्प 1 : यूनिकोड अक्षर</h4> <div class="paragraph"> <p>यूनिकोड अक्षरों के उपयोग के रूप में`■`<mark>#</mark> JBake CLI Commands <code>`</code> # Initialize a new JBake project jbake -i</p> </div> </div> </div> </div> </div> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="paragraph"> <p>(■) सरल लेकिन सीमित है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* ■ --accent-color: #7952b3 (violet Bootstrap)</code></pre> </div> </div> <div class="paragraph"> <p><strong>Limitations</strong> : रंग पर कोई नियंत्रण नहीं, सिस्टम फ़ॉन्ट पर निर्भर।</p> </div> <div class="sect3"> <h4 id="_option_2_बाहरी_चित्र">Option 2 : बाहरी चित्र</h4> <div class="paragraph"> <p>प्रत्येक रंग के लिए PNG या SVG छवियाँ बनाएँ:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* image:colors/violet.svg[width=16] --accent-color: #7952b3</code></pre> </div> </div> <div class="paragraph"> <p><strong>सीमाएँ</strong> : भारी रखरखाव, फ़ाइलों की वृद्धि, स्वचालित समन्वय नहीं।</p> </div> </div> <div class="sect3"> <h4 id="_विकल्प_3_css_की_कस्टम_भूमिकाएँ">विकल्प 3 : CSS की कस्टम भूमिकाएँ</h4> <div class="paragraph"> <p>CSS क्लासेस परिभाषित करें और उन्हें AsciiDoc भूमिकाओं के माध्यम से लागू करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* [.color-violet]##■## --accent-color: #7952b3</code></pre> </div> </div> <div class="paragraph"> <p><strong>सीमाएँ</strong> : बाहरी स्टाइलशीट की आवश्यकता होती है, सभी संभव रंगों की पूर्व परिभाषा।</p> </div> </div> <div class="sect3"> <h4 id="_विकल्प_4_html_इंजेक्शन_चुनी_गई_समाधान">विकल्प 4 : HTML इंजेक्शन (चुनी गई समाधान)</h4> <div class="paragraph"> <p>मैक्रो का उपयोग करें``इंलाइन शैली के साथ HTML इंजेक्ट करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em; background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: #7952b3 (violet Bootstrap)</code></pre> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_html_इन्जेक्शन_के_साथ">समाधान: HTML इन्जेक्शन के साथ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_कार्य_करने_का_सिद्धांत">कार्य करने का सिद्धांत</h3> <div class="paragraph"> <p>मैक्रो``AsciiDoc कच्ची सामग्री डालने की अनुमति देता है जिसे AsciiDoc प्रोसेसर द्वारा ज्याख्या नहीं की जाएगी। इससे हमें सीधे HTML को इन्लाइन CSS शैलियों के साथ इंजेक्ट करने की अनुमति मिलती है।</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 5) ] @startuml participant "दस्तावेज़\nAsciiDoc" as doc participant "प्रोसेसर\nAsciiDoc" as processor participant "पास:[] मैक्रो" as pass participant "HTML ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml participant "दस्तावेज़\nAsciiDoc" as doc participant "प्रोसेसर\nAsciiDoc" as processor participant "पास:[] मैक्रो" as pass participant "HTML अंतिम" as html doc -> processor : Analyse document processor -> pass : Détecte pass:[] pass -> processor : Retourne HTML brut processor -> html : Insère sans transformation html -> html : Navigateur applique styles @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_कार्यान्वयन">कार्यान्वयन</h3> <div class="paragraph"> <p>यहाँ HTML संरचना डालने के लिए है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><span style="display:inline-block; width:1em; height:1em; background:#7952b3; vertical-align:middle; margin-right:0.5em"> </span></code></pre> </div> </div> <div class="sect3"> <h4 id="_css_गुणों_की_व्याख्या">CSS गुणों की व्याख्या</h4> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 75%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">सम्पत्ति</th> <th class="tableblock halign-left valign-top">फ़ंक्शन</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>display:inline-block</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">इंलाइन प्रवाह में बने रहते हुए width/height सेट करने की अनुमति देता है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>width:1em; height:1em</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ॉन्ट के आकार के सापेक्ष वर्ग का आकार (प्रतिक्रियाशील)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>background:#7952b3</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">दिखाने वाला रंग (आपकी आवश्यकतानुसार परिवर्तनीय) (आपकी)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>vertical-align:middle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वर्ग को सन्निहित पाठ के साथ संरेखित करें</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>margin-right:0.5em</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वर्ग और टेक्स्ट के बीच की दूरी</p></td> </tr> </tbody> </table> </div> </div> <div class="sect2"> <h3 id="_उदाहरण_पूरा">उदाहरण पूरा</h3> <div class="paragraph"> <p>यहाँ एक उदाहरण है जो एक थीम पैलेट का दस्तावेज़ीकरण करता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">== Thème Clair * pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"></span>] --accent-hover: `#61428f` (violet plus foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --card-bg: `#ffffff` (blanc)</code></pre> </div> </div> <div class="paragraph"> <p>निम्नलिखित रेंडर कौन उत्पन्न करता है:</p> </div> <div class="paragraph"> <p><strong>लाइट थीम</strong></p> </div> <div class="ulist"> <ul> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span> --bg-primary:`#f8f9fa`(ऑफ़ व्हाइट)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span> --text-primary:`#212529`(बहुत गहरा काला)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span> --accent-color:`#7952b3`(Bootstrap बैंगनी)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"></span> --accent-hover:`#61428f`(गहरा बैंगनी)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span> --card-bg:`#ffffff`(सफ़ेद)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अनुकूलन_और_सर्वोत्तम_प्रथाएँ">अनुकूलन और सर्वोत्तम प्रथाएँ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_हल्के_रंगों_को_प्रबंधित_करें">हल्के रंगों को प्रबंधित करें</h3> <div class="paragraph"> <p>बहुत हल्के रंगों (सफेद, बहुत हल्का ग्रे) के लिए, उन्हें सफेद पृष्ठभूमि पर दृश्यमान बनाने के लिए एक सीमा जोड़ें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><span style="display:inline-block;width:1em;height:1em; background:#ffffff;border:1px solid #ccc; vertical-align:middle;margin-right:0.5em"></span></code></pre> </div> </div> <div class="paragraph"> <p>ग्रे बॉर्डर (<code>border:1px solid #ccc</code>) सफेद पृष्ठभूमि पर सफेद वर्ग को सीमा निर्धारित करने की अनुमति देता है।</p> </div> </div> <div class="sect2"> <h3 id="_वर्गों_के_आकार_को_समायोजित_करें">वर्गों के आकार को समायोजित करें</h3> <div class="paragraph"> <p>आप अपनी आवश्यकताओं के अनुसार वर्गों के आकार को समायोजित कर सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1.5em;height:1.5em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Grand carré * pass:[<span style="display:inline-block;width:0.8em;height:0.8em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Petit carré</code></pre> </div> </div> <div class="paragraph"> <p>इकाई का उपयोग`em`यह सुनिश्चित करता है कि वर्ग फ़ॉन्ट के आकार के अनुसार अनुकूलित हो जाते हैं।</p> </div> </div> <div class="sect2"> <h3 id="_वैरिएंट_बनाएँ">वैरिएंट बनाएँ</h3> <div class="paragraph"> <p>विशिष्ट आवश्यकताओं के लिए, आप विभिन्न प्रकार के प्रारूप बना सकते हैं :</p> </div> <div class="sect3"> <h4 id="_रंगीन_वृत्त">रंगीन वृत्त</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;border-radius:50%;vertical-align:middle;margin-right:0.5em"></span>] Cercle violet</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_रंगीन_सीमा_वाला_वर्ग">रंगीन सीमा वाला वर्ग</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:3px solid #7952b3;vertical-align:middle;margin-right:0.5em"></span>] Bordure violette</code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_आर्किटेक्चर">समाधान आर्किटेक्चर</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="architecture-diagram.svg" alt="architecture diagram" width="1738" height="5723"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_फ़ायदे_और_सीमाएँ">फ़ायदे और सीमाएँ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_फ़ायदे">फ़ायदे</h3> <div class="ulist"> <ul> <li> <p>✓ <strong>स्वायत्तता</strong> : बाहरी फ़ाइलों पर कोई निर्भरता नहीं</p> </li> <li> <p>✓ <strong>Portabilité</strong> : सभी AsciiDoc प्रोसेसर के साथ काम करता है</p> </li> <li> <p>✓ <strong>सिंक्रोनाइज़ेशन</strong> : रंग कोड HTML में सीधे है</p> </li> <li> <p>�✓ <strong>लचीलापन</strong> : पूर्ण शैली अनुकूलन</p> </li> <li> <p>�✓ <strong>Maintenance</strong> : हेक्साडेसीमल कोड का सरल संशोधन</p> </li> <li> <p>✓ <strong>JBake संगतता</strong> : पूरी तरह से स्थिर साइट जनरेटरों के साथ काम करता है</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_सीमाएँ">सीमाएँ</h3> <div class="ulist"> <ul> <li> <p>�✗ <strong>वाचालता</strong> : पुनरावृत्तिपूर्ण HTML कोड AsciiDoc स्रोत में</p> </li> <li> <p>�✗ <strong>स्रोत की पठनीयता</strong> : स्रोत दस्तावेज़ कम परिष्कृत है</p> </li> <li> <p><strong>एक्सेसिबिलिटी</strong> : कोई मूल वैकल्पिक पाठ नहीं (हाथ से जोड़ना होगा)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_सुलभता_में_सुधार">सुलभता में सुधार</h3> <div class="paragraph"> <p>स्क्रीन रीडर्स के लिए वर्गों को सुलभ बनाने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span role="img" aria-label="Couleur violet Bootstrap" style="display:inline-block;width:1em;height:1em;background:#7952b3; vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap)</code></pre> </div> </div> <div class="paragraph"> <p>विशेषताएँ`role="img"` et `aria-label`वे सहायक प्रौद्योगिकियों को दृश्य सामग्री को समझने और वर्णित करने की अनुमति देते हैं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_वास्तविक_उदाहरण_विषयों_का_दस्तावेज़">वास्तविक उदाहरण : विषयों का दस्तावेज़</h2> <div class="sectionbody"> <div class="paragraph"> <p>यहाँ कई विषयों का दस्तावेज़ करने वाला एक पूर्ण उदाहरण है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Guide des couleurs de l'application == Thème Clair (`:root`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap) == Thème Sombre (`[data-bs-theme="dark"]`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #999;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#0d6efd;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#0d6efd` (bleu Bootstrap) == Thème Contraste Élevé (`[data-bs-theme="high-contrast"]`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#000000;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#000000` (noir) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #000;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#00ff00;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#00ff00` (vert vif)</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>मैक्रो के माध्यम से HTML इंजेक्शन``AsciiDoc एक सुंदर और व्यावहारिक समाधान प्रदान करता है तकनीकी दस्तावेज़ीकरण में रंग के नमूनों को प्रदर्शित करने के लिए। यद्यपि यह थोड़ा शब्दजालपूर्ण है, इस तरीके से अधिकतम पोर्टेबिलिटी और सरलीकृत रखरखाव की गारंटी मिलती है।</p> </div> <div class="paragraph"> <p>यह तकनीक को किसी बाहरी कॉन्फ़िगरेशन या अतिरिक्त स्टाइल शीट की आवश्यकता नहीं है, और यह JBake और सभी मानक AsciiDoc प्रोसेसर के साथ तुरंत काम करती है।</p> </div> <div class="paragraph"> <p>एक बार जब आप अपना पहला रंगीन वर्ग बना लेते हैं, तो बस HTML कोड कॉपी‑पेस्ट करें और हेक्साडेसिमल कोड बदलकर जल्दी से एक पूर्ण पैलेट बनाएं।</p> </div> <div class="paragraph"> <p>यह तकनीक अनुकूलित दृश्य रेंडरिंग की आवश्यकता वाले अन्य उपयोग के मामलों में विस्तारित की जा सकती है: आइकन, बैज, साधारण चार्ट, या किसी भी दृश्य तत्व जिसको शैली के सटीक नियंत्रण की आवश्यकता होती है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_संसाधन">संसाधन</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.asciidoctor.org/asciidoc/latest/pass/pass-macro/" target="_blank" rel="noopener">दस्तावेज़ AsciiDoc : पास मैक्रो</a></p> </li> <li> <p><a href="https://jbake.org/docs/2.6.7/" target="_blank" rel="noopener">JBake Documentation</a></p> </li> <li> <p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank" rel="noopener">MDN : CSS रंग के मान</a></p> </li> </ul> </div> <div class="paragraph"> <p><em>लेख प्रकाशित किया गया 2025-11-01</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0095_i18n-site-statique-jbake-thymeleaf_post.html Mon, 20 Oct 2025 00:00:00 +0000 blog/2025/0095_i18n-site-statique-jbake-thymeleaf_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a> <ul class="sectlevel2"> <li><a href="#_उपयोग_केस_आरेख_use_case">उपयोग केस आरेख (Use Case)</a></li> </ul> </li> <li><a href="#_अंतर्राष्ट्रीयीकरण_की_वास्तुकला">अंतर्राष्ट्रीयीकरण की वास्तुकला</a> <ul class="sectlevel2"> <li><a href="#_संरचना_आरेख_फ़ाइल_संगठन">संरचना आरेख (फ़ाइल संगठन)</a></li> <li><a href="#_इस_दृष्टिकोण_क्यों">इस दृष्टिकोण क्यों?</a></li> <li><a href="#_घटक_आरेख">घटक आरेख</a></li> </ul> </li> <li><a href="#_i18n_thymeleaf_के_साथ_टेम्प्लेटिंग">I18n Thymeleaf के साथ टेम्प्लेटिंग</a> <ul class="sectlevel2"> <li><a href="#_structure_des_fichiers_de_messages">Structure des fichiers de messages</a></li> <li><a href="#_संदेश_फ़ाइलों_की_सामग्री">संदेश फ़ाइलों की सामग्री</a></li> <li><a href="#_टेम्पलेट्स_में_उपयोग">टेम्पलेट्स में उपयोग</a></li> <li><a href="#_अनुक्रम_आरेख_i18n_समाधान">अनुक्रम आरेख - i18n समाधान</a></li> <li><a href="#_jbake_में_लोकेल_कॉन्फ़िगरेशन">JBake में लोकेल कॉन्फ़िगरेशन</a></li> </ul> </li> <li><a href="#_लेखों_का_i18n_फ़ोल्डर_द्वारा_संगठन">लेखों का I18n: फ़ोल्डर द्वारा संगठन</a> <ul class="sectlevel2"> <li><a href="#_फ़्लो_flow_का_प्रवाह_आरेख_निर्माण">फ़्लो (Flow) का प्रवाह आरेख - निर्माण</a></li> <li><a href="#_फ़ोल्डर_संरचना">फ़ोल्डर संरचना</a></li> <li><a href="#_इस_दृष्टिकोण_के_फ़ायदे">इस दृष्टिकोण के फ़ायदे</a></li> <li><a href="#_लेखों_के_मेटाडेटा">लेखों के मेटाडेटा</a></li> <li><a href="#_यूआरएल_कॉन्फ़िगरेशन">यूआरएल कॉन्फ़िगरेशन</a></li> </ul> </li> <li><a href="#_बहुभाषी_प्रदर्शन_के_लिए_टेम्प्लेट">बहुभाषी प्रदर्शन के लिए टेम्प्लेट</a> <ul class="sectlevel2"> <li><a href="#_भाषा_चयनकर्ता_के_साथ_लेख_टेम्पलेट">भाषा चयनकर्ता के साथ लेख टेम्पलेट</a></li> <li><a href="#_भाषा_द्वारा_फ़िल्टर_किया_गया_सूचकांक">भाषा द्वारा फ़िल्टर किया गया सूचकांक</a></li> </ul> </li> <li><a href="#_भाषाओं_के_बीच_नेविगेशन">भाषाओं के बीच नेविगेशन</a> <ul class="sectlevel2"> <li><a href="#_वैश्विक_भाषा_चयनकर्ता">वैश्विक भाषा चयनकर्ता</a></li> <li><a href="#_फ़्लो_चार्ट_उपयोगकर्ता_पढ़ना">फ़्लो चार्ट - उपयोगकर्ता पढ़ना</a></li> <li><a href="#_सेलेक्टर_के_लिए_css_शैली">सेलेक्टर के लिए CSS शैली</a></li> </ul> </li> <li><a href="#_भाषा_अनुसार_rss_फ़ीड">भाषा अनुसार RSS फ़ीड</a></li> <li><a href="#_अच्छी_प्रथाएँ_और_टिप्स">अच्छी प्रथाएँ और टिप्स</a> <ul class="sectlevel2"> <li><a href="#_1_cohérence_des_identifiants_darticle">1. Cohérence des identifiants d’article</a></li> <li><a href="#_2_संगत_तारीखें">2. संगत तारीखें</a></li> <li><a href="#_3_बहुभाषी_टैग">3. बहुभाषी टैग</a></li> <li><a href="#_4_अनुवाद_न_किए_गए_लेखों_का_प्रबंधन">4. अनुवाद न किए गए लेखों का प्रबंधन</a></li> <li><a href="#_5_बहुभाषी_साइटमैप">5. बहुभाषी साइटमैप</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a> <ul class="sectlevel2"> <li><a href="#_डिप्लॉयमेंट_आरेख">डिप्लॉयमेंट आरेख</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक स्थिर साइट का अंतर्राष्ट्रीयकरण (i18n) पहली नज़र में जटिल लग सकता है, लेकिन JBake के साथ Thymeleaf को मिलाकर बहुभाषी साइट बनाने के लिए सुंदर समाधान प्रदान करता है। इस लेख में, मैं आपको दिखाऊँगा कि मैंने अपने ब्लॉग पर i18n कैसे लागू किया, जिसमें टेम्पलेटिंग और कई भाषाओं में लेख प्रबंधन दोनों शामिल हैं।</p> </div> <div class="sect2"> <h3 id="_उपयोग_केस_आरेख_use_case">उपयोग केस आरेख (Use Case)</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-a14d3e7d3e4bbf5a4adba93772f5445b.png" alt="Diagram" width="651" height="433"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अंतर्राष्ट्रीयीकरण_की_वास्तुकला">अंतर्राष्ट्रीयीकरण की वास्तुकला</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारा दृष्टिकोण दो स्तम्भों पर आधारित है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>टेम्पलेटिंग का i18n</strong>: Thymeleaf संदेश फाइलों का उपयोग इंटरफ़ेस तत्वों के लिए</p> </li> <li> <p><strong>सामग्री का अंतर्राष्ट्रीयीकरण</strong>: भाषा के अनुसार आलेखों का संगठन एक समर्पित फ़ोल्डर संरचना में</p> </li> </ol> </div> <div class="sect2"> <h3 id="_संरचना_आरेख_फ़ाइल_संगठन">संरचना आरेख (फ़ाइल संगठन)</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-2f100fc3ec2ec37f9556818cdc246602.png" alt="Diagram" width="188" height="513"> </div> </div> </div> <div class="sect2"> <h3 id="_इस_दृष्टिकोण_क्यों">इस दृष्टिकोण क्यों?</h3> <div class="paragraph"> <p>यह पृथक्करण करने की अनुमति देता है :</p> </div> <div class="ulist"> <ul> <li> <p>भाषा चाहे जैसी भी हो, इंटरफ़ेस में स्थिरता बनाए रखें</p> </li> <li> <p>सामग्री और लेख अनुवाद को स्वतंत्र रूप से प्रबंधित करें</p> </li> <li> <p>बड़े रिफैक्टरिंग किए बिना नयी भाषाएँ जोड़ने को सुगम बनाना</p> </li> <li> <p>केवल कुछ भाषाओं में उपलब्ध लेखों की अनुमति दें</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_घटक_आरेख">घटक आरेख</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-79ece694ee71813801472b3f834432c0.png" alt="Diagram" width="1771" height="477"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_i18n_thymeleaf_के_साथ_टेम्प्लेटिंग">I18n Thymeleaf के साथ टेम्प्लेटिंग</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_structure_des_fichiers_de_messages">Structure des fichiers de messages</h3> <div class="paragraph"> <p>पहला चरण समर्थित प्रत्येक भाषा के लिए गुण फ़ाइलें बनाने से शुरू होता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">src/jbake/templates/ ├── messages.properties # Fallback par défaut ├── messages_fr.properties # Français ├── messages_en.properties # Anglais └── messages_de.properties # Allemand</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_संदेश_फ़ाइलों_की_सामग्री">संदेश फ़ाइलों की सामग्री</h3> <div class="paragraph"> <p>यहाँ एक फ़ाइल का उदाहरण है`messages_fr.properties`(No output - empty string)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># Navigation nav.home=Accueil nav.blog=Blog nav.about=À propos nav.contact=Contact # Articles article.readmore=Lire la suite article.published=Publié le article.tags=Étiquettes article.also.available=Également disponible en # Interface site.title=Mon Blog Technique site.description=Partage de connaissances et expériences footer.copyright=© 2025 Tous droits réservés search.placeholder=Rechercher un article...</code></pre> </div> </div> <div class="paragraph"> <p>और उसका अंग्रेजी समकक्ष`messages_en.properties`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># Navigation nav.home=Home nav.blog=Blog nav.about=About nav.contact=Contact # Articles article.readmore=Read more article.published=Published on article.tags=Tags article.also.available=Also available in # Interface site.title=My Tech Blog site.description=Sharing knowledge and experiences footer.copyright=© 2025 All rights reserved search.placeholder=Search articles...</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_टेम्पलेट्स_में_उपयोग">टेम्पलेट्स में उपयोग</h3> <div class="paragraph"> <p>अपने Thymeleaf टेम्पलेट्स में, सिंटैक्स का उपयोग करें`#{}`संदेशों तक पहुँचने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">Mon Blog</title> <meta name="description" th:content="#{site.description}" /> </head> <body> <nav> <a th:href="@{/}" th:text="#{nav.home}">Accueil</a> <a th:href="@{/blog/}" th:text="#{nav.blog}">Blog</a> <a th:href="@{/about.html}" th:text="#{nav.about}">À propos</a> </nav> <footer> <p th:text="#{footer.copyright}">Copyright</p> </footer> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_अनुक्रम_आरेख_i18n_समाधान">अनुक्रम आरेख - i18n समाधान</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 4) ] @startuml actor Auteur participant JBake participant "AsciiDoc ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml actor Auteur participant JBake participant "AsciiDoc पार्सर" as parser participant "Thymeleaf इंजन" as thymeleaf participant "I18n\nसमाधानकर्ता" as i18n database "messages_*.properties" as messages Auteur -> JBake: jbake -b activate JBake JBake -> parser: Lire article.fr.adoc activate parser parser --> JBake: Contenu + métadonnées\n(lang=fr, article-id=xyz) deactivate parser JBake -> parser: Lire article.en.adoc activate parser parser --> JBake: Contenu + métadonnées\n(lang=en, article-id=xyz) deactivate parser JBake -> thymeleaf: Générer page FR activate thymeleaf thymeleaf -> i18n: Résoudre #{nav.home} activate i18n i18n -> messages: Lire messages_fr.properties messages --> i18n: "स्वागत" i18n --> thymeleaf: "स्वागत" deactivate i18n thymeleaf -> JBake: Rechercher traductions\n(article-id=xyz, lang!=fr) JBake --> thymeleaf: article.en.html trouvé thymeleaf --> JBake: /fr/blog/article.html deactivate thymeleaf JBake -> thymeleaf: Générer page EN activate thymeleaf thymeleaf -> i18n: Résoudre #{nav.home} activate i18n i18n -> messages: Lire messages_en.properties messages --> i18n: "होम" i18n --> thymeleaf: "होम" deactivate i18n thymeleaf -> JBake: Rechercher traductions\n(article-id=xyz, lang!=en) JBake --> thymeleaf: article.fr.html trouvé thymeleaf --> JBake: /en/blog/article.html deactivate thymeleaf JBake --> Auteur: Site généré deactivate JBake @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_jbake_में_लोकेल_कॉन्फ़िगरेशन">JBake में लोकेल कॉन्फ़िगरेशन</h3> <div class="paragraph"> <p>आपकी फ़ाइल में`jbake.properties`, डिफ़ॉल्ट locale सेट करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># Locale par défaut thymeleaf.locale=fr # Encodage template.encoding=UTF-8</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_लेखों_का_i18n_फ़ोल्डर_द्वारा_संगठन">लेखों का I18n: फ़ोल्डर द्वारा संगठन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_फ़्लो_flow_का_प्रवाह_आरेख_निर्माण">फ़्लो (Flow) का प्रवाह आरेख - निर्माण</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-f0b4350346f193bede9cd575ebc2ac32.png" alt="Diagram" width="285" height="1034"> </div> </div> </div> <div class="sect2"> <h3 id="_फ़ोल्डर_संरचना">फ़ोल्डर संरचना</h3> <div class="paragraph"> <p>फ़ाइल नामों में सफ़िक्स का उपयोग करने के बजाय, मैंने स्पष्टता और रखरखाव में सुधार लाने वाले फ़ोल्डर आधारित संगठन को चुना है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">content/blog/ ├── 2024/ │ ├── fr/ │ │ ├── introduction-jbake.adoc │ │ ├── guide-thymeleaf.adoc │ │ └── astuces-asciidoc.adoc │ └── en/ │ ├── introduction-jbake.adoc │ ├── thymeleaf-guide.adoc │ └── asciidoc-tips.adoc └── 2025/ ├── fr/ │ └── internationalisation-jbake.adoc └── en/ └── jbake-internationalization.adoc</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_इस_दृष्टिकोण_के_फ़ायदे">इस दृष्टिकोण के फ़ायदे</h3> <div class="paragraph"> <p>इस संरचना के कई फायदे हैं:</p> </div> <div class="ulist"> <ul> <li> <p><strong>स्पष्ट पृथक्करण</strong>: प्रत्येक भाषा का अपना स्थान है</p> </li> <li> <p><strong>लचीला नामकरण</strong>: फ़ाइलें भाषा के अनुसार विभिन्न नाम रख सकती हैं</p> </li> <li> <p><strong>स्केलेबिलिटी</strong>: एक नई भाषा जोड़ना आसान है</p> </li> <li> <p><strong>प्राकृतिक संगठन</strong>: JBake के समयबद्ध तर्क का पालन करता है</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_लेखों_के_मेटाडेटा">लेखों के मेटाडेटा</h3> <div class="paragraph"> <p>हर लेख में अनुवादों के बीच संबंध स्थापित करने के लिए मेटाडेटा शामिल होना चाहिए। यहाँ एक उदाहरण दिया गया है :</p> </div> <div class="paragraph"> <p><strong>फ़्रेंच संस्करण</strong>(<code>2025/fr/internationalisation-jbake.adoc</code>) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Internationalisation d'un site statique JBake :jbake-type: post :jbake-status: published :jbake-date: 2025-10-20 :jbake-lang: fr :jbake-article-id: jbake-i18n-thymeleaf :jbake-tags: jbake, thymeleaf, i18n :jbake-description: Guide pour mettre en place l'i18n avec JBake</code></pre> </div> </div> <div class="paragraph"> <p><strong>अंग्रेज़ी संस्करण</strong>(<code>2025/en/jbake-internationalization.adoc</code>) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Internationalizing a JBake Static Site :jbake-type: post :jbake-status: published :jbake-date: 2025-10-20 :jbake-lang: en :jbake-article-id: jbake-i18n-thymeleaf :jbake-tags: jbake, thymeleaf, i18n :jbake-description: Guide to implement i18n with JBake</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> एट्रिब्यूट`:jbake-article-id:`यह महत्वपूर्ण है: यह एक ही लेख के विभिन्न अनुवादों को जोड़ने की अनुमति देता है। </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_यूआरएल_कॉन्फ़िगरेशन">यूआरएल कॉन्फ़िगरेशन</h3> <div class="paragraph"> <p>में`jbake.properties`, URL पैटर्न को भाषा शामिल करने के लिए कॉन्फ़िगर करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># Pattern d'URL avec langue post.permalink.pattern=:lang/blog/:year/:name.html # Langue par défaut site.default.lang=fr</code></pre> </div> </div> <div class="paragraph"> <p>इससे इस प्रकार के URL उत्पन्न होंगे :</p> </div> <div class="ulist"> <ul> <li> <p><code>/fr/blog/2025/internationalisation-jbake.html</code></p> </li> <li> <p><code>/en/blog/2025/jbake-internationalization.html</code></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_बहुभाषी_प्रदर्शन_के_लिए_टेम्प्लेट">बहुभाषी प्रदर्शन के लिए टेम्प्लेट</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_भाषा_चयनकर्ता_के_साथ_लेख_टेम्पलेट">भाषा चयनकर्ता के साथ लेख टेम्पलेट</h3> <div class="paragraph"> <p>एक टेम्प्लेट बनाएँ`post.html`disponible अनुवाद दिखाता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="${content.title}">Article</title> </head> <body> <article> <header> <h1 th:text="${content.title}">Titre</h1> <div class="article-meta"> <time th:text="${#dates.format(content.date, 'dd MMMM yyyy')}" th:attr="datetime=${#dates.format(content.date, 'yyyy-MM-dd')}"> Date </time> <!-- Sélecteur de traductions --> <div class="translations" th:if="${content['article-id']}"> <span th:text="#{article.also.available}">Aussi disponible en :</span> <ul class="language-list"> <li th:each="post : ${published_posts}" th:if="${post['article-id'] == content['article-id'] and post.lang != content.lang}"> <a th:href="${post.uri}" th:text="${post.lang.toUpperCase()}"> LANG </a> </li> </ul> </div> </div> </header> <div class="content" th:utext="${content.body}"> Contenu de l'article </div> <footer class="article-footer"> <div class="tags" th:if="${content.tags}"> <span th:text="#{article.tags}">Étiquettes :</span> <span th:each="tag : ${content.tags}"> <a th:href="@{/tags/{tag}.html(tag=${tag})}" th:text="${tag}">tag</a> </span> </div> </footer> </article> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_भाषा_द्वारा_फ़िल्टर_किया_गया_सूचकांक">भाषा द्वारा फ़िल्टर किया गया सूचकांक</h3> <div class="paragraph"> <p>प्रत्येक भाषा के लिए इंडेक्स टेम्प्लेट बनाएँ :</p> </div> <div class="paragraph"> <p><strong>index.html</strong>(फ़्रेंच सूचक) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">Mon Blog</title> </head> <body> <main> <h1 th:text="#{nav.blog}">Blog</h1> <div class="articles-list"> <article th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"> <h2> <a th:href="${post.uri}" th:text="${post.title}">Titre</a> </h2> <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"> Date </time> <p th:text="${post.description}">Description</p> <a th:href="${post.uri}" th:text="#{article.readmore}"> Lire la suite </a> </article> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><strong>index_en.html</strong>(अंग्रेज़ी अनुक्रमणिका) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">My Blog</title> </head> <body> <main> <h1 th:text="#{nav.blog}">Blog</h1> <div class="articles-list"> <article th:each="post : ${published_posts}" th:if="${post.lang == 'en'}"> <h2> <a th:href="${post.uri}" th:text="${post.title}">Title</a> </h2> <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"> Date </time> <p th:text="${post.description}">Description</p> <a th:href="${post.uri}" th:text="#{article.readmore}"> Read more </a> </article> </div> </main> </body> </html></code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_भाषाओं_के_बीच_नेविगेशन">भाषाओं के बीच नेविगेशन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_वैश्विक_भाषा_चयनकर्ता">वैश्विक भाषा चयनकर्ता</h3> </div> <div class="sect2"> <h3 id="_फ़्लो_चार्ट_उपयोगकर्ता_पढ़ना">फ़्लो चार्ट - उपयोगकर्ता पढ़ना</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-35c457cfbd1b9be0156f6bbbfb2925d1.png" alt="Diagram" width="494" height="761"> </div> </div> <div class="paragraph"> <p>अपने मुख्य टेम्पलेट में एक भाषा चयनकर्ता जोड़ें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><nav class="language-switcher"> <a href="/index.html" th:classappend="${content.lang == 'fr'} ? 'active'" title="Français"> 🇫🇷 FR </a> <a href="/en/index.html" th:classappend="${content.lang == 'en'} ? 'active'" title="English"> 🇬🇧 EN </a> </nav></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_सेलेक्टर_के_लिए_css_शैली">सेलेक्टर के लिए CSS शैली</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.language-switcher { display: flex; gap: 1rem; padding: 0.5rem; background: #f5f5f5; border-radius: 4px; } .language-switcher a { padding: 0.5rem 1rem; text-decoration: none; color: #333; border-radius: 4px; transition: background 0.2s; } .language-switcher a:hover { background: #e0e0e0; } .language-switcher a.active { background: #007bff; color: white; } .translations { margin: 1rem 0; padding: 1rem; background: #f8f9fa; border-left: 4px solid #007bff; } .language-list { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .language-list li::after { content: "•"; margin-left: 0.5rem; } .language-list li:last-child::after { content: ""; }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_भाषा_अनुसार_rss_फ़ीड">भाषा अनुसार RSS फ़ीड</h2> <div class="sectionbody"> <div class="paragraph"> <p>अलग-अलग भाषाओं के लिए अलग-अलग RSS फ़ीड प्राप्त करने के लिए, अलग टेम्प्लेट बनाएँ :</p> </div> <div class="paragraph"> <p><strong>feed.xml</strong>(फ़्रेंच फ़्लक्स) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:th="http://www.thymeleaf.org"> <channel> <title th:text="#{site.title}">Mon Blog</title> <link th:text="${config.site_host}">http://example.com</link> <description th:text="#{site.description}">Description</description> <language>fr</language> <item th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"> <title th:text="${post.title}">Titre</title> <link th:text="${config.site_host + post.uri}">Lien</link> <pubDate th:text="${#dates.format(post.date, 'EEE, dd MMM yyyy HH:mm:ss Z')}"> Date </pubDate> <description th:text="${post.description}">Description</description> </item> </channel> </rss></code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छी_प्रथाएँ_और_टिप्स">अच्छी प्रथाएँ और टिप्स</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_1_cohérence_des_identifiants_darticle">1. Cohérence des identifiants d’article</h3> <div class="paragraph"> <p>यह सुनिश्चित करें कि`:jbake-article-id:`सभी लेखों के अनुवादों के लिए समान है। एक सुसंगत प्रारूप का उपयोग करें :</p> </div> <div class="ulist"> <ul> <li> <p>Préférez les identifiants en anglais pour universalité</p> </li> <li> <p>Utilisez des tirets pour séparer les mots</p> </li> <li> <p>विशेष अक्षरों से बचें</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_2_संगत_तारीखें">2. संगत तारीखें</h3> <div class="paragraph"> <p>एक लेख के सभी अनुवादों की प्रकाशन तिथि समान होनी चाहिए`:jbake-date:`)। यह सॉर्टिंग और कालानुक्रमिक प्रदर्शन को आसान बनाता है।</p> </div> </div> <div class="sect2"> <h3 id="_3_बहुभाषी_टैग">3. बहुभाषी टैग</h3> <div class="paragraph"> <p>टैग्स के लिए, आपके पास दो विकल्प हैं:</p> </div> <div class="paragraph"> <p><strong>विकल्प 1: अंग्रेजी में सार्वभौमिक टैग</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">:jbake-tags: java, spring-boot, microservices</code></pre> </div> </div> <div class="paragraph"> <p><strong>Option 2 : Tags traduits avec mapping</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc"># Version française :jbake-tags: java, spring-boot, microservices # Version anglaise :jbake-tags: java, spring-boot, microservices</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_अनुवाद_न_किए_गए_लेखों_का_प्रबंधन">4. अनुवाद न किए गए लेखों का प्रबंधन</h3> <div class="paragraph"> <p>सभी लेखों को अनुवाद करना अनिवार्य नहीं है। यदि कोई लेख केवल एक भाषा में उपलब्ध है, तो वह अन्य भाषा की सूची में बस नहीं दिखेगा।</p> </div> </div> <div class="sect2"> <h3 id="_5_बहुभाषी_साइटमैप">5. बहुभाषी साइटमैप</h3> <div class="paragraph"> <p>सभी भाषाओं को शामिल करने वाला साइटमैप बनाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <url th:each="post : ${published_posts}"> <loc th:text="${config.site_host + post.uri}">URL</loc> <lastmod th:text="${#dates.format(post.date, 'yyyy-MM-dd')}">Date</lastmod> <!-- Liens alternatifs pour les traductions --> <xhtml:link th:each="translation : ${published_posts}" th:if="${translation['article-id'] == post['article-id'] and translation.lang != post.lang}" rel="alternate" th:attr="hreflang=${translation.lang},href=${config.site_host + translation.uri}" /> </url> </urlset></code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake साइट का Thymeleaf के साथ अंतर्राष्ट्रीयकरण एक मजबूत और बनाए रखने योग्य दृष्टिकोण है। टेम्पलेटिंग से i18n (संदेश फ़ाइलों के माध्यम से) और सामग्री से i18n (फ़ोल्डर संगठन के माध्यम से) को अलग करके, आप एक लचीली प्रणाली प्राप्त करते हैं जो आसानी से विकसित हो सकती है।</p> </div> <div class="paragraph"> <p>मुख्य बिंदु जिन्हें याद रखना चाहिए :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Thymeleaf संदेश फाइलें</strong>उपयोगकर्ता इंटरफ़ेस के लिए</p> </li> <li> <p><strong>फ़ोल्डर द्वारा संगठन</strong>(वर्ष/भाषा) लेखों के लिए</p> </li> <li> <p><strong>आर्टिकल पहचानकर्ता</strong>अनुवाद लिंक करने के लिए</p> </li> <li> <p><strong>समर्पित टेम्प्लेट्स</strong>प्रत्येक भाषा के लिए</p> </li> <li> <p><strong>स्पष्ट URLs</strong>भाषा कोड सहित</p> </li> </ul> </div> <div class="sect2"> <h3 id="_डिप्लॉयमेंट_आरेख">डिप्लॉयमेंट आरेख</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 14) ] @startuml node "विकास मशीन" { artifact "स्रोत" { folder "सामग्री/" folder "templates/" folder "एसेट्स/" } component "JBake CLI" as jbake Sources --> jbake : jbake -b } node "बिल्ड सर्वर ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml node "विकास मशीन" { artifact "स्रोत" { folder "सामग्री/" folder "templates/" folder "एसेट्स/" } component "JBake CLI" as jbake Sources --> jbake : jbake -b } node "बिल्ड सर्वर (CI/CD)" { component "GitHub Actions या GitLab CI" as ci jbake --> ci : push } cloud "CDN / होस्टिंग" { node "स्थिर वेब सर्वर" { artifact "जेनेरेटेड साइट" { folder "/fr/ब्लॉग/" folder "/en/blog/" folder "/assets/" } } } ci --> "जेनेरेटेड साइट" : déploiement actor "पाठक" as users users --> "स्थिर वेब सर्वर" : HTTPS @enduml</pre> </div> </div> <div class="paragraph"> <p>यह आर्किटेक्चर आपको केवल दो भाषाओं के साथ आसानी से शुरू करने और बिना बड़े रीफ़ैक्टरिंग के अन्य भाषाएँ जोड़ने की अनुमति देता है। सब कुछ पूरी तरह स्थैतिक और उच्च प्रदर्शन वाला बना रहता है, JBake के दर्शन के अनुरूप।</p> </div> <div class="paragraph"> <p>बहुभाषी विकास की शुभकामनाएँ! 🌍</p> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0094_tor_browser_install_post.html Sun, 5 Oct 2025 00:00:00 +0000 blog/2025/0094_tor_browser_install_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_टॉर_और_इसके_हस्ताक्षर_का_डाउनलोड">टॉर और इसके हस्ताक्षर का डाउनलोड</a></li> <li><a href="#_हस्ताक्षर_का_क्रिप्टोग्राफिक_सत्यापन">हस्ताक्षर का क्रिप्टोग्राफिक सत्यापन</a> <ul class="sectlevel2"> <li><a href="#_1_टोर_प्रोजेक्ट_की_सार्वजनिक_कुंजी_आयात_करें">1. टोर प्रोजेक्ट की सार्वजनिक कुंजी आयात करें</a></li> <li><a href="#_2_हस्ताक्षर_की_जाँच_करें">2. हस्ताक्षर की जाँच करें</a></li> <li><a href="#_व्यावहारिक_मामला_वैध_हस्ताक्षर_लेकिन_प्रमाणित_नहीं_की_गई_कुंजी">व्यावहारिक मामला: वैध हस्ताक्षर लेकिन प्रमाणित नहीं की गई कुंजी</a></li> </ul> </li> <li><a href="#_साइन_क्यों_सत्यापित_करें">साइन क्यों सत्यापित करें ?</a></li> <li><a href="#_टॉर_ब्राउज़र_की_एक्सट्रैक्शन_और_लॉन्च">टॉर ब्राउज़र की एक्सट्रैक्शन और लॉन्च</a></li> <li><a href="#_उबुन्टू_डेस्कटॉप_एकीकरण">उबुन्टू डेस्कटॉप एकीकरण</a></li> <li><a href="#_tor_के_साथ_शैक्षिक_संसाधनों_का_अन्वेषण_करें">Tor के साथ शैक्षिक संसाधनों का अन्वेषण करें</a></li> <li><a href="#_tor_browser_का_अपडेट">Tor Browser का अपडेट</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_संदर्भ">संदर्भ</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक ऐसी दुनिया में जहाँ डिजिटल गोपनीयता दिन-ब-दिन खतरे में पड़ रही है, <strong>Tor Browser</strong> एक आवश्यक उपकरण बना रहता है जो अपने अनामिकता और जानकारी की स्वतंत्रता को संरक्षित रखने में मदद करता है। हालाँकि, यह महत्वपूर्ण है कि कभी भी डाउनलोड किया गया सॉफ़्टवेयर न चलाएँ बिना<strong>उसकी प्रामाणिकता सत्यापित की गई</strong>. यह लेख एक पूरी विधि प्रस्तुत करता है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>डाउनलोड <strong>Tor Browser</strong> और उसका हस्ताक्षर`.asc`</p> </li> <li> <p>डाउनलोड की गई फ़ाइल की वैधता की जाँच करें</p> </li> <li> <p>Ubuntu पर <strong>Tor Browser</strong> इंस्टॉल करें और लॉन्च करें</p> </li> <li> <p>इसे डेस्कटॉप मेनús में दैनिक उपयोग के लिए जोड़ें</p> </li> <li> <p>टोर के माध्यम से शैक्षिक संसाधनों और नैतिक OSINT का अन्वेषण करें</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_टॉर_और_इसके_हस्ताक्षर_का_डाउनलोड">टॉर और इसके हस्ताक्षर का डाउनलोड</h2> <div class="sectionbody"> <div class="paragraph"> <p>टोर ब्राउज़र के लिए एक समर्पित फ़ोल्डर बनाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">mkdir -p ~/workspace/tipiak/tor cd ~/workspace/tipiak/tor</code></pre> </div> </div> <div class="paragraph"> <p>फिर टॉर ब्राउज़र का आर्काइव और उसकी हस्ताक्षर डाउनलोड करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">wget https://www.torproject.org/dist/torbrowser/14.5.7/tor-browser-linux-x86_64-14.5.7.tar.xz wget https://www.torproject.org/dist/torbrowser/14.5.7/tor-browser-linux-x86_64-14.5.7.tar.xz.asc</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_हस्ताक्षर_का_क्रिप्टोग्राफिक_सत्यापन">हस्ताक्षर का क्रिप्टोग्राफिक सत्यापन</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह चरण है<strong>आवश्यक</strong>यह सुनिश्चित करने के लिए कि डाउनलोड किया गया फ़ाइल वास्तव में <strong>Tor Project</strong> से आता है और इसे संशोधित नहीं किया गया है।</p> </div> <div class="sect2"> <h3 id="_1_टोर_प्रोजेक्ट_की_सार्वजनिक_कुंजी_आयात_करें">1. टोर प्रोजेक्ट की सार्वजनिक कुंजी आयात करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">gpg --auto-key-locate nodefault,wkd --locate-keys torbrowser@torproject.org</code></pre> </div> </div> <div class="paragraph"> <p>सुनिश्चित करें कि कुंजी सही तरह से आयात की गई है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">gpg --list-keys torbrowser@torproject.org</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_2_हस्ताक्षर_की_जाँच_करें">2. हस्ताक्षर की जाँच करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">gpg --verify tor-browser-linux-x86_64-14.5.7.tar.xz.asc tor-browser-linux-x86_64-14.5.7.tar.xz</code></pre> </div> </div> <div class="paragraph"> <p>यदि सब कुछ सही है, तो निम्नलिखित संदेश प्रदर्शित होगा :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">gpg: Good signature from "Tor Browser Developers (signing key)"</code></pre> </div> </div> <div class="paragraph"> <p>अप्रमाणित कुंजी चेतावनी के मामले में, इसका मतलब सिर्फ यह है कि आपने अभी तक टोर प्रोजेक्ट की विश्वसनीय कुंजी पर हस्ताक्षर नहीं किए हैं, लेकिन हस्ताक्षर अभी भी वैध है।</p> </div> </div> <div class="sect2"> <h3 id="_व्यावहारिक_मामला_वैध_हस्ताक्षर_लेकिन_प्रमाणित_नहीं_की_गई_कुंजी">व्यावहारिक मामला: वैध हस्ताक्षर लेकिन प्रमाणित नहीं की गई कुंजी</h3> <div class="paragraph"> <p>पुष्टि के दौरान इस तरह का संदेश देखना सामान्य है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">gpg --verify tor-browser-linux-x86_64-14.5.7.tar.xz.asc tor-browser-linux-x86_64-14.5.7.tar.xz gpg: Signature faite le mar. 16 sept. 2025 14:26:26 CEST gpg: avec la clef RSA CAAE408AEBE2288E96FC5D5E157432CF78A65729 gpg: Bonne signature de « Tor Browser Developers (signing key) <torbrowser@torproject.org> » [inconnu] gpg: Attention : cette clef n'est pas certifiée avec une signature de confiance. gpg: Rien n'indique que la signature appartient à son propriétaire. Empreinte de clef principale : EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290 Empreinte de la sous-clef : CAAE 408A EBE2 288E 96FC 5D5E 1574 32CF 78A6 5729</code></pre> </div> </div> <div class="paragraph"> <p>यह संदेश इंगित करता है कि हस्ताक्षर तकनीकी रूप से "सही" है (फ़ाइल को बदल नहीं गया है), लेकिन आपका GPG सिस्टम स्वयं कुंजी पर <strong>विश्वास को प्रमाणित</strong> नहीं कर सकता। इस संदेह को दूर करने के लिए, प्राथमिक कुंजी के फिंगरप्रिंट की तुलना करना आवश्यक है (<code>EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290</code>) उस आधिकारिक टोर प्रोजेक्ट साइट पर प्रकाशित के साथ</p> </div> <div class="paragraph"> <p>आधिकारिक साइट के अनुसार, अपेक्षित पदचिह्न है :`EF6E286DDA85EA2A4BA7DE684E2C6E8793298290`.</p> </div> <div class="paragraph"> <p>क्योंकि प्रदर्शित छाप द्वारा`gpg`यह आधिकारिक साइट की उस जैसी <strong>पूरी तरह</strong> मेल खाता है, आप सुनिश्चित हो सकते हैं कि कुंजी वैध है और फ़ाइल सुरक्षित है। "अस증माणित कुंजी" की चेतावनी तब आपकी स्थानीय GPG कॉन्फ़िगरेशन के बारे में जानकारी होती है, और हस्ताक्षर की वैधता या फ़ाइल की प्रामाणिकता के बारे में नहीं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_साइन_क्यों_सत्यापित_करें">साइन क्यों सत्यापित करें ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>GPG हस्ताक्षरों की जांच डिजिटल सुरक्षा का एक मूलभूत कार्य है। यह करने की अनुमति देती है:</p> </div> <div class="ulist"> <ul> <li> <p>गारंटी देना<strong>प्रामाणिकता</strong>डाउनलोड किया गया सॉफ़्टवेयर का</p> </li> <li> <p>एक दुर्भावनापूर्ण अभिनेता द्वारा समझौता किए गए फ़ाइल की स्थापना को रोकें</p> </li> <li> <p>भाग लेना<strong>डिजिटल संप्रभुता</strong>व्यक्तिगत</p> </li> <li> <p>एक जिम्मेदार और नैतिक डिजिटल संस्कृति को बढ़ावा दें</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="usecase-tor-verification.svg" alt="usecase tor verification" width="450" height="292"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_टॉर_ब्राउज़र_की_एक्सट्रैक्शन_और_लॉन्च">टॉर ब्राउज़र की एक्सट्रैक्शन और लॉन्च</h2> <div class="sectionbody"> <div class="paragraph"> <p>डाउनलोड की गई आर्काइव को निकालें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">tar -xvf tor-browser-linux-x86_64-14.5.7.tar.xz cd tor-browser</code></pre> </div> </div> <div class="paragraph"> <p>फिर ब्राउज़र लॉन्च करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./start-tor-browser.desktop</code></pre> </div> </div> <div class="paragraph"> <p>पहले लॉन्च के दौरान, एक कॉन्फ़िगरेशन विंडो खुल जाएगी ताकि टोर नेटवर्क से कनेक्शन स्थापित किया जा सके।</p> </div> </div> </div> <div class="sect1"> <h2 id="_उबुन्टू_डेस्कटॉप_एकीकरण">उबुन्टू डेस्कटॉप एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>एप्लिकेशन मेन्यू में <strong>Tor Browser</strong> जोड़ने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./start-tor-browser.desktop --register-app</code></pre> </div> </div> <div class="paragraph"> <p>आप फिर से कर सकते हैं:</p> </div> <div class="ulist"> <ul> <li> <p>एप्लिकेशन मेनू से <strong>Tor Browser</strong> लॉन्च करें</p> </li> <li> <p>इसे डॉक के पसंदीदा में जोड़ें</p> </li> <li> <p>यदि आप चाहें तो कीबोर्ड शॉर्टकट बनाएँ</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="activity-tor-installation.svg" alt="activity tor installation" width="457" height="470"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tor_के_साथ_शैक्षिक_संसाधनों_का_अन्वेषण_करें">Tor के साथ शैक्षिक संसाधनों का अन्वेषण करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tor केवल एक अनामिकता उपकरण नहीं है। यह शैक्षिक और अनुसंधान संसाधनों तक पहुँच का एक प्रवेश द्वार है, विशेष रूप से निम्नलिखित क्षेत्रों में :</p> </div> <div class="ulist"> <ul> <li> <p><strong>ओसिंट (सार्वजनिक स्रोत खुफिया)</strong></p> </li> <li> <p><a href="https://inteltechniques.com">https://inteltechniques.com</a></p> </li> <li> <p><a href="https://osintframework.com">https://osintframework.com</a></p> </li> <li> <p><strong>शैक्षिक साझाकरण और ओपन सोर्स</strong></p> </li> <li> <p><a href="https://archive.org">https://archive.org</a>(Tor के माध्यम से पहुँच के लिए अधिक गोपनीयता)</p> </li> <li> <p><a href="https://github.com/">https://github.com/</a>(Tor के माध्यम से सुलभ)</p> </li> <li> <p><a href="https://librarygenesis.pro">https://librarygenesis.pro</a>(मुक्त वैज्ञानिक साहित्य तक पहुँच)</p> </li> <li> <p><strong>ज्ञान का संप्रेषण और मानव की समझ डिजिटल समाज में</strong></p> </li> <li> <p>डिजिटल संस्कृति, अभिव्यक्ति की स्वतंत्रता और ज्ञान तक पहुँच के संसाधन</p> </li> <li> <p>तकनीकों की साइबर सुरक्षा और नैतिकता पर मुक्त दस्तावेज़</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_tor_browser_का_अपडेट">Tor Browser का अपडेट</h2> <div class="sectionbody"> <div class="paragraph"> <p>अधतम सुरक्षा सुनिश्चित करने के लिए, <strong>Tor Browser</strong> को अद्यतित रखना अत्यंत महत्वपूर्ण है। ब्राउज़र में एक स्वचालित अपडेट तंत्र बनाया गया है जिसे कमांड लाइन से ट्रिगर किया जा सकता है।</p> </div> <div class="paragraph"> <p>Tor Browser स्थापना निर्देशिका से, बस स्टार्टअप स्क्रिप्ट को पुनः आरंभ करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">cd ~/workspace/tipiak/tor/tor-browser ./start-tor-browser.desktop</code></pre> </div> </div> <div class="paragraph"> <p>लॉन्च पर, <strong>Tor Browser</strong> स्वचालित रूप से जांचेगा कि क्या एक नया संस्करण उपलब्ध है। यदि ऐसा है, तो यह इसे डाउनलोड और स्थापित करेगा आपके लिए।</p> </div> <div class="paragraph"> <p>यह साधारण विधि सुनिश्चित करती है कि आपके पास हमेशा नवीनतम सुरक्षा पैच और सबसे हालिया सुधार हों, जो सुरक्षित ब्राउज़िंग के लिए आवश्यक है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>अपने डाउनलोड की जाँच करना एक आवश्यक आदत है, जो सुरक्षित डिजिटल वातावरण में प्रगति करने वाले हर व्यक्ति के लिए महत्वपूर्ण है। टॉर को सत्यापित तरीके से स्थापित करना, यह<strong>अपनी डिजिटल अखंडता की रक्षा करें</strong>, <strong>मुक्त सॉफ़्टवेयर में विश्वास बनाए रखें</strong>, et <strong>अपनी सूचना स्वायत्तता को मज़बूत करना</strong>.</p> </div> <div class="paragraph"> <p>डिजिटल सुरक्षा एक जागरूकता का कार्य है, न कि पागलपन का।</p> </div> <div class="imageblock"> <div class="content"> <img src="summary-diagram.svg" alt="summary diagram" width="1594" height="5396"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ">संदर्भ</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>टोर प्रोजेक्ट की आधिकारिक साइट :https://www.torproject.org/download/[<a href="https://www.torproject.org/download/" class="bare">https://www.torproject.org/download/</a>]</p> </li> <li> <p>हस्ताक्षर सत्यापन दस्तावेज़ :https://support.torproject.org/tbb/how-to-verify-signature/[<a href="https://support.torproject.org/tbb/how-to-verify-signature/" class="bare">https://support.torproject.org/tbb/how-to-verify-signature/</a>]</p> </li> <li> <p>Ubuntu दस्तावेज़ :https://ubuntu.com[<a href="https://ubuntu.com" class="bare">https://ubuntu.com</a>]</p> </li> <li> <p>शैक्षिक संग्रह :https://archive.org/details/opensource[<a href="https://archive.org/details/opensource" class="bare">https://archive.org/details/opensource</a>]</p> </li> </ul> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>यह लेख <strong>सुरक्षा और डिजिटल जागरूकता</strong> श्रृंखला का हिस्सा है। जिम्मेदार और शैक्षिक प्रथाओं को बढ़ावा देने हेतु स्वतंत्र टूल्स के चारों ओर.</p> </div> </td> </tr> </table> </div> </div> </div> https://cheroliv.com/blog/2025/0093_gradle_plugin_toml_composite_build_post.html Sat, 27 Sep 2025 00:00:00 +0000 blog/2025/0093_gradle_plugin_toml_composite_build_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">लक्षित दर्शक : Gradle डेवलपर्स जो मल्टी-बिल्ड प्रोजेक्ट्स में निर्भरता प्रबंधन का सामना कर रहे हैं।</div> <p>हमारे प्लग़िन बनाने की खोज में`site-baker`हमने एक स्वच्छ और केंद्रीकृत कोडベース को बनाए रखने का प्रयास किया है। आधुनिक ग्रैडल इकोसिस्टम में एक सर्वोत्तम प्रथा इसका उपयोग करना है।<strong>संस्करणों की सूची</strong>(<code>libs.versions.toml</code>) निर्भरताओं को प्रबंधित करने के लिए। लेकिन जब आपका प्रोजेक्ट अधिक जटिल हो जाता है, जैसे एक**<mark>#</mark> ग्रेडल इंटीग्रेशन JBake को JBake ग्रेडल प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर ग्रेडल बिल्ड में एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }**कहाँ एक स्वतंत्र बिल्ड (हमारा प्लगिन) को दूसरे में शामिल किया जाना चाहिए ? यह वही जगह थी जहाँ हमारी यात्रा ने अप्रत्याशित मोड़ ले लिया। हम चाहते थे कि हमारा प्लगइन`site-baker`, जो स्वयं एक Gradle प्रोजेक्ट है, हमारे मुख्य प्रोजेक्ट के समान संस्करण कैटलॉग का उपयोग करता है। यह लेख, हमारी श्रृंखला का पाँचवाँ, बताता है कि हमने इस चुनौती को कैसे हल किया। == 1. वर्ज़न कैटलॉग (`libs.versions.toml`) : एक अनुस्मरण फ़ाइल`gradle/libs.versions.toml`यह Gradle की एक सुविधा है जो आपके परियोजना के निर्भरताओं के संस्करण और निर्देशांक को केंद्रीकृत करने की अनुमति देती है। इसकी सामान्य रूप से चार खंडों में संरचना होती है: * `[versions]`: परिभाषित करता है संस्करण संख्याओं के लिए एलियास (उदाहरण:`kotlin = "1.9.20"`). * `[libraries]`: परिभाषित करता है अलियास पूर्ण निर्भरताओं के लिए, ऊपर परिभाषित संस्करणों का उपयोग करके (ex:`kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib", version.ref = "kotlin" }`). * `[bundles]`कई लाइब्रेरीज़ को एक ही एलियास के तहत समूहित करता (उदाहरण:`jackson = ["jackson-core", "jackson-databind"]`) * `[plugins]`: ग्रैडल प्लगिन के लिए एलियास परिभाषित करता है। एक बार परिभाषित करने पर, Gradle स्वचालित रूप से टाइप किए हुए एक्सेसर उत्पन्न करता है, जिससे आपका`build.gradle.kts` beaucoup plus lisible : [source,kotlin] ---- dependencies { // Au lieu de : implementation("org.jetbrains.kotlin:kotlin-stdlib:1.9.20") implementation(libs.kotlin.stdlib) } ---- .संस्करण कैटलॉग का डेटा प्रवाह [plantuml, toml-flow, svg] ---- @startuml !theme plain file "gradle/libs.versions.toml" as Toml node "ग्रैडल" as G file "build.gradle.kts" as BuildScript Toml --> G : "द्वारा पढ़ा जाता है" G --> BuildScript : "एक्सेसर `libs` जेनरेट करें" BuildScript -> G : "libs` का उपयोग करके निर्भरताओं की घोषणा करें" @enduml ---- == 2. समस्या: एक संयुक्त बिल्ड और दो अलग‑अलग दुनियाएँ हमारी परियोजना संरचना एक**JBake को Gradle बिल्ड में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे कॉल करके एकीकृत किया जा सकता है: ---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }**. मुख्य परियोजना (`thymeleaf.cheroliv.com`) inclut le projet du plugin (`site-baker`) के माध्यम से आदेश`includeBuild("site-baker")`फ़ाइल में`settings.gradle.kts`. .build composite की संरचना [plantuml, composite-build, svg] ---- @startuml !theme plain package "मुख्य परियोजना" { file "settings.gradle.kts" as MainSettings folder "gradle" { file "libs.versions.toml" as MainToml } } package "### ग्रैडल एकीकरण JBake को JBake ग्रैडल प्लगइन का उपयोग करके या JBake CLI को सीधे कॉल करके ग्रैडल बिल्ड में एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" { file "settings.gradle.kts" as PluginSettings file "build.gradle.kts" as PluginBuild } MainSettings -> PluginSettings : `includeBuild("स्थान-बेकर")` PluginBuild ..> MainToml : **Voulait accéder à...** note right on link: ...mais ne pouvait pas ! @enduml ---- समस्या यह है कि, डिफ़ॉल्ट रूप से, एक शामिल बिल्ड एक है**अलग दुनिया**. इसकी अपनी कॉन्फ़िगरेशन, इसका अपना जीवन चक्र, और यह फ़ाइल को नहीं देखता`libs.versions.toml`मुख्य बिल्ड का. हमारा`plugin/build.gradle.kts`उपयोग करने की कोशिश कर रहा था`libs.plugins.kotlin.jvm`, लेकिन वस्तु`libs`सही TOML फ़ाइल से उत्पन्न नहीं किया गया था, जिससे बिल्ड त्रुटियाँ हुईं। == 3. समाधान : निर्भरता समाधान साझा करना कई शोधों के बाद, यह समाधान Gradle की एक ऐसी विशेषता निकली जो इस मामले के लिए विशेष रूप से डिज़ाइन की गई थी :`dependencyResolutionManagement`. फ़ाइल में`settings.gradle.kts` du **समावेशी निर्माण**import sys def main(): data = sys.stdin.read() sys.stdout.write(data) if __name__ == '__main__': main()`site-baker/settings.gradle.kts`), हम Gradle को बता सकते हैं कि संस्करण कैटलॉग कहाँ से उपयोग करने के लिए प्राप्त किया जा सकता है। यहाँ वह कॉन्फ़िगरेशन है जिसे हमने जोड़ा है`site-baker/settings.gradle.kts`: [source,kotlin] ---- // site-baker/settings.gradle.kts dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) repositories { gradlePluginPortal() mavenCentral() } versionCatalogs { create("libs") { from(files("../gradle/libs.versions.toml")) } } } rootProject.name = "site-baker" include("plugin") ---- महत्वपूर्ण भाग का विश्लेषण करें: [source,kotlin] ---- versionCatalogs { create("libs") { // Crée un catalogue nommé 'libs' from(files("../gradle/libs.versions.toml")) // En utilisant ce fichier } } ---- * `create("libs")`: हम संस्करणों का एक कैटलॉग घोषित करते हैं जिसे लियास के माध्यम से पहुँचा जा सकेगा`libs`. * `from(files("../gradle/libs.versions.toml"))`: यह जादू है। हम Gradle को बताते हैं कि इस कैटलॉग का स्रोत TOML फ़ाइल निर्देशिका में स्थित है।`gradle` du **मातृ परियोजना**(No output)`../`) इस कॉन्फ़िगरेशन के साथ, बिल्ड`site-baker`अब उसे पता है कि उसे मुख्य प्रोजेक्ट के संस्करण कैटलॉग का उपयोग करना होगा। वस्तु`libs`सही ढंग से उत्पन्न किया गया है, और निर्भरताएँ अपेक्षित रूप से समाधान कर ली गई हैं। == 4. निष्कर्ष : अच्छी तरह से प्रबंधित संयुक्त निर्माणों की शक्ति यह अनुभव सीखों से भरपूर रहा। संस्करण कैटलॉग रखरखाव के लिए एक शानदार उपकरण है, लेकिन कंपोज़िट बिल्ड परिदृश्यों में उसका व्यवहार हमेशा सहज नहीं होता। की याद रखनी है कि एक समावेशी बिल्ड एक स्वतंत्र बिल्ड ही रहता है। संस्करण कैटलॉग जैसी कॉन्फ़िगरेशन साझा करने के लिए, Gradle द्वारा प्रदान किए गए स्पष्ट तंत्र का उपयोग करना आवश्यक है, जैसे ब्लॉक।`dependencyResolutionManagement`में`settings.gradle.kts`. इस समस्या को हल करके, हमने न केवल अपने build को साफ़ किया, बल्कि हमने अपने प्रोजेक्ट की स्थिरता को भी मजबूत किया है, यह सुनिश्चित करके कि प्लगइन और मुख्य प्रोजेक्ट एक ही स्रोत की सच्चाई साझा करते हैं अपने dependencies के लिए। अगले आर्टिकल में, हम अब अधिक जटिल कार्य जोड़कर अपने प्लगइन को समृद्ध करना जारी रखेंगे, क्योंकि अब हमारी निर्भरता प्रबंधन मजबूत और केंद्रीकृत है।</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0092_gradle_configuration_cache_post.html Fri, 26 Sep 2025 00:00:00 +0000 blog/2025/0092_gradle_configuration_cache_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_लक्षण_भूतिया_बिल्ड्स">लक्षण : भूतिया बिल्ड्स</a></li> <li><a href="#_जांच_कॉन्फ़िगरेशन_कैश_क्या_है">जांच: कॉन्फ़िगरेशन कैश क्या है?</a></li> <li><a href="#_समस्या_का_कारण_एक_अनुपालन_न_करने_वाला_प्लगइन">समस्या का कारण: एक अनुपालन न करने वाला प्लगइन</a></li> <li><a href="#_अस्थायी_समाधान_कैश_को_निष्क्रिय_करें">अस्थायी समाधान : कैश को निष्क्रिय करें</a></li> <li><a href="#_वास्तविक_समाधान_प्लगिन_को_संगत_बनाना">वास्तविक समाधान: प्लगिन को संगत बनाना</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">lक्ष्यित दर्शक : वे Gradle डेवलपर्स जो पहले से ही 'जादुई' या अप्रत्याशित बिल्ड व्यवहार का सामना कर चुके हैं।</div> <p>हमारे प्लगइन बनाने की यात्रा में`site-baker`, हमने एक कड़े TDD दृष्टिकोण का पालन किया। हर सुविधा का परीक्षण किया गया, सत्यापित किया गया, और हम विश्वास के साथ आगे बढ़ रहे थे। और फिर, एक दिन, अप्रत्याशित घटना हुई। बिल्ड्स अनियमित रूप से व्यवहार करने लगे। प्लगइन के लॉजिक या कॉन्फ़िगरेशन फ़ाइलों में किए गए संशोधनों को नजरअंदाज किया जा रहा प्रतीत होता था, और हमारे कार्यात्मक परीक्षण, जो पहले विश्वसनीय थे, स्पष्ट कारण बिना विफल हो रहे थे।</p> </div> <div class="paragraph"> <p>इस तरह की समस्या अविश्वसनीय रूप से निराशाजनक हो सकती है। यह उपकरण की विश्वसनीयता और हमारे कोड की वैधता पर सवाल उठाता है। गहन डिबगिंग सत्र के बाद, दोषी पहचान लिया गया है: वह<strong>Gradle की कॉन्फ़िगरेशन कैश</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_लक्षण_भूतिया_बिल्ड्स">लक्षण : भूतिया बिल्ड्स</h2> <div class="sectionbody"> <div class="paragraph"> <p>समस्या कई तरीकों से प्रकट हो रही थी :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>मैं एक कार्य में एक अक्षर श्रृंखला संशोधित कर रहा था`println`, लेकिन पुरानी स्ट्रिंग चलने के दौरान प्रदर्शित होती रही।</p> </li> <li> <p>मैं अपनी फाइल में एक मान बदल रहा था`managed-jbake-context.yml`, लेकिन प्लगिन ऐसा व्यवहार कर रहा था जैसे फ़ाइल में कोई संशोधन नहीं किया गया था।</p> </li> <li> <p>कार्यात्मक परीक्षण, जो तत्काल परीक्षण परियोजनाएँ बनाते हैं, विफल हो रहे थे क्योंकि प्लगइन प्रतीत होता था कि ताज़ा बनाई गई कॉन्फ़िगरेशन फ़ाइलों का पता नहीं लगा पा रहा है।</p> </li> </ol> </div> <div class="paragraph"> <p>सब कुछ ऐसा लग रहा था जैसे Gradle हमारे बिल्ड की एक "फ़ेंटम संस्करण" को चला रहा हो, हमारे सबसे हालिया बदलावों को अनदेखा करते हुए।</p> </div> </div> </div> <div class="sect1"> <h2 id="_जांच_कॉन्फ़िगरेशन_कैश_क्या_है">जांच: कॉन्फ़िगरेशन कैश क्या है?</h2> <div class="sectionbody"> <div class="paragraph"> <p>कन्फ़िगरेशन कैश Gradle की एक आधुनिक और बहुत शक्तिशाली विशेषता है, जो नए संस्करणों में डिफ़ॉल्ट रूप से सक्रिय है। इसका उद्देश्य बिल्ड को तेज़ करना है।</p> </div> <div class="olist arabic"> <div class="title">सिद्धांत सरल है :</div> <ol class="arabic"> <li> <p>पहली बार चलाने पर, Gradle चरण को निष्पादित करता है<strong>Configuration</strong> (lecture des <code>build.gradle.kts</code>, कार्यों की रचना, निर्भरताओं का समाधान) और एक कार्य ग्राफ़ बनाता है.</p> </li> <li> <p>इस चरण के अंत में, Gradle<strong>इस टास्क ग्राफ को सिरीयलाइज़ करें</strong>और वह इसे कैश में रखता/रखती है।</p> </li> <li> <p>अनुसरण करने वाले निष्पादनों में, यदि कुछ भी नहीं बदलता (बिल्ड स्क्रिप्ट्स,<code>gradle.properties</code>, etc.), Gradle<strong>यह पूरी तरह से कॉन्फ़िगरेशन चरण को छोड़ देता है</strong>और कैश किए गए कार्य ग्राफ़ को पुनः उपयोग करता है।</p> </li> </ol> </div> <div class="paragraph"> <p>बड़े प्रोजेक्ट्स पर समय की बचत अद्भुत है। हालाँकि, इस प्रदर्शन की एक कीमत है: यह प्लगइन्स के लिखे जाने के तरीके पर सख्त नियम लागू करती है।</p> </div> <div class="imageblock"> <div class="content"> <img src="config-cache-lifecycle.svg" alt="config cache lifecycle" width="661" height="709"> </div> <div class="title">Figure 1. कॉन्फ़िगरेशन कैश का जीवन चक्र</div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_का_कारण_एक_अनुपालन_न_करने_वाला_प्लगइन">समस्या का कारण: एक अनुपालन न करने वाला प्लगइन</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारा प्लगइन`site-baker`वह अनजाने में कॉन्फ़िगरेशन कैश के कई नियमों का उल्लंघन कर रहा था। एक टास्क ग्राफ़ को सीरियलाइज़ करने योग्य बनाने के लिए, टास्क में कॉम्प्लेक्स ऑब्जेक्ट्स जैसे ऑब्जेक्ट के संदर्भ नहीं होने चाहिए।`Project`या फ़ाइलों को निष्पादन चरण के दौरान मनमाने ढंग से पढ़ें।</p> </div> <div class="paragraph"> <p>हमारी मुख्य त्रुटि यह थी कि हमने YAML फ़ाइल की सामग्री को कार्य के निष्पादन तर्क के भीतर सीधे पढ़ा, अपने एक्सटेंशन में संग्रहीत पथ संदर्भ का उपयोग करके। यह दृष्टिकोण कैश के साथ असंगत है क्योंकि Gradle नहीं जान सकता कि फ़ाइल की सामग्री बदल गई है यदि इस पढ़ाई को मॉडल नहीं बनाया गया है एक के रूप में.<strong>कार्य प्रविष्टि</strong>(Task Input).</p> </div> </div> </div> <div class="sect1"> <h2 id="_अस्थायी_समाधान_कैश_को_निष्क्रिय_करें">अस्थायी समाधान : कैश को निष्क्रिय करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमें अनब्लॉक करने और पूर्वानुमेय बिल्ड व्यवहार को फिर से प्राप्त करने के लिए, सबसे तेज़ समाधान कॉन्फ़िगरेशन कैश को अक्षम करना रहा। बस फ़ाइल में निम्नलिखित लाइन जोड़ें।<code>gradle.properties`प्लगिन का उपयोग करने वाला प्रोजेक्ट (या हमारे मामले में, परीक्षण प्रोजेक्ट)`site-baker</code>).</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties"># site-baker/gradle.properties org.gradle.configuration-cache=false</code></pre> </div> </div> <div class="paragraph"> <p>तुरंत, बिल्ड्स ने अपना सामान्य व्यवहार फिर से हासिल कर लिया। प्रत्येक निष्पादन ने कॉन्फ़िगरेशन चरण को फिर से शुरू किया और हमारे परिवर्तन ध्यान में रखे गए।</p> </div> <div class="paragraph"> <p>हालाँकि, यह एक टर्नअराउंड समाधान है, एक स्थायी समाधान नहीं। यह प्रदर्शन को त्याग देती है और हमारे प्लगइन की मूल समस्या को हल नहीं करती।</p> </div> </div> </div> <div class="sect1"> <h2 id="_वास्तविक_समाधान_प्लगिन_को_संगत_बनाना">वास्तविक समाधान: प्लगिन को संगत बनाना</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक प्लगइन आधुनिक Gradle इकोसिस्टम का एक अच्छा नागरिक बनने के लिए, इसे कॉन्फ़िगरेशन कैश के साथ संगत होना चाहिए। इसका मतलब है कि हमें अपने कार्यों की ओर डेटा प्रवाह के तरीके को पुनर्विचार करने की आवश्यकता है।</p> </div> <div class="paragraph"> <p>कुंजी का उपयोग करने की<strong>प्रोवाइडर एपीआई</strong>Gradle के लिए. सीधे मान पास करने के बजाय (जैसे एक`String` ou un <code>File</code>) हमारे कार्यों के लिए, हमें बिताना चाहिए के`Property<T>`या कुछ`Provider<T>`.</p> </div> <div class="paragraph"> <p>।यहाँ रिफैक्टरिंग योजना :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>कार्य प्रविष्टियों की घोषणा करें:</strong>YAML फ़ाइल को पार्स करने वाला कार्य इसे इनपुट के रूप में घोषित करना चाहिए। इसके लिए हम एनोटेशन का उपयोग करते हैं।<code>@InputFile</code>.</p> </li> </ol> </div> <div class="paragraph"> <p>[source,kotlin] ---- @get:InputFile अमूर्त मान configFile: RegularFileProperty ----</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0091_jackson_yaml_tdd_post.html Thu, 25 Sep 2025 00:00:00 +0000 blog/2025/0091_jackson_yaml_tdd_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_1_संदर्भ_हमारा_प्लग़िन_site_baker">1. संदर्भ : हमारा प्लग़िन `site-baker</a></li> <li><a href="#_2_कॉन्फ़िगरेशन_मॉडलिंग_कोटलिन_में">2. कॉन्फ़िगरेशन मॉडलिंग कोटलिन में</a></li> <li><a href="#_3_jackson_का_build_gradle_kts_में_एकीकरण">3. Jackson का <code>build.gradle.kts</code> में एकीकरण</a></li> <li><a href="#_4_tdd_पद्धति_yaml_पार्सिंग_का_परीक्षण">4. TDD पद्धति: YAML पार्सिंग का परीक्षण</a> <ul class="sectlevel2"> <li><a href="#_4_1_test_unitaire_mapper_le_yaml_en_objet_kotlin">4.1. Test Unitaire : Mapper le YAML en Objet Kotlin</a></li> <li><a href="#_4_2_कार्यात्मक_परीक्षण_कॉन्फ़िगरेशन_फ़ाइल_की_पढ़ी_को_मान्य_करें">4.2. कार्यात्मक परीक्षण : कॉन्फ़िगरेशन फ़ाइल की पढ़ी को मान्य करें</a></li> </ul> </li> <li><a href="#_5_पार्सिंग_फ़्लो_का_दृश्यीकरण">5. पार्सिंग फ़्लो का दृश्यीकरण</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">लक्ष्य दर्शक: मध्यवर्ती Gradle डेवलपर जो जटिल कॉन्फ़िगरेशन प्रबंधित करना चाहते हैं।</div> <p>Gradle प्लगिन डेवलपमेंट में, जटिल कॉन्फ़िगरेशन का प्रबंधन एक सामान्य कार्य है। DSL को हज़ारों प्रॉपर्टीज़ से ओवरलोड करने के बजाय, अक्सर साफ और मेंटेनेबल रखने के लिए कॉन्फ़िगरेशन को YAML जैसे बाहरी फ़ाइल में परिभाषित करना बेहतर होता है। यह लेख आपको Jackson की शक्तिशाली लाइब्रेरी को इंटीग्रेट करने के माध्यम से मार्गदर्शन करता है, जिससे YAML फ़ाइलों को Kotlin ऑब्जेक्ट्स में पार्स किया जा सके, एक कड़ी TDD पद्धति अपनाकर हमारे प्लगिन की रोबस्टनेस सुनिश्चित की जा सके।<code>site-baker</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_संदर्भ_हमारा_प्लग़िन_site_baker">1. संदर्भ : हमारा प्लग़िन `site-baker</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारा प्लगइन`site-baker`इसे एक स्थिर साइट की पीढ़ी और तैनाती को स्वचालित करने के लिए डिज़ाइन किया गया है। इसे YAML कॉन्फ़िगरेशन फ़ाइल पढ़ने की आवश्यकता है (<code>managed-jbake-context.yml</code>) स्रोतों के पथ, तैनाती के गंतव्य, और Git पहचानकर्ता जैसी जानकारी प्राप्त करने के लिए</p> </div> <div class="paragraph"> <p>हम जो YAML कॉन्फ़िगरेशन पार्स करना चाहते हैं, वह इस तरह दिखता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">bake: srcPath: "./site/jbake" destDirPath: "bake" cname: "cheroliv.com" pushPage: from: "bake" to: "cvs" repo: name: "trainings" repository: "https://github.com/pages-content/pages-content.github.io.git" credentials: username: "USERNAME" password: "SECRET_TOKEN" branch: "main" message: "cheroliv.com" # ... autres configurations (pushMaquette, supabase, etc.)</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_कॉन्फ़िगरेशन_मॉडलिंग_कोटलिन_में">2. कॉन्फ़िगरेशन मॉडलिंग कोटलिन में</h2> <div class="sectionbody"> <div class="paragraph"> <p>पार्स करने से पहले, हमें कोटलिन में अपने डेटा की संरचना परिभाषित करनी होगी। जैक्सन इन क्लासेस का उपयोग करके YAML सामग्री को स्वचालित रूप से मैप करेगा।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/src/main/kotlin/com/cheroliv/site/baker/data/SiteConfiguration.kt package com.cheroliv.site.baker.data import com.fasterxml.jackson.databind.ObjectMapper import com.fasterxml.jackson.dataformat.yaml.YAMLFactory import com.fasterxml.jackson.module.kotlin.readValue import com.fasterxml.jackson.module.kotlin.registerKotlinModule fun parseSiteConfiguration(yaml: String): SiteConfiguration { val mapper = ObjectMapper(YAMLFactory()).registerKotlinModule() return mapper.readValue(yaml) } data class GitPushConfiguration( val from: String = "", val to: String = "", val repo: RepositoryConfiguration = RepositoryConfiguration(), val branch: String = "", val message: String = "", ) data class RepositoryConfiguration( val name: String = "", val repository: String = "", val credentials: RepositoryCredentials = RepositoryCredentials(), ) { companion object { const val ORIGIN = "origin" const val CNAME = "CNAME" const val REMOTE = "remote" } } data class RepositoryCredentials(val username: String = "", val password: String = "") data class SiteConfiguration( val bake: BakeConfiguration = BakeConfiguration(), val pushPage: GitPushConfiguration = GitPushConfiguration(), val pushMaquette: GitPushConfiguration = GitPushConfiguration(), val pushSource: GitPushConfiguration? = null, val pushTemplate: GitPushConfiguration? = null, val supabase: SupabaseContactFormConfig? = null ) data class BakeConfiguration( val srcPath: String = "", val destDirPath: String = "", val cname: String? = null, ) // ... (autres data classes pour Supabase, si nécessaire)</code></pre> </div> </div> <div class="paragraph"> <p>फ़ंक्शन`parseSiteConfiguration`यह हमारे डीज़ीसीरियलाइज़ेशन के लिए प्रवेश बिंदु है। यह उपयोग करती है`ObjectMapper`Jackson का, कॉन्फ़िगर किया गया`YAMLFactory`YAML प्रारूप के लिए और`registerKotlinModule()`कोटलिन की विशिष्टताओं के समर्थन के लिए (जैसे प्रॉपर्टी के डिफ़ॉल्ट मान).</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_jackson_का_build_gradle_kts_में_एकीकरण">3. Jackson का <code>build.gradle.kts</code> में एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>जैकसन का उपयोग करने के लिए, हमें आवश्यक निर्भरताएँ जोड़नी हैं में`build.gradle.kts`हमारे मॉड्यूल का`plugin`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/build.gradle.kts dependencies { // Jackson for YAML parsing implementation("com.fasterxml.jackson.module:jackson-module-kotlin:2.18.3") implementation("com.fasterxml.jackson.dataformat:jackson-dataformat-yaml:2.18.3") // ... autres dépendances }</code></pre> </div> </div> <div class="paragraph"> <p>हम उपयोग करते हैं`jackson-module-kotlin`कोटलिन समर्थन के लिए और`jackson-dataformat-yaml`YAML प्रारूप के प्रबंधन के लिए</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_tdd_पद्धति_yaml_पार्सिंग_का_परीक्षण">4. TDD पद्धति: YAML पार्सिंग का परीक्षण</h2> <div class="sectionbody"> <div class="paragraph"> <p>अब, हम अपने पार्सिंग लॉजिक को सत्यापित करने के लिए TDD लागू करते हैं।</p> </div> <div class="sect2"> <h3 id="_4_1_test_unitaire_mapper_le_yaml_en_objet_kotlin">4.1. Test Unitaire : Mapper le YAML en Objet Kotlin</h3> <div class="paragraph"> <p>हम एक यूनिट टेस्ट से शुरू करते हैं`SiteBakerPluginTest.kt`फ़ंक्शन की जाँच करने के लिए`parseSiteConfiguration`यह YAML स्ट्रिंग को सही ढंग से ऑब्जेक्ट में बदल सकता है`SiteConfiguration`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/src/test/kotlin/com/cheroliv/site/baker/SiteBakerPluginTest.kt @Test fun `can map configuration text to SiteConfiguration object`() { val yamlString = "../../managed-jbake-context.yml" .run(::File) .readText() .trimIndent() val config: SiteConfiguration = parseSiteConfiguration(yamlString) assertEquals("cheroliv.com", config.bake.cname) assertEquals("main", config.pushPage.branch) assertEquals("https://github.com/pages-content/pages-content.github.io.git", config.pushPage.repo.repository) }</code></pre> </div> </div> <div class="paragraph"> <p>यह परीक्षण फ़ाइल की सामग्री पढ़ता है`managed-jbake-context.yml`(जो परीक्षण वैध होने के लिए मौजूद होना चाहिए) और वस्तु पर दावे करता है`SiteConfiguration`परिणामी. यह सत्यापित करता है कि YAML की मुख्य मान सही ढंग से मैप की गई हैं।</p> </div> </div> <div class="sect2"> <h3 id="_4_2_कार्यात्मक_परीक्षण_कॉन्फ़िगरेशन_फ़ाइल_की_पढ़ी_को_मान्य_करें">4.2. कार्यात्मक परीक्षण : कॉन्फ़िगरेशन फ़ाइल की पढ़ी को मान्य करें</h3> <div class="paragraph"> <p>यह सुनिश्चित करने के लिए कि प्लगइन अपने DSL के माध्यम से कॉन्फ़िगरेशन फ़ाइल पढ़ सके और पार्सिंग एक वास्तविक Gradle वातावरण में काम करे, हम एक फ़ंक्शनल टेस्ट जोड़ते हैं`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="paragraph"> <p>यह परीक्षण महत्वपूर्ण है क्योंकि यह वास्तविक प्रोजेक्ट में प्लगिन के निष्पादन का अनुकरण करता है। इसे होना चाहिए<strong>हवा-रोधी</strong>, यानी उसे स्वयं फ़ाइल बनानी चाहिए`managed-jbake-context.yml`नियंत्रित सामग्री के साथ, परीक्षण की पुनरुत्पादन क्षमता और अलगाव सुनिश्चित करने के लिए।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/src/functionalTest/kotlin/com/cheroliv/site/baker/SiteBakerPluginFunctionalTest.kt @Test fun `config file contains good data`(){ val configContent = configFile.readText(UTF_8) // Vérifications comme dans vos commentaires assertTrue(configContent.contains("bake")) assertTrue(configContent.contains("pushPage")) assertTrue(configContent.contains("repository")) }</code></pre> </div> </div> <div class="paragraph"> <p>यह कार्यात्मक परीक्षण सत्यापित करता है कि परीक्षण के अस्थायी निर्देशिका में कॉपी किया गया कॉन्फ़िगरेशन फ़ाइल अपेक्षित डेटा रखता है। यद्यपि यह परीक्षण सीधे YAML को Kotlin ऑब्जेक्ट में नहीं पार्स करता, यह फ़ाइल की उपस्थिति और उसकी सामग्री को मान्य करता है, जो प्लगइन द्वारा पार्सिंग के लिए एक आवश्यक प्रारंभिक चरण है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_पार्सिंग_फ़्लो_का_दृश्यीकरण">5. पार्सिंग फ़्लो का दृश्यीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>आरेख निम्नलिखित YAML कॉन्फ़िगरेशन के पार्सिंग के दौरान डेटा प्रवाह और इंटरैक्शन को दर्शाता है:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-815a0db24710a6a35c19b7f59edc954b.png" alt="Diagram" width="1534" height="472"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>TDD दृष्टिकोण का पालन करते हुए, हमने Gradle प्लगिन के भीतर Kotlin ऑब्जेक्ट्स में YAML कॉन्फ़िगरेशन फ़ाइलों को पार्स करने के लिए जैक्सन लाइब्रेरी को सफलतापूर्वक इंटीग्रेट किया। इस विधि ने हमें करने की अनुमति दी :</p> </div> <div class="ulist"> <ul> <li> <p><strong>स्पष्ट रूप से मॉडलिंग</strong>हमारी कॉन्फ़िगरेशन Kotlin डेटा क्लासेस के साथ।</p> </li> <li> <p><strong>पार्सिंग लॉजिक को सत्यापित करें</strong>लक्षित यूनिट परीक्षणों के साथ।</p> </li> <li> <p><strong>समेकन सुनिश्चित करें</strong>वास्तविक Gradle वातावरण में हर्मेटिक कार्यात्मक परीक्षणों के माध्यम से।</p> </li> </ul> </div> <div class="paragraph"> <p>यह ठोस आधार हमें हमारे प्लगइन को ऐसी सुविधाओं के साथ विस्तार करने के लिए भरोसा दिलाता है जो इस कॉन्फ़िगरेशन पर आधारित हैं, साथ ही कोड की बनाए रखने योग्यता और मजबूती को सुनिश्चित करते हुए। अब YAML पार्सिंग हमारे प्लगइन की एक विश्वसनीय और परीक्षण की गई सुविधा है।<code>site-baker</code>.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0090_TDD_gradle_plugin_post.html Wed, 24 Sep 2025 00:00:00 +0000 blog/2025/0090_TDD_gradle_plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परियोजना_प्रारम्भ">परियोजना प्रारम्भ</a></li> <li><a href="#_2_हमारा_पहला_tdd_चक्र_एक_कार्य_रिकॉर्ड_करें">2. हमारा पहला TDD चक्र : एक कार्य रिकॉर्ड करें</a> <ul class="sectlevel2"> <li><a href="#_2_1_पहला_परीक्षण_जो_परीक्षण_असफल_होता_है">2.1. पहला परीक्षण (जो परीक्षण असफल होता है)</a></li> <li><a href="#_2_2_अगला_कोड_परीक्षा_पास_करना">2.2. अगला कोड (परीक्षा पास करना)</a></li> </ul> </li> <li><a href="#_3_दूसरा_चक्र_tdd_एक_डीएसएल_एक्सटेंशन_जोड़ें">3. दूसरा चक्र TDD: एक डीएसएल एक्सटेंशन जोड़ें</a> <ul class="sectlevel2"> <li><a href="#_3_1_पहला_परीक्षण">3.1. पहला परीक्षण</a></li> <li><a href="#_3_2_कोड_फिर">3.2. कोड फिर</a></li> </ul> </li> <li><a href="#_4_कार्यात्मक_परीक्षण_एकीकरण_को_सत्यापित_करें">4. कार्यात्मक परीक्षण: एकीकरण को सत्यापित करें</a> <ul class="sectlevel2"> <li><a href="#_4_1_एकीकरण_परीक्षण_एक_नियंत्रित_वातावरण_बनाएँ">4.1. एकीकरण परीक्षण: एक नियंत्रित वातावरण बनाएँ</a></li> <li><a href="#_4_2_लॉजिक_को_अंतिम_रूप_दें">4.2. लॉजिक को अंतिम रूप दें</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>इस लेख में, हम जानेंगे कि Gradle प्लगिन के लिए एक मजबूत विकास आधार कैसे स्थापित करें, परीक्षण-निर्देशित विकास (TDD - Test-Driven Development) दृष्टिकोण का उपयोग करके। यह विधि सुनिश्चित करती है कि हमारा कोड मजबूत, रखरखाव योग्य और आवश्यकताओं को सटीक रूप से शुरू से ही पूरा करता है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_परियोजना_प्रारम्भ">परियोजना प्रारम्भ</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle बहुत सहजता से एक नए प्लगइन के निर्माण को सुविधाजनक बनाता है, कमांड के माध्यम से।<code>gradle init</code>. कोटलिन के साथ एक 'Gradle Plugin' बनाने का चयन करके, हमें एक उपयोग के लिए तैयार प्रोजेक्ट संरचना मिलती है, जिसमें दो महत्वपूर्ण प्रकार के परीक्षण शामिल हैं:</p> </div> <div class="ulist"> <ul> <li> <p><strong>इकाई परीक्षण :</strong> Situés dans <code>src/test</code>, वे हमारे प्लगिन के अलग‑अलग घटकों को सत्यापित करने की अनुमति देते हैं, जैसे किसी कार्य की आंतरिक तर्क या किसी एक्सटेंशन की कॉन्फ़िगरेशन। वे तेज़ हैं और इन्हें ग्रैडल की पूर्ण निष्पादन की आवश्यकता नहीं है।</p> </li> <li> <p><strong>कार्यात्मक परीक्षण :</strong>में स्थित`src/functionalTest`, वे उपयोग करते हैं`GradleRunner`पूरी Gradle बिल्ड चलाने के लिए एक अस्थायी परीक्षण प्रोजेक्ट में। यह हमें नियंत्रित वातावरण में प्लगिन के वास्तविक व्यवहार को सत्यापित करने की अनुमति देता है।</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_2_हमारा_पहला_tdd_चक्र_एक_कार्य_रिकॉर्ड_करें">2. हमारा पहला TDD चक्र : एक कार्य रिकॉर्ड करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारी पहली आवश्यकता सरल है: प्लगइन को एक नामित कार्य पंजीकृत करना होगा`printSiteConfig`.</p> </div> <div class="sect2"> <h3 id="_2_1_पहला_परीक्षण_जो_परीक्षण_असफल_होता_है">2.1. पहला परीक्षण (जो परीक्षण असफल होता है)</h3> <div class="paragraph"> <p>TDD के अनुसार, हम पहले एक परीक्षण लिखते हैं जो इस कार्य की मौजूदगी की जाँच करता है। में`SiteBakerPluginTest.kt`(हमारा यूनिट परीक्षण फ़ाइल), हम जोड़ते हैं:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `plugin registers task`() { // Créer un projet de test en mémoire val project = ProjectBuilder.builder().build() project.plugins.apply("com.cheroliv.site-baker") // Vérifier que la tâche a bien été enregistrée assertNotNull(project.tasks.findByName("printSiteConfig")) }</code></pre> </div> </div> <div class="paragraph"> <p>यह परीक्षण विफल होता है, क्योंकि हमने अभी तक अपने प्लगइन में कोई कोड नहीं लिखा है।</p> </div> </div> <div class="sect2"> <h3 id="_2_2_अगला_कोड_परीक्षा_पास_करना">2.2. अगला कोड (परीक्षा पास करना)</h3> <div class="paragraph"> <p>अब हम आवश्यक न्यूनतम कोड लिख रहे हैं में`SiteBakerPlugin.kt`ताकि परीक्षा पास हो:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class SiteBakerPlugin: Plugin<Project> { override fun apply(project: Project) { // Enregistrer une tâche simple project.tasks.register("printSiteConfig") { task -> // ... la logique de la tâche viendra plus tard } } }</code></pre> </div> </div> <div class="paragraph"> <p>हम परीक्षणों को फिर से चला रहे हैं, और वे पास हो रहे हैं. हमारी पहली सुविधा मान्य है.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_3_दूसरा_चक्र_tdd_एक_डीएसएल_एक्सटेंशन_जोड़ें">3. दूसरा चक्र TDD: एक डीएसएल एक्सटेंशन जोड़ें</h2> <div class="sectionbody"> <div class="paragraph"> <p>अगली आवश्यकता उपयोगकर्ताओं को उनके DSL ब्लॉक के माध्यम से हमारे प्लग़िन को कॉन्फ़िगर करने की अनुमति देना है`build.gradle.kts`. हम एक ब्लॉक चाहते हैं`site { …​ }`जहाँ आप एक कॉन्फ़िगरेशन पथ निर्दिष्ट कर सकते हैं।</p> </div> <div class="sect2"> <h3 id="_3_1_पहला_परीक्षण">3.1. पहला परीक्षण</h3> <div class="paragraph"> <p>हम एक परीक्षण जोड़ रहे हैं ताकि यह सत्यापित किया जा सके कि एक्सटेंशन`site`यह ठीक से दर्ज की गई है और हम इसे मान दे सकते हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `plugin registers extension`() { val project = ProjectBuilder.builder().build() project.plugins.apply("com.cheroliv.site-baker") // Récupérer l'extension et lui affecter une valeur project.extensions .findByType(SiteExtension::class.java)!! .configPath .set("config.yml") // Vérifier que la valeur a bien été prise en compte assertEquals( "config.yml", project.extensions.findByType(SiteExtension::class.java)?.configPath?.get() ) }</code></pre> </div> </div> <div class="paragraph"> <p>यह टेस्ट फेल हो जाता है क्योंकि न तो क्लास`SiteExtension`एक्सटेंशन का पंजीकरण भी मौजूद नहीं है।</p> </div> </div> <div class="sect2"> <h3 id="_3_2_कोड_फिर">3.2. कोड फिर</h3> <div class="paragraph"> <p>हम क्लास बनाते हैं`SiteBakerExtension.kt`और हम अपडेट करते हैं`SiteBakerPlugin.kt`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// SiteBakerExtension.kt open class SiteExtension @Inject constructor(objects: ObjectFactory) { val configPath: Property<String> = objects.property(String::class.java) } // SiteBakerPlugin.kt class SiteBakerPlugin: Plugin<Project> { override fun apply(project: Project) { // Enregistrer l'extension val extension = project.extensions.create("site", SiteExtension::class.java) project.tasks.register("printSiteConfig") { task -> task.doLast { // On utilisera l'extension plus tard } } } }</code></pre> </div> </div> <div class="paragraph"> <p>परीक्षण फिर से पास हो रहे हैं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_कार्यात्मक_परीक्षण_एकीकरण_को_सत्यापित_करें">4. कार्यात्मक परीक्षण: एकीकरण को सत्यापित करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>अब जब इकाइयाँ परीक्षण की गई हैं, हमें यह सुनिश्चित करने की आवश्यकता है कि सब कुछ एक वास्तविक बिल्ड में एक साथ काम करे। यह फ़ंक्शनल परीक्षण की भूमिका है`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="sect2"> <h3 id="_4_1_एकीकरण_परीक्षण_एक_नियंत्रित_वातावरण_बनाएँ">4.1. एकीकरण परीक्षण: एक नियंत्रित वातावरण बनाएँ</h3> <div class="paragraph"> <p>यह परीक्षण हमारा प्लगइन का उपयोग करके एक वास्तविक प्रोजेक्ट का अनुकरण करेगा। इसे विश्वसनीय होने के लिए, इसे<strong>वायुरोधी</strong>, यानी इसे मौजूदा फ़ाइलों पर निर्भर नहीं रहना चाहिए। इसे स्वयं सभी आवश्यक शर्तें बनानी चाहिए जो इसके निष्पादन के लिए आवश्यक हैं।</p> </div> <div class="paragraph"> <p>टेस्ट इसलिए:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>एक बनाना`build.gradle.kts`हमारा प्लगिन और इसका DSL का उपयोग करने वाला परीक्षण.</p> </li> <li> <p><strong>कॉन्फ़िगरेशन फ़ाइल बनाएँ</strong>(</p> </li> </ol> </div> <div class="paragraph"> <p>(Note: The output preserves the exact characters, including spaces and the parenthesis, as there is no translatable text.)<code>managed-jbake-context.yml</code>) जो प्लगिन को पढ़ना चाहिए। यह परीक्षण की मजबूती के लिए एक महत्वपूर्ण चरण है।</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>कार्य को निष्पादित करें`printSiteConfig`के माध्यम से`GradleRunner`.</p> </li> <li> <p>निर्माण आउटपुट सही है, यह सुनिश्चित करें।</p> </li> </ol> </div> <div class="paragraph"> <p>प्रत्येक निष्पादन में इस कॉन्फ़िगरेशन फ़ाइल को कॉपी करके या बनाकर, हम सुनिश्चित करते हैं कि परीक्षण है।<strong>पुनरावृत्ति योग्य</strong>और यह बाहरी स्थिति पर निर्भर नहीं करता है। यह हमारे परीक्षणों को फ़ाइल पढ़ने से संबंधित रिग्रेशन से सुरक्षित रखता है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `can run task with DSL`() { // 1. Créer un build.gradle.kts de test buildFile.writeText(""" plugins { id("com.cheroliv.site-baker") } site { configPath = "managed-jbake-context.yml" } """.trimIndent()) // 2. Créer le fichier de configuration pour un test contrôlé val configFile = File(projectDir, "managed-jbake-context.yml") configFile.writeText("site: { title: 'Mon Site de Test' }") // Contenu YAML simple // 3. Exécuter la build val runner = GradleRunner.create() runner.withPluginClasspath() runner.withArguments("printSiteConfig") runner.withProjectDir(projectDir) // Spécifier le répertoire du projet de test val result = runner.build() // 4. Vérifier la sortie assertTrue(result.output.contains("Site config path: managed-jbake-context.yml")) }</code></pre> </div> </div> <div class="paragraph"> <p>यह परीक्षा तब तक असफल रहेगी जब तक कि कार्य`printSiteConfig`यह एक्सटेंशन का मान वास्तव में उपयोग नहीं करेगा।</p> </div> </div> <div class="sect2"> <h3 id="_4_2_लॉजिक_को_अंतिम_रूप_दें">4.2. लॉजिक को अंतिम रूप दें</h3> <div class="paragraph"> <p>हम टास्क को अद्यतन कर रहे हैं में`SiteBakerPlugin.kt`इसे कॉन्फ़िगर किया गया मान प्रदर्शित करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.tasks.register("printSiteConfig") { task -> task.doLast { println("Site config path: ${extension.configPath.get()}") } }</code></pre> </div> </div> <div class="paragraph"> <p>सभी परीक्षण, इकाई और कार्यात्मक, अब पास हैं।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>TDD दृष्टिकोण का पालन करते हुए, हमने एक प्लगइन को चरणबद्ध और सुरक्षित तरीके से बनाया। प्रत्येक छोटी सुविधा को तुरंत एक परीक्षण द्वारा मान्य किया जाता है, तेज़ इकाई परीक्षणों से लेकर पूरी एकीकरण को मान्य करने वाले कार्यात्मक परीक्षणों तक।</p> </div> <div class="paragraph"> <p>अपने परीक्षणों को कार्यात्मक बनाने में सावधानी बरतते हुए<strong>हर्मेटिक</strong>— विशेषकर प्रोग्रामेटिक रूप से आवश्यक कॉन्फ़िगरेशन फ़ाइलों को बनाकर — हम एक अत्यंत मज़बूत सुरक्षा जाल बुन रहे हैं। यह सख़्ती हमें प्रभावी रूप से रिग्रेशन से बचाती है और हमें भविष्य में अधिक जटिल सुविधाएँ जोड़ने का भरोसा देता है, जैसे YAML कॉन्फ़िगरेशन फ़ाइल का पार्सिंग।</p> </div> <div class="paragraph"> <p>यह मजबूत परीक्षण आधार प्लगइन के रखरखाव और भविष्य के विकास के लिए सबसे मूल्यवान संपत्ति है।</p> </div> </div> </div> https://cheroliv.com/blog/2025/0089_creation_projet_plugin_gradle_post.html Tue, 23 Sep 2025 00:00:00 +0000 blog/2025/0089_creation_projet_plugin_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_चरण_1_परियोजना_सहायक_शुरू_करें">चरण 1: परियोजना सहायक शुरू करें</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">लक्षित दर्शक : शुरुआती से मध्यम स्तर के डेवलपर Gradle के साथ</div> <p>एक नया Gradle प्लगइन प्रोजेक्ट शुरू करने की प्रक्रिया डरावनी लग सकती है। सौभाग्य से, Gradle एक शक्तिशाली इंटरैक्टिव सहायक प्रदान करता है, कार्य`init`, जो एक पूर्ण, स्वच्छ और उपयोग के लिए तैयार प्रोजेक्ट संरचना उत्पन्न करता है। यह गाइड आपको दिखाएगा कि इस टूल का उपयोग करके एक स्वस्थ प्लगइन आधार कैसे बनाया जाए, इसकी संरचना समझाएगा और आपको दिखाएगा कि पहले बिल्ड कार्य कैसे चलाएँ जाएँ।</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_1_परियोजना_सहायक_शुरू_करें">चरण 1: परियोजना सहायक शुरू करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>कमांड`gradle init`यह प्रारम्भ बिंदु है। यह एक कमांड-लाइन असिस्टेंट शुरू करता है जो आपको परियोजना को कॉन्फ़िगर करने के लिए प्रश्नों की एक श्रृंखला पूछता है।</p> </div> <div class="paragraph"> <p>खाली फ़ोल्डर में अपना टर्मिनल खोलें और चलाएँ :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">gradle init</code></pre> </div> </div> <div class="paragraph"> <p>सहायक आपको मार्गदर्शन करेगा। यहाँ एक कोटलिन में लिखे गए Gradle प्लगिन के लिए किए जाने वाले विकल्प हैं :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>जनरेट करने के लिए परियोजना के प्रकार का चयन करें:</strong>चुनें`Gradle plugin`.</p> </li> <li> <p><strong>कार्यान्वयन भाषा चुनें:</strong>चुनें`Kotlin`।</p> </li> <li> <p><strong>बिल्ड स्क्रिप्ट DSL चुनें:</strong>चुनिए`Kotlin`.</p> </li> <li> <p><strong>परियोजना का नाम:</strong>अपने प्रोजेक्ट के लिए एक नाम दर्ज करें (उदाहरण:`site-baker`).</p> </li> <li> <p>**<mark>#</mark> ग्रैडल एकीकरण</p> </li> </ol> </div> <div class="paragraph"> <p>JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे कॉल करके Gradle बिल्ड में एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }**### ग्रेडल इंटीग्रेशन JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में इंटीग्रेट किया जा सकता है: ---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } ``` अपने प्लगिन के लिए एक विशिष्ट पहचानकर्ता दें (उदाहरण के लिए:`com.cheroliv.site-baker`). 1. **### gradle एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ```kotlin ---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } ---- प्लगिन वर्ग:**कार्यान्वयन कक्षा का नाम निर्दिष्ट करें (उदाहरण:`com.cheroliv.SiteBakerPlugin`). एक बार पूरा हो जाने के बाद, Gradle एक पूर्ण फ़ाइल पदानुक्रम उत्पन्न करता है। .प्रारंभीकरण प्रक्रिया का आरेख [plantuml, init-gradle, svg] ---- @startuml start :Lancer `gradle init`; :Choisir "Gradle plugin"; :Choisir "### Gradle इंटीग्रेशन JBake को Gradle बिल्ड्स में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" (langage); :Choisir "### Gradle इंटीग्रेशन JBake को Gradle बिल्ड्स में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" (DSL); :Saisir nom, ID, et classe; :Projet généré; stop @enduml ---- == चरण 2 : जनरेट की गई संरचना को समझना असिस्टेंट एक मल्टी‑मॉड्यूल प्रोजेक्ट संरचना बनाता है, मूल प्रोजेक्ट को प्लगिन के स्रोत कोड से अलग करते हुए। [source,text] ---- . ├── gradle/ │ └── wrapper/ │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── plugin/ │ ├── build.gradle.kts │ └── src/ │ ├── main/ │ │ └── kotlin/ │ │ └── com/cheroliv/SiteBakerPlugin.kt │ ├── test/ │ │ └── kotlin/ │ │ └── com/cheroliv/SiteBakerPluginTest.kt │ └── functionalTest/ │ └── kotlin/ │ └── com/cheroliv/SiteBakerPluginFunctionalTest.kt └── settings.gradle.kts ---- === मुख्य फ़ाइलें और फ़ोल्डर * `settings.gradle.kts`यह फ़ाइल रूट में बिल्ड में शामिल मॉड्यूल को परिभाषित करती है। यहाँ, यह उप-प्रोजेक्ट शामिल करता है।`plugin`. [source,kotlin] ---- rootProject.name = "site-baker include("plugin") ---- ---- ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0088_environnement_plugin_gradle_post.html Mon, 22 Sep 2025 00:00:00 +0000 blog/2025/0088_environnement_plugin_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_jdk_gradle_का_इंजन">JDK : Gradle का इंजन</a> <ul class="sectlevel2"> <li><a href="#_कौन_सा_संस्करण_चुनें">कौन सा संस्करण चुनें ?</a></li> <li><a href="#_sdkman_के_माध्यम_से_स्थापना_अनुशंसित">SDKMAN! के माध्यम से स्थापना (अनुशंसित)</a> <ul class="sectlevel3"> <li><a href="#_sdkman_स्थापित_करें">SDKMAN! स्थापित करें</a></li> <li><a href="#_jdk_का_एक_संस्करण_स्थापित_करें">JDK का एक संस्करण स्थापित करें</a></li> <li><a href="#_स्थापना_की_जाँच_करें">स्थापना की जाँच करें</a></li> </ul> </li> </ul> </li> <li><a href="#_2_ide_intellij_idea">2. IDE: IntelliJ IDEA</a></li> <li><a href="#_3_gradle_बिल्ड_टूल">3. Gradle : बिल्ड टूल</a> <ul class="sectlevel2"> <li><a href="#_sdkman_के_माध्यम_से_इंस्टॉलेशन">SDKMAN! के माध्यम से इंस्टॉलेशन</a> <ul class="sectlevel3"> <li><a href="#_gradle_इंस्टॉल_करें">Gradle इंस्टॉल करें</a></li> <li><a href="#_स्थापना_की_जाँच_करें_2">स्थापना की जाँच करें</a></li> </ul> </li> </ul> </li> <li><a href="#_4_jbake_स्थिर_साइट_जेनरेटर">4. JBake : स्थिर साइट जेनरेटर</a> <ul class="sectlevel2"> <li><a href="#_sdkman_के_माध्यम_से_स्थापना">SDKMAN! के माध्यम से स्थापना</a> <ul class="sectlevel3"> <li><a href="#_jbake_इंस्टॉल_करें">JBake इंस्टॉल करें</a></li> <li><a href="#_इंस्टॉलेशन_की_जाँच_करें"><strong>इंस्टॉलेशन की जाँच करें</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_5_gradle_wrapper_सर्वोत्तम_अभ्यास">5. Gradle Wrapper : सर्वोत्तम अभ्यास</a></li> <li><a href="#_6_docker_और_portainer_पुनउत्पादन_योग्य_बिल्ड_के_लिए_वैकल्पिक">6. Docker और Portainer : पुन:उत्पादन योग्य बिल्ड के लिए (वैकल्पिक)</a> <ul class="sectlevel2"> <li><a href="#_docker_इंजन_की_स्थापना">Docker इंजन की स्थापना</a> <ul class="sectlevel3"> <li><a href="#_ऑफ़िशियल_स्क्रिप्ट_के_माध्यम_से_docker_स्थापित_करें">ऑफ़िशियल स्क्रिप्ट के माध्यम से Docker स्थापित करें:</a></li> <li><a href="#_docker_को_sudo_के_बिना_प्रबंधित_करें_अनुशंसित"><strong>Docker को <code>sudo</code> के बिना प्रबंधित करें (अनुशंसित) :</strong></a></li> </ul> </li> <li><a href="#_portainer_gui_के_साथ_docker_प्रबंधित_करें">Portainer (GUI) के साथ Docker प्रबंधित करें</a> <ul class="sectlevel3"> <li><a href="#_पोर्टेनियर_के_डेटा_के_लिए_एक_वॉल्यूम_बनाएँ"><strong>पोर्टेनियर के डेटा के लिए एक वॉल्यूम बनाएँ :</strong></a></li> <li><a href="#_portainer_कंटेनर_लॉन्च_करें"><strong>Portainer कंटेनर लॉन्च करें :</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">लक्ष्य दर्शक: ऐसे डेवलपर्स जो Gradle प्लगइन बनाने की शुरुआत करना चाहते हैं।</div> <p>ग्रैडल प्लगइन्स को प्रभावी ढंग से विकसित करने के लिए, एक अच्छी तरह से कॉन्फ़िगर किया गया विकास पर्यावरण आवश्यक है। एक अच्छा सेटअप आपको समय बचाएगा, निराशा कम करेगा और आपके बिल्ड्स की संगति सुनिश्चित करेगा।</p> </div> <div class="olist arabic"> <div class="title">यह गाइड चार आवश्यक स्तंभों पर केन्द्रित है :</div> <ol class="arabic"> <li> <p>Le <strong>JDK</strong>(जावा डेवलपमेंट किट), क्योंकि Gradle और JBake JVM पर चलते हैं।</p> </li> <li> <p>Un <strong>IDE</strong>आधुनिक (IntelliJ IDEA) में कोटलिन और ग्रैडल के लिए अच्छा समर्थन है।</p> </li> <li> <p><strong>Gradle</strong>स्वयं, परियोजनाओं को प्रारंभ करने के लिए.</p> </li> <li> <p><strong>JBake</strong>, हमारी स्थिर साइट का इंजन।</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/gradle-env.svg" alt="gradle env" width="1637" height="5696"> </div> <div class="title">Figure 1. विकास पर्यावरण के घटक</div> </div> </div> </div> <div class="sect1"> <h2 id="_jdk_gradle_का_इंजन">JDK : Gradle का इंजन</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle एक अनुप्रयोग है जो Java Virtual Machine (JVM) पर चलता है। इसलिए, JDK की स्थापना एक अनिवार्य शर्त है।</p> </div> <div class="sect2"> <h3 id="_कौन_सा_संस्करण_चुनें">कौन सा संस्करण चुनें ?</h3> <div class="paragraph"> <p>अनुशंसा की जाती है कि जावा के LTS (Long-Term Support) संस्करण का उपयोग किया जाए। वर्तमान में,<strong>JDK 17</strong> ou <strong>JDK 21</strong>वे उत्कृष्ट विकल्प हैं।</p> </div> </div> <div class="sect2"> <h3 id="_sdkman_के_माध्यम_से_स्थापना_अनुशंसित">SDKMAN! के माध्यम से स्थापना (अनुशंसित)</h3> <div class="paragraph"> <p>SDKMAN! एक शानदार टूल है जो कई SDKs के संस्करणों को प्रबंधित करने के लिए उपयोग किया जाता है, जिसमें Java और Gradle शामिल हैं।</p> </div> <div class="sect3"> <h4 id="_sdkman_स्थापित_करें">SDKMAN! स्थापित करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">curl -s "https://get.sdkman.io" | bash source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_jdk_का_एक_संस्करण_स्थापित_करें">JDK का एक संस्करण स्थापित करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Pour lister les versions de Java disponibles sdk list java # Pour installer Java 17 (par exemple, la distribution Temurin) sdk install java 17.0.8-tem</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_स्थापना_की_जाँच_करें">स्थापना की जाँच करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">java -version</code></pre> </div> </div> <div class="paragraph"> <p>आपको स्थापित की गई संस्करण दिखना चाहिए।</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_ide_intellij_idea">2. IDE: IntelliJ IDEA</h2> <div class="sectionbody"> <div class="paragraph"> <p>ग्रैडल प्लगइन विकास के लिए कोटलिन DSL के साथ,<strong>IntelliJ IDEA</strong>यह पसंद का उपकरण है। इसका Gradle और Kotlin के साथ एकीकरण अद्वितीय है।</p> </div> <div class="ulist"> <ul> <li> <p><strong>सामुदायिक संस्करण :</strong>नि:शुल्क और शुरू करने के लिए पर्याप्त से अधिक.</p> </li> <li> <p><strong>अल्टीमेट संस्करण :</strong>भुगतान आधारित, यह वेब विकास और डेटाबेस के लिए उन्नत सुविधाएँ प्रदान करती है।</p> </li> </ul> </div> <div class="paragraph"> <p>JetBrains साइट से अपने लिए उपयुक्त संस्करण डाउनलोड करें : <a href="https://www.jetbrains.com/idea/download/" class="bare">https://www.jetbrains.com/idea/download/</a></p> </div> <div class="paragraph"> <p>IDE स्वचालित रूप से आपकी फ़ाइलों का पता लगाएगा`build.gradle.kts` et <code>settings.gradle.kts</code>, आपके लिए शक्तिशाली ऑटोकम्पलीशन, कोड नेविगेशन और एकीकृत डिबगिंग टूल प्रदान करता है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_gradle_बिल्ड_टूल">3. Gradle : बिल्ड टूल</h2> <div class="sectionbody"> <div class="paragraph"> <p>हालांकि प्रत्येक परियोजना अपने स्वयं के Gradle संस्करण का उपयोग Gradle Wrapper के माध्यम से करेगी, लेकिन नए परियोजनाओं को आरंभ करने जैसे कार्यों के लिए एक वैश्विक Gradle स्थापना रखना उपयोगी है (<code>gradle init</code>).</p> </div> <div class="sect2"> <h3 id="_sdkman_के_माध्यम_से_इंस्टॉलेशन">SDKMAN! के माध्यम से इंस्टॉलेशन</h3> <div class="paragraph"> <p>JDK की तरह ही, SDKMAN! Gradle की स्थापना को सरल बनाता है।</p> </div> <div class="sect3"> <h4 id="_gradle_इंस्टॉल_करें">Gradle इंस्टॉल करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sdk install gradle</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_स्थापना_की_जाँच_करें_2">स्थापना की जाँच करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">gradle -v</code></pre> </div> </div> <div class="paragraph"> <p>यह कमांड Gradle, Kotlin, Groovy और JDK के उपयोग किए गए संस्करण दिखाएगी।</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_jbake_स्थिर_साइट_जेनरेटर">4. JBake : स्थिर साइट जेनरेटर</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake वह उपकरण है जिसका हम अपने स्रोत फ़ाइलों (जैसे यह) को स्थिर वेबसाइट में परिवर्तित करने के लिए उपयोग करेंगे। स्थानीय इंस्टॉलेशन होना बदलावों का पूर्वावलोकन करने में उपयोगी होता है।</p> </div> <div class="sect2"> <h3 id="_sdkman_के_माध्यम_से_स्थापना">SDKMAN! के माध्यम से स्थापना</h3> <div class="paragraph"> <p>अन्य उपकरणों की तरह, SDKMAN! सबसे सरल विधि है।</p> </div> <div class="sect3"> <h4 id="_jbake_इंस्टॉल_करें">JBake इंस्टॉल करें</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sdk install jbake</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_इंस्टॉलेशन_की_जाँच_करें"><strong>इंस्टॉलेशन की जाँच करें</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">jbake -v</code></pre> </div> </div> <div class="paragraph"> <p>यह कमांड JBake संस्करण और उपयोग किए जा रहे Java वातावरण की जानकारी प्रदर्शित करेगा।</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_gradle_wrapper_सर्वोत्तम_अभ्यास">5. Gradle Wrapper : सर्वोत्तम अभ्यास</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक बार जब आपका प्रोजेक्ट बनाया जाता है (जिसे हम अगले लेख में देखेंगे), आपको वैश्विक कमांड का उपयोग नहीं करना चाहिए।<code>gradle</code>. इसके बजाय, आप इसका उपयोग करेंगे<strong>ग्रैडल रैपर</strong>(<code>./gradlew</code>), un script inclus dans votre projet.</p> </div> <div class="paragraph"> <p>क्यों ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>पुनरावृत्ति :</strong>Wrapper हर व्यक्ति जो प्रोजेक्ट पर काम कर रहा/रही है (आपके CI/CD सर्वर सहित) सटीक रूप से उपयोग करता है la<strong>Gradle का समान संस्करण</strong>, इस प्रकार विभिन्न पर्यावरणों के कारण होने वाली बिल्ड की त्रुटियों को समाप्त करते हुए।</p> </li> <li> <p><strong>सरलता:</strong>परियोजना में योगदान देने के लिए Gradle को मैन्युअली इंस्टॉल करने की आवश्यकता नहीं है।</p> </li> </ul> </div> <div class="paragraph"> <p>इसे बस रिपॉजिटरी क्लोन करके चलाएँ`./gradlew`.</p> </div> <div class="paragraph"> <p>एक सामान्य आदेश इस प्रकार दिखेगा :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Ne pas faire : gradle build # À faire : ./gradlew build</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_6_docker_और_portainer_पुनउत्पादन_योग्य_बिल्ड_के_लिए_वैकल्पिक">6. Docker और Portainer : पुन:उत्पादन योग्य बिल्ड के लिए (वैकल्पिक)</h2> <div class="sectionbody"> <div class="paragraph"> <p>यद्यपि प्लगिन लिखने के लिए सख्त रूप से आवश्यक नहीं हैं, Docker और Portainer आधुनिक DevOps उपकरण हैं जो पुनरुत्पादन योग्य बिल्ड्स बनाने और आपके वातावरण को प्रबंधित करने में अत्यधिक सहायक हैं।</p> </div> <div class="sect2"> <h3 id="_docker_इंजन_की_स्थापना">Docker इंजन की स्थापना</h3> <div class="paragraph"> <p>Docker आपको अपने एप्लिकेशन और उसकी निर्भरताओं को एक कंटेनर में पैकेज करने की अनुमति देता है.</p> </div> <div class="sect3"> <h4 id="_ऑफ़िशियल_स्क्रिप्ट_के_माध्यम_से_docker_स्थापित_करें">ऑफ़िशियल स्क्रिप्ट के माध्यम से Docker स्थापित करें:</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">curl -fsSL https://get.docker.com -o get-docker.sh sudo sh get-docker.sh</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_docker_को_sudo_के_बिना_प्रबंधित_करें_अनुशंसित"><strong>Docker को <code>sudo</code> के बिना प्रबंधित करें (अनुशंसित) :</strong></h4> <div class="paragraph"> <p>अपने उपयोगकर्ता को समूह में जोड़ें`docker`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo usod -aG docker $USER</code></pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> </td> </tr> </table> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">docker run hello-world</code></pre> </div> </div> </div> </div> <div class="sect2"> <h3 id="_portainer_gui_के_साथ_docker_प्रबंधित_करें">Portainer (GUI) के साथ Docker प्रबंधित करें</h3> <div class="paragraph"> <p>Portainer एक हल्का वेब इंटरफ़ेस है जो आपके Docker कंटेनरों को प्रबंधित करने के लिए उपयोग किया जाता है।</p> </div> <div class="sect3"> <h4 id="_पोर्टेनियर_के_डेटा_के_लिए_एक_वॉल्यूम_बनाएँ"><strong>पोर्टेनियर के डेटा के लिए एक वॉल्यूम बनाएँ :</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">docker volume create portainer_data</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_portainer_कंटेनर_लॉन्च_करें"><strong>Portainer कंटेनर लॉन्च करें :</strong></h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest</code></pre> </div> </div> <div class="paragraph"> <p>आप अब Portainer इंटरफ़ेस पर पहुँच सकते हैं`https://localhost:9443`.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>आपका वातावरण अब तैयार है ! आपके पास JDK है, सबसे उपयुक्त IDE, Gradle और JBake। Docker के जुड़ने से, आप भी कंटेनराइज़्ड और पुन: प्रस्तुत करने योग्य बिल्ड्स बनाने के लिए तैयार हैं। यह मजबूत आधार आपको आवश्यक पर ध्यान केंद्रित करने की अनुमति देगा : शक्तिशाली और उपयोगी प्लगइन्स का विकास।</p> </div> <div class="paragraph"> <p>आगामी लेख में, हम कमांड का उपयोग करेंगे।`gradle init`हमारे पहले प्लगइन परियोजना की संरचना उत्पन्न करने के लिए.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0087_pypi_cicd_part_3_post.html Sat, 19 Jul 2025 00:00:00 +0000 blog/2025/0087_pypi_cicd_part_3_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_poetry_के_साथ_एकीकरण">Poetry के साथ एकीकरण</a> <ul class="sectlevel2"> <li><a href="#_poetry_की_स्थापना">Poetry की स्थापना</a></li> <li><a href="#_प्रोजेक्ट_का_प्रारम्भ">प्रोजेक्ट का प्रारम्भ</a></li> <li><a href="#_निर्भरताओं_को_जोड़ना_और_इंस्टॉल_करना">निर्भरताओं को जोड़ना और इंस्टॉल करना</a></li> <li><a href="#_poetry_के_साथ_प्रकाशन">Poetry के साथ प्रकाशन</a></li> </ul> </li> <li><a href="#_gradle_integration"><mark>#</mark> Gradle Integration</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>इस श्रृंखला के पहले दो भागों में, हमने : - एक Python एप्लिकेशन के लिए GitHub Actions और PyPI के साथ एक कार्यात्मक CI/CD पाइपलाइन स्थापित किया गया। - इस पाइपलाइन को मल्टी-वर्ज़न टेस्ट के साथ औद्योगिक बनाया गया, Test PyPI के माध्यम से प्रगतिशील प्रकाशन के साथ, और गुणवत्ता और सुरक्षा उपकरणों के साथ।</p> </div> <div class="paragraph"> <p>इस तीसरे भाग में, हम जा रहे हैं<strong>PyPI पर सरल प्रकाशन से आगे</strong>एक पूर्ण, मज़बूत और पेशेवर CI/CD पाइपलाइन बनाने के लिए : - <strong>कविता</strong>आधुनिक पैकेजिंग के लिए और निर्भरताओं का अनुकूलित प्रबंधन. - <strong>Docker</strong>पुनरुत्पादन योग्य और बहु‑प्लेटफ़ॉर्म बिल्ड़ बनाने के लिए। - <strong>शर्ती प्रकाशन</strong>रिलीज़ उम्मीदवार जैसे परिदृश्यों को प्रबंधित करने के लिए - <strong>�ऑटोमेशन टूल्स</strong>(Renovate, Dependabot) पाइपलाइन को बिना किसी परिश्रम के अद्यतन रखने के लिए</p> </div> </div> </div> <div class="sect1"> <h2 id="_poetry_के_साथ_एकीकरण">Poetry के साथ एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>Poetry पैकेजिंग के पुराने उपकरण (setup.py, requirements.txt) को बदल देता है, निर्भरताओं और बिल्ड के प्रबंधन को केंद्रीकृत करके`pyproject.toml`.</p> </div> <div class="sect2"> <h3 id="_poetry_की_स्थापना">Poetry की स्थापना</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Installer Poetry curl -sSL https://install.python-poetry.org | python3 - # Vérifier la version poetry --version</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_प्रोजेक्ट_का_प्रारम्भ">प्रोजेक्ट का प्रारम्भ</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Initialiser un nouveau projet avec Poetry poetry init # Suivre l'assistant pour renseigner : nom, version, description, licence, dépendances.</code></pre> </div> </div> <div class="paragraph"> <p>यह एक फ़ाइल बनाता है`pyproject.toml`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="toml">[tool.poetry] name = "playlist-downloader" version = "0.1.0" description = "CLI tool for managing YouTube playlists" authors = ["Christophe Hérolivier <cheroliv@example.com>"] [tool.poetry.dependencies] python = ">=3.8" typer = "^0.9.0" yt-dlp = "^2023.7.6" google-api-python-client = "^2.0.0" google-auth-oauthlib = "^1.0.0" [tool.poetry.group.dev.dependencies] pytest = "^7.0" mypy = "^1.0" bandit = "^1.7" safety = "^2.3" black = "^23.0" ruff = "^0.1"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_निर्भरताओं_को_जोड़ना_और_इंस्टॉल_करना">निर्भरताओं को जोड़ना और इंस्टॉल करना</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell">poetry add typer yt-dlp google-api-python-client google-auth-oauthlib poetry add --group dev pytest mypy black bandit safety ruff</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_poetry_के_साथ_प्रकाशन">Poetry के साथ प्रकाशन</h3> <div class="paragraph"> <p>Poetry नैटिव रूप से प्रकाशन प्रबंधित करता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="shell"># Publication sur Test PyPI poetry publish --build --repository test-pypi # Publication sur PyPI poetry publish --build</code></pre> </div> </div> <div class="paragraph"> <p>यह कमांड स्वचालित रूप से उपलब्ध जानकारी का उपयोग करती है`pyproject.toml`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gradle_integration"><mark>#</mark> Gradle Integration</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake can be integrated into Gradle builds using the JBake Gradle plugin or by calling the JBake CLI directly:</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } विकास, CI/CD और उत्पादन में समान निष्पादन सुनिश्चित करने के लिए, Docker Poetry के साथ पूरी तरह से एकीकृत होता है। === Dockerfile का उदाहरण [source,dockerfile] ---- FROM python:3.11-slim WORKDIR /app COPY pyproject.toml poetry.lock ./ RUN pip install poetry RUN poetry install --no-root --only main COPY . . CMD ["poetry", "run", "python", "cli.py"] ---- यह सुनिश्चित करता है: - एक जमा हुआ Python वातावरण. - लॉक की गई निर्भरताएँ के माध्यम से`poetry.lock`. Docker को सपोर्ट करने वाले किसी भी सिस्टम पर चलने वाली एक इमेज === GitHub Actions में एकीकरण [source,yaml] ---- name: Docker Build on: push: branches: [main] jobs: build-docker: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Build Docker image run: docker build -t ghcr.io/${{ github.repository }}:latest . - name: Push Docker image run: docker push ghcr.io/${{ github.repository }}:latest ---- == शर्ती प्रकाशन एक पेशेवर पाइपलाइन में, केवल कुछ मामलों में प्रकाशित करने में सक्षम होना चाहिए : - रिलीज़ उम्मीदवार Test PyPI की ओर स्थिर संस्करण PyPI की ओर। केवल के लिए Docker बिल्ड्स ट्रिगर किए गए`main`. [source,yaml] ---- - name: Publish to Test PyPI if: contains(github.ref, '-rc') run: poetry publish --build --repository test-pypi - name: Publish to PyPI if: startsWith(github.ref, 'refs/tags/v') run: poetry publish --build ---- यह दृष्टिकोण आकस्मिक प्रकाशनों को रोकता है। == Renovate और Dependabot के साथ निर्भरताओं का स्वचालन अपनी निर्भरताओं को अप्रचलित होने से बचाने के लिए, स्वचालित अपडेट टूल्स को एकीकृत करें। === Dependabot [source,yaml] ---- version: 2 updates: - package-ecosystem: "pip" directory: "/" schedule: interval: "weekly" - package-ecosystem: "github-actions" directory: "/" schedule: interval: "weekly" ---- Dependabot हर हफ़्ते Python और GitHub Actions की निर्भरताओं को अपडेट करने के लिए PR खोलता है। === सुधारना [source,json] ---- { "extends": ["config:base"], "packageRules": [ { "matchManagers": ["pip"], "groupName": "python-dependencies", "schedule": ["before 6am on monday"] } ] } ---- Renovate अधिक सूक्ष्म नियंत्रण की अनुमति देता है: निर्भरता समूहन, योजना, और उन्नत नियम। == आरेख PlantUML === उपयोग मामला – उन्नत CI/CD [plantuml, usecase-cicd, svg] ---- @startuml actor Developer actor GitHub as "GitHub Actions" actor PyPI actor DockerRegistry as "डॉकर रजिस्ट्री" actor Automation as "नवीनीकरण/Dependabot" Developer --> (Push code) (Trigger CI) --> GitHub GitHub --> (Run Tests & Lint) GitHub --> (Build Docker Image) GitHub --> DockerRegistry GitHub --> (Publish to Test PyPI) GitHub --> (Promote to PyPI) Automation --> (Update Dependencies) @enduml ---- === अनुक्रम – शर्ती प्रकाशन [plantuml, sequence-cicd, svg] ---- @startuml !theme vibrant left to right direction Developer -> GitHub: Push tag v1.2.3-rc GitHub -> CI: Run tests CI -> CD: Check release type CD -> Test PyPI: Publish RC Developer -> GitHub: Push tag v1.2.3 GitHub -> CD: Publish to PyPI CD -> Docker Registry: Push Docker image @enduml ---- === राज्य – CI/CD पाइपलाइन [plantuml, states-cicd, svg] ---- @startuml [*] --> Idle Idle --> CI_Running : push CI_Running --> CI_Success : tests ok CI_Running --> CI_Failed : tests fail CI_Success --> CD_Running : tag detected CD_Running --> CD_Success : publish ok CD_Running --> CD_Failed : error CD_Success --> [*] @enduml ---- === डिप्लॉयमेंट – आर्किटेक्चर CI/CD [plantuml, deployment-cicd, svg] ---- @startuml node "डेवलपर मशीन" { component "गिट क्लाइंट" } node "गिटहब एक्शंस" { component "सीआई वर्कफ़्लो" component "CD वर्कफ़्लो" } node "पैकेज रिपॉजिटरीज़" { artifact "परीक्षण PyPI" artifact "PyPI" artifact "डॉकर रजिस्ट्री" } "डेवलपर मशीन" --> "गिटहब एक्शंस" "गिटहब एक्शंस" --> "परीक्षण PyPI" "गिटहब एक्शंस" --> "PyPI" "गिटहब एक्शंस" --> "डॉकर रजिस्ट्री" @enduml ---- == निष्कर्ष इस तीसरे भाग में, हमने देखा कि : - पायथन पैकेजिंग को आधुनिक बनाएं Poetry के साथ - डॉक़र के माध्यम से पुनरावृत्तीय बिल्ड्स सुनिश्चित करें। - एक शर्ती प्रकाशन स्थापित करें। निर्भरताओं के अपडेट को स्वचालित करें। अब आपके पास एक CI/CD पाइपलाइन**पूर्ण, औद्योगिकीकृत और सुरक्षित**, आपके प्रोजेक्ट्स के साथ विकसित होने के लिए तैयार। ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0086_pypi_cicd_part_2_post.html Fri, 18 Jul 2025 00:00:00 +0000 blog/2025/0086_pypi_cicd_part_2_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_cicd_पाइपलाइन_की_वास्तुकला">CI/CD पाइपलाइन की वास्तुकला</a></li> <li><a href="#_प्रोजेक्ट_संरचना">प्रोजेक्ट संरचना</a></li> <li><a href="#_pyproject_toml_के_साथ_पैकेज_कॉन्फ़िगरेशन">pyproject.toml के साथ पैकेज कॉन्फ़िगरेशन</a></li> <li><a href="#_cicd_वर्कफ़्लो_परीक्षण_और_गुणवत्ता">CI/CD वर्कफ़्लो - परीक्षण और गुणवत्ता</a></li> <li><a href="#_रिलीज़_और_डिप्लॉयमेंट_वर्कफ़्लो">रिलीज़ और डिप्लॉयमेंट वर्कफ़्लो</a></li> <li><a href="#_आर्किटेक्चर_डायग्राम">आर्किटेक्चर डायग्राम</a> <ul class="sectlevel2"> <li><a href="#_सीक्वेंस_आरेख_रिलीज़_प्रक्रिया">सीक्वेंस आरेख - रिलीज़ प्रक्रिया</a></li> <li><a href="#_स्थिति_आरेख_पैकेज_जीवन_चक्र">स्थिति आरेख - पैकेज जीवन चक्र</a></li> <li><a href="#_डिप्लॉयमेंट_आरेख_cicd_इन्फ्रास्ट्रक्चर">डिप्लॉयमेंट आरेख - CI/CD इन्फ्रास्ट्रक्चर</a></li> </ul> </li> <li><a href="#_पाइपलाइन_की_वस्तुएँ_और_मॉडल">पाइपलाइन की वस्तुएँ और मॉडल</a> <ul class="sectlevel2"> <li><a href="#_क्लास_आरेख_cicd_मॉडल">क्लास आरेख - CI/CD मॉडल</a></li> </ul> </li> <li><a href="#_सिक्रेट्स_की_कॉन्फ़िगरेशन">सिक्रेट्स की कॉन्फ़िगरेशन</a> <ul class="sectlevel2"> <li><a href="#_github_actions_के_रहस्य">GitHub Actions के रहस्य</a></li> <li><a href="#_pypi_टोकन_जनरेशन">PyPI टोकन जनरेशन</a></li> </ul> </li> <li><a href="#_स्थानीय_विकास_स्क्रिप्ट">स्थानीय विकास स्क्रिप्ट</a> <ul class="sectlevel2"> <li><a href="#_makefile">Makefile</a></li> <li><a href="#_स्क्रिप्ट_संस्करण">स्क्रिप्ट संस्करण</a></li> </ul> </li> <li><a href="#_अच्छी_प्रथाएँ_और_सिफारिशें">अच्छी प्रथाएँ और सिफारिशें</a> <ul class="sectlevel2"> <li><a href="#_समानार्थिक_संस्करण">समानार्थिक संस्करण</a></li> <li><a href="#_ब्रांचिंग_रणनीति">ब्रांचिंग रणनीति</a></li> <li><a href="#_टेस्ट_और_कवरेज">टेस्ट और कवरेज</a></li> <li><a href="#_सुरक्षा">सुरक्षा</a></li> </ul> </li> <li><a href="#_मॉनिटरिंग_और_ऑब्ज़र्वेबिलिटी">मॉनिटरिंग और ऑब्ज़र्वेबिलिटी</a> <ul class="sectlevel2"> <li><a href="#_पाइपलाइन_मेट्रिक्स">पाइपलाइन मेट्रिक्स</a></li> <li><a href="#_सूचनाएँ">सूचनाएँ</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_अतिरिक्त_संसाधन">अतिरिक्त संसाधन</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">उद्देश्य : एक साधारण पाइपलाइन को एक मजबूत औद्योगिक पाइपलाइन में बदलें, आधुनिक पैकेजिंग और सॉफ़्टवेयर इंजीनियरिंग मानकों का पालन करते हुए।</div> <p>इस श्रृंखला के पहले भाग में, हमने एक सरल लेकिन प्रभावी CI/CD पाइपलाइन बनाई जो Python पैकेज के परीक्षण और PyPI पर प्रकाशन को स्वचालित करती है।</p> </div> <div class="paragraph"> <p>अब इस पाइपलाइन को पेशेवर बनाने का समय है। इस दूसरे भाग में, हम करेंगे :</p> </div> <div class="ulist"> <ul> <li> <p>आधुनिक pyproject.toml मानक की ओर प्रवास करें,</p> </li> <li> <p>गुणवत्ता और सुरक्षा उपकरण जोड़ें (Black, Mypy, Bandit, Safety)</p> </li> <li> <p>बहु‑संस्करण परीक्षण सेट करें,</p> </li> <li> <p>Test PyPI के माध्यम से क्रमिक तैनाती एकीकृत करें,</p> </li> <li> <p>संस्करण को स्वचालित करें और पाइपलाइन निगरानी में सुधार करें।</p> </li> </ul> </div> <div class="paragraph"> <p>एक कार्यात्मक पाइपलाइन से एक पेशेवर CI/CD बुनियादी ढांचे में संक्रमण के लिए खुद को तैयार करें।</p> </div> <div class="paragraph"> <p>एक पाइथन एप्लिकेशन को PyPI पर तैनात करने के लिए एक मजबूत CI/CD पाइपलाइन की आवश्यकता होती है जो टेस्ट, बिल्ड और पैकेज प्रकाशन को स्वचालित करती है। इस लेख में GitHub Actions का उपयोग करके एक CLI Python एप्लिकेशन के लिए एक पूर्ण पाइपलाइन सेट अप करने की प्रक्रिया का विस्तृत विवरण दिया गया है, आधुनिक Python इकोसिस्टम की सर्वोत्तम प्रथाओं पर आधारित।</p> </div> </div> </div> <div class="sect1"> <h2 id="_cicd_पाइपलाइन_की_वास्तुकला">CI/CD पाइपलाइन की वास्तुकला</h2> <div class="sectionbody"> <div class="paragraph"> <p>वह पाइपलाइन जिसे हम निर्माण करने जा रहे हैं, कई चरणों की दृष्टिकोण का पालन करती है :</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 18) ] @startuml ... ... ( skipping 138 lines ) ... skinparam UseCaseStereoType { FontColor black FontName Verdana } title पाइपलाइन CI/CD Python PyPI की ओर skinparam backgroundColor #f8f9fa skinparam componentStyle rectangle rectangle "डेवलपर" as dev rectangle "गिटहब रिपॉजिटरी" as repo { rectangle ".github/कार्यप्रवाह/" as workflows rectangle "टेस्ट्स/" as tests rectangle "setup.py / pyproject.toml" as setup rectangle "requirements.txt" as req } rectangle "गिटहब एक्शंस" as actions { rectangle "टेस्ट रनर" as test_runner rectangle "### Gradle एकीकरण JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml !theme plain title पाइपलाइन CI/CD Python PyPI की ओर skinparam backgroundColor #f8f9fa skinparam componentStyle rectangle rectangle "डेवलपर" as dev rectangle "गिटहब रिपॉजिटरी" as repo { rectangle ".github/कार्यप्रवाह/" as workflows rectangle "टेस्ट्स/" as tests rectangle "setup.py / pyproject.toml" as setup rectangle "requirements.txt" as req } rectangle "गिटहब एक्शंस" as actions { rectangle "टेस्ट रनर" as test_runner rectangle "### Gradle एकीकरण JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" as build rectangle "सुरक्षा स्कैन" as security rectangle "गुणवत्ता जाँच" as quality } rectangle "PyPI" as pypi { rectangle "टेस्ट PyPI" as test_pypi rectangle "उत्पादन PyPI" as prod_pypi } rectangle "उपयोगकर्ता" as users dev --> repo : push/PR repo --> actions : trigger workflow actions --> test_runner : run tests actions --> security : security checks actions --> quality : code quality actions --> build : build package build --> test_pypi : deploy (pre-release) build --> prod_pypi : deploy (release) prod_pypi --> users : install package @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रोजेक्ट_संरचना">प्रोजेक्ट संरचना</h2> <div class="sectionbody"> <div class="paragraph"> <p>वितरण के लिए तैयार Python CLI एप्लिकेशन को एक मानकीकृत संरचना का पालन करना चाहिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="text">playlist-downloader/ ├── .github/ │ └── workflows/ │ ├── ci.yml │ ├── release.yml │ └── security.yml ├── src/ │ └── playlist_downloader/ │ ├── __init__.py │ ├── cli.py │ ├── core/ │ └── adapters/ ├── tests/ │ ├── unit/ │ ├── integration/ │ └── conftest.py ├── docs/ ├── pyproject.toml ├── requirements.txt ├── requirements-dev.txt ├── MANIFEST.in ├── README.md ├── LICENSE └── CHANGELOG.md</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pyproject_toml_के_साथ_पैकेज_कॉन्फ़िगरेशन">pyproject.toml के साथ पैकेज कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>फ़ाइल`pyproject.toml`यह Python पैकेज को कॉन्फ़िगर करने का आधुनिक मानक है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="toml">[build-system] requires = ["setuptools>=45", "wheel", "setuptools_scm>=6.2"] build-backend = "setuptools.build_meta" [project] name = "playlist-downloader" authors = [ {name = "Christophe Hérolivier", email = "cheroliv@example.com"}, ] description = "CLI tool for YouTube playlist management" readme = "README.md" requires-python = ">=3.8" keywords = ["youtube", "playlist", "cli", "downloader"] license = {text = "MIT"} classifiers = [ "Development Status :: 4 - Beta", "Environment :: Console", "Intended Audience :: End Users/Desktop", "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3", "Programming Language :: Python :: 3.8", "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", "Programming Language :: Python :: 3.11", "Topic :: Multimedia :: Sound/Audio", "Topic :: Utilities", ] dependencies = [ "typer>=0.9.0", "yt-dlp>=2023.7.6", "google-api-python-client>=2.0.0", "google-auth-oauthlib>=1.0.0", "pyyaml>=6.0", "rich>=13.0.0", ] dynamic = ["version"] [project.optional-dependencies] dev = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", "black>=23.0.0", "flake8>=6.0.0", "mypy>=1.0.0", "pre-commit>=3.0.0", "tox>=4.0.0", ] test = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", ] [project.urls] Homepage = "https://github.com/cheroliv/playlist-downloader" Documentation = "https://github.com/cheroliv/playlist-downloader#readme" Repository = "https://github.com/cheroliv/playlist-downloader.git" "Bug Tracker" = "https://github.com/cheroliv/playlist-downloader/issues" [project.scripts] playlist-downloader = "playlist_downloader.cli:main" [tool.setuptools_scm] write_to = "src/playlist_downloader/_version.py" [tool.setuptools.packages.find] where = ["src"] [tool.pytest.ini_options] testpaths = ["tests"] python_files = ["test_*.py"] python_classes = ["Test*"] python_functions = ["test_*"] addopts = [ "--cov=src/playlist_downloader", "--cov-report=html", "--cov-report=term-missing", "--cov-fail-under=85", ] [tool.black] line-length = 88 target-version = ['py38'] include = '\.pyi?$' extend-exclude = ''' /( \.eggs | \.git | \.hg | \.mypy_cache | \.tox | \.venv | _build | buck-out | build | dist )/ ''' [tool.mypy] python_version = "3.8" warn_return_any = true warn_unused_configs = true disallow_untyped_defs = true disallow_incomplete_defs = true check_untyped_defs = true disallow_untyped_decorators = true no_implicit_optional = true warn_redundant_casts = true warn_unused_ignores = true warn_no_return = true warn_unreachable = true strict_equality = true [[tool.mypy.overrides]] module = [ "yt_dlp.*", "googleapiclient.*", "google_auth_oauthlib.*", ] ignore_missing_imports = true</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_cicd_वर्कफ़्लो_परीक्षण_और_गुणवत्ता">CI/CD वर्कफ़्लो - परीक्षण और गुणवत्ता</h2> <div class="sectionbody"> <div class="paragraph"> <p>मुख्य कार्यप्रवाह (<code>ci.yml</code>) कई Python संस्करणों पर टेस्ट चलाता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: CI on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: test: runs-on: ubuntu-latest strategy: matrix: python-version: ["3.8", "3.9", "3.10", "3.11"] steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Cache dependencies uses: actions/cache@v3 with: path: | ~/.cache/pip ~/.cache/pre-commit key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }} restore-keys: | ${{ runner.os }}-pip- - name: Install dependencies run: | python -m pip install --upgrade pip pip install -e ".[dev]" - name: Lint with flake8 run: | flake8 src tests --count --select=E9,F63,F7,F82 --show-source --statistics flake8 src tests --count --exit-zero --max-complexity=10 --max-line-length=88 --statistics - name: Check code formatting with Black run: black --check src tests - name: Type checking with mypy run: mypy src - name: Run tests with pytest run: | pytest tests/ -v --cov=src/playlist_downloader \ --cov-report=xml --cov-report=term-missing - name: Upload coverage to Codecov uses: codecov/codecov-action@v3 if: matrix.python-version == '3.11' with: file: ./coverage.xml flags: unittests name: codecov-umbrella security: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v4 with: python-version: "3.11" - name: Install dependencies run: | python -m pip install --upgrade pip pip install bandit[toml] safety - name: Run security checks with bandit run: bandit -r src/ -f json -o bandit-report.json - name: Check dependencies with safety run: safety check --json --output safety-report.json - name: Upload security reports uses: actions/upload-artifact@v3 if: always() with: name: security-reports path: | bandit-report.json safety-report.json build: needs: [test, security] runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python uses: actions/setup-python@v4 with: python-version: "3.11" - name: Install build dependencies run: | python -m pip install --upgrade pip pip install build twine - name: Build package run: python -m build - name: Check package with twine run: twine check dist/* - name: Upload build artifacts uses: actions/upload-artifact@v3 with: name: dist path: dist/</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_रिलीज़_और_डिप्लॉयमेंट_वर्कफ़्लो">रिलीज़ और डिप्लॉयमेंट वर्कफ़्लो</h2> <div class="sectionbody"> <div class="paragraph"> <p>रिलीज़ वर्कफ़्लो (<code>release.yml</code>) पाइपीआई पर स्वचालित प्रकाशन प्रबंधित करता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: Release on: push: tags: - 'v*.*.*' workflow_dispatch: inputs: environment: description: 'Deployment environment' required: true default: 'test' type: choice options: - test - production env: PYTHON_VERSION: "3.11" jobs: release: runs-on: ubuntu-latest environment: name: ${{ github.event.inputs.environment || (startsWith(github.ref, 'refs/tags/') && 'production' || 'test') }} steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python uses: actions/setup-python@v4 with: python-version: ${{ env.PYTHON_VERSION }} - name: Install dependencies run: | python -m pip install --upgrade pip pip install build twine - name: Build package run: python -m build - name: Check package run: twine check dist/* - name: Publish to Test PyPI if: github.event.inputs.environment == 'test' || (startsWith(github.ref, 'refs/tags/') && contains(github.ref, 'rc')) env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.TEST_PYPI_API_TOKEN }} run: | twine upload --repository testpypi dist/* - name: Publish to PyPI if: github.event.inputs.environment == 'production' || (startsWith(github.ref, 'refs/tags/') && !contains(github.ref, 'rc')) env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} run: | twine upload dist/* - name: Create GitHub Release if: startsWith(github.ref, 'refs/tags/') uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ github.ref }} release_name: Release ${{ github.ref }} draft: false prerelease: ${{ contains(github.ref, 'rc') }} post-release: needs: release runs-on: ubuntu-latest if: startsWith(github.ref, 'refs/tags/') steps: - uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v4 with: python-version: ${{ env.PYTHON_VERSION }} - name: Test installation from PyPI run: | sleep 60 # Attendre la propagation sur PyPI pip install playlist-downloader playlist-downloader --version - name: Update documentation run: | # Script pour mettre à jour la documentation echo "Documentation updated for version ${GITHUB_REF#refs/tags/}"</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_आर्किटेक्चर_डायग्राम">आर्किटेक्चर डायग्राम</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_सीक्वेंस_आरेख_रिलीज़_प्रक्रिया">सीक्वेंस आरेख - रिलीज़ प्रक्रिया</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-2046d1c6354b22d072038f56dc40cdee.png" alt="Diagram" width="971" height="832"> </div> </div> </div> <div class="sect2"> <h3 id="_स्थिति_आरेख_पैकेज_जीवन_चक्र">स्थिति आरेख - पैकेज जीवन चक्र</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-a7f83cedc9d2d7f434257d8d55623c38.png" alt="Diagram" width="525" height="740"> </div> </div> </div> <div class="sect2"> <h3 id="_डिप्लॉयमेंट_आरेख_cicd_इन्फ्रास्ट्रक्चर">डिप्लॉयमेंट आरेख - CI/CD इन्फ्रास्ट्रक्चर</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 16) ] @startuml ... ... ( skipping 136 lines ) ... BorderColor black } skinparam UseCaseStereoType { FontColor black FontName Verdana } title डिप्लॉयमेंट इन्फ्रास्ट्रक्चर node "GitHub" { component "रीपॉज़िटरी" as repo component "एक्शन रनर" as runner component "रहस्य स्टोर" as secrets } node "PyPI इंफ़्रास्ट्रक्चर" { component "PyPI" as pypi component "टेस्ट PyPI" as testpypi database "पैकेज सूचक" as index } node "### JBake क्या है? ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml !theme plain title डिप्लॉयमेंट इन्फ्रास्ट्रक्चर node "GitHub" { component "रीपॉज़िटरी" as repo component "एक्शन रनर" as runner component "रहस्य स्टोर" as secrets } node "PyPI इंफ़्रास्ट्रक्चर" { component "PyPI" as pypi component "टेस्ट PyPI" as testpypi database "पैकेज सूचक" as index } node "### JBake क्या है? JBake एक Java-आधारित, ओपन सोर्स, स्थिर साइट/ब्लॉग जनरेटर है जो डेवलपर्स के लिए है।" { component "Git क्लाइंट" as git component "Python पर्यावरण" as python component "IDE" as ide } node "उपयोगकर्ता वातावरण" { component "पिप" as pip_client component "पायथन रनटाइम" as py_runtime } git --> repo : push code/tags repo --> runner : trigger workflows runner --> secrets : read API tokens runner --> testpypi : upload pre-release runner --> pypi : upload release pypi --> index : store package pip_client --> pypi : download package py_runtime <-- pip_client : install package @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पाइपलाइन_की_वस्तुएँ_और_मॉडल">पाइपलाइन की वस्तुएँ और मॉडल</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_क्लास_आरेख_cicd_मॉडल">क्लास आरेख - CI/CD मॉडल</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-b297b21c69498b5bc74f0da88d80315f.png" alt="Diagram" width="814" height="635"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सिक्रेट्स_की_कॉन्फ़िगरेशन">सिक्रेट्स की कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>पाइपलाइन काम करने के लिए, आपको GitHub में निम्नलिखित सीक्रेट्स कॉन्फ़िगर करने होंगे :</p> </div> <div class="sect2"> <h3 id="_github_actions_के_रहस्य">GitHub Actions के रहस्य</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash"># Dans Settings > Secrets and variables > Actions # Token PyPI pour la production PYPI_API_TOKEN=pypi-... # Token Test PyPI pour les pré-releases TEST_PYPI_API_TOKEN=pypi-... # Token GitHub pour créer les releases GITHUB_TOKEN=(automatiquement fourni) # Token Codecov (optionnel) CODECOV_TOKEN=...</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_pypi_टोकन_जनरेशन">PyPI टोकन जनरेशन</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash"># 1. Créer un compte sur PyPI et Test PyPI # 2. Aller dans Account Settings > API tokens # 3. Créer un token avec scope "Entire account" ou spécifique au projet # 4. Format du token : pypi-AgEIcHlwaS5vcmc...</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_स्थानीय_विकास_स्क्रिप्ट">स्थानीय विकास स्क्रिप्ट</h2> <div class="sectionbody"> <div class="paragraph"> <p>विकास को आसान बनाने के लिए, उपयोगिता स्क्रिप्ट बनाएँ :</p> </div> <div class="sect2"> <h3 id="_makefile">Makefile</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="makefile">.PHONY: install test lint format security build clean release-test release-prod install: pip install -e ".[dev]" test: pytest tests/ -v --cov=src/playlist_downloader lint: flake8 src tests mypy src format: black src tests security: bandit -r src/ safety check build: python -m build twine check dist/* clean: rm -rf build/ dist/ *.egg-info/ find . -type d -name __pycache__ -delete find . -name "*.pyc" -delete release-test: clean build twine upload --repository testpypi dist/* release-prod: clean build twine upload dist/* pre-commit: format lint test security @echo "✅ Prêt pour commit"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_स्क्रिप्ट_संस्करण">स्क्रिप्ट संस्करण</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="python">#!/usr/bin/env python3 """Script pour gérer les versions du projet.""" import sys import subprocess from pathlib import Path def get_current_version(): """Récupère la version actuelle depuis git.""" try: result = subprocess.run( ["git", "describe", "--tags", "--abbrev=0"], capture_output=True, text=True, check=True ) return result.stdout.strip() except subprocess.CalledProcessError: return "0.0.0" def create_version_tag(version, message=None): """Crée un tag de version.""" if not version.startswith('v'): version = f'v{version}' tag_message = message or f"Release {version}" subprocess.run(["git", "tag", "-a", version, "-m", tag_message], check=True) print(f"✅ Tag {version} créé") # Push le tag subprocess.run(["git", "push", "origin", version], check=True) print(f"✅ Tag {version} poussé vers origin") if __name__ == "__main__": if len(sys.argv) < 2: current = get_current_version() print(f"Version actuelle: {current}") print("Usage: python version.py <new_version> [message]") sys.exit(1) new_version = sys.argv[1] message = sys.argv[2] if len(sys.argv) > 2 else None create_version_tag(new_version, message)</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छी_प्रथाएँ_और_सिफारिशें">अच्छी प्रथाएँ और सिफारिशें</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_समानार्थिक_संस्करण">समानार्थिक संस्करण</h3> <div class="paragraph"> <p>सेमेंटिक वर्जनिंग (SemVer) का उपयोग करें:</p> </div> <div class="ulist"> <ul> <li> <p><code>MAJOR.MINOR.PATCH</code> (ex: 1.2.3)</p> </li> <li> <p><code>MAJOR</code>: असंगत परिवर्तन</p> </li> <li> <p><code>MINOR</code>: नए संगत विशेषताएँ</p> </li> <li> <p>`PATCH`संगत बग सुधार</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_ब्रांचिंग_रणनीति">ब्रांचिंग रणनीति</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="text">main ──●──●──●──●──●────●── (releases stables) / / / develop ──●──●──●──●──●──●──●──●── (développement) / / / feature/xxx ●──●──●──●──●──/ (fonctionnalités)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_टेस्ट_और_कवरेज">टेस्ट और कवरेज</h3> <div class="ulist"> <ul> <li> <p>कोड कवरेज न्यूनतम : 85%</p> </li> <li> <p>यूनिट टेस्ट व्यावसायिक तर्क के लिए</p> </li> <li> <p>एडेप्टर्स के लिए एकीकरण परीक्षण</p> </li> <li> <p>CLI के लिए एंड-टू-एंड परीक्षण</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_सुरक्षा">सुरक्षा</h3> <div class="ulist"> <ul> <li> <p>निर्भरताओं का स्वचालित स्कैन (Safety)</p> </li> <li> <p>कोड का स्थैतिक विश्लेषण (Bandit)</p> </li> <li> <p>कोड में कभी भी रहस्य नहीं</p> </li> <li> <p>विशिष्ट PyPI टोकन का उपयोग</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_मॉनिटरिंग_और_ऑब्ज़र्वेबिलिटी">मॉनिटरिंग और ऑब्ज़र्वेबिलिटी</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पाइपलाइन_मेट्रिक्स">पाइपलाइन मेट्रिक्स</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml"># .github/workflows/metrics.yml name: Pipeline Metrics on: workflow_run: workflows: ["CI", "Release"] types: [completed] jobs: metrics: runs-on: ubuntu-latest steps: - name: Collect metrics run: | echo "Pipeline: ${{ github.event.workflow_run.name }}" echo "Status: ${{ github.event.workflow_run.conclusion }}" echo "Duration: ${{ github.event.workflow_run.updated_at - github.event.workflow_run.created_at }}" # Envoyer vers système de monitoring</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_सूचनाएँ">सूचनाएँ</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml"># Ajout dans les workflows pour notifications - name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: failure text: "❌ Pipeline failed for ${{ github.repository }}" env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह पायथन के लिए पूर्ण CI/CD पाइपलाइन प्रदान करता है :</p> </div> <div class="ulist"> <ul> <li> <p><strong>पूर्ण स्वचालन</strong>: कोड की सत्यापन से प्रकाशन तक</p> </li> <li> <p><strong>सुरक्षा</strong>स्वचालित स्कैन और सुरक्षित रहस्य प्रबंधन</p> </li> <li> <p><strong>गुणवत्ता</strong>: बहु- संस्करणों के परीक्षण, लिंटिंग और कोड कवरेज</p> </li> <li> <p><strong>विश्वसनीयता</strong>: Test PyPI के माध्यम से क्रमिक तैनाती</p> </li> <li> <p><strong>ट्रेसेबिलिटी</strong>: artifacts, रिपोर्ट और releases GitHub</p> </li> </ul> </div> <div class="paragraph"> <p>इन प्रथाओं को अपनाने से आपके Python CLI एप्लिकेशनों के लिए एक मजबूत और पेशेवर डिलीवरी प्रक्रिया सुनिश्चित होती है, जिससे आपके प्रोजेक्ट्स की रखरखाव और दीर्घकालिक विकास आसान हो जाता है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_अतिरिक्त_संसाधन">अतिरिक्त संसाधन</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://packaging.python.org/">Python Packaging User Guide</a></p> </li> <li> <p><a href="https://docs.github.com/en/actions">GitHub Actions दस्तावेज़</a></p> </li> <li> <p><a href="https://pypi.org/help/">PyPI मदद दस्तावेज़</a></p> </li> <li> <p><a href="https://semver.org/">सेमेंटिक वर्ज़निंग विनिर्देश</a></p> </li> <li> <p><a href="https://keepachangelog.com/">चेंजलॉग रखें</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2025/0085_pypi_cicd_part_1_post.html Thu, 17 Jul 2025 00:00:00 +0000 blog/2025/0085_pypi_cicd_part_1_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_पाइपलाइन_आर्किटेक्चर">पाइपलाइन आर्किटेक्चर</a></li> <li><a href="#_ci_पाइपलाइन_कॉन्फ़िगरेशन">CI पाइपलाइन कॉन्फ़िगरेशन</a> <ul class="sectlevel2"> <li><a href="#_ci_वर्कफ़्लो_की_संरचना">CI वर्कफ़्लो की संरचना</a></li> <li><a href="#_ci_चरणों_का_विश्लेषण">CI चरणों का विश्लेषण</a> <ul class="sectlevel3"> <li><a href="#_1_ट्रिगर_on">1. ट्रिगर (<code>on</code>)</a></li> </ul> </li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">lक्ष्य : पाठक की सहायता करके एक न्यूनतम लेकिन कार्यात्मक CI/CD पाइपलाइन सेट अप करें, एक Python एप्लिकेशन के लिए, जिसमें PyPI पर स्वचालित तैनाती शामिल है।</div> <p>विकास प्रक्रियाओं का स्वचालन आधुनिक परियोजनाओं में अनिवार्य बन गया है। एक अच्छी तरह से डिज़ाइन किया गया CI/CD पाइपलाइन न केवल विकास चक्र के शुरुआती चरण में प्रतिगमन का पता लगाने की अनुमति देता है, बल्कि पूरी तरह से तैनाती प्रक्रिया को स्वचालित भी करता है।</p> </div> <div class="paragraph"> <p>इस लेख में, हम एक Python एप्लिकेशन के लिए GitHub Actions के साथ एक पूर्ण CI/CD पाइपलाइन स्थापित करने का तरीका जानेंगे, निरंतर एकीकरण (CI) से निरंतर वितरण (CD) तक PyPI पर।</p> </div> </div> </div> <div class="sect1"> <h2 id="_पाइपलाइन_आर्किटेक्चर">पाइपलाइन आर्किटेक्चर</h2> <div class="sectionbody"> <div class="paragraph"> <p>हमारा पाइपलाइन दो अलग वर्कफ़्लो से बना है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>सीआई पाइपलाइन</strong>हर पुश और pull request पर निष्पादित</p> </li> <li> <p><strong>CD पाइपलाइन</strong>: केवल GitHub रिलीज़ के दौरान ट्रिगर किया जाता है</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/ci-cd-overview.svg" alt="ci cd overview" width="1618" height="5132"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ci_पाइपलाइन_कॉन्फ़िगरेशन">CI पाइपलाइन कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ci_वर्कफ़्लो_की_संरचना">CI वर्कफ़्लो की संरचना</h3> <div class="paragraph"> <p>CI वर्कफ़्लो को कोड में प्रत्येक योगदान को मान्य करने के लिए डिज़ाइन किया गया है। यहाँ इसकी पूर्ण कॉन्फ़िगरेशन है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">name: CI/CD Pipeline on: push: branches: - main pull_request: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock - name: Run Linting (Ruff) run: ruff check . - name: Run Tests (Pytest) run: pytest</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_ci_चरणों_का_विश्लेषण">CI चरणों का विश्लेषण</h3> <div class="sect3"> <h4 id="_1_ट्रिगर_on">1. ट्रिगर (<code>on</code>)</h4> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">---- ---- on: push: branches: - main pull_request: branches: - main ---- पाइपलाइन ट्रिगर होती है : - हर push शाखा पर`main` - हर पुल अनुरोध की ओर`main` यह दृष्टिकोण सुनिश्चित करता है कि मुख्य कोड स्थिर रहे और किसी भी योगदान को एकीकरण से पहले मान्य किया जाए। ==== 2. निष्पादन वातावरण ---- runs-on: ubuntu-latest Ubuntu Latest प्रदर्शन, लागत और संगतता के बीच एक अच्छा संतुलन प्रदान करता है, अधिकांश पायथन परियोजनाओं के लिए। ==== 3. चेकआउट कोड का ```yaml ---- ---- - name: Checkout code uses: actions/checkout@v4 ---- क्रिया`checkout@v4`रेपॉज़िटरी का सोर्स कोड प्राप्त करता है. संस्करण v4 प्रदर्शन और सुरक्षा में सुधार लाता है। ==== 4. कॉन्फ़िगरेशन पाइथन ---- - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' का उपयोग`'3.x'`यह Python 3 के नवीनतम स्थिर संस्करण का स्वचालित रूप से उपयोग करने की सुविधा प्रदान करता है, जिससे रखरखाव सरल हो जाता है। ==== 5. निर्भरताओं की स्थापना ```yaml ---- ---- - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock ---- यह चरण : - Met à jour pip vers la dernière version - परियोजना की निर्भरताएँ स्थापित करें विकास उपकरण जोड़ें (लिंटिंग और परीक्षण) ==== 6. Ruff के साथ लिंटिंग ---- - name: Run Linting (Ruff) run: ruff check . **Ruff**यह एक अत्यंत तेज़ Python लिंटर है, जो रस्ट में लिखा गया है। यह कई टूल (Flake8, Black, isort) की विशेषताओं को एक ही उच्च प्रदर्शन वाले टूल में जोड़ता है। ==== 7. परीक्षण का निष्पादन ```yaml ---- ---- - name: Run Tests (Pytest) run: pytest ---- Pytest पूरे टेस्ट सुइट को चलाता है, जिससे यह सुनिश्चित होता है कि संशोधन कोई रिग्रेशन नहीं लाते। == डिप्लॉयमेंट पाइपलाइन (CD) की कॉन्फ़िगरेशन === सीडी वर्कफ़्लो की संरचना CD वर्कफ़्लो केवल GitHub रिलीज़ पर ट्रिगर होता है और PyPI पर प्रकाशन को स्वचालित बनाता है : [source,yaml] ---- name: Publish to PyPI on: release: types: - published jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' - name: Install dependencies run: | python -m pip install --upgrade pip pip install setuptools wheel twine - name: Build and publish env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} run: | python setup.py sdist bdist_wheel twine upload dist/* ---- === CD चरणों का विश्लेषण ==== ट्रिगर रिलीज़ ---- on: release: types: - published CD पाइपलाइन केवल GitHub रिलीज़ प्रकाशित होने पर ही ट्रिगर होती है। यह दृष्टिकोण तैनाती पर सटीक नियंत्रण सुनिश्चित करता है। ==== 2. बिल्ड टूल्स की स्थापना ```yaml ---- ---- pip install setuptools wheel twine ---- - **setuptools**पायथन पैकेजिंग टूल्स - **चक्का**: आधुनिक पायथन वितरण प्रारूप - **twine**: सुरक्षित उपकरण PyPI में अपलोड करने के लिए ==== 3. प्रमाणीकरण की कॉन्फ़िगरेशन ---- env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} प्रमाणीकरण PyPI API टोकन का उपयोग करता है, जो GitHub पर एक राज के रूप में संग्रहीत किया जाता है, और यह सामान्य पहचान प्रमाणपत्रों की तुलना में अधिक सुरक्षित है। ==== 4. बिल्ड और प्रकाशन ```yaml ---- ---- run: | python setup.py sdist bdist_wheel twine upload dist/* ---- - `sdist`: एक स्रोत वितरण बनाएँ - `bdist_wheel`: wheel बनाएँ (बाइनरी वितरण) - `twine upload`: प्रकाशित करें वितरण PyPI पर == पायथन पैकेज की कॉन्फ़िगरेशन === setup.py की संरचना पाइपलाइन को काम करने के लिए, आपके प्रोजेक्ट में एक फ़ाइल शामिल होनी चाहिए`setup.py`: [source,python] ---- from setuptools import setup, find_packages with open("README.adoc", "r", encoding="utf-8") as fh: long_description = fh.read() setup( name="playlist-downloader", version="1.0.0", author="Votre Nom", author_email="votre.email@example.com", description="CLI tool for managing YouTube playlists", long_description=long_description, long_description_content_type="text/plain", url="https://github.com/cheroliv/playlist-downloader", packages=find_packages(), classifiers=[ "Development Status :: 4 - Beta", "Intended Audience :: Developers", "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3", "Programming Language :: Python :: 3.8", "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", "Programming Language :: Python :: 3.11", ], python_requires=">=3.8", install_requires=[ "typer>=0.9.0", "yt-dlp>=2023.1.6", "google-api-python-client>=2.70.0", "google-auth-oauthlib>=0.7.1", "pymonad>=2.4.0", "pyyaml>=6.0", ], entry_points={ "console_scripts": [ "playlist-downloader=cli:app", ], }, ) ---- === setup.py के मुख्य बिंदु 1. **मेटाडेटा**: नाम, संस्करण, लेखक, विवरण 2. **निर्भरताएँ**: आवश्यक पैकेजों की सूची 3. **प्रवेश बिंदु**### ग्रेडल एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } ``` : CLI कमांड्स उजागर 1. **वर्गीकरणकर्ता**PyPI के लिए मेटाडेटा == गिटहब सीक्रेट्स के साथ सुरक्षा === PyPI टोकन की कॉन्फ़िगरेशन 1. **PyPI पर API टोकन बनाएं**: - PyPI पर लॉग इन करें - जाएँ Account Settings > API tokens - Créez un nouveau token avec les permissions appropriées 1. **GitHub में सीक्रेट जोड़ें**: - रिपॉज़िटरी सेटिंग्स > सीक्रेट्स और चर > क्रियाएँ - एक नया सीक्रेट नामित करें`PYPI_API_TOKEN` अपना PyPI टोकन पेस्ट करें [plantuml, secrets-flow, svg] ---- @startuml !theme plain actor Developer as dev participant "गिटहब रिपॉजिटरी" as repo participant "GitHub Actions" as actions participant PyPI dev -> repo : Configure PYPI_API_TOKEN secret repo -> actions : Trigger CD pipeline on release actions -> actions : Access secret securely actions -> PyPI : Authenticate with token PyPI -> PyPI : Validate and publish package note over actions, PyPI Token never exposed in logs Automatic rotation possible end note @enduml ---- == पूर्ण तैनाती वर्कफ़्लो === डिप्लॉयमेंट अनुक्रम [plantuml, deployment-sequence, svg] ---- @startuml !theme plain actor Developer as dev participant "Local Git" as git participant "GitHub" as github participant "GitHub Actions" as actions participant PyPI participant "End Users" as users dev -> git : git tag v1.0.0 dev -> git : git push origin v1.0.0 git -> github : Push tag dev -> github : Create release from tag github -> actions : Trigger CD pipeline actions -> actions : Checkout code actions -> actions : Setup Python environment actions -> actions : Install build tools actions -> actions : Build distributions (sdist + wheel) actions -> PyPI : Upload to PyPI with token PyPI -> PyPI : Validate and publish users -> PyPI : pip install playlist-downloader note over dev, github Release creation can be automated or done manually through GitHub UI end note @enduml ---- === पाइपलाइन की स्थिति [plantuml, pipeline-states, svg] ---- @startuml !theme plain [*] --> Idle Idle --> CI_Running : Push/PR created CI_Running --> CI_Success : All checks pass CI_Running --> CI_Failed : Linting/Tests fail CI_Success --> Idle : Merge completed CI_Failed --> Idle : Fix and retry Idle --> CD_Running : Release published CD_Running --> CD_Success : Package published CD_Running --> CD_Failed : Build/Upload error CD_Success --> Idle : Package available on PyPI CD_Failed --> Idle : Fix and retry release note on link #red : Blocks merge note on link #green : Allows deployment @enduml ---- == अच्छी प्रथाएँ और अनुकूलन === 1. संस्करण प्रबंधन सार्थक Git टैग्स का उपयोग करें : ```bash ---- ---- git tag -a v1.2.3 -m "Release version 1.2.3" git push origin v1.2.3 ---- === 2. मैट्रिक्स परीक्षण बहुत से Python संस्करणों पर परीक्षण करने के लिए: ---- strategy: matrix: python-version: [3.8, 3.9, "3.10", "3.11"] === 3. Cache des Dépendances बिल्ड्स को कैश के साथ तेज़ करें : ```yaml ---- ---- - name: Cache pip dependencies uses: actions/cache@v3 with: path: ~/.cache/pip key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }} ---- === 4. परिनियोजन पर्यावरण गिटहब वातावरणों का उपयोग नियंत्रित तैनाती के लिए करें : ---- jobs: deploy: environment: production runs-on: ubuntu-latest == उपयोग केस और आर्किटेक्चर === केस उपयोग आरेख [plantuml, use-cases, svg] ---- @startuml !theme plain left to right direction actor "डेवलपर" as dev actor "GitHub Actions" as ga actor "End User" as user package "CI/CD प्रणाली" { usecase "लिंटिंग चलाएँ" as lint usecase "टेस्ट निष्पादित करें" as test usecase "### gradle का एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" as build usecase "PyPI पर प्रकाशित करें" as publish usecase "Create Release" as release } dev --> lint : Pushes code dev --> test : Pushes code dev --> release : Creates release ga --> build : On release trigger ga --> publish : After successful build user --> publish : Downloads package lint .> test : triggers test .> build : on success build .> publish : on success @enduml ---- === डिप्लॉयमेंट आर्किटेक्चर [plantuml, deployment-architecture, svg] ---- @startuml !theme plain cloud "GitHub" { [Source Repository] [GitHub Actions] [Secrets Store] } cloud "PyPI" { [Package Registry] [Distribution Files] } node "CI/CD पाइपलाइन" { [Linting] [Testing] [Building] [Publishing] } [Source Repository] --> [GitHub Actions] : Triggers [GitHub Actions] --> [Linting] [Linting] --> [Testing] [Testing] --> [Building] [Building] --> [Publishing] [Publishing] --> [Package Registry] : Uploads [Secrets Store] --> [Publishing] : Provides token note as N1 Secure token-based authentication end note [Secrets Store] .. N1 @enduml ---- == मॉनिटरिंग और डिबगिंग === लॉग्स और मॉनिटरिंग GitHub Actions प्रत्येक चरण के लिए विस्तृत लॉग प्रदान करता है। डीबग करने के लिए : 1. **लॉग्स की जाँच करें**हर स्टेप का 2. **डिबग को सक्रिय करें**साथ`ACTIONS_STEP_DEBUG` 3. **आर्टिफैक्ट्स का उपयोग करें**बिल्ड फ़ाइलों को सहेजने के लिए ```yaml ---- ---- - name: Upload build artifacts uses: actions/upload-artifact@v3 if: failure() with: name: build-logs path: build/ ---- === सूचनाएँ स्लैक या ईमेल सूचनाएँ जोड़ें : ---- - name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: ${{ job.status }} webhook_url: ${{ secrets.SLACK_WEBHOOK }} == निष्कर्ष गिटहब एक्शंस के साथ एक मजबूत CI/CD पाइपलाइन स्थापित करने से विकास अनुभव में रैडिकल परिवर्तन आ जाता है। लिंटिंग, परीक्षण और तैनाती को स्वचालित करके, आप: - **त्रुटियों को कम करें**उत्पादन में - **चक्रों को तेज़ करें**विकास का - **विश्वास में सुधार लाएँ**आपके रिलीज़ में - **सहयोग को सुगम बनाएँ**में टीम इस पाइपलाइन को विभिन्न प्रकार के Python प्रोजेक्ट्स के लिए लिंटिंग टूल्स, टेस्ट फ्रेमवर्क और डिप्लॉयमेंट गंतव्यों को समायोजित करके अनुकूलित किया जा सकता है। इन वर्कफ़्लो को कॉन्फ़िगर करने के प्रारंभिक निवेश को समय की बचत और तैनाती के दौरान मैन्युअल त्रुटियों में कमी के माध्यम से तेज़ी से पुनः प्राप्त किया जाता है। == पूरक संसाधन - https://docs.github.com/en/actions[GitHub Actions दस्तावेज़] - https://packaging.python.org/[Python पैकेजिंग गाइड] - https://docs.pytest.org/[Pytest दस्तावेज़] - https://docs.astral.sh/ruff/[दस्तावेज़ Ruff] - https://twine.readthedocs.io/[दस्तावेज़ीकरण Twine] �✅ कार्यात्मक पाइपलाइन पहुँच गई ! अब आपके पास एक सरल CI/CD पाइपलाइन है जो आपको अपने टेस्ट को स्वचालित करने और अपने Python पैकेज को PyPI पर GitHub Actions से सीधे प्रकाशित करने की अनुमति देती है। हालाँकि, यह पाइपलाइन स्वैच्छिक रूप से न्यूनतम रखी गई है। यह अभी तक पेशेवर संदर्भ में आवश्यक कुछ पहलुओं को कवर नहीं करती : Python के कई संस्करणों के परीक्षण, स्वचालित सुरक्षा विश्लेषण टेस्ट PyPI के माध्यम से धीरे-धीरे तैनाती, पाइपलाइन की निगरानी और मेट्रिक्स, संस्करण नियंत्रण का स्वचालन और आधुनिक सर्वोत्तम प्रथाओं का एकीकरण (pyproject.toml) अगले भाग में, हम अगले स्तर पर पहुँचेंगे। आप सीखेंगे कि इस बुनियादी पाइपलाइन को एक वास्तविक औद्योगिक तैनाती श्रृंखला में बदलें, जो मजबूत, सुरक्षित हो और उत्पादन के Python प्रोजेक्ट्स के लिए तैयार हो।</code></pre> </div> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0084_disco_bot_discord_python_post.html Wed, 16 Jul 2025 00:00:00 +0000 blog/2025/0084_disco_bot_discord_python_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_संदर्भ_और_वर्तमान_चुनौतियाँ">संदर्भ और वर्तमान चुनौतियाँ</a> <ul class="sectlevel2"> <li><a href="#_संगीत_apis_का_विकास">संगीत APIs का विकास</a></li> <li><a href="#_लॉग_चालित_विकास_की_पद्धति">लॉग-चालित विकास की पद्धति</a></li> </ul> </li> <li><a href="#_सैद्धांतिक_वास्तुकला">सैद्धांतिक वास्तुकला</a></li> <li><a href="#_स्टैक_तकनीक_और_फ़ंक्शनल_पैराडाइम">स्टैक तकनीक और फ़ंक्शनल पैराडाइम</a> <ul class="sectlevel2"> <li><a href="#_तकनीकी_विकल्प">तकनीकी विकल्प</a></li> <li><a href="#_लागू_कार्यात्मक_सिद्धांत">लागू कार्यात्मक सिद्धांत</a></li> </ul> </li> <li><a href="#_agile_पद्धति_और_बैकलॉग">Agile पद्धति और बैकलॉग</a> <ul class="sectlevel2"> <li><a href="#_एपिक_मुख्य">एपिक मुख्य</a> <ul class="sectlevel3"> <li><a href="#_epic_1_आधारभूत_संरचना_बॉट_discord">Epic 1: आधारभूत संरचना बॉट Discord</a></li> <li><a href="#_epic_2_स्पोटिफ़ाई_का_एकीकरण">Epic 2 : स्पोटिफ़ाई का एकीकरण</a></li> <li><a href="#_epic_3_youtube_का_एकीकरण">Epic 3 : YouTube का एकीकरण</a></li> <li><a href="#_epic_4_संगीत_विशेषताएँ">Epic 4 : संगीत विशेषताएँ</a></li> </ul> </li> <li><a href="#_विस्तृत_उपयोगकर्ता_कहानियाँ">विस्तृत उपयोगकर्ता कहानियाँ</a> <ul class="sectlevel3"> <li><a href="#_us1_1_बॉट_की_इनिशियलाइज़ेशन">US1.1 : बॉट की इनिशियलाइज़ेशन</a></li> <li><a href="#_us2_1_spotify_की_स्मार्ट_खोज">US2.1 : Spotify की स्मार्ट खोज</a></li> <li><a href="#_us3_1_निष्कर्षण_यूट्यूब_लचीली">US3.1 : निष्कर्षण यूट्यूब लचीली</a></li> </ul> </li> </ul> </li> <li><a href="#_approche_log_driven_development">Approche Log Driven Development</a> <ul class="sectlevel2"> <li><a href="#_लॉगिंग_रणनीति">लॉगिंग रणनीति</a></li> <li><a href="#_लॉग्स_की_संरचना">लॉग्स की संरचना</a></li> <li><a href="#_exemple_de_log_design">Exemple de Log Design</a></li> </ul> </li> <li><a href="#_pydantic_के_साथ_सत्यापन_आर्किटेक्चर">Pydantic के साथ सत्यापन आर्किटेक्चर</a> <ul class="sectlevel2"> <li><a href="#_डेटा_मॉडल">डेटा मॉडल</a></li> </ul> </li> <li><a href="#_कार्यात्मक_त्रुटि_प्रबंधन">कार्यात्मक त्रुटि प्रबंधन</a> <ul class="sectlevel2"> <li><a href="#_monades_और_error_handling">Monades और Error Handling</a></li> </ul> </li> <li><a href="#_प्रतिबंधों_से_बचने_की_रणनीति">प्रतिबंधों से बचने की रणनीति</a> <ul class="sectlevel2"> <li><a href="#_बहु_स्रोत_दृष्टिकोण">बहु-स्रोत दृष्टिकोण</a></li> </ul> </li> <li><a href="#_आवर्ती_विकास_योजना">आवर्ती विकास योजना</a> <ul class="sectlevel2"> <li><a href="#_स्प्रिंट_योजना">स्प्रिंट योजना</a></li> <li><a href="#_गुणवत्ता_मेट्रिक्स">गुणवत्ता मेट्रिक्स</a></li> </ul> </li> <li><a href="#_तैनाती_और_मॉनिटरिंग">तैनाती और मॉनिटरिंग</a> <ul class="sectlevel2"> <li><a href="#_उत्पादन_वास्तुकला">उत्पादन वास्तुकला</a></li> <li><a href="#_प्रोएक्टिव_मॉनिटरिंग">प्रोएक्टिव मॉनिटरिंग</a></li> </ul> </li> <li><a href="#_निष्कर्ष_और_संभावनाएँ">निष्कर्ष और संभावनाएँ</a> <ul class="sectlevel2"> <li><a href="#_अगले_चरण">अगले चरण</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_परिचय"><a class="anchor" href="#_परिचय"></a>परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>Discord बॉट विकसित करने की प्रक्रिया जिसमें Spotify और YouTube APIS का एकीकरण होता है, एक आधुनिक तकनीकी चुनौती पेश करता है, विशेषकर हालिया प्रतिबंधों और प्लेटफ़ॉर्म के विकास के प्रकाश में। यह लेख एक पद्धति-आधारित दृष्टिकोण प्रस्तुत करता है जो के आधार पर<strong>लॉग-आधारित विकास</strong>(LDD), टेस्ट-चालित विकास का एक विस्तार, फ़ंक्शनल प्रोग्रामिंग पैराडाइम में Python के साथ लागू।</p> </div> <div class="paragraph"> <p>हमारा लक्ष्य: एक मजबूत, बनाए रखने योग्य और विस्तारशील बॉट बनाना जो वर्तमान संगीत APIs की सीमाओं को नेविगेट कर सके और Discord पर एक सुचारू उपयोगकर्ता अनुभव प्रदान कर सके।</p> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ_और_वर्तमान_चुनौतियाँ"><a class="anchor" href="#_संदर्भ_और_वर्तमान_चुनौतियाँ"></a>संदर्भ और वर्तमान चुनौतियाँ</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_संगीत_apis_का_विकास"><a class="anchor" href="#_संगीत_apis_का_विकास"></a>संगीत APIs का विकास</h3> <div class="paragraph"> <p>संगीत प्लेटफ़ॉर्म ने अपनी एक्सेस नीतियों को काफी कड़ा कर दिया है:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Spotify</strong>: मेटाडेटा तक पहुँच पर प्रतिबंध, कोटा सीमा</p> </li> <li> <p><strong>YouTube</strong>: एंटी-बॉट नीति मजबूत, प्रमाणीकरण की जटिलता</p> </li> <li> <p><strong>विवाद</strong>: नई सुरक्षा और प्रदर्शन आवश्यकताएँ</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_लॉग_चालित_विकास_की_पद्धति"><a class="anchor" href="#_लॉग_चालित_विकास_की_पद्धति"></a>लॉग-चालित विकास की पद्धति</h3> <div class="paragraph"> <p>LDD टडी को बढ़ाती है, लॉग्स को विकास के केंद्र में रखकर :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>लॉग्स की परिभाषा</strong>कार्यान्वयन से पहले</p> </li> <li> <p><strong>अवलोकन द्वारा सत्यापन</strong>अपेक्षित व्यवहार</p> </li> <li> <p><strong>पूर्ण ट्रेसेबिलिटी</strong>कुछ डेटा प्रवाह</p> </li> <li> <p><strong>प्रोएक्टिव डिबगिंग</strong>त्रुटियों की आशा में</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सैद्धांतिक_वास्तुकला"><a class="anchor" href="#_सैद्धांतिक_वास्तुकला"></a>सैद्धांतिक वास्तुकला</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-f1d31f810392545930e5846c4a418193.png" alt="Diagram" width="777" height="618"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_स्टैक_तकनीक_और_फ़ंक्शनल_पैराडाइम"><a class="anchor" href="#_स्टैक_तकनीक_और_फ़ंक्शनल_पैराडाइम"></a>स्टैक तकनीक और फ़ंक्शनल पैराडाइम</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_तकनीकी_विकल्प"><a class="anchor" href="#_तकनीकी_विकल्प"></a>तकनीकी विकल्प</h3> <div class="paragraph"> <p>हमारा स्टैक फंक्शनल प्रोग्रामिंग के इर्द-गिर्द घूमता है:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>PyMonade</strong></dt> <dd> <p>साइड इफ़ेक्ट्स का प्रबंधन और फ़ंक्शनों का संयोजन</p> </dd> <dt class="hdlist1"><strong>Pydantic</strong></dt> <dd> <p>टाइप-सेप डेटा मान्यता और सीरियलाइज़ेशन</p> </dd> <dt class="hdlist1"><strong>Asyncio</strong></dt> <dd> <p>असिंक्रोनस प्रोग्रामिंग APIs के लिए</p> </dd> <dt class="hdlist1"><strong>Structlog</strong></dt> <dd> <p>संरचित लॉगिंग LDD के लिए</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_लागू_कार्यात्मक_सिद्धांत"><a class="anchor" href="#_लागू_कार्यात्मक_सिद्धांत"></a>लागू कार्यात्मक सिद्धांत</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-23984f615f87034b3a75a30579e94d0f.png" alt="Diagram" width="690" height="554"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_agile_पद्धति_और_बैकलॉग"><a class="anchor" href="#_agile_पद्धति_और_बैकलॉग"></a>Agile पद्धति और बैकलॉग</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_एपिक_मुख्य"><a class="anchor" href="#_एपिक_मुख्य"></a>एपिक मुख्य</h3> <div class="paragraph"> <p>हमारा विकास 4 प्रमुख एपिक्स के इर्द-गिर्द आयोजित है:</p> </div> <div class="sect3"> <h4 id="_epic_1_आधारभूत_संरचना_बॉट_discord"><a class="anchor" href="#_epic_1_आधारभूत_संरचना_बॉट_discord"></a>Epic 1: आधारभूत संरचना बॉट Discord</h4> <div class="paragraph"> <p><strong>व्यवसाय मूल्य</strong> : आधार मजबूत और विस्तारयोग्य</p> </div> <div class="paragraph"> <p><strong>स्वीकृति मानदंड</strong> : - स्थिर Discord कनेक्शन, पुनः कनेक्शन प्रबंधन के साथ - मॉड्यूलर कमांड सिस्टम - एकीकृत संरचित लॉगिंग - केंद्रीकृत त्रुटि प्रबंधन</p> </div> </div> <div class="sect3"> <h4 id="_epic_2_स्पोटिफ़ाई_का_एकीकरण"><a class="anchor" href="#_epic_2_स्पोटिफ़ाई_का_एकीकरण"></a>Epic 2 : स्पोटिफ़ाई का एकीकरण</h4> <div class="paragraph"> <p><strong>व्यवसायिक मूल्य</strong>: संगीत मेटाडेटा तक पहुंच</p> </div> <div class="paragraph"> <p><strong>स्वीकृति मानदंड</strong> : - सुरक्षित OAuth2 प्रमाणीकरण स्मार्ट कैश के साथ ट्रैक्स की खोज - API कोटा प्रबंधन नेटवर्क त्रुटियों पर फ़ॉलबैक</p> </div> </div> <div class="sect3"> <h4 id="_epic_3_youtube_का_एकीकरण"><a class="anchor" href="#_epic_3_youtube_का_एकीकरण"></a>Epic 3 : YouTube का एकीकरण</h4> <div class="paragraph"> <p><strong>व्यवसायिक मूल्य</strong> : ऑडियो सामग्री तक पहुंच</p> </div> <div class="paragraph"> <p><strong>स्वीकृति मानक</strong> : - प्रतिबंधों का क़ानूनी परिहार - अनुकूलित ऑडियो एक्सट्रैक्शन निजी/हटाए गए वीडियो का प्रबंधन - Respect des ToS YouTube</p> </div> </div> <div class="sect3"> <h4 id="_epic_4_संगीत_विशेषताएँ"><a class="anchor" href="#_epic_4_संगीत_विशेषताएँ"></a>Epic 4 : संगीत विशेषताएँ</h4> <div class="paragraph"> <p><strong>व्यवसाय मूल्य</strong> : पूर्ण उपयोगकर्ता अनुभव</p> </div> <div class="paragraph"> <p>स्वीकृति मानदंड : - उच्च गुणवत्ता ऑडियो लेक्चर - बुद्धिमान पढ़ने की क़्यू - Discord वॉयस कमांड - क्रॉस‑प्लेटफ़ॉर्म सिंक्रोनाइज़ेशन</p> </div> </div> </div> <div class="sect2"> <h3 id="_विस्तृत_उपयोगकर्ता_कहानियाँ"><a class="anchor" href="#_विस्तृत_उपयोगकर्ता_कहानियाँ"></a>विस्तृत उपयोगकर्ता कहानियाँ</h3> <div class="sect3"> <h4 id="_us1_1_बॉट_की_इनिशियलाइज़ेशन"><a class="anchor" href="#_us1_1_बॉट_की_इनिशियलाइज़ेशन"></a>US1.1 : बॉट की इनिशियलाइज़ेशन</h4> <div class="paragraph"> <p><strong>जैसे एक</strong> डेवलपर <strong>मैं चाहता हूँ</strong> एक डिस्कॉर्ड बॉट जो विश्वसनीय तरीके से जुड़ता है <strong>इसके लिए</strong> सेवा की उपलब्धता सुनिश्चित करना</p> </div> <div class="paragraph"> <p><strong>DoD (पूरा होने की परिभाषा)</strong> : - [ ] बॉट स्टार्टअप पर स्वचालित रूप से कनेक्ट होता है - [ ] स्ट्रक्चर्ड लॉग प्रत्येक चरण का दस्तावेज़ीकरण करते हैं विच्छेद होने पर स्वचालित पुनर्संयोजन - [ ] एकीकरण परीक्षण पास होते हैं</p> </div> </div> <div class="sect3"> <h4 id="_us2_1_spotify_की_स्मार्ट_खोज"><a class="anchor" href="#_us2_1_spotify_की_स्मार्ट_खोज"></a>US2.1 : Spotify की स्मार्ट खोज</h4> <div class="paragraph"> <p><strong>के रूप में</strong> Discord उपयोगकर्ता <strong>मैं</strong> Spotify के माध्यम से ट्रैक्स खोजना <strong>के लिए</strong> संगीत खोजने और साझा करने</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] आदेश`/search`कार्यात्मक - [ ] प्रासंगिक परिणाम मेटाडेटा के साथ - [ ] अनुरोधों को अनुकूलित करने के लिए स्थानीय कैश - [ ] API त्रुटियों का शालीन प्रबंधन</p> </div> </div> <div class="sect3"> <h4 id="_us3_1_निष्कर्षण_यूट्यूब_लचीली"><a class="anchor" href="#_us3_1_निष्कर्षण_यूट्यूब_लचीली"></a>US3.1 : निष्कर्षण यूट्यूब लचीली</h4> <div class="paragraph"> <p><strong>के रूप में</strong> प्रणाली <strong>मैं चाहता हूँ</strong> यूट्यूब ऑडियो को विश्वसनीय तरीके से निकालना <strong>के लिए</strong> सेवा की निरंतरता बनाए रखना</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Extraction sans violation des ToS - [ ] इष्टतम ऑडियो गुणवत्ता - [ ] भौगोलिक प्रतिबंधों का प्रबंधन - [ ] ऑपरेशनों के विस्तृत लॉग</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_approche_log_driven_development"><a class="anchor" href="#_approche_log_driven_development"></a>Approche Log Driven Development</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_लॉगिंग_रणनीति"><a class="anchor" href="#_लॉगिंग_रणनीति"></a>लॉगिंग रणनीति</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-33bca791609096cfd7cfaef40f1259bd.png" alt="Diagram" width="687" height="633"> </div> </div> </div> <div class="sect2"> <h3 id="_लॉग्स_की_संरचना"><a class="anchor" href="#_लॉग्स_की_संरचना"></a>लॉग्स की संरचना</h3> <div class="paragraph"> <p>हमारा LDD दृष्टिकोण संरचित लॉग्स का उपयोग करता है जिसमें समान्यात्मक स्तर होते हैं :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>ट्रेस</strong></dt> <dd> <p>विस्तृत डेटा प्रवाह</p> </dd> <dt class="hdlist1"><strong>डिबग</strong></dt> <dd> <p>फ़ंक्शन के आंतरिक स्थितियाँ</p> </dd> <dt class="hdlist1"><strong>सूचना</strong></dt> <dd> <p>सफल व्यवसाय संचालन</p> </dd> <dt class="hdlist1"><strong>चेतावनी</strong></dt> <dd> <p>खराब स्थितियाँ लेकिन नियंत्रित</p> </dd> <dt class="hdlist1"><strong>त्रुटि</strong></dt> <dd> <p>हस्तक्षेप की आवश्यकता वाली त्रुटियाँ</p> </dd> <dt class="hdlist1"><strong>(no output)</strong></dt> <dd> <p>सिस्टम विफलताएँ</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_exemple_de_log_design"><a class="anchor" href="#_exemple_de_log_design"></a>Exemple de Log Design</h3> <div class="paragraph"> <p>Spotify की खोज सुविधा को लागू करने से पहले, हम इसके लॉग्स को परिभाषित करते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">INFO: spotify.search.start query="bohemian rhapsody" user_id=123456 DEBUG: spotify.search.validation query_length=16 safe_chars=true DEBUG: spotify.search.api_call endpoint="/search" params={...} INFO: spotify.search.success results_count=15 duration_ms=340</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pydantic_के_साथ_सत्यापन_आर्किटेक्चर"><a class="anchor" href="#_pydantic_के_साथ_सत्यापन_आर्किटेक्चर"></a>Pydantic के साथ सत्यापन आर्किटेक्चर</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_डेटा_मॉडल"><a class="anchor" href="#_डेटा_मॉडल"></a>डेटा मॉडल</h3> <div class="paragraph"> <p>हमारी कार्यात्मक दृष्टिकोण प्रारंभिक सत्यापन को प्राथमिकता देता है :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-ebd4e1dfbd7b19d5a6054ecf213e9e2d.png" alt="Diagram" width="696" height="339"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_कार्यात्मक_त्रुटि_प्रबंधन"><a class="anchor" href="#_कार्यात्मक_त्रुटि_प्रबंधन"></a>कार्यात्मक त्रुटि प्रबंधन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_monades_और_error_handling"><a class="anchor" href="#_monades_और_error_handling"></a>Monades और Error Handling</h3> <div class="paragraph"> <p>PyMonad का उपयोग करके त्रुटियों का सुंदर प्रबंधन संभव है :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-9c75436a1e6a2d62a1bee6a3d76f9c26.png" alt="Diagram" width="467" height="494"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रतिबंधों_से_बचने_की_रणनीति"><a class="anchor" href="#_प्रतिबंधों_से_बचने_की_रणनीति"></a>प्रतिबंधों से बचने की रणनीति</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_बहु_स्रोत_दृष्टिकोण"><a class="anchor" href="#_बहु_स्रोत_दृष्टिकोण"></a>बहु-स्रोत दृष्टिकोण</h3> <div class="paragraph"> <p>API प्रतिबंधों के सामने, हम विविधीकरण रणनीति अपनाते हैं:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-22ce201786335de12a3ea5910f11bd8f.png" alt="Diagram" width="665" height="744"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_आवर्ती_विकास_योजना"><a class="anchor" href="#_आवर्ती_विकास_योजना"></a>आवर्ती विकास योजना</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_स्प्रिंट_योजना"><a class="anchor" href="#_स्प्रिंट_योजना"></a>स्प्रिंट योजना</h3> <div class="paragraph"> <p>हमारा विकास 2 सप्ताह के स्प्रिंट चक्र का पालन करता है :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>स्प्रिंट 1-2</strong></dt> <dd> <p>इंफ्रास्ट्रक्चर और डिस्कॉर्ड बॉट कोर</p> </dd> <dt class="hdlist1"><strong>स्प्रिंट 3-4</strong></dt> <dd> <p>Spotify के साथ LDD का एकीकरण</p> </dd> <dt class="hdlist1"><strong>स्प्रिंट 5-6</strong></dt> <dd> <p>यूट्यूब एकीकरण और परिहार</p> </dd> <dt class="hdlist1"><strong>स्प्रिंट 7-8</strong></dt> <dd> <p>उन्नत संगीत सुविधाएँ</p> </dd> <dt class="hdlist1"><strong>स्प्रिंट 9-10</strong></dt> <dd> <p>अनुकूलन और उत्पादन</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_गुणवत्ता_मेट्रिक्स"><a class="anchor" href="#_गुणवत्ता_मेट्रिक्स"></a>गुणवत्ता मेट्रिक्स</h3> <div class="paragraph"> <p>प्रत्येक स्प्रिंट का मूल्यांकन :</p> </div> <div class="ulist"> <ul> <li> <p><strong>लॉग कवरेज</strong>>90% महत्वपूर्ण पथों</p> </li> <li> <p><strong>API की विश्वसनीयता</strong>: <1% अप्रबंधित त्रुटियाँ</p> </li> <li> <p><strong>प्रदर्शन</strong>: <500ms औसत प्रतिक्रिया समय</p> </li> <li> <p><strong>रखरखाव क्षमता</strong>: चक्रीय जटिलता <10</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_तैनाती_और_मॉनिटरिंग"><a class="anchor" href="#_तैनाती_और_मॉनिटरिंग"></a>तैनाती और मॉनिटरिंग</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_उत्पादन_वास्तुकला"><a class="anchor" href="#_उत्पादन_वास्तुकला"></a>उत्पादन वास्तुकला</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-4cbca3e909d595589b6e714a88a8217e.png" alt="Diagram" width="938" height="381"> </div> </div> </div> <div class="sect2"> <h3 id="_प्रोएक्टिव_मॉनिटरिंग"><a class="anchor" href="#_प्रोएक्टिव_मॉनिटरिंग"></a>प्रोएक्टिव मॉनिटरिंग</h3> <div class="paragraph"> <p>LDD इंटेलिजेंट मॉनिटरिंग को सुगम बनाता है :</p> </div> <div class="ulist"> <ul> <li> <p><strong>लॉग पैटर्न पर आधारित अलर्ट</strong></p> </li> <li> <p><strong>व्यवहारिक असामान्यताओं का पता लगाना</strong></p> </li> <li> <p><strong>वास्तविक समय के व्यावसायिक मेट्रिक्स</strong></p> </li> <li> <p><strong>लॉग सहसंबंध द्वारा सहायता प्राप्त डिबगिंग</strong></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष_और_संभावनाएँ"><a class="anchor" href="#_निष्कर्ष_और_संभावनाएँ"></a>निष्कर्ष और संभावनाएँ</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह पद्धतिगत दृष्टिकोण कार्यात्मक प्रतिमान के लाभों को Log Driven Development की मजबूती के साथ जोड़ता है। यह हमें करने देता है :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>समस्याओं की भविष्यवाणी</strong>अग्रिम रूप से डिज़ाइन किए गए लॉग्स के कारण</p> </li> <li> <p><strong>गुणवत्ता बनाए रखें</strong>लगातार मान्यता के माध्यम से</p> </li> <li> <p><strong>जल्दी से अनुकूलित करना</strong>एपीआई परिवर्तनों के लिए</p> </li> <li> <p><strong>ट्रेसेबिलिटी सुनिश्चित करें</strong>संचालन का समापन</p> </li> </ol> </div> <div class="paragraph"> <p>इटरेटिव विकास और मॉड्यूलर वास्तुकला बदलते संगीत प्लेटफ़ॉर्म की बाधाओं के प्रति स्केलेबिलिटी सुनिश्चित करती हैं।</p> </div> <div class="sect2"> <h3 id="_अगले_चरण"><a class="anchor" href="#_अगले_चरण"></a>अगले चरण</h3> <div class="ulist"> <ul> <li> <p><strong>फ़ेज़ 1</strong>PyMonade के साथ कोर का कार्यान्वयन</p> </li> <li> <p><strong>फ़ेज़ 2</strong>: Spotify के साथ स्मार्ट कैश का एकीकरण</p> </li> <li> <p><strong>फ़ेज़ 3</strong>: समाधान YouTube लचीली</p> </li> <li> <p><strong>चरण ४</strong>: उन्नत सुविधाएँ और अनुकूलन</p> </li> </ul> </div> <div class="paragraph"> <p>यह मजबूत अवधारणात्मक आधार हमें तकनीकी चुनौतियों से निपटने और एक असाधारण उपयोगकर्ता अनुभव प्रदान करने में सक्षम बनाएगा।</p> </div> <hr> <div class="paragraph"> <p><strong>इस लेख के बाद एक तकनीकी श्रृंखला आएगी जिसमें प्रत्येक घटक के कार्यान्वयन का विस्तृत विवरण दिया जाएगा, कोड उदाहरणों और कार्यात्मक पैटर्न के साथ।</strong></p> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0083_cold_computer_post.html Tue, 15 Jul 2025 00:00:00 +0000 blog/2025/0083_cold_computer_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_इस_गाइड_का_उद्देश्य">इस गाइड का उद्देश्य</a></li> <li><a href="#_पूर्वापेक्षा">पूर्वापेक्षा</a></li> <li><a href="#_इंस्टॉल_और_कॉन्फ़िगर_करें_उपकरण">इंस्टॉल और कॉन्फ़िगर करें उपकरण</a> <ul class="sectlevel2"> <li><a href="#_lm_sensors_सेंसरों_का_पता_लगाने_के_लिए">lm-sensors सेंसरों का पता लगाने के लिए</a></li> <li><a href="#_tlp_स्मार्ट_ऊर्जा_प्रबंधक">tlp` : स्मार्ट ऊर्जा प्रबंधक</a></li> <li><a href="#_cpufrequtils_सीपीयू_की_आवृत्तियों_को_सीमित_करना">cpufrequtils` : सीपीयू की आवृत्तियों को सीमित करना</a></li> <li><a href="#_auto_cpufreq_सरलीकृत_गतिशील_प्रबंधन">auto-cpufreq` : सरलीकृत गतिशील प्रबंधन</a></li> <li><a href="#_thermald_स्वचालित_तापीय_संरक्षण">thermald` : स्वचालित तापीय संरक्षण</a></li> </ul> </li> <li><a href="#_वास्तविक_समय_में_निगरानी">वास्तविक समय में निगरानी</a> <ul class="sectlevel2"> <li><a href="#_sensors_कमांड_लाइन_में">sensors` कमांड लाइन में</a></li> <li><a href="#_विकल्प_gui_psensor">विकल्प GUI : `psensor</a></li> </ul> </li> <li><a href="#_अतिरिक्त_सुझाव">अतिरिक्त सुझाव</a></li> <li><a href="#_सिस्टम_को_साफ़_करके_अतिभार_को_सीमित_करना">सिस्टम को साफ़ करके अतिभार को सीमित करना</a></li> <li><a href="#_ज्यादा_आगे_जाने_के_लिए">ज्यादा आगे जाने के लिए</a></li> <li><a href="#_निष्कर्ष">�📚 निष्कर्ष</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>क्या आप महसूस करते हैं कि आपका लैपटॉप Ubuntu पर असामान्य रूप से गर्म हो रहा है ? यह लेख आपको एक विधि प्रस्तुत करता है<strong>सॉफ़्टवेयर</strong>पूरा के लिए<strong>ठंडा करना</strong>, <strong>निरीक्षण करना</strong> et <strong>तापमान को नियंत्रित करना</strong>आपकी मशीन का।</p> </div> </div> </div> <div class="sect1"> <h2 id="_इस_गाइड_का_उद्देश्य">इस गाइड का उद्देश्य</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>कंप्यूटर की वैश्विक तापमान को कम करें</p> </li> <li> <p>ऊर्जा प्रबंधन को अनुकूलित करें</p> </li> <li> <p>आलोचनात्मक घटकों (CPU, GPU, आदि) की निगरानी करें</p> </li> <li> <p>धीमी गति से बचें<strong>तापीय थ्रॉटलिंग</strong></p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="gestion_thermique.svg" alt="gestion thermique" width="392" height="298"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पूर्वापेक्षा">पूर्वापेक्षा</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>एक Ubuntu मशीन (20.04 या उससे ऊपर अनुशंसित)</p> </li> <li> <p>इंटरनेट कनेक्शन</p> </li> <li> <p>कमांड लाइन दक्षता (प्रारंभिक से मध्यम स्तर)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_इंस्टॉल_और_कॉन्फ़िगर_करें_उपकरण">इंस्टॉल और कॉन्फ़िगर करें उपकरण</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_lm_sensors_सेंसरों_का_पता_लगाने_के_लिए">lm-sensors सेंसरों का पता लगाने के लिए</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install lm-sensors sudo sensors-detect sensors</code></pre> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p>जवाब दें`YES`सभी प्रश्नों के लिए`sensors-detect`मॉड्यूल की पहचान करने के लिए</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_tlp_स्मार्ट_ऊर्जा_प्रबंधक">tlp` : स्मार्ट ऊर्जा प्रबंधक</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install tlp tlp-rdw sudo systemctl enable tlp sudo systemctl start tlp</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="tlp_etat.svg" alt="tlp etat" width="311" height="390"> </div> </div> </div> <div class="sect2"> <h3 id="_cpufrequtils_सीपीयू_की_आवृत्तियों_को_सीमित_करना">cpufrequtils` : सीपीयू की आवृत्तियों को सीमित करना</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install cpufrequtils cpufreq-info sudo cpufreq-set -g powersave</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><code>powersave</code>: आवृत्ति शिखरों को सीमित करता है</p> </li> <li> <p><code>performance</code>: शक्ति को प्राथमिकता देता है, तापमान के नुकसान पर</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_auto_cpufreq_सरलीकृत_गतिशील_प्रबंधन">auto-cpufreq` : सरलीकृत गतिशील प्रबंधन</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">git clone https://github.com/AdnanHodzic/auto-cpufreq.git cd auto-cpufreq sudo ./auto-cpufreq-installer sudo auto-cpufreq --install</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="auto_cpufreq_cycle.svg" alt="auto cpufreq cycle" width="189" height="298"> </div> </div> </div> <div class="sect2"> <h3 id="_thermald_स्वचालित_तापीय_संरक्षण">thermald` : स्वचालित तापीय संरक्षण</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install thermald sudo systemctl enable thermald sudo systemctl start thermald</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_वास्तविक_समय_में_निगरानी">वास्तविक समय में निगरानी</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sensors_कमांड_लाइन_में">sensors` कमांड लाइन में</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">watch -n 2 sensors</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_विकल्प_gui_psensor">विकल्प GUI : `psensor</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install psensor</code></pre> </div> </div> <div class="paragraph"> <p>सरल ग्राफ़िकल इंटरफ़ेस CPU, GPU, पंखों के लिए।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अतिरिक्त_सुझाव">अतिरिक्त सुझाव</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>भारी टैब्स और अनुप्रयोग बंद करें (उदा: ब्राउज़र)</p> </li> <li> <p>बैटरी पर तीव्र उपयोग से बचें</p> </li> <li> <p>प्रक्रियाओं की निगरानी करना माध्यम से`htop`(No output)</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install htop htop</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सिस्टम_को_साफ़_करके_अतिभार_को_सीमित_करना">सिस्टम को साफ़ करके अतिभार को सीमित करना</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt autoremove sudo apt autoclean sudo journalctl --vacuum-time=3d</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ज्यादा_आगे_जाने_के_लिए">ज्यादा आगे जाने के लिए</h2> <div class="sectionbody"> <div class="paragraph"> <p>आप एक सेवा बना सकते हैं`systemd`स्टार्टअप पर स्वचालित रूप से कुछ सेटिंग्स लागू करने के लिए कस्टम. क्या आप अगले लेख में एक उदाहरण चाहते हैं? मुझे बताइए !</p> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">�📚 निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>इन साधारण उपकरणों को संयोजित करके, आप हासिल करेंगे :</p> </div> <div class="ulist"> <ul> <li> <p>नियंत्रित CPU तापमान</p> </li> <li> <p>कम वेंटिलेशन शोर</p> </li> <li> <p>एक बेहतर स्वायत्तता</p> </li> </ul> </div> <div class="paragraph"> <p>अपने तापमान को नियमित रूप से निगरानी करना न भूलें, जिससे कोई अतितापन न हो।</p> </div> <div class="paragraph"> <p>(No output) अपने CPU को पिघलने से रोकना बेहतर है। (No output)</p> </div> </div> </div> https://cheroliv.com/blog/2025/0082_ui_struggle_post.html Mon, 14 Jul 2025 00:00:00 +0000 blog/2025/0082_ui_struggle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_युद्ध_का_मैदान_एक_मॉकअप_तीन_ब्राउज़र_बहुतेरे_रेंडर">युद्ध का मैदान : एक मॉकअप, तीन ब्राउज़र, बहुतेरे रेंडर</a></li> <li><a href="#_समस्या_1_सेक्शन_hero_की_उड़ती_हुई_कार्ड">समस्या 1: सेक्शन "Hero" की उड़ती हुई कार्ड</a></li> <li><a href="#_समस्या_2_कैनिबल_नेविगेशन_बार">समस्या 2 : कैनिबल नेविगेशन बार</a></li> <li><a href="#_समस्या_3_अराजक_टाइपोग्राफी">समस्या 3: अराजक टाइपोग्राफी</a></li> <li><a href="#_समस्या_4_नेविगेशन_बार_जो_बाहर_निकलती_है">समस्या 4 : नेविगेशन बार जो बाहर निकलती है</a></li> <li><a href="#_समस्या_5_अदृश्य_हैम्बर्गर_मेनू">समस्या 5: अदृश्य हैम्बर्गर मेनू</a></li> <li><a href="#_निष्कर्ष_अथक_डिबगिंग_के_सबक">निष्कर्ष: अथक डिबगिंग के सबक</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>पढ़ने का समय :</strong> लगभग 7 मिनट <strong>स्तर :</strong> मध्यवर्ती</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>इस विस्तृत केस स्टडी में, हम ब्राउज़र संगतता की सबसे सामान्य और कभी‑कभी सबसे निराशाजनक समस्याओं का विश्लेषण करेंगे जो Bootstrap 5.2 के साथ UI मॉकअप बनाने के दौरान सामना किए जाते हैं। फ्लेक्सबॉक्स प्रबंधन से लेकर फ़ॉन्ट रेंडरिंग की सूक्ष्मता तक, हमारा डिबगिंग यात्रा देखें कि फायरफ़ॉक्स के तहत एक विकृत डिज़ाइन को कैसे सभी ब्राउज़रों पर पिक्सेल‑परफेक्ट अनुभव में बदलें।</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_युद्ध_का_मैदान_एक_मॉकअप_तीन_ब्राउज़र_बहुतेरे_रेंडर">युद्ध का मैदान : एक मॉकअप, तीन ब्राउज़र, बहुतेरे रेंडर</h2> <div class="sectionbody"> <div class="paragraph"> <p>हर फ्रंट‑एंड डेवलपर को यह भावना होती है. घंटों की मेहनत के बाद मॉकअप आखिरकार परफेक्ट हो जाती है. संरेखण सटीक होते हैं, टाइपोग्राफी सुंदर होती है, एनिमेशन चिकनी होती हैं. हम संतोष की सांस लेते हैं, अपने काम को क्रोम (या ब्रेव, या एज) पर देखते हैं, फिर सावधानी बरतते हुए प्रोजेक्ट को फ़ायरफ़ॉक्स पर खोलते हैं. और उसी moment पर, आपदा आ जाती है. त element बाहर निकल जाते हैं, संरेखण टूट जाते हैं, फॉन्ट के आकार अव्यवस्थित हो जाते हैं…​ सुंदर सामंजस्य उड़ जाता है.</p> </div> <div class="paragraph"> <p>यह बिल्कुल वही परिदृश्य है जिसका सामना हमने एक नई पोर्टफ़ोलियो इंटरफेस विकसित करते समय किया। ज़रूरतें सरल थीं: एक आधुनिक, उत्तरदायी होम पेज, जिसमें थीम सेलेक्टर (हल्का, गहरा, और उच्च विपरीत), <strong>vanilla JavaScript</strong> का उपयोग करके और <strong>Bootstrap 5.2</strong> के नवीनतम संस्करण के साथ।</p> </div> <div class="paragraph"> <p>यह लेख चमत्कारिक समाधानों की सूची नहीं है। यह हमारे डिबगिंग सत्र का लॉगबुक है, ब्लिंक (Chromium, Brave) और गेको (Firefox) इंजनों के रेंडरिंग अंतर के "क्यों" में एक गहरा गोता, और यह प्रदर्शित करता है कि मजबूत और आधुनिक समाधान हमेशा जल्दबाजी में लगाए गए पैचों से बेहतर होते हैं।</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/usecase-debugging-firefox.svg" alt="usecase debugging firefox" width="1250" height="5544"> </div> <div class="title">Figure 1. उपयोग केस आरेख: डिबगिंग प्रक्रिया</div> </div> <div class="imageblock"> <div class="content"> <img src="./images/components-solution-architecture.svg" alt="components solution architecture" width="1209" height="5160"> </div> <div class="title">Figure 2. घटक आरेख: फ्रंट-एंड समाधान की वास्तुकला</div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_1_सेक्शन_hero_की_उड़ती_हुई_कार्ड">समस्या 1: सेक्शन "Hero" की उड़ती हुई कार्ड</h2> <div class="sectionbody"> <div class="paragraph"> <p>पहला बग भी सबसे स्पष्ट था. स्वागत अनुभाग ("hero") दो कॉलम से मिलकर बना है: बायाँ ओर मुख्य शीर्षक; दायाँ ओर एक परिचय कार्ड।</p> </div> <div class="ulist"> <ul> <li> <p><strong>लक्षण:</strong>Chrome और Brave पर, दोनों कॉलम लंबवत रूप से पूरी तरह से केंद्रित थे। फ़ायरफ़ॉक्स पर, दायाँ कार्ड अनियमित रूप से बाएँ पाठ के नीचे गिर रहा था।</p> </li> <li> <p><strong>जाँच :</strong>HTML कोड फिर भी सरल और सही लग रहा था, Bootstrap के मानक क्लासेस का उपयोग करके।</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><section id="home" class="hero-section"> <div class="container"> <!-- Cette ligne est la clé du problème --> <div class="row align-items-center min-vh-100"> <div class="col-lg-6"> <!-- Contenu de gauche --> </div> <div class="col-lg-6"> <!-- Carte de droite --> </div> </div> </div> </section></code></pre> </div> </div> <div class="paragraph"> <p>हमारा अनुकूलित CSS के लिए`.hero-section`परिभाषित कर रहा था`display: flex` et <code>align-items: center</code>, और कक्षा`min-vh-100`दिया गया था एक न्यूनतम ऊँचाई पंक्ति को (<code>div.row</code>). तो फ़ायरफ़ॉक्स ने कॉलम को केंद्रित करने से क्यों इनकार कर दिया ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>गहरा कारण :</strong>यह एक पाठ्यपुस्तक उदाहरण है कि रेंडर इंजन निहित ऊँचाइयों की व्याख्या कैसे करते हैं। La`<section>`की एक`min-height`, लेकिन नहीं`height`स्पष्ट. लागू करने के लिए`align-items-center`के भीतर`div.row`, Firefox को इस कंटेनर की संदर्भ ऊंचाई जानने की आवश्यकता है। जैसे उसके माता-पिता (<code>div.container</code> et la `<section>`खुद) की कोई ऊँचाई नहीं थी<strong>सख्त</strong>, Firefox खो गया था। Blink इंजन, अधिक उदार, की "deviner" करने की क्षमता रखता है और तत्वों को केंद्रित करने में सक्षम है। Gecko, विनिर्देश के प्रति अधिक पालन करने वाला, ऐसा नहीं करता।</p> </li> <li> <p><strong>हल :</strong>�ऊँचाई स्पष्ट करें। हमने मजबूर किया वह`.container` et le `.row`अपने संबंधित पैरेंट की 100% ऊँचाई लेने के लिए यूटिलिटी क्लास का उपयोग करना`h-100`Bootstrap का</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><section id="home" class="hero-section"> <div class="container h-100"> <div class="row align-items-center min-vh-100 h-100"> <!-- ... --> </div> </div> </section></code></pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p>जब एक`align-items`Flexbox लंबवत अक्ष पर अपेक्षा के अनुसार काम नहीं करता, हमेशा सुनिश्चित करें कि कंटेनर में एक ऊँचाई है (<code>height</code> ou <code>min-height</code>) परिभाषित और, यदि समस्या बनी रहती है (विशेषकर Firefox पर), सुनिश्चित करें कि मध्यवर्ती मातृ कंटेनर इस ऊँचाई को अच्छी तरह से प्रसारित करते हैं।</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_2_कैनिबल_नेविगेशन_बार">समस्या 2 : कैनिबल नेविगेशन बार</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">हीरो सेक्शन संरेखित होने के बाद, एक और समस्या सामने आई: नेविगेशन बार, जिसमें उसका वर्ग है`fixed-top`, शीर्षक पर आच्छादित हो रहा था. एक`padding-top: 80px`सेक्शन 'Hero' पर समाधान के रूप में लागू किया गया था।</div> <ul> <li> <p><strong>लक्षण :</strong> Le `padding`यह क्रोम पर पर्याप्त था, लेकिन फायरफ़ॉक्स पर नहीं, जहाँ शीर्षक हमेशा आंशिक रूप से छिपा रहता था।</p> </li> <li> <p><strong>गहरा कारण:</strong>एक "जादुई संख्या" का उपयोग (<code>80px</code>) यह एक बहुत खराब अभ्यास है। एक तत्व की ऊँचाई, जैसे कि नेविगेशन बार, कुछ पिक्सेल तक एक ब्राउज़र से दूसरे ब्राउज़र में बदल सकती है, क्योंकि फ़ॉन्ट रेंडरिंग, स्पेसिंग या उपयोगकर्ता विकल्पों में सूक्ष्म अंतर होते हैं। एक स्थिर मान पर निर्भर रहना एक नाज़ुक डिज़ाइन की रेसिपी है।</p> </li> <li> <p><strong>समाधान:</strong>JavaScript में एक गतिशील और अनफ़ेलिबल समाधान। हमने एक छोटा स्क्रिप्ट लिखा:</p> </li> <li> <p>पेज के रेंडर होने के बाद नेविगेशन बार की <strong>वास्तविक</strong> ऊँचाई मापें।</p> </li> <li> <p>इस मापी हुई ऊँचाई को लागू करें`padding-top`Hero" सेक्शन में</p> </li> <li> <p>इस फ़ंक्शन को हर बार विंडो के आकार बदलने पर फिर से चलाएँ ताकि बदलावों के अनुकूल बनाया जा सके (जैसे हैमबर्गर मेन्यू में स्विच करना).</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">document.addEventListener('DOMContentLoaded', function() { function adjustHeroPadding() { const navbar = document.querySelector('.navbar.fixed-top'); const heroSection = document.querySelector('.hero-section'); if (navbar && heroSection) { const navbarHeight = navbar.offsetHeight; heroSection.style.paddingTop = navbarHeight + 'px'; } } // Ajuster au chargement et au redimensionnement adjustHeroPadding(); window.addEventListener('resize', adjustHeroPadding); });</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/sequence-dynamic-padding.svg" alt="sequence dynamic padding" width="887" height="703"> </div> <div class="title">Figure 3. अनुक्रम आरेख: पैडिंग का गतिशील समायोजन</div> </div> <div class="paragraph"> <p>समांतर में, हमने बेशक नियम हटा दिया`padding-top: 80px;`हमारी फ़ाइल का`styles.css`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_3_अराजक_टाइपोग्राफी">समस्या 3: अराजक टाइपोग्राफी</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">आगामी चिंता ब्रांड छवि के लिए सबसे अधिक हानिकारक थी: मुख्य शीर्षक का आकार।</div> <ul> <li> <p><strong>लक्षण :</strong>फ़ायरफ़ॉक्स पर, "Développeur Formateur…​" शीर्षक का फ़ॉन्ट विशाल था, लगभग चौंकाने वाला, जबकि यह अन्य ब्राउज़र पर सामंजस्यपूर्ण थी।</p> </li> <li> <p><strong>गहरा कारण :</strong>शीर्षक ने एक क्लास का उपयोग किया`display-4`बूटस्ट्रैप का ये कक्षाएं प्रतिक्रियाशील फॉन्ट आकार का उपयोग करती हैं, जो अक्सर इकाई पर आधारित होती हैं`rem`फिर से, फ़ायरफ़ॉक्स का रेंडरिंग एल्गोरिदम, "Inter" फ़ॉन्ट के साथ संयुक्त, हमारे 1920x1080 रिज़ॉल्यूशन पर आकार की बहुत बड़ी गणना हो रही थी।</p> </li> <li> <p><strong>समाधान:</strong>CSS फ़ंक्शन के साथ नियंत्रण पुनः प्राप्त करें`clamp()<code>. यह सुविधा सुचारू टाइपोग्राफी के लिए एक क्रांति है। यह आपको तीन मानों के साथ एक फ़ॉन्ट आकार निर्धारित करने की अनुमति देता है: एक न्यूनतम आकार, एक "préférée" आकार (जो दृश्य की चौड़ाई के अनुसार अनुकूलित होता है,`vw</code>), और एक अधिकतम आकार।</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.hero-content h1 { color: var(--text-primary); line-height: 1.2; /* Min: 2rem Préférée: s'adapte à la vue Max: 2.5rem (40px) */ font-size: clamp(2rem, 1.2rem + 1.5vw, 2.5rem); }</code></pre> </div> </div> <div class="paragraph"> <p>के साथ`clamp()<code>, हम ब्राउज़र से कह सके: "स्क्रीन के साथ फ़ॉन्ट बढ़ाएँ, लेकिन अधिक नहीं<strong>कभी नहीं</strong>सीमा का`2.5rem</code>. इसने सभी ब्राउज़रों पर रेंडरिंग को तुरंत समायोजित कर दिया, जिससे हमें अंतिम दिखावट पर पूर्ण नियंत्रण मिल गया।</p> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_4_नेविगेशन_बार_जो_बाहर_निकलती_है">समस्या 4 : नेविगेशन बार जो बाहर निकलती है</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">यह वही समस्या है जिसने हमें सबसे अधिक परेशानी दी और अंततः रेंडरिंग के सूक्ष्म अंतरों की गहरी प्रकृति को प्रकट किया।</div> <ul> <li> <p><strong>लक्षण:</strong>1920x1080 स्क्रीन पर, मेनू के अंतिम लिंक ("Blog", "Contact") स्क्रीन के दाहिनी ओर धकेल दिए गए थे, लेकिन केवल फ़ायरफ़ॉक्स पर.</p> </li> <li> <p><strong>गहरा कारण:</strong>कई असफल प्रयासों के बाद (बूटस्ट्रैप के ब्रेकपॉइंट्स बदलने`lg` à <code>xl`फिर`xxl</code>) हमने समझा। कारण बूटस्ट्रैप की लॉजिक नहीं थी, बल्कि सरल चौड़ाई की गणना थी। फ़ायरफ़ॉक्स पर, सभी लिंक की चौड़ाइयों का योग, उनके शामिल`padding` et `margin`sub-pixel के स्तर तक, यह <strong>légèrement</strong> 1920 पिक्सेल से अधिक थी। Chrome पर, यही समान योग <strong>légèrement</strong> कम थी। हमें कुछ पिक्सेल की कमी थी।</p> </li> <li> <p><strong>समाधान:</strong>एक सर्जिकल स्तर के अंतराल में कमी। क्योंकि फ़ायरफ़ॉक्स को विशेष रूप से लक्षित करना पुराने CSS “hacks” के साथ बाहर के सवाल में था, एकमात्र समाधान एक सामान्य शैली खोजने का था जो हर जगह काम करती। हमने इसलिए प्रत्येक नेविगेशन लिंक के क्षैतिज मार्जिन और पैडिंग को थोड़ा कम कर दिया।</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">/* La version finale, légèrement plus compacte */ .navbar-nav .nav-link { font-size: 0.9rem; /* 90% de la taille de base */ color: var(--text-primary) !important; font-weight: 500; margin: 0 0.2rem; padding: 0.5rem 0.5rem !important; border-radius: 0.375rem; transition: all 0.3s ease; }</code></pre> </div> </div> <div class="paragraph"> <p>यह कमी, एकल तत्व पर नग्न आँख से लगभग अदृश्य, हमें सामूहिक रूप से आवश्यक स्थान प्रदान कर दिया जिससे कि सभी लिंक फ़ायरफ़ॉक्स के फ्रेम में आ जाएँ, जबकि अन्य ब्राउज़र पर लगभग समान दिखावट बनी रहे।</p> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_5_अदृश्य_हैम्बर्गर_मेनू">समस्या 5: अदृश्य हैम्बर्गर मेनू</h2> <div class="sectionbody"> <div class="paragraph"> <p>अंतिम समस्या, और कम नहीं थी, मोबाइल एक्सेसिबिलिटी से संबंधित थी।</p> </div> <div class="ulist"> <ul> <li> <p><strong>लक्षण :</strong>रिस्पॉन्सिव मोड (मेनू "hamburger") में, मेनू का आइकॉन थीम "dark" और "high-contrast" पर अदृश्य था।</p> </li> <li> <p><strong>गहरा कारण :</strong>Bootstrap 5 का मेनू आइकन एक`background-image`(एक URL में एन्कोड किया गया SVG)। डिफ़ॉल्ट रूप से, इसकी रेखा का रंग गहरा होता है, हल्के पृष्ठभूमि के लिए अनुकूलित। यह थीम परिवर्तन के अनुसार स्वचालित रूप से अनुकूल नहीं होती।</p> </li> <li> <p><strong>समाधान :</strong>Bootstrap के CSS चर का उपयोग करके आइकन को ओवरराइड करें। हमने एक नया SVG आइकन निर्धारित किया, लेकिन इस बार एक सफेद स्ट्रोक के साथ।<code>#ffffff</code>), और हमने इसे विशेष रूप से लागू किया जब विषय`dark` ou `high-contrast`वे सक्रिय हैं।</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">/* ====================== Fix pour l'icône du menu Burger (Blanc) ====================== */ [data-bs-theme="dark"] .navbar-toggler-icon, [data-bs-theme="high-contrast"] .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }</code></pre> </div> </div> <div class="admonitionblock important"> <table> <tr> <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> <td class="content"> <div class="paragraph"> <p>बूटस्ट्रैप घटकों जैसे इस का अनुकूलन अब CSS चर के ओवरराइड के माध्यम से बढ़ता जा रहा है (<code>--bs-component-property</code>), qui est la méthode la plus propre et la plus pérenne.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष_अथक_डिबगिंग_के_सबक">निष्कर्ष: अथक डिबगिंग के सबक</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह यात्रा, हालांकि कभी‑कभी निराशाजनक होती है, सीखों से भरपूर है। हर हल की गई समस्या वेब विकास के एक मौलिक सत्य को मजबूत करती है :<strong>कुछ भी एक कठोर बहु-ब्राउज़र परीक्षण का विकल्प नहीं है</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/mindmap-debugging-summary.svg" alt="mindmap debugging summary" width="999" height="866"> </div> <div class="title">Figure 4. Mindmap : डीबगिंग का सारांश और सीखे गए सबक</div> </div> <div class="paragraph"> <p>ये हैं सीख जो हमने रखी हैं :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Firefox एक सहयोगी है :</strong>इसकी CSS मानकों के प्रति सबसे बड़ी वफ़ादारी हमें अधिक मजबूत और कम अस्पष्ट कोड लिखने के लिए मजबूर करती है।</p> </li> <li> <p><strong>जादुई संख्याओं से बचें :</strong>स्थिर मान (जैसे`padding-top: 80px`) समय bombs हैं। हमेशा गतिशील समाधानों को प्राथमिकता दें या सापेक्ष (Flexbox, Grid)।</p> </li> <li> <p><strong>अपनी टाइपोग्राफी को मास्टर करें:</strong>इस्तेमाल करें`clamp()`अनुकूलन योग्य फ़ॉन्ट के आकार पर पूर्ण नियंत्रण रखने के लिए।</p> </li> <li> <p><strong>घटक के रूप में सोचें:</strong>बूटस्ट्रैप को अनुकूलित करने के लिए, उसके CSS चरों को ओवरराइड करें, बजाय फ्रेमवर्क को ओवरराइट करने वाले नियमों को गुणा करने के।</p> </li> <li> <p><strong>एक ब्राउज़र मत लक्ष्य कीजिए:</strong>समाधान लगभग कभी भी किसी विशिष्ट ब्राउज़र के लिए "hack" करने का नहीं होता, बल्कि एक सामान्य शैली खोजने का होती है जो हर जगह काम करती है।</p> </li> </ol> </div> <div class="paragraph"> <p>अंत में, मॉकअप अब मजबूत, पूर्वानुमान योग्य और टेम्प्लेटिंग सिस्टम में एकीकृत होने के लिए तैयार है। प्रत्येक ठीक किया गया बग असफलता नहीं था, बल्कि बेहतर गुणवत्ता वाले कोड की ओर एक कदम था।</p> </div> </div> </div> https://cheroliv.com/blog/2025/0081_TDD_Gradle_Properties_Fix_post.html Sun, 13 Jul 2025 00:00:00 +0000 blog/2025/0081_TDD_Gradle_Properties_Fix_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_समस्या_gradle_प्लगिन_के_यूनिट_टेस्ट्स_को_अलग_करना">समस्या: Gradle प्लगिन के यूनिट टेस्ट्स को अलग करना</a> <ul class="sectlevel2"> <li><a href="#_समस्या_की_वास्तुकला">समस्या की वास्तुकला</a></li> <li><a href="#_एक_गलत_अच्छे_विचार_की_आकर्षण">एक गलत अच्छे विचार की आकर्षण</a></li> </ul> </li> <li><a href="#_समाधान_संपत्ति_का_सिमुलेट_extrapropertiesextension_के_साथ">समाधान: संपत्ति का सिमुलेट <code>ExtraPropertiesExtension</code> के साथ</a> <ul class="sectlevel2"> <li><a href="#_चरण_1_extrapropertiesextension_को_समझें">चरण 1 : ExtraPropertiesExtension को समझें</a></li> <li><a href="#_चरण_2_परीक्षण_की_व्यवस्था_तैयारी">चरण 2 : परीक्षण की व्यवस्था - तैयारी</a></li> <li><a href="#_चरण_3_संपत्ति_का_इंजेक्शन">चरण 3 : संपत्ति का इंजेक्शन</a></li> <li><a href="#_चरण_4_समाधान_प्रवाह_आरेख">चरण 4: समाधान प्रवाह आरेख</a></li> <li><a href="#_चरण_5_पहलेपश्चात_तुलना">चरण 5: पहले/पश्चात तुलना</a></li> <li><a href="#_चरण_6_कई_टेस्ट_केसों_का_प्रबंधन">चरण 6: कई टेस्ट केसों का प्रबंधन</a></li> <li><a href="#_समाधान_का_अंतिम_वास्तुकला">समाधान का अंतिम वास्तुकला</a></li> </ul> </li> <li><a href="#_इस_दृष्टिकोण_के_लाभ">इस दृष्टिकोण के लाभ</a></li> <li><a href="#_अच्छे_अभ्यास_और_सलाह">अच्छे अभ्यास और सलाह</a> <ul class="sectlevel2"> <li><a href="#_एक_उपयोगिता_विधि_बनाएँ">एक उपयोगिता विधि बनाएँ</a></li> <li><a href="#_गुणों_की_पुष्टि">गुणों की पुष्टि</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div class="sect1"> <h2 id="_समस्या_gradle_प्लगिन_के_यूनिट_टेस्ट्स_को_अलग_करना">समस्या: Gradle प्लगिन के यूनिट टेस्ट्स को अलग करना</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle प्लगिन के लिए यूनिट परीक्षण लिखते समय, एक सामान्य चुनौती प्रोजेक्ट की कॉन्फ़िगरेशन के अनुसार निर्भरताओं को प्रबंधित करने की है, जैसी फ़ाइल में परिभाषित गुण`gradle.properties`. हमारे केस में, प्लगइन`jbake.ghpages`एक संपत्ति पढ़नी थी`site_config_path`सही ढंग से काम करने के लिए. कार्य के लिए यूनिट परीक्षण`initialize`प्लगइन के व्यवहार की जाँचना इस संपत्ति की उपस्थिति में करनी चाहिए थी।</p> </div> <div class="paragraph"> <p>मूल समस्या यह है कि यूनिट टेस्ट, डिज़ाइन द्वारा, <strong>इसोलेटेड</strong> होने चाहिए। का उपयोग`ProjectBuilder`Gradle का एक उदाहरण बनाता है`Project`मेमोरी में, फ़ाइल सिस्टम पर एक वास्तविक प्रोजेक्ट से पूरी तरह डिस्कनेक्टेड। इसलिए, इस टेस्ट इंस्टेंस द्वारा फ़ाइल को स्वचालित रूप से नहीं पढ़ा जाता।<code>gradle.properties`और इसलिए संपत्ति की जानकारी नहीं है`site_config_path</code>.</p> </div> <div class="sect2"> <h3 id="_समस्या_की_वास्तुकला">समस्या की वास्तुकला</h3> <div class="paragraph"> <p>निम्नलिखित आरेख परीक्षण वातावरण और फ़ाइल सिस्टम के बीच के असंपर्क को दर्शाता है :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/test-isolation-problem.svg" alt="test isolation problem" width="1192" height="5799"> </div> </div> </div> <div class="sect2"> <h3 id="_एक_गलत_अच्छे_विचार_की_आकर्षण">एक गलत अच्छे विचार की आकर्षण</h3> <div class="paragraph"> <p>एक पहला दृष्टिकोण हो सकता है कि एक फ़ाइल बनाई जाए`gradle.properties`फर्जी परीक्षण संसाधनों में।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">// src/test/resources/gradle.properties site_config_path=src/jbake/settings/site.yml</code></pre> </div> </div> <div class="paragraph"> <p>हालाँकि, यह विधि विफल होने के लिए नियत है क्योंकि`ProjectBuilder`यह फ़ाइल सिस्टम को कॉन्फ़िगरेशन फ़ाइलों की खोज के लिए स्कैन करने के लिए डिज़ाइन नहीं किया गया है। परीक्षण अलग-थलग रहेगा और इस फ़ाइल को अनदेखा कर देगा।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समाधान_संपत्ति_का_सिमुलेट_extrapropertiesextension_के_साथ">समाधान: संपत्ति का सिमुलेट <code>ExtraPropertiesExtension</code> के साथ</h2> <div class="sectionbody"> <div class="paragraph"> <p>इस समस्या का शानदार समाधान फ़ाइल को <strong>lire</strong> करने से नहीं है, बल्कि ऑब्जेक्ट में संपत्ति की उपस्थिति को <strong>simuler</strong> करने से है`Project`टेस्ट। Gradle इसके लिए एक शक्तिशाली तंत्र प्रदान करता है : <strong>अतिरिक्त गुण</strong> (Extra Properties).</p> </div> <div class="sect2"> <h3 id="_चरण_1_extrapropertiesextension_को_समझें">चरण 1 : ExtraPropertiesExtension को समझें</h3> <div class="paragraph"> <p>`ExtraPropertiesExtension`यह Gradle मॉडल के प्रत्येक ऑब्जेक्ट से जुड़ा एक कुंजी-मूल्य कंटेनर है। यह परियोजना, किसी कार्य, या किसी अन्य Gradle एक्सटेंशन में गतिशील रूप से गुण जोड़ने की अनुमति देता है।</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/extra-properties-architecture.svg" alt="extra properties architecture" width="533" height="436"> </div> </div> </div> <div class="sect2"> <h3 id="_चरण_2_परीक्षण_की_व्यवस्था_तैयारी">चरण 2 : परीक्षण की व्यवस्था - तैयारी</h3> <div class="paragraph"> <p>आइए, हम अपने यूनिट टेस्ट की बुनियादी संरचना बनाना शुरू करते हैं :</p> </div> <div class="listingblock"> <div class="title">JbakeGhPagesPluginTest.kt - Structure de base</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class JbakeGhPagesPluginTest { @TempDir lateinit var testProjectDir: File @Test fun `check initialize and config yaml file if not existing`() { // Étape 1 : Créer un projet de test isolé val project = ProjectBuilder.builder() .withProjectDir(testProjectDir) .build() // Suite des étapes... } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_चरण_3_संपत्ति_का_इंजेक्शन">चरण 3 : संपत्ति का इंजेक्शन</h3> <div class="paragraph"> <p>यह परियोजना में संपत्ति इंजेक्ट करने के लिए विस्तृत प्रक्रिया है :</p> </div> <div class="listingblock"> <div class="title">JbakeGhPagesPluginTest.kt - Injection complète</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `check initialize and config yaml file if not existing`() { // Étape 1 : Créer un projet de test isolé en mémoire val project = ProjectBuilder.builder() .withProjectDir(testProjectDir) .build() // Étape 2 : Récupérer le gestionnaire de propriétés supplémentaires val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) // Étape 3 : Définir la propriété requise pour ce test extra.set("site_config_path", "src/jbake/settings/site.yml") // Étape 4 : Vérifier que la propriété est bien injectée assertTrue(project.hasProperty("site_config_path")) // Étape 5 : Appliquer le plugin qui pourra maintenant accéder à la propriété project.plugins.apply("jbake.ghpages") // Étape 6 : Exécuter la tâche et vérifier son comportement val task: Task = project.tasks.findByName("initialize") .apply(::assertNotNull)!! // Étape 7 : Exécuter les actions de la tâche task.actions.forEach { it.execute(task) } // Étape 8 : Assertions finales assertEquals( "src/jbake/settings/site.yml", project.properties["site_config_path"], "La propriété devrait être accessible dans le projet" ) }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_चरण_4_समाधान_प्रवाह_आरेख">चरण 4: समाधान प्रवाह आरेख</h3> <div class="imageblock"> <div class="content"> <img src="./images/solution-flow.svg" alt="solution flow" width="242" height="807"> </div> </div> </div> <div class="sect2"> <h3 id="_चरण_5_पहलेपश्चात_तुलना">चरण 5: पहले/पश्चात तुलना</h3> <div class="imageblock"> <div class="content"> <img src="./images/before-after-comparison.svg" alt="before after comparison" width="1202" height="5771"> </div> </div> </div> <div class="sect2"> <h3 id="_चरण_6_कई_टेस्ट_केसों_का_प्रबंधन">चरण 6: कई टेस्ट केसों का प्रबंधन</h3> <div class="paragraph"> <p>विभिन्न परिदृश्यों का परीक्षण करने के लिए, विभिन्न कॉन्फ़िगरेशन के साथ कई परीक्षण बनाइए :</p> </div> <div class="listingblock"> <div class="title">Tests multiples avec configurations différentes</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class JbakeGhPagesPluginTest { @TempDir lateinit var testProjectDir: File private fun createProjectWithProperty(propertyValue: String?): Project { val project = ProjectBuilder.builder() .withProjectDir(testProjectDir) .build() // Injection conditionnelle de la propriété propertyValue?.let { value -> val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) extra.set("site_config_path", value) } return project } @Test fun `should work with valid property`() { val project = createProjectWithProperty("src/jbake/settings/site.yml") project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! task.actions.forEach { it.execute(task) } // Assertions pour le cas normal assertEquals("src/jbake/settings/site.yml", project.properties["site_config_path"]) } @Test fun `should handle missing property gracefully`() { val project = createProjectWithProperty(null) // Pas de propriété project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! // Le plugin devrait gérer l'absence de propriété assertDoesNotThrow { task.actions.forEach { it.execute(task) } } } @Test fun `should handle invalid property path`() { val project = createProjectWithProperty("invalid/path/to/config.yml") project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! // Test du comportement avec un chemin invalide assertThrows<FileNotFoundException> { task.actions.forEach { it.execute(task) } } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_समाधान_का_अंतिम_वास्तुकला">समाधान का अंतिम वास्तुकला</h3> <div class="imageblock"> <div class="content"> <img src="./images/final-architecture.svg" alt="final architecture" width="1204" height="5851"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_इस_दृष्टिकोण_के_लाभ">इस दृष्टिकोण के लाभ</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>पूर्ण पृथक्करण</strong>परीक्षण किसी बाहरी फ़ाइल पर निर्भर नहीं है। यह स्वतंत्र है और किसी भी पर्यावरण (स्थानीय, CI/CD आदि) में विश्वसनीय रूप से चलाया जा सकता है।</p> </li> <li> <p><strong>स्पष्टता और इरादा</strong>परीक्षण स्पष्ट रूप से अपने निष्पादन के लिए पूर्व शर्तों की घोषणा करता है। जो कोई भी परीक्षण पढ़ता है, वह तुरंत देखता है कि प्लगिन को संपत्ति की आवश्यकता होती है।`site_config_path`चलने के लिए.</p> </li> <li> <p><strong>रखरखावीयता</strong>: यदि संपत्ति का नाम बदलता है, तो बस परीक्षण में एक स्थान पर इसे अपडेट करना पर्याप्त है, परीक्षण कॉन्फ़िगरेशन फ़ाइलों को संशोधित किए बिना।</p> </li> <li> <p><strong>लचीलापन</strong>परीक्षण करना बहुत आसान हो जाता है विभिन्न परिदृश्यों का, क्योंकि प्रत्येक परीक्षण में इंजेक्ट की गई संपत्ति के मान को बस बदल दिया जाता है (वैध मान, अमान्य मान, अनुपस्थित, आदि)।</p> </li> <li> <p><strong>प्रदर्शन</strong>: फ़ाइलों की कोई पढ़ाई नहीं, सब मेमोरी में होता है, जो परीक्षणों को तेज़ बनाता है.</p> </li> <li> <p><strong>पुनरावृत्ति</strong>परीक्षण निर्धारित हैं क्योंकि वे फ़ाइल सिस्टम की स्थिति पर निर्भर नहीं करते।</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छे_अभ्यास_और_सलाह">अच्छे अभ्यास और सलाह</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_एक_उपयोगिता_विधि_बनाएँ">एक उपयोगिता विधि बनाएँ</h3> <div class="listingblock"> <div class="title">Méthode utilitaire pour la réutilisation</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class GradleTestUtils { companion object { fun createProjectWithProperties( projectDir: File, properties: Map<String, String> ): Project { val project = ProjectBuilder.builder() .withProjectDir(projectDir) .build() val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) properties.forEach { (key, value) -> extra.set(key, value) } return project } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_गुणों_की_पुष्टि">गुणों की पुष्टि</h3> <div class="listingblock"> <div class="title">Validation robuste</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `should validate property injection`() { val project = createProjectWithProperty("test-value") // Vérifications multiples assertTrue(project.hasProperty("site_config_path")) assertEquals("test-value", project.property("site_config_path")) assertNotNull(project.properties["site_config_path"]) // Vérification que la propriété est accessible par le plugin project.plugins.apply("jbake.ghpages") // ... reste du test }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>यूनिट परीक्षण वातावरण के लिए कॉन्फ़िगरेशन फ़ाइलें पढ़ने के लिए संघर्ष करने के बजाय, सर्वोत्तम अभ्यास आवश्यक स्थिति को अनुकरण करने से बना है। का उपयोग`ExtraPropertiesExtension`ग्रैडल गुणों को प्रोग्रामेटिक रूप से परिभाषित करने की विधि प्रभावी और विश्वसनीय प्लगइन यूनिट परीक्षण करने के लिए सबसे स्वच्छ और सबसे मजबूत तरीका है।</p> </div> <div class="paragraph"> <p>यह तकनीक एक बाह्य निर्भरता समस्या को एक सरल निर्भरता इंजेक्शन में बदल देती है, जो टेस्ट-ड्रिवन डेवलपमेंट (TDD) के दर्शन के मूल में होती है। यह परीक्षण पर्यावरण पर पूर्ण नियंत्रण प्रदान करती है जबकि उच्च गुणवत्ता वाले यूनिट परीक्षण के लिए आवश्यक अलगाव को बनाए रखती है।</p> </div> <div class="paragraph"> <p>इस लेख में प्रस्तुत आरेख और उदाहरण दिखाते हैं कि इस दृष्टिकोण को कैसे चरणबद्ध और प्रणालीगत तरीके से लागू किया जा सकता है, जिससे आपके Gradle प्लगइन के लिए एक मजबूत और बनाए रखने योग्य टेस्ट सूट बनाया जा सकता है।</p> </div> </div> </div> https://cheroliv.com/blog/2025/0079_gradle_tasks_tests_report_post.html Fri, 11 Jul 2025 00:00:00 +0000 blog/2025/0079_gradle_tasks_tests_report_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_allprojects_और_subprojects_के_साथ_configurations_को_केंद्रीकृत_करें">allprojects` और <code>subprojects</code> के साथ Configurations को केंद्रीकृत करें</a></li> <li><a href="#_sourceplantuml">[source,plantuml]</a> <ul class="sectlevel2"> <li><a href="#_ग्रैडल_एकीकरण_jbake_को_jbake_gradle_प्लगिन_का_उपयोग_करके_या_jbake_cli_को_सीधे_बुलाकर_gradle_बिल्ड्स_में_एकीकृत_किया_जा_सकता_है">ग्रैडल एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड्स में एकीकृत किया जा सकता है:</a></li> </ul> </li> <li><a href="#_initialize_a_new_jbake_project_jbake_i">Initialize a new JBake project jbake -i</a></li> <li><a href="#_bake_generate_the_site_jbake_b">Bake (generate) the site jbake -b</a></li> <li><a href="#_bake_and_serve_locally_jbake_b_s">Bake and serve locally jbake -b -s</a></li> <li><a href="#_bake_and_watch_for_changes_jbake_b_reset">Bake and watch for changes jbake -b --reset</a></li> <li><a href="#_specify_source_and_destination_jbake_source_folder_output_folder">Specify source and destination jbake source_folder output_folder</a></li> <li><a href="#_clear_the_output_directory_before_baking_jbake_b_output_reset">Clear the output directory before baking jbake -b . output --reset <code>`</code></a> <ul class="sectlevel2"> <li><a href="#_gradle_एकीकरण_jbake_को_gradle_निर्माण_में_jbake_gradle_प्लगइन_का_उपयोग_करके_या_jbake_cli_को_सीधे_बुलाकर_एकीकृत_किया_जा_सकता_है_kotlin_tasks_registerjavaexecbake_mainclass_setorg_jbake_launcher_main_classpath_configurationsjbake_args_listofprojectdir_absolutepath_builddirjbake">Gradle एकीकरण JBake को Gradle निर्माण में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है: <code><code>kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } </code></code></a></li> <li><a href="#_abstract_class_reportfunctionalteststask_opentestreporttask_init_description_फ़ायरफ़ॉक्स_में_फंक्शनल_टेस्ट_रिपोर्ट_खोलता_है_reportpath_buildreportstestsfunctionaltestindex_html">abstract class ReportFunctionalTestsTask : OpenTestReportTask() { init { description = "फ़ायरफ़ॉक्स में फंक्शनल टेस्ट रिपोर्ट खोलता है।" reportPath = "build/reports/tests/functionalTest/index.html" } }</a></li> <li><a href="#_sourcekotlin">[source,kotlin]</a></li> <li><a href="#_tasks_registercom_yourpackage_reportunitteststaskreporttests_tasks_registercom_yourpackage_reportfunctionalteststaskreportfunctionaltests">tasks.register\<com.yourpackage.ReportUnitTestsTask\>("reportTests") {} tasks.register\<com.yourpackage.ReportFunctionalTestsTask\>("reportFunctionalTests") {}</a> <ul class="sectlevel2"> <li><a href="#_रिपोर्ट_कार्यों_का_uml_आरेख_कोड_plantuml">रिपोर्ट कार्यों का UML आरेख (कोड PlantUML)</a></li> </ul> </li> <li><a href="#_sourceplantuml_2">[source,plantuml]</a></li> <li><a href="#_enduml">@enduml</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>सॉफ्टवेयर प्रोजेक्ट के लिए बिल्ड कार्यों का स्वचालन महत्वपूर्ण है, और Gradle, अपने Kotlin DSL के साथ, असाधारण लचीलापन प्रदान करता है। हमारी बातचीत के दौरान, हमने बिल्ड लॉजिक को केंद्रीकृत और पुनः उपयोग करने के तरीकों का पता लगाया, विशेष रूप से टेस्ट रिपोर्ट के लिए, का लाभ उठाते हुए<strong>सभी परियोजनाएँ</strong>, <strong>बिल्डSrc</strong>, और Kotlin में कस्टम कार्य</p> </div> </div> </div> <div class="sect1"> <h2 id="_allprojects_और_subprojects_के_साथ_configurations_को_केंद्रीकृत_करें">allprojects` और <code>subprojects</code> के साथ Configurations को केंद्रीकृत करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>ब्लॉक`allprojects` et `subprojects`आपके`build.gradle.kts`जड़ आपके मल्टी-मॉड्यूल प्रोजेक्ट में सामान्य कॉन्फ़िगरेशन लागू करने के लिए बुनियादी है।</p> </div> <div class="paragraph"> <p>*<code>allprojects { …​ }`कॉन्फ़िगरेशन लागू करें<strong>मूल परियोजना और इसकी सभी उप-परियोजनाओं के लिए</strong>। परिभाषित करने के लिए आदर्श`group</code>, एक`version`, या कुछ`repositories`सामान्य (No output)<code>subprojects { …​ }`कॉन्फ़िगरेशन लागू करें<strong>केवल उप-परियोजनाओं तक</strong>, मूल परियोजना को छोड़कर. परफेक्ट मॉड्यूल-विशिष्ट प्लगिन लागू करने के लिए (जैसे`java</code> ou <code>kotlin-jvm</code>) या आपकी लाइब्रेरी के सामान्य निर्भरताएँ।</p> </div> <div class="paragraph"> <p>यहाँ एक उदाहरणात्मक उदाहरण :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// build.gradle.kts (projet racine) plugins { base // Appliqué au projet racine } allprojects { group = "com.example" version = "1.0.0" repositories { mavenCentral() } tasks.withType<org.gradle.api.tasks.testing.Test> { useJUnitPlatform() // Configuration commune des tests pour tous les projets } } subprojects { apply(plugin = "java") apply(plugin = "org.jetbrains.kotlin.jvm") dependencies { implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8") } }</code></pre> </div> </div> <div class="paragraph"> <p>\==`buildSrc`बिल्ड तर्क का स्विस आर्मी चाकू</p> </div> <div class="paragraph"> <p>जब आपके कार्यों की तर्क जटिल हो जाती है या इसे पुनः उपयोग में लाने की आवश्यकता होती है,<strong>buildSrc</strong>यह प्राथमिक समाधान है। यह एक विशेष Gradle मॉड्यूल है जो मुख्य बिल्ड स्क्रिप्ट्स से पहले संकलित किया जाता है, जिससे इसकी क्लासेस आपके बिल्ड के पूरे क्लासपाथ पर उपलब्ध हो जाती हैं।</p> </div> <div class="paragraph"> <p>\=== क्यों उपयोग करें`buildSrc`कार्यों के लिए ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>पुन: उपयोगिता</strong>एक परिभाषित कार्य में`buildSrc`इस बिल्ड के किसी भी प्रोजेक्ट में लागू किया जा सकता है।</p> </li> <li> <p><strong>संगठन</strong>: बिल्ड कोड को सेंट्रलाइज़ करें, जिससे यह अधिक साफ़ और रखरखाव योग्य हो।</p> </li> <li> <p><strong>टाइप सुरक्षा और ऑटो‑कम्प्लीशन</strong>: कोटलिन कोड में`buildSrc`इसे संकलित किया जाता है, जो आपके IDE में त्रुटि जाँच और स्वत पूर्णता प्रदान करता है, विकास अनुभव को बेहतर बनाता है।</p> </li> </ul> </div> <div class="paragraph"> <p>\=== प्रवाह आरेख`buildSrc`(कोड PlantUML)</p> </div> <div class="paragraph"> <p>इस आरेख को उत्पन्न करने के लिए, नीचे दिया गया कोड कॉपी करें और PlantUML समर्थन करने वाले टूल में पेस्ट करें।</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourceplantuml">[source,plantuml]</h2> <div class="sectionbody"> <div class="paragraph"> <p>@startuml skinparam handwritten true skinparam monochrome true</p> </div> <div class="sect2"> <h3 id="_ग्रैडल_एकीकरण_jbake_को_jbake_gradle_प्लगिन_का_उपयोग_करके_या_jbake_cli_को_सीधे_बुलाकर_gradle_बिल्ड्स_में_एकीकृत_किया_जा_सकता_है">ग्रैडल एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड्स में एकीकृत किया जा सकता है:</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } ---- rectangle "ग्रैडल बिल्ड प्रक्रिया घटक "buildSrc" जैसे BS { फ़ाइल "MyCustomTask.kt" के रूप में T फ़ाइल "MyConventionPlugin.kt" के रूप में P } घटक "Root Project" के रूप में RP घटक "Subproject A" के रूप में SA घटक "Subproject B" को SB के रूप में } T --\> P : "is defined in" P --> RP : "इस पर लागू किया जाता है P --> SA : "लागू किया जाता है P --\> SB : "लागू किया जाता है RP --|\> SA : "शामिल RP --|\> SB : "शामिल RP -up-> BS : \"निर्भर करता है (बिल्ड लॉजिक के लिए)\ SA -up-> BS : "निर्माण तर्क के लिए (निर्भर करता है) SB -up-> BS : "निर्भर करता है (बिल्ड तर्क के लिए) T के दाएँ ओर नोट कस्टम टास्क वर्ग (उदाहरण: OpenTestReportTask) end note पी के दाएँ नोट कॉन्वेंशन प्लगइन वे कार्यों को दर्ज करते हैं end note ## @enduml \== अभिव्यक्त रिपोर्ट कार्यों का निर्माण टेस्ट रिपोर्ट्स को संभालने के लिए, हमने एक मॉड्यूलर दृष्टिकोण तैयार किया एक अमूर्त कार्य क्लास का उपयोग करके में`buildSrc`. आपकी आवश्यकताओं के अनुसार, यह वर्ग से विरासत में ले सकता है`DefaultTask` ou de `Exec`. \=== अमूर्त कार्य`OpenTestReportTask`(से विरासत में प्राप्त`DefaultTask`) यदि आपको फ़ाइल सिस्टम या अन्य Gradle API के साथ बातचीत करने वाली कस्टम Kotlin तर्क चाहिए, और फिर बाहरी कमांड चलाने की आवश्यकता हो, तो इस दृष्टिकोण की सिफारिश की जाती है। ## [source,kotlin] package com.yourpackage आयात org.gradle.api.DefaultTask आयात org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import java.io.File abstract class OpenTestReportTask : DefaultTask() {</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> <div class="paragraph"> <p>init { group = "verification" description = "Opens a test report in Firefox." dependsOn("check") // Assure que les rapports sont générés }</p> </div> <div class="paragraph"> <p>@get:Input abstract var reportPath: String</p> </div> <div class="paragraph"> <p>@TaskAction fun openReport() { val separator = File.separator val reportFile = project.layout.projectDirectory.asFile.toPath() .resolve(reportPath.replace("/", separator)) .toAbsolutePath() .toFile()</p> </div> <div class="literalblock"> <div class="content"> <pre>if (!reportFile.exists()) { logger.warn("Report file does not exist: $reportFile. Ensure 'check' ran.") return }</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre> project.exec { commandLine("firefox", "--new-tab", reportFile.absolutePath) } logger.lifecycle("Opened test report: ${reportFile.absolutePath}") }</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>## } \=== वास्तविक कार्यान्वयन ये क्लासेस अमूर्त कार्य से विरासत में लेती हैं और रिपोर्ट के विशिष्ट पथ को परिभाषित करती हैं। ## [source,kotlin] पैकेज com.yourpackage अमूर्त वर्ग ReportUnitTestsTask : OpenTestReportTask() { init { description = "फ़ायरफ़ॉक्स में यूनिट परीक्षण रिपोर्ट खोलता है। reportPath = "build/reports/tests/test/index.html } } package com.yourpackage = मेरा ब्लॉग पोस्ट शीर्षक 2026-01-15 :jbake-title: मेरा ब्लॉग पोस्ट शीर्षक :jbake-tags: java, gradle, ट्यूटोरियल :jbake-type: पोस्ट :jbake-status: प्रकाशित :jbake-date: 2026-01-15 :jbake-summary: पोस्ट का संक्षिप्त सारांश :jbake-author: लेखक का नाम :jbake-description: SEO के लिए मेटा विवरण :jbake-slug: my-blog-post-slug :jbake-reading-time: 5 मिनट :imagesdir: ./images :source-highlighter: highlight.js :icons: फ़ॉन्ट :toc: बाएँ :toclevels: 3 :toc-title: सामग्री की तालिका ### JBake CLI आदेश</pre> </div> </div> </div> </div> </div> <h1 id="_initialize_a_new_jbake_project_jbake_i" class="sect0">Initialize a new JBake project jbake -i</h1> <h1 id="_bake_generate_the_site_jbake_b" class="sect0">Bake (generate) the site jbake -b</h1> <h1 id="_bake_and_serve_locally_jbake_b_s" class="sect0">Bake and serve locally jbake -b -s</h1> <h1 id="_bake_and_watch_for_changes_jbake_b_reset" class="sect0">Bake and watch for changes jbake -b --reset</h1> <h1 id="_specify_source_and_destination_jbake_source_folder_output_folder" class="sect0">Specify source and destination jbake source_folder output_folder</h1> <h1 id="_clear_the_output_directory_before_baking_jbake_b_output_reset" class="sect0">Clear the output directory before baking jbake -b . output --reset <code>`</code></h1> <div class="sect2"> <h3 id="_gradle_एकीकरण_jbake_को_gradle_निर्माण_में_jbake_gradle_प्लगइन_का_उपयोग_करके_या_jbake_cli_को_सीधे_बुलाकर_एकीकृत_किया_जा_सकता_है_kotlin_tasks_registerjavaexecbake_mainclass_setorg_jbake_launcher_main_classpath_configurationsjbake_args_listofprojectdir_absolutepath_builddirjbake">Gradle एकीकरण JBake को Gradle निर्माण में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है: <code><code>kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } </code></code></h3> </div> <div class="sect1"> <h2 id="_abstract_class_reportfunctionalteststask_opentestreporttask_init_description_फ़ायरफ़ॉक्स_में_फंक्शनल_टेस्ट_रिपोर्ट_खोलता_है_reportpath_buildreportstestsfunctionaltestindex_html">abstract class ReportFunctionalTestsTask : OpenTestReportTask() { init { description = "फ़ायरफ़ॉक्स में फंक्शनल टेस्ट रिपोर्ट खोलता है।" reportPath = "build/reports/tests/functionalTest/index.html" } }</h2> <div class="sectionbody"> <div class="paragraph"> <p>\=== कार्यों का अभिलेख</p> </div> <div class="paragraph"> <p>में`build.gradle.kts`आपके मूल प्रोजेक्ट :</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourcekotlin">[source,kotlin]</h2> <div class="sectionbody"> </div> </div> <div class="sect1"> <h2 id="_tasks_registercom_yourpackage_reportunitteststaskreporttests_tasks_registercom_yourpackage_reportfunctionalteststaskreportfunctionaltests">tasks.register\<com.yourpackage.ReportUnitTestsTask\>("reportTests") {} tasks.register\<com.yourpackage.ReportFunctionalTestsTask\>("reportFunctionalTests") {}</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_रिपोर्ट_कार्यों_का_uml_आरेख_कोड_plantuml">रिपोर्ट कार्यों का UML आरेख (कोड PlantUML)</h3> <div class="paragraph"> <p>नीचे दिया गया कोड कॉपी करें और इसे PlantUML को समर्थन करने वाले उपकरण में पेस्ट करें।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_sourceplantuml_2">[source,plantuml]</h2> <div class="sectionbody"> <div class="paragraph"> <p>@startuml skinparam handwritten true skinparam monochrome true</p> </div> <div class="paragraph"> <p>abstract class DefaultTask { }</p> </div> <div class="paragraph"> <p>abstract class Exec { \+ commandLine(args: String…​) \+ exec() }</p> </div> <div class="paragraph"> <p>abstract class OpenTestReportTask extends DefaultTask { \+ group: String = "verification \+ description: String \+ dependsOn("check") \+ abstract reportPath: String \+ openReport() : void }</p> </div> <div class="paragraph"> <p>अमूर्त वर्ग AbstractJbakeExecTask Exec को विस्तारित करता है { \+ group: String = "verification \+ विवरण: स्ट्रिंग \+ dependsOn("check") \+ abstract reportRelativePath: String \+ exec() : void }</p> </div> <div class="paragraph"> <p>class ReportUnitTestsTask extends OpenTestReportTask { \+ reportPath: String = "build/reports/tests/test/index.html }</p> </div> <div class="paragraph"> <p>क्लास ReportFunctionalTestsTask विस्तार OpenTestReportTask { \+ reportPath: String = "build/reports/tests/functionalTest/index.html }</p> </div> <div class="paragraph"> <p>class ReportJbakeTestsTask extends AbstractJbakeExecTask { + reportRelativePath: String = "build/reports/tests/test/index.html }</p> </div> <div class="paragraph"> <p>class ReportJbakeFunctionalTestsTask extends AbstractJbakeExecTask { \+ reportRelativePath: String = "build/reports/tests/functionalTest/index.html }</p> </div> <div class="paragraph"> <p>OpenTestReportTask <-- ReportUnitTestsTask OpenTestReportTask <-- ReportFunctionalTestsTask</p> </div> <div class="paragraph"> <p>AbstractJbakeExecTask <-- ReportJbakeTestsTask AbstractJbakeExecTask <-- ReportJbakeFunctionalTestsTask</p> </div> <div class="paragraph"> <p>DefaultTask \<|-- OpenTestReportTask Exec \<|-- AbstractJbakeExecTask <mark>#</mark> ग्रेडल एकीकरण JBake को JBake ग्रेडल प्लगइन का उपयोग करके या JBake सीएलआई को सीधे बुलाकर ग्रेडल बिल्ड में एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }</p> </div> </div> </div> <div class="sect1"> <h2 id="_enduml">@enduml</h2> <div class="sectionbody"> <div class="paragraph"> <p>अमूर्त कार्य`AbstractJbakeExecTask`(विरासत प्राप्त`Exec`)</p> </div> <div class="paragraph"> <p>यदि आपका कार्य मुख्य रूप से परिवर्तनीय तर्कों के साथ एक बाहरी कमांड निष्पादित करने तक सीमित है, तो सीधे से विरासत में लेना**<mark>#</mark> ग्रेडल एकीकरण JBake को Gradle बिल्ड में JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }**यह अधिक सीधा है। ## [source,kotlin] package com.yourpackage import org.gradle.api.tasks.Exec import org.gradle.api.tasks.Input import java.io.File अमूर्त वर्ग AbstractJbakeExecTask : Exec() { ---- init { group = "verification" description = "Opens a Jbake project report in Firefox." dependsOn("check") } @get:Input abstract var reportRelativePath: String override fun exec() { val separator = File.separator val reportFile = project.layout.projectDirectory.asFile.toPath() .resolve(reportRelativePath.replace("/", separator)) .toAbsolutePath() .toFile() if (!reportFile.exists()) { logger.warn("Report file does not exist: $reportFile. Ensure 'check' ran.") return } commandLine("firefox", "--new-tab", reportFile.absolutePath) logger.lifecycle("Attempting to open report: ${reportFile.absolutePath}") super.exec() // Appelle la méthode exec() de la super-classe Exec } ## } \=== ठोस कार्यान्वयन के लिए`Exec` ## [source,kotlin] package com.yourpackage अमूर्त वर्ग ReportJbakeTestsTask : AbstractJbakeExecTask() init { फ़ायरफ़ॉक्स में Jbake यूनिट टेस्ट रिपोर्ट खोलता है। reportRelativePath = "build/reports/tests/test/index.html } } package com.yourpackage ## abstract class ReportJbakeFunctionalTestsTask : AbstractJbakeExecTask() { init { description = "फ़ायरफ़ॉक्स में फ़ंक्शनल टेस्ट रिपोर्ट खोलता है।" reportRelativePath = "build/reports/tests/functionalTest/index.html" } } \== कार्यों की दृश्यता`buildSrc` आप जो कार्य और वर्ग परिभाषित करते हैं**buildSrc**हैं : ***दृश्य और उपयोगी**आपके मुख्य बिल्ड के सभी प्रोजेक्ट्स (रूट और सब-प्रोजेक्ट्स)। इसलिए आप उपयोग कर सकते हैं`com.yourpackage.ReportUnitTestsTask`में`allprojects { ... }`. ***गैर-निष्पाद्य**सीधे buildSrc कार्यों के रूप में (उदाहरण के लिए,`gradle :buildSrc:reportTests`यदि कार्य को विशिष्ट रूप से में दर्ज नहीं किया गया है तो यह काम नहीं करेगा`buildSrc/build.gradle.kts`).`buildSrc`यह एक संकलन मॉड्यूल है, एक निष्पादन योग्य एप्लिकेशन मॉड्यूल नहीं, इन मुख्य बिल्ड कार्यों के लिए। \=== परीक्षणों के लिए एक रिपोर्ट चलाएँ`buildSrc`खुद Si `buildSrc`अपने स्वयं के परीक्षण होते हैं और यह रिपोर्ट उत्पन्न करता है, आप रिपोर्ट कार्य को सीधे में दर्ज कर सकते हैं`buildSrc/build.gradle.kts`(Empty) ## [source,kotlin] प्लगइंस { `kotlin-jvm` आप एक पेशेवर अनुवादक हैं। fr से hi तक अनुवाद करें। सभी बैकटिक कोड स्पैन (`...`) को ठीक वैसे ही संरक्षित रखें — कभी भी बैकटिक की सामग्री, अंतराल या स्थिति को न बदलें। यह पाठ किसी बड़े वाक्य का अंश हो सकता है — अतिरिक्त संदर्भ मांगे बिना उस अंश का अनुवाद करें। केवल अनुवादित पाठ आउटपुट करें — कोई स्पष्टीकरण, कोई टिप्पणी, कोई परिचय, कोई विकल्प, कोई विकल्प नहीं। repositories { mavenCentral() } tasks.withType\<Test\> { useJUnitPlatform() reports.html.outputLocation.set(layout.buildDirectory.dir("reports/tests")) } import com.yourpackage.ReportJbakeTestsTask // अपनी टास्क क्लास आयात करें tasks.register<ReportJbakeTestsTask>("reportBuildSrcTests") { // पथ क्लास में पहले से परिभाषित है, यह buildSrc रिपोर्ट्स की ओर इशारा करेगा } आप फिर इसे निष्पादित कर सकते हैं:`./gradlew :buildSrc:test`के बाद`./gradlew :buildSrc:reportBuildSrcTests`. इन प्रथाओं को अपनाने से, आप Kotlin DSL में Gradle बिल्ड सिस्टम बनाएँगे जो न केवल शक्तिशाली होंगे, बल्कि अविश्वसनीय रूप से मॉड्यूलर, बनाए रखने में आसान और समझने में सरल भी होंगे।</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0078_jbake_gradle_plugin_syntaxe_post.html Wed, 9 Jul 2025 00:00:00 +0000 blog/2025/0078_jbake_gradle_plugin_syntaxe_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_उद्देश्य">उद्देश्य</a></li> <li><a href="#_घोषणात्मक_विन्यास">घोषणात्मक विन्यास</a></li> <li><a href="#_प्लगइन_की_आर्किटेक्चर">प्लगइन की आर्किटेक्चर</a></li> <li><a href="#_dsl_एक्सटेंशन_की_परिभाषा">DSL एक्सटेंशन की परिभाषा</a></li> <li><a href="#_कस्टमाइज़्ड_कार्य_की_परिभाषा">कस्टमाइज़्ड कार्य की परिभाषा</a></li> <li><a href="#_इंटरफ़ेस_gitadapter">इंटरफ़ेस GitAdapter</a></li> <li><a href="#_jgit_के_साथ_वास्तविक_कार्यान्वयन">JGit के साथ वास्तविक कार्यान्वयन</a></li> <li><a href="#_कॉन्फ़िगरेशन_dsl_कोटलिन">कॉन्फ़िगरेशन DSL कोटलिन</a></li> <li><a href="#_मॉकिटो_के_साथ_यूनिट_टेस्ट">मॉकिटो के साथ यूनिट टेस्ट</a> <ul class="sectlevel2"> <li><a href="#_निर्भरताएँ">निर्भरताएँ</a></li> <li><a href="#_गिट_व्यवहार_का_परीक्षण">गिट व्यवहार का परीक्षण</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_आगामी_कदम">आगामी कदम</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>यह पोस्ट Kotlin DSL में लिखे गए Gradle प्लगिन की संपूर्ण डिज़ाइन और परीक्षण (TDD) प्रक्रिया प्रस्तुत करती है। यह प्लगिन <strong>JBake</strong> और <strong>JGit</strong> के माध्यम से <strong>Git तैनाती</strong> के साथ स्थिर साइटों की पीढ़ी को स्वचालित करता है, सब कुछ YAML कॉन्फ़िगरेशन फ़ाइल से।</p> </div> </div> </div> <div class="sect1"> <h2 id="_उद्देश्य">उद्देश्य</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक Gradle प्लगइन बनाएँ :</p> </div> <div class="ulist"> <ul> <li> <p>Kotlin DSL में कॉन्फ़िगरेबल ;</p> </li> <li> <p>सक्षम</p> </li> <li> <p>JBake से एक स्थिर साइट उत्पन्न करें ;</p> </li> <li> <p>JGit का उपयोग करके दूरस्थ Git रिपॉजिटरी पर तैनात करें;</p> </li> <li> <p>CI/CD वर्कफ़्लो में एकीकृत करने योग्य ;</p> </li> <li> <p>TDD दृष्टिकोण के अनुसार परीक्षण किया गया।</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_घोषणात्मक_विन्यास">घोषणात्मक विन्यास</h2> <div class="sectionbody"> <div class="paragraph"> <p>यहाँ YAML कॉन्फ़िगरेशन का एक उदाहरण है जिसे हमारे DSL में मॉडेल किया जाना है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">bake: srcPath: "./site/jbake" destDirPath: "bake" pushPage: from: "bake" to: "cvs" repo: name: "trainings" repository: "https://github.com/pages-content/trainings.git" credentials: username: "USERNAME" password: "SECRET_TOKEN" branch: "main" message: "cheroliv.com"</code></pre> </div> </div> <div class="paragraph"> <p>यह कॉन्फ़िगरेशन Kotlin DSL में एक घोषणीय Gradle एक्सटेंशन के माध्यम से प्रतिनिधित्व की जाती है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_प्लगइन_की_आर्किटेक्चर">प्लगइन की आर्किटेक्चर</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/jbake-asciidoctor-class-diagram.png" alt="jbake asciidoctor class diagram" width="568" height="261"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dsl_एक्सटेंशन_की_परिभाषा">DSL एक्सटेंशन की परिभाषा</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">open class WorkspaceEngineExtension { var outputDir: String = "build/site" var template: String = "freemarker" var repoUrl: String = "" var branch: String = "main" var message: String = "Generated by engine" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_कस्टमाइज़्ड_कार्य_की_परिभाषा">कस्टमाइज़्ड कार्य की परिभाषा</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">abstract class GenerateSiteTask : DefaultTask() { lateinit var gitAdapter: GitAdapter @get:Input abstract val repoUrl: Property<String> @get:InputDirectory abstract val outputDir: DirectoryProperty @get:Input abstract val branch: Property<String> @get:Input abstract val message: Property<String> @TaskAction fun run() { val repo = gitAdapter.cloneRepository(repoUrl.get(), outputDir.get().asFile) gitAdapter.commitAndPush(repo, branch.get(), message.get()) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_इंटरफ़ेस_gitadapter">इंटरफ़ेस GitAdapter</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">interface GitAdapter { fun cloneRepository(uri: String, directory: File): Repository fun commitAndPush(repo: Repository, branch: String, message: String) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jgit_के_साथ_वास्तविक_कार्यान्वयन">JGit के साथ वास्तविक कार्यान्वयन</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class JGitAdapter : GitAdapter { override fun cloneRepository(uri: String, directory: File): Repository { return Git.cloneRepository() .setURI(uri) .setDirectory(directory) .call() .repository } override fun commitAndPush(repo: Repository, branch: String, message: String) { Git(repo).use { it.add().addFilepattern(".").call() it.commit().setMessage(message).call() it.push().call() } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_कॉन्फ़िगरेशन_dsl_कोटलिन">कॉन्फ़िगरेशन DSL कोटलिन</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">workspaceEngine { outputDir = "build/out" template = "freemarker" repoUrl = "https://github.com/cheroliv/trainings.git" branch = "main" message = "deploy from plugin" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_मॉकिटो_के_साथ_यूनिट_टेस्ट">मॉकिटो के साथ यूनिट टेस्ट</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निर्भरताएँ">निर्भरताएँ</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">testImplementation("org.mockito:mockito-core:5.12.0") testImplementation("org.mockito.kotlin:mockito-kotlin:5.2.1") testImplementation("org.junit.jupiter:junit-jupiter:5.10.0")</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_गिट_व्यवहार_का_परीक्षण">गिट व्यवहार का परीक्षण</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class GenerateSiteTaskMockitoTest { @TempDir lateinit var tempDir: File @Test fun `task should call clone and commitAndPush`() { val project = ProjectBuilder.builder().build() val task = project.tasks.create("generateSite", GenerateSiteTask::class.java) val mockGitAdapter = mock<GitAdapter>() val mockRepo = mock<Repository>() whenever(mockGitAdapter.cloneRepository(any(), any())).thenReturn(mockRepo) task.gitAdapter = mockGitAdapter task.repoUrl.set("https://github.com/cheroliv/test.git") task.outputDir.set(project.layout.projectDirectory.dir(tempDir.name)) task.branch.set("main") task.message.set("test commit") task.run() verify(mockGitAdapter).cloneRepository(eq("https://github.com/cheroliv/test.git"), any()) verify(mockGitAdapter).commitAndPush(eq(mockRepo), eq("main"), eq("test commit")) } }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/jbake-asciidoctor-sequence-diagram.png" alt="jbake asciidoctor sequence diagram" width="794" height="326"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>ज़िम्मेदारियों का पृथक्करण vía`GitAdapter`यह Gradle प्लगिन विकास में TDD को पूरी तरह से लागू करने की अनुमति देता है :</p> </div> <div class="ulist"> <ul> <li> <p>Git कॉल अमूर्त और परीक्षण योग्य हैं ;</p> </li> <li> <p>DSL कॉन्फ़िगरेशन साफ़ और स्पष्ट है ;</p> </li> <li> <p>प्लगिन वास्तविक कार्यान्वयन से निरपेक्ष रहता है।</p> </li> </ul> </div> <div class="paragraph"> <p>यह दृष्टिकोण उच्च परीक्षणीयता और विस्तार क्षमता (GitHub API, GitLab, आदि की ओर) सुनिश्चित करता है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_आगामी_कदम">आगामी कदम</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>JBake जनरेशन को एक के रूप में एकीकृत करें`BakeAdapter`</p> </li> <li> <p>एकीकृत परीक्षण जोड़ें के साथ`GradleRunner`</p> </li> <li> <p>फ़ाइलों की स्वचालित लोडिंग का समर्थन करें`site.yml`के माध्यम से SnakeYAML</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2025/0077_asciidoc_syntaxe_post.html Fri, 20 Jun 2025 00:00:00 +0000 blog/2025/0077_asciidoc_syntaxe_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_asciidoc_क्या_है">AsciiDoc क्या है?</a> <ul class="sectlevel2"> <li><a href="#_asciidoc_क्यों_चुनें">AsciiDoc क्यों चुनें ?</a></li> </ul> </li> <li><a href="#_उपयोग_केस_आरेख_use_case">उपयोग केस आरेख (Use Case)</a></li> <li><a href="#_diagramme_mind_map">Diagramme Mind Map</a></li> <li><a href="#_प्रवाह_आरेख_प्रवाह">प्रवाह आरेख (प्रवाह)</a></li> <li><a href="#_एक_asciidoc_फ़ाइल_की_बुनियादी_संरचना">एक AsciiDoc फ़ाइल की बुनियादी संरचना</a></li> <li><a href="#_मूलभूत_सिंटैक्स">मूलभूत सिंटैक्स</a> <ul class="sectlevel2"> <li><a href="#_शीर्षक_और_अनुभाग">शीर्षक और अनुभाग</a></li> <li><a href="#_बोल्ड_इटैलिक_और_मोनोस्पेस_में_टेक्स्ट">बोल्ड, इटैलिक और मोनोस्पेस में टेक्स्ट</a></li> <li><a href="#_सूची_बिंदु_और_क्रमांकित">सूची बिंदु और क्रमांकित</a></li> <li><a href="#_लिंक_और_चित्र">लिंक और चित्र</a></li> <li><a href="#_कोड_ब्लॉकों">कोड ब्लॉकों</a></li> <li><a href="#_तालिकाएँ">तालिकाएँ</a></li> <li><a href="#_नोट्स_और_चेतावनियाँ">नोट्स और चेतावनियाँ</a></li> </ul> </li> <li><a href="#_अट्रिब्यूट_और_चर_का_उपयोग">अट्रिब्यूट और चर का उपयोग</a></li> <li><a href="#_सामान्य_उपयोग_के_मामले">सामान्य उपयोग के मामले</a></li> <li><a href="#_अच्छे_अभ्यास">अच्छे अभ्यास</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_आगे_बढ़ने_के_लिए">आगे बढ़ने के लिए</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>लक्षित दर्शक :</em> विकासकर्ता, तकनीकी लेखक, और कोई भी व्यक्ति जो तकनीकी दस्तावेज़ या समृद्ध लेख लिखना चाहता है।</div> <p>AsciiDoc एक हल्का मार्कअप भाषा है, जो संरचित तकनीकी दस्तावेज़, लेख, किताब या फिर प्रस्तुतियाँ तैयार करने के लिए डिज़ाइन किया गया है। यह अपनी पठनीयता, सिंटैक्टिक समृद्धि और विभिन्न प्रारूप (HTML, PDF, DocBook आदि) उत्पन्न करने की क्षमता से अलग होता है। इस लेख में, हम एससीआइडॉक का मूलभूत सिंटैक्स़ देखेंगे और तेज़ी से शुरू करने के लिए कुछ सुझाव देंगे।</p> </div> </div> </div> <div class="sect1"> <h2 id="_asciidoc_क्या_है">AsciiDoc क्या है?</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc दस्तावेज़ विवरण की एक भाषा है, जो Markdown के समान है लेकिन अधिक शक्तिशाली है। यह पाठ, शीर्षक, सूचियों, तालिकाओं, कोड ब्लॉक और कई अन्य चीज़ों को प्रभावी ढंग से संरचित करने की अनुमति देती है। इसकी बहुमुखी प्रतिभा के कारण, यह ओपन‑सोर्स परियोजनाओं के दस्तावेज़ीकरण, किताबों की लेखन और वेब प्रकाशन के लिए एक लोकप्रिय विकल्प है।</p> </div> <div class="sect2"> <h3 id="_asciidoc_क्यों_चुनें">AsciiDoc क्यों चुनें ?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>सहज और पठनीय सिंटैक्स।</p> </li> <li> <p>जटिल संरचनाओं (तालिकाएँ, नोट्स, चेतावनियाँ, आदि) का प्राकृतिक समर्थन।</p> </li> <li> <p>मल्टी-फॉर्मैट उत्पादन (HTML, PDF, ePub, DocBook…)</p> </li> <li> <p>JBake या Antora जैसे स्थिर साइट जनरेटरों के साथ आसान इंटीग्रेशन।</p> </li> <li> <p>उन्नत अनुकूलन विशेषताओं और एक्सटेंशन के साथ</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_उपयोग_केस_आरेख_use_case">उपयोग केस आरेख (Use Case)</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक उपयोग केस डायग्राम उपयोगकर्ताओं और प्रणाली के बीच मुख्य इंटरैक्शन को प्रस्तुत करने की अनुमति देता है। यहाँ एक दस्तावेज़ीकरण प्रणाली के लिए एक सरल उदाहरण है :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-381f40e6e0660c0c53433ff054330b76.png" alt="Diagram" width="423" height="258"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagramme_mind_map">Diagramme Mind Map</h2> <div class="sectionbody"> <div class="paragraph"> <p>माइंड मैप (मानसिक मानचित्र) AsciiDoc से संबंधित अवधारणाओं और उनके संबंधों का पता लगाने के लिए आदर्श है:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-e1560e9cc014158b6fbeed1e5ad8e138.png" alt="Diagram" width="394" height="527"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रवाह_आरेख_प्रवाह">प्रवाह आरेख (प्रवाह)</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक फ्लो डायग्राम AsciiDoc दस्तावेज़ की उत्पादन प्रक्रिया का वर्णन करने की अनुमति देता है:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-51318d77b9e18062d3a9b751587670ae.png" alt="Diagram" width="299" height="361"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_एक_asciidoc_फ़ाइल_की_बुनियादी_संरचना">एक AsciiDoc फ़ाइल की बुनियादी संरचना</h2> <div class="sectionbody"> <div class="paragraph"> <p>एक AsciiDoc फ़ाइल सामान्यतः शीर्षक से शुरू होती है, वैकल्पिक विशेषताओं के बाद, फिर संरचित सामग्री। यहाँ एक न्यूनतम उदाहरण दिया गया है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Titre Principal Auteur 2024-09-03 :toc: :icons: font Votre contenu commence ici...</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_मूलभूत_सिंटैक्स">मूलभूत सिंटैक्स</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_शीर्षक_और_अनुभाग">शीर्षक और अनुभाग</h3> <div class="paragraph"> <p>AsciiDoc कई स्तरों के शीर्षकों का समर्थन करता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Titre de niveau 1 == Titre de niveau 2 === Titre de niveau 3 ==== Titre de niveau 4</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_बोल्ड_इटैलिक_और_मोनोस्पेस_में_टेक्स्ट">बोल्ड, इटैलिक और मोनोस्पेस में टेक्स्ट</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">*gras* _italique_ `monospace`</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_सूची_बिंदु_और_क्रमांकित">सूची बिंदु और क्रमांकित</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* Élément 1 * Élément 2 . Premier . Deuxième . Troisième</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_लिंक_और_चित्र">लिंक और चित्र</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">Lien standard : https://asciidoc.org[AsciiDoc] Image : image::images/logo.png[AsciiDoc Logo]</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_कोड_ब्लॉकों">कोड ब्लॉकों</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">[source,python]</code></pre> </div> </div> <div class="paragraph"> <p>def hello(): print("नमस्ते AsciiDoc !")</p> </div> </div> <div class="sect2"> <h3 id="_तालिकाएँ">तालिकाएँ</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">|=== | Colonne 1 | Colonne 2 | Valeur A | Valeur B | Valeur C | Valeur D |===</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_नोट्स_और_चेतावनियाँ">नोट्स और चेतावनियाँ</h3> <div class="paragraph"> <p>AsciiDoc दृश्य सूचना ब्लॉक प्रस्तुत करता है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">NOTE: Ceci est une note importante. TIP: Conseil utile pour l’utilisateur. WARNING: Attention à ce point.</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अट्रिब्यूट_और_चर_का_उपयोग">अट्रिब्यूट और चर का उपयोग</h2> <div class="sectionbody"> <div class="paragraph"> <p>कस्टम विशेषताएँ मान पुनः उपयोग करने या व्यवहार को कॉन्फ़िगर करने की अनुमति देती हैं:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">:project-name: AsciiDoc Explorer Le projet s’appelle {project-name}.</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सामान्य_उपयोग_के_मामले">सामान्य उपयोग के मामले</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>ओपन सोर्स प्रोजेक्ट दस्तावेज़ीकरण (README, तकनीकी मार्गदर्शिका) - पुस्तकें और ईबुक्स लेखन - स्थिर वेबसाइटों का स्वचालित उत्पादन (JBake, Antora) - तकनीकी प्रस्तुतियाँ</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छे_अभ्यास">अच्छे अभ्यास</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>संगत शीर्षकों का उपयोग करें और (:toc:) के साथ एक स्वचालित सारणी। - ध्यान आकर्षित करने के लिए मुख्य बिंदुओं पर अधिसूचनाओं को प्राथमिकता दें। अपनी फाइलों को व्यवस्थित रखें ताकि रखरखाव आसान हो। उदाहरण दिखाने के लिए एनोटेटेड कोड ब्लॉक्स का उपयोग करें।</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc एक शक्तिशाली और सुलभ उपकरण है जो तकनीकी दस्तावेज़ या संरचित लेख तैयार करने के लिए उपयोगी है। इसकी समृद्ध व्याकरण, बहु-प्रारूप उत्पादन के संयोजन से, यह विकसित करने वालों और मांग वाले लेखकों के लिए एक उत्कृष्ट साथी बन जाता है। अपने अगले प्रोजेक्ट में AsciiDoc आज़माइए और अंतर देखिए!</p> </div> </div> </div> <div class="sect1"> <h2 id="_आगे_बढ़ने_के_लिए">आगे बढ़ने के लिए</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>आधिकारिक दस्तावेज़: <a href="https://asciidoc.org" class="bare">https://asciidoc.org</a> - Asciidoctor : <a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a> - JBake और AsciiDoc : <a href="https://jbake.org/docs/2.6.4/#asciidoc_support" class="bare">https://jbake.org/docs/2.6.4/#asciidoc_support</a></p> </li> </ul> </div> <div class="paragraph"> <p>अपने अनुभव और युक्तियाँ टिप्पणी में साझा करें!</p> </div> </div> </div> https://cheroliv.com/blog/2025/0076_port_forwarding_post.html Wed, 28 May 2025 00:00:00 +0000 blog/2025/0076_port_forwarding_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_समस्या_nat_और_निजी_पते">समस्या: NAT और निजी पते</a></li> <li><a href="#_चरण_1_अपना_सार्वजनिक_ip_पता_पहचानें">चरण 1: अपना सार्वजनिक IP पता पहचानें</a></li> <li><a href="#_चरण_2_अपने_उबुन्टू_मशीन_का_स्थानीय_ip_पता_जानें">चरण 2: अपने उबुन्टू मशीन का स्थानीय IP पता जानें</a></li> <li><a href="#_चरण_3_अपने_बॉक्स_पर_पोर्ट_फॉरवर्डिंग_सेट_अप_करें">चरण 3: अपने बॉक्स पर पोर्ट फॉरवर्डिंग सेट अप करें</a> <ul class="sectlevel2"> <li><a href="#_प्रशासन_इंटरफ़ेस_तक_पहुँच">प्रशासन इंटरफ़ेस तक पहुँच</a></li> <li><a href="#_रीडायरेक्शन_की_कॉन्फ़िगरेशन">रीडायरेक्शन की कॉन्फ़िगरेशन</a></li> </ul> </li> <li><a href="#_चरण_4_ubuntu_पर_सेवा_की_कॉन्फ़िगरेशन">चरण 4: Ubuntu पर सेवा की कॉन्फ़िगरेशन</a></li> <li><a href="#_चरण_5_ubuntu_फ़ायरवॉल_कॉन्फ़िगरेशन">चरण 5: Ubuntu फ़ायरवॉल कॉन्फ़िगरेशन</a></li> <li><a href="#_चरण_6_परीक्षण_और_सत्यापन">चरण 6 : परीक्षण और सत्यापन</a> <ul class="sectlevel2"> <li><a href="#_स्थानीय_नेटवर्क_से_परीक्षण">स्थानीय नेटवर्क से परीक्षण</a></li> <li><a href="#_बाहर_से_टेस्ट">बाहर से टेस्ट</a></li> </ul> </li> <li><a href="#_अच्छी_प्रथाएँ_और_सुरक्षा">अच्छी प्रथाएँ और सुरक्षा</a> <ul class="sectlevel2"> <li><a href="#_मूल_सुरक्षा">मूल सुरक्षा</a></li> <li><a href="#_कनेक्शन_मॉनिटरिंग">कनेक्शन मॉनिटरिंग</a></li> <li><a href="#_रेवर्स_प्रॉक्सी_का_उपयोग">रेवर्स प्रॉक्सी का उपयोग</a></li> </ul> </li> <li><a href="#_पोर्ट_फॉरवर्डिंग_के_विकल्प">पोर्ट फॉरवर्डिंग के विकल्प</a> <ul class="sectlevel2"> <li><a href="#_क्लाउड_समाधान">क्लाउड समाधान</a></li> <li><a href="#_vps_और_रिवर्स_प्रॉक्सी">VPS और रिवर्स प्रॉक्सी</a></li> </ul> </li> <li><a href="#_समस्या_निवारण">समस्या निवारण</a> <ul class="sectlevel2"> <li><a href="#_सामान्य_समस्याएँ">सामान्य समस्याएँ</a></li> <li><a href="#_नेटवर्क_डिबग">नेटवर्क डिबग</a></li> </ul> </li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="ulist"> <div class="title">लक्षित दर्शक : मध्यम</div> <ul> <li> <p><strong>अनुमानित पूर्वापेक्षाएँ</strong> : Ubuntu का बुनियादी ज्ञान, टर्मिनल का बुनियादी ज्ञान, मूल नेटवर्क अवधारणाएँ</p> </li> <li> <p><strong>तकनीकी अवधारणाएँ</strong> : NAT, पोर्ट फ़ॉरवर्डिंग, फ़ायरवॉल, रिवर्स प्रॉक्सी</p> </li> <li> <p><strong>सिस्टम कमांडें</strong> : टर्मिनल का उपयोग, नेटवर्क कॉन्फ़िगरेशन</p> </li> <li> <p><strong>उन्नत अनुभाग</strong> : निगरानी, सुरक्षा, क्लाउड विकल्प</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_nat_और_निजी_पते">समस्या: NAT और निजी पते</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">समस्या : क्या आप अपनी Ubuntu मशीन पर एक वेब एप्लिकेशन विकसित कर रहे हैं और अपने घरेलू नेटवर्क के बाहर से इसे सुलभ बनाना चाहते हैं ? आप सही जगह पर हैं ! इस लेख में, हम देखेंगे कि आप अपने बॉक्स इंटरनेट पर पोर्ट फ़ॉरवर्डिंग कॉन्फ़िगर करके एक स्थानीय सेवा (उदाहरण के लिए पोर्ट 8080 पर) को इंटरनेट तक कैसे प्रदर्शित कर सकते हैं।</div> <p>डिफ़ॉल्ट रूप से, आपके इंटरनेट बॉक्स का NAT (Network Address Translation) का उपयोग करके आपके घरेलू नेटवर्क के सभी उपकरणों के बीच केवल एक सार्वजनिक IP पता साझा किया जाता है। आपकी स्थानीय मशीनें निजी IP पते (192.168.x.x, 10.x.x.x, आदि) का उपयोग करती हैं, जो इंटरनेट पर रूट करने योग्य नहीं हैं।</p> </div> <div class="paragraph"> <p>जब आप अपनी Ubuntu मशीन पर कोई सेवा शुरू करते हैं (उदाहरण के लिए पोर्ट 8080 पर एक वेब सर्वर), तो वह केवल आपके स्थानीय नेटवर्क से ही सुलभ होता है। इसे इंटरनेट से सुलभ बनाने के लिए, हमें एक पोर्ट फ़ॉरवर्डिंग कॉन्फ़िगर करने की आवश्यकता होती है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_1_अपना_सार्वजनिक_ip_पता_पहचानें">चरण 1: अपना सार्वजनिक IP पता पहचानें</h2> <div class="sectionbody"> <div class="paragraph"> <p>सबसे पहले, अपने इंटरनेट कनेक्शन का सार्वजनिक IP पता प्राप्त करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Plusieurs méthodes au choix curl ifconfig.me curl ipecho.net/plain wget -qO- http://ipecho.net/plain # Ou encore curl -s checkip.amazonaws.com</code></pre> </div> </div> <div class="paragraph"> <p>यह IP पता वही है जिसका उपयोग इंटरनेट उपयोगकर्ता आपकी सेवा तक पहुँचने के लिए करेंगे।</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_2_अपने_उबुन्टू_मशीन_का_स्थानीय_ip_पता_जानें">चरण 2: अपने उबुन्टू मशीन का स्थानीय IP पता जानें</h2> <div class="sectionbody"> <div class="paragraph"> <p>आपकी Ubuntu मशीन के पास आपके स्थानीय नेटवर्क पर एक निजी IP पता है। जानने के लिए:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Afficher toutes les interfaces réseau ip addr show # Ou plus spécifiquement pour l'interface principale ip route get 1.1.1.1 | awk '{print $7; exit}' # Alternative avec hostname hostname -I | awk '{print $1}'</code></pre> </div> </div> <div class="paragraph"> <p>इस पते को नोट करें (उदाहरण के लिए`192.168.1.100`), हमें इसे कॉन्फ़िगरेशन के लिए चाहिए होगा।</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_3_अपने_बॉक्स_पर_पोर्ट_फॉरवर्डिंग_सेट_अप_करें">चरण 3: अपने बॉक्स पर पोर्ट फॉरवर्डिंग सेट अप करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>कॉन्फ़िगरेशन आपके बॉक्स के मॉडल के अनुसार भिन्न होता है, लेकिन सिद्धांत समान रहता है :</p> </div> <div class="sect2"> <h3 id="_प्रशासन_इंटरफ़ेस_तक_पहुँच">प्रशासन इंटरफ़ेस तक पहुँच</h3> <div class="paragraph"> <p>अपने ब्राउज़र को खोलें और अपने बॉक्स के वेब इंटरफ़ेस पर जाएँ :</p> </div> <div class="ulist"> <ul> <li> <p><strong>फ्रीबॉक्स</strong>:`192.168.1.1` ou <code>mafreebox.freebox.fr</code></p> </li> <li> <p><strong>लाइवबॉक्स ऑरेंज</strong><code class="No output">192.168.1.1</code></p> </li> <li> <p><strong>SFR बॉक्स</strong>(No output)<code>192.168.1.1</code></p> </li> <li> <p><strong>Bbox Bouygues</strong>(No output)<code>192.168.1.254</code></p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_रीडायरेक्शन_की_कॉन्फ़िगरेशन">रीडायरेक्शन की कॉन्फ़िगरेशन</h3> <div class="paragraph"> <p>पोर्ट फॉरवर्डिंग के लिए समर्पित खंड की तलाश करें (नाम भिन्न हो सकते हैं):</p> </div> <div class="ulist"> <ul> <li> <p>पोर्ट रीडायरेक्शन</p> </li> <li> <p>NAT/PAT</p> </li> <li> <p>पोर्ट फॉरवर्डिंग</p> </li> <li> <p>गेम सर्वर</p> </li> </ul> </div> <div class="paragraph"> <p>इन सेटिंग्स के साथ एक नया नियम बनाएँ :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 75%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">क्षेत्र</th> <th class="tableblock halign-left valign-top">मूल्य</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">नाम/विवरण</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ubuntu वेब सेवा" (या कोई अन्य स्पष्ट नाम)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">बाहरी पोर्ट (या सार्वजनिक पोर्ट)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8080</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">आंतरिक IP पता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">आपकी Ubuntu मशीन का IP (उदाहरण: 192.168.1.100)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">आंतरिक पोर्ट (या निजी पोर्ट)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8080</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">प्रोटोकॉल</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">TCP</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">राज्य</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सक्रिय</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_4_ubuntu_पर_सेवा_की_कॉन्फ़िगरेशन">चरण 4: Ubuntu पर सेवा की कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>सुनिश्चित करें कि आपका सेवा सभी इंटरफेस पर सुनता है, केवल localhost पर नहीं:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># ✅ Correct : écoute sur toutes les interfaces python3 -m http.server 8080 --bind 0.0.0.0 # ❌ Incorrect : écoute seulement en local python3 -m http.server 8080 --bind 127.0.0.1</code></pre> </div> </div> <div class="paragraph"> <p>जाँचने के लिए कि आपका सेवा सही ढंग से सुन रहा है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Vérifier les ports en écoute sudo netstat -tlnp | grep :8080 # ou avec ss (plus moderne) sudo ss -tlnp | grep :8080</code></pre> </div> </div> <div class="paragraph"> <p>आपको कुछ ऐसा देखना चाहिए`0.0.0.0:8080`और नहीं`127.0.0.1:8080`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_5_ubuntu_फ़ायरवॉल_कॉन्फ़िगरेशन">चरण 5: Ubuntu फ़ायरवॉल कॉन्फ़िगरेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ubuntu डिफ़ॉल्ट रूप से UFW (Uncomplicated Firewall) का उपयोग करता है। स्थिति जाँचें और आवश्यकतानुसार पोर्ट की अनुमति दें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Vérifier le statut du pare-feu sudo ufw status # Si le pare-feu est actif, autoriser le port 8080 sudo ufw allow 8080/tcp # Ou plus spécifiquement pour un service web sudo ufw allow 'Apache' # si vous utilisez Apache sudo ufw allow 'Nginx Full' # si vous utilisez Nginx</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_चरण_6_परीक्षण_और_सत्यापन">चरण 6 : परीक्षण और सत्यापन</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_स्थानीय_नेटवर्क_से_परीक्षण">स्थानीय नेटवर्क से परीक्षण</h3> <div class="paragraph"> <p>पहले, अपने स्थानीय नेटवर्क पर किसी अन्य मशीन से पहुँच का परीक्षण करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Remplacez par l'IP locale de votre machine Ubuntu curl http://192.168.1.100:8080</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_बाहर_से_टेस्ट">बाहर से टेस्ट</h3> <div class="paragraph"> <p>अब, अपने सार्वजनिक IP का उपयोग करके इंटरनेट से परीक्षण करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Remplacez par votre IP publique curl http://VOTRE_IP_PUBLIQUE:8080</code></pre> </div> </div> <div class="paragraph"> <p>आप ऑनलाइन उपकरणों का भी उपयोग कर सकते हैं :</p> </div> <div class="ulist"> <ul> <li> <p><a href="https://www.yougetsignal.com/tools/open-ports/" class="bare">https://www.yougetsignal.com/tools/open-ports/</a></p> </li> <li> <p><a href="https://canyouseeme.org/" class="bare">https://canyouseeme.org/</a></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अच्छी_प्रथाएँ_और_सुरक्षा">अच्छी प्रथाएँ और सुरक्षा</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_मूल_सुरक्षा">मूल सुरक्षा</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Configurer fail2ban pour protéger contre les attaques par force brute sudo apt update && sudo apt install fail2ban # Limiter l'accès avec UFW (exemple : autoriser seulement certaines IP) sudo ufw allow from 203.0.113.0/24 to any port 8080</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_कनेक्शन_मॉनिटरिंग">कनेक्शन मॉनिटरिंग</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Surveiller les connexions en temps réel sudo netstat -an | grep :8080 # Logs des connexions (selon votre application) sudo tail -f /var/log/nginx/access.log # pour Nginx sudo journalctl -f -u your-service # pour un service systemd</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_रेवर्स_प्रॉक्सी_का_उपयोग">रेवर्स प्रॉक्सी का उपयोग</h3> <div class="paragraph"> <p>बेहतर सुरक्षा और लचीलापन के लिए, नginx जैसे रिवर्स प्रॉक्सी का उपयोग करने पर विचार करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-nginx" data-lang="nginx">server { listen 80; server_name votre-domaine.com; location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पोर्ट_फॉरवर्डिंग_के_विकल्प">पोर्ट फॉरवर्डिंग के विकल्प</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_क्लाउड_समाधान">क्लाउड समाधान</h3> <div class="ulist"> <ul> <li> <p><strong>ngrok</strong>: सुरक्षित अस्थायी सुरंग</p> </li> <li> <p><strong>Cloudflare टनल</strong>नि:शुल्क और सुरक्षित समाधान</p> </li> <li> <p><strong>serveo.net</strong>: सरल SSH टनल</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Exemple avec ngrok ngrok http 8080 # Exemple avec serveo ssh -R 80:localhost:8080 serveo.net</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_vps_और_रिवर्स_प्रॉक्सी">VPS और रिवर्स प्रॉक्सी</h3> <div class="paragraph"> <p>पेशेवर उपयोग के लिए, VPN के माध्यम से आपके स्थानीय बुनियादी ढाँचे की ओर इशारा करते हुए एक रिवर्स प्रॉक्सी के साथ VPS का उपयोग करने पर विचार करें।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_निवारण">समस्या निवारण</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_सामान्य_समस्याएँ">सामान्य समस्याएँ</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 40%;"> <col style="width: 60%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">समस्या</th> <th class="tableblock halign-left valign-top">हल</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">बाहर से सेवा असुलभ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पोर्ट फ़ॉरवर्डिंग कॉन्फ़िगरेशन की जाँच करें और सुनिश्चित करें कि सेवा 0.0.0.0 पर सुन रही है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">कनेक्शन अस्वीकारित</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सेवा शुरू नहीं हुई है या यह केवल 127.0.0.1 पर सुन रही है</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">कनेक्शन टाइमआउट</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ायरवॉल (बॉक्स या Ubuntu) की समस्या या पोर्ट फ़ॉरवर्डिंग का गलत कॉन्फ़िगरेशन</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">सार्वजनिक IP नियमित रूप से बदलता है</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक डायनामिक DNS (DynDNS, No-IP, आदि) कॉन्फ़िगर करें।</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_नेटवर्क_डिबग">नेटवर्क डिबग</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"># Tester la connectivité locale telnet localhost 8080 # Tester depuis une autre machine du réseau telnet 192.168.1.100 8080 # Vérifier les routes réseau ip route show # Analyser le trafic réseau sudo tcpdump -i any port 8080</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>इंटरनेट पर एक स्थानीय सेवा को उजागर करने के लिए पोर्ट फॉरवर्डिंग, सुरक्षा और निगरानी की सावधानीपूर्वक कॉन्फ़िगरेशन की आवश्यकता होती है। यद्यपि यह दृष्टिकोण विकास या व्यक्तिगत परियोजनाओं के लिए आदर्श है, उत्पादन उपयोग के लिए अधिक मज़बूत विकल्प (VPS, CDN, क्लाउड सेवाओं) पर विचार करें।</p> </div> <div class="paragraph"> <p>महत्वपूर्ण है कि आप हमेशा सुरक्षा को ध्यान में रखें: मजबूत पासवर्ड उपयोग करें, अपने सिस्टम को नियमित रूप से अपडेट करें, और अपने उजागर सेवाओं तक पहुँच की निगरानी करें।</p> </div> <div class="paragraph"> <p>अपने अनुभव और प्रश्न टिप्पणियों में साझा करने में संकोच न करें !</p> </div> </div> </div> https://cheroliv.com/blog/2025/0099_debugging-mockito-gradle-plugin_post.html Sun, 17 Nov 2024 00:00:00 +0000 blog/2025/0099_debugging-mockito-gradle-plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_संदर्भ_प्लगइन_ग्रेडल_बेकरी">संदर्भ: प्लगइन ग्रेडल बेकरी</a></li> <li><a href="#_समस्या_1_खराब_मॉक_की_जाँच_करें">समस्या #1: खराब मॉक की जाँच करें</a> <ul class="sectlevel2"> <li><a href="#_निदान">निदान</a></li> <li><a href="#_समाधान">समाधान</a></li> </ul> </li> <li><a href="#_समस्या_2_सिलसिलेवार_unfinishedstubbingexception">समस्या #2 : सिलसिलेवार UnfinishedStubbingException</a> <ul class="sectlevel2"> <li><a href="#_निदान_2">निदान</a></li> <li><a href="#_समाधान_2">समाधान</a></li> </ul> </li> <li><a href="#_समस्या_3_कॉन्फ़िगरेशन_फ़ाइल_मौजूद_नहीं_है">समस्या #3: कॉन्फ़िगरेशन फ़ाइल मौजूद नहीं है</a> <ul class="sectlevel2"> <li><a href="#_निदान_3">निदान</a></li> <li><a href="#_समाधान_3">समाधान</a></li> </ul> </li> <li><a href="#_समस्या_4_afterevaluate_और_nullpointerexception">समस्या #4 : afterEvaluate और NullPointerException</a> <ul class="sectlevel2"> <li><a href="#_निदान_4">निदान</a></li> <li><a href="#_समाधान_4">समाधान</a></li> </ul> </li> <li><a href="#_पूर्ण_समाधान">पूर्ण समाधान</a></li> <li><a href="#_सीखे_गए_सबक">सीखे गए सबक</a> <ul class="sectlevel2"> <li><a href="#_1_सही_मॉक_की_जाँच_करें">1. सही मॉक की जाँच करें</a></li> <li><a href="#_2_नेस्टेड_मॉक_से_बचें">2. नेस्टेड मॉक से बचें</a></li> <li><a href="#_3_मूल्यांकन_कॉलबैक_को_मॉक_करें">3. मूल्यांकन कॉलबैक को मॉक करें</a></li> <li><a href="#_4_पथों_के_समाधान_का_परीक्षण_करें">4. पथों के समाधान का परीक्षण करें</a></li> </ul> </li> <li><a href="#_अंतिम_परीक्षण_आर्किटेक्चर">अंतिम परीक्षण आर्किटेक्चर</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_संसाधन">संसाधन</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle प्लगइन के विकास के दौरान<strong>बेकरी</strong>मेरे JBake ब्लॉग के लिए, मुझे एक स्पष्ट रूप से सरल समस्या का सामना करना पड़ा: एक इकाई परीक्षण जो त्रुटि के साथ विफल हो रहा था`Wanted but not invoked`. क्या दिख रहा था कि एक तुच्छ बग था, वह साबित हुआ Mockito और Kotlin के साथ मॉकिंग की सूक्ष्मताओं को समझने के लिए एक आदर्श केस स्टडी।</p> </div> <div class="paragraph"> <p>इस लेख में, मैं आपको एक विधिपूर्वक डिबगिंग की यात्रा पर ले जाता हूँ, जहाँ प्रत्येक समाधान एक नई समस्या को उजागर करता है, अंतिम समाधान तक।</p> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ_प्लगइन_ग्रेडल_बेकरी">संदर्भ: प्लगइन ग्रेडल बेकरी</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bakery प्लगिन JBake के चारों ओर एक रैपर है जो स्थिर साइटों के प्रकाशन को आसान बनाता है। इसकी सरलीकृत संरचना यहाँ है :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class BakeryPlugin : Plugin<Project> { override fun apply(project: Project) { val extension = project.extensions.create( "bakery", BakeryExtension::class.java ) project.afterEvaluate { if (!project.layout.projectDirectory.asFile .resolve(extension.configPath.get()).exists()) { println("config file does not exists") } else { // C'EST ICI QUE ÇA SE PASSE project.plugins.apply(JBakePlugin::class.java) val site = FileSystemManager.from(project, extension.configPath.get()) // Configuration de JBake... } } } }</code></pre> </div> </div> <div class="paragraph"> <p>असफल होने वाला परीक्षण सरल था :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `plugin applies jbake gradle plugin`() { val project = createMockProject() val plugin = BakeryPlugin() plugin.apply(project) verify(project.plugins).apply(JBakePlugin::class.java) }</code></pre> </div> </div> <div class="paragraph"> <p>त्रुटि :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">Wanted but not invoked: pluginContainer.apply(class org.jbake.gradle.JBakePlugin); Actually, there were zero interactions with this mock.</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_1_खराब_मॉक_की_जाँच_करें">समस्या #1: खराब मॉक की जाँच करें</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निदान">निदान</h3> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-1.svg" alt="mockito problem 1" width="676" height="521"> </div> </div> <div class="paragraph"> <p>समस्या: Mockito इंटरैक्शन को ट्रेस नहीं कर सकता`project.plugins`क्योंकि यह केवल एक गेटर है जो वास्तविक मॉक लौटाता है`mockPluginContainer`सत्यापन मॉक के इंस्टेंस पर सीधे किया जाना चाहिए।</p> </div> </div> <div class="sect2"> <h3 id="_समाधान">समाधान</h3> <div class="paragraph"> <p>संपादित`createMockProject()`दो ऑब्जेक्ट्स लौटाने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { val mockPluginContainer = mock<PluginContainer>() val mockProject = mock<Project> { on { plugins } doReturn mockPluginContainer } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>और परीक्षा को अनुकूलित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `plugin applies jbake gradle plugin`() { val (project, mockPluginContainer) = createMockProject() val plugin = BakeryPlugin() plugin.apply(project) // ✅ Vérification directe sur le bon mock verify(mockPluginContainer).apply(JBakePlugin::class.java) }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_2_सिलसिलेवार_unfinishedstubbingexception">समस्या #2 : सिलसिलेवार UnfinishedStubbingException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निदान_2">निदान</h3> <div class="paragraph"> <p>पहला सुधार लागू होने के बाद, एक नई त्रुटि सामने आई :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">UnfinishedStubbingException: Unfinished stubbing detected here Hints: 3. you are stubbing the behaviour of another mock inside before 'thenReturn' instruction is completed</code></pre> </div> </div> <div class="paragraph"> <p>समस्याग्रस्त कोड Mockito-Kotlin की DSL सिंटैक्स का उपयोग कर रहा था :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val mockProject = mock<Project> { on { extensions } doReturn mockExtensionContainer on { plugins } doReturn mockPluginContainer on { logger } doReturn mock() // ❌ PROBLÈME ICI ! }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 4) ] @startuml participant "Mockito" as M participant "मॉक बिल्डर" as MB participant "python ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml participant "Mockito" as M participant "मॉक बिल्डर" as MB participant "python इनलाइन मॉक" as IM M -> MB: mock<Project> { ... } activate MB MB -> MB: on { logger } doReturn MB -> IM: mock() activate IM note right ❌ Création d'un nouveau mock PENDANT le stubbing en cours ! Mockito perd le contexte du stubbing parent end note IM --> MB: nouveau mock deactivate IM MB -x M: UnfinishedStubbingException deactivate MB @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_समाधान_2">समाधान</h3> <div class="paragraph"> <p>बनाना<strong>सभी</strong>किसी भी स्टबिंग ब्लॉक के बाहर के मॉक, फिर उन्हेंconfigure करने के साथ`whenever()`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // 1️⃣ Créer TOUS les mocks d'abord val mockPluginContainer = mock<PluginContainer>() val mockExtensionContainer = mock<ExtensionContainer>() val mockLogger = mock<org.gradle.api.logging.Logger>() val mockProject = mock<Project>() // 2️⃣ Configurer les mocks séparément avec whenever() whenever(mockProject.plugins).thenReturn(mockPluginContainer) whenever(mockProject.extensions).thenReturn(mockExtensionContainer) whenever(mockProject.logger).thenReturn(mockLogger) return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>स्वर्ण नियम</strong>कभी कॉल न करें`mock()`मॉक कॉन्फ़िगरेशन ब्लॉक के अंदर. हमेशा पहले मॉक बनाएं, फिर उन्हें कॉन्फ़िगर करें।</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_3_कॉन्फ़िगरेशन_फ़ाइल_मौजूद_नहीं_है">समस्या #3: कॉन्फ़िगरेशन फ़ाइल मौजूद नहीं है</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निदान_3">निदान</h3> <div class="paragraph"> <p>हालांकि सही मॉक के साथ, परीक्षण हमेशा विफल रहता था क्योंकि प्लगिन को कॉन्फ़िगरेशन फ़ाइल नहीं मिल रही थी :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Dans BakeryPlugin.kt if (!project.layout.projectDirectory.asFile .resolve(extension.configPath.get()).exists()) { println("config file does not exists") return@afterEvaluate // ❌ Sort avant d'appliquer JBake ! }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-3.svg" alt="mockito problem 3" width="551" height="373"> </div> </div> </div> <div class="sect2"> <h3 id="_समाधान_3">समाधान</h3> <div class="paragraph"> <p>पाथ रिज़ॉल्यूशन काम करने के लिए मॉक को कॉन्फ़िगर करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // ... autres mocks ... val configFile = File("../../site.yml").canonicalFile val projectDir = configFile.parentFile // Configuration cohérente des chemins whenever(mockConfigPathProperty.get()).thenReturn("site.yml") whenever(mockProjectDirectory.asFile).thenReturn(projectDir) // Maintenant : projectDir.resolve("site.yml") existe ! ✅ }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/path-resolution.svg" alt="path resolution" width="1759" height="5592"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_समस्या_4_afterevaluate_और_nullpointerexception">समस्या #4 : afterEvaluate और NullPointerException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_निदान_4">निदान</h3> <div class="paragraph"> <p>प्लगिन JBake को एक ब्लॉक में लागू करता है`afterEvaluate`, और पहुँचता है`buildDirectory.dir()`(No output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.afterEvaluate { // ... project.tasks.withType(JBakeTask::class.java) .getByName("bake").apply { output = project.layout.buildDirectory .dir(site.bake.destDirPath) // ❌ NPE ici ! .get() .asFile } }</code></pre> </div> </div> <div class="paragraph"> <p>मॉक का`buildDirectory.dir()<code>वह वापस आ रहा था`null</code>.</p> </div> </div> <div class="sect2"> <h3 id="_समाधान_4">समाधान</h3> <div class="paragraph"> <p>मॉकर`afterEvaluate`ताकि वह तुरंत चल सके, और पूरी तरह से कॉन्फ़िगर करें`buildDirectory`(no output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // ... autres mocks ... val mockBuildDirectory = mock<DirectoryProperty>() val buildDir = File(projectDir, "build") // Mocker dir() pour retourner un Provider valide whenever(mockBuildDirectory.dir(any<String>())).doAnswer { invocation -> val path = invocation.arguments[0] as String val mockDirProvider = mock<Provider<Directory>>() val mockDir = mock<Directory>() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // Mocker afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any<Action<Project>>())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) // ✅ Exécution synchrone null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/after-evaluate-flow.svg" alt="after evaluate flow" width="807" height="357"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पूर्ण_समाधान">पूर्ण समाधान</h2> <div class="sectionbody"> <div class="paragraph"> <p>यहाँ फ़ंक्शन है`createMockProject()`अंतिम, जो सभी समस्याओं को हल करता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // 1️⃣ CRÉER tous les mocks (pas de nested mocks !) val mockPluginContainer = mock<PluginContainer>() val mockExtensionContainer = mock<ExtensionContainer>() val mockLogger = mock<org.gradle.api.logging.Logger>() val mockTaskContainer = mock<TaskContainer>() val mockConfigPathProperty = mock<Property<String>>() val mockBakeryExtension = mock<BakeryExtension>() val mockProjectDirectory = mock<Directory>() val mockBuildDirectory = mock<DirectoryProperty>() val mockProjectLayout = mock<ProjectLayout>() val mockProject = mock<Project>() // 2️⃣ CONFIGURER la résolution des chemins val configFile = File("../../site.yml").canonicalFile val projectDir = configFile.parentFile val buildDir = File(projectDir, "build") whenever(mockConfigPathProperty.get()).thenReturn("site.yml") whenever(mockConfigPathProperty.isPresent).thenReturn(true) whenever(mockBakeryExtension.configPath).thenReturn(mockConfigPathProperty) whenever(mockProjectDirectory.asFile).thenReturn(projectDir) // 3️⃣ CONFIGURER buildDirectory avec dir() whenever(mockBuildDirectory.dir(any<String>())).doAnswer { invocation -> val path = invocation.arguments[0] as String val mockDirProvider = mock<Provider<Directory>>() val mockDir = mock<Directory>() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // 4️⃣ ASSEMBLER le projet whenever(mockProjectLayout.projectDirectory).thenReturn(mockProjectDirectory) whenever(mockProjectLayout.buildDirectory).thenReturn(mockBuildDirectory) whenever(mockExtensionContainer.create("bakery", BakeryExtension::class.java)) .thenReturn(mockBakeryExtension) whenever(mockExtensionContainer.getByType(BakeryExtension::class.java)) .thenReturn(mockBakeryExtension) whenever(mockProject.extensions).thenReturn(mockExtensionContainer) whenever(mockProject.plugins).thenReturn(mockPluginContainer) whenever(mockProject.tasks).thenReturn(mockTaskContainer) whenever(mockProject.layout).thenReturn(mockProjectLayout) whenever(mockProject.logger).thenReturn(mockLogger) whenever(mockProject.projectDir).thenReturn(projectDir) // 5️⃣ CONFIGURER afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any<Action<Project>>())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>और अंतिम परीक्षा जो पास होती है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Test fun `plugin applies jbake gradle plugin`() { val (project, mockPluginContainer) = createMockProject() val plugin = BakeryPlugin() plugin.apply(project) verify(mockPluginContainer).apply(JBakePlugin::class.java) // ✅ SUCCÈS ! }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_सीखे_गए_सबक">सीखे गए सबक</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/lessons-learned.svg" alt="lessons learned" width="748" height="472"> </div> </div> <div class="sect2"> <h3 id="_1_सही_मॉक_की_जाँच_करें">1. सही मॉक की जाँच करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ FAUX verify(project.plugins).apply(JBakePlugin::class.java) // ✅ CORRECT val (project, mockPluginContainer) = createMockProject() verify(mockPluginContainer).apply(JBakePlugin::class.java)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_2_नेस्टेड_मॉक_से_बचें">2. नेस्टेड मॉक से बचें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ FAUX - UnfinishedStubbingException val mockProject = mock<Project> { on { logger } doReturn mock() // Nested mock creation ! } // ✅ CORRECT - Créer séparément val mockLogger = mock<org.gradle.api.logging.Logger>() val mockProject = mock<Project>() whenever(mockProject.logger).thenReturn(mockLogger)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_3_मूल्यांकन_कॉलबैक_को_मॉक_करें">3. मूल्यांकन कॉलबैक को मॉक करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ✅ afterEvaluate doit s'exécuter pour les tests whenever(mockProject.afterEvaluate(any())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) null }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_पथों_के_समाधान_का_परीक्षण_करें">4. पथों के समाधान का परीक्षण करें</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Toujours vérifier que les chemins se résolvent correctement val extension = project.extensions.getByType(BakeryExtension::class.java) val configPath = extension.configPath.get() val projectDir = project.layout.projectDirectory.asFile val resolvedConfig = projectDir.resolve(configPath) println("Resolved config: ${resolvedConfig.absolutePath}") println("Exists: ${resolvedConfig.exists()}")</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अंतिम_परीक्षण_आर्किटेक्चर">अंतिम परीक्षण आर्किटेक्चर</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From <input> (line 20) ] @startuml package "परीक्षण परत" { [Test Class] --> [createMockProject()] } package "मॉक सृजन" { [createMockProject()] --> [Create All Mocks] [Create All Mocks] --> [Configure Paths] [Configure Paths] --> [Configure Callbacks] [Configure Callbacks] --> [Assemble Project] } package "मॉक ऑब्जेक्ट्स" { [Assemble Project] --> [Project Mock] [Assemble Project] --> [PluginContainer Mock] [Assemble Project] --> [Extension Mocks] [Assemble Project] --> [Layout Mocks] } package "### ग्रेडल एकीकरण ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml package "परीक्षण परत" { [Test Class] --> [createMockProject()] } package "मॉक सृजन" { [createMockProject()] --> [Create All Mocks] [Create All Mocks] --> [Configure Paths] [Configure Paths] --> [Configure Callbacks] [Configure Callbacks] --> [Assemble Project] } package "मॉक ऑब्जेक्ट्स" { [Assemble Project] --> [Project Mock] [Assemble Project] --> [PluginContainer Mock] [Assemble Project] --> [Extension Mocks] [Assemble Project] --> [Layout Mocks] } package "### ग्रेडल एकीकरण JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है: ```kotlin tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }" { [Test Class] --> [BakeryPlugin] [BakeryPlugin] --> [Project Mock] [BakeryPlugin] --> [PluginContainer Mock] } package "सत्यापन" { [Test Class] --> [verify(mockPluginContainer)] } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>जो एक साधारण परीक्षण समस्या लग रहा था, वह एक उत्कृष्ट केस स्टडी का उदाहरण साबित हुआ :</p> </div> <div class="ulist"> <ul> <li> <p>Kotlin के साथ Mockito की सूक्ष्मताएँ</p> </li> <li> <p>सही वस्तुओं का मॉक करने का महत्व</p> </li> <li> <p>परीक्षण में असिंक्रोनस कॉलबैक का प्रबंधन</p> </li> <li> <p>Gradle प्लगिन में पथ समाधान</p> </li> </ul> </div> <div class="paragraph"> <p>प्रणालीगत डिबगिंग, समस्या की प्रत्येक परत को समझते हुए, ने एक मजबूत और संधारणीय समाधान तक पहुँचने में सक्षम बना दिया।</p> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>सलाह आपके टेस्ट के लिए</strong>यदि आप Mockito के साथ "Wanted but not invoked" का सामना करते हैं, तो हमेशा खुद से पूछें: 1. क्या मैं सही mock की जाँच कर रहा हूँ? 2. क्या मेरे सभी मॉक कॉन्फ़िगरेशन ब्लॉक के बाहर बनाए जाते हैं ? 3. क्या मेरे कॉलबैक वास्तव में निष्पादित होते हैं ? 4. क्या मेरे रास्ते सही तरीके से हल हो रहे हैं?</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_संसाधन">संसाधन</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/mockito/mockito-kotlin">Mockito-Kotlin दस्तावेज़</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_plugins.html">Gradle Plugin Development Guide</a></p> </li> <li> <p><a href="https://jbake.org/">JBake स्टेटिक साइट जनरेटर</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p>क्या आपने अपने परीक्षणों में समान समस्याओं का सामना किया है? कृपया टिप्पणियों में अपने अनुभव को साझा करें!</p> </div> </div> </div> https://cheroliv.com/blog/2024/0075_kotlin_arrow-traverse_right_and_left_post.html Tue, 24 Sep 2024 00:00:00 +0000 blog/2024/0075_kotlin_arrow-traverse_right_and_left_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_इथर_मोनैड_क्या_है">इथर मोनैड क्या है ?</a> <ul class="sectlevel2"> <li><a href="#_either_का_उपयोग_क्यों_करें">Either का उपयोग क्यों करें?</a></li> </ul> </li> <li><a href="#_संदर्भ">संदर्भ</a></li> <li><a href="#_विभिन्न_दृष्टिकोण">विभिन्न दृष्टिकोण</a> <ul class="sectlevel2"> <li><a href="#_पारंपरिक_पद्धति_के_साथ_when">पारंपरिक पद्धति के साथ `when</a></li> <li><a href="#_fold_का_उपयोग_एक_अधिक_संक्षिप्त_दृष्टिकोण_के_लिए">fold` का उपयोग एक अधिक संक्षिप्त दृष्टिकोण के लिए</a></li> <li><a href="#_परिवर्तन_map_और_mapleft_के_साथ">परिवर्तन <code>map</code> और <code>mapLeft</code> के साथ</a></li> <li><a href="#_त्रुटि_प्रबंधन_के_साथ_getorelse">त्रुटि प्रबंधन के साथ `getOrElse</a></li> <li><a href="#_साइड_कार्रवाई_onleft_और_onright_के_साथ">साइड कार्रवाई <code>onLeft</code> और <code>onRight</code> के साथ</a></li> <li><a href="#_ऑपरेशन_चेनिंग_flatmap_के_साथ">ऑपरेशन चेनिंग <code>flatMap</code> के साथ</a></li> <li><a href="#_द्विदिशात्मक_परिवर्तन_के_साथ_bimap">द्विदिशात्मक परिवर्तन के साथ `bimap</a></li> <li><a href="#_swap_के_साथ_किनारों_को_उलटना">swap के साथ किनारों को उलटना</a></li> <li><a href="#_tap_और_tapleft_का_उपयोग">tap` और <code>tapLeft</code> का उपयोग:</a></li> <li><a href="#_उपयोग_recover">उपयोग <code>recover</code> :</a></li> </ul> </li> <li><a href="#_प्रायोगिक_उपयोग_के_मामले">प्रायोगिक उपयोग के मामले</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> <li><a href="#_और_आगे_जाने_के_लिए">और आगे जाने के लिए</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>लक्षित दर्शक :</em> मध्यम से उन्नत स्तर के कोटलिन डेवलपर्स</div> <p>Kotlin में कार्यात्मक प्रोग्रामिंग की दुनिया में, Arrow लाइब्रेरी शक्तिशाली उपकरण प्रदान करती है जो त्रुटियों और वैकल्पिक मामलों को संभालने के लिए हैं। इन उपकरणों में, मोनैड`Either`यह अपनी दो संभावित स्थितियों को दर्शाने की क्षमता के कारण विशेष है: सफलता (Right) या विफलता (Left)। लेकिन हम इन दो स्थितियों के बीच प्रभावी रूप से नेविगेट कैसे करें? ये हम इस लेख में खोजने वाले हैं।</p> </div> </div> </div> <div class="sect1"> <h2 id="_इथर_मोनैड_क्या_है">इथर मोनैड क्या है ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>एकक`Either`यह दो आपस में अनन्य संभावनाओं का प्रतिनिधित्व करने वाला एक डेटा संरचना है। Kotlin में Arrow के साथ, यह अक्सर किसी ऑपरेशन की सफलता और विफलता के मामलों को प्रबंधित करने के लिए उपयोग की जाती है, पारंपरिक अपवादों का एक शानदार विकल्प प्रदान करती है।</p> </div> <div class="sect2"> <h3 id="_either_का_उपयोग_क्यों_करें">Either का उपयोग क्यों करें?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>स्पष्ट त्रुटि प्रबंधन : डेवलपर को असफलता के मामलों पर विचार करने के लिए बाध्य करता है।</p> </li> <li> <p>कार्यात्मक संयोजन: असफल हो सकने वाले ऑपरेशनों की श्रृंखलाकरण को सुविधा प्रदान करता है।</p> </li> <li> <p>प्रकार‑सुरक्षा: त्रुटियाँ प्रकारबद्ध होती हैं, जिससे उनका अधिक सटीक प्रबंधन करना संभव होता है।</p> </li> <li> <p>Pas d’exceptions : Évite les effets de bord et les interruptions inattendues du flux d’exécution.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_संदर्भ">संदर्भ</h2> <div class="sectionbody"> <div class="paragraph"> <p>मान लीजिए कि आप एक REST API विकसित कर रहे हैंhttps://spring.io/projects/spring-boot/[Spring Boot,विंडोज़=पढ़ें बाद में] et <a href="https://kotlinlang.org/">Kotlin</a>, पुस्तकालय का उपयोग करकेhttps://arrow-kt.io/[तीर,विंडोज़=पढ़ें-बाद में]. आपके पास एक फ़ंक्शन है`findOneUserByEmail`जो एक लौटाता है`Either<Throwable, User>`आप इस परिणाम को शालीन और कार्यात्मक ढंग से कैसे संभाल सकते हैं?</p> </div> <div class="paragraph"> <p>हमारे पास एक User क्लास है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@file:Suppress( "RemoveRedundantQualifierName", "MemberVisibilityCanBePrivate", "SqlNoDataSourceInspection" ) package webapp.users import arrow.core.Either import arrow.core.left import arrow.core.right import com.fasterxml.jackson.annotation.JsonIgnore import com.fasterxml.jackson.databind.ObjectMapper import jakarta.validation.constraints.NotNull import jakarta.validation.constraints.Pattern import jakarta.validation.constraints.Size import org.springframework.beans.factory.getBean import org.springframework.context.ApplicationContext import org.springframework.data.r2dbc.core.R2dbcEntityTemplate import org.springframework.r2dbc.core.DatabaseClient import org.springframework.r2dbc.core.awaitOne import org.springframework.r2dbc.core.awaitRowsUpdated import webapp.core.property.ANONYMOUS_USER import webapp.core.property.EMPTY_STRING import webapp.core.utils.AppUtils.cleanField import webapp.users.EntityModel.Companion.ID_MEMBER import webapp.users.User.UserDao.Attributes.EMAIL_ATTR import webapp.users.User.UserDao.Attributes.ID_ATTR import webapp.users.User.UserDao.Attributes.LANG_KEY_ATTR import webapp.users.User.UserDao.Attributes.LOGIN_ATTR import webapp.users.User.UserDao.Attributes.PASSWORD_ATTR import webapp.users.User.UserDao.Attributes.VERSION_ATTR import webapp.users.User.UserDao.Constraints.LOGIN_REGEX import webapp.users.User.UserDao.Fields.EMAIL_FIELD import webapp.users.User.UserDao.Fields.ID_FIELD import webapp.users.User.UserDao.Fields.LANG_KEY_FIELD import webapp.users.User.UserDao.Fields.LOGIN_FIELD import webapp.users.User.UserDao.Fields.PASSWORD_FIELD import webapp.users.User.UserDao.Fields.VERSION_FIELD import webapp.users.User.UserDao.Relations.INSERT import webapp.users.security.Role import webapp.users.security.Role.RoleDao import webapp.users.security.UserRole.UserRoleDao import java.util.* import jakarta.validation.constraints.Email as EmailConstraint data class User( override val id: UUID? = null, @field:NotNull @field:Pattern(regexp = LOGIN_REGEX) @field:Size(min = 1, max = 50) val login: String, @JsonIgnore @field:NotNull @field:Size(min = 60, max = 60) val password: String = EMPTY_STRING, @field:EmailConstraint @field:Size(min = 5, max = 254) val email: String = EMPTY_STRING, @JsonIgnore val roles: MutableSet<Role> = mutableSetOf(Role(ANONYMOUS_USER)), @field:Size(min = 2, max = 10) val langKey: String = EMPTY_STRING, @JsonIgnore val version: Long = -1, ) : EntityModel<UUID>() { companion object { @JvmStatic fun main(args: Array<String>) = println(UserDao.Relations.sqlScript) } object UserDao { object Constraints { // Regex for acceptable logins const val LOGIN_REGEX = "^(?>[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)|(?>[_.@A-Za-z0-9-]+)$" const val PASSWORD_MIN: Int = 4 const val PASSWORD_MAX: Int = 16 const val IMAGE_URL_DEFAULT = "https://placehold.it/50x50" const val PHONE_REGEX = "^(\\+|00)?[1-9]\\d{0,49}\$" } object Members { const val PASSWORD_MEMBER = "password" const val ROLES_MEMBER = "roles" } object Fields { const val ID_FIELD = "`id`" const val LOGIN_FIELD = "`login`" const val PASSWORD_FIELD = "`password`" const val EMAIL_FIELD = "`email`" const val LANG_KEY_FIELD = "`lang_key`" const val VERSION_FIELD = "`version`" } object Attributes { val ID_ATTR = ID_FIELD.cleanField() val LOGIN_ATTR = LOGIN_FIELD.cleanField() val PASSWORD_ATTR = PASSWORD_FIELD.cleanField() val EMAIL_ATTR = EMAIL_FIELD.cleanField() const val LANG_KEY_ATTR = "langKey" val VERSION_ATTR = VERSION_FIELD.cleanField() } object Relations { const val TABLE_NAME = "`user`" const val SQL_SCRIPT = """ CREATE TABLE IF NOT EXISTS $TABLE_NAME ( $ID_FIELD UUID default random_uuid() PRIMARY KEY, $LOGIN_FIELD VARCHAR, $PASSWORD_FIELD VARCHAR, $EMAIL_FIELD VARCHAR, $LANG_KEY_FIELD VARCHAR, $VERSION_FIELD bigint ); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_login` ON $TABLE_NAME ($LOGIN_FIELD); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_email` ON $TABLE_NAME ($EMAIL_FIELD); """ @Suppress("SqlDialectInspection") const val INSERT = """ insert into $TABLE_NAME ( $LOGIN_FIELD, $EMAIL_FIELD, $PASSWORD_FIELD, $LANG_KEY_FIELD, $VERSION_FIELD ) values ( :login, :email, :password, :langKey, :version)""" @JvmStatic val sqlScript: String get() = setOf( UserDao.Relations.SQL_SCRIPT, RoleDao.Relations.SQL_SCRIPT, UserRoleDao.Relations.SQL_SCRIPT ).joinToString("") .trimMargin() } object Dao { val Pair<User, ApplicationContext>.toJson: String get() = second.getBean<ObjectMapper>().writeValueAsString(first) suspend fun Pair<User, ApplicationContext>.save(): Either<Throwable, Long> = try { second.getBean<R2dbcEntityTemplate>() .databaseClient .sql(INSERT) .bind(LOGIN_ATTR, first.login) .bind(EMAIL_ATTR, first.email) .bind(PASSWORD_ATTR, first.password) .bind(LANG_KEY_ATTR, first.langKey) .bind(VERSION_ATTR, first.version) .fetch() .awaitRowsUpdated() .right() } catch (e: Throwable) { e.left() } suspend fun ApplicationContext.findOneUserByEmail( email: String ): Either<Throwable, User> = try { getBean<DatabaseClient>() .sql("SELECT * FROM `user` WHERE LOWER(email) = LOWER(:email)") .bind("email", email) .fetch() .awaitOne() .let { row -> User( id = row[ID_ATTR] as UUID?, login = row[LOGIN_ATTR] as String, password = row[PASSWORD_ATTR] as String, email = row[EMAIL_ATTR] as String, langKey = row[LANG_KEY_ATTR] as String, version = row[VERSION_ATTR] as Long ) }.right() } catch (e: Throwable) { e.left() } } } /** Account REST API URIs */ object UserRestApis { const val API_AUTHORITY = "/api/authorities" const val API_USERS = "/api/users" const val API_SIGNUP = "/signup" const val API_SIGNUP_PATH = "$API_USERS$API_SIGNUP" const val API_ACTIVATE = "/activate" const val API_ACTIVATE_PATH = "$API_USERS$API_ACTIVATE?key=" const val API_ACTIVATE_PARAM = "{activationKey}" const val API_ACTIVATE_KEY = "key" const val API_RESET_INIT = "/reset-password/init" const val API_RESET_FINISH = "/reset-password/finish" const val API_CHANGE = "/change-password" const val API_CHANGE_PATH = "$API_USERS$API_CHANGE" } } // Abstract entity model with Generic ID, which can be of any type abstract class EntityModel<T>( open val id: T? = null ) { companion object { const val ID_MEMBER = "id" } } // Generic extension function that allows the ID to be applied to any EntityModel type inline fun <reified T : EntityModel<ID>, ID> T.withId(id: ID): T { // Use reflection to create a copy with the passed ID return this::class.constructors.first { it.parameters.any { param -> param.name == ID_MEMBER } } .call(id, *this::class.constructors.first().parameters.drop(1).map { param -> this::class.members.first { member -> member.name == param.name }.call(this) }.toTypedArray()) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_विभिन्न_दृष्टिकोण">विभिन्न दृष्टिकोण</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_पारंपरिक_पद्धति_के_साथ_when">पारंपरिक पद्धति के साथ `when</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val user: User by lazy { userFactory(USER) } val result: Either<Throwable, User> = context.findOneUserByEmail(user.email) when (result) { is Either.Left -> { val error = result.value println("Erreur : ${error.message}") } is Either.Right -> { val user = result.value println("Utilisateur trouvé : ${user.login}") } }</code></pre> </div> </div> <div class="paragraph"> <p>हालांकि यह विधि सरल और पठनीय है, यह तीर की कार्यात्मक क्षमताओं का पूरी तरह से उपयोग नहीं करती।</p> </div> </div> <div class="sect2"> <h3 id="_fold_का_उपयोग_एक_अधिक_संक्षिप्त_दृष्टिकोण_के_लिए">fold` का उपयोग एक अधिक संक्षिप्त दृष्टिकोण के लिए</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.fold( { error -> println("Erreur : ${error.message}") }, { user -> println("Utilisateur trouvé : ${user.login}") } )</code></pre> </div> </div> <div class="paragraph"> <p>`fold`यह Left और Right दोनों मामलों के लिए कार्यों को परिभाषित करने की अनुमति देता है, संक्षिप्त और शालीन तरीके से।</p> </div> </div> <div class="sect2"> <h3 id="_परिवर्तन_map_और_mapleft_के_साथ">परिवर्तन <code>map</code> और <code>mapLeft</code> के साथ</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val processedResult = result .map { user -> "Utilisateur trouvé : ${user.login}" } .mapLeft { error -> "Erreur : ${error.message}" } println(processedResult.merge())</code></pre> </div> </div> <div class="paragraph"> <p>यह दृष्टिकोण Either में निहित मान को बदलने की अनुमति देता है जबकि उसकी संरचना को संरक्षित रखता है, जो अधिक जटिल प्रक्रिया श्रृंखलाओं के लिए आदर्श है।</p> </div> </div> <div class="sect2"> <h3 id="_त्रुटि_प्रबंधन_के_साथ_getorelse">त्रुटि प्रबंधन के साथ `getOrElse</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val user = result.getOrElse { error -> println("Erreur : ${error.message}") User(login = "default", email = "default@example.com") // utilisateur par défaut } println("Login : ${user.login}")</code></pre> </div> </div> <div class="paragraph"> <p>`getOrElse`यह एक शानदार त्रुटि प्रबंधन प्रदान करता है क्योंकि यह एक डिफ़ॉल्ट मान प्रदान करने की अनुमति देता है।</p> </div> </div> <div class="sect2"> <h3 id="_साइड_कार्रवाई_onleft_और_onright_के_साथ">साइड कार्रवाई <code>onLeft</code> और <code>onRight</code> के साथ</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.onLeft { error -> println("Erreur : ${error.message}") } .onRight { user -> println("Utilisateur trouvé : ${user.login}") }</code></pre> </div> </div> <div class="paragraph"> <p>ये तरीके किसी भी तरफ कार्रवाई करने की अनुमति देते हैं, Either को संशोधित किए बिना, लॉगिंग या हल्के दुष्प्रभाव के लिए उपयुक्त।</p> </div> </div> <div class="sect2"> <h3 id="_ऑपरेशन_चेनिंग_flatmap_के_साथ">ऑपरेशन चेनिंग <code>flatMap</code> के साथ</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun findUser(email: String): Either<Throwable, User> = // ... implémentation fun getUserPermissions(user: User): Either<Throwable, List<String>> = // ... implémentation val userPermissions = findUser("user@example.com") .flatMap { user -> getUserPermissions(user) }</code></pre> </div> </div> <div class="paragraph"> <p><code>flatMap`यह ऐसे कार्यों को क्रम में जोड़ने के लिए उपयोगी है जो स्वयं लौटाते हैं`Either</code>, इस प्रकार बचते हुए`Either`संलग्न.</p> </div> </div> <div class="sect2"> <h3 id="_द्विदिशात्मक_परिवर्तन_के_साथ_bimap">द्विदिशात्मक परिवर्तन के साथ `bimap</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val processedResult = result.bimap( { error -> "Erreur: ${error.message}" }, { user -> "Utilisateur: ${user.login}" } )</code></pre> </div> </div> <div class="paragraph"> <p>`bimap`बायें और दायें दोनों पक्षों को एक ही ऑपरेशन में बदलने की अनुमति देता है।</p> </div> </div> <div class="sect2"> <h3 id="_swap_के_साथ_किनारों_को_उलटना">swap के साथ किनारों को उलटना</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val swapped = result.swap()</code></pre> </div> </div> <div class="paragraph"> <p><code>swap`यह उपयोगी है जब आप एक पक्ष को उलटना चाहते हैं`Either</code>, उदाहरण के लिए एक फ़ंक्शन के इंटरफ़ेस को दूसरे इंटरफ़ेस के अनुसार अनुकूलित करने के लिए.</p> </div> </div> <div class="sect2"> <h3 id="_tap_और_tapleft_का_उपयोग">tap` और <code>tapLeft</code> का उपयोग:</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.tap { user -> println("Utilisateur trouvé : ${user.login}") } .tapLeft { error -> println("Erreur : ${error.message}") }</code></pre> </div> </div> <div class="paragraph"> <p>जैसे`onLeft` et <code>onRight</code>, लेकिन इन विधियों में मूल Either लौटाया जाता है, जो संचालन की श्रृंखला के लिए उपयोगी है।</p> </div> </div> <div class="sect2"> <h3 id="_उपयोग_recover">उपयोग <code>recover</code> :</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val recoveredUser = result.recover { error -> println("Erreur récupérée : ${error.message}") User(login = "recovered", email = "recovered@example.com") } println("Login : ${recoveredUser.login}")</code></pre> </div> </div> <div class="paragraph"> <p>यह विधि एक प्रतिस्थापन मान प्रदान करके Either.Left को Either.Right में बदलने की अनुमति देती है।</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रायोगिक_उपयोग_के_मामले">प्रायोगिक उपयोग के मामले</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>उपयोग करें`fold`सरल संचालन के लिए जो प्रत्येक मामले के लिए प्रसंस्करण की आवश्यकता होती है। - आप प्राथमिकता दें`map` et <code>mapLeft`डेटा परिवर्तनों के लिए बिना संरचना बदले de l'`Either</code>. चुनें`flatMap`चेनिंग के दौरान विफल हो सकने वाले संचालन के दौरान उपयोग करें`recover`त्रुटि के मामले में एक डिफ़ॉल्ट मान प्रदान करने के लिए - चुनें`onLeft` et <code>onRight</code> (ou <code>tap</code> et <code>tapLeft</code>) साइड इफ़ेक्ट्स जैसे लॉगिंग के लिए. - उपयोग करें`bimap`दोनों पक्षों को एक ही ऑपरेशन में बदलने के लिए - लागू करें`swap`जब आपको किसी फ़ंक्शन के इंटरफ़ेस को दूसरे से अनुकूलित करने की आवश्यकता होती है।</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>इनमें से प्रत्येक दृष्टिकोण के अपने फायदे होते हैं उपयोग के संदर्भ के अनुसार। तरीके जैसे`fold`, <code>map</code>(No output)<code>mapLeft</code>, et `recover`वे विशेष रूप से उपयोगी होते हैं जब आप कई ऑपरेशन को क्रम में रखना चाहते हैं या डेटा को कार्यात्मक रूप से बदलना चाहते हैं।</p> </div> <div class="paragraph"> <p>मोनैड`Either`d’Arrow कोट्लिन एप्लिकेशनों में सफलता और त्रुटि के मामलों को संभालने के लिए उल्लेखनीय लचीलापन प्रदान करता है। इन विभिन्न दृष्टिकोनों को समझने पर, आप अधिक मजबूत, पढ़ने में आसान और अधिक कार्यात्मक कोड लिख पाएँगे।</p> </div> <div class="paragraph"> <p>अपने अगले प्रोजेक्ट में, इन तकनीकों का अन्वेषण करने में संकोच न करें ताकि आप कोटलिन और एरो के साथ कार्यात्मक प्रोग्रामिंग से अधिकतम लाभ उठा सकें !</p> </div> </div> </div> <div class="sect1"> <h2 id="_और_आगे_जाने_के_लिए">और आगे जाने के लिए</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>एरो की आधिकारिक दस्तावेज़:https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-either/[तीर या] <mark>#</mark> Gradle एकीकरण JBake को JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है:</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") }https://arrow-kt.io/docs/fx/[तीर Fx कोरूटीन] अपने अनुभव और पसंदीदा तकनीकें साझा करना न भूलें साथ में काम करने के लिए`Either`नीचे दिए गए टिप्पणियों में ! ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2024/0074_seach_file_linux_post.html Mon, 23 Sep 2024 00:00:00 +0000 blog/2024/0074_seach_file_linux_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_परिचय">परिचय</a></li> <li><a href="#_कमांड_का_उपयोग_find">कमांड का उपयोग `find</a> <ul class="sectlevel2"> <li><a href="#_अतिरिक्त_विकल्प_के_लिए_find">अतिरिक्त विकल्प के लिए `find</a></li> </ul> </li> <li><a href="#_कमांड_locate_का_उपयोग">कमांड <code>locate</code> का उपयोग</a></li> <li><a href="#_फ़ाइलों_में_टेक्स्ट_खोजने_के_लिए_grep_कमांड_का_उपयोग">फ़ाइलों में टेक्स्ट खोजने के लिए <code>grep</code> कमांड का उपयोग</a></li> <li><a href="#_निष्कर्ष">निष्कर्ष</a></li> </ul> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">समस्या : एक लिनक्स ऑपरेटिंग सिस्टम में टर्मिनल के माध्यम से फ़ाइलों की खोज करें।</div> <p>इस लेख में, हम बताएँगे कि Ubuntu में Zsh टर्मिनल का उपयोग करके फ़ाइल कैसे खोजी जाए। Zsh (Z शेल) एक शक्तिशाली और व्यापक रूप से प्रयोग किए जाने वाले कमांड इंटरप्रेटर है, जो अपनी लचीलापन और उन्नत विशेषताओं के लिए प्रसिद्ध है।</p> </div> <div class="paragraph"> <p>Ubuntu, एक लोकप्रिय लिनक्स वितरण, कमांड लाइन में कई उपकरण प्रदान करता है जिनका उपयोग फ़ाइलों को खोजने के लिए किया जाता है। हम देखेंगे कि कैसे ऐसे कमांड का उपयोग किया जाता है, जैसे कि`find`, <code>locate</code> et `grep`टर्मिनल में फ़ाइलों को तेज़ी से और प्रभावी ढंग से खोजने के लिए</p> </div> </div> </div> <div class="sect1"> <h2 id="_कमांड_का_उपयोग_find">कमांड का उपयोग `find</h2> <div class="sectionbody"> <div class="paragraph"> <p>आदेश`find`यह किसी विशिष्ट निर्देशिका और उसके उप-निर्देशिकाओं में फ़ाइलों की खोज करने की अनुमति देता है। इसका मूल वाक्य विन्यास निम्नलिखित है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find [chemin] -name [nom_du_fichier]</code></pre> </div> </div> <div class="paragraph"> <p>यहाँ एक व्यावहारिक उदाहरण है जहाँ हम एक नामित फ़ाइल की तलाश कर रहे हैं`example.txt`निर्देशिका में`/home`[Translation: The fragment to translate is empty, so the output is empty.]</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find /home -name "example.txt"</code></pre> </div> </div> <div class="paragraph"> <p>यह कमांड सभी उप-निर्देशिकाओं का अन्वेषण करेगी`/home`और यदि फ़ाइल मिलती है तो उसका पूर्ण पथ दिखाएँ</p> </div> <div class="paragraph"> <p><strong>कमांड का ऑनलाइन मैनुअल</strong><code>find</code>:https://man.archlinux.org/man/find.1.fr/[man find,windows=read-later]*</p> </div> <div class="sect2"> <h3 id="_अतिरिक्त_विकल्प_के_लिए_find">अतिरिक्त विकल्प के लिए `find</h3> <div class="paragraph"> <p>आदेश`find`यह बहुत शक्तिशाली है और कई विकल्प प्रदान करता है। यहाँ कुछ उपयोगी उदाहरण हैं :</p> </div> <div class="ulist"> <ul> <li> <p><strong>फ़ाइल प्रकार द्वारा खोजें</strong>: केवल फ़ाइलों की खोज करने के लिए, उपयोग करें`-type f`, और निर्देशिकाएँ, खोजने के लिए उपयोग करें`-type d`. - <strong>आकार द्वारा खोजें</strong>आप आकार के आधार पर फ़ाइलों को फ़िल्टर भी कर सकते हैं विकल्प का उपयोग करके`-size`. Par exemple, pour rechercher des fichiers de plus de 100 Mo, utilisez :</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">find /home -size +100M</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_कमांड_locate_का_उपयोग">कमांड <code>locate</code> का उपयोग</h2> <div class="sectionbody"> <div class="paragraph"> <p>आदेश`locate`ज्यादा तेज़ है`find`car यह प्रणाली पर मौजूद फ़ाइलों की पूर्व-इंडेक्स की गई डेटाबेस का उपयोग करती है। आपको इस डेटाबेस को अपडेट करने के लिए पहले निम्नलिखित कमांड का उपयोग करना होगा :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo updatedb</code></pre> </div> </div> <div class="paragraph"> <p>फिर, आप इस तरह एक फ़ाइल खोज सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">locate example.txt</code></pre> </div> </div> <div class="paragraph"> <p>मैं उपयोग कर रहा हूँhttps://fr.wikipedia.org/wiki/Z_Shell[zsh]साथhttps://github.com/ohmyzsh/ohmyzsh/wiki[oh-my-zsh], यह पता चलता है कि आदेश`locate`इसे एक्सेस नहीं किया जा सकता`zsh`लेकिन निश्चित रूप से संभव से`bash`, इस बात से निपटने के लिए, तर्क`-c`आदेश का`bash`एक कमांड चलाने की अनुमति देता है`bash`दूसरे प्रकार के टर्मिनल से।</p> </div> <div class="paragraph"> <p>यहाँ मैं उन फाइलों की तलाश कर रहा हूँ जो इस पैटर्न से समाप्त होती हैं`001.pdf`उपयोगकर्ता निर्देशिका में</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">bash -c "locate ~/*001.pdf"</code></pre> </div> </div> <div class="paragraph"> <p><strong>कमांड का ऑनलाइन मैनुअल`locate`:https://man.archlinux.org/man/locate.1.fr/[आदमी स्थान निर्धारित,windows=read-later]</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="_फ़ाइलों_में_टेक्स्ट_खोजने_के_लिए_grep_कमांड_का_उपयोग">फ़ाइलों में टेक्स्ट खोजने के लिए <code>grep</code> कमांड का उपयोग</h2> <div class="sectionbody"> <div class="paragraph"> <p>यदि आप फ़ाइल के भीतर किसी विशिष्ट पाठ को खोजना चाहते हैं, तो आप उपयोग कर सकते हैं`grep`. उदाहरण के लिए, "Ubuntu" शब्द की घटना खोजने के लिए सभी फ़ाइलों में`.txt`वर्तमान निर्देशिका में, उपयोग करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">grep "Ubuntu" *.txt</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ubuntu के तहत Zsh टर्मिनल के माध्यम से फ़ाइलों की खोज कई शक्तिशाली टूल्स के उपयोग से की जा सकती है।`find`लचीला है और बहुत सारे विकल्प प्रदान करता है, जबकि`locate`यह त्वरित खोज की अनुमति देता है पहले से निर्मित डेटाबेस का उपयोग करके। अंत में,`grep`फ़ाइलों के भीतर पाठ के उदाहरण खोजने की अनुमति देता है।</p> </div> <div class="paragraph"> <p>इन कमांडों से आपको फ़ाइलों की खोज को अधिक प्रभावी और आपकी आवश्यकताओं के अनुरूप बनाने के लिए टूल की पूरी श्रृंखला मिलती है, और इनमें से प्रत्येक कमांड के साथ एक मैनुअल दिखाई देता है।<code>man</code></p> </div> </div> </div> https://cheroliv.com/blog/2021/0030_memo_linux_post.html Mon, 23 Sep 2024 00:00:00 +0000 blog/2021/0030_memo_linux_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_कीबोर्ड">कीबोर्ड :</a> <ul class="sectlevel2"> <li><a href="#_ctrl_कुंजी"><em><Ctrl> कुंजी</em></a></li> </ul> </li> <li><a href="#_अनुमतिप्राधिकरण">अनुमति(प्राधिकरण)</a></li> <li><a href="#_फाइल_खोज">फाइल खोज</a></li> </ul> </div> <div class="sect1"> <h2 id="_कीबोर्ड">कीबोर्ड :</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrl_कुंजी"><em><Ctrl> कुंजी</em></h3> <table class="tableblock frame-all grid-all stretch"> </table> <div class="paragraph"> <p><a href="https://korben.info/les-raccourcis-clavier-pour-bash-terminal-linux-et-macos.html">लिंक</a><br> <a href="https://blogmotion.fr/systeme/astuces-bash-linux-16175">अन्य लिंक</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_अनुमतिप्राधिकरण">अनुमति(प्राधिकरण)</h2> <div class="sectionbody"> <div class="paragraph"> <p>CHMOD का उपयोग फ़ाइल की अनुमतियाँ बदलने के लिए किया जाता है।</p> </div> <div class="paragraph"> <p>अनुमति आदेश</p> </div> <div class="paragraph"> <p>U G W rwx rwx rwx chmod 777 फ़ाइल नाम rwx rwx r-x chmod 775 filename rwx r-x r-x chmod 755 फ़ाइल का नाम rw- rw- r-- chmod 664 filename rw- r-- r-- chmod 644 फ़ाइल नाम</p> </div> <div class="paragraph"> <p>U = उपयोगकर्ता G = समूह W = दुनिया</p> </div> <div class="paragraph"> <p>r = पढ़ने योग्य w = लेखन योग्य x = निष्पादन योग्य - = अनुमति नहीं</p> </div> <div class="paragraph"> <p>अनुमतियों को देखने का एक और तरीका:</p> </div> <div class="paragraph"> <p>400 मालिक द्वारा पढ़ा गया 040 समूह द्वारा पढ़ा गया 004 कोई भी द्वारा पढ़ा गया (अन्य) 200 मालिक द्वारा लिखा गया 020 समूह द्वारा लिखें 002 write by anybody 100 मालिक द्वारा निष्पादित 010 समूह द्वारा निष्पादित किसी भी द्वारा निष्पादित</p> </div> <div class="paragraph"> <p>एक संयोजन प्राप्त करने के लिए, बस उन्हें जोड़ दें।<br> उदाहरण के लिए, इसे पढ़ा, लिखा, निष्पादित करने के लिए स्वामी द्वारा,<br> पढ़ा, निष्पादित, समूह द्वारा और कोई भी द्वारा निष्पादित,<br> आप 400+200+100+040+010+001 जोड़ेंगे जिससे 751 प्राप्त होगा।<br></p> </div> </div> </div> <div class="sect1"> <h2 id="_फाइल_खोज"><a href="/blog/2024/0074_seach_file_linux_post.html">फाइल खोज</a></h2> <div class="sectionbody"> </div> </div> https://cheroliv.com/blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html Thu, 1 Feb 2024 00:00:00 +0000 blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html <div class="paragraph"> <div class="title"><em>पढ़ने का समय : 10 सेकंड</em></div> <p>समस्या : Ubuntu सबसिस्टम का होस्ट Windows होने पर पोर्ट 8820 को कैसे उजागर करें? Ubuntu को कमांड से बूट किया जाता है`wsl --install`.</p> </div> https://cheroliv.com/blog/2024/0070_installer_pandoc_post.html Tue, 30 Jan 2024 00:00:00 +0000 blog/2024/0070_installer_pandoc_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>पढ़ने का समय : 3 मिनट</em> Pandoc एक सार्वभौमिक दस्तावेज़ कंवर्टर</div> <p>Pandoc एक ओपन सोर्स टेक्स्ट प्रोसेसिंग सॉफ़्टवेयर है जो विभिन्न प्रारूपों के बीच दस्तावेज़ों को बदलने के लिए प्रयोग किया जा सकता है। पैंडोक को स्थापित करने के कई तरीके हैं।</p> </div> </div> </div> <div class="sect1"> <h2 id="_डाउनलोड_पेज_से_इंस्टॉलेशन">डाउनलोड पेज से इंस्टॉलेशन</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pandoc को डाउनलोड पेज से इंस्टॉल करने के लिए, निम्नलिखित चरणों का पालन करें :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>पंडॉक डाउनलोड पेज पर जाएँ:https://pandoc.org/installing.html/[<a href="https://pandoc.org/installing.html" class="bare">https://pandoc.org/installing.html</a>]</p> </li> <li> <p>अपने ऑपरेटिंग सिस्टम के लिए पैकेज इंस्टॉलर डाउनलोड करें।</p> </li> <li> <p>Pandoc स्थापित करने के लिए इंस्टॉलर चलाएँ।</p> </li> </ol> </div> <div class="paragraph"> <p><strong>ज़िप फ़ाइल से इंस्टॉलेशन</strong></p> </div> <div class="paragraph"> <p>एक zip फ़ाइल से Pandoc स्थापित करने के लिए, निम्नलिखित चरणों का पालन करें :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>पांडॉक बाइनरीज़ और दस्तावेज़ रखने वाली ज़िप फ़ाइल डाउनलोड करें।</p> </li> <li> <p>ज़िप फ़ाइल को निकालें।</p> </li> <li> <p>बाइनरी को अपनी पसंद की निर्देशिका में ले जाएँ।</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Chocolatey की मदद से स्थापना</strong></p> </div> <div class="paragraph"> <p>पंडॉक को Chocolatey के माध्यम से स्थापित करने के लिए, निम्नलिखित चरणों का पालन करें :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>कमांड प्रॉम्प्ट खोलें।</p> </li> <li> <p>आगामी कमांड को निष्पादित करें :</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-powershell" data-lang="powershell">choco install pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>winget का उपयोग करके स्थापना</strong></p> </div> <div class="paragraph"> <p>winget का उपयोग करके Pandoc स्थापित करने के लिए, इन चरणों का पालन करें :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>एक कमांड प्रॉम्प्ट खोलें।</p> </li> <li> <p>निम्नलिखित कमांड को निष्पादित करें :</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-powershell" data-lang="powershell">winget install --source winget --exact --id JohnMacFarlane.Pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>सिफ़ारिशें</strong></p> </div> <div class="paragraph"> <p>डिफ़ॉल्ट रूप से, Pandoc LaTeX का उपयोग करके PDF फ़ाइलें बनाता है। LaTeX को MiKTeX के माध्यम से स्थापित करने की सिफारिश की जाती है। विकल्प के साथ`--pdf-engine`हालांकि आप इस कार्य के लिए अन्य कार्यक्रम भी निर्दिष्ट कर सकते हैं।</p> </div> <div class="paragraph"> <p><strong>चेतावनी</strong></p> </div> <div class="paragraph"> <p>कई इंस्टॉलेशन विधियों का उपयोग करने से Pandoc की दो अलग-अलग इंस्टॉलेशन हो सकती हैं। अनुशंसा की जाती है कि वैकल्पिक इंस्टॉलेशन विधि में बदलने से पहले Pandoc को सही तरीके से अनइंस्टॉल कर दिया जाए।</p> </div> <div class="paragraph"> <p><strong>WSL के माध्यम से Linux पर स्थापना</strong></p> </div> <div class="paragraph"> <p>पैकेज प्रबंधक में pandoc के संस्करण की जाँच करें कि क्या यह पुराना नहीं है। Pandoc Debian, Ubuntu, Slackware, Arch, Fedora, NixOS, openSUSE, gentoo और Void के रिपॉजिटरी में उपलब्ध है।</p> </div> <div class="paragraph"> <p>नवीनतम संस्करण प्राप्त करने के लिए, हम amd64 आर्किटेक्चर के लिए बाइनरी पैकेज डाउनलोड पृष्ठ पर प्रदान करते हैं।</p> </div> <div class="paragraph"> <p>निष्पादन योग्य फ़ाइल स्थैतिक रूप से लिंक की गई है और इसमें कोई गतिशील निर्भरता नहीं है, साथ ही कोई बाहरी डेटा फ़ाइलों पर निर्भरता भी नहीं है। नोट: स्थैतिक लिंकिंग के कारण, इस पैकेज का pandoc बाइनरी ऐसे lua फ़िल्टर का उपयोग नहीं कर सकता है जिनमें C में लिखे गए बाहरी lua मॉड्यूल की आवश्यकता होती है।</p> </div> <div class="paragraph"> <p>एक tarball और एक deb इंस्टॉलर प्रदान किया जाता है। deb को स्थापित करने के लिए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo dpkg -i $DEB</code></pre> </div> </div> <div class="paragraph"> <p>लेखन के समय उदाहरण :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">wget https://github.com/jgm/pandoc/releases/download/3.1.11.1/pandoc-3.1.11.1-1-amd64.deb</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">sudo dpkg -i pandoc-3.1.11.1-1-amd64.deb</code></pre> </div> </div> <div class="paragraph"> <p>où `$DEB`यह डाउनलोड किए गए deb तक जाने का पथ है। यह एक्सीक्यूटेबल इंस्टॉल करेगा`pandoc`और मैनुअल पृष्ठ</p> </div> <div class="paragraph"> <p>यदि आप RPM-आधारित वितरण का उपयोग कर रहे हैं, तो आप संभवतः हमारे डाउनलोड पृष्ठ से .deb को एलीन का उपयोग करके स्थापित कर सकते हैं।</p> </div> <div class="paragraph"> <p>कोई भी वितरण पर, आप tarball से इंस्टॉल कर सकते हैं`$DEST`(उदाहरण के लिए,<code>/usr/local/</code> ou <code>$HOME/.local</code>) करते हुए :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">tar xvzf $TGZ --strip-components 1 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>où `$TGZ`यह डाउनलोड किए गए ज़िप्ड टारबॉल का पथ है। पांडोक के 2.0 से पहले के संस्करणों के लिए, जो टारबॉल प्रदान नहीं करते हैं, इसके बजाय प्रयास करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">ar p $DEB data.tar.gz | tar xvz --strip-components 2 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>आप स्रोत से भी इंस्टॉल कर सकते हैं, नीचे दिए गए निर्देशों का उपयोग करके`Compilation à partir de la source`. ध्यान दें कि अधिकांश वितरणों में उनके पैकेज रिपॉज़िटरी में हास्केल प्लेटफ़ॉर्म उपलब्ध है। उदाहरण के लिए, Debian/Ubuntu पर, आप इसे स्थापित कर सकते हैं</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">apt-get install haskell-platform</code></pre> </div> </div> <div class="paragraph"> <p>डिफ़ॉल्ट रूप से, Pandoc LaTeX का उपयोग करके PDFs बनाता है। हम आपको अपने पैकेज मैनेजर के माध्यम से TeX Live स्थापित करने की सिफारिश करते हैं। (डेबियन/उबंटू पर,<code>apt-get install texlive</code>). विकल्प के साथ`--pdf-engine`, आप हालांकि इस कार्य के लिए अन्य प्रोग्राम निर्दिष्ट कर सकते हैं।</p> </div> </div> </div> https://cheroliv.com/blog/2023/0069_triple_python_js_ts_post.html Mon, 25 Dec 2023 00:00:00 +0000 blog/2023/0069_triple_python_js_ts_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>पढ़ने का समय: 2 मिनट</em> JavaScript, TypeScript और Python में kotlin.Triple क्लास का पूर्ण कार्यान्वयन कार्यात्मक प्रोग्रामिंग का उपयोग करके बनाएं।</div> <p><strong>नोट :</strong>प्रकार`Maybe`, <code>Either</code>, `Result`वे जावास्क्रिप्ट या टाइपस्क्रिप्ट के मूल भाषा के हिस्सा नहीं हैं, इसलिए हमें उन्हें खुद लागू करना होगा।</p> </div> </div> </div> <div class="sect1"> <h2 id="_जावास्क्रिप्ट">जावास्क्रिप्ट</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">//javascript // Maybe type const Maybe = (value) => ({ map: (fn) => (value !== null && value !== undefined ? Maybe(fn(value)) : Maybe(null)), flatMap: (fn) => (value !== null && value !== undefined ? fn(value) : Maybe(null)), getOrElse: (defaultValue) => (value !== null && value !== undefined ? value : defaultValue), }); // Either type const Either = { Left: (value) => ({ map: (fn) => Either.Left(value), flatMap: (fn) => Either.Left(value), getOrElse: (defaultValue) => defaultValue, isLeft: true, isRight: false, }), Right: (value) => ({ map: (fn) => Either.Right(fn(value)), flatMap: (fn) => fn(value), getOrElse: (defaultValue) => value, isLeft: false, isRight: true, }), }; // Triple class class Triple { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; } map(fn) { return new Triple(fn(this.a), fn(this.b), fn(this.c)); } static of(a, b, c) { return new Triple(a, b, c); } // Example method using Maybe and Either divideBy(other) { return Maybe(this.b) .flatMap((numerator) => Maybe(other) .flatMap((denominator) => denominator !== 0 ? Either.Right(numerator / denominator) : Either.Left('Division by zero') ) ) .getOrElse(Either.Left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_typescript">TypeScript</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">//Typescript // Maybe type // noinspection JSAnnotator type Maybe<T> = { map<U>(fn: (value: T) => U): Maybe<U>; flatMap<U>(fn: (value: T) => Maybe<U>): Maybe<U>; getOrElse(defaultValue: T): T; }; const just = <T>(value: T): Maybe<T> => ({ map: <U>(fn: (value: T) => U) => just(fn(value)), flatMap: <U>(fn: (value: T) => Maybe<U>) => fn(value), getOrElse: (_: T) => value, }); const nothing = <T>(): Maybe<T> => ({ map: <U>(_: (value: T) => U) => nothing<U>(), flatMap: <U>(_: (value: T) => Maybe<U>) => nothing<U>(), getOrElse: (defaultValue: T) => defaultValue, }); // Either type type Either<L, R> = { map<U>(fn: (value: R) => U): Either<L, U>; flatMap<U>(fn: (value: R) => Either<L, U>): Either<L, U>; getOrElse(defaultValue: R): R; isLeft: boolean; isRight: boolean; }; const left = <L, R>(value: L): Either<L, R> => ({ map: <U>(_: (value: R) => U) => left<L, U>(value), flatMap: <U>(_: (value: R) => Either<L, U>) => left<L, U>(value), getOrElse: (defaultValue: R) => defaultValue, isLeft: true, isRight: false, }); const right = <L, R>(value: R): Either<L, R> => ({ map: <U>(fn: (value: R) => U) => right<L, U>(fn(value)), flatMap: <U>(fn: (value: R) => Either<L, U>) => fn(value), getOrElse: (_: R) => value, isLeft: false, isRight: true, }); // Triple class class Triple<T> { constructor(public a: T, public b: T, public c: T) {} map<U>(fn: (value: T) => U): Triple<U> { return new Triple<U>(fn(this.a), fn(this.b), fn(this.c)); } static of<T>(a: T, b: T, c: T): Triple<T> { return new Triple<T>(a, b, c); } // Example method using Maybe and Either divideBy(other: T): Either<string, number> { return just(this.b) .flatMap((numerator) => just(other) .flatMap((denominator) => denominator !== 0 ? right(numerator / denominator) : left('Division by zero') ) ) .getOrElse(left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_python_pydantic_pymonad">Python, pydantic, pymonad</h2> <div class="sectionbody"> <div class="paragraph"> <p>Python में एक कार्यान्वयन बनाने के लिए उपयोग करके`pydantic`प्रकारों की पुष्टि के लिए और`pymonad`मोनाड्स के लिए :</p> </div> <div class="listingblock"> <div class="title">निर्भरताएँ स्थापित करें :</div> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">pip install pydantic pymonad</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-python" data-lang="python">from pymonad.either import Either, Left, Right from pydantic import BaseModel, ValidationError, validator # Définition de la classe Triple avec Pydantic class Triple(BaseModel): a: int b: int c: int @validator('b') def validate_b(cls, b, values): if b == 0: raise ValueError('Division by zero is not allowed') return b # Méthode utilisant Either pour la gestion des erreurs def divide_by(self, other): def division(numerator, denominator): return Right(numerator / denominator) def handle_error(error): return Left(str(error)) return Either(lambda: division(self.b, other)).or_else(handle_error) # Exemple d'utilisation try: triple = Triple(a=1, b=2, c=3) result = triple.divide_by(2) if result.is_right: print(f'Division result: {result.value}') else: print(f'Error: {result.value}') except ValidationError as e: print(f'Validation Error: {e}') except Exception as e: print(f'An unexpected error occurred: {e}')</code></pre> </div> </div> <div class="ulist"> <div class="title">इस उदाहरण में :</div> <ul> <li> <p><code>pydantic`क्लास को परिभाषित करने के लिए`Triple`टाइप्ड फ़ील्ड के साथ. विधि`divide_by`मोनाड का उपयोग करता है`Either</code> de `pymonad`शून्य से विभाजन के परिणामस्वरूप होने वाली संभावित त्रुटियों को संभालने के लिए - व्यक्तिगत सत्यापन यह सुनिश्चित करने के लिए कि मान का`b`यह शून्य के बराबर नहीं है। यदि यह शून्य के बराबर है, तो एक अपवाद उठाया जाता है, और`pymonad`इसे परिणाम लौटाने के लिए इस अपवाद को पकड़ें`Left`त्रुटि दर्शाते हुए.</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2023/0068_introduction_google_apps_script_post.html Fri, 22 Dec 2023 00:00:00 +0000 blog/2023/0068_introduction_google_apps_script_post.html <div class="sect1"> <h2 id="_विषय_सूची">विषय-सूची</h2> <div class="sectionbody"> <div class="paragraph"> <p><em>पढ़ने का समय : 30 मिनट</em></p> </div> <div class="ulist"> <ul> <li> <p><a href="#परिचय">[परिचय]</a></p> </li> <li> <p>Google Apps Script में बुनियादी संरचना</p> </li> <li> <p><a href="#गूगल एप्स स्क्रिप्ट में प्रकार और चर">[गूगल एप्स स्क्रिप्ट में प्रकार और चर]</a></p> </li> <li> <p><a href="#स्थिरांक">चर, और Google Apps Script में अक्षर</a></p> </li> <li> <p>Google Apps Script में संचालन और ऑपरेटर</p> </li> <li> <p>Var, Let और Const Google Apps Script में</p> </li> <li> <p>Google Apps Script में नियंत्रण संरचनाएँ</p> </li> <li> <p><a href="#_google_apps_script_में_लूप">Google Apps Script में लूप</a></p> </li> <li> <p><a href="#गूगल ऐप्स स्क्रिप्ट में वस्तुएँ">[गूगल ऐप्स स्क्रिप्ट में वस्तुएँ]</a></p> </li> <li> <p><a href="#फ़ंक्शन Google Apps Script में">[फ़ंक्शन Google Apps Script में]</a></p> </li> <li> <p><a href="#पैरामीटर और स्कोप में Google Apps Script">[पैरामीटर और स्कोप में Google Apps Script]</a></p> </li> <li> <p><a href="#Google Apps Script में रेस्ट और स्प्रेड ऑपरेटर">[Google Apps Script में रेस्ट और स्प्रेड ऑपरेटर]</a></p> </li> <li> <p><a href="#Google Apps Script में विघटन द्वारा आवंटन">[Google Apps Script में विघटन द्वारा आवंटन]</a></p> </li> <li> <p><a href="#कलेक्शन और घोषणात्मक प्रोग्रामिंग Google Apps Script में">[कलेक्शन और घोषणात्मक प्रोग्रामिंग Google Apps Script में]</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_परिचय">परिचय</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script (GAS) Google सेवाओं जैसे Google Sheets, Google Docs और Google Forms से जुड़ी एक स्क्रिप्ट विकास प्लेटफ़ॉर्म है। यह कार्यों को स्वचालित करने, कस्टम फ़ंक्शन जोड़ने और Google सेवाओं को एकीकृत करने की अनुमति देती है।</p> </div> <div class="paragraph"> <p>इस ज्ञापन में, हम ठोस उदाहरणों के आधार पर Google Apps Script के मुख्य अवधारणाओं का पता लगाएंगे। हम चर, लूप, फ़ंक्शन जैसी अवधारणाओं के साथ-साथ अन्य कई चीज़ों को GAS के विशिष्ट संदर्भ में अनुकूलित करके देखेंगे।</p> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_मूल_संरचना">Google Apps Script में मूल संरचना</h2> <div class="sectionbody"> <div class="paragraph"> <p>शुरू करने से पहले, आइए Google Apps स्क्रिप्ट की मूल संरचना की जाँच करें।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Structure de base en Google Apps Script */ function exempleStructureGAS() { // Votre code ici Logger.log("Hello, Google Apps Script!"); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रकार_और_चर_google_apps_script_में">प्रकार और चर Google Apps Script में</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script को प्रोग्रामिंग भाषा के रूप में JavaScript का उपयोग करता है। डेटा प्रकार और चर मानक JavaScript की तरह काम करते हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Types et Variables en Google Apps Script */ function exempleTypesVariablesGAS() { // Votre code ici var nombre = 42; var texte = "Bonjour, Google Apps Script!"; Logger.log(nombre); Logger.log(texte); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_गूगल_ऐप्स_स्क्रिप्ट_में_संचालन_और_संचालक">गूगल ऐप्स स्क्रिप्ट में संचालन और संचालक</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script में ऑपरेशन और ऑपरेटर JavaScript के समान होते हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérations et Opérateurs en Google Apps Script */ function exempleOperationsGAS() { // Votre code ici var x = 10; var y = 5; var resultat = x + y; Logger.log(resultat); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_var_let_और_const_google_apps_script_में">Var, Let और Const Google Apps Script में</h2> <div class="sectionbody"> <div class="paragraph"> <p>GAS में, अवधारणाओं का`var`, <code>let</code>, et `const`इन्हें चर को घोषित करने के लिए उपयोग किया जाता है। हालाँकि, उनके अंतर और उनके निहितार्थ को समझना आवश्यक है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Var, Let et Const en Google Apps Script */ function exempleVarLetConstGAS() { // Votre code ici // Utilisation de var var x = 10; if (true) { var x = 20; // La variable x est modifiée globalement } Logger.log(x); // Utilisation de let let y = 30; if (true) { let y = 40; // La variable y est limitée au bloc if } Logger.log(y); // Utilisation de const const z = 50; // z = 60; // Impossible de réassigner une constante Logger.log(z); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_नियंत्रण_संरचनाएँ_google_apps_script_में">नियंत्रण संरचनाएँ Google Apps Script में</h2> <div class="sectionbody"> <div class="paragraph"> <p>नियंत्रण संरचनाएँ जैसे`if`, <code>else</code>, <code>while</code> et `for`इन्हें Google Apps Script में निष्पादन प्रवाह को प्रबंधित करने के लिए प्रयोग किया जाता है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Structures de Contrôle en Google Apps Script */ function exempleStructuresControleGAS() { // Votre code ici var condition = true; if (condition) { Logger.log("La condition est vraie."); } else { Logger.log("La condition est fausse."); } var compteur = 0; while (compteur < 5) { Logger.log(compteur); compteur++; } for (var i = 0; i < 3; i++) { Logger.log(i); } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_पैरामीटर_और_स्कोप्स_google_apps_script_में">पैरामीटर और स्कोप्स Google Apps Script में</h2> <div class="sectionbody"> <div class="paragraph"> <p>पैरामीटर और स्कोप GAS में स्क्रिप्ट विकास में एक महत्वपूर्ण भूमिका निभाते हैं। समझें कि वे कैसे काम करते हैं ताकि अप्रत्याशित व्यवहार से बचा जा सके।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Paramètres et Scopes en Google Apps Script */ function exempleParametresScopesGAS(parametre) { // Votre code ici var variableGlobale = "Je suis global"; function afficherParametre() { Logger.log(parametre); } afficherParametre(); Logger.log(variableGlobale); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_स्थिरांक_चर_और_अक्षर">Google Apps Script में स्थिरांक, चर, और अक्षर</h2> <div class="sectionbody"> <div class="paragraph"> <p>अंतर को समझना`const`, <code>var</code>, et `let`यह Google Apps Script में चर के प्रभावी उपयोग के लिए आवश्यक है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Constantes, Variables, et Lettres en Google Apps Script */ function exempleConstantesVariablesLettresGAS() { // Votre code ici const constante = "Je ne change pas"; Logger.log(constante); var variable = "Je peux changer"; Logger.log(variable); let lettre = "Je peux aussi changer, mais seulement dans mon bloc"; Logger.log(lettre); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_लूप">Google Apps Script में लूप</h2> <div class="sectionbody"> <div class="paragraph"> <p>लूप, जैसे`for` et <code>while</code>, तत्वों पर इटरेट करने और दोहराव वाले संचालन करने के लिए आवश्यक हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Boucles en Google Apps Script */ function exempleBouclesGAS() { // Votre code ici for (var i = 0; i < 3; i++) { Logger.log(i); } var condition = true; var compteur = 0; while (condition) { Logger.log("Tour de boucle"); compteur++; if (compteur === 3) { condition = false; } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_गूगल_एप्स_स्क्रिप्ट_में_वस्तुएँ">गूगल एप्स स्क्रिप्ट में वस्तुएँ</h2> <div class="sectionbody"> <div class="paragraph"> <p>वस्तुओं का उपयोग डेटा को संरचित करने के लिए किया जाता है। GAS में, कई अंतर्निहित वस्तुएं Google सेवाओं के साथ इंटरैक्शन को सुगम बनाती हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Objets en Google Apps Script */ function exempleObjetsGAS() { // Votre code ici var feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var cellule = feuille.getRange("A1"); cellule.setValue("Nouvelle valeur"); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_स्थिरांक_चर_और_अक्षर_2">Google Apps Script में स्थिरांक, चर और अक्षर</h2> <div class="sectionbody"> <div class="paragraph"> <p>अंतर को समझना`const`, <code>var</code>, et `let`यह आवश्यक है Google Apps Script में चरों के प्रभावी उपयोग के लिए।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Constantes, Variables, et Lettres en Google Apps Script */ function exempleConstantesVariablesLettresGAS() { // Votre code ici const constante = "Je ne change pas"; Logger.log(constante); var variable = "Je peux changer"; Logger.log(variable); let lettre = "Je peux aussi changer, mais seulement dans mon bloc"; Logger.log(lettre); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_फ़ंक्शन">Google Apps Script में फ़ंक्शन</h2> <div class="sectionbody"> <div class="paragraph"> <p>फ़ंक्शन प्रोग्रामिंग में मूलभूत तत्व होते हैं। GAS में, उन्हें विभिन्न तरीकों से घोषित और कॉल किया जा सकता है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Fonctions en Google Apps Script */ function exempleFonctionsGAS() { // Votre code ici function additionner(a, b) { return a + b; } var resultat = additionner(2, 3); Logger.log(resultat); // Fonction anonyme var multiplier = function (x, y) { return x * y; }; Logger.log(multiplier(4, 5)); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_गूगल_एप्स_स्क्रिप्ट_में_आराम_और_प्रसार_ऑपरेटर">गूगल एप्स स्क्रिप्ट में आराम और प्रसार ऑपरेटर</h2> <div class="sectionbody"> <div class="paragraph"> <p>विराम संचालक (<code>…​</code>) और प्रसार की (<code>…​</code>) ये एरे (या सरणी) और ऑब्जेक्ट को संक्षिप्त रूप से नियंत्रित करने में उपयोगी हैं।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérateurs de Repos et de Propagation en Google Apps Script */ function exempleOperateursReposPropagationGAS() { // Votre code ici // Opérateur de repos (...) pour les tableaux var nombres = [1, 2, 3, 4, 5]; var [...copieNombres] = nombres; Logger.log(copieNombres); // Opérateur de propagation (...) pour les objets var objOriginal = { x: 1, y: 2 }; var objClone = { ...objOriginal, z: 3 }; Logger.log(objClone); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_google_apps_script_में_विघटन_द्वारा_असाइनमेंट">Google Apps Script में विघटन द्वारा असाइनमेंट</h2> <div class="sectionbody"> <div class="paragraph"> <p>विनियोजन द्वारा विघटन एक शक्तिशाली विशेषता है जो वस्तुओं और ऐरे से मान को संक्षिप्त रूप में निकालने की अनुमति देती है।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Affectation par Décomposition en Google Apps Script */ function exempleAffectationDecompositionGAS() { // Votre code ici var coordonnees = [3, 4]; var [x, y] = coordonnees; Logger.log(x); Logger.log(y); var utilisateur = { nom: "John", age: 30 }; var { nom, age } = utilisateur; Logger.log(nom); Logger.log(age); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_collections_et_programmation_déclarative_en_google_apps_script">Collections et Programmation Déclarative en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script डेटा संरचनाओं जैसे कि एरे का समर्थन करता है, और कार्यात्मक प्रोग्रामिंग तथा घोषित इटरेशन की अवधारणाओं (><आदेशात्मक) जैसे कि`map`, <code>reduce</code> et <code>forEach</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Collections et Programmation Déclarative en Google Apps Script */ function exempleCollectionsFonctionnelleGAS() { // Votre code ici // Exemple de tableau (collection) var nombres = [1, 2, 3, 4, 5]; // Utilisation de forEach nombres.forEach(function (nombre) { Logger.log(nombre); }); // Utilisation de map var carresNombres = nombres.map(function (nombre) { return nombre * nombre; }); Logger.log(carresNombres); // Utilisation de reduce var somme = nombres.reduce(function (acc, nombre) { return acc + nombre; }, 0); Logger.log(somme); }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_निष्कर्ष">निष्कर्ष</h2> <div class="sectionbody"> <div class="paragraph"> <p>इस मेमो ने Google Apps Script के मूलभूत अवधारणाओं को ठोस कोड उदाहरणों के माध्यम से समझाते हुए कवर किया। आप इस ज्ञान का उपयोग करके अपने दैनिक कार्यों को स्वचालित कर सकते हैं, अपने दस्तावेज़ों को वैयक्तिकृत कर सकते हैं और Google Apps Script की सभी सुविधाओं का पूर्ण उपयोग कर सकते हैं।</p> </div> </div> </div> https://cheroliv.com/blog/2023/0067_formation_express_sur_google_forms_script_post.html Wed, 20 Dec 2023 00:00:00 +0000 blog/2023/0067_formation_express_sur_google_forms_script_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>अवधि: 30 मिनट</p> </div> </div> </div> <div class="sect1"> <h2 id="_उद्देश्य">उद्देश्य</h2> <div class="sectionbody"> <div class="paragraph"> <p>Forms में Google Apps Script के मूल सिद्धांत समझें - स्क्रिप्ट एडिटर तक पहुँचना सीखें और ट्रिगर पर एक निर्देश निष्पादित करें</p> </div> </div> </div> <div class="sect1"> <h2 id="_समय_खींचना">समय खींचना</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>गूगल फ़ॉर्म स्क्रिप्ट का परिचय</strong>(5 मिनट)</p> <div class="ulist"> <ul> <li> <p>Google Form Script का त्वरित अवलोकन - मुख्य विशेषताओं की प्रस्तुति</p> </li> </ul> </div> </li> <li> <p><strong>एक Google फ़ॉर्म और एक संबंधित स्क्रिप्ट का निर्माण</strong>(5 मिनट)</p> <div class="ulist"> <ul> <li> <p>गूगल फ़ॉर्म्स के साथ एक सरल फ़ॉर्म बनाना - संलग्न स्क्रिप्ट संपादक का परिचय</p> </li> </ul> </div> </li> <li> <p><strong>निर्देश निष्पादित करें</strong>(10 मिनट)</p> <div class="ulist"> <ul> <li> <p>ऑन स्टार्ट ट्रिगर की कॉन्फ़िगरेशन "on start - ट्रिगर की कॉन्फ़िगरेशन \"on submit\ एक निर्देश चलाने के लिए एक स्क्रिप्ट लिखना - त्वरित परीक्षण जर्नल में सही काम करने की जाँच करने के लिए</p> </li> </ul> </div> </li> <li> <p><strong>परिणामों का विश्लेषण और सर्वोत्तम प्रथाएँ</strong>(10 मिनट)</p> </li> </ol> </div> <div class="paragraph"> <p>निर्देश के निष्पादन के परिणामों की पुष्टि - स्क्रिप्ट के एक उदाहरण पर चर्चा और कैसे स्वचालन समय बचा सकता है</p> </div> </div> </div> <div class="sect1"> <h2 id="_पूर्वशर्त">पूर्वशर्त</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>एक Google खाता और Google Forms और Google Sheets तक पहुँच होना</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_सामग्री">सामग्री</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>कंप्यूटर के साथ एक वेब ब्राउज़र और एक इंटरनेट कनेक्शन</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_टिप्पणी">टिप्पणी</h2> <div class="sectionbody"> <div class="paragraph"> <p>यह एक्सप्रेस प्रशिक्षण Google Form Script के साथ स्वचालन का त्वरित परिचय देता है। एक गहरी समझ के लिए, लंबी अवधि के प्रशिक्षण की सिफ़ारिश की जाती है।</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_google_form_स्क्रिप्ट_का_परिचय">1 - Google Form स्क्रिप्ट का परिचय</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_slide_1_google_form_script_का_त्वरित_अवलोकन">Slide 1: Google Form Script का त्वरित अवलोकन</h3> <div class="ulist"> <ul> <li> <p>Google Form Script एक Google Forms में एम्बेडेड स्क्रिप्टिंग प्लेटफ़ॉर्म है। - यह कस्टम फ़ीचर जोड़ने और कार्यों को स्वचालित करने की अनुमति देता है।</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_स्लाइड_2_मुख्य_सुविधाओं_का_परिचय">स्लाइड 2: मुख्य सुविधाओं का परिचय</h3> <div class="ulist"> <ul> <li> <p>Script Editor : इंटीग्रेटेड स्क्रिप्ट एडिटर Google Apps Script स्क्रिप्ट लिखने के लिए - ट्रिगर : 'on submit' जैसी घटनाएँ जो स्क्रिप्ट के निष्पादन को सक्रिय करती हैं।</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_3_google_फ़ॉर्म_स्क्रिप्ट_के_उपयोग_के_लाभ">Slide 3: Google फ़ॉर्म स्क्रिप्ट के उपयोग के लाभ</h3> <div class="paragraph"> <p>कस्टमाइज़ेशन: अद्वितीय सुविधाओं के साथ कस्टम फ़ॉर्म बनाएँ। - ऑटोमेशन: फ़ॉर्म प्रतिक्रियाओं के जवाब में कार्यों को स्वचालित करें. - इंटीग्रेशन : अन्य Google सेवाओं के साथ स्क्रिप्ट को एकीकृत करें एक समृद्ध अनुभव के लिए।</p> </div> </div> <div class="sect2"> <h3 id="_प्रस्तुतकर्ता_के_लिए_नोट">प्रस्तुतकर्ता के लिए नोट:</h3> <div class="paragraph"> <p>ये सुविधाएँ फ़ॉर्म को अनुकूलित और स्वचालित करने के लिए बहुत अधिक क्षमता प्रदान करती हैं। इस प्रशिक्षण के अगले भाग में स्क्रिप्ट और विशिष्ट ऑटोमेशन के निर्माण का विस्तृत अन्वेषण किया जाएगा।</p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/add-ons/editors/forms?hl=fr" class="bare">https://developers.google.com/apps-script/add-ons/editors/forms?hl=fr</a></p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/reference/forms?hl=fr" class="bare">https://developers.google.com/apps-script/reference/forms?hl=fr</a></p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/reference/forms/form-app?hl=fr" class="bare">https://developers.google.com/apps-script/reference/forms/form-app?hl=fr</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_गूगल_फ़ॉर्म_और_संबंधित_स्क्रिप्ट_बनाना_5_मिनट">गूगल फ़ॉर्म और संबंधित स्क्रिप्ट बनाना (5 मिनट)</h2> <div class="sectionbody"> </div> </div> https://cheroliv.com/blog/2023/0066_memo_python_post.html Sun, 19 Nov 2023 00:00:00 +0000 blog/2023/0066_memo_python_post.html <div class="sect1"> <h2 id="_विंडोज़_पर_पायथन_इंस्टॉल_करें">विंडोज़ पर पायथन इंस्टॉल करें</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://ninite.com/pythonx3/">विंडोज़ पर पायथन</a></p> </div> <div class="paragraph"> <p><a href="https://python-docs.readthedocs.io/en/latest/starting/install3/win.html" class="bare">https://python-docs.readthedocs.io/en/latest/starting/install3/win.html</a></p> </div> <div class="paragraph"> <p><a href="https://python-docs.readthedocs.io/en/latest/dev/virtualenvs.html#virtualenvironments-ref" class="bare">https://python-docs.readthedocs.io/en/latest/dev/virtualenvs.html#virtualenvironments-ref</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_पायथन_चल_रहा_है">पायथन चल रहा है</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">संदर्भ :</div> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">cd mon_projet python -m venv mon_venv source mon_venv/bin/activate # Sur windows mon_venv\Scripts\activate deactivate</code></pre> </div> </div> <div class="sect2"> <h3 id="_इंस्टॉल_आवश्यकता">इंस्टॉल आवश्यकता</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">pip install -r requirements.txt</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_प्रारंभ">प्रारंभ</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://python.doctor/page-apprendre-programmation-orientee-objet-poo-classes-python-cours-debutants">python वस्तु-उन्मुख प्रोग्रामिंग</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_gof_के_डिज़ाइन_पैटर्न_python_में">GoF के डिज़ाइन पैटर्न Python में</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://github.com/whikwon/python-patterns/">कार्यान्वयन 1</a></p> </div> <div class="paragraph"> <p><a href="https://github.com/Sean-Bradley/Design-Patterns-In-Python">कार्यान्वयन 2</a></p> </div> <div class="paragraph"> <p><a href="https://sbcode.net/python/">पूरी किताब</a></p> </div> <div class="paragraph"> <p>GoF के डिज़ाइन पैटर्न 23 डिज़ाइन पैटर्न का एक सेट हैं जिन्हें पुस्तक "Design Patterns: Elements of Reusable Object-Oriented Software" में वर्णित किया गया है।</p> </div> <div class="paragraph"> <p>।यहाँ GoF डिज़ाइन पैटर्न की सूची है</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0833%;"> <col style="width: 2.0849%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">नाम</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>फ़ैक्टरी मेथड</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सटीक क्लास निर्दिष्ट किए बिना वस्तुएँ बनाएँ।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>अब्स्ट्रैक्ट फ़ैक्टरी</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">सम्बद्ध या आश्रित वस्तुओं के परिवार बनाएँ बिना उनके वास्तविक वर्ग को निर्दिष्ट किए।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Builder</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जटिल वस्तु के निर्माण को उसके प्रतिनिधित्व से अलग करें ताकि समान निर्माण प्रक्रिया विभिन्न प्रतिनिधित्व बना सके।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>प्रोटोटाइप</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">मौजूदा प्रोटोटाइप को कॉपी करके नई वस्तुएँ बनाएँ।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>एकल</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक वर्ग के इंस्टेंशिएशन को एक ही ऑब्जेक्ट तक सीमित करता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>अडैप्टर</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">क्लास की इंटरफ़ेस को क्लाइंट की अपेक्षित दूसरी इंटरफ़ेस में बदल देता है</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>पुल</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक अब्सट्रैक्शन को इसके कार्यान्वयन से अलग करें ताकि दोनों स्वतंत्र रूप से भिन्न हो सकें।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>संयुक्त</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पेड़ संरचनाओं में वस्तुओं को संयोजित करके भाग-पूर्ण पदानुक्रम का प्रतिनिधित्व करें।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>सजावटकार</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक वस्तु पर गतिशील रूप से अतिरिक्त जिम्मेदारियाँ संलग्न करें।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>फ़ैसेड</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक सबसिस्टम में इंटरफ़ेस के एक सेट के लिए एक एकीकृत इंटरफ़ेस प्रदान करता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>फ्लाइवेट</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">हल्के वस्तुओं के निर्माण और उपयोग की लागत कम करता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>प्रॉक्सी</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">दूसरे वस्तु के लिए एक विकल्प या स्थानापन्न प्रदान करता है ताकि उसके’accès को नियंत्रित किया जा सके।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>जिम्मेदारी की श्रृंखला</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक से अधिक ऑब्जेक्ट को एक अनुरोध को प्रोसेस करने की अनुमति देता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>आदेश</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक वस्तु में एक अनुरोध को संलग्न करके, विभिन्न अनुरोधों, कतारों या लॉग के साथ क्लाइंट्स को पैरामीट्रिकृत करने की सुविधा मिलती है, और अनुलटनीय संचालन का समर्थन किया जा सकता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>अनुवादक</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक भाषा की व्याकरण का एक प्रतिनिधित्व प्रदान करें और इस प्रतिनिधित्व का उपयोग उस भाषा में वाक्यों का अर्थ निकालने के लिए करें।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>इटरेटर</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक संग्रहीत ऑब्जेक्ट के तत्वों को अनुक्रमिक रूप से पार करने का एक तरीका प्रदान करता है, बिना इसके अंतर्निहित प्रतिनिधित्व को उजागर किए।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>मध्यस्थ</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वस्तुओं के बीच जटिल निर्भरताओं को कम करने की अनुमति देता है, उन्हें केवल एक माध्यमक वस्तु के माध्यम से संवाद करने के लिए बनाकर।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>यादगार</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">यह एक वस्तु को उसकी पूर्व स्थिति में पुनर्स्थापित करने की क्षमता प्रदान करता है (संलग्नता का उल्लंघन किए बिना).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>प्रेक्षक</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक-से-बहुत संबंध परिभाषित करता है वस्तुओं के बीच ताकि जब कोई वस्तु अपनी स्थिति बदलती है, तो सभी उसके आश्रित स्वचालित रूप से सूचित और अपडेट किए जाते हैं।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>राज्य</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक वस्तु को अपने व्यवहार को बदलने की अनुमति देता है जब उसका आंतरिक स्थिति बदलता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>रणनीति</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">यह एक एल्गोरिदम के परिवार को परिभाषित करता है, प्रत्येक को संलग्न करता है और उन्हें विनिमेय बनाता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>टेम्प्लेट पद्धति</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक पद्धति में एक एल्गोरिदम का ढाँचा परिभाषित करता है, कुछ चरणों को उपवर्गों को सौंप देता है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>आगंतुक</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">यह एक वस्तु संरचना पर एक नई ऑपरेशन करने के लिए परिभाषित करने की अनुमति देता है, वस्तुओं की कक्षाओं को बदले बिना जिन पर यह संचालित होती है।</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_कार्यात्मक_प्रोग्रामिंग">कार्यात्मक प्रोग्रामिंग</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 16.6666%;"> <col style="width: 27.7777%;"> <col style="width: 55.5557%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">पुस्तकालय</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Description</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PyMonad</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://github.com/jasondelaat/pymonad" class="bare">https://github.com/jasondelaat/pymonad</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">PyMonad एक कार्यान्वयन है मोनाडिक डेटा संरचनाओं का पायथन में, हास्केल और एफ़# जैसे प्रोग्रामिंग भाषाओं पर आधारित, जिसमें फलनीय प्रोग्रामिंग में सबसे अधिक प्रयोग किए जाने वाले मोनाड प्रकारों के लिए कार्यान्वयन हैं।https://www.miguelfarrajota.com/2021/06/monads-in-python-with-pymonad/[article]</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PyFunctional</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://github.com/EntilZha/PyFunctional/" class="bare">https://github.com/EntilZha/PyFunctional/</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">PyFunctional` एक Python लाइब्रेरी है कार्यात्मक प्रोग्रामिंग के लिए जो शुद्ध कार्यों और इटरेबल के साथ काम करने के लिए उपकरण प्रदान करती है।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">टूल्ज़</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://toolz.readthedocs.io/en/latest/" class="bare">https://toolz.readthedocs.io/en/latest/</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Toolz एक Python लाइब्रेरी है जो कार्यात्मक प्रोग्रामिंग के लिए उपकरण प्रदान करती है जो शुद्ध फ़ंक्शन और इटरेबल के साथ काम करने के लिए टूल देती है।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ंक्शन.py</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://github.com/kachayev/fn.py" class="bare">https://github.com/kachayev/fn.py</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fn.py` एक Python लाइब्रेरी है फंक्शनल प्रोग्रामिंग के लिए जो शुद्ध कार्यों और इटरेबल्स के साथ काम करने के लिए उपकरण प्रदान करती है।</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">नारियल</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><a href="https://coconut-lang.org/" class="bare">https://coconut-lang.org/</a></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोकोनट पायथन में कई कार्यात्मक सुविधाएँ जोड़ता है, जिसमें पैटर्न मेलिंग भी शामिल है।https://stackoverflow.com/questions/11909681/are-there-pattern-matching-functions-in-python-like-this[संवाद sof]</p></td> </tr> </tbody> </table> <div class="sect2"> <h3 id="_दुष्प्रभाव">दुष्प्रभाव</h3> </div> <div class="sect2"> <h3 id="_लूप्स">लूप्स</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-python" data-lang="python"># impérative way result = [] for i in inputs: x = f(g(i)) result.append(x) # idiomatic way result = map(comp(f,g), inputs)</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2023/0065_training_web_dev_post.html Thu, 24 Aug 2023 00:00:00 +0000 blog/2023/0065_training_web_dev_post.html https://cheroliv.com/blog/2023/0064_training_trading_card_games_post.html Mon, 21 Aug 2023 00:00:00 +0000 blog/2023/0064_training_trading_card_games_post.html https://cheroliv.com/blog/2023/0063_memo_ts_post.html Sat, 19 Aug 2023 00:00:00 +0000 blog/2023/0063_memo_ts_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>गिटहब रिपॉज़िटरी:https://github.com/cheroliv/ts-codebase[ts-codebase, window="_blank]</p> </div> </div> </div> <div class="sect1"> <h2 id="toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p>(No content to translate)</p> </li> <li> <p><a href="#फ़ंक्शन">फ़ंक्शन</a></p> </li> <li> <p><a href="#data_struct">डेटा संरचना</a></p> </li> <li> <p><a href="#enums_tuples">एनम्स और ट्यूपल</a></p> </li> <li> <p><a href="#void_never">Void और Never</a></p> </li> <li> <p><a href="#class_interface">क्लासेज़ और इंटरफ़ेस</a></p> </li> <li> <p><a href="#tsconfig">फ़ाइल tsconfig.json</a></p> </li> <li> <p><a href="#modules">मॉड्यूल्स</a></p> </li> <li> <p><a href="#वादे">[वादे]</a></p> </li> <li> <p><a href="#async-await">async/await</a></p> </li> <li> <p>जेनेरिक</p> </li> </ol> </div> <div class="paragraph"> <p>index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> Intro typescript <script src="01_types.js"></script> <script src="02_data_structure.js"></script> <script src="03_enums_tuples.js"></script> </body> </html></code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ts_types">टाइप्सक्रिप्ट में प्रकार</h2> <div class="sectionbody"> <div class="paragraph"> <p>01_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Les types en typescript */ //quand le type n'est pas defini des le debut, // alors il est réassignable // c'est le type Any qui est attribué par défaut let my_var; my_var = "username"; console.assert(my_var === "username"); my_var = 11; console.assert(my_var === 11); my_var = true; console.assert(my_var === true); let age = 1; console.assert(age === 1); age = 2; // age="trois" c'est impossible // car l'inference de type a attribué le type number console.assert(age === 2); // Déclaration explicite de type let pi: Number = 3.14; console.assert(typeof pi === "number");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="फ़ंक्शन">फ़ंक्शन</h2> <div class="sectionbody"> <div class="paragraph"> <p>फ़ंक्शन पुन: प्रयुक्त कोड के ब्लॉक हैं।</p> </div> <div class="paragraph"> <p>रेटिंग का उदाहरण:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const add = (a: number, b: number): number => a + b;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="data_struct">डेटा संरचना</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_data_structure.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/*** * Structure de données: * Avec le type any on peut changer * le type de la variable à tout instruction * Lorsque l'on fixe le type * alors il n'est plus possible de le changer * lors d'une assignation */ // Arrays let buddies: any[] = [ "cheroliv", "imrandeh", "issoudeh", "soumi92" ] console.assert(buddies[0] === "cheroliv"); console.assert(buddies[1] === "imrandeh"); console.assert(buddies[2] === "issoudeh"); console.assert(buddies[3] === "soumi92"); // Déclaré en type any, l'inference de type // a bien réaligné en type string console.assert(typeof buddies[0] === "string"); console.assert(typeof buddies[1] === "string"); console.assert(typeof buddies[2] === "string"); console.assert(typeof buddies[3] === "string"); let writers: (String | String | String | Number)[][] = [ ["Chrétien", "de Troyes", "fr", 12], ["François", "Rabelais", "fr", 16], ["René", "Descartes", "fr", 17], ["Jean-Jacques", "Rousseau", "fr", 18], ["Georg", "Hegel", "de", 19], ["Karl", "Marx", "de", 19], ["Friedrich", "Engels", "de", 19], ["Victor", "Hugo", "fr", 19], ["Paul", "Verlaine", "fr", 19], ["Arthur", "Rimbaud", "fr", 19], ["Gérard", "de Nerval", "fr", 19], ["Georg", "Lukacs", "hu", 20], ["Franz", "Kafka", "hu", 20], ["Antonio", "Gramsci", "it", 20], ["Domenico","Losurdo","it",20], ]; // console.table(writers); // Objects let author: { first_name: String, last_name: String, lang: String, century: Number } = { // slice(-1) renvoie le dernier élèment first_name: writers.slice(-1)[0][0] as String, last_name: writers.slice(-1)[0][1] as String, lang: writers.slice(-1)[0][2] as String, century: writers.slice(-1)[0][3] as Number, } // assertion sur la valeur en accés par encapsulation(dot) console.assert(author.first_name === "Antonio") console.assert(author.last_name === "Gramsci") console.assert(author.lang === "it") console.assert(author.century === 20); // assertion sur le type en accès par index console.assert(typeof author["first_name"] === "string") console.assert(typeof author["last_name"] === "string") console.assert(typeof author["lang"] === "string") console.assert(typeof author["century"] === "number");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="enums_tuples">एनम्स और ट्यूपल</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_सूची_टुपल.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Enums et Tuples * * Enum: il existe les enums numérique * et les enums chaine de caracteres. * * Tuple: similaire aux arrays mais ne peut * contenir qu'une valeur de type spécifié. * */ //Enum numérique // l'index par de debut défaut est 0 // ici on le place a 1 enum Week { Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6, Sunday = 7, }; console.assert(Week.Monday == 1); console.assert(Week.Tuesday == 2); console.assert(Week.Wednesday == 3); console.assert(Week.Thursday == 4); console.assert(Week.Friday == 5); console.assert(Week.Saturday == 6); console.assert(Week.Sunday == 7); console.assert(Week[1] === "Monday"); console.assert(Week[2] === "Tuesday"); console.assert(Week[3] === "Wednesday"); console.assert(Week[4] === "Thursday"); console.assert(Week[5] === "Friday"); console.assert(Week[6] === "Saturday"); console.assert(Week[7] === "Sunday"); let motd_arr_fr: String[] = [ "Associé à la Lune", "Du dieu Tiw, associé à Mars", "Du dieu germanique Odin", "Du dieu germanique du tonnerre Thor", "De la déesse germanique Frigga associée à Vénus", "Associé à Saturne", "Associé au Soleil", ]; let motd_arr_en: String[] = [ "associated with the Moon", "from the god Tiw, associated with Mars", "from Germanic god Odin", "from Germanic god of thunder Thor", "from Germanic goddess Frigga associated with Venus", "associated with Saturn", "associated with the Sun", ]; // Un tuple (triple) let monday_triple_fr: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_fr[0], ]; console.assert(monday_triple_fr[0] === 1); console.assert(monday_triple_fr[1] === "Monday"); console.assert(monday_triple_fr[2] === "Associé à la Lune"); let monday_triple_en: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_en[0], ]; console.assert(monday_triple_en[0] === 1); console.assert(monday_triple_en[1] === "Monday"); console.assert(monday_triple_en[2] === "associated with the Moon"); // On se fait un type pour ajouter le nom de la langue type Meaning_of_the_day = { lang: String, meaning: (Week | String)[][], }; //fonction d'affichage du type Meaning_of_the_day const display_motd = (motd: Meaning_of_the_day) => { motd.meaning.forEach(day => console.table(`${Week[day[0] as Week]}: ${day[1]}.(${motd.lang})`) ) }; //fonction d'assertion sur le type Meaning_of_the_day // afin de verifier la concordance du contenu avec // motd_arr_#lang# const test_motd = ( motd: Meaning_of_the_day, motd_arr: String[] ) => { console.assert(motd.lang.length === 2) for (const [i, value] of motd.meaning.entries()) { console.assert(value[1] === motd_arr[i]); } }; let motd_fr: Meaning_of_the_day = { lang: "fr", meaning: [ [Week.Monday, motd_arr_fr[0]], [Week.Tuesday, motd_arr_fr[1]], [Week.Wednesday, motd_arr_fr[2]], [Week.Thursday, motd_arr_fr[3]], [Week.Friday, motd_arr_fr[4]], [Week.Saturday, motd_arr_fr[5]], [Week.Sunday, motd_arr_fr[6]], ], } console.log("---------"); console.log("display_motd(motd_fr):"); display_motd(motd_fr); test_motd(motd_fr, motd_arr_fr) let motd_en: Meaning_of_the_day = { lang: "en", meaning: [ [Week.Monday, motd_arr_en[0]], [Week.Tuesday, motd_arr_en[1]], [Week.Wednesday, motd_arr_en[2]], [Week.Thursday, motd_arr_en[3]], [Week.Friday, motd_arr_en[4]], [Week.Saturday, motd_arr_en[5]], [Week.Sunday, motd_arr_en[6]], ], } console.log("---------"); console.log("display_motd(motd_en):"); display_motd(motd_en); console.log("---------"); test_motd(motd_en, motd_arr_en); // Un tuple (triple) utilisant le type // Meaning_of_the_day pour peupler le meaning let motd_triple: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_fr.meaning[0][1] as String ]; console.assert(motd_triple[0] === 1); console.assert(motd_triple[1] === "Monday"); console.assert(motd_triple[2] === "Associé à la Lune");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="void_never">Void और Never</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_void_never_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">// Le type void est l'opposé du type any // c'est l'absence de type. function verify_writers_length(): void { console.assert(writers.length > 0); } verify_writers_length(); const verify_writers_length_arrow = (): void => console.assert(writers.length > 0); verify_writers_length_arrow(); //Type of et never let value = 30; console.assert(typeof value === "number"); //never: qqchs qui n'arrive jamais function foo(x: String | Number): Boolean { if (typeof x === "string") { return true; } else if (typeof x === "number") { return false; } return fail("Error!") } function fail(message: String): never { throw new Error(message as string); }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="class_interface">क्लासेज़ और इंटरफ़ेस</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_void_never_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">/** * Les classes: * members, * visibility, * nommage, * accesseurs * scope identifier: static,private,protected * * convention de nommage : * Les membres private sont préfixés avec un _ * */ class Member { username: String = ""; email: String = ""; private _password: String = ""; readonly signup_date: Date = new Date(Date.now()); constructor(username: String, email: String) { this.username = username; this.email = email; } get password(): String { return this._password; } set password(new_password: String) { this._password = new_password; } /** * Une fonction static qui initilise un member, * à partir d'un author */ static fromAuthor(author: { first_name: String, last_name: String, lang: String, century: Number }): Member { return new Member( `${author.first_name}.${author.last_name}`, `${author.first_name}.${author.last_name}@acme.com`, ); } }; let domenico = Member.fromAuthor(author); domenico.password = "test"; console.assert(domenico.email === "Domenico.Losurdo@acme.com"); console.assert(domenico.password === "test"); // Héritage enum Forms { Undefined = 0, Polygones = 1, Circle = 2, Straight = 3, Segment = 4, }; class Form { type: Forms = Forms.Undefined; }; class Rectangle extends Form { h: Number = 0; w: Number = 0; }; class Square extends Rectangle { side: Number = 0; }; /** * Interface donne un contrat à un type. * Les interfaces permettent de définir la structure d'un objet. */ interface IPerson { username: String; email: String; readonly signup_date: Date; } const user1: IPerson = { username: Member.fromAuthor(author)["username"], email: Member.fromAuthor(author)["email"], signup_date: Member.fromAuthor(author)["signup_date"], }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="tsconfig">फ़ाइल tsconfig.json</h2> <div class="sectionbody"> <div class="paragraph"> <p>tsconfig.json</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-json" data-lang="json">{ /* Visit https://aka.ms/tsconfig to read more about this file */ "compileOnSave": true, "compilerOptions": { "target": "es2016", "module": "CommonJS", "noEmitOnError": true, "strict": true, "noImplicitAny": true, "esModuleInterop": true } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="modules">मॉड्यूल्स</h2> <div class="sectionbody"> <div class="paragraph"> <p>मॉड्यूल से कोड को कई फ़ाइलों में व्यवस्थित किया जा सकता है।</p> </div> <div class="paragraph"> <p>उदाहरण रेटिंग :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">// Dans un fichier math.ts export const add = (a: number, b: number): number => a + b; // Dans un autre fichier import { add } from './math'; let result = add(2, 3);</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="वायदे">वायदे</h2> <div class="sectionbody"> <div class="paragraph"> <p>प्रॉमिस का उपयोग असिंक्रोनस ऑपरेशन्स करने के लिए किया जाता है।</p> </div> <div class="paragraph"> <p>उदाहरण रेटिंग :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const promise = new Promise<string>((resolve) => { // Code asynchrone ici resolve("Succès"); }); promise.then((result) => { console.log(result); });</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="async-await">async/await</h2> <div class="sectionbody"> <div class="paragraph"> <p>async/await वादों के प्रबंधन को सरल बना देता है।</p> </div> <div class="paragraph"> <p>उदाहरण अंक :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const fetchData = async (): Promise<void> => { const result = await someAsyncFunction(); console.log(result); };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">परिचय टाइप्स्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="generiques">जेनेरिक</h2> <div class="sectionbody"> <div class="paragraph"> <p>जनरिक्स पुन: प्रयोज्य घटकों को गतिशील प्रकारों के साथ बनाने की अनुमति देते हैं।</p> </div> <div class="paragraph"> <p>उदाहरण रेटिंग :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const identity = <T>(arg: T): T => arg; const output = identity<string>("hello"); console.log(output);</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2023/0062_memo_css_post.html Mon, 14 Aug 2023 00:00:00 +0000 blog/2023/0062_memo_css_post.html <div class="sect1"> <h2 id="toc">सामग्री की तालिका</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#good_links">अच्छे लिंक</a></p> </li> <li> <p><a href="#repo">संग्रहालय और कोड नमूना</a></p> </li> <li> <p><a href="#toc_शुरू">[toc_शुरू]</a></p> </li> </ol> </div> <div class="sect2"> <h3 id="good_links">अच्छे लिंक</h3> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> <div class="sect2"> <h3 id="repo">संग्रहालय और कोड नमूना</h3> <div class="paragraph"> <p>गिटहब रिपॉज़िटरी:https://github.com/cheroliv/css-codebase[css-codebase, window = "_blank]</p> </div> </div> <div class="sect2"> <h3 id="toc_début"><span class="underline">शुरुआत CSS</span></h3> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#शुरुआत_परिचय">[शुरुआत_परिचय]</a></p> </li> <li> <p>(No content provided to translate)</p> </li> <li> <p><a href="#शुरुआत_background">[शुरुआत_background]</a></p> </li> <li> <p>(No output)</p> </li> <li> <p><a href="#शुरू_flexbox">[शुरू_flexbox]</a></p> </li> <li> <p><a href="#शुरू_ग्रिड">ग्रिड</a></p> </li> <li> <p><a href="#début_abs_pos">[début_abs_pos]</a></p> </li> <li> <p>शुरुआत_responsive</p> </li> <li> <p><a href="#शुरू निष्कर्ष">[शुरू निष्कर्ष]</a></p> </li> </ol> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="début_intro">परिचय & सेटअप</h2> <div class="sectionbody"> <div class="paragraph"> <p>इस वीडियो के आधार पर परिचय:</p> </div> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/iSWjmVcfQGg?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="paragraph"> <p>गिटहब रिपॉजिटरी:https://github.com/cheroliv/css-codebase/début_css/[शुरू CSS, window = "_blank]</p> </div> <div class="paragraph"> <p>नोट स्रोत:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message" ></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p>स्टाइल.css फ़ाइल को HTML पृष्ठ से जोड़ें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"></head> <link rel="stylesheet" href="style.css" /> </head></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_शुरुआत">[toc_शुरुआत]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_texts">Les textes</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">/* import remote de font sur l'ensemble de la feuille*/ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); /* import local de font */ @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* body est le parent de toutes les balises, qu'il contient, donc je le déclare avant, pour la logique de précédence de parent */ body { /* si DMSerif n'est pas trouvé alors il se rabat sur Verdana*/ font-family: "DMSerif", Verdana; } /* va styliser toutes les balises h1, celles de body sont surchargés, par la déclaration présente */ h1 { text-transform: uppercase; /* espacement entre les lettres en pixel*/ letter-spacing: 3px; /* alignement du texte*/ text-align: center; /* Les tailles de polices doivent être en REM (rem = root em). Le REM se base pas sur l'élément parent pour obtenir sa taille mais sur l'élément racine. Ainsi 1rem prendra sa valeur de la font-size de votre document (body ou html).*/ font-size: 2.5rem; /* ombrage du texte */ text-shadow: 3px /* offset-x */ 3px /* offset-y */ 8px /* blur-radius */ #00000042/* color */; /* couleur du texte */ color: #ab0ef4; /*attibuer les polices(font): liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.*/ font-family: "Oswald", sans-serif; /* surligner le text*/ text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">शुरुआत CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_background">पृष्ठभूमि</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; /* 100VH = 100% de la taille de l'écran (viewport height) min afin de ne pas bloquer la possibilité d'avoir un plus grand */ min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">शुरुआत CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_boxes">बॉक्सेस (boxes)</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* *: létoile donne du style a tous les éléments. Ensuite remettre un à un les parametres par defaut afin d'eviter les stylisation inattendu.*/ * { /* surcharge de base tous les elements à padding 0*/ margin: 0; /* surcharge de base tous les elements à padding 0*/ padding: 0; } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; /* quelque soit la taille de l'écran, la boite fait toujours 90% de la taille de la page, les 10% restant sont une marge à droite, pour avoir 5% de chaque coté on ajoute une margin, tel que [0, auto]*/ width: 90%; /* haut bas prend 0, et gauche droite prend auto(center cad meme de chaque cotés)*/ margin: 0 auto; /* on ajoute des bords a notre boite*/ border: 2px solid rgb(0, 140, 255); /* on arrondis les coins de la boite*/ border-radius: 20px 20px 0 0; /* ombrage sur la boite*/ box-shadow: 0px 0px 20px 4px #81cfc6; /* marge interrieure de la boite sur tous les cotés*/ padding: 15px; } h2 { /* afin de recuprer le comportement par defaut qui a ete surchargé par l'operateur étoile*/ margin: 0; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_शुरुआत">[toc_शुरुआत]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="शुरुआत_flexbox">Flexbox</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } /* le point permet d'acceder à la classe d'un composant*/ .flexbox { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } /* FLEXBOX */ /* Sert à répartir équitablement des éléments sur la page */ .flexbox ul { padding: 0; /* aligne les éléments enfants de ul(les li)*/ display: flex; /* reparti convenablement(équitablement les li sur la page) */ justify-content: space-around; } /* ce style concerne les li de la classe, flexbox des balises qui y font referencent*/ .flexbox li { /* suprime les boules des éléments de la list li*/ list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; /* Centrer un unique élément verticalement et horizontalement */ display: flex; justify-content: center; align-items: center; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_शुरुआत">[toc_शुरुआत]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="शुरू_ग्रिड">ग्रिड</h2> <div class="sectionbody"> <div class="paragraph"> <p>फ़्लेक्सबॉक्स की तुलना में थोड़ा अधिक जटिल तरीके से तत्वों को वितरित करने के लिए, ग्रिड सिस्टम आदि के साथ।</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } /* GRID */ .grid-container { display: grid; /* séparatuion de la grille en deux(à ses deux enfants), avec à gauche 30% pour l'image et à droite 70% pour le formulaire*/ grid-template-columns: 30% 70%; } /* sizing de l'image css-logo contenu dans la classe grid qui est dans le parent grid-container*/ .grid img { /* l'image remplt 80% de part de grille*/ width: 80%; margin: 20px auto; display: block; } form { display: grid; /* deux colonnes de chacune 1 fraction*/ grid-template-columns: 1fr 1fr; /* trois rangés de chacune 1 fraction*/ grid-template-rows: 1fr 1fr 1fr; /* structuration sous forme de template de notre repartition des composants enfants de la forme*/ grid-template-areas: "i1 i2"/* i1: input1, i2:input2*/ "ta ta"/*ta: text area */ "vi bt"/*vi:, bt: bouton */; } /* on donne du style sur deux éléments en meme temps en les listant avant les parentheses*/ input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } /* donner du style uniquement la textearea*/ textarea { /* renseigner le nommage pour le grid template area*/ grid-area: ta; height: 40px; /* empeche le cassage du style de la page en empechant le resizing de la textarea du formulaire*/ resize: none; } /* pour pointer un id d'élément html on utilise la notation préfixe # */ #btn-submit { /* renseigner le nommage*/ grid-area: bt; /* change le le symbole de curseur souris quand il survole sur le bouton*/ cursor: pointer; background: cyan; transition: 0.2s; } /* au survole(hover) de la souris le bouton change de comportement*/ #btn-submit:hover { background: darkblue; /* couleur de text du bouton devient blanc*/ color: white; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_शुरुआत">[toc_शुरुआत]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_ग्रेडल_एकीकरण"><mark>#</mark> ग्रेडल एकीकरण</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } [source,css] ---- @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid, .absolute { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } .grid-container { display: grid; grid-template-columns: 30% 70%; } .grid img { width: 80%; margin: 20px auto; display: block; } form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "i1 i2" "ta ta" "vi bt"; } input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } textarea { grid-area: ta; height: 40px; resize: none; } #btn-submit { grid-area: bt; cursor: pointer; background: cyan; transition: 0.2s; } #btn-submit:hover { background: darkblue; color: white; } /* ABSOLUTE */ /* Sans élément en Relative, de base, l'élément en absolute l'est par rapport au Body */ /* Il faut mettre une position relative au parent pour contraindre l'élément en absolute dans ses frontières */ .absolute { /* position relative par rapport à son parent, donc contenu dans les frontieres de son parents*/ position: relative; } #circle1 { height: 80px; width: 80px; background: skyblue; position: absolute; border-radius: 150px; top: -20px; right: -20px; } #circle2 { height: 40px; width: 40px; border-radius: 150px; background: teal; position: absolute; left: 50%; transform: /*traslate de 50% de la taille du cercle, pour etre centré par rapport au centre du cercle, plutot que sur son bord gauche par défaut.*/ translateX(-50%); top: 100px; } ---- [source, html] ---- <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html> ---- <<toc_शुरुआत>> == रिस्पॉन्सिव [[début_responsive]] [source,css] ---- @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; /* pour etre plus responsive on peut passer la taille en vw(view port width) pour qu'elle s'adapte à la taille de l'ecran*/ font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid, .absolute { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } .grid-container { display: grid; grid-template-columns: 30% 70%; } .grid img { width: 80%; margin: 20px auto; /* permet en media query de la centrer en petit écran*/ display: block; } form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "i1 i2" "ta ta" "vi bt"; } input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } textarea { grid-area: ta; height: 40px; resize: none; } #btn-submit { grid-area: bt; cursor: pointer; background: cyan; transition: 0.2s; } #btn-submit:hover { background: darkblue; color: white; } .absolute { position: relative; } #circle1 { height: 80px; width: 80px; background: skyblue; position: absolute; border-radius: 150px; top: -20px; right: -20px; } #circle2 { height: 40px; width: 40px; border-radius: 150px; background: teal; position: absolute; left: 50%; transform: translateX(-50%); top: 100px; } /* RESPONSIVE: a partir des tailles d'ecran permet de surcharger les reglages definis plus haut */ @media screen and (max-width: 900px) { .grid-container { display: block; } .grid-container img { width: 40%; } } @media screen and (max-width: 610px) { .flexbox ul { flex-direction: column; align-items: center; } form { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "i1" "i2" "ta" "bt"; } input, textarea { font-size: 0.8rem; } } ---- [source, html] ---- <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html> ---- toc_शुरुआत == डिबग & निष्कर्ष [[शुरुआत_निष्कर्ष]] [source,css] ---- /* all elements: supprime les comportements par défaut*/ * { /* les marges à zéro*/ margin: 0; /* les parge internes(padding) à zéro*/ padding: 0; /* tous les bords avec un cadre rouge de 2px. qui est ou et qui fait quoi...*/ border: 2px solid red; } ---- <<toc_शुरुआत>> ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2023/0061_memo_html_post.html Sun, 13 Aug 2023 00:00:00 +0000 blog/2023/0061_memo_html_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_अच्छे_लिंक">अच्छे लिंक</a></li> <li><a href="#_भंडार_और_कोड_नमूना">भंडार और कोड नमूना</a></li> </ul> </div> <div class="sect1"> <h2 id="_अच्छे_लिंक">अच्छे लिंक</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">html</div> <ul> <li> <p><a href="https://htmlcheatsheet.com" target=""_blank">htmlcheatsheet.com</a>: HTML चेटशीट</p> </li> </ul> </div> <div class="ulist"> <div class="title">फ़ॉन्ट</div> <ul> <li> <p><a href="https://fontawesome.com" target=""_blank">fontawesome.com</a>: आइकन पुस्तकालय</p> </li> <li> <p><a href="https://www.toptal.com/designers/htmlarrows/symbols/" target=""_blank">toptal.com/designers/htmlarrows/symbols</a>: HTML में मूल आइकन</p> </li> </ul> </div> <div class="ulist"> <div class="title">विशेष अक्षर और एस्केप अनुक्रम</div> <ul> <li> <p><a href="https://www.sonarsource.com/blog/encoding-differentials-why-charset-matters/" class="bare">https://www.sonarsource.com/blog/encoding-differentials-why-charset-matters/</a></p> </li> <li> <p><a href="https://stackoverflow.com/a/3614344/13104550" class="bare">https://stackoverflow.com/a/3614344/13104550</a></p> </li> <li> <p><a href="https://html.spec.whatwg.org/multipage/named-characters.html" class="bare">https://html.spec.whatwg.org/multipage/named-characters.html</a></p> </li> </ul> </div> <div class="paragraph"> <p><a href="#toc">[toc]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_भंडार_और_कोड_नमूना">भंडार और कोड नमूना</h2> <div class="sectionbody"> <div class="paragraph"> <p>github संग्रहालय:https://github.com/cheroliv/html-codebase[html-codebase, window = "_blank]</p> </div> <div class="paragraph"> <p>नोट स्रोत:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Le titre de la page --> <title>Cours HTML</title> <!-- Icone de l'onglet --> <link rel="shortcut icon" href="html-logo.png" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" /> </head> <body> <header> <h1>Texte - Titre H1</h1> <p> <em>em pour mettre en italique</em>, <strong>strong pour mettre en gras</strong> <span>L'élement en span ne revient pas à la ligne</span>. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cumque ratione veniam officiis nulla a debitis at facilis sed dignissimos. </p> </header> <section> <div> <h2>Photo - Titre H2</h2> <img src="./img-1.jpg" alt="image-arbre" height="200" /> </div> <div> <h3>Liste - Titre H3</h3> <ul> <li>UL = unordered list</li> <li>UL = unordered list</li> <li>UL = unordered list</li> </ul> <ol> <li>OL = ordered list</li> <li>OL = ordered list</li> <li>OL = ordered list</li> </ol> </div> <div> <h4>Tableaux - Titre H4</h4> <table border="4" cellpadding="10" cellspacing="4" style="text-align: center"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </tbody> </table> </div> <div> <h5><span>♖</span> Liens - Titre H5</h5> <a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a> <br /> <a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a> </div> <div> <h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6> <video src="video.mp4" height="150" autoplay loop muted></video> </div> </section> <br /> <!-- Formulaires en HTML --> <section> <h2>Formulaire</h2> <form action="/action.php" method="post"> <label for="name">Nom</label> <input id="name" type="text" placeholder="Entrez votre nom" /><br /> <label for="number">Entrez votre age</label> <input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value"> <input type="range" id="range-age" min="0" max="100" oninput="document.getElementById('number-age').value=this.value"><br /> <!-- Input select --> <label for="gender">Genre</label> <select id="gender"> <option selected="selected" value="Homme">Homme</option> <option value="Femme">Femme</option> </select><br /> <!-- Input radio --> <div> <input type="radio" name="type" id="human" checked /> <label for="human">Humain</label> <input type="radio" name="type" id="dog" /> <label for="dog">Chien</label> <input type="radio" name="type" id="cat" /> <label for="cat">Chat</label> </div> <textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br /> <!-- Input Checkbox --> <label><input type="checkbox" />Accepter les CGV</label> <br /> <input type="submit" value="Submit" /> </form> </section> <br /> <!-- Mail & envoi de fichiers --> <footer> <a href="mailto:fs@gmail.com">Ecrivez-moi !</a> <br /> <a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a> <details> <summary>Plus d'infos</summary> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, repellendus. </p> </details> </footer> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">[toc]</a></p> </div> </div> </div> https://cheroliv.com/blog/2023/0060_memo_js_post.html Fri, 4 Aug 2023 00:00:00 +0000 blog/2023/0060_memo_js_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>गिटहब रिपॉजिटरी:https://github.com/cheroliv/js-codebase[js-codebase, window="_blank]</p> </div> </div> </div> <div class="sect1"> <h2 id="toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p>(No output)</p> </li> <li> <p><a href="#arrays">एरे</a></p> </li> <li> <p>फलन</p> </li> <li> <p><a href="#param_x_scope">पारामीटर्स और scopes</a></p> </li> <li> <p><a href="#objects">वस्तुएं</a></p> </li> <li> <p><a href="#loops">लूप</a></p> </li> <li> <p><a href="#const_var_let">Const, var और let</a></p> </li> <li> <p><a href="#rest_and_spread_operators">Rest और spread operators</a></p> </li> <li> <p><a href="#destructuring">[destructuring]</a></p> </li> <li> <p><a href="#import_export">मॉड्यूल्स का आयात और निर्यात</a></p> </li> <li> <p>कक्षाएँ</p> </li> </ol> </div> <div class="paragraph"> <p>index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> </head> <body> index <script src="01_start.js"></script> <script src="02_arrays.js"></script> <script src="03_functions.js"></script> <script src="04_param_x_scope.js"></script> <script src="05_objects.js"></script> <script src="06_loops.js"></script> <script src="07_const_var_let.js"></script> <script src="08_rest_and_spread_operators.js"></script> <script src="09_destructuring.js"></script> <script src="10_module_import_export.js"></script> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="start">चर, अंकगणितीय संचालक और स्ट्रिंग</h2> <div class="sectionbody"> <div class="paragraph"> <p>01_start.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Variables */ //une variable stupide var my_variable = "dummy variable"; console.log(my_variable); //assertion console.assert(my_variable === "dummy variable"); var username = "cheroliv"; console.log(username); console.assert(username === "cheroliv"); //concaténation de string console.assert(username === "cher" + "oliv"); /** * Opérateur arithmétique: + - * / % */ //integer var x = 10; var y = 5; var z = 20; console.log(x + y); console.assert(x + y === 15); console.log(x + y - z); console.assert(x + y - z === -5); console.log(x - y); console.assert(x - y === 5); console.log(x * y); console.assert(x * y === 50); console.log(x / y); console.assert(x / y === 2); console.log("---------"); x = 20; y = 10; console.log(x + y); console.assert(x + y === 30); console.log(x + y - z); console.assert(x + y - z === 10); console.log(x - y); console.assert(x - y === 10); console.log(x * y); console.assert(x * y === 200); console.log(x / z); console.assert(x / z === 1); //Littéraux de gabarits pour string avec backstick ` //Template literals (Template strings) console.assert(`typeof z: ${typeof z}` === "typeof z: number"); console.log(`x is type of : ${typeof x}`); console.log(`y is type of : ${typeof y}`); console.log(`z is type of : ${typeof z}`); //typeof: donne le type de la variable console.assert(typeof x === "number"); console.assert(typeof y === "number"); console.assert(typeof z === "number"); console.log("---------"); /** * Incrémenation/décrémentation */ //incrémantation/décrémentation préfixe console.log(++x) //incrémenté puis affiché: 21 console.log(x) //la valeur incrémenté: 21 //incrémantation/décrémentation suffixe console.log(y++) //affiche la valeur sans incrémenation puis incrémente: 10 console.log(y) //la valeur incrémenté: 11 //décrémentation x--; y--; console.assert(x === 20); console.assert(y === 10); /** * String: chaine de caractères */ console.log(`username: ${username}`); //taille de la string console.log(`username.length: ${username.length}`); console.assert(username.length === 8); console.assert(username.length === "cheroliv".length); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrays">एरे</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_सरणी.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Les arrays */ // auteurs [["nom ", "prénom", "pays"]] var writers = [ ["Karl", "Marx", "de"], ["Jean-Jacques", "Rousseau", "fr"], ["Victor", "Hugo", "fr"], ["René", "Descartes", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["Georg", "Hegel", "de"], ["Friedrich", "Engels", "de"], ] console.table(writers); // accés aux élèments du tableau console.log(writers[0]); console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); //sauvegarder la valeur du prénom de Marx var karl = writers[0][0] //éditer un élement du tableau, le prénom de Marx writers[0][0] = "Karlito" console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karlito, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl" === karl); //remettre la valeur initale du prénom de Marx writers[0][0] = karl; console.assert(`${karl}, Marx (de)` === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.log("---------"); /** * Arrays: map/forEach/pop/push/slice/sort/shift/unshift */ var numbers = [1, 5, 4, 3, 2]; console.log("Iterate with forEach"); // parcourir avec array.forEach numbers.forEach((it) => console.log(it)); console.log("---------"); console.log("Iterate with map"); // parcourir avec array.map numbers.map((it) => console.log(it)); console.log("---------"); //afficher les éléments sur une ligne //génère la string avec le formatage des nombres const numbersString = (numberArray) => { var consoleOutput = new String(); numberArray.forEach(number => consoleOutput += `${number}, `); return consoleOutput = consoleOutput.substring(0, consoleOutput.length - 2); }; //affiche la chaine entre crochets dans la console const displayNumbers = (numbersStr) => { console.log(`[${numbersString(numbersStr)}]`); }; console.log("orginal number array") displayNumbers(numbers); console.log("---------"); //push: ajoute à la fin console.log("push"); numbers.push(6); displayNumbers(numbers); console.log("---------"); //pop: suprime le dernier console.log("pop"); numbers.pop(); displayNumbers(numbers); console.log("---------"); //unshift: ajouter le parametre au debut de l'array console.log("unshift"); numbers.unshift(0); displayNumbers(numbers); console.log("---------"); //shift: supprime le premier element de l'array console.log("shift"); numbers.shift(); displayNumbers(numbers); console.log("---------"); //slice: renvoi l'array entre les positions en argument console.log("slice"); var sliceNumbersResult = numbers.slice(2, 4); displayNumbers(sliceNumbersResult); console.log("---------"); //sort asc console.log("sort asc"); var ascSort = numbers.sort((a, b) => a - b); displayNumbers(ascSort); console.log("---------"); //sort desc console.log("sort desc"); var descSort = numbers.sort((a, b) => b - a); displayNumbers(descSort); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="functions">फ़ंक्शन</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_functions.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Les fonctions */ //function style legacy function sayHelloWorldLegacy() { console.log("Hello world legacy!"); } sayHelloWorldLegacy(); function sayHelloLegacy(firstName, lastName, style) { console.log(`Hello ${firstName}, ${lastName} (${style})`); } sayHelloLegacy("Cher", "Oliv", "legacy"); console.log("---------"); //function style arrow const sayHelloWorld = () => console.log("Hello world!"); sayHelloWorld(); const sayHello = (firstName, lastName) => console.log(`Hello ${firstName}, ${lastName}`); sayHello("Cher", "Oliv"); console.log("---------"); var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ] const displayAuthors = (authorsArray) => authorsArray.forEach(author => console.log(`${author[0]} ${author[1]}, (${author[2]})`) ); displayAuthors(authors); console.log("---------"); /** * valeur par défaut des parametres d'une fonctions */ const add = (a = 0, b = 0) => a + b; console.assert(add() === 0) console.assert(add(1) === 1) console.assert(add(1, 1) === 2) console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="param_x_scope">पारामीटर्स और scopes</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_param_x_scope.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">//global scope: visible partout, dans et hors functions var global; const foo = () => { //local scope: visible uniquement dans la fonction foo var bar = "bar" console.log(bar) } foo(); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="objects">वस्तुएं</h2> <div class="sectionbody"> <div class="paragraph"> <p>05_objects.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Les objects */ var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ]; var hugo = { firstName: authors[7][0], lastName: authors[7][1], country: authors[7][2], }; var book = { author: hugo, title: "Les misérables" }; console.log(hugo); console.log(book); //accéder à un membre de l'objet par point console.log(hugo.country); //accéder à un membre de l'objet par crochet console.log(book["title"]); console.log(book.author.lastName); console.log(book["author"]["firstName"]); //ajouter une clé a un objet hugo.gender = "non binary"; console.assert(hugo.gender === "non binary"); //mettre à jour une clé hugo.gender = "male"; console.assert(hugo.gender !== "non binary"); console.assert(hugo["gender"] === "male"); //supprimer une clé delete hugo.gender; //verfier que l'objet ne contient pas la clé gender console.assert(!Object.keys(hugo).includes("gender")); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="loops">लूप</h2> <div class="sectionbody"> <div class="paragraph"> <p>06_loops.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Les boucles: Itérer sur arrays et objets. */ console.log("for loop over array"); var numbers = [12, 10, 8, 6, 4, 2, 0]; for (number of numbers) { console.log(number); } console.log("---------"); console.log("for loop over object key"); var obj = { a: 1, b: 2, c: 3, d: 4 }; for (key in obj) { console.log(key); } console.log("---------"); console.log("for loop over object value"); for (value in obj) { console.log(obj[value]); } console.log("---------"); console.log("another for loop over authors array") var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ]; for (const [i, value] of authors.entries()) { console.log(`${value[0]}, ${value[1]} (${value[2]})`); } console.log("---------"); console.log("while loop over array") var i = 0 while (i < authors.length) { console.log(`${authors[i][0]}, ${authors[i][1]} (${authors[i][2]})`); i++; } console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="const_var_let">Const, var और let</h2> <div class="sectionbody"> <div class="paragraph"> <p>07_const_var_let.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * const X var X let */ //var x du if n'est pas confiné au scope du if const varTest = () => { var x = 1; console.log(x); console.assert(x === 1); if (true) { var x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x !== 1); console.assert(x === 2); } varTest(); console.log("---------"); //var x est global à tous les fichier js //chargés dans la page html //var x issue du fichier 1_start.js //ligne 46 console.log(x); console.assert(x === 20); console.log("---------"); //premier let x est confiné au scope de la fonction //le let x du if est confiné au scope du if const letTest = () => { let x = 1; console.log(x); console.assert(x === 1); if (true) { let x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x === 1); console.assert(x !== 2); } letTest(); console.log("---------"); /** * const: déclare un emplacement mémoire non réattribuable * c'est modifiable pour un array, * mais non réinitialisable; * ex: * const arr = [25, 27, 29] * arr = [5, 7] //impossible * arr[0]=20 // possible * ex: * const n = 1; * n = 3; //impossible */ const arr = [25, 27, 29] console.table(arr); arr[0] = 20 // possible console.table(arr); arr.pop() console.table(arr); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="rest_and_spread_operators">Rest और spread operators</h2> <div class="sectionbody"> <div class="paragraph"> <p>08_विराम_और_प्रसार_ऑपरेटर्स.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Opérateur de rest: * const add = (...operandes) => a + b; * ou avec parametres avec valeur par défaut * const add = (a=0, b=0, ...operandes) => a + b; */ /** * spread opérateur: * récupère l'ensemble des elements d'une collection, * dans un array */ const user_ages = [25, 56, 12, 58, 41, 62, 26]; const max_user_age = Math.max(...user_ages); const min_user_age = Math.min(...user_ages); console.assert(max_user_age == 62); console.assert(min_user_age == 12); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="विघटन">विघटन</h2> <div class="sectionbody"> <div class="paragraph"> <p>09_destructuring.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * L'affectation par décomposition (destructuring) */ const user = { first_name: "Oliv", last_name: "Cher", nick_name: "cheroliv", gender: "male", is_adult: true }; console.log(user); //première façon d'initaliser des variables sans destructuration let first_name_legacy = user.first_name; let last_name_legacy = user.last_name; let nick_name_legacy = user.nick_name; let gender_legacy = user.gender; let is_adult_legacy = user.is_adult; console.assert("Oliv" === first_name_legacy); console.assert("Cher" === last_name_legacy); console.assert("cheroliv" === nick_name_legacy); console.assert("male" === gender_legacy); console.assert(true === is_adult_legacy); console.log("---------"); /** * Initialisation par déstructuration */ const { first_name, last_name, nick_name, gender, is_adult } = user; console.assert(user.first_name === first_name); console.assert(user.last_name === last_name); console.assert(user.nick_name === nick_name); console.assert(user.gender === gender); console.assert(user.is_adult === is_adult); /** * Intialisation par déstructuration des arrays */ //cible explicite const [a1, a2] = [15, 25, 17, 81, 51, 46]; console.assert(a1 === 15); console.assert(a2 === 25); //cible avec position par rapport aux index par virgules //je veux b3 à 46 const [b1, b2, , , , b3] = [15, 25, 17, 81, 51, 46]; console.assert(b1 === 15); console.assert(b2 === 25); console.assert(b3 === 46); //déstructuration avec operateur de rest // je contruit un autre avec avec les elements // à partir du premier élèment non destructuré const [c1, c2, ...sub_arr] = [15, 25, 17, 81, 51, 46]; console.assert(b1 === 15); console.assert(b2 === 25); console.assert(sub_arr.length === 4); console.assert(sub_arr[0] === 17); console.assert(sub_arr[1] === 81); console.assert(sub_arr[2] === 51); console.assert(sub_arr[3] === 46); // Une boucle pour comparer le resultat attendu for (const [i, value] of[15, 25, 17, 81, 51, 46].entries()) { //on reconstruit le tableau à chaque iteration console.assert([c1, c2].concat(sub_arr)[i] === value); }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="import_export">मॉड्यूल्स का आयात और निर्यात</h2> <div class="sectionbody"> <div class="paragraph"> <p>10_module_import_export.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Import et export de module * * Dans le fichier html * au niveau de la balise d'import de script * spécifier le type module * * 1er technique: import nommé des fonctions: * import { sum, minus, times, div, rem } from "./dummy_math_functions.js"; * * 2eme technique: import global des fonction avec l'asterisque(*) * en préfixant l'import par un nommage du fichier importé: * import * as math from "./dummy_math_functions.js"; * * 3eme technique: import par alias avec le mot clé "as" * import { * sum as add, * minus as substract, * times as multiply, * div as divide, * rem as modulo * } from "./dummy_math_functions.js"; */ import { sum, minus, times, div, rem } from "./dummy_math_functions.js"; console.assert(sum(1, 1) === 2); console.assert(minus(4, 2) === 2); console.assert(times(2, 2) === 4); console.assert(div(4, 2) === 2); console.assert(rem(4, 2) === 0);</code></pre> </div> </div> <div class="paragraph"> <p>dummy_math_functions.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">//sum const sum = (x, y) => x + y; // subtraction const minus = (x, y) => x - y; // multiplication const times = (x, y) => x * y; // division const div = (x, y) => x / y; // remainder: reste de la division euclidiene const rem = (x, y) => x % y; // log sum const sum_log = (x, y) => console.log(sum(x, y)); // log subtraction const minus_log = (x, y) => console.log(minus(x, y)); // log multiplication const times_log = (x, y) => console.log(times(x, y)); // log division const div_log = (x, y) => console.log(div(x, y)); // log remainder const rem_log = (x, y) => console.log(rem(x, y)); export { sum, minus, times, div, rem, sum_log, minus_log, times_log, div_log, rem_log };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="classes">क्लासों का उपयोग</h2> <div class="sectionbody"> <div class="paragraph"> <p>11_classes.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">/** * Utilisation des classes */ //creation d'un objet class Account { constructor(username) { this.username = username; } }; const acc1 = new Account("cheroliv"); console.table(acc1); console.assert(acc1.username === "cheroliv"); console.log("---------"); //création d'un objet et ajout de getter et setter(accesseurs) class AccountInfo { constructor(username) { this._username = username; } get username() { return this._username; } /** * @param {(arg0: string) => void} new_username */ set new_username(new_username) { this._username = new_username; } }; const acc_info1 = new AccountInfo("cheroliv"); console.table(acc_info1); //accés au membre _username avec le getter username() console.assert(acc_info1.username === "cheroliv"); //update la valeur username de acc_info1 avec le setter acc_info1.new_username = "imrandeh"; console.assert(acc_info1.username === "imrandeh"); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">परिचय जावास्क्रिप्ट</span></a></p> </div> </div> </div> https://cheroliv.com/blog/2022/0054_memo_cadrage_post.html Sat, 31 Dec 2022 00:00:00 +0000 blog/2022/0054_memo_cadrage_post.html <div class="sect1"> <h2 id="_फ्रेमिंग">फ्रेमिंग</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_कार्यशाला_1_दृष्टि">कार्यशाला 1: दृष्टि</h3> <div class="sect3"> <h4 id="_पैटर्न_qqoqcp_कौन_क्या_कहाँ_कब_कैसे_क्यों">पैटर्न “QQOQCP” – कौन, क्या, कहाँ, कब, कैसे, क्यों</h4> </div> <div class="sect3"> <h4 id="_2_उत्पाद_विज़न_बोर्ड">2. उत्पाद विज़न बोर्ड</h4> <div class="sect4"> <h5 id="_लक्ष्य_समूह">लक्ष्य समूह</h5> <div class="paragraph"> <p>उपयोगकर्ता कौन हैं जो उत्पाद या पेशकश का उपयोग करते हैं? (सीधा, अप्रत्यक्ष)</p> </div> </div> <div class="sect4"> <h5 id="_आवश्यकताएँ">आवश्यकताएँ</h5> <div class="paragraph"> <p>एप्लिकेशन के मुख्य उपयोगकर्ताओं की 5 प्रमुख आवश्यकताएँ क्या हैं ?</p> </div> </div> <div class="sect4"> <h5 id="_उत्पाद">उत्पाद</h5> <div class="paragraph"> <p>मेरी मूल्य प्रस्ताव क्या है? उत्पाद की 5 मुख्य सुविधाएँ क्या हैं जो निम्नलिखित का उत्तर देने में सक्षम बनाती हैं? आवश्यकताएँ</p> </div> </div> <div class="sect4"> <h5 id="_व्यवसाय_लक्ष्य">व्यवसाय लक्ष्य</h5> <div class="paragraph"> <p>सफलता के मानक क्या हैं ?</p> </div> </div> <div class="sect4"> <h5 id="_दृष्टि">दृष्टि</h5> <div class="paragraph"> <p>जब 4 कॉलम पूरे हो जाएँ, तो आपको उत्पाद विज़न के विज़न भाग को भरना होगा। बोर्ड को एक पूर्ण वाक्य में।</p> </div> </div> </div> </div> <div class="sect2"> <h3 id="_वर्कशॉप_2_पर्सनाउपयोगकर्ता_यात्रा">वर्कशॉप 2: पर्सना/उपयोगकर्ता यात्रा</h3> <div class="ulist"> <div class="title">प्रत्येक पर्सना के लिए एक उपयोगकर्ता यात्रा परिभाषित करें:</div> <ul> <li> <p>मेरी सेवा कौन उपयोग करेगा? (लक्ष्य)</p> </li> <li> <p>वह क्या करना चाहता है ? (But)</p> </li> <li> <p>वह कैसे करेगा ? (उपयोगकर्ता यात्रा)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_कार्यशाला_3_जोनिंग_स्टोरीबोर्ड_साइटमैप">कार्यशाला 3: जोनिंग, स्टोरीबोर्ड, साइटमैप</h3> <div class="sect3"> <h4 id="_1_ज़ोनिंग">1. ज़ोनिंग</h4> </div> <div class="sect3"> <h4 id="_2_स्टोरीबोर्ड">2. स्टोरीबोर्ड</h4> </div> <div class="sect3"> <h4 id="_3_sitemap">3. SiteMap</h4> </div> </div> <div class="sect2"> <h3 id="_कार्यशाला_4_wireframemoodboard">कार्यशाला 4: Wireframe/Moodboard</h3> <div class="sect3"> <h4 id="_1_वायरफ़्रेम">1. वायरफ़्रेम</h4> </div> <div class="sect3"> <h4 id="_2_मूडबोर्ड">2. मूडबोर्ड</h4> </div> </div> <div class="sect2"> <h3 id="_वर्कशॉप_5_स्टोरी_मैपिंग_यूज़र_स्टोरीज़">वर्कशॉप 5: स्टोरी मैपिंग/ यूज़र स्टोरीज़</h3> <div class="sect3"> <h4 id="_स्टोरी_मैपिंग_यूएस_की_प्राथमिकता">स्टोरी मैपिंग (यूएस की प्राथमिकता)</h4> </div> <div class="sect3"> <h4 id="_किसी_type_dutilisateur_के_रूप_में_मैं_un_objective_चाहता_हूँ_इसके_लिए_कि_une_raison">किसी <type d’utilisateur> के रूप में, मैं <un objective> चाहता हूँ इसके लिए कि <une raison>।</h4> </div> </div> <div class="sect2"> <h3 id="_कार्यशाला_6_backlog">कार्यशाला 6: Backlog</h3> <div class="paragraph"> <p><a href="https://www.atlassian.com/fr/agile/scrum/backlogs">लंबित कार्य</a></p> </div> </div> <div class="sect2"> <h3 id="_कार्यशाला_7_तकनीक_और_वास्तुकला">कार्यशाला 7: तकनीक और वास्तुकला</h3> </div> </div> </div> https://cheroliv.com/blog/2022/0053_memo_kotlin_post.html Sun, 29 May 2022 00:00:00 +0000 blog/2022/0053_memo_kotlin_post.html <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } == अच्छे लिंक https://play.kotlinlang.org/[kotlinlang प्लेग्राउंड](No output) https://arrow-kt.io/[तीर.kt]+ https://arkivanov.github.io/MVIKotlin/[MVI:मॉडल व्यू इंटेंट]+ https://github.com/arkivanov/Essenty[Essenty]+ https://arkivanov.github.io/Decompose/[विघटित](No output) == Bout de code divers === मानचित्र घटाना बाइट की सूची को स्ट्रिंग की सूची में बदलें और स्ट्रिंग की सूची का सारांश दें + एक स्ट्रिंग जिसमें संयोजन होता है। कैसे request भेजे गए requestBodyContent:byte[] की लॉग करें [source,kotlin] ---- log.info( requestBodyContent!!.map { it.toInt().toChar().toString() } .reduce { request: String, s: String -> request + s } ) ---- === enum और सील्ड क्लासेस [No output]link:0038_training_kotlin_enum_sealed_class_post[प्रशिक्षण kotlin enum सील्ड क्लास, window="_blank] === functionnal interface और method reference एक इकाई को DTO डोमेन मॉडल में परिवर्तित किया जा सकता है, एक विधि संदर्भ (फ़ंक्शनल शैली - Java 8) के साथ। [source,kotlin] ---- fun findAllByLoginNot( pageable:Pageable, login:String) :Page<UserDto> { return userDao.findAllByLoginNot( pageable, login).map(::fromEntity) } ---- एकhttps://stackoverflow.com/a/22245383/837404[अच्छी व्याख्या] === मानक आउटपुट को कैप्चर करें [source,kotlin] ---- package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.out import java.lang.System.setOut import kotlin.test.AfterTest import kotlin.test.BeforeTest import kotlin.test.Test import kotlin.test.assertEquals class BasicsHOF { private val standardOut: PrintStream? = out private val outputStreamCaptor = ByteArrayOutputStream() @BeforeTest fun setUp() = setOut(PrintStream(outputStreamCaptor)) @AfterTest fun tearDown() = setOut(standardOut) @Test fun `three times dope`() { 3.times { println("Hello") } assertEquals( buildString { repeat(3) { append("Hello\n") } deleteAt(length - 1) }, outputStreamCaptor .toString() .trim() ) } fun Int.times(fn: () -> Unit) = (1..this).forEach { _ -> fn() } } ---- === Kotlin में apply, run, let, also, use और with के बीच क्या अंतर है? Kotlin फ़ंक्शनों की तुलना और लैम्ब्डा फ़ॉर्म का उपयोग संदर्भ .परिचय Kotlin फ़ंक्शन`apply`, `run`, `let`, `also`, `use`, et `with`वस्तुओं को संभालने के विभिन्न तरीके प्रदान करते हैं। प्रत्येक का अपना उपयोग केस और व्यवहार होता है। इसके अलावा, लैम्ब्डा रेफरेंस रूपों से मौजूदा लैम्ब्डा कार्यों को संदर्भित करके कोड को अधिक पढ़ने योग्य और पुन: प्रयोज्य बनाया जा सकता है। == लागू करना == फ़ंक्शन`apply`इसे ऑब्जेक्ट को उसकी सृजन के दौरान कॉन्फ़िगर करने के लिए उपयोग किया जाता है। यह उस ऑब्जेक्ट को लौटाता है जिस पर इसे कॉल किया जाता है। उदाहरण लैम्ब्डा संदर्भ : [source,kotlin] ---- val someObject = SomeClass().apply(::configureObject) ---- उदाहरण लैम्ब्डा के साथ : [source,kotlin] ---- val someObject = SomeClass().apply { // configuration des propriétés de someObject } ---- == चलना == फ़ंक्शन`run`एक ऑब्जेक्ट पर कोड के एक ब्लॉक को निष्पादित करने और कोड ब्लॉक का परिणाम लौटाने के लिए उपयोग की जाती है। लैम्ब्डा संदर्भ का उदाहरण : [source,kotlin] ---- val result = someObject.run(::someFunction) ---- लैम्ब्डा के साथ उदाहरण : [source,kotlin] ---- val result = someObject.run { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée } ---- == अनुमति दें == फ़ंक्शन`let`इसका उपयोग एक ऑब्जेक्ट पर कोड के ब्लॉक को निष्पादित करने और कोड ब्लॉक का परिणाम लौटाने के लिए किया जाता है। उदाहरण के साथ लैम्ब्डा संदर्भ : [source,kotlin] ---- val result = someObject.let(::processObject) ---- लैम्बडा के साथ उदाहरण: [source,kotlin] ---- val result = someObject.let { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée } ---- == भी == फ़ंक्शन`also`इसे किसी वस्तु पर अतिरिक्त क्रिया करने के लिए उपयोग किया जाता है और यह उसी वस्तु को लौटाता है जिस पर इसे बुलाया जाता है। लैम्ब्डा संदर्भ के साथ उदाहरण : [source,kotlin] ---- someObject.also(::performAdditionalAction) ---- उदाहरण lambda के साथ : [source,kotlin] ---- someObject.also { // action additionnelle sur someObject } ---- == उपयोग करें =| कार्य`use`इसका उपयोग उन संसाधनों के साथ काम करने के लिए किया जाता है जिन्हें उपयोग के बाद बंद किया जाना चाहिए। यह स्वचालित रूप से फ़ंक्शन को बुलाती है`close`ब्लॉक के अंत में। लैम्ब्डा संदर्भ के साथ उदाहरण: [source,kotlin] ---- someResource.use(::useResource) ---- उदाहरण के साथ lambda : [source,kotlin] ---- someResource.use { // travailler avec la ressource } ---- == के साथ == फ़ंक्शन`with`यह कई विधियों को एक ऑब्जेक्ट पर उसके नाम को दोहराए बिना कॉल करने के लिए उपयोग की जाती है और अंतिम अभिव्यक्ति का परिणाम लौटाती है। उदाहरण लैम्ब्डा संदर्भ : [source,kotlin] ---- val result = with(someObject, ::processWithObject) ---- लैम्ब्डा के साथ उदाहरण : [source,kotlin] ---- val result = with(someObject) { // appeler des méthodes sur someObject // la dernière expression est renvoyée } ---- लैम्ब्डा संदर्भ रूपों या ब्लॉकों का उपयोग करके`{}`, आप विभिन्न कार्यों में तर्क को समेट सकते हैं, इस प्रकार कोड की पढ़ने योग्यता और पुन: उपयोगिता में सुधार होता है। .क्या let उस ऑब्जेक्ट को उसके पर किए गए साइड इफ़ेक्ट्स के साथ लौटाता है या इनपुट की प्रारंभिक अवस्था में function(let) में ? == let Function en Kotlin == फ़ंक्शन`let`Kotlin में एक ऑब्जेक्ट पर ऑपरेशन करने और अलग परिणाम वापस करने के लिए उपयोग की जाती है। हालांकि, यह ध्यान रखना महत्वपूर्ण है कि फ़ंक्शन`let`यह विधि जिस ऑब्जेक्ट पर इसे बुलाया जाता है, उसके प्रारम्भिक स्थिति को संशोधित नहीं करती। |=== |**हस्ताक्षर** |`inline fun <T, R> T.let(block: (T) -> R): R` |=== |=== |**उपयोग** |फ़ंक्शन`let`इसे सामान्यतः किसी ऑब्जेक्ट पर परिवर्तन लागू करने और इन परिवर्तनों पर आधारित परिणाम प्राप्त करने के लिए उपयोग किया जाता है। |=== |=== |**परिणाम** |फ़ंक्शन द्वारा लौटाया गया मान`let`यह लैम्ब्डा अभिव्यक्ति का परिणाम है जो तर्क के रूप में पारित की गई है, सामान्यतया वस्तु पर किए गए संचालन का परिणाम होता है। |=== |=== |**पार्श्व प्रभावों** |भले ही फ़ंक्शन`let`जब इसे लैम्ब्डा अभिव्यक्ति में उपयोग किया जाता है, तो यह ऑब्जेक्ट पर साइड इफ़ेक्ट्स डाल सकती है, लेकिन यह ऑब्जेक्ट की प्रारंभिक स्थिति को संशोधित नहीं करती। |=== इस प्रकार, फ़ंक्शन`let`यह एक शानदार तरीका है किसी ऑब्जेक्ट पर संचालन करने का, साथ ही एक व्युत्पन्न परिणाम प्राप्त करते हुए, और मूल ऑब्जेक्ट की अखंडता को बनाए रखते हुए। ----</code></pre> </div> </div> https://cheroliv.com/blog/2022/0052_memo_jvm_post.html Sat, 28 May 2022 00:00:00 +0000 blog/2022/0052_memo_jvm_post.html <div class="sect1"> <h2 id="toc">सामग्री की तालिका</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#टैंक">[टैंक]</a></p> </li> <li> <p><a href="#math">संख्याएँ और गणित</a></p> </li> <li> <p>तारीख</p> </li> <li> <p><a href="#java8date">तारीखें और समय java8</a></p> </li> <li> <p><a href="#arrCol">सरणी और संग्रह</a></p> </li> <li> <p><a href="#sysProp">System.Properties</a></p> </li> <li> <p><a href="#थ्रेड्स">[थ्रेड्स]</a></p> </li> <li> <p><a href="#regex">नियमित अभिव्यक्तियाँ</a></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="char">स्ट्रिंग्स और अक्षर</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.Collator import java.util.* import kotlin.test.* class StringsTest { @Test fun `chaines de caractères et caractères`() { //inférence de type val s = "C'est" assertEquals("C'est", s) //concaténation val t: String = s + " le moment." assertEquals("C'est le moment.", t) // StringBuilder val t1: String = s + buildString { append(" le moment.") } assertEquals("C'est le moment.", t1) //interpolation val t2 = "$s le moment." assertEquals("C'est le moment.", t2) //multiligne chaine de caractères val t3 = """$s le moment.""" assertEquals("C'est le moment.", t3) //conversion de type val t4 = t + " " + 23.4 assertEquals("C'est le moment. 23.4", t4) val t5 = 'C'.toString() assertEquals("C", t5) //taille de la chaine de caractères assertEquals(16, t.length) //sous-chaine d'une chaine de caractères //retourne une chaine de caractères contenant, //les caractères aux positions x à y-1 //sub = t.substring(x, y) //t = "C'est le moment." //retourne les caractères 6 et 7 var sub = t.substring(6, 8) assertEquals("le", sub) //retourne les caractères 0 à 4 sub = t.substring(0, 5) assertEquals("C'est", sub) //la longueur d'une sous-chaine est toujours égale (y-x) val numChars = sub.length assertEquals(5 - 0, numChars) //extraction des caractères d'une chaine assertEquals('e', t.elementAt(2)) assertEquals('e', t.get(2)) assertEquals('e', t[2]) //conversion d'une chaine en tableau de caractères val ca = t.toCharArray() assertEquals(t.length, ca.size) t.mapIndexed { index, char -> assertEquals(char, ca[index]) } //place les 4 premiers caractères de t1 //dans le tableau ca a la position 2 (t as java.lang.String).getChars( /* srcBegin = */ 0, /* srcEnd = */ 3, /* dst = */ ca, /* dstBegin = */ 1 ) assertEquals("CC'et le moment.", String(ca)) //colle tous les caractères dans un meme string assertEquals("CC'et le moment.", ca.concatToString()) //to lower case assertEquals("c'est le moment.", t.toLowerCase()) assertEquals("c'est le moment.", t.lowercase()) //to upper case assertEquals("C'EST LE MOMENT.", t.toUpperCase()) assertEquals("C'EST LE MOMENT.", t.uppercase()) //comparaison de chaines de caractères //t = "C'est le moment." assertFalse(t.equals("hello")) assertFalse(t == "hello") //ignore la casse assertTrue(t.equalsIgnoreCase("C'EST LE MOMENT.")) assertTrue(t.equals("C'EST LE MOMENT.", ignoreCase = true)) //démarre par assertTrue(t.startsWith("C'est")) //se finit par assertTrue(t.endsWith("le moment.")) //compareTo //retourne une valeur < 0, car s est //alphabétiquement avant "N'est" val r1: Int = s.compareTo("N'est") assertTrue(r1 < 0) //variante ignorant la casse val r1Prime: Int = (s as java.lang.String).compareToIgnoreCase("n'est") assertTrue(r1Prime < 0) //retourne 0 si les chaines sont equivalente val r2: Int = s.compareTo("C'est") assertEquals(0, r2) //retourne une valeur > 0 car s vient apres "B'est" val r3: Int = s.compareTo("B'est") assertTrue(r3 > 0) //Recherche de caractères et de sous-chaines de caractères //recherche de caractères //position du premier caractères 't' var pos = t.indexOf('t') assertEquals(4, pos) //position du suivant pos = t.indexOf('t', pos + 1) assertEquals(14, pos) //retour d'érreur -1 si absence de suivant pos = t.indexOf('t', pos + 1) assertEquals(-1, pos) //position du dernier 't' dans la chaine: 14 pos = t.lastIndexOf('t') assertEquals(14, pos) //recherche de 't' vers l'arrière a partir du caractères 13 pos = t.lastIndexOf('t', pos - 1) assertEquals(4, pos) //recherche de sous-chaines //retourne 2 pos = t.indexOf("est") assertEquals(2, pos) //"est" n'apparait qu'une seule fois: retourne -1 pos = t.indexOf("est", pos + 1) assertEquals(-1, pos) //recherche d'une sous-chaine depuis l'arrière //t = "C'est le moment." //retourne 6 pos = t.lastIndexOf("le ") assertEquals(6, pos) //extrait depuis la position 9, //renvoi toute la chaine après "le " val noun = t.substring(pos + 3) assertEquals(-1, noun.indexOf("le ")) //remplacement de toutes les instances d'un caractère //par un autre caractère //ne fonctionne que avec les caractères, pas les chaines val exclaim: String = t.replace('.', '!') assertEquals('!', exclaim.get(exclaim.length - 1)) assertEquals(exclaim.length - 1, exclaim.indexOf('!')) assertEquals(-1, exclaim.indexOf('.')) //suppression des espaces blancs //au début et à la fin d'une chaine val noextraspaces = t.trim() assertNotEquals(' ', noextraspaces.get(0)) assertNotEquals(' ', noextraspaces.get(noextraspaces.length - 1)) //extraction des instances uniques de chaines de caractères //avec intern() val s1 = s.intern() assertEquals(s, s1) val s2 = "C'est".intern() assertEquals("C'est", s2) assertEquals(s1, s2) //StringBuilder pour manipuler les caractères d'une chaine de caractères //crée un tampon StringBuilder à partir d'une chaine de caractères val b = StringBuilder("N'est") //extrait et définit des caractères individuel du tampon StringBuilder //le caractères à l'index 0 val c: Char = b.get(0) assertEquals('N', c) //modifier le premier caractère de la chaine b.setCharAt(0, 'C') assertEquals(s, b.toString()) //ajouter des données à un StringBuilder b.append(' ') b.append("le moment.") b.append(23) //insère des chaines de caractères ou autre dans le StringBuilder b.insert(6, "pas ") assertEquals("C'est pas le moment.23", b.toString()) //remplace un sous ensemble de caractères //avec une chaine de caractères donnée b.replace(2, 9, "est") assertEquals("C'est le moment.23", b.toString()) //supprime les caractères b.delete(15, 18) assertEquals("C'est le moment", b.toString()) b.deleteCharAt(2) assertEquals("C'st le moment", b.toString()) //insert à la postion 2 et décale reste à droite(sans perte de données) b.insert(2, 'e') //tronque la taille de la donnée b.setLength(5) assertEquals("C'est", b.toString()) //inverse les caractères de la chaine b.reverse() assertEquals("tse'C", b.toString()) //écrase le StringBuilder, pret à etre réutilisé b.setLength(0) assertEquals("", b.toString()) //java.util.StringTokenizer pour fragmenter une chaine //de caractères en un ensemble de mots var st = StringTokenizer(t) //nb d'items encore présentent dans la file assertEquals(3, st.countTokens()) //est ce que il y a encore des items dans la file assertTrue(st.hasMoreTokens()) //récupérer le token courrant assertEquals("C'est", st.nextToken()) assertEquals("le", st.nextToken()) assertEquals("moment.", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //extraire des occurences de mots délimités //par des caractères autres que des expaces. val str = "a:b:c:d" st = StringTokenizer(str, ":") assertEquals(4, st.countTokens()) assertTrue(st.hasMoreTokens()) assertEquals("a", st.nextToken()) assertEquals("b", st.nextToken()) assertEquals("c", st.nextToken()) assertEquals("d", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //text="C'est le moment." val text = t.toCharArray() var p = 0 //sauter les espaces de tete //pour ramener p à la position du premier caractère imprimable while ((p < text.size) && (Character.isWhitespace(text[p])) ) p++ assertEquals(0, p) assertEquals("C'est le moment.", text.concatToString()) //met le premier mot du texte en majuscule while (p < text.size && Character.isLetter(text[p])) { text[p] = Character.toUpperCase(text[p]) p++ } assertEquals(1, p) assertEquals('C', text[0]) assertTrue(Character.isUpperCase(text[0])) assertFalse(Character.isLetter(text[1])) //comparer des chaines de caractères // avec les contrainte la locale système val col = Collator.getInstance() //le résulat est négatif car chica //est avant chico dans l'ordre alphabétique assertTrue(col.compare("chica", "chico") < 0) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="math">संख्याएँ और गणित</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.math.BigInteger import java.security.SecureRandom import java.text.NumberFormat import java.util.* import kotlin.test.* class NumbersMathTest { @Test fun `Nombres et Math`() { //Constantes utiles Byte.MIN_VALUE Byte.MAX_VALUE Short.MIN_VALUE Short.MAX_VALUE Float.MIN_VALUE Float.MAX_VALUE Math.PI Math.E val s = "-42" //conversion de chaine de caractères //vers un nombre, si possible. var b: Byte = java.lang.Byte.parseByte(s) var sh: Short = java.lang.Short.parseShort(s) var i: Int = java.lang.Integer.parseInt(s) var l: Long = java.lang.Long.parseLong(s) var f: Float = java.lang.Float.parseFloat(s) var d: Double = java.lang.Double.parseDouble(s) //valeur exacte val f_exac = java.lang.Float.valueOf(s) val d_exac = java.lang.Double.valueOf(s) //les routines de conversions entière gérent //les nombres dans diverses bases. //1011 en binare est égal a 11 en base dix b = java.lang.Byte.parseByte("1011", 2) assertEquals(11, b) //ff en base 16(hexa) est égal à 255 en base dix. sh = java.lang.Short.parseShort("ff", 16) assertEquals(255, sh) //la méthode valueOf() peut gérer des bases arbitraires. i = java.lang.Integer.valueOf("egg", 17).toInt() assertEquals(4334, i) //la méthode decode() gére les representations octale, //décimal, hexadécimal, en fonction du préfixe numérique //de la chaine de caractères //un 0 de tete signifie base 8 //un 0x de tete signifie base 16 //les autres sont en base 10 val sho = java.lang.Short.decode("0377") //la classe Integer peut convertir les nombres //en diverses chaines de caractères. val decimal = java.lang.Integer.toString(42) assertEquals("42", decimal) val decimal_ = 42.toString() assertEquals("42", decimal_) val binary = java.lang.Integer.toBinaryString(42) assertEquals("101010", binary) val octal = java.lang.Integer.toOctalString(42) assertEquals("52", octal) val hex = java.lang.Integer.toHexString(42) assertEquals("2a", hex) val base36 = java.lang.Integer.toString(42, 36) assertEquals("16", base36) val base36_ = 42.toString(36) assertEquals("16", base36_) //java.text.NumberFormat effectue la conversion // d'une maniere spécifique aux parametres locaux //sans parametre prend la local systeme comme reference val nf = NumberFormat.getNumberInstance(Locale.FRANCE) val formatted_number = nf.format(9876543.21) assertNotEquals("9876543.21", formatted_number) //parse la chaine de caractères en fonction des parametres locaux(fr) val n = nf.parse("1234567,89") assertEquals(1234567.89, n) //les valeurs monétaires sont parfois formaté // d'une maniere differente des nombres val money_format = NumberFormat.getCurrencyInstance(Locale.FRANCE) assertEquals("123,40 €", money_format.format(1234.56)) //java.lang.Math d = Math.toRadians(27.0) d = Math.cos(d) d = Math.sqrt(d) d = Math.log(d) d = Math.exp(d) d = Math.pow(10.0, d) d = Math.atan(d) d = Math.toDegrees(d) //arrondi au dessus val up = Math.ceil(d) //arrondi au dessous val down = Math.floor(d) //arrondi au plus près val nearest = Math.round(d) //java.lang.Math.Random() val r = Math.random() assertTrue(r >= 0.0 && r < 1.0) //créé un nouvel objet Random, en l'initialisant //avec l'heure courante val generator = java.util.Random(System.currentTimeMillis()) //prochaine valeur aléatoire de taille double d = generator.nextDouble() assertTrue((d >= 0.0) && (d < 1.0)) //prochaine valeur aléatoire de taille float f = generator.nextFloat() assertTrue((f >= 0.0) && (f < 1.0)) //prochaine valeur aléatoire de taille long l = generator.nextLong() assertTrue( (Math.abs(l) <= Long.MAX_VALUE) && (Math.abs(l) >= 0) ) //prochaine valeur aléatoire de taille int i = generator.nextInt() assertTrue( (Math.abs(i) <= java.lang.Integer.MAX_VALUE) && (Math.abs(i) >= 0) ) val limit = 100 //prochaine valeur aléatoire de taille int //la limit max du ramdom est ramené à limit //et la limit min est 0 i = generator.nextInt(limit) assertTrue(i in 0 until limit) //prochaine valeur aléatoire de taille booléen val bool = generator.nextBoolean() assertNotNull(bool) //valeur moyenne 0.0, déviation standard 1.0 d = generator.nextGaussian() //randoms bytes //rempli un tableau avec des valeurs byte aléatoires val b_arr = ByteArray(128) generator.nextBytes(b_arr) b_arr.iterator().forEachRemaining { assertTrue( it <= Byte.MAX_VALUE && it >= Byte.MIN_VALUE ) } //java.security.SecureRandom pour les nombres aléatoires //utilisé en cryptographie val secure_generator = SecureRandom() //le générateur génère sa propre tete de liste sur 16 octets secure_generator.setSeed(secure_generator.generateSeed(16)) val sec_b_arr = ByteArray(128) secure_generator.nextBytes(sec_b_arr) sec_b_arr.iterator().forEachRemaining { assertTrue( it <= java.lang.Byte.MAX_VALUE && it >= java.lang.Byte.MIN_VALUE ) } //java.math.BigDecimal java.math.BigInteger //pour travailler sur des grandes valeurs. //calcule de la factorielle de 1000 var total = BigInteger.valueOf(1) (2..1000).forEach { total = total.multiply(BigInteger.valueOf(it.toLong())) } assertTrue(total.toString().length == 2568) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="date">तारीखें और समय</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.DateFormat import java.text.SimpleDateFormat import java.time.Instant import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertTrue class DatesHoursTest { @Test fun `Dates et heures`() { //l'heure courante en millisecondes val t0 = System.currentTimeMillis() //une autre représentation de la meme information val now = java.util.Date() //converti un objet java.util.Date en une valeur long. val t1 = now.getTime() assertTrue(t1 > Instant.EPOCH.toEpochMilli()) //kotlin property access syntaxe style val t1_prime = now.time //java.text.DateFormat //affiche la date d'aujourd'hui en utilisant le format //par défaut des parametres locaux val defaultDateFormat = DateFormat.getDateInstance() //personnalisation du formatage et de la locale val df = DateFormat.getDateInstance(DateFormat.LONG, Locale.FRANCE) val localeFormattedDate = df.format(Date()) //constantes pour les styles de pattern de formatage assertEquals(0, DateFormat.FULL) assertEquals(1, DateFormat.LONG) assertEquals(2, DateFormat.MEDIUM) assertEquals(3, DateFormat.SHORT) assertEquals(2, DateFormat.DEFAULT) //utilise pour l'heure un format abrégé avec //des parametres personnalisés val tf = DateFormat.getTimeInstance( DateFormat.SHORT, Locale.FRANCE ) //affiche l'heure en utilisant le format de tf val shortTime = tf.format(Date()) assertTrue(shortTime.contains(':')) //affiche la date et l'heure en utilisant //un format détaillé val longTimeStamp = DateFormat.getDateTimeInstance( DateFormat.FULL, DateFormat.FULL, ) assert(longTimeStamp.format(Date()).isNotEmpty()) //utilisez java.text.SimpleDateFormat //pour définir votre propre modele de formatage val customFormat = SimpleDateFormat("yyyy.MM.dd") assertEquals(10, customFormat.format(Date()).length) //DateFormat peut également parser les date contenu dans des chaines val kotlinAnnounceDate = customFormat.parse("2019.05.08") //la class Date et sa représentation en millisecondes //n'autorise qu'une forme trés simple d'arithmétique //on ajoute 3 600 000 millisecondes à l'heure courante val anHourFromNow = now.getTime() + (60 * 60 * 1000) assert(anHourFromNow > now.getTime()) //java.util.Calendar //pour manipuler les dates et heures de facon plus sophistiquée //instanciation selon les parametres locaux //et le fuseau horaire local val calendar = Calendar.getInstance() //initialisation du calendrier à la date de maintenant calendar.setTime(now) //détermine le jour de l'année auquel correspond la date courante val dayOfYear = calendar.get(Calendar.DAY_OF_YEAR) assert(dayOfYear < 366) //réinitialisation de la date courante calendar.set(2019, Calendar.MAY, 8) assertEquals(4, calendar.get(Calendar.DAY_OF_WEEK)) //à quel jour du mois correspond le deuxieme mercredi de mai 2019 //set(key,value) calendar.set(Calendar.YEAR, 2019) calendar.set(Calendar.MONTH, Calendar.MAY) calendar.set(Calendar.DAY_OF_WEEK, Calendar.WEDNESDAY) //defini à quel (n=2) semaine du mois est la date calendar.set(Calendar.DAY_OF_WEEK_IN_MONTH, 2) //extrait le jour du mois val dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH) assertEquals(8, dayOfMonth) calendar.setTime(kotlinAnnounceDate) //ajoute 30j à la date calendar.add(Calendar.DATE, 30) val monthAfter = calendar.getTime() //date est elle avant ou apres? assertTrue(monthAfter.after(kotlinAnnounceDate)) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="java8date">तारीखें और समय java8</h2> <div class="sectionbody"> <div class="paragraph"> <p>Java 8 नया पैकेज <strong><em>java.time</em></strong> पेश करता है, जिसमें मूल वर्ग होते हैं जो<br> अधिकांश डेवलपर्स काम करते हैं। इसमें चार उप‑पैकेज भी हैं:<br></p> </div> <div class="paragraph"> <p><strong><em>java.time.chrono</em></strong><br> वैकल्पिक कालक्रम कि डेवलपर्स कैलेंडर प्रणालियों का उपयोग करते हैं जो नहीं<br> ISO मानक का पालन करने से यह इंटरैक्ट करेगा। एक उदाहरण एक जापानी गोभी होगा<br> सहनशील प्रणाली।<br> <strong><em>java.time.format</em></strong><br> इसमें दिनांक और समय ऑब्जेक्ट्स को बदलने के लिए उपयोग किया जाने वाला DateTimeFormatter निहित है<br> एक स्ट्रिंग में और साथ ही डेटा और समय ऑब्जेक्ट्स में स्ट्रिंग को पार्स करने के लिए भी।<br> <strong><em>java.time.temporal</em></strong><br> बेसिक दिनांक और समय क्लास के लिए आवश्यक इंटरफ़ेस रखता है और साथ ही<br> अभिकल्पनाएँ (जैसे कि क्वेरीज़ और समायोजक) उन्नत तिथि संचालन के लिए।<br> <strong><em>java.time.zone</em></strong><br> आधारित समय क्षेत्र नियमों के लिए उपयोग की जाने वाली कक्षाएँ;<br> अधिकांश डेवलपर्स को इस पैकेज की आवश्यकता नहीं होगी।<br></p> </div> <div class="imageblock"> <div class="content"> <img src="../../img/java8-date-time.png" alt="java8 date time"> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.time.LocalDate import java.time.Month import java.time.Period import java.time.YearMonth import java.time.temporal.* import java.util.HashMap import java.util.stream.Collectors import kotlin.test.Test class DatesHoursJava8Test { class BirthdayDiary { private val birthdays: MutableMap<String, LocalDate> init { birthdays = HashMap() } fun addBirthday( name: String, day: Int, month: Int, year: Int ): LocalDate { val birthday: LocalDate = LocalDate.of(year, month, day) birthdays[name] = birthday return birthday } fun getBirthdayFor(name: String): LocalDate? { return birthdays[name] } fun getAgeInYear(name: String, year: Int): Int { val period: Period = Period.between( birthdays[name], birthdays[name]!!.withYear(year) ) return period.getYears() } fun getFriendsOfAgeIn(age: Int, year: Int): Set<String> { return birthdays.keys.stream() .filter { p: String -> getAgeInYear(p, year) == age } .collect(Collectors.toSet()) } fun getDaysUntilBirthday(name: String): Int { val period: Period = Period.between( LocalDate.now(), birthdays[name] ) return period.getDays() } fun getBirthdaysIn(month: Month): Set<String> { return birthdays.entries.stream() .filter { (_, value): Map.Entry<String, LocalDate> -> value.getMonth() === month } .map<String> { (key): Map.Entry<String, LocalDate> -> key } .collect(Collectors.toSet()) } val birthdaysInCurrentMonth: Set<String> get() = getBirthdaysIn(LocalDate.now().getMonth()) val totalAgeInYears: Int get() = birthdays.keys.stream() .mapToInt { p: String -> getAgeInYear( p, LocalDate.now().getYear() ) } .sum() } //Les ajusteurs modifient les objets de date et d'heure. Supposons, par exemple, que nous voulions //renvoie le premier jour d'un trimestre qui contient un horodatage particulier : class FirstDayOfQuarter : TemporalAdjuster { override fun adjustInto(temporal: Temporal): Temporal? { val currentQuarter: Int = YearMonth.from(temporal) .get(IsoFields.QUARTER_OF_YEAR) return when (currentQuarter) { 1 -> LocalDate.from(temporal) .with(TemporalAdjusters.firstDayOfYear()) 2 -> LocalDate.from(temporal) .withMonth(Month.APRIL.value) .with(TemporalAdjusters.firstDayOfMonth()) 3 -> LocalDate.from(temporal) .withMonth(Month.JULY.value) .with(TemporalAdjusters.firstDayOfMonth()) 4 -> LocalDate.from(temporal) .withMonth(Month.OCTOBER.value) .with(TemporalAdjusters.firstDayOfMonth()) else -> null } } } enum class Quarter { FIRST, SECOND, THIRD, FOURTH } //Dans quel trimestre de l'année cette date se situe-t-elle ? class QuarterOfYearQuery : TemporalQuery<Quarter> { override fun queryFrom(temporal: TemporalAccessor): Quarter { val now = LocalDate.from(temporal) return if (now.isBefore(now.with(Month.APRIL).withDayOfMonth(1))) Quarter.FIRST else if (now.isBefore( now.with(Month.JULY) .withDayOfMonth(1) ) ) Quarter.SECOND else if (now.isBefore( now.with(Month.NOVEMBER) .withDayOfMonth(1) ) ) Quarter.THIRD else Quarter.FOURTH } } @Test fun `Dates et heures après java 8`() { val today = LocalDate.now() val currentMonth = today.month val firstMonthOfQuarter = currentMonth.firstMonthOfQuarter() val q = QuarterOfYearQuery() // Direct var quarter: Quarter? = q.queryFrom(LocalDate.now()) println(quarter) // Indirect quarter = LocalDate.now().query(q) println(quarter) val now = LocalDate.now() val fdoq: Temporal = now.with(FirstDayOfQuarter()) println(fdoq) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrCol">सरणी और संग्रह</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="../../img/collections_classes_inheritance.png" alt="Classes de collections et héritage"> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">package playground.programming import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertFalse import kotlin.test.assertTrue class ArrayCollectionTest { @Test fun `Tableaux, collections`() { //Tableau //java.util.Arrays définit d'utiles méthodes de manipulation de tableaux, //y compris de tri et de recherche au sein d'un tableau val intArray = arrayOf(10, 5, 7, -3) //tri le tableau Arrays.sort(intArray) var pos = Arrays.binarySearch(intArray, 7) //la valeur 7 est trouvé a l'index 2 assertEquals(2, pos) //12 pas trouvé retourne une valeur negative assert(Arrays.binarySearch(intArray, 12) < 0) //les tableaux peuvent également etre triés //et faire l'objet d'une recherche val stringArray = arrayOf("le", "moment", "c'est") assertEquals("c'est", stringArray[2]) assertEquals("le", stringArray[0]) assertEquals("moment", stringArray[1]) Arrays.sort(stringArray) assertEquals("c'est", stringArray[0]) assertEquals("le", stringArray[1]) assertEquals("moment", stringArray[2]) //Arrays.equals() compare tous les éléments de deux tableaux //Arrays.clone() copie tous les elements du tableau dans un autre stringArray.forEachIndexed { i, it -> assertEquals(it, stringArray.clone()[i]) } val data = ByteArray(100) //Arrays.fill() initialise tous les éléments des deux tableaux //initalise tous les éléments à -1 Arrays.fill(data, -1) data.forEach { assertEquals(-1, it) } //attribue aux éléments 5, 6, 7, 8 et 9 la valeur -2 Arrays.fill(data, 5, 10, -2) ((5 until (10 - 1))).forEach { assertEquals(-2, data[it]) } //récupère le type de data val type = data::class.java //est ce que data est un tableau? assertTrue(type.isArray()) //est ce que data est un tableau de byte assertEquals(Byte::class.java, type.getComponentType()) //Collection val s = java.util.HashSet<String>() s.add("test") assertTrue(s.contains("test")) assertFalse(s.contains("test2")) s.remove("test") assertFalse(s.contains("test")) val ss = TreeSet<String>() ss.add("b") ss.add("a") ss.iterator().forEach { assertTrue(it == "a" || it == "b") } //liste doublement chainée var dll: List<String> = LinkedList<String>() //plus efficace val l = java.util.ArrayList<String>() l.addAll(ss) l.addAll(1, ss) val obj = l.get(1) val obj_prime = l[1] assertEquals(obj, obj_prime) l.set(3, "nouvel élément") l.add("test") l.add(0, "test2") l.removeAt(1) l.remove("a") assertFalse(l.contains("a")) l.removeAll(ss) assertFalse(l.containsAll(ss)) assertFalse(l.isEmpty()) assertTrue(l.isNotEmpty()) val sublist = l.subList(1, 3) val elements = l.toArray() l.clear() val m = HashMap<String, Integer>() m.put("clé", Integer(42)) m["clé"] = Integer(42) val value: Integer = m.get("clé")!! assertEquals(Integer(42), value) m.remove("clé") assertTrue(m.isEmpty()) val keys = m.keys assertTrue(keys.isEmpty()) val set = HashSet<String>() set.add("key_1") set.add("key_2") set.add("key_3") val members = set.toArray() assertEquals(3, members.size) val list = ArrayList<String>() list.add("items1") list.add("items2") list.add("items3") val items = list.toArray() assertEquals(3, items.size) //trie et recherche d'éléments sur les collections list.add("clé") //en premier on trie Collections.sort(list) //en kotlin list.sort() //en deuxieme on cherche //retourne l'index du premier trouvé sinon -1 pos = Collections.binarySearch(list, "clé") assertEquals(0, pos) val list1 = mutableListOf(1, 2, 3, 4, 5) val list2 = mutableListOf<Int>(0, 0, 0, 0, 0) //d'autres méthodes intéressantes concernant Collections //copie list1 dans list2, 2e parametre dans 1er parametre Collections.copy(list2, list1) //comparaison de la copy avec filter assertTrue(list1.filterIndexed { i: Int, it: Int -> it != list2[i] }.isEmpty()) //comparaison de la copy avec map list1.mapIndexed { index: Int, it: Int -> assertEquals(it, list2[index]) } //rempli avec des 0 Collections.fill(list2, 0) assertTrue(list2.none { it != 0 }) //le maximum assertEquals(5, Collections.max(list1)) //le minimum assertEquals(1, Collections.min(list1)) //renverse Collections.reverse(list) listOf("items3", "items2", "items1", "clé").mapIndexed { i: Int, it: String -> assertEquals(it, list[i]) } //mélange la list Collections.shuffle(list) //retourne un ensemble immuable possédant un seul élément 0 Collections.singleton(0) //renvoi un emballage immuable autour d'une liste Collections.unmodifiableList(list) //renvoi un emballage synchronisé autour d'une map, ensemble clé valeur Collections.synchronizedMap(m) //java.util.Properties un est objet key value } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="sysProp">System.Properties</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/essential/environment/sysprop.html">System.Properties आधिकारिक दस्तावेज़</a></p> </div> <div class="paragraph"> <p>यहाँ कुछ दिलचस्प संपत्तियों की एक तालिका है।<br> ये गुण जानकारी प्राप्त करने के लिए दिलचस्प हैं<br> JVM के होस्ट सिस्टम पर.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3333%;"> <col style="width: 3.3343%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>कुंजी</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>अर्थ</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ाइल सेपरेटर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">फ़ाइल पथ के घटकों को अलग करने वाला अक्षर। यह यूनिक्स पर "/" और विंडोज़ पर "\" है।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.class.path</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">क्लास फ़ाइलें रखने वाली निर्देशिकाओं और JAR अभिलेखों को खोजने में प्रयुक्त पथ। क्लास पथ के तत्व, path.separator गुण द्वारा निर्दिष्ट प्लेटफ़ॉर्म-विशिष्ट अक्षर से अलग किए जाते हैं।</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.home</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">जावा रनटाइम एनवायरनमेंट (JRE) की इंस्टॉलेशन डायरेक्टरी</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.vendor</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE विक्रेता नाम</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.vendor.url</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE विक्रेता URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.संस्करण</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE version number</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">लाइन.सेपरेटर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">ऑपरेटिंग सिस्टम द्वारा टेक्स्ट फ़ाइलों में लाइनों को अलग करने के लिए उपयोग किया जाने वाला अनुक्रम</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">os.arch</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">ऑपरेटिंग सिस्टम आर्किटेक्चर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">os.name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�ऑपरेटिंग सिस्टम का नाम</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">os.version</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�ऑपरेटिंग सिस्टम संस्करण</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पथ.विभाजक</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.class.path में उपयोग किया जाने वाला पथ सेपरेटर अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">user.dir</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">User working directory</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">user.home</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">उपयोगकर्ता होम निर्देशिका</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">user.name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">उपयोगकर्ता खाता नाम</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="threads">Threads</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.text.DateFormat import java.util.* import kotlin.test.Test class ThreadsTest { @Test fun `threads test`() { //java.lang.Thread représente le thread fondamentale de l'API java //il existe deux manière de définir un thread //1) étendre la classe Thread ou une lambda en kotlin //2) implémenter l'interface Runnable, // puis passer une instance de cet objet Runnable au constructeur de Thread. val list1: List<Int> = List( size = 45, init = { (1..31).random() } ) println("list1$list1") //facon 1 val t = Thread { Collections.sort(list1) println("list1 sorted$list1") } t.start() val list2 = List( size = 45, init = { (1..31).random() } ) println("list2$list2") //facon 2 val sorter = BackgroundSorter(list2) sorter.start() //priorité des threads //tant qu'un thread de niveau de priorité supérieure n'est pas fini //alors celui de niveau inférieur ne peut s'exécuter //on définit un thread avec une priorité inférieur à la normale t.setPriority(Thread.NORM_PRIORITY - 1) //ici on définit un thread avec une priorité inférieur à la priorité //du thread courant t.setPriority(Thread.currentThread().getPriority() - 1) //Thread.yield() fait une pause pour laisser les autres threads de meme priorité s'exécuter } class BackgroundSorter(private val l: List<Int>) : Thread() { override fun run() { Collections.sort(l) println("list2 sorted$l") } } //pour l'arrêt du thread, plutôt qu'utiliser la fonction Thread.stop() // qui laisse la memoire dans un état non controlé. //utiliser la méthode tel que l'exemple pleaseStop() class DummyClock( private val df: DateFormat = DateFormat.getTimeInstance(DateFormat.MEDIUM), private var keepRunning: Boolean = true ) : Thread() { init { isDaemon = true start() } override fun run() { while (keepRunning) { println(df.format(Date())) try { sleep(1000) } catch (e: InterruptedException) { println(e.message) } } } fun pleaseStop() { keepRunning = false } } //java.util.Timer //java.util.TimerTask //ces classes permettent l'exécution de taches répétitives @Test fun `Timer et TimerTask test`() { DummyClock() } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">सामग्री की तालिका</a></p> </div> </div> </div> <div class="sect1"> <h2 id="regex">नियमित अभिव्यक्तियाँ</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">import java.util.* import java.util.regex.Matcher import java.util.regex.Pattern import java.util.stream.Collectors import kotlin.test.Test import kotlin.test.assertEquals class RegularExpressionsTest { @Test fun `expressions régulières`() { val p: Pattern = Pattern.compile("honou?r") val caesarUK = "For Brutus is an honourable man" val mUK: Matcher = p.matcher(caesarUK) assertEquals(true, mUK.find(), "Should matches UK spelling") val caesarUS = "For Brutus is an honorable man" val mUS: Matcher = p.matcher(caesarUS) assertEquals(true, mUS.find(), "Should matches US spelling") } @Test fun `expressions régulières plus complexes`() { //Notez que nous devons utiliser \\ car nous avons besoin d'un littéral \ //et Java utilise un seul \ comme caractère d'échappement var pStr = "\\d" // Un chiffre numérique var text = "Apollo 13" var p = Pattern.compile(pStr) var m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) pStr = "[a..zA..Z]" //N'importe quelle lettre p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) //N'importe quel nombre de lettres, qui doivent toutes être comprises entre 'a' et 'j' //mais peut-être en majuscule ou en minuscule. pStr = "([a..jA..J]*)" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) text = "abacab" //'a' suivi de quatre caractères quelconques, suivi de 'b' pStr = "a....b" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) } @Test fun `Quelles chaînes correspondent à la regex ?`() { val pStr = "\\d" // Un chiffre numérique val p = Pattern.compile(pStr) val ls: List<String> = Arrays.asList("Cat", "Dog", "Ice-9", "99 Luftballoons") val containDigits: List<String> = ls.stream() .filter(p.asPredicate()) .collect(Collectors.toList()) assert(containDigits.contains("Ice-9")) assert(containDigits.contains("99 Luftballoons")) assertEquals(2, containDigits.size) } }</code></pre> </div> </div> <div class="sect2"> <h3 id="_तालिका_regex_मेटा_अक्षर">तालिका regex मेटा अक्षर</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7543%;"> <col style="width: 1.7592%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">मेटा अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कार्यक्षमता</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नोट्स</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वैकल्पिक वर्ण—शून्य या एक उदाहरण</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">*</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पिछले अक्षर का शून्य या अधिक</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(No output)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक या अधिक पिछले अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">{M,N}</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">M और N उदाहरणों के बीच पिछला अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\d</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक अंक</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\D</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक गैर‑संख्यात्मक अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\w</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक शब्द का अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">अंक, अक्षर और _</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\W</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक अक्षर बिना शब्द</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\s</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक अंतराल अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\S</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक गैर-रिक्त स्थान अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\n</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">नई पंक्ति का वर्ण</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\t</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">टैब अक्षर</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोई भी अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N’inclut pas la nouvelle ligne en Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वर्गाकार कोष्ठक के बीच में निहित कोई भी अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक अक्षर वर्ग कहा गया</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[^ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">कोष्ठक के भीतर नहीं आने वाला कोई भी अक्षर</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक उलटे अक्षर वर्ग को कहा गया</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">( )</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">पैटर्न तत्वों का समूह बनाना</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">एक समूह (या कैप्चर समूह)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">|</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">वैकल्पिक संभावनाएँ परिभाषित करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">लॉजिकल OR लागू करें</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">^</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">स्ट्रिंग की शुरुआत $ स्ट्रिंग का अंत</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>पूरा करनाhttps://www.codeurjava.com/2015/05/les-expressions-regulieres-avec-regex.html[के साथ]</p> </div> </div> </div> </div> https://cheroliv.com/blog/2022/0047_memo_gradle_post.html Mon, 23 May 2022 00:00:00 +0000 blog/2022/0047_memo_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_सहायता_दिखाएँ">सहायता दिखाएँ</a></li> <li><a href="#_jvm_का_सिस्टम_प्रॉपर्टी_सेट_करें_d_system_prop">JVM का सिस्टम प्रॉपर्टी सेट करें : `-D, --system-prop</a></li> <li><a href="#_परियोजना_की_संपत्ति_को_बिल्ड_स्क्रिप्ट_के_लिए_परिभाषित_करें_pmypropmyvalue">परियोजना की संपत्ति को बिल्ड स्क्रिप्ट के लिए परिभाषित करें : `-Pmyprop=myvalue</a></li> <li><a href="#_gradle_की_स्टार्टअप_निर्देशिका_निर्दिष्ट_करता_है_डिफ़ॉल्ट_मान_वर्तमान_निर्देशिका_है">Gradle की स्टार्टअप निर्देशिका निर्दिष्ट करता है। डिफ़ॉल्ट मान वर्तमान निर्देशिका है।</a></li> <li><a href="#_कमांड_लाइन_से_param_component_property_को_ओवरराइट_करें">कमांड लाइन से 'param_component' property को ओवरराइट करें :</a></li> <li><a href="#_kotlin_dsl_के_साथ_एक_सामान्य_प्रोज़क्ट_में_सोर्स_सेट_में_एक_फ़ोल्डर_जोड़ें">Kotlin DSL के साथ एक सामान्य प्रोज़क्ट में सोर्स-सेट में एक फ़ोल्डर जोड़ें</a></li> <li><a href="#_एंड्रॉइड_प्रोजेक्ट_में_स्रोत_सेट_में_ग्रोवी_dsl_के_माध्यम_से_फ़ोल्डर_जोड़ें">एंड्रॉइड प्रोजेक्ट में स्रोत सेट में ग्रोवी DSL के माध्यम से फ़ोल्डर जोड़ें</a></li> <li><a href="#_एक_सब_मॉड्यूल_का_निर्माण_और_परीक्षण_करने_से_बचें">एक सब मॉड्यूल का निर्माण और परीक्षण करने से बचें</a></li> <li><a href="#_tar_एक_फ़ोल्डर">Tar एक फ़ोल्डर</a></li> <li><a href="#_एक_बिल्ड_की_निर्भरताएँ_दिखाएँ">एक बिल्ड की निर्भरताएँ दिखाएँ</a></li> <li><a href="#_reduce_का_उपयोग_करने_का_उदाहरण_सूची_को_स्ट्रिंग_में_संयोजन">reduce का उपयोग करने का उदाहरण: सूची को स्ट्रिंग में संयोजन</a></li> <li><a href="#_किसी_विशेष_कार्य_का_विवरण_प्राप्त_करें">किसी विशेष कार्य का विवरण प्राप्त करें</a></li> <li><a href="#_workingdir_root_से_एक_कार्य_लॉन्च_करने_के_लिए_फिर_कार्य_को_से_प्रीफ़िक्स">workingDir root से एक कार्य लॉन्च करने के लिए, फिर कार्य को <code>:</code> से प्रीफ़िक्स</a></li> <li><a href="#_असफल_कार्यों_को_पुनः_चलाने_के_लिए_विकल्प_rerun_tasks_का_उपयोग_करें">असफल कार्यों को पुनः चलाने के लिए, विकल्प <code>--rerun-tasks</code> का उपयोग करें</a></li> <li><a href="#_दूसरे_निर्देशिका_से_एक_विशिष्ट_प्रोजेक्ट_में_एक_टास्क_शुरू_करें">दूसरे निर्देशिका से एक विशिष्ट प्रोजेक्ट में एक टास्क शुरू करें</a></li> </ul> </div> <div class="sect1"> <h2 id="_सहायता_दिखाएँ">सहायता दिखाएँ</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew --help</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jvm_का_सिस्टम_प्रॉपर्टी_सेट_करें_d_system_prop">JVM का सिस्टम प्रॉपर्टी सेट करें : `-D, --system-prop</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Dmyprop=myvalue #ou ./gradlew --system-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_परियोजना_की_संपत्ति_को_बिल्ड_स्क्रिप्ट_के_लिए_परिभाषित_करें_pmypropmyvalue">परियोजना की संपत्ति को बिल्ड स्क्रिप्ट के लिए परिभाषित करें : `-Pmyprop=myvalue</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Pmyprop=myvalue #ou ./gradlew --project-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gradle_की_स्टार्टअप_निर्देशिका_निर्दिष्ट_करता_है_डिफ़ॉल्ट_मान_वर्तमान_निर्देशिका_है">Gradle की स्टार्टअप निर्देशिका निर्दिष्ट करता है। डिफ़ॉल्ट मान वर्तमान निर्देशिका है।</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -p ~/src/next_startup #ou ./gradlew --project-dir ~/src/next_startup</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_कमांड_लाइन_से_param_component_property_को_ओवरराइट_करें">कमांड लाइन से 'param_component' property को ओवरराइट करें :</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -Pparam_component=CUSTOM_VALUE</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kotlin_dsl_के_साथ_एक_सामान्य_प्रोज़क्ट_में_सोर्स_सेट_में_एक_फ़ोल्डर_जोड़ें">Kotlin DSL के साथ एक सामान्य प्रोज़क्ट में सोर्स-सेट में एक फ़ोल्डर जोड़ें</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">sourceSets { getByName("test"){ java.srcDir("src/scripts/groovy") } getByName("test"){ java.srcDir("src/scripts/kscript") } getByName("test"){ java.srcDir("src/test/javascript") } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_एंड्रॉइड_प्रोजेक्ट_में_स्रोत_सेट_में_ग्रोवी_dsl_के_माध्यम_से_फ़ोल्डर_जोड़ें">एंड्रॉइड प्रोजेक्ट में स्रोत सेट में ग्रोवी DSL के माध्यम से फ़ोल्डर जोड़ें</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">android { sourceSets { main.java.srcDirs += "src/main/../../../../ceelo/domain/src/main/java/" test.java.srcDirs += "src/test/../../../../ceelo/domain/src/test/java/" } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_एक_सब_मॉड्यूल_का_निर्माण_और_परीक्षण_करने_से_बचें">एक सब मॉड्यूल का निर्माण और परीक्षण करने से बचें</h2> <div class="sectionbody"> <div class="paragraph"> <p>gradle build -x :excluded-module:check -x :excluded-module:assemble -x :excluded-module:build</p> </div> <div class="listingblock"> <div class="title">फ़ाइलें ले जाना</div> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("moveWebappNode") { doLast { ant.withGroovyBuilder { "move"( "webapp/node_modules" to "$rootDir/webapp-src/node_modules", ) } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tar_एक_फ़ोल्डर">Tar एक फ़ोल्डर</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register<Tar>("tarWebapp") { dependsOn("moveWebappNpm") group = WEBAPP description = "tar webapp" doLast { setOf( "build", "target", "node_modules" ).forEach { dir -> exclude { it.name .dir } } archiveFileName.set("webapp.tar") destinationDirectory.set(File("${rootDir.absolutePath}$sep$WEBAPP_SRC")) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_एक_बिल्ड_की_निर्भरताएँ_दिखाएँ">एक बिल्ड की निर्भरताएँ दिखाएँ</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("printDependencies") { description = "print project dependencies" group = WEBAPP doLast { println("${project.name} dependencies") mutableMapOf<String, Map<String, String>>( "buildDependencies" to buildDependencies, "domainDeps" to domainDeps, "domainTestDeps" to domainTestDeps, ).apply { putAll(appModules) } .forEach { module -> if (module.value.isNotEmpty()) { println("${module.key}:") module.value.forEach { println(dependency(it)) } println() } } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_reduce_का_उपयोग_करने_का_उदाहरण_सूची_को_स्ट्रिंग_में_संयोजन">reduce का उपयोग करने का उदाहरण: सूची को स्ट्रिंग में संयोजन</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register("printWebappSrc") { description = "print webapp sources" group = WEBAPP doLast { webAppSrc .reduce { acc, s -> "$acc\n\t$s" } .run { println("$WEBAPP_SRC: $this\n") } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_किसी_विशेष_कार्य_का_विवरण_प्राप्त_करें">किसी विशेष कार्य का विवरण प्राप्त करें</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -q help --task foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workingdir_root_से_एक_कार्य_लॉन्च_करने_के_लिए_फिर_कार्य_को_से_प्रीफ़िक्स">workingDir root से एक कार्य लॉन्च करने के लिए, फिर कार्य को <code>:</code> से प्रीफ़िक्स</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew :foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_असफल_कार्यों_को_पुनः_चलाने_के_लिए_विकल्प_rerun_tasks_का_उपयोग_करें">असफल कार्यों को पुनः चलाने के लिए, विकल्प <code>--rerun-tasks</code> का उपयोग करें</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew check --rerun-tasks</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_दूसरे_निर्देशिका_से_एक_विशिष्ट_प्रोजेक्ट_में_एक_टास्क_शुरू_करें">दूसरे निर्देशिका से एक विशिष्ट प्रोजेक्ट में एक टास्क शुरू करें</h2> <div class="sectionbody"> <div class="paragraph"> <p>विकल्प`-p` (ou <code>--project-dir</code>) एक Gradle प्रोजेक्ट तक पहुँचने का पथ निर्दिष्ट करने और उसे एक कार्य निष्पादित करने की अनुमति देता है, भले ही वर्तमान निर्देशिका अलग हो।</p> </div> <div class="paragraph"> <p>उदाहरण के लिए, कार्य शुरू करने के लिए`build`परियोजना स्थित में`~/projets/mon-autre-projet`होते हुए एक अन्य निर्देशिका में :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">./gradlew -p ~/projets/mon-autre-projet build</code></pre> </div> </div> <div class="paragraph"> <p>यह कई परियोजनाओं में कार्यों को स्क्रिप्ट करने के लिए केंद्रीय स्थान से विशेष रूप से उपयोगी है।</p> </div> <div class="ulist"> <div class="title">भी देखें :</div> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_warnings">ref</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_options">ref</a></p> </li> <li> <p><a href="https://stackoverflow.com/a/36178581/837404">चर्चा</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2022/0038_training_kotlin_enum_sealed_class_post.html Tue, 17 May 2022 00:00:00 +0000 blog/2022/0038_training_kotlin_enum_sealed_class_post.html <div class="paragraph"> <p>सील्ड क्लासेस, enum नहीं हैं (कीवर्ड: enum).<br> जावा से आने पर, आप अपनी सुविधा प्रदान करने वाली सूची को ओवरलोड करने के लिए ललचा सकते हैं: // Java code</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-java" data-lang="java">enum PizzaOrderStatus { ORDER_RECEIVED, PIZZA_BEING_MADE, OUT_FOR_DELIVERY, COMPLETED; public PizzaOrderStatus nextStatus() { switch (this) { case ORDER_RECEIVED: return PIZZA_BEING_MADE; case PIZZA_BEING_MADE: return OUT_FOR_DELIVERY; case OUT_FOR_DELIVERY: return COMPLETED; case COMPLETED:return COMPLETED; } } }</code></pre> </div> </div> <div class="paragraph"> <p>इसके बजाय, आप sealed क्लास का उपयोग कर सकते हैं :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">sealed class PizzaOrderStatus(protected val orderId: Int) { abstract fun nextStatus() : PizzaOrderStatus class OrderReceived(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return PizzaBeingMade(orderId) } } class PizzaBeingMade(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return OutForDelivery(orderId) } } class OutForDelivery(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return Completed(orderId) } } class Completed(orderId: Int) : PizzaOrderStatus(orderId) { override fun nextStatus(): PizzaOrderStatus { return this } } }</code></pre> </div> </div> <div class="paragraph"> <p>इस दृष्टिकोण का लाभ यह है कि हम अब डेटा को साथ में संचारित कर सकते हैं स्थिति:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">var status: PizzaOrderStatus = OrderReceived(123) while (status !is Completed) { status = when (status) { is OrderReceived -> status.nextStatus() is PizzaBeingMade -> status.nextStatus() is OutForDelivery -> status.nextStatus() is Completed -> status } }</code></pre> </div> </div> <div class="paragraph"> <p>सामान्य रूप से, sealed classes अच्छी होती हैं यदि आप संबद्ध डेटा रखना चाहते हैं एक राज्य</p> </div> https://cheroliv.com/blog/2022/0036_training_kotlin_post.html Thu, 12 May 2022 00:00:00 +0000 blog/2022/0036_training_kotlin_post.html <div class="sect1"> <h2 id="_mind_map">Mind map</h2> <div class="sectionbody"> <div class="paragraph"> <p><span class="image"><img src="../../diagram/training_kotlin.png" alt="training_kotlin"></span></p> </div> </div> </div> <div class="sect1"> <h2 id="_फलनात्मक_प्रोग्रामिंग">फलनात्मक प्रोग्रामिंग</h2> <div class="sectionbody"> <div class="paragraph"> <p>अभ्यास पुस्तक से लिए गए हैं:<br> <mark>#</mark> ग्रेडल एकीकरण JBake को JBake Gradle प्लगइन का उपयोग करके या JBake CLI को सीधे बुलाकर Gradle बिल्ड में एकीकृत किया जा सकता है:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } + लेखक: Massimo Carli + रिपॉज़िटरी: https://github.com/kodecocodes/fpk-materials === सिंटैक्स ==== पहला प्रोग्राम टेस्ट अवधारणाएँ: स्क्रीन प्रदर्शन, फ़ंक्शन + प्रथम कार्यक्रम परीक्षण:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/FirstProgramTest.kt[source](No output) ==== संयोजित फ़ंक्शन परीक्षण धारणाएँ: स्मृति, चर, मान, वस्तु, फ़ंक्शन विस्तार + (No output)https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/ConcatFunctionTest.kt[source]+ ==== जन्मदिन संदेश परीक्षण आउटपुट अवधारणा: समुच्चय, लूप + https://developer.android.com/codelabs/basic-android-kotlin-training-first-kotlin-program?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-kotlin-one%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-training-first-kotlin-program[### Gradle एकीकरण JBake को Gradle बिल्ड्स में JBake Gradle प्लगिन का उपयोग करके या JBake CLI को सीधे कॉल करके एकीकृत किया जा सकता है: ---- tasks.register<JavaExec>("bake") { mainClass.set("org.jbake.launcher.Main") classpath = configurations["jbake"] args = listOf(projectDir.absolutePath, "$buildDir/jbake") } ``` Kotlin का परिचय] + जन्मदिन संदेश टेस्ट आउटपुट:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/BirthdayMessageTestOutput.kt[source]Veuillez fournir le texte français à traduire. === Kotlin का कोर्स video::YRjY3jRrQYY[youtube] === जावा में संग्रहों पर ट्यूटोरियल https://docs.oracle.com/javase/tutorial/collections/index.html[संग्रह,window=_blank] कलेक्शन इंटरफ़ेस का कोर + image:../../img/0036_training_kotlin_post/colls-coreInterfaces.gif[Collections] + === बुनियादी कार्यात्मक ==== घोषणात्मक X आदेशात्मक दृष्टिकोण [source,kotlin] ---- package functional import kotlin.test.Test import kotlin.test.assertEquals class DeclarativeTests { val input = listOf( "123", "abc", "1ds", "987", "abdf", "1d3", "de1", "88", "101" ) fun imperativeSum(list: List<String>): Int { var sum = 0 for (item in list) { try { sum += item.toInt() } catch (_: NumberFormatException) { } } return sum } @Test fun `test imperative approach`() { imperativeSum(input).run { println("Sum $this") assertEquals(1299, this) } } fun isValidNumber(s: String) = try { s.toInt() true } catch (_: NumberFormatException) { false } fun declarativeSum(list: List<String>) = list .filter(::isValidNumber) .map(String::toInt) .sum() @Test fun `test declarative approach`() { assertEquals(1299, declarativeSum(input).apply { println("Sum $this") }) } } ---- ==== अभ्यास 1.1 sumInRange फ़ंक्शन लागू करें, जो मान जोड़ता है में + एक List<String> एक दिए गए अंतराल में। हस्ताक्षर है: [source,kotlin] ---- fun sumInRange(input: List<String>, range: IntRange): Int ---- [source,kotlin] ---- @Test fun `Exercise 1_1`() { assertEquals(4, sumInRange( listOf("1", "10", "a", "7", "ad2", "3"), 1..5 ).apply { println("sumInRange 1..5: $this") } ) } ---- इसे आज़माएँ और अपने उत्तर की जाँच करें के साथhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/DeclarativeTests.kt[समाधान, windows="_blank]. ==== उच्च-क्रम फ़ंक्शन [source,kotlin] ---- package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.* import java.lang.Thread.sleep import kotlin.math.sign import kotlin.test.Test import kotlin.test.assertEquals class BasicsHOFTests { val ONE_SECOND = 1000L @Test fun `high order function`() { //capture de la sortie standard val standardOut: PrintStream? = out val outputStreamCaptor = ByteArrayOutputStream() setOut(PrintStream(outputStreamCaptor)) 3.times { println("Hello") } assertEquals( buildString { repeat(3) { append("Hello\n") } deleteAt(length - 1) }, outputStreamCaptor .toString() .trim() ) //libération de la sortie standard setOut(standardOut) } fun Int.times1(fn: () -> Unit) { for (i in 1..this) { fn() } } fun Int.times2(fn: () -> Unit) { for (i in 1..this) fn() } fun Int.times3(fn: () -> Unit) = (1..this).forEach { fn() } fun Int.times4(fn: () -> Unit) = repeat((1..this).count()) { fn() } fun Int.times(fn: () -> Unit) = (1..this).forEach { _ -> fn() } } ---- ==== अभ्यास 1.2 क्रोनो लागू करें, जो एक प्रकार के फ़ंक्शन को स्वीकार करता है`() ->` + इकाई इनपुट के रूप में ली जाती है और निष्पादन में लगने वाला समय लौटाती है। हस्ताक्षर : + [source,kotlin] ---- fun chrono(fn : () -> Unité) : Long ---- [source,kotlin] ---- @Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } } ---- इसे आज़माएँ और अपने उत्तर की जाँच करें के साथhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[हल, windows="_blank]. ==== रचना [source,kotlin] ---- package functional import kotlin.test.Test import kotlin.test.assertEquals fun double(x: Int): Int = 2 * x fun square(x: Int): Int = x * x fun squareAndDouble1(x: Int) = double(square(x)) infix fun <A, B, C> ((A) -> B).compose(g: (B) -> C) : (A) -> C = { a -> g(this(a)) } class CompositionTests { @Test fun composition_impure() { assertEquals(200, double(square(10))) assertEquals(200, squareAndDouble1(10)) } @Test fun composition_pure() { val squareAndDouble = ::square compose ::double assertEquals(200, squareAndDouble(10)) } } ---- ==== # एक नया JBake प्रोजेक्ट प्रारम्भ करें jbake -i # साइट को बेक (जनरेट) करें jbake -b # स्थानिक रूप से बेक करके सर्व करें jbake -b -s # बेक करें और परिवर्तनों की निगरानी करें jbake -b --reset # स्रोत और गंतव्य निर्दिष्ट करें jbake source_folder output_folder # बेक करने से पहले आउटपुट निर्देशिका साफ़ करें jbake -b . output --reset ``` शुद्ध फ़ंक्शन और परीक्षणीयता [source,kotlin] ---- package functional import java.io.ByteArrayOutputStream import java.io.PrintStream import java.lang.System.out import java.lang.System.setOut import kotlin.test.Test import kotlin.test.assertEquals var count = 0 //impure car une variable global subit un effet de bord fun impure(value: Int): Int { count++ return value + count } //impure car utilisation de la sortie standard qui fait muter le system fun addOneAndLog(x: Int): Int { val result = x + 1 println("New Value is $result") return result } //pure fun addOne(x: Int) = (x + 1).run { Pair(this, "New Value is $this") } class PureTests { @Test fun `impure fonction`() { assertEquals(3, impure(2)) val standardOut = out val outputStreamCaptor = ByteArrayOutputStream() setOut(PrintStream(outputStreamCaptor)) addOneAndLog(3) assertEquals( "New Value is 4", outputStreamCaptor .toString() .trim() ) setOut(standardOut) } @Test fun `pure fonction`() { addOne(3).run { assertEquals(4, first) assertEquals("New Value is 4", second) } } } ---- ==== अपवाद प्रबंधन [source,kotlin] ---- package functional import org.junit.jupiter.api.assertThrows import kotlin.Result.Companion.failure import kotlin.Result.Companion.success import kotlin.test.Test import kotlin.test.assertEquals //NumberFormatException est un effet de bord qui rend la fonction impure fun strToInt(str: String) = str.toInt() //pure fun strToIntOrNull(str: String) = try { str.toInt() } catch (nfe: NumberFormatException) { null } //pure avec gestion de l'exception plus élégante fun strToIntResult(str: String): Result<Int> = try { success(str.toInt()) } catch (nfe: NumberFormatException) { failure(nfe) } class ExceptionHandlingTests { @Test fun impure() { assertThrows<NumberFormatException> { strToInt("foo") } assertEquals(1, strToInt("1")) } @Test fun pure() { assertEquals(null, strToIntOrNull("foo")) assertEquals(1, strToIntOrNull("1")) } @Test fun `pure avec result`() { assertEquals(1, strToIntResult("1").getOrNull()) assertEquals( "For input string: \"foo\"", strToIntResult("foo") .exceptionOrNull() ?.message ) } } ---- === मुख्य बिंदु * जबकि वस्तु‑उन्मुख प्रोग्रामिंग का अर्थ है वस्तुओं के साथ प्रोग्रामिंग करना। फ़ंक्शनल प्रोग्रामिंग का मतलब फ़ंक्शन के साथ प्रोग्राम करना है। आप एक समस्या को कई उप‑समस्याओं में तोड़ते हैं, जिन्हें आप मॉडल करते हैं के साथ फ़ंक्शन। * उच्च कोटि के फ़ंक्शन अन्य फ़ंक्शन को इनपुट के रूप में स्वीकार करते हैं या अन्य फ़ंक्शन लौटाते हैं वे वापसी मान के रूप में कार्य करते हैं। श्रेणी सिद्धांत संयोजन का सिद्धांत है, और आप इसे समझने के लिए उपयोग करते हैं कैसे अपने फ़ंक्शन को संयोजित करें एक कार्यक्रम में एक शुद्ध फ़ंक्शन का आउटपुट मान केवल इसके इनपुट पैरामीटर पर निर्भर करता है, और यह इसका कोई दुष्प्रभाव नहीं। * एक साइड इफ़ेक्ट वह कार्य है जो कोई फ़ंक्शन बाहरी दुनिया पर करता है। यह यह मानक आउटपुट में एक लॉग या किसी वैश्विक चर के मान में संशोधन हो सकता है। फ़ंक्शनल प्रोग्रामिंग शुद्ध कार्यों के लिए काम करती है, लेकिन यह भी प्रदान करती है इन अशुद्ध फ़ंक्शन को शुद्ध फ़ंक्शन में बदलने के लिए उपकरण। आप एक अशुद्ध फ़ंक्शन को शुद्ध बना सकते हैं प्रभावों को स्थानांतरित करके उन्हें परिणाम मान का भाग * फ़ंक्शनल प्रोग्रामिंग संयोजन का विषय है। त्रुटि प्रबंधन साइड इफ़ेक्ट का एक विशिष्ट मामला है, और कोटलिन आपको उपकरण देता है उन्हें कार्यात्मक रूप से प्रबंधित करने के लिए। === जावा8 को गहराई से समझें: लैम्ब्डा अभिव्यक्तियाँ और फंक्शनल इंटरफ़ेस video::20waNRw6wMA[youtube,list=PLzzeuFUy_Cng0wZhqbnkvWAW0d2fdVfyQ] === श्रेणी सिद्धांत गणितीय श्रेणियों का सिद्धांत: video::LVHoROSF3KA[youtube] === फ़ंक्शन के मूल सिद्धांत ==== अभ्यास 2.1 क्या आप एक फ़ंक्शन का उदाहरण लिख सकते हैं जो अलग-अलग मानों को मैप करता है? + जिसके डोमेन में सीमा में असमान मान होते हैं, जैसे f(b) और f(c) नीचे दिए गए चित्र में? + इसे आज़माएँ, फिर चुनौती प्रोजेक्ट को देखें कि आपने कैसे किया, एक समाधान के लिए। + आप लिंक का पालन करके सलाह और एक स्पष्टीकरण पाएँगे की ओर https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[समाधान, खिड़कियाँ="_blank]. + ==== अभ्यास 2.2 Can you write the inverse function of twice ? + विलोम फलन के लिए डोमेन और श्रेणी क्या हैं? + Check out the challenge project and Appendix B for the solution. [source,kotlin] ---- fun chrono(fn : () -> Unité) : Long ---- [source,kotlin] ---- @Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } } ---- इसे आज़माएँ और अपने उत्तर के साथ जाँचेंhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[हल, windows="_blank].</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2022/0031_memo_design_system_post.html Sun, 9 Jan 2022 00:00:00 +0000 blog/2022/0031_memo_design_system_post.html <div class="sect1"> <h2 id="_उपकरण">उपकरण</h2> <div class="sectionbody"> <div class="dlist"> <div class="title"><strong>चित्रांकन</strong></div> <dl> <dt class="hdlist1"><a href="https://undraw.co/">undraw.co</a></dt> <dd> <p>ओपन सोर्स चित्रण सभी विचारों के लिए जिनकी आप कल्पना कर सकते हैं और बना सकते हैं।</p> </dd> <dt class="hdlist1"><a href="https://absurd.design/">बेतुका.डिज़ाइन</a></dt> <dd> <p>बेतुके चित्र जो समझ में आते हैं।</p> </dd> <dt class="hdlist1"><a href="https://drawkit.com/">drawkit.com</a></dt> <dd> <p>शानदार निःशुल्क चित्र। साप्ताहिक अपडेट।</p> </dd> <dt class="hdlist1"><a href="https://icons8.com/">icons8.com</a></dt> <dd> <p>आइकन, चित्रण, फोटो, संगीत, और डिज़ाइन टूल्स।</p> </dd> <dt class="hdlist1"><a href="https://blush.design/">ब्लश.design</a></dt> <dd> <p>आइकन, चित्रण, फोटो, संगीत और डिज़ाइन टूल</p> </dd> <dt class="hdlist1"><a href="https://www.humaaans.com/">humaaans.com</a></dt> <dd> <p>लोगों के चित्रणों को एक डिज़ाइन लाइब्रेरी के साथ मिलाएँ और मेल खाएँ</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>रंग</strong></div> <dl> <dt class="hdlist1"><a href="https://coolors.co/">coolors.co</a></dt> <dd> <p>अति‑तेज़ रंग स्कीम जेनरेटर!</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>प्रवृत्तियाँ</strong></div> <dl> <dt class="hdlist1"><a href="https://fr.pinterest.com">पिन्टरेस्ट</a></dt> <dd> <p>विचारों की दृश्यात्मक खोज : चित्र, वीडियो, विषयगत संग्रह</p> </dd> <dt class="hdlist1"><a href="https://dribbble.com">ड्रिबल</a></dt> <dd> <p>डिज़ाइनरों के लिए प्लेटफ़ॉर्म जो अपनी रचनाएँ साझा करते हैं और बातचीत करते हैं।</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>UX/UI और डिज़ाइन सिस्टम्स</strong></div> <dl> <dt class="hdlist1"><a href="https://material.io/">गूगल मटीरियल डिज़ाइन</a></dt> <dd> <p>Google का डिज़ाइन सिस्टम एकीकृत और अनुकूलन योग्य उपयोगकर्ता इंटरफ़ेस के लिए।</p> </dd> <dt class="hdlist1"><a href="https://developer.apple.com/design/human-interface-guidelines/">एप्पल मानव इंटरफ़ेस दिशानिर्देश</a></dt> <dd> <p>Apple की सिफ़ारिशें iOS और macOS के लिए सहज एप्लिकेशन डिज़ाइन करने के लिए।</p> </dd> <dt class="hdlist1"><a href="https://www.uxpin.com/">UXPin</a></dt> <dd> <p>डिज़ाइन और सहयोग प्लेटफ़ॉर्म, प्रोटोटाइप और डिज़ाइन सिस्टम बनाने के लिए।</p> </dd> <dt class="hdlist1"><a href="https://www.frontify.com/">Frontify</a></dt> <dd> <p>ब्रांड और डिज़ाइन सिस्टम प्रबंधन प्लेटफ़ॉर्म, संगतता सुनिश्चित करने के लिए।</p> </dd> <dt class="hdlist1"><a href="https://designsystemsrepo.com/design-systems/">डिज़ाइन सिस्टम्स रिपॉज़िटरी</a></dt> <dd> <p>संसाधनों और डिज़ाइन सिस्टम के उदाहरणों का संग्रह, प्रेरणा के लिए।</p> </dd> </dl> </div> <div class="paragraph"> <p>फ़्रंटएंड डेवलपमेंट</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><a href="https://htmlcheatsheet.com" target=""_blank">htmlcheatsheet.com</a></dt> <dd> <p>HTML चेटशीट</p> </dd> <dt class="hdlist1"><a href="https://fontawesome.com" target=""_blank">fontawesome.com</a></dt> <dd> <p>आइकन लाइब्रेरी</p> </dd> <dt class="hdlist1"><a href="https://www.toptal.com/designers/htmlarrows/symbols/" target=""_blank">toptal.com/designers/htmlarrows/symbols</a></dt> <dd> <p>HTML में स्वदेशी आइकन</p> </dd> <dt class="hdlist1"><a href="https://css-tricks.com/">CSS-Tricks</a></dt> <dd> <p>CSS के लिए आवश्यक, लेख, ट्यूटोरियल और आधुनिक फ्रंटएंड टिप्स के साथ।</p> </dd> <dt class="hdlist1"><a href="https://www.frontendmentor.io/">फ़्रंटएंड मेंटर</a></dt> <dd> <p>वास्तविक परियोजनाओं पर आधारित फ्रंटएंड कोडिंग चुनौतियाँ जो आपके कौशल को बेहतर बनाती हैं।</p> </dd> <dt class="hdlist1"><a href="https://dev.to/">Dev.to</a></dt> <dd> <p>विकासकों का समुदाय लेख, ट्यूटोरियल और परियोजनाएँ साझा करने के लिए।</p> </dd> <dt class="hdlist1"><a href="https://codepen.io/">CodePen</a></dt> <dd> <p>ऑनलाइन कोड संपादक और कोड स्निपेट एवं डेमो साझा करने के लिए समुदाय</p> </dd> </dl> </div> <div class="paragraph"> <p><strong>AI द्वारा सहायता प्राप्त फ्रंटएंड विकास</strong></p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><a href="https://v0.dev/">v0.dev</a></dt> <dd> <p>v0 प्राकृतिक भाषा विवरणों को कोड और उपयोगकर्ता इंटरफ़ेस में परिवर्तित करता है।</p> </dd> <dt class="hdlist1"><a href="https://uizard.io/">Uizard</a></dt> <dd> <p>Uizard, मॉकअप (इमेज, स्केच) को HTML, CSS और React कोड में बदलने पर केंद्रित है।</p> </dd> <dt class="hdlist1"><a href="https://www.usegalileo.ai/explore">usegalileo.ai</a></dt> <dd> <p>Galileo AI आपको प्राकृतिक भाषा में इंटरफ़ेस का वर्णन करने की अनुमति देता है, और AI संपादन योग्य Figma डिज़ाइन उत्पन्न करता है।</p> </dd> <dt class="hdlist1"><a href="https://play.teleporthq.io/">TeleportHQ</a></dt> <dd> <p>TeleportHQ एक लो‑कोड फ्रंट‑एंड विकास प्लेटफ़ॉर्म है जो कृत्रिम बुद्धिमत्ता (AI) का उपयोग करके आपको दृश्य रूप से वेबसाइट्स बनाने और तैनात करने में मदद करता है।</p> </dd> </dl> </div> </div> </div> https://cheroliv.com/blog/2020/0029_kubernetes_microk8s_docker_premiers_pas_post.html Tue, 3 Nov 2020 00:00:00 +0000 blog/2020/0029_kubernetes_microk8s_docker_premiers_pas_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://microk8s.io/docs/">MicroK8s का आधिकारिक दस्तावेज़</a><br></p> </div> </div> </div> <div class="sect3"> <h4 id="_माइक्रोk8s_पैकेज_की_स्थापना">माइक्रोk8s पैकेज की स्थापना:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html Mon, 28 Sep 2020 00:00:00 +0000 blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html <div class="sect3"> <h4 id="_gradle_kotlin_dsl">Gradle-Kotlin-DSL:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0027_kotlin_not_implemented_exception_not_implemented_error_post.html Sun, 27 Sep 2020 00:00:00 +0000 blog/2020/0027_kotlin_not_implemented_exception_not_implemented_error_post.html <div class="paragraph"> <p>NotImplementedException NotImplementedError, परीक्षणों के लिए उपयोगिता, यह जानने में मदद करता है, कि हम कहाँ हैं, और विफलता का कारण।<br> अभी तक लागू नहीं किया गया, सही अपवाद उठाने की अनुमति देता है<br> Il y a :<br> <a href="http://commons.apache.org/proper/commons-lang/javadocs/api-release/org/apache/commons/lang3/NotImplementedException.html">org.apache.commons.lang3.NotImplementedException</a><br> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-not-implemented-error/">kotlin.NotImplementedError</a>+</p> </div> https://cheroliv.com/blog/2020/0026_untar_post.html Sat, 26 Sep 2020 00:00:00 +0000 blog/2020/0026_untar_post.html <div class="sect3"> <h4 id="_लिंक_interserver_net">लिंक: <a href="https://www.interserver.net/tips/kb/extract-tar-gz-files-using-linux-command-line/">interserver.net</a></h4> </div> https://cheroliv.com/blog/2020/0025_gradle_rejouer_les_tests_meme_lorsque_les_tests_sont_UP-TO-DATE_post.html Fri, 25 Sep 2020 00:00:00 +0000 blog/2020/0025_gradle_rejouer_les_tests_meme_lorsque_les_tests_sont_UP-TO-DATE_post.html https://cheroliv.com/blog/2020/0024_docker_n_installe_pas_l_application_mais_tire_la_plutot_post.html Thu, 24 Sep 2020 00:00:00 +0000 blog/2020/0024_docker_n_installe_pas_l_application_mais_tire_la_plutot_post.html <div class="sect3"> <h4 id="_स्रोत_hackernoon_com">स्रोत: <a href="https://hackernoon.com/dont-install-postgres-docker-pull-postgres-bee20e200198">hackernoon.com</a></h4> </div> https://cheroliv.com/blog/2020/0023_gherkin_en_francais_post.html Wed, 23 Sep 2020 00:00:00 +0000 blog/2020/0023_gherkin_en_francais_post.html https://cheroliv.com/blog/2020/0022_gradle_cli_surcharger_un_parametre_post.html Tue, 22 Sep 2020 00:00:00 +0000 blog/2020/0022_gradle_cli_surcharger_un_parametre_post.html <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- ---- $ ./gradlew -Pparam_component=CUSTOM ---- ----</code></pre> </div> </div> https://cheroliv.com/blog/2020/0021_memo_git_post.html Mon, 21 Sep 2020 00:00:00 +0000 blog/2020/0021_memo_git_post.html <div class="sect3"> <h4 id="_स्रोत">स्रोत:</h4> <div class="paragraph"> <p>*https://xenovation.com/blog/source-control-management/git/how-to-change-remote-git-repository[विदेशी नवाचार] *https://intellipaat.com/community/3102/git-show-remote-url-how-can-i-determine-the-url-that-a-local-git-repository-was-originally-cloned-from[intellipaat]</p> </div> </div> <div class="sect3"> <h4 id="_गिट_में_रिमोट_रिपॉजिटरी_बदलें">गिट में रिमोट रिपॉजिटरी बदलें</h4> <div class="paragraph"> <p>वर्तमान रिमोट रिपॉज़िटरी का URL प्रदर्शित करें:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0021_aspirer_depuis_une_URL_post.html Sun, 20 Sep 2020 00:00:00 +0000 blog/2020/0021_aspirer_depuis_une_URL_post.html <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- ---- $ wget -r -k -np http://site.com/docs/manual/ ---- लक्ष्य फ़ोल्डर सेट करने के लिए, -P तर्क जोड़ें और फिर पथ दें। ----</code></pre> </div> </div> https://cheroliv.com/blog/2020/0020_creer_un_disk_bootable_post.html Sat, 19 Sep 2020 00:00:00 +0000 blog/2020/0020_creer_un_disk_bootable_post.html <div class="sect3"> <h4 id="_लिंक_etcher">लिंक: <a href="https://www.balena.io/etcher/">etcher</a></h4> </div> https://cheroliv.com/blog/2020/0019_dezipper_en_CLI_dans_un_dossier_cible_post.html Fri, 18 Sep 2020 00:00:00 +0000 blog/2020/0019_dezipper_en_CLI_dans_un_dossier_cible_post.html <div class="sect3"> <h4 id="_लिंक_askubuntu">लिंक: <a href="https://askubuntu.com/questions/86849/how-to-unzip-a-zip-file-from-the-terminal">askubuntu</a></h4> <div class="paragraph"> <p>यदि आप किसी विशेष लक्ष्य फ़ोल्डर में निकालना चाहते हैं, तो आप उपयोग कर सकते हैं : <code>` $ unzip फ़ाइल.zip -d लक्ष्य_फ़ोल्डर </code>` यदि स्रोत और गंतव्य निर्देशिकाएँ समान हैं, तो आप बस कर सकते हैं: <code>` $ अनज़िप़ करें फ़ाइल.zip </code>`</p> </div> </div> https://cheroliv.com/blog/2020/0018_Afficher_la_somme_des_tailles_de_fichier_dans_la_liste_des_r%C3%A9pertoires_post.html Thu, 17 Sep 2020 00:00:00 +0000 blog/2020/0018_Afficher_la_somme_des_tailles_de_fichier_dans_la_liste_des_r%C3%A9pertoires_post.html <div class="sect3"> <h4 id="_लिंक_stackexchange">लिंक: <a href="https://unix.stackexchange.com/questions/72661/show-sum-of-file-sizes-in-directory-listing">stackexchange</a></h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code>---- ---- $ du -ach --exclude "./.*" /home/troll/ ---- ----</code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0017_detruire_une_branch_sur_github_post.html Wed, 16 Sep 2020 00:00:00 +0000 blog/2020/0017_detruire_une_branch_sur_github_post.html <div class="sect3"> <h4 id="_गिटहब_पर_एक_ब्रांच_हटाना">गिटहब पर एक ब्रांच हटाना</h4> </div> <div class="sect3"> <h4 id="_लिंक_gist">लिंक: <a href="https://gist.github.com/cheroliv/921a13ed23ae6d4d66af8d43dd536987">gist</a></h4> </div> https://cheroliv.com/blog/2020/0016_asciidoc_markdown_memo_post.html Tue, 15 Sep 2020 00:00:00 +0000 blog/2020/0016_asciidoc_markdown_memo_post.html <div class="paragraph"> <div class="title">क्यों asciidoc या markdown ? यहाँ मैं asciidoc की ओर बढ़ रहा हूँ, क्योंकि मेरे पास पहले से कुछ टिकट asciidoc में लिखे हुए हैं।<br></div> <p>Asciidoc एक मार्कअप भाषा है जो सामग्री बनाने की अनुमति देता है, एक लेआउट प्रदान करके जो मानव के लिए पढ़ने योग्य पाठ को बनाए रखता है।<br> यह साधारण सामग्री के लिए अतिरिक्त सॉफ़्टवेयर के बिना पाठ प्रसंस्करण को मानक बनाने का एक तरीका है।</p> </div> <div class="ulist"> <div class="title">कड़ियाँ :</div> <ul> <li> <p><a href="https://blog.oxiane.com/2018/06/13/asciidoc-documentation-as-code/" target=""_blank">@jmdoudoux पर blog.oxiane.com</a>[asciidoc]</p> </li> <li> <p><a href="https://powerman.name/doc/asciidoc" target=""_blank">powerman.name</a>[asciidoc]</p> </li> </ul> </div> https://cheroliv.com/blog/2019/0013_how-to-install-a-deb-file_post.html Mon, 19 Aug 2019 00:00:00 +0000 blog/2019/0013_how-to-install-a-deb-file_post.html <div class="paragraph"> <p>एक .deb फ़ाइल से कमांड लाइन के माध्यम से एक डेबियन पैकेज स्थापित करने के लिए।<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo dpkg -i /chemin/du/fichier/deb/</code></pre> </div> </div> <div class="paragraph"> <p>यहाँ देखिए के लिएhttps://unix.stackexchange.com/questions/159094/how-to-install-a-deb-file-by-dpkg-i-or-by-apt[संदर्भ]+</p> </div> https://cheroliv.com/blog/2019/0011_gradle_configuration_ide_jbake_content_post.html Fri, 16 Aug 2019 00:00:00 +0000 blog/2019/0011_gradle_configuration_ide_jbake_content_post.html <div class="paragraph"> <p>एक Gradle बिल्ड टूल द्वारा संचालित एप्लिकेशन प्रोजेक्ट में<br> सभी फ़ोल्डरों पर दृश्यता होना अधिक सुखद होता है<br> एप्लिकेशन के विकास में भागीदार,<br> जैसे संसाधन फ़ोल्डर जो नहीं हैं<br> पथों में परंपरागत रूप से।<br> उदाहरण के लिए मैं चाहता हूँ कि फ़ोल्डर src/jbake,<br> यह ‘resource folder’ के रूप में दृश्यमान हो,<br> इसे प्रोजेक्ट की कॉन्फ़िगरेशन में दर्ज करके किया जा सकता है,<br> IDE के विज़र्ड्स में. हालाँकि यह विकल्प अगले रीलोड पर सहेजा नहीं जाता<br> IDE में Gradle प्रोजेक्ट. इस कॉन्फ़िगरेशन को स्थायी रूप से लागू करने के लिए<br> समाधान स्रोत पथों की कॉन्फ़िगरेशन को ओवरराइड करना है<br> बिल्ड.gradle कॉन्फ़िगरेशन फ़ाइल में जैसे लाइन 18, 19, 20 और 21 पर:<br> build.gradle और</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">plugins { id "java" id "groovy" id "org.jbake.site" version "5.0.0" id "org.ajoberstar.git-publish" version "2.1.1" } repositories { mavenCentral() jcenter() } group project_group version project_version sourceSets { main { java { srcDirs = [] } groovy { srcDirs =["src/main/java", "src/main/groovy"] } resources { srcDirs =[ "src/main/resources", "src/jbake"//in order to get site src content in the IDE ] } } test { java { srcDirs = [] } groovy { srcDirs =["src/test/java", "src/test/groovy"] } } } test { useJUnitPlatform() } configurations { ivy } dependencies { ivy "org.apache.ivy:ivy:$ivy_version" implementation "org.codehaus.groovy:groovy-all:$groovy_version" implementation "org.asciidoctor:asciidoctor-java-integration:$asciidoctor_java_integration_version" implementation "org.freemarker:freemarker:$freemarker_version" testImplementation "org.junit.jupiter:junit-jupiter-api:$junit5_version" testRuntimeOnly "org.junit.jupiter:junit-jupiter-engine:$junit5_version" } gitPublish { repoUri = github_pages_blog_repository branch = git_branch contents { from(file(jbake_content_from)) { into jbake_content_to } } } tasks.withType(GroovyCompile) { groovyClasspath += configurations.ivy }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0010_gradle_groovy_script_grab_ivy_configuration_post.html Wed, 14 Aug 2019 00:00:00 +0000 blog/2019/0010_gradle_groovy_script_grab_ivy_configuration_post.html <div class="paragraph"> <p>टिकट का विषय Gradle बिल्ड स्क्रिप्ट की कॉन्फ़िगरेशन है।<br> मुझे एक ग्रूवी स्क्रिप्ट का उपयोग करने में सक्षम होना चाहिए, किसी संदर्भ की आवश्यकता के बिना।<br> उस Gradle परियोजना में जिसमें मैंने इसे संलग्न किया।<br> मैं इस ग्रूवी स्क्रिप्ट को Gradle के बाहर चलाने में सक्षम होना चाहता हूँ।<br> बाहरी निर्भरता पुनर्प्राप्ति के ivy एनोटेशन के बिना<br> वे प्रदर्शन या संकलन समस्या खड़ी नहीं करते<br> ग्रैडल बिल्ड स्क्रिप्ट का<br> कन्फ़िगरेशन को समझाने के लिए मैं दो स्क्रिप्ट पर निर्भर हूँ:<br> एक Gradle बिल्ड स्क्रिप्ट और एक Groovy स्क्रिप्ट.<br> ग्रूवी स्क्रिप्ट में लाइन 2 के प्रारम्भ में है,<br> बाह्य निर्भरता को खींचने का एक निर्देश<br> ivy निर्भरता प्रबंधक की मदद से.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-Groovy" data-lang="Groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import org.apache.commons.io.FileUtils static String getSeparator() { System.getProperty("file.separator") } String from = "${System.getProperty("user.home")}${separator}.config${separator}transmission${separator}torrents" String to = "${System.getProperty("user.home")}${separator}Documents${separator}torrents_completed" File fromDlDir = new File("${System.getProperty("user.home")}${separator}Téléchargements") File fromDir = new File(from) File toDir = new File(to) Collection<File> torrentFiles = FileUtils.listFiles( fromDir, ["torrent"] as String[], false) torrentFiles.addAll(FileUtils.listFiles( fromDlDir, ["torrent", "torrent.added"] as String[], false)) torrentFiles.empty ?: torrentFiles.each { it -> FileUtils.copyFileToDirectory(it, toDir) } println torrentFiles.size()</code></pre> </div> </div> <div class="paragraph"> <p>build.gradle फ़ाइल में, अब देखते हैं कैसे सामंजस्य बिठाएं<br> दो निर्भरता प्रबंधक, Ivy और Gradle. दोनों के बीच का समझौता पंक्तियों में होता है :<br> 26, 30, 37, 38 et 39<br> इस प्रकार मैं अपने ग्रूवी स्क्रिप्ट को मैन्युअली चला सकता हूँ<br> और Gradle संकलन @Grab द्वारा बाधित नहीं है।<br> ग्रोवी स्क्रिप्ट की निर्भरताओं को Gradle में प्रदान नहीं किया जाना चाहिए।<br> लेकिन मैं Gradle से Groovy स्क्रिप्ट नहीं चला सकता।<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-Groovy" data-lang="Groovy">plugins { id "java" id "groovy" } repositories { mavenCentral() jcenter() } sourceSets { main { java { srcDirs = [] } groovy { srcDirs =["src/main/java", "src/main/groovy"] } resources { srcDirs =["src/main/resources"] } } test { java { srcDirs = [] } groovy { srcDirs =["src/test/java", "src/test/groovy"] } } } configurations { ivy } dependencies { ivy "org.apache.ivy:ivy:$ivy_version" implementation "org.codehaus.groovy:groovy-all:$groovy_version" } tasks.withType(GroovyCompile) { groovyClasspath += configurations.ivy }</code></pre> </div> </div> <div class="paragraph"> <p>टिकट का संदर्भ परhttps://stackoverflow.com/a/18174033/837404[स्टैकओवरफ़्लो]</p> </div> https://cheroliv.com/blog/2019/0009_groovy_algebre_pgcd_ppmc_post.html Tue, 13 Aug 2019 00:00:00 +0000 blog/2019/0009_groovy_algebre_pgcd_ppmc_post.html <div class="sect2"> <h3 id="_पीपीएमसी">पीपीएमसी</h3> <div class="paragraph"> <p><a href="https://fr.wikipedia.org/wiki/Plus_petit_commun_multiple">wiki PPMC या लघुत्तम समापवर्तक</a></p> </div> <div class="paragraph"> <p>AlgebraUtils.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">package com.cheroliv.misc import groovy.transform.CompileStatic @CompileStatic class AlgebraUtils { /** * Great common divisor * Plus grand commun diviseur(pgcd) * Great Common Divisor * @param a * @param b * @return */ static Integer gcd(Integer a, Integer b) { !b ? a : gcd(b, a % b) } /** * Least common multiple * Plus petit commun multiplicateur(ppmc) * @param a * @param b * @return */ static BigInteger lcm(Integer a, Integer b) { (a * b / gcd(a, b)) as BigInteger } static void main(String... args) { Integer a = 96 Integer b = 28 println "gcd($a, $b) = ${gcd(a, b)}" a = 790 b = 990 println "lcm($a, $b) = ${lcm(a, b)}" } }</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम:</p> </div> <div class="paragraph"> <p>gcd(96, 28) = 4 ल.स.गु.(790, 990) = 78210</p> </div> </div> https://cheroliv.com/blog/2019/0008_bash_find_trouver_fichiers_par_extension_post.html Mon, 12 Aug 2019 00:00:00 +0000 blog/2019/0008_bash_find_trouver_fichiers_par_extension_post.html <div class="paragraph"> <p>मैं नाम के मानदंडों के अनुसार फ़ाइलों की खोज कर रहा हूँ: फ़ाइलों की सूची जिनका एक्सटेंशन .h और .cpp है</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' + +</code></pre> </div> </div> <div class="paragraph"> <p>फ़ाइलों की सूची जिनका एक्सटेंशन .h और .cpp है<br> परिणाम फ़ाइल list_of_txt_files.list में सहेजा जाता है</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' -print > list_of_txt_files.list</code></pre> </div> </div> <div class="paragraph"> <p>मैं .chm एक्सटेंशन वाले फ़ाइलों की सूची खोज रहा हूँ<br> और मैं इस सूची को नष्ट कर देता हूँ।<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ find . -name "*.chm" -type f -delete</code></pre> </div> </div> https://cheroliv.com/blog/2019/0015_projet_avec_methodologie_en_cascade_post.html Thu, 1 Aug 2019 00:00:00 +0000 blog/2019/0015_projet_avec_methodologie_en_cascade_post.html <div class="sect2"> <h3 id="_विश्लेषण_करना_और_आवश्यकताएँ_एकत्र_करना">विश्लेषण करना और आवश्यकताएँ एकत्र करना</h3> </div> <div class="sect2"> <h3 id="_परियोजना_प्रबंधन_को_परिभाषित_करें">परियोजना प्रबंधन को परिभाषित करें</h3> <div class="imageblock"> <div class="content"> <img src="../../diagram/definir_projet.png" alt="definir la gestion de projet"> </div> </div> <div class="imageblock"> <div class="content"> <img src="../../img/triangle_qcd.png" alt="triangle_qcd"> </div> </div> </div> <div class="sect2"> <h3 id="_परियोजना_को_परिप्रेक्ष्य_में_रखना">परियोजना को परिप्रेक्ष्य में रखना</h3> </div> <div class="sect2"> <h3 id="_विश्लेषण_करें_और_आवश्यकताएँ_एकत्र_करें">विश्लेषण करें और आवश्यकताएँ एकत्र करें</h3> <div class="sect3"> <h4 id="_लक्ष्य_और_प्राप्तियों_को_तैयार_करें">लक्ष्य और प्राप्तियों को तैयार करें</h4> </div> </div> <div class="sect2"> <h3 id="_एक_पढ़ने_की_ग्रिड_को_डिक्रिप्ट_करें">एक पढ़ने की ग्रिड को डिक्रिप्ट करें</h3> </div> <div class="sect1"> <h2 id="_अपनी_टीम_के_साथ_परियोजना_को_फ्रेम_करें">अपनी टीम के साथ परियोजना को फ्रेम करें</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="../../img/conductor.png" alt="chef d’orchestre"> </div> </div> <div class="sect2"> <h3 id="_विशेषज्ञों_से_परामर्श_करके_समाधान_खोजें">विशेषज्ञों से परामर्श करके समाधान खोजें</h3> </div> <div class="sect2"> <h3 id="_एक_परियोजना_प्रबंधन_पद्धति_चुनें">एक परियोजना प्रबंधन पद्धति चुनें</h3> <div class="imageblock"> <div class="content"> <img src="../../img/cascading_planning.png" alt="planning en cascade"> </div> </div> <div class="imageblock"> <div class="content"> <img src="../../img/Cycle_V_details.jpeg" alt="cycle en V"> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2019/0014_list_all_databases_in_postgresql_post.html Tue, 30 Jul 2019 00:00:00 +0000 blog/2019/0014_list_all_databases_in_postgresql_post.html <div class="paragraph"> <p>मुझे इंस्टॉल करने का मन नहीं है।https://www.pgadmin.org/[pgAdmin] ou <a href="http://phppgadmin.sourceforge.net/">phppgadmin</a> जबकि सब कुछ कमांड लाइन पर मौजूद है।<br> इसके लिए हमें टर्मिनल खोलना होगा और पोस्टgres उपयोगकर्ता के रूप में लॉग इन करना होगा।<br> postgres उपयोगकर्ता ही डिफ़ॉल्ट रूप से psql एप्लिकेशन लॉन्च करने का अधिकार रखता है, जो कमांड-लाइन क्लाइंट है। (<a href="https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande">कमांड लाइन इंटरफ़ेस</a>) postgresql,<br> कमांड लाइन से टर्मिनल के माध्यम से ऑनलाइन डेटाबेस से संवाद करने में सक्षम होना<br> जुड़ने के लिए, टर्मिनल खोलें और यह टाइप करें:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo -i -u postgres</code></pre> </div> </div> <div class="paragraph"> <p>PostgreSQL कमांड प्रॉम्प्ट तक सीधे पहुँचने के लिए, यह टाइप करें :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ sudo -i -u postgres psql</code></pre> </div> </div> <div class="paragraph"> <p>एक postgresql इंस्टेंस के डेटाबेस को लिस्ट करने के लिए, यहाँ कमांड है :<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-SQL" data-lang="SQL">postgres=# \l</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम:</p> </div> <div class="paragraph"> <p>डेटाबेसों की सूची नाम | स्वामी | एन्कोडिंग | संरेखण | अक्षर प्रकार | पहुँच के अधिकार</p> </div> <div class="paragraph"> <p>fiber | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech<br> | | | | | tech=CTc/tech fiberdev | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech<br> | | | | | tech=CTc/tech fiberweb | tech | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =Tc/tech<br> | | | | | tech=CTc/tech postgres | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | template0 | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres<br> | | | | | postgres=CTc/postgres template1 | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres<br> | | | | | postgres=CTc/postgres (blank)</p> </div> <div class="paragraph"> <p>q दबाएं परिणामों के प्रदर्शन से बाहर निकलने के लिए<br> <br> postgresl के उदाहरण के स्कीमा की सूची बनाने के लिए</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-sql" data-lang="sql">postgres=# SELECT schema_name FROM information_schema.schemata;</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम</p> </div> <div class="paragraph"> <p>सार्वजनिक जानकारी_स्कीमा pg_catalog pg_toast_temp_1 pg_temp_1 pg_toast (6 लाइनों)</p> </div> <div class="paragraph"> <p>ou</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-sql" data-lang="sql">postgres=# SELECT nspname FROM pg_catalog.pg_namespace;</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम</p> </div> <div class="paragraph"> <p>pg_toast pg_temp_1 pg_toast_temp_1 pg_catalog सूचना_स्कीमा सार्वजनिक (6 lignes)</p> </div> https://cheroliv.com/blog/2019/0007_groovy_rename_recursively_files_post.html Mon, 29 Jul 2019 00:00:00 +0000 blog/2019/0007_groovy_rename_recursively_files_post.html <div class="paragraph"> <p>मेरे टीवी के वीडियो प्लेयर की अपनी विधि है पार करने की<br> एक फ़ाइल से दूसरे फ़ाइल तक निरंतर पढ़ते हुए<br> और उसका प्लेबैक मोड 1…​..mp4 से 10…​.mp4 तक जाने का है,<br> और नहीं 1…​mp4 से 2…​.mp4 तक।<br> समस्या यह है कि लगभग 900 फ़ाइलें और फ़ोल्डर हैं।<br> बिंगो ग्रूवी को मैनिपुलेट करने के लिए एक उत्कृष्ट उपयोग का मामला<br> फ़ाइलें, नाम बदलना, फ़ाइल नाम में पैटर्न खोज<br> या फ़ाइल।<br> Ici le but est de changer les noms commençant par<br> एक अंक और जिसका नाम का दूसरा अक्षर<br> यह एक संख्या नहीं है, मैं इस नाम के प्रारम्भ में एक 0 जोड़ दूँगा<br></p> </div> <div class="paragraph"> <p>दो अंक से शुरू होने के लिए फ़ाइलों का नाम बदलें.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy /** * get a crossplateform separator * @return */ static String getSeparator() { System.getProperty("file.separator") } /** * rename file * @param file * @param newName * @return the renamed file */ static File rename(File file, String newName) { assert file.renameTo(file .parentFile.path + getSeparator() + newName) new File(file .parentFile.path + getSeparator() + newName) } String rootFolderPath = System.getProperty("user.home") + "/Bureau/ng-courses/Udemy - Angular 7 " + "(formerly Angular 2) - The Complete Guide" File rootFolder = new File(rootFolderPath) assert rootFolder.exists() assert rootFolder.directory assert rootFolder.canRead() List<File> dirList = new ArrayList<>() //Adding rootFolder in dirList // just in case there is some files in it dirList.add(rootFolder) //looping to get list of directories //recursively inside rootFolder rootFolder.traverse { File file -> !file.directory ?: dirList.add(file) } //looping through dirList //to rename directories filling criterias for (int i = dirList.size() - 1; i >= 0; i--) { Character[] chars = dirList.get(i).name.chars !(chars[0].digit && !chars[1].digit) ?: dirList.set(i, rename(dirList.get(i), "0${dirList.get(i).name}")) if (dirList.get(i).directory) { //looping through directory //to rename file filling criterias dirList.get(i).listFiles().each { File f -> Character[] cs = f.name.chars !(cs[0].digit && !cs[1].digit) ?: rename(f, "0${f.name}") } } }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0006_groovy_find_files_copy_to_post.html Fri, 19 Jul 2019 00:00:00 +0000 blog/2019/0006_groovy_find_files_copy_to_post.html <div class="paragraph"> <p>इस स्क्रिप्ट का उद्देश्य फ़ाइलों की खोज करना है,<br> एक मूल निर्देशिका से; चयन प्राप्त करें<br> एक सूची में। अंत में इस फ़ाइल सूची की प्रतिलिपि बनाएँ<br> एक गंतव्य निर्देशिका में यह Groovy में</p> </div> <div class="paragraph"> <p>findCopyTo.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import groovy.io.FileType import org.apache.commons.io.FileUtils /** * un separateur OS independant * @return */ static String getSep() { System.getProperty("file.separator") } /** * la liste des fichiers dont le titre contient un item * de la liste des motifs * * @param path * @param motifs * @return la liste des chemins complet de fichiers */ static List<String> findFilesContainingMotifs( String path, List<String> motifs) { List<String> filePathResultList = new ArrayList<>() new File(path) .eachFileRecurse(FileType.FILES) { if (it.name.toLowerCase().contains('cucumber')) { filePathResultList.add it.path } } filePathResultList } /** * copy vers la liste des fichiers * @param files * @param to */ static void copyFilesTo(List<String> files, String to) { File toDirDest = new File(to) files.each { String filepath -> File file = new File(filepath) //si le dernier caractere de to n'est pas un separateur // alors ajoute le a la chaine (to.substring(to.length() - 1) == sep) ?: to.concat(sep) if (to + file.name != filepath) { FileUtils.copyFileToDirectory(file, toDirDest) file.delete() } } } /** * la list des arguments */ String userName = System.getProperty("user.name") List<String> motifs = ['cucumber'] String path = "/media/$userName/320/Books/" String to = "/media/$userName/320/Books/bdd/" /** * lappel aux methodes */ copyFilesTo(findFilesContainingMotifs(path, motifs), to) //affiche moi les fichiers déplacés findFilesContainingMotifs(path, motifs).each { println it }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0005_groovy_manipulation_files_post.html Thu, 18 Jul 2019 00:00:00 +0000 blog/2019/0005_groovy_manipulation_files_post.html <div class="paragraph"> <p>यहाँ मैं एक बिल्ड प्रोजेक्ट में एक प्रॉपर्टी के लोडिंग पर ध्यान केंद्रित करूँगा।https://docs.gradle.org/current/userguide/userguide.html[gradle]<br> कोड में उपलब्ध न होने पर<br> यह प्रॉपर्टी ~/.gradle/ फ़ोल्डर की gradle.properties फ़ाइल में परिभाषित की जाएगी।<br> ~ HOME_PATH प्रतीकात्मक चर का एक शॉर्टकट है जो सत्र उपयोगकर्ता मूल का प्रतिनिधित्व करता है: वहhttps://fr.wikipedia.org/wiki/R%C3%A9pertoire_personnel[व्यक्तिगत निर्देशिका].<br> एक ही तरह से एक बिल्ड प्रोजेक्ट मेंhttps://maven.apache.org/guides/index.html[maven], के साथ `~/.m2/settings.xml इस स्क्रिप्ट का उद्देश्य उल्लिखित पैटर्न से मेल खाने वाले फ़ाइलों को हटाना है।<br> चर strCriteria में. इसके लिए मैं उनका उपयोग करूँगाhttps://fr.wikipedia.org/wiki/Fermeture_(informatique)[बंद]: हर, सभी खोजें, एकत्रित करें<br> साथ में StringTokenizer क्लास जो मेरे मानदंड स्ट्रिंग को टुकड़ों में विभाजित करेगा<br> इनकी एक स्ट्रिंग्स की सूची प्राप्त करने के लिए। यदि मेरे साफ़ करने वाले फ़ोल्डर की किसी फ़ाइल के नाम में कोई पैटर्न मौजूद हो<br> तो वह परिणाम सूची में जोड़े जाने से नाश का उम्मीदवार होगा।<br> और अंतिम पंक्ति पर एक छोटा उदाहरणhttps://en.wikipedia.org/wiki/Elvis_operator[एल्विस ऑपरेटर]<br> filemanip.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy //Mes criteres de selection des fichiers à detruire String strCriteria = "Dummies Dummie ajax Objective-C Windows blackberry " + "wordpress joomla ios c# f# rails ruby flex asp flash Dreamweaver adobe " + "CoffeeScript c++ .chm .epub .rar .zip .tar drupal drupals .net php javascript " + ".js iphone ipad js _js facebook gwt vaadin linq python py zope window " + "3D scala gaming active_directory tomcat jboss glassfish microsoft 2d " + "lego blogger blog cocoa dojo dom dotnetnuke eclipse .gz unity sharepoint " + ".tgz iwork filemaker .doc .txt" //repertoire personnel String userDir = System.getProperty("user.home") //un separateur de chemin crossplatform String sep = System.getProperty("file.separator") //la variable symbolique String sym_books_vrac_path = "books_vrac_path" //le chemin de mon fichier gradle.properties hors projet String propertiesFilePath = userDir .concat("${sep}.gradle${sep}gradle.properties") File propertiesFile = new File(propertiesFilePath) //je m'aassure que le fichier existe et que ce n'est pas un dossier assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() //on boucle avec un inpustream sur le fichier //gradle.properties pour peupler ma variable gradleProperties propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } //le chemin du dossier books_vrac est la valeur de notre clé books_vrac_path String pathVracDir = gradleProperties.get(sym_books_vrac_path) //j'ai récuperé tous ces livres en tapant cette commande dans le terminal //wget -m -np -c -R "index.html*" "http://the-eye.eu/public/Books/IT%20Various/" //on ouvre le dossier dont le chemin est dans la variable pathVracDir // on s'assure qu'il existe et que c'est un dossier File vracDir = new File(pathVracDir) assert vracDir.exists() && vracDir.directory //separer les élèments de ma liste de critère StringTokenizer tokenizer = new StringTokenizer(strCriteria) //la liste de critere List<String> criteriaList = new ArrayList<>() //j'itère sur les tokens et je construit ma liste de token, // mot clef critère de recherche tokenizer.each { String it -> criteriaList.add(it.toLowerCase()) } //je collect tous les noms de fichier dans le dossier List<String> fileNameList = vracDir .listFiles() .collect { File it -> it.directory ?: it.name } // je collect les noms de fichier qui contiendraient un des criteres List<String> resultList = fileNameList.findAll { String name -> criteriaList.findAll { String crit -> name.toLowerCase().contains(crit) } } // je parcours ma liste de résultat pour les effacer resultList.each { String fileName -> assert new File(vracDir.path + sep + fileName).delete() } println fileNameList.size() println resultList.size() resultList.empty ?: println(vracDir.path + sep + resultList.first())</code></pre> </div> </div> https://cheroliv.com/blog/2019/0004_groovy_replace_string_load_properties_post.html Wed, 17 Jul 2019 00:00:00 +0000 blog/2019/0004_groovy_replace_string_load_properties_post.html <div class="paragraph"> <p>यहाँ एक काम करने वाला ग्रूवी कोड का टुकड़ा है,<br> एक String में एक अक्षर अनुक्रम के सभी उदाहरणों को बदलने के लिए<br> और एक .properties फ़ाइल को एक properties ऑब्जेक्ट में लोड करें।<br> एक स्ट्रिंग में कमांड निष्पादित करें।<br> replaceTextinFile.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy println System.getProperty("user.home") static String getSeparator_() { System.getProperty("file.separator") } String separator = separator_ String path = System.getProperty("user.home") .concat("${separator}.gradle" + separator + "gradle.properties") File propertiesFile = new File(path) assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } String user_name = gradleProperties.getProperty("user_name") String text String resultText text = new File("${System.getProperty("user.home")}" + separator + "src" + separator + "cheroliv.github.io" + separator + "src" + separator + "main" + separator + "resources" + separator + "eco_space.txt").text String to = separator + "media" + separator + "${user_name}" + separator + "320" + separator + "videoCours" + separator String from = "${System.getProperty("user.home")}" + separator + "p2p" + separator resultText = text.replace(to, from) println resultText //execute command line in a string println "rsync -avr ${resultText} ${to}".execute().text</code></pre> </div> </div> https://cheroliv.com/blog/2019/0003_groovy_char_ascci_post.html Wed, 10 Jul 2019 00:00:00 +0000 blog/2019/0003_groovy_char_ascci_post.html <div class="paragraph"> <p>यहाँ एक कार्यात्मक ग्रूवी कोड का टुकड़ा है, जो एक टेक्स्ट फ़ाइल बनाता है,<br> ASCII तालिका के पहले 256 पढ़ने योग्य अक्षर के साथ<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-groovy" data-lang="groovy">#!/usr/bin/env groovy import java.nio.charset.StandardCharsets List<Character> chars = new ArrayList<>() int j = 0 Character jumpLine = '\n' 256.times { Integer idx -> if (Character.isAlphabetic(idx) || Character.isDigit(idx)) { if (j % 10 == 0 && j != 0) { chars.add(jumpLine) chars.add(idx as char) } else chars.add(idx as char) j++ } } String seperator = System.getProperty("file.separator") String path = "${System.getProperty("user.home")}${seperator}ascii.txt" File speCharFile = new File(path) if (speCharFile.exists() && !speCharFile.directory) { speCharFile.text = "" } else { speCharFile.createNewFile() } String text = new String() chars.each { Character it -> text = it == jumpLine ? "$text$it" : "$text $it " } speCharFile.setText(text, StandardCharsets.UTF_8.toString())</code></pre> </div> </div> <div class="paragraph"> <p>मैंने फ़ाइल spe_char.groovy का नाम दिया,<br> फ़ाइल वाला फ़ोल्डर से<br> एक टर्मिनल खोलें और स्क्रिप्ट को चलाने के लिए कॉपी पेस्ट करें<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash">$ groovy spe_char.groovy</code></pre> </div> </div> <div class="paragraph"> <p>परिणाम:</p> </div> <div class="paragraph"> <p>0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z ª µ º À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ</p> </div>