JBake

JBake https://cheroliv.com/ JBake Bootstrap Template en-gb Fri, 25 Sep 2026 01:46:33 +0000 Fri, 25 Sep 2026 01:46:33 +0000 HyperFrames-Gradle: AsciiDoc in MP4-Video umwandeln 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="#_das_loch_in_der_video_pipeline">Das Loch in der Video-Pipeline</a></li> <li><a href="#_hyperframes_der_motor">HyperFrames : Der Motor</a></li> <li><a href="#_die_architektur_des_plugins">Die Architektur des Plugins</a> <ul class="sectlevel2"> <li><a href="#_die_pipeline_in_vier_schritten">Die Pipeline in vier Schritten</a></li> <li><a href="#_die_dsl_asciidoc">Die DSL AsciiDoc</a></li> <li><a href="#_die_bridge_node_js">Die Bridge Node.js</a></li> </ul> </li> <li><a href="#_zwei_video_plugins_zwei_nutzungen">Zwei Video-Plugins, Zwei Nutzungen</a></li> <li><a href="#_die_6_epics_der_roadmap">Die 6 EPICs der Roadmap</a></li> <li><a href="#_warum_funktioniert_es">Warum funktioniert es?</a></li> <li><a href="#_schlussfolgerung_das_fehlende_glied">Schlussfolgerung : Das fehlende Glied</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">lesezeit: 8 minutes</div> <p>Vor zwei Wochen habe ich gestartet`capsule-gradle`— ein Plugin, das ein Deck transformiert reveal.js in WebM-Video-Kapsel mit TTS. Heute füge ich ein neues Plugin hinzu: <code>hyperframes-gradle</code>. Es macht etwas, das capsule-gradle nicht tut: AsciiDoc <strong>direkt</strong> in ein MP4-Video umwandeln, ohne reveal.js zu verwenden.</p> </div> <div class="paragraph"> <p>Hier ist der Grund, warum dieses Plug-in existiert, wie es sich an das Bestehende anschließt, und was der HeyGen HyperFrames-Motor zur Content-Produktions-Pipeline bringt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_loch_in_der_video_pipeline">Das Loch in der Video-Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>Meine dokumentarische Pipeline produziert zwei Arten von Videos:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Wiederholungskapsel</strong> (capsule-gradle) — ein reveal.js-Deck, das in WebM aufgezeichnet wurde, mit</p> </li> </ol> </div> <div class="paragraph"> <p>narration TTS. Perfekt, um ein Modul zu wiederholen.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>animierte Folien</strong> (slider-gradle) — ein interaktives reveal.js HTML Deck für</p> </li> </ol> </div> <div class="paragraph"> <p>der Dozent vor Ort.</p> </div> <div class="paragraph"> <p>Aber es fehlt ein drittes Format: das <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">Aktuelle Lösung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mangel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Folien des Trainers</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">Kapsel Revision</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">Teaser-Video</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine</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>animierte technische Demo</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>keine</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>Dokument-zu-Video</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>keine</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Der erste Use Case ist kritisch: Wie lässt sich automatisch generieren? ein Video von 60 Sekunden, das ein Projekt oder ein Modul vorstellt, mit GSAP-Animationen, Erzählung TTS und Hintergrundmusik – alles aus derselben AsciiDoc-Datei Und die Folien?</p> </div> <div class="paragraph"> <p>Capsule-gradle kann nicht antworten: Es muss bereits ein reveal.js-Deck haben. slider-gradle erzeugt dieses Deck gut, aber es ist nicht für das Videorendering konzipiert. Wir brauchten eine <strong>direkte</strong> Pipeline: AsciiDoc → Video.</p> </div> </div> </div> <div class="sect1"> <h2 id="_hyperframes_der_motor">HyperFrames : Der Motor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich habe entdeckthttps://github.com/heygen-com/hyperframes[HyperFrames] il y a einige Tage. Es ist ein Open-Source-Framework (Apache 2.0), das von HeyGen erstellt wurde, Das Einhorn der KI-Video. 22.700 Sterne auf GitHub. Der Pitch passt in ein Satz:</p> </div> <div class="quoteblock"> <blockquote> <div class="paragraph"> <p><strong>HTML schreiben. Video rendern. Für Agenten entwickelt.</strong></p> </div> </blockquote> </div> <div class="paragraph"> <p>Das Prinzip: Sie schreiben HTML mit`data-*`attributes, Sie referenzieren eine GSAP-Animation (oder CSS, Lottie, Three.js…), und der Motor rendert alles als MP4 via Puppeteer (headless Chrome) + FFmpeg. Deterministisches Ergebnis: gleiche Eingabe, gleiche Frames, gleiches Video.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080"&gt; &lt;video class="clip" data-start="0" data-duration="6" data-track-index="0" src="background.mp4" muted playsinline&gt;&lt;/video&gt; &lt;h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1"&gt; Formation Docker &amp; Kubernetes &lt;/h1&gt; &lt;audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.3" src="music.wav"&gt;&lt;/audio&gt; &lt;script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"&gt;&lt;/script&gt; &lt;script&gt; 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; &lt;/script&gt; &lt;/div&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Was macht HyperFrames anders als Remotion? Kein React, kein Bundler, kein JSX. Rohes HTML, das KI-Agenten nativ schreiben können. Es ist <strong>exakt</strong> für meine Pipeline zugeschnitten: planner-gradle mit deepseek kann dieses HTML aus einem SPG/SPD-Plan erzeugen, und ein Gradle-Plugin kann es in MP4 konvertieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_architektur_des_plugins">Die Architektur des Plugins</h2> <div class="sectionbody"> <div class="paragraph"> <p>hyperframes-gradle folgt dem gleichen Muster wie alle meine Plugins: der <a href="0124_architecture_plugin_gradle_racine_consommateur_independant_post.html">Muster « Plugin Unabhängig + Konsumenten-Wurzel »</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="_die_pipeline_in_vier_schritten">Die Pipeline in vier Schritten</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Pipeline hyperframes-gradle rectangle "AsciiDoc Quelle" as adoc #LightYellow ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Pipeline hyperframes-gradle rectangle "AsciiDoc Quelle" as adoc #LightYellow rectangle "AsciidoctorJ" as asciidoctorj #LightBlue rectangle "HTML HyperFrames\n(data-* Attribute)" as html #LightGreen rectangle "HyperFrames CLI\n(Node.js 22+)" as cli #Lavender rectangle "video.mp4" as mp4 #Gold adoc -right-&gt; asciidoctorj : parse blocs customs asciidoctorj -right-&gt; html : génère HTML html -right-&gt; cli : ProcessBuilder\nnpx hyperframes render cli -right-&gt; mp4 : Puppeteer + FFmpeg @enduml</pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>AsciidoctorJ</strong> analysiert den AsciiDoc-Quellcode und extrahiert die benutzerdefinierten Blöcke</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> generiert den HyperFrames-HTML mit dem</p> </li> </ol> </div> <div class="paragraph"> <p>`data-*`entsprechende Attribute.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RenderHyperframesTask</strong> ruft die HyperFrames-CLI über`ProcessBuilder`:</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>MP4 wird bereitgestellt in`output/`mit einem`metadata.json`für die Orchestrierung.</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_die_dsl_asciidoc">Die DSL AsciiDoc</h3> <div class="paragraph"> <p>Der wirkliche Mehrwert des Plugins ist das AsciiDoc‑DSL. Der Benutzer Er schreibt niemals HTML. Er annotiert sein bestehendes AsciiDoc-Dokument :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Formation Docker &amp; 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 &amp; 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>Die docinfo-Attribute (<code>:hyperframes-width:</code>) legen die Dimensionen fest. Die benutzerdefinierten Blöcke definieren die Kompositionen und die Spuren. Der Block `[hyperframes-animation]`enthält den rohen GSAP-Code — dass der KI-Agent kann aus einer Beschreibung in natürlicher Sprache generieren.</p> </div> </div> <div class="sect2"> <h3 id="_die_bridge_node_js">Die Bridge Node.js</h3> <div class="paragraph"> <p>Der einzige technische Reibungspunkt: HyperFrames ist in Node.js/TypeScript, und meine Plugins sind in Kotlin/JVM. Die Lösung ist ein`ProcessBuilder`:</p> </div> <div class="paragraph"> <p>Note: The output preserves the exact spacing and punctuation as provided. No translation is needed for punctuation.</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>Keine Kopplung JVM-Code ↔ Node.js. Der Vertrag erfolgt über die Kommandozeile. und Dateien auf der Festplatte. Das ist das gleiche Muster wie`plantuml-gradle` (die die PlantUML-CLI aufruft) oder`slider-gradle`(der AsciidoctorJ aufruft) Nichts Neues unter der Sonne — nur auf ein neueres Werkzeug angewendet.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zwei_video_plugins_zwei_nutzungen">Zwei Video-Plugins, Zwei Nutzungen</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">[empty]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deck reveal.js (existierendes HTML)</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">Anwendungsfall</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Revisionskapsel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Eigenständiges Erklärvideo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Natur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Folien → Video</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokument → Video</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rendering</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">Übergänge reveal.js eingebaute</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GSAP/CSS-Datenattribute</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stapel</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 + externe Node.js-CLI</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Sie ersetzen sich nicht. Sie ergänzen sich. Die vollständige Wertschöpfungskette:</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM Wiederholungskapsel</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ hyperframes-gradle ──→ MP4 (Standalone-Video)</p> </div> <div class="paragraph"> <p>Der Benutzer schreibt eine einzige AsciiDoc-Datei. slider-gradle erzeugt die Folien. capsule-gradle erzeugt die Überarbeitungskapsel. hyperframes-gradle erzeugt das Teaser-Video und die technischen Demos</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_6_epics_der_roadmap">Die 6 EPICs der Roadmap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Plugin ist in 6 EPICs strukturiert:</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">Beschreibung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Priorität</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 Governance + Architekturabgrenzung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�✅ ERLEDIGT</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">Gradle-Stub-Plugin + AsciidoctorJ-Integration</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">Brücke 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 Gepflogenheiten (Blöcke, Docinfo, Vorlagen)</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">Integration 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">fertige Vorlagen (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 + Veröffentlichung 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>Die Sitzung 000 (bootstrap) ist bereits abgeschlossen. Die Sitzung 001 wird HF-1 angreifen: der Stub des Gradle-Plugins und die AsciidoctorJ-Integration.</p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_funktioniert_es">Warum funktioniert es?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Drei Gründe:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>HyperFrames ist "built for agents"</strong>. Mein Pipeline beruht auf KI-Agenten.</p> </li> </ol> </div> <div class="paragraph"> <p>(planner-gradle + deepseek) erzeugen Inhalt. HyperFrames akzeptiert HTML roh — das Format, das die LLMs am besten meistern. Kein React, nicht von JSX, keine Lernkurve für den Agenten.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Der AsciiDoc-DSL ist natürlich</strong>. Mein ganzes Ökosystem spricht AsciiDoc.</p> </li> </ol> </div> <div class="paragraph"> <p>slider-gradle, codex-gradle, training-gradle — alle verbrauchen davon`.adoc`. Benutzerdefinierte Blöcke hinzufügen`[hyperframes-composition]`ist eine Erweiterung logisch, kein Bruch.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Die Node.js Bridge ist ein bewährtes Muster</strong>. ProcessBuilder außerhalb der JVM,</p> </li> </ol> </div> <div class="paragraph"> <p>Das ist das, was ich bereits für PlantUML, Graphviz, Piper mache. HyperFrames hinzufügen Es ändert nichts an der Architektur — es ist nur ein weiteres externes Werkzeug, gesteuert von 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>Die wahre Stärke des Patterns besteht darin, dass es <strong>keine</strong> npm-Abhängigkeit gibt Der Gradle-Build. Das Plugin importiert keinen Node.js-Code. Es führt eine Shell-Befehl. Wenn HyperFrames sich weiterentwickelt oder kaputt geht, ist das Plugin nicht gekoppelt. — Es reicht, den Befehl zu aktualisieren.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_schlussfolgerung_das_fehlende_glied">Schlussfolgerung : Das fehlende Glied</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mit hyperframes-gradle ist mein Video-Pipeline vollständig. Ich habe:</p> </div> <div class="ulist"> <ul> <li> <p>Die <strong>interaktive Slides</strong> (slider-gradle)</p> </li> <li> <p>Die <strong>Revisionskapseln</strong> (capsule-gradle)</p> </li> <li> <p>Die <strong>Standalone-Videos</strong> (hyperframes-gradle)</p> </li> </ul> </div> <div class="paragraph"> <p>Drei Formate. Eine einzige Quelldatei: AsciiDoc.</p> </div> <div class="paragraph"> <p>Das nächste Ziel ist HF-1 : das Plugin zu kompilieren und zu generieren ein erste HTML HyperFrames aus einem annotierten AsciiDoc-Dokument. Die Sitzung 001 ist bereits gerahmt.</p> </div> <div class="paragraph"> <p>hyperframes-gradle existiert. Die Governance ist eingerichtet. Der Backlog ist geschrieben. Die Architektur ist dokumentiert. Das Plugin ist geboren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0124_architecture_plugin_gradle_racine_consommateur_independant_post.html">Artikel 0124 — Die Architektur des unabhängigen Plugins + Verbraucher-Wurzel</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 — Dokumentation</a></p> </li> <li> <p><code>foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc</code>— Detaillierte Architektur</p> </li> </ul> </div> </div> </div> Audit meines LLM-Verbrauchs: SQLite, OpenCode, Ollama Cloud und warum mein Pro-Abonnement den globalen Markt sprengt 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="#_den_stack_verstehen_wer_macht_was">Den Stack verstehen: Wer macht was?</a></li> <li><a href="#_einleitung_warum_ein_audit">Einleitung: Warum ein Audit?</a></li> <li><a href="#_die_opencode_datenbank_eine_goldmine">Die OpenCode-Datenbank: Eine Goldmine</a> <ul class="sectlevel2"> <li><a href="#_das_schema">Das Schema</a></li> <li><a href="#_der_extraktionscode">Der Extraktionscode</a></li> </ul> </li> <li><a href="#_die_ergebnisse_73_tage_des_verbrauchs">Die Ergebnisse: 73 Tage des Verbrauchs</a> <ul class="sectlevel2"> <li><a href="#_globale_ansicht">Globale Ansicht</a></li> <li><a href="#_ventilierung_von_modell_und_lieferant">Ventilierung von Modell und Lieferant</a></li> <li><a href="#_die_intrasession_modelle_was_die_sitzungstabelle_nicht_sieht">Die Intrasession-Modelle: Was die Sitzungstabelle nicht sieht</a></li> </ul> </li> <li><a href="#_tarifvergleich_westliche_anbieter">Tarifvergleich — Westliche Anbieter</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_inferenzanbieter">HuggingFace Inferenzanbieter</a></li> <li><a href="#_groq">Groq</a></li> </ul> </li> <li><a href="#_preisvergleich_chinesische_lieferanten">Preisvergleich — Chinesische Lieferanten</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="#_zusammenfassungstabelle_alle_provider">Zusammenfassungstabelle — Alle Provider</a></li> <li><a href="#_der_verborgene_kostenfaktor_prompt_engineering_und_iterationen">Der verborgene Kostenfaktor: Prompt-Engineering und Iterationen</a></li> <li><a href="#_ollama_cloud_pro_abonnements_kumulieren_die_docker_methode">Ollama Cloud Pro Abonnements kumulieren: Die Docker-Methode</a></li> <li><a href="#_was_das_audit_nicht_misst">Was das Audit nicht misst</a></li> <li><a href="#_fazit_das_urteil_der_zahlen">Fazit: Das Urteil der Zahlen</a></li> <li><a href="#_referenzen">Referenzen</a> <ul class="sectlevel2"> <li><a href="#_quellen_der_tarife">Quellen der Tarife</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 22 minutes</div> <p>Man fragt mich oft, wie viel mein KI‑Verbrauch kostet. Ich antworte: „20 Euro pro Monat“, und man schaut mich mit runden Augen an. Heute öffne ich deshalb die schwarze Box. Dieser Artikel ist die vollständige Prüfung meiner 73 Tage des Vibe‑Codings: die Methodik zur Extraktion der Daten aus der SQLite‑Datenbank von OpenCode, der SQL‑Code zum Abfragen der Tabellen und der umfassende Vergleich mit <strong>allen</strong> Marktteilnehmern — westlich wie chinesisch. Das Ergebnis ist so asymmetrisch, dass ich meine Berechnungen dreimal überprüfen musste.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Zwangsstörung</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_den_stack_verstehen_wer_macht_was">Den Stack verstehen: Wer macht was?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor wir in die Zahlen eintauchen, klären wir die Architektur. Es gibt drei unterschiedliche Akteure in meinem Setup, und es ist wichtig, sie nicht zu verwechseln:</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Die drei Akteure meines LLM-Stacks left to right direction actor "Ich (Entwickler)" as Dev package "OpenCode ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Die drei Akteure meines LLM-Stacks left to right direction actor "Ich (Entwickler)" as Dev package "OpenCode (github.com/anomalyco/opencode)" as OC { rectangle "CLI von vibe coding Open Source, kostenlos" as CLI note right of CLI C'est l'outil que j'utilise pour coder avec des agents IA. Il ne fournit AUCUN modèle. C'est un terminal + un orchestrateur. end note } package "Ollama (Lokale Installation)" as OL { rectangle "Inferenzclient Auf meinem Rechner installiert" as Client note right of Client C'est le logiciel qui fait tourner les modèles. Il peut les exécuter en local OU les déléguer au cloud selon le tag (:cloud). Il s'authentifie via clé SSH. end note } package "Ollama Cloud\n(ollama.com)" as OCloud { rectangle "Cloud-Inferenz-Dienst Pro-Abonnement: 20€/Monat" as Cloud note right of Cloud C'est le fournisseur d'inférence. Mes modèles avec le tag :cloud sont exécutés sur LEURS serveurs. L'abonnement Pro donne accès à des quotas supérieurs. end note } Dev --&gt; CLI : "Ich tippe Prompts" CLI --&gt; Client : "Rufe dieses Modell" Client --&gt; Cloud : "SSH-Schlüssel + Anfrage (Modelle :cloud)" Client --&gt; Client : "Lokale Ausführung (Modelle ohne :cloud)" @enduml</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><strong>OpenCode ist KEIN Anbieter von Modellen.</strong>Das ist eine Open-Source-CLI (<a href="https://github.com/anomalyco/opencode">github.com/anomalyco/opencode</a>) der orchestriert KI-Agenten. Er verkauft kein Abonnement, er bietet keine Inferenz. Das ist das Äquivalent von`git`für die Versionierung: ein Werkzeug, kein Dienst. <strong>Ollama Cloud ist der Anbieter von Inferenz.</strong>Meine lokale Ollama-Installation agiert als <strong>Client</strong> — sie authentifiziert sich bei den Ollama-Servern mittels eines einzigartigen SSH-Schlüssels (Device Key) und delegiert ihr die Ausführung der mit Tags versehenen Modelle`:cloud`. Das Pro-Abonnement (20 €/Monat) ermöglicht höhere Kontingente und erlaubt das Kombinieren mehrerer Konten auf derselben Maschine über Docker.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_einleitung_warum_ein_audit">Einleitung: Warum ein Audit?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vor zwei Monaten nutzte ich Modelle kostenlos auf meiner lokalen Ollama-Installation. Dann habe ich ein erstes Abonnement für Ollama Cloud Pro zu 20€/Monat abgeschlossen, das mir erlaubt, die Cloud-Modelle zu nutzen (diejenigen mit dem Tag`:cloud`) über den Provider`ollama-cloud`. Ein zweites Abonnement folgte einem Monat später auf einer getrennten Docker‑Instanz mit eigenem Konto und eigenem SSH‑Schlüssel — die im <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">mon article sur le cumul d&#8217;abonnements</a> beschriebene Methode des Kumulierens.</p> </div> <div class="paragraph"> <p>Die Frage, die mich beschäftigte: <strong>sind diese 20 € pro Monat gerechtfertigt?</strong> Nicht aus dem Bauchgefühl. Mit Zahlen.</p> </div> <div class="paragraph"> <p>Um zu antworten, brauchte ich präzise Daten. Keine Schätzungen. Keine Durchschnittswerte. Mein <strong>tatsächlicher</strong> Verbrauch, Token für Token, Modell für Modell, Sitzung für Sitzung.</p> </div> <div class="paragraph"> <p>Und OpenCode — die CLI — speichert das alles in einer SQLite-Datenbank.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_opencode_datenbank_eine_goldmine">Die OpenCode-Datenbank: Eine Goldmine</h2> <div class="sectionbody"> <div class="paragraph"> <p>OpenCode speichert den vollständigen Verlauf seiner Sitzungen in einer SQLite-Datei, die sich befindet an`~/.local/share/opencode/opencode.db`. La mienne pèse 660 Mo pour 73 jours d&#8217;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="_das_schema">Das Schema</h3> <div class="paragraph"> <p>Die Basis enthält etwa zwanzig Tabellen, doch drei davon sind für unser Audit entscheidend:</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>Der Tisch`session`ist perfekt für eine globale Prüfung: jede Sitzung hat ihre aggregierte Token-Zahl, das verwendete Modell und ihre Kosten. Das Feld`model`ist rohes JSON :</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>Das Feld`cost`In der OpenCode-Datenbank werden nur die <strong>externen API-Gebühren</strong> widergespiegelt, die nach Verbrauch über den API-Schlüssel (Google Gemini, OpenAI usw.) gezahlt werden. Aufrufe über Ollama – ob lokal oder über Ollama Cloud Pro – werden gekennzeichnet.`cost=0`Weil der Kostenbetrag pauschal (Abonnement) ist, nicht pro Token. Der eigentliche Kostenfaktor dieser Anrufe ist das monatliche Abonnement.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_der_extraktionscode">Der Extraktionscode</h3> <div class="paragraph"> <p>Es muss nichts installiert werden. Node.js 22+ enthält ein experimentelles SQLite‑Modul.<code>node:sqlite</code>) funktioniert einwandfrei. Hier ist das Skript, das mir alles gegeben hat :</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>Das Flag`--experimental-sqlite`ist auf Node.js 22.x erforderlich. Auf Node.js 24+ ist das Modul stabil und erfordert keinen Flag mehr.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_ergebnisse_73_tage_des_verbrauchs">Die Ergebnisse: 73 Tage des Verbrauchs</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_globale_ansicht">Globale Ansicht</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">Metrisch</th> <th class="tableblock halign-left valign-top">Wert</th> <th class="tableblock halign-left valign-top">Kontext</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 Sitzungen/Tag im Durchschnitt</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tokens Eingabe</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,62 Milliarden</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Darunter 94,5 M Cache-Hits</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 Millionen</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">vernachlässigbar — kein Denken</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kosten der externen API</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">Gebühren außerhalb des Abonnements (Gemini + free tiers)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Dieser Betrag von \$0,22 ist entscheidend: Er repräsentiert alles, was ich <strong>zusätzlich</strong> zu meinem Ollama Cloud Pro-Abonnement bezahlt habe. Das ist praktisch nichts. Das Abonnement deckt das Wesentliche ab.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Monatliche Entwicklung — Tokeneingabe rectangle "März 2026 9 Sitzungen ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Monatliche Entwicklung — Tokeneingabe rectangle "März 2026 9 Sitzungen 37,7M Tokens" as MARS #FFE082 rectangle "April 2026 486 Sitzungen 1,33 Mrd Token" as AVR #81C784 rectangle "Mai 2026 527 Sitzungen 1,25 Mrd Tokens" as MAI #64B5F6 MARS -right-&gt; AVR : ×35 AVR -right-&gt; MAI : stable (période en cours) note bottom of MAI Mai comptabilisé jusqu'au 18. Projection mois complet : ~2,1 Md tokens si la tendance se maintient. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Der Abflug zwischen März und April ist spektakulär: ×35 in einem Monat. Es ist der Übergang von der Nutzung „test“ zur Nutzung „produktion“ — als ich begonnen habe, OpenCode-Agenten kontinuierlich für meine Gradle-Plugins laufen zu lassen.</p> </div> </div> <div class="sect2"> <h3 id="_ventilierung_von_modell_und_lieferant">Ventilierung von Modell und Lieferant</h3> <div class="paragraph"> <p>Das Feld`model`des Tisches`session`seiend JSON,`json_extract()`ermöglicht eine saubere Belüftung:</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">Modell × Anbieter</th> <th class="tableblock halign-left valign-top">Sitzungen</th> <th class="tableblock halign-left valign-top">(empty)</th> <th class="tableblock halign-left valign-top">Output</th> <th class="tableblock halign-left valign-top">Kosten</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>Drei verschiedene Provider für genau das gleiche Modell DeepSeek V4 Pro: * <code>ollama-cloud</code>→ via <strong>kostenpflichtiges Pro-Abonnement</strong> (Cloud, verwaltet von Ollama) * <code>ollama-b</code>→ <strong>zweites Pro-Abonnement</strong>, isoliert in einem separaten Docker-Container * <code>ollama</code>→ instance native locale, <strong>kostenlos</strong> (läuft direkt auf meinem Rechner) Die Summe der drei ergibt 936M Input, 8,4M Output — das ist mein Gesamtverbrauch von DeepSeek V4 Pro, alle Provider zusammengezählt. Nur`ollama-cloud`(220M input) kostet ein Abonnement. Die restlichen 716M sind kostenlos (lokal oder Kombination von Abonnements).</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_die_intrasession_modelle_was_die_sitzungstabelle_nicht_sieht">Die Intrasession-Modelle: Was die Sitzungstabelle nicht sieht</h3> <div class="paragraph"> <p>Der Tisch`session`Erfasst nur das <strong>haupt</strong> Modell der Session. Aber während derselben Sitzung kann ein OpenCode-Agent zwischen mehreren Modellen wechseln. Die Tabelle`message`er enthüllt :</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>Ich benutze Qwen, GLM, Kimi und die anderen Modelle nicht mehr. Sie erscheinen im Verlauf, weil ich im April einiges getestet habe. Seit Mitte Mai bin ich auf DeepSeek V4 Pro festgelegt — es ist das einzige, das die Belastung bei langen Kontexten mit Agenten-Governance hält (vgl. <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">mein Vergleich Kimi/GLM/DeepSeek</a>). Die 32% DeepSeek-Nachrichten im Verlauf sind irreführend: heute sind es 100%.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tarifvergleich_westliche_anbieter">Tarifvergleich — Westliche Anbieter</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die unbequeme Frage: Wie viel würde derselbe Verbrauch bei traditionellen Anbietern kosten?</p> </div> <div class="paragraph"> <p>Meine Berechnungsgrundlage für den Vergleich :<strong>220M Tokens Eingabe + 1,9M Tokens Ausgabe</strong>— <strong>nur</strong> das weitergegebene Volumen`ollama-cloud`(der einzige, der zu meinem kostenpflichtigen Abonnement passt). Die restlichen 716M sind kostenlos (lokale Ollama-Instanz und Docker-B-Instanz).</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">Lieferant</th> <th class="tableblock halign-left valign-top">Modell</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">Ausgabe \$/M</th> <th class="tableblock halign-left valign-top">Kosten pro Monat</th> <th class="tableblock halign-left valign-top">Mein Abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mein 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">Modell</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">Output $/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> <th class="tableblock halign-left valign-top">× mein 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>Sogar Haiku 4.5, das kostengünstigste Modell von Claude, kostet das 11-fache meines Abonnements. Und es kennt nichts von meiner Codebasis, generiert nicht in meinem Stil, und halluciniert über die Gradle-Kotlin-DSL-APIs.</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">Modell</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Ausgabe \$/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> <th class="tableblock halign-left valign-top">× mein 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">Modell</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Ausgabe $/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> <th class="tableblock halign-left valign-top">× mein 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 zu 69 € ist der einzige Konkurrent „nah“ im reinen Preis — aber es ist ein dichtes, leichtes Modell, kein MoE 1,6T wie DeepSeek V4 Pro. Die Qualität des generierten Codes hat nichts damit zu tun.</p> </div> </div> <div class="sect2"> <h3 id="_huggingface_inferenzanbieter">HuggingFace Inferenzanbieter</h3> <div class="paragraph"> <p>HuggingFace führt keine Inferenz selbst durch — es agregiert <strong>providers</strong> von Drittanbietern (Novita, Together, DeepInfra, Cerebras, SambaNova, Fireworks, Groq…) über eine einheitliche API. Man wählt den günstigsten oder schnellsten <strong>provider</strong>. Hier sind die im Mai 2026 ermittelten Tarife für 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">Anbieter HF</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">Output \$/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> <th class="tableblock halign-left valign-top">Mein Abonnement</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Novita (am günstigsten)</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">Gemeinsam</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">Feuerwerk</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">nicht öffentlicher Tarif</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>Selbst der günstigste Provider auf HuggingFace (Novita) berechnet 19× den Preis meines Abonnements. Und im Gegensatz zu Ollama Cloud berechnet HuggingFace <strong>zusätzlich</strong> die Plattformgebühren, wenn du kein PRO-HF-Abonnement hast (\$9/Monat).</p> </div> </div> <div class="sect2"> <h3 id="_groq">Groq</h3> <div class="paragraph"> <p>Groq hat <strong>keine</strong> der Modelle, die ich verwende — ihr Katalog beschränkt sich auf GPT-OSS, Llama und Qwen 32B. Ein Vergleich ist unmöglich.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_preisvergleich_chinesische_lieferanten">Preisvergleich — Chinesische Lieferanten</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der wahre Test ist der chinesische Markt. Wenn DeepSeek ein chinesisches Modell ist, sollte seine native API günstiger sein, oder?</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">Periode</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Ausgabe $/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Angebot -75% (Ende 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">Volltarif (ab Juni)</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>Selbst mit der aggressiven Promotion von DeepSeek (-75% verlängert), kostet die direkte API<strong>5 mal</strong>teurer. Zum Normaltarif,<strong>20×</strong>. Und das ist <strong>nur</strong> DeepSeek — kein Zugriff auf andere Modelle.</p> </div> </div> <div class="sect2"> <h3 id="_kimi_moonshot_platform_kimi_com">Kimi Moonshot (platform.kimi.com)</h3> <div class="paragraph"> <p>Kimi bietet nur seine eigenen Modelle an. Kein DeepSeek.</p> </div> </div> <div class="sect2"> <h3 id="_alibaba_bailian_bailian_aliyun_com">Alibaba Bailian (bailian.aliyun.com)</h3> <div class="paragraph"> <p>Einziger Anbieter, der alle chinesischen Modelle aggregiert — jedoch durch Weiterverkauf mit Aufschlag. Die Preise werden dynamisch über JavaScript geladen, wodurch das Scraping unmöglich ist.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zusammenfassungstabelle_alle_provider">Zusammenfassungstabelle — Alle Provider</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">Lieferant</th> <th class="tableblock halign-left valign-top">Modell</th> <th class="tableblock halign-left valign-top">$\$/M$</th> <th class="tableblock halign-left valign-top">Ausgabe \$/M</th> <th class="tableblock halign-left valign-top">Kosten/Monat</th> <th class="tableblock halign-left valign-top">× mein 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>ungefähr 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 Blitz</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Blitz</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">Gemeinsam KI</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="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Projizierte monatliche Kosten — 220M Eingabe + 1,9M Ausgabe rectangle "Ollama Cloud Pro\n~20€" as OC #4CAF50 rectangle "Gemini Flash $69" as GF #8BC34A ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Projizierte monatliche Kosten — 220M Eingabe + 1,9M Ausgabe rectangle "Ollama Cloud Pro\n~20€" as OC #4CAF50 rectangle "Gemini Flash $69" as GF #8BC34A rectangle "DeepSeek-Promo \$98" as DSP #FFC107 rectangle "GPT Mini $174" as GM #FF9800 rectangle "Claude Haiku\n\$230" as CH #FF5722 rectangle "HF/Novita\n\$374" as HF #F44336 rectangle "DeepSeek normal \$390" as DSN #F44336 rectangle "GPT 5.4\n\$579" as G4 #D32F2F rectangle "Claude Sonnet \$689" as CS #D32F2F rectangle "Claude Opus $1 148" as CO #B71C1C rectangle "GPT 5.5\n\$1 157" as G5 #880E4F note bottom of OC DeepSeek V4 Pro 1.6T MoE + accès à tout le catalogue Ollama Cloud (Qwen, GLM, Kimi...) Inclus dans l'abonnement end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_der_verborgene_kostenfaktor_prompt_engineering_und_iterationen">Der verborgene Kostenfaktor: Prompt-Engineering und Iterationen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Token-Kosten sind nur ein Teil der Gleichung. Der wirkliche Kostenfaktor ist die Entwicklerzeit.</p> </div> <div class="paragraph"> <p>Mit OpenCode + Ollama Cloud Pro + mein Governance-Agent (EAGER/LAZY/Hot/Warm/Cold, beschrieben in <a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">der Artikel über die Governance</a>), erhalte ich:</p> </div> <div class="ulist"> <ul> <li> <p><strong>0 wiederholtes Prompt-Engineering</strong>Der Kontext wird automatisch injiziert</p> </li> <li> <p><strong>90%+ erster Schuss richtig</strong>: der Code kompiliert beim ersten Versuch</p> </li> <li> <p><strong>Null hallucination deepseek über 8 aufeinanderfolgende Sitzungen</strong>(dokumentiert in <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">der Vergleich Kimi/GLM/DeepSeek</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>Mit Claude oder GPT <strong>ohne</strong> Feintuning und Governance :</p> </div> <div class="ulist"> <ul> <li> <p>2-3 Iterationen pro Aufgabe im Durchschnitt</p> </li> <li> <p>systematisches Prompt-Engineering</p> </li> <li> <p>Halluzinationen bei den Kotlin/Gradle-APIs, sobald der Kontext mehr als 30K Tokens überschreitet</p> </li> </ul> </div> <div class="paragraph"> <p>Der »effektive« Kosten pro Monat — Tokens × Iterationen × Korrekturzeit — beträgt das 27‑ bis 54‑fache meiner Lösung, wie ich in <a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">dem Artikel über das Effizienzverhältnis</a> gezeigt habe.</p> </div> <div class="paragraph"> <p><em><em>_ Es geht nicht nur um den Preis pro Token. Ein Claude Opus zum 57× Preis, der 3× mehr Iterationen erfordert, hat effektiv Kosten von ~170× höher. Ausgedrückt deutlich: Einen Praktikanten zu bezahlen wie einen McKinsey‑Partner. &lt;/think&gt; </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_ollama_cloud_pro_abonnements_kumulieren_die_docker_methode">Ollama Cloud Pro Abonnements kumulieren: Die Docker-Methode</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn ein einzelnes Abonnement nicht ausreicht, kombinieren wir sie. Das Prinzip besteht darin, jedes Abonnement in seiner eigenen Ollama-Installation zu isolieren, mit seinem eigenen SSH-Authentifizierungsschlüssel. Docker macht das trivial.</p> </div> <div class="paragraph"> <p>Die vollständige Methode wird in <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">der Artikel über das Kombinieren von Docker</a> beschrieben, hier das Prinzip:</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Architektur — Zwei Ollama Cloud Pro‑Abonnements auf einer Maschine left to right direction node "Meine physische Maschine" { frame "Ollama Instanz A (einheimisch) ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Architektur — Zwei Ollama Cloud Pro‑Abonnements auf einer Maschine left to right direction node "Meine physische Maschine" { frame "Ollama Instanz A (einheimisch) Port :11434" as Native { database "Identität A\n/usr/share/ollama/.ollama/id_ed25519" } frame "Ollama-Instanz B (Docker) Port :11435" as Docker { database "Identität B\n~/ollama-b-data/id_ed25519" } } cloud "Ollama Cloud" { actor "Konto Pro A\n(E‑Mail 1)" as A actor "Geschäftskonto B\n(E-Mail 2)" as B } Native --&gt; A : "Gerätenschlüssel A" Docker --&gt; B : "Geräteschlüssel B" note bottom of Docker Conteneur Docker isolé : - Clé SSH distincte - Port réseau distinct (11435) - Volume persistant (~/ollama-b-data) - restart: always end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Das Muster ist einfach:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ein Volume erstellen`~/ollama-b-data`</p> </li> <li> <p>Einen Docker-Container starten`ollama/ollama:0.20.2`aufgemappt`11435:11434`</p> </li> <li> <p>SSH-Schlüssel des Containers abrufen → auf ollama.com speichern</p> </li> <li> <p>tun`ollama signin`mit einer zweiten E‑Mail</p> </li> <li> <p>OpenCode mit zwei Providern konfigurieren (`ollama`auf :11434,`ollama-b`auf :11435)</p> </li> </ol> </div> <div class="paragraph"> <p>Zwei Konten, eine blaue Karte, kein Konflikt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_das_audit_nicht_misst">Was das Audit nicht misst</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">Toter Winkel</th> <th class="tableblock halign-left valign-top">Auswirkung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Qualität des produzierten Codes</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,6 Milliarden Token sagen nicht aus, ob der Code kompiliert. Meine 8 Sessions DeepSeek V4 Pro haben eine First-Shot-Rate &gt;90%.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ökosystem OpenCode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der CLI ist kostenlos, aber sein Wert (Agenten, Sandboxes, Verlauf, Prompt-Caching) ist immens. Er ist nicht im Abonnementspreis enthalten — es ist ein separates Werkzeug.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Opportunitätskosten</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2 Stunden pro Tag damit zu verbringen, Halluzinationen eines minderwertigen Modells zu debuggen, kostet mehr als 20 € pro Monat.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ruhe des Geistes</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Festpreis = keine Überraschung. Beim Preismodell pro Token kann ein Aktivitätsschub sehr schmerzhaft sein.</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>Die genannten Preise sind die von Mai 2026. In sechs Monaten wird alles gesunken sein. Doch das strukturelle Machtverhältnis — Festabonnement gegenüber Nutzungsgebühr — wird für Vielverbraucher weiterhin zugunsten des Abonnements sein.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_das_urteil_der_zahlen">Fazit: Das Urteil der Zahlen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach 73 Tagen, 1 022 OpenCode-Sessions und 2,6 Milliarden 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">Metrik</th> <th class="tableblock halign-left valign-top">Urteil</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kumulierte externe API‑Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$0,22</strong>(nahezu null)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kosten des Ollama Cloud Pro-Abonnements</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>~20€/Monat</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Opus-Entsprechung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$1 148/Monat</strong>— 57× teurer</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Entsprechung GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$1 157/Monat</strong>— 58× teurer</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/Monat</strong>— 19‑mal teurer</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Direktes DeepSeek API-Äquivalent</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$390/Monat</strong>— 20‑mal teurer</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Günstigstes Äquivalent (Gemini Flash)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$69/Monat</strong>— 3,5× teurer, unteres Modell</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Bestes Angebot des Marktes</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Cloud Pro für 20 €/Monat</strong>— unbesiegbar</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>(empty) Für 20 € pro Monat, um auf DeepSeek V4 Pro (1,6 T Parameter, MoE, CSA+HCA, 1 Mio Kontext) über Ollama Cloud zuzugreifen, habe ich das beste Preis‑Leistungs‑Verhältnis des globalen Marktes. Selbst chinesische Anbieter direkt sind 5‑ bis 20‑mal teurer. Selbst HuggingFace, mit seiner Aggregation von Low‑Cost‑Anbietern, ist 19‑mal teurer. Der westliche Markt (Claude, GPT) liegt bei 50‑60‑mal – ein anderer Planet.</p> </div> <div class="paragraph"> <p>Dieses Verhältnis ist so unausgewogen, dass es nicht ewig dauern kann. Nutze es, solange es besteht. <em>__</em></p> </div> <div class="paragraph"> <p>Also ja, meine 20 Euro pro Monat ist die beste technische Investition meines Entwicklerlebens. Und jetzt habt ihr die Zahlen, um das zu beweisen.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Governance-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>Artikel 0119 — Benchmark DGX Spark vs Cloud vs LLM-Abonnements</p> </li> <li> <p><a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">Artikel 0120 — Zwei Ollama Cloud Pro-Abonnements mit Docker kombinieren</a></p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Artikel 0121 — Gradle-Plugin zur Steuerung von zwei Ollama-Instanzen</a></p> </li> <li> <p><a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">Artikel 0122 — Effizienzverhältnis 27× bis 54×</a></p> </li> </ul> </div> <div class="sect2"> <h3 id="_quellen_der_tarife">Quellen der Tarife</h3> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/pricing">Ollama Cloud — Pro-Tarife $20/Monat</a></p> </li> <li> <p><a href="https://api-docs.deepseek.com/quick_start/pricing">DeepSeek API – Offizielle Tarife V4 Pro</a></p> </li> <li> <p><a href="https://platform.kimi.com/docs/pricing/chat-k26">Kimi Moonshot — Tarife K2.6</a></p> </li> <li> <p><a href="https://huggingface.co/inference/models">HuggingFace Inference Providers — Tarife pro Provider</a></p> </li> <li> <p><a href="https://www.anthropic.com/pricing">Anthropic — Claude API-Preise</a></p> </li> <li> <p><a href="https://openai.com/api/pricing/">OpenAI — Preise der GPT‑API</a></p> </li> <li> <p><a href="https://together.ai/pricing">Together AI — Inferenzpreise</a></p> </li> <li> <p><a href="https://groq.com/pricing">Groq — API-Preise</a></p> </li> <li> <p><a href="https://deepinfra.com/pricing">DeepInfra — GPU-Preise und Modelle</a></p> </li> <li> <p><a href="https://help.aliyun.com/zh/model-studio/text-generation-model/">Alibaba Bailian — Verfügbare Modelle</a></p> </li> <li> <p><a href="https://github.com/anomalyco/opencode">OpenCode — CLI Open Source auf GitHub</a></p> </li> </ul> </div> </div> </div> </div> Die Architektur « Unabhängiges Plugin + Konsumenten‑Wurzel » : Warum duplizieren sich meine Gradle-Builds? 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="#_das_problem_drei_architekturen_die_mir_zeit_gekostet_haben">Das Problem: Drei Architekturen, die mir Zeit gekostet haben.</a> <ul class="sectlevel2"> <li><a href="#_option_1_das_isolierte_plugin_kein_dogfooding">Option 1: Das isolierte Plugin (kein Dogfooding)</a></li> <li><a href="#_option_2_das_klassische_monorepo_includeplugin">Option 2 : Das klassische Monorepo (<code>include(":plugin")</code>)</a></li> <li><a href="#_option_3_der_composite_build_includebuild">Option 3: Der Composite Build (<code>includeBuild()</code>)</a></li> </ul> </li> <li><a href="#_die_lösung_zwei_unabhängige_builds_eine_konsumentenwurzel">Die Lösung: Zwei Unabhängige Builds, Eine Konsumentenwurzel</a> <ul class="sectlevel2"> <li><a href="#_der_workflow">Der Workflow</a></li> <li><a href="#_der_konkrete_workflow">Der konkrete Workflow</a></li> </ul> </li> <li><a href="#_warum_hat_mich_diese_architektur_erobert">Warum hat mich diese Architektur erobert?</a> <ul class="sectlevel2"> <li><a href="#_natürliches_dogfooding_sofortiges_feedback">Natürliches Dogfooding, sofortiges Feedback</a></li> <li><a href="#_2_zero_config_klonierung">2. Zero-Config-Klonierung</a></li> <li><a href="#_3_isolierte_builds_unabhängige_ci">3. Isolierte Builds, unabhängige CI</a></li> </ul> </li> <li><a href="#_die_anatomie_des_unterordners_name_plugin">Die Anatomie des Unterordners `{name}-plugin/</a> <ul class="sectlevel2"> <li><a href="#_der_versionskatalog_zwei_verschiedene_dateien">Der Versionskatalog: Zwei verschiedene Dateien</a></li> </ul> </li> <li><a href="#_was_man_nicht_macht">Was man nicht macht</a></li> <li><a href="#_vergleich">Vergleich:</a></li> <li><a href="#_der_dag_vertrag_ein_root_build_importiert_niemals_aus_einem_unterordner">Der DAG-Vertrag: Ein Root-Build importiert niemals aus einem Unterordner</a></li> <li><a href="#_fazit_die_scheinbare_duplikation_die_zeit_spart">Fazit: Die scheinbare Duplikation, die Zeit spart</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 11 minutes</div> <p>Sie klonen ein Gradle-Plugin-Repository. Sie öffnen ein Terminal. Was geben Sie ein? Dann ?<code>./gradlew tasks</code>, natürlich. Aber in welchem Ordner? Die Wurzel? Das Untermodul? Muss man zuerst ein README lesen, um zu wissen, wie man baut? Wenn Sie zögern, wäre es nicht Nur eine Sekunde, die Architektur des Projekts ist kaputt.</p> </div> <div class="paragraph"> <p>So habe ich dieses Problem einmal für alle gelöst — und warum dies Pattern ist heute die Signatur aller meiner Gradle-Plugins in`foundry/public/`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_drei_architekturen_die_mir_zeit_gekostet_haben">Das Problem: Drei Architekturen, die mir Zeit gekostet haben.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor ich zum aktuellen Muster konvergierte, habe ich zwischen drei Ansätzen herumgetastet. klassisch für das Organisieren eines Gradle-Plugins. Jede hatte ein Ausschlusskriterium.</p> </div> <div class="sect2"> <h3 id="_option_1_das_isolierte_plugin_kein_dogfooding">Option 1: Das isolierte Plugin (kein Dogfooding)</h3> <div class="paragraph"> <p>Das Projekt enthält nur das Plugin. Kein Verbrauchsbeispiel. Kein Um es zu testen, muss man ein externes Projekt erstellen, y das Plugin über`mavenLocal`oder ein zusammengesetzter Build, und nur dort überprüfen, dass es funktioniert.</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>Ein Gradle-Plugin ohne Verwendungsbeispiel ist eine Bibliothek ohne Integrationstests. Sie wissen nie ob die letzte Änderung hat die Benutzererfahrung zerstört.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_option_2_das_klassische_monorepo_includeplugin">Option 2 : Das klassische Monorepo (<code>include(":plugin")</code>)</h3> <div class="paragraph"> <p>Gradle`init`erzeugt`settings.gradle.kts`mit`include("plugin")`. Der Root und das Untermodul teilen denselben Daemon, dieselben Konfigurationen, Die gleichen Kataloge. Praktisch, aber gekoppelt.</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>Was klemmt :</p> </div> <div class="ulist"> <ul> <li> <p>Der root<strong>muss</strong>die gleiche Gradle-Version wie das Untermodul haben</p> </li> <li> <p>`libs.versions.toml`ist geteilt — gemeinsame Versionskataloge, Abhängigkeiten</p> </li> </ul> </div> <div class="paragraph"> <p>die von einem Modul zum anderen fliehen</p> </div> <div class="ulist"> <ul> <li> <p>Es ist nicht möglich, das Plugin unabhängig von root zu bauen.</p> </li> <li> <p>Die CI muss beide Module bauen, auch wenn nur das Plugin geändert wurde.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_option_3_der_composite_build_includebuild">Option 3: Der Composite Build (<code>includeBuild()</code>)</h3> <div class="paragraph"> <p>Wir trennen die beiden in getrennte Gradle-Builds und verbinden sie über <code>includeBuild("mon-plugin")`in`settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>Das ist schon besser. Der Build des Plugins ist isoliert. Aber der Verbraucher muss den externen Build explizit referenzieren — und die Ausgabe von `./gradlew tasks`an der Wurzel hängt von der richtigen Konfiguration des ab komposit. Das Klonen ist keine Zero-Konfiguration: man muss wissen, dass das Das Plugin befindet sich in einem separaten Ordner, das Root verweist darauf, usw.</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>Ich suchte etwas Besseres. Viel besser.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_zwei_unabhängige_builds_eine_konsumentenwurzel">Die Lösung: Zwei Unabhängige Builds, Eine Konsumentenwurzel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist das Muster, das ich schließlich übernommen habe :</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>Der Schlüssel:`{name}-plugin/`ist ein Gradle-Projekt <strong>vollständig und eigenständig</strong>. Er hat seinen eigenen Wrapper, seine eigenen Settings, seinen eigenen Katalog von Versionen. Es klont sich, baut sich, testet sich und veröffentlicht sich, ohne dass root erforderlich ist. Bescheid zu wissen über seine Existenz.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Der Root, er, macht nur <strong>eine</strong> Sache: das Plugin anwenden.</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>Drei Zeilen im Fall von`bakery-gradle`. Nichts mehr. Null`include()<code>, null`includeBuild()</code>, kein Unterprojekt. Ein standardmäßiger Gradle-Build, der ein Plugin wie jedes andere anwendet Welcher Konsument würde das tun?</p> </div> <div class="sect2"> <h3 id="_der_workflow">Der Workflow</h3> <div class="imageblock"> <div class="content"> <img src="./images/architecture-deux-builds.svg" alt="architecture deux builds" width="1773" height="5688"> </div> </div> </div> <div class="sect2"> <h3 id="_der_konkrete_workflow">Der konkrete Workflow</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="_warum_hat_mich_diese_architektur_erobert">Warum hat mich diese Architektur erobert?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Drei Vorteile, die kombiniert den Kosten der „Duplizierung“ entsprechen:</p> </div> <div class="sect2"> <h3 id="_natürliches_dogfooding_sofortiges_feedback">Natürliches Dogfooding, sofortiges Feedback</h3> <div class="paragraph"> <p>Der beste Test eines Gradle-Plugins besteht darin, ihn zu verwenden. Kein gemockter Einzeltest. Kein`GradleRunner`mit einem Projekt von Test. Ein <strong>echter</strong> Build der das Plugin auf echte Dateien appliziert.</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>Ist das Plugin kaputt, sagt das Root-Build das. Es muss nicht weitergehen. Ein externes Testprojekt suchen. Das Dogfooding ist das <strong>erste</strong>. Aufgabe, die ein neuer Mitwirkender startet. Das ist der definitive Smoke-Test.</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>Die Regel ist einfach: Wenn die Wurzel kompiliert und`./gradlew tasks` zeigt deine Plugin-Aufgaben an, das Plugin ist funktionsfähig. Keine Überraschung in Produktion.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_zero_config_klonierung">2. Zero-Config-Klonierung</h3> <div class="paragraph"> <p>Un `git clone &amp;&amp; ./gradlew tasks`und der Neuling sieht alles gehen ohne irgendetwas zu konfigurieren. Der`build.gradle.kts`Wurzel ist Die lebendige Nutzungsdokumentation des Plugins. Der`site.yml`daneben zeigt die erwartete Konfiguration.</p> </div> <div class="paragraph"> <p>Vergleiche mit der Alternative: ein README mit drei Absätzen, das erkläre wie builder das plugin ET wie builder das projekt de test. Ein neuer Beitragender liest das README flüchtig, irrt, öffnet ein Issue — obwohl die Information könnte <strong>ausführbar</strong> sein.</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>Die robusteste Dokumentation ist nicht die, die man liest. Das ist die, die<strong>führt aus</strong>. Der Stamm-Build ist die Dokumentation ausführbare Datei des Plugins.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_3_isolierte_builds_unabhängige_ci">3. Isolierte Builds, unabhängige CI</h3> <div class="paragraph"> <p>Das Plugin hat seinen eigenen Gradle-Wrapper, seinen eigenen Lebenszyklus, seine eigenen Tests. Sie können:</p> </div> <div class="ulist"> <ul> <li> <p>Gradle im Plugin aktualisieren ohne den Root zu berühren</p> </li> <li> <p>Eine Abhängigkeit im Plugin hinzufügen, ohne dass sie im Root austritt</p> </li> <li> <p>Das Plugin zerstören, ohne den Root-Build zu beeinflussen (solange du nicht</p> </li> </ul> </div> <div class="paragraph"> <p>Veröffentlichen Sie nicht die kaputte Version)</p> </div> <div class="ulist"> <ul> <li> <p>Eine CI, die das Plugin erstellt/testet, und eine andere, die es ausführt</p> </li> </ul> </div> <div class="paragraph"> <p>Wurzel — unabhängig</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="_die_anatomie_des_unterordners_name_plugin">Die Anatomie des Unterordners `{name}-plugin/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lassen Sie uns einen näheren Blick darauf werfen, was im Plugin-Ordner lebt:</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&lt;Project&gt; │ │ ├── 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>Alles ist da. Keine Streuung zwischen Wurzel und Unterordner. Der Entwickler, der am Plugin arbeitet, benötigt nie verlassen`codebase-plugin/`. Der Entwickler der das Plugin verwendet sieht nur die Wurzel — und das`build.gradle.kts`von 3 Zeilen Er sagt ihm alles, was er wissen muss.</p> </div> <div class="sect2"> <h3 id="_der_versionskatalog_zwei_verschiedene_dateien">Der Versionskatalog: Zwei verschiedene Dateien</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>(Wurzel)</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">Anzahl der Abhängigkeiten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2-3 (Plugin + Readme eventuell)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30+ (langchain4j, pgvector, cucumber&#8230;&#8203;)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Rolle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Das Plugin verbrauchen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstelle das Plugin</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Wer es liest</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Benutzer des Plugins</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Entwickler des Plugins</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Der Root hat einen absichtlich minimalen Katalog. Das Plugin hat einen Katalog vollständig. Eine Verwechslung ist unmöglich: jeder Build hat seinen eigenen Scope. von Abhängigkeiten.</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>Wenn du bereits eine Stunde damit verbracht hast, einen Abhängigkeitskonflikt zu debuggen Zwischen Ihrem Plugin und Ihrem Testprojekt verstehen Sie den Wert von Diese Trennung. Unabhängige Kataloge eliminieren dieses Problem. durch Konstruktion.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_was_man_nicht_macht">Was man nicht macht</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieses Muster ist nicht magisch. Es legt eine Beschränkung fest, die ich Er belastet mich gerne :</p> </div> <div class="paragraph"> <p><strong>Der Root erstellt das Plugin nicht.</strong> Sie müssen`publishToMavenLocal` ou Auf einem Repository bereitstellen, bevor root es konsumieren kann.</p> </div> <div class="paragraph"> <p>Es sind geringe Kosten, und es ist die <strong>bonne</strong> Beschränkung. Der root Verwendet das Plugin wie ein externer Client — über Maven. Genau. wie es ein Drittanbieter-Projekt tun würde. Wenn das Plugin nicht veröffentlichbar ist, der root sagt es Ihnen sofort.</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 &amp;&amp; ./gradlew publishToMavenLocal &amp;&amp; cd .. $ ./gradlew tasks --group=codebase</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_vergleich">Vergleich:</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">isoliertes Plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Monorepo`include()`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Komposit`includeBuild()`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Wurzel + unabhängiges Plugin</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`git clone &amp;&amp; gradlew tasks`gibt die Aufgaben des Plugins</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">Bitte stellen Sie den französischen Text bereit, den Sie übersetzen möchten, damit ich die Übersetzung ins Deutsche erstellen und alle Backticks unverändert lassen kann.</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">unabhängiges Build-Plugin vom 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">(no content)</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">Getrennte Katalogversionen</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">Keine`include()` 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">nativer Dogfood ohne Konfiguration</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">unabhängiges CI-Plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(output)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(empty)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Empty response)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Root ist ein Beispiel für echten Konsum</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">Could you please provide the French text you would like translated into German?</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Die rechte Spalte setzt Häkchen in alle Kästchen. Das ist der Grund, warum ich nicht Ich werde weiter zurückgehen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_dag_vertrag_ein_root_build_importiert_niemals_aus_einem_unterordner">Der DAG-Vertrag: Ein Root-Build importiert niemals aus einem Unterordner</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Architektur fügt sich natürlich in das DAG N0→N3 ein. von meinem workspace. Das Muster ist : <strong>das Plugin N2 ist das Hub von seinen eigenen Abhängigkeiten, die Wurzel N3 ist ein Terminal der die Hubs</strong> anwendet</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/contrat-dag-architecture.svg" alt="contrat dag architecture" width="1747" height="5508"> </div> </div> <div class="paragraph"> <p>Le <code>codebase-gradle/build.gradle.kts`macht 6 Zeilen. Keine`src/</code>, keine`buildSrc/<code>, kein`gradle/rag-bench.gradle.kts</code>. Genau <code>plugins { alias(libs.plugins.codebase) }`und die Repositories. Die ganze Komplexität lebt in`codebase-plugin/</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_die_scheinbare_duplikation_die_zeit_spart">Fazit: Die scheinbare Duplikation, die Zeit spart</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn ich jemandem diese Struktur zeige, die erste Reaktion ist oft : « Aber du hast zwei`gradlew`, zwei`settings.gradle.kts`, zwei`libs.versions.toml`— Das ist Duplikation !</p> </div> <div class="paragraph"> <p>Ja. Und nein.</p> </div> <div class="paragraph"> <p>Die „Duplizierung“ bedeutet, dieselbe Information an zwei Stellen zu reproduzieren. Hier sind es zwei <strong>unterschiedliche</strong> Dateien, die zwei <strong>unterschiedliche</strong> Zwecke dienen: der Katalog des Plugins (30+ Abhängigkeiten für builder) und der Katalog des Wurzels (2-3 Abhängigkeiten zum Verbrauch). Der Wrapper des Plugins (gesperrte Version für die Entwicklung) und der Wrapper der Wurzel (potenziell andere Version, für die Übung des Plugins).</p> </div> <div class="paragraph"> <p>Das ist keine Duplikation. Das ist die <strong>Trennung der Verantwortlichkeiten</strong> angewendet auf das Build-System. Jeder Build Es erledigt nur eine Sache. Die Wurzel verbraucht. Das Plugin baut sich.</p> </div> <div class="paragraph"> <p>Der Preis? Eine Bestellung`publishToMavenLocal`zwischen dem Build des Plugins Und das Build der Wurzel. Der Vorteil? Eine architektonische Klarheit, die spart stundenlanges Debugging im Nachhinein</p> </div> <div class="paragraph"> <p>Seit ich dieses Muster auf`bakery-gradle`, <code>plantuml-gradle</code>, <code>codebase-gradle</code>, und die anderen Plugins von`foundry/public/<code>, ich habe nicht niemals gezögert beim Öffnen eines Terminals in einem meiner Repositorys. Der erste Reaktion —</code>./gradlew tasks`— geht immer, gibt immer die richtigen Aufgaben und sagt mir sofort, ob alles in Ordnung ist.</p> </div> <div class="paragraph"> <p>Das ist es, die gute Architektur. Sie lässt sich nicht in einem README lesen. Es wird im Terminal getestet, in weniger als zehn Sekunden.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0105_integrer_graphify_workflow_gradle_post.html">Artikel 0105 — Graphify in einen Gradle-Workflow einbinden</a></p> </li> <li> <p><a href="0117_granularisation_oss_css_repositorie_workspace_post.html">Article 0117 — Die OSS/CSS-Granularisierung</a></p> </li> <li> <p>Article 0123 — Der Knowledge Graph als Empfehlungsmotor</p> </li> </ul> </div> </div> </div> Der Knowledge Graph als Empfehlungs-Engine: Wie ich die chronologisch « verwandten Artikel » getötet habe 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="#_die_szene_dienstag_12_mai_1730">Die Szene: Dienstag, 12. Mai, 17:30</a></li> <li><a href="#_die_diagnose_drei_arten_von_beziehungen_die_kein_template_sieht">Die Diagnose: Drei Arten von Beziehungen, die kein Template sieht</a></li> <li><a href="#_die_lösung_ein_gradle_pipeline_kein_hot_llm_aufruf">Die Lösung: Ein Gradle-Pipeline, kein Hot-LLM-Aufruf</a> <ul class="sectlevel2"> <li><a href="#_die_architektur_bakery_importiert_graphify_nicht_engine">Die Architektur: Bakery importiert Graphify, nicht Engine</a></li> <li><a href="#_die_pipeline_scan_graph_vorlage">Die Pipeline : Scan → Graph → Vorlage</a></li> <li><a href="#_chronologisches_fallback">Chronologisches Fallback</a></li> </ul> </li> <li><a href="#_die_emergente_ontologie_wenn_die_artikel_sich_zusammen_schließen_ohne_sich_zu_kennen">Die emergente Ontologie: Wenn die Artikel sich zusammen schließen, ohne sich zu kennen</a></li> <li><a href="#_der_dag_vertrag_wer_wen_wichtig_findet">Der DAG-Vertrag : Wer wen wichtig findet</a></li> <li><a href="#_was_wir_gewinnen_und_was_wir_nicht_gewinnen">Was Wir Gewinnen (Und Was Wir Nicht Gewinnen)</a></li> <li><a href="#_perspektiven_der_blog_als_öffentliches_wissensgraph">Perspektiven: Der Blog als öffentliches Wissensgraph</a></li> <li><a href="#_fazit_das_dateisystem_weiß_was_die_vorlage_ignoriert">Fazit : Das Dateisystem weiß, was die Vorlage ignoriert.</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 14 minutes</div> <p>Sie lesen einen Artikel über die Integration von pgvector mit LangChain4j. Am Ende der Seite, JBake schlägt Ihnen « Verwandte Artikel » vor. Sie klicken. Es handelt sich um einen Artikel über&#8230;&#8203; die Konfiguration. von Kitty Terminal. Was ist der einzige gemeinsame Punkt zwischen ihnen? Sie wurden veröffentlicht weniger als fünfzehn Tage Abstand. Das ist keine Empfehlung. Es ist ein als getarnter Kalender redaktionell.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_dienstag_12_mai_1730">Die Szene: Dienstag, 12. Mai, 17:30</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich lese einen meiner Artikel erneut — <a href="0106_knowledge_graph_outil_compréhension_codebase_post.html">dieser über das Knowledge Graph als Werkzeug zum Verständnis der Codebasis</a>. Der Inhalt ist dicht: Knoten, Kanten, Communities, PlantUML, Onboarding. Ein Artikel 15-minütige Lesetechnik, die mobilisiert`graphify-gradle`, <code>plantuml-gradle</code>, und die Konzepte der Graphentopologie.</p> </div> <div class="paragraph"> <p>Unten auf der Seite schlagen die « Verwandte Artikel » mir vor:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ein Artikel über Firebase Contact Form (0113)</p> </li> <li> <p>Ein Artikel über den Eager/Lazy-Mechanismus (0108)</p> </li> <li> <p>Ein Artikel über die Migration von Gradle‑Skript → Plugin (0102)</p> </li> <li> <p>Ein Artikel über die Kumulierung von Ollama Pro-Abonnements (0120)</p> </li> </ol> </div> <div class="paragraph"> <p>Drei dieser vier Artikel haben <strong>keinen</strong> Bezug zum Knowledge Graph. Sie sind da, weil sie die letzten veröffentlichten sind — zeitliche Nähe, nicht semantische Nachbarschaft</p> </div> <div class="paragraph"> <p>Ich schaue mir das Template an`post.thyme`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml">&lt;!-- Articles connexes (liens internes SEO) --&gt; &lt;th:block th:each="post,postStat : ${published_posts}"&gt; &lt;th:block th:if="${!post.uri.equals(content.uri) and postStat.index lt 4}"&gt; ... &lt;/th:block&gt; &lt;/th:block&gt;</code></pre> </div> </div> <div class="paragraph"> <p>`published_posts`ist eine chronologische Liste.`postStat.index lt 4`nimmt sie Die ersten vier, die nicht der aktuelle Beitrag sind. Das ist alles. Keine Logik der Ähnlichkeit. Kein Begriff des Inhalts. Nur eine Schleife.`for`verkleidet als Empfehlung.</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>Das ist kein Bug von JBake. Das ist das Standardverhalten von allem Statischer Site-Generator: Die Liste der Posts ist flach und nach Datum sortiert. Die Vorlage macht, was sie kann, mit dem, was sie hat.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Aber das ist kein Grund, es zu akzeptieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_diagnose_drei_arten_von_beziehungen_die_kein_template_sieht">Die Diagnose: Drei Arten von Beziehungen, die kein Template sieht</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mein Artikelkorpus — 23 Beiträge in 4 Monaten — hat eine reiche Struktur, die die chronologische Vorlage überschreibt vollständig:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Explizite Referenzen</strong> : Ich verwende`xref:`massiv in meinen Artikeln.</p> </li> </ol> </div> <div class="paragraph"> <p>Der Artikel 0122 verweist auf 0106 (knowledge graph) und 0116 (compartimentage) epistemisch). Diese Links sind redaktionelles <strong>hard linking</strong> — ich habe absichtlich entschieden, diese Konzepte zu verbinden.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Gemeinsame Tags</strong> : jeder Artikel hat`:jbake-tags:`. Der Artikel über</p> </li> </ol> </div> <div class="paragraph"> <p>Graphify + PlantUML (0105) a`gradle, graphify, plantuml, knowledge-graph`. Der Artikel über das Knowledge Graph (0106) hat <code>knowledge-graph, graphify, plantuml</code>. Drei gemeinsame Tags von sieben — 43% Überschneidung.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Ko-occurrente benannte Entitäten</strong> : « pgvector », « RAG », « embedding</p> </li> </ol> </div> <div class="paragraph"> <p>erscheinen zusammen in vier verschiedenen Artikeln. « LangChain4j » , Ollama », « plugin Gradle » in sechs anderen. Das sind keine Tags — das sind <strong>emergente Muster</strong> des Korpus, die nur ein NLP kann erkennen.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/trois-couches-relation-articles.svg" alt="trois couches relation articles" width="1742" height="5492"> </div> </div> <div class="paragraph"> <p>Heute nutzt meine Seite <strong>keine</strong> dieser drei Schichten. Sie nutzt Die Nullschicht: die Einfügereihenfolge in einer Java-Liste.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_ein_gradle_pipeline_kein_hot_llm_aufruf">Die Lösung: Ein Gradle-Pipeline, kein Hot-LLM-Aufruf</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die erste Versuchung wäre, während des Bake einen LLM aufzurufen: « Für Dieser Artikel findet die drei ähnlichsten Artikel im Korpus. Machen Sie das nicht.</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>Ein LLM-Aufruf zu jedem`./gradlew bake`Kostet Zeit, Geld, und Führt Nichtdeterminismus in deinem Build ein. Die Antwort des LLM kann zwischen zwei Builds wechseln, ohne dass der Inhalt sich geändert hat. Ihr CI wird nicht reproduzierbar, werden deine Tests flaky.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Die Lösung ist deterministisch: eine Gradle‑Pipeline, die den Graphen vorher berechnet. von Ähnlichkeit und speichert es in`graph.json`. Die Vorlage liest das Ergebnis — er löst nie eine Berechnung aus.</p> </div> <div class="sect2"> <h3 id="_die_architektur_bakery_importiert_graphify_nicht_engine">Die Architektur: Bakery importiert Graphify, nicht Engine</h3> <div class="paragraph"> <p>Das ist der wichtigste architektonische Punkt. Die Versuchung wäre die Zusammenarbeit verkabeln in`engine/build.gradle.kts`: engine angewendet graphify für den Scan, bakery für den Bake, und engine macht die Brücke zwischen beide.</p> </div> <div class="paragraph"> <p>Das ist ein Anti-Muster. Engine ist ein <strong>Verbraucher‑Terminal</strong> — es wendet an von Plugins implementiert es keine Geschäftslogik. Die Regel ist: <strong>Die Beweislast liegt beim proprietären Plugin.</strong></p> </div> <div class="imageblock"> <div class="content"> <img src="./images/bakery-import-graphify.svg" alt="bakery import graphify" width="1806" height="5700"> </div> <div class="title">Figure 1. Korrekte Architektur — Bakery importiert Graphify</div> </div> <div class="paragraph"> <p>Der DAG-Vertrag wird eingehalten: bakery (N2) importiert graphify (N0), N2 &gt; N0, keine Verstöße. Engine (N3) importiert Bakery (N2), N3 &gt; N2, OK.</p> </div> <div class="paragraph"> <p>Engine hat <strong>keine</strong> Codezeile, die referenziert`graph.json`, <code>relatedPosts</code>, oder jede andere Vorstellung von Ähnlichkeit. Er wendet bakery an, Punkt. Die Die Zusammenarbeit ist intern bei bakery.</p> </div> </div> <div class="sect2"> <h3 id="_die_pipeline_scan_graph_vorlage">Die Pipeline : Scan → Graph → Vorlage</h3> <div class="paragraph"> <p>Hier ist der komplette Pipeline in drei Schritten:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Scan</strong> (graphify) :`graphify-plugin`scanne den Workspace. In seiner</p> </li> </ol> </div> <div class="paragraph"> <p>In seiner aktuellen Form, erkennt es bereits die`xref:`zwischen`.adoc`und die stellt aus in`graph.json`wie der edges des Typs`reference`.<br> Wir bereichern es für den redaktionellen Inhalt: * Analysiere die JBake-Metadaten`:jbake-tags:`, <code>:jbake-description:</code>) von jedem`.adoc`Des Blogs * Berechnet die Co-Occurrences von Tags → Kanten`tag_cooccurrence`mit Gewicht * Extrahiert die benannten Entitäten aus den Beschreibungen mit TF-IDF → edges`entity_overlap` * Fügt einen Abschnitt ein`blog_articles`im`graph.json`existierend (empty)</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 -&gt; f.extension == "adoc" } .map { parseJbakeMetadata(it) } val nodes = articles.map { ArticleNode(it.slug, it.title, it.tags) } val edges = mutableListOf&lt;GraphEdge&gt;() // 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) : im Moment des`./gradlew bake`, `BakeryPlugin`Bett</p> </li> </ol> </div> <div class="paragraph"> <p>`graph.json`und löst die zugehörigen Artikel für jeden Beitrag.<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&lt;RelatedPost&gt; { val edges = graph.blogArticles.edges .filter { it.source == currentSlug || it.target == currentSlug } return edges .sortedByDescending { it.weight } .take(maxResults) .map { edge -&gt; 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>Template`post.thyme`) : Das JBake-Modell erhält jetzt eine Map</p> </li> </ol> </div> <div class="paragraph"> <p>strukturiert anstatt einer flachen chronologischen Liste.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml">&lt;!-- Articles connexes basés sur le Knowledge Graph --&gt; &lt;th:block th:if="${relatedPosts != null and !relatedPosts.empty}"&gt; &lt;section class="mt-5 pt-4 border-top"&gt; &lt;h2 class="h4 mb-3"&gt;Articles connexes&lt;/h2&gt; &lt;th:block th:each="related : ${relatedPosts}"&gt; &lt;div class="mb-2"&gt; &lt;a th:href="${content.rootpath} + ${related.uri}" th:text="${related.title}" class="fw-semibold"&gt;&lt;/a&gt; &lt;br/&gt; &lt;small class="text-muted"&gt; &lt;th:block th:each="reason,iterStat : ${related.reasons}"&gt; &lt;span class="badge bg-light text-dark" th:text="${reason}"&gt;&lt;/span&gt; &lt;/th:block&gt; &lt;/small&gt; &lt;/div&gt; &lt;/th:block&gt; &lt;/section&gt; &lt;/th:block&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Die Vorlage ist die gleiche — sie weiß nicht <strong>woher</strong> die Daten kommen. Nur der Vertrag zwischen bakery und JBake hat sich geändert:`published_posts`(Liste chronologisch) wird`relatedPosts`(gewichtete Karte nach dem Graphen).</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>Das Abzeichen « Grund » (Beispiel:`xref 0122`, <code>tag:gradle</code>, <code>cluster:pgvector-rag</code>) Erkläre dem Leser <strong>warum</strong> dieser Artikel relevant ist. Es ist nicht Es handelt sich lediglich um Transparenz — es ist Pädagogik zur Topologie von Ihr eigener Inhalt.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_chronologisches_fallback">Chronologisches Fallback</h3> <div class="paragraph"> <p>Si `graph.json`ist nicht vorhanden (build lokal ohne vorherigen Scan, erst Bereitstellung, CI, die den Graphify-Scan noch nicht integriert hat), das Template muss sich geschmeidig abbauen :</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&lt;RelatedPost&gt; { if (graph != null &amp;&amp; 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>Das Standardverhalten entspricht dem aktuellen Verhalten. Der Empfehlungsmotor ist eine <strong>schrittweise Verbesserung</strong> — kein incompatible Änderung.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_emergente_ontologie_wenn_die_artikel_sich_zusammen_schließen_ohne_sich_zu_kennen">Die emergente Ontologie: Wenn die Artikel sich zusammen schließen, ohne sich zu kennen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die interessanteste Schicht ist die dritte: die emergente Ontologie. Artikel, die nicht zitiert werden, die nicht die gleichen Tags haben, aber die <strong>von derselben Sache sprechen</strong> ohne es zu wissen.</p> </div> <div class="paragraph"> <p>Nehmen wir ein konkretes Beispiel. Drei Artikel aus meinem Korpus:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>0119 — Benchmark DGX Spark vs Cloud Abonnement LLM</p> </li> <li> <p>0121 — Gradle-Plugin zur Steuerung von zwei Ollama Pro-Instanzen</p> </li> <li> <p>0122 — Ratio Effizienz 27x 45x Flotte Experten KI</p> </li> </ol> </div> <div class="paragraph"> <p>Diese drei Artikel haben <strong>keinen</strong> xref untereinander. Ihre tags ne se sie decken sich nur zu 20 % (« ollama », « llm » gemeinsam). Aber ein leichtes NLP auf den Beschreibungen offenbart sich ein offensichtlicher Cluster: „Kosten“, „Abonnement“, Cloud », « GPU », « API-Schlüssel », « Ollama Pro », « Effizienz », « Verhältnis</p> </div> <div class="paragraph"> <p>Sie bilden ein ontologisches Cluster: <strong>l&#8217;économie du LLM self-hosted vs cloud</strong>. Dieser Cluster wird nirgendwo erklärt. Er entsteht aus dem Corpus.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/cluster-ontologique-exemple.svg" alt="cluster ontologique exemple" width="698" height="405"> </div> </div> <div class="paragraph"> <p>Dieser ontologische Cluster wird zu einem Edge Composite in`graph.json`:</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>NLP ist absichtlich leicht — TF-IDF + Cosine Similarity auf den Beschreibungen. Kein Bedarf an BERT, kein Bedarf an einem Sprachmodell. Der Korpus umfasst 23 Artikel, die Ähnlichkeitsmatrix passt in ein JSON-Datei von 50 KB.</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>Die Stärke des NLP kommt nicht von der Raffinesse des Algorithmus. aber der <strong>Größe des Korpus</strong> und der <strong>Qualität der Beschreibungen</strong>. Eine `:jbake-description:`gut geschriebene von 150 Zeichen enthält mehr von Signal für TF‑IDF, dass es sich um einen vollständigen Artikel von 3000 Wörtern handelt.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_der_dag_vertrag_wer_wen_wichtig_findet">Der DAG-Vertrag : Wer wen wichtig findet</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das ist der Punkt, an dem die architektonische Disziplin sich auszahlt. Der DAG N0→N3 definiert in`engine/build.gradle.kts`gibt eine einfache Regel: Kein Projekt ist wichtig ein Projekt höherer Ebene.</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">Consumer-Plugin</th> <th class="tableblock halign-left valign-top">Importiertes Plugin</th> <th class="tableblock halign-left valign-top">Konsumentenniveau</th> <th class="tableblock halign-left valign-top">Importiertes Niveau</th> <th class="tableblock halign-left valign-top">Gültig ?</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 &gt; N0 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Motor</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 &gt; N2 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Motor</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">✅ Technik OK, aber <strong>konzeptionell falsch</strong> — die Zusammenarbeit ist intern bei bakery</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Motor appliziert Bäckerei. Bäckerei appliziert graphify. Das ist alles. Wenn eines Tages Ich möchte den Vector-Store-Codebase (N1) hinzufügen, um zu recherchieren cross-corpus Semantik, bakery importiert sie auch. Engine ändert sich nicht.</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>Das Muster ist: <strong>das Plugin N2 ist der Hub seiner eigenen Abhängigkeiten</strong>. Die Engine N3 ist kein Hub – sie ist ein Terminal, das Hubs anwendet.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_was_wir_gewinnen_und_was_wir_nicht_gewinnen">Was Wir Gewinnen (Und Was Wir Nicht Gewinnen)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Hauptvorteil ist redaktionell, nicht technisch:</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">Vorher</th> <th class="tableblock halign-left valign-top">Nach</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Verwandte Artikel = 4 letzte Beiträge</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Verwandte Artikel = top 4 nach Gewicht im Knowledge Graph</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Leser liest aus RAG → Empfehlung Kitty Terminal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Leser liest RAG → Empfehlung pgvector, Chunking, Vektorspeicher</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine Transparenz über das Warum</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Abzeichen`xref 0122`, <code>tag:gradle</code>, `cluster:rag`sichtbar</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake-Standard, kein Aufwand, kein Wert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">deterministische, reproduzierbare, testbare Gradle-Pipeline</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine Lernkurve für den Leser</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Leser entdeckt die <strong>Topologie</strong> meines Inhalts</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Was wir <strong>nicht</strong> gewinnen :</p> </div> <div class="ulist"> <ul> <li> <p>Es ist kein « echt » Empfehlungsmotor (keine kollaborative</p> </li> </ul> </div> <div class="paragraph"> <p>Filtern, kein A/B-Testing, kein Feedback-Loop)</p> </div> <div class="ulist"> <ul> <li> <p>Die Qualität hängt vom Reichtum der JBake-Metadaten ab — wenn Ihre</p> </li> </ul> </div> <div class="paragraph"> <p>Beschreibungen sind leer, TF-IDF sieht nichts</p> </div> <div class="ulist"> <ul> <li> <p>Der NLP ist offline — die neuen Artikel werden nur bis</p> </li> </ul> </div> <div class="paragraph"> <p>nächster Scan (das ist gut: das Build bleibt deterministisch)</p> </div> </div> </div> <div class="sect1"> <h2 id="_perspektiven_der_blog_als_öffentliches_wissensgraph">Perspektiven: Der Blog als öffentliches Wissensgraph</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Funktion eröffnet eine breitere Perspektive: und wenn?<code>cheroliv.com</code> Wurde er selbst zu einem <strong>navigierbaren Wissensgraphen</strong>?</p> </div> <div class="paragraph"> <p>Artikel sind Knoten. Tags sind Gemeinschaften. xref sind die Kanten. Der Leser liest keinen einzelnen Artikel mehr — er navigiert durch ein <strong>Wissensgraph</strong> dessen aktueller Artikel der Einstiegspunkt ist</p> </div> <div class="paragraph"> <p>Stellen Sie sich eine Startseite vor, die nicht die chronologische Liste anzeigt , der letzten Posts, aber eine <strong>Karte des Korpus</strong> : ontologische Cluster, Pivotartikel (die mit den meisten Kanten), Lesepfade empfohlen „Wenn Sie den Artikel über Graphify gemocht haben, lesen Sie als Nächstes der auf dem Knowledge Graph als Werkzeug des Verständnisses )</p> </div> <div class="paragraph"> <p>Das ist kein Blog mehr. Es ist ein <strong>semantisches Atlas</strong>.</p> </div> <div class="paragraph"> <p>Und das ist keine Science-Fiction. Le`graph.json`existiert bereits. Ihm fehlt nur die Navigationsschnittstelle.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_das_dateisystem_weiß_was_die_vorlage_ignoriert">Fazit : Das Dateisystem weiß, was die Vorlage ignoriert.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Was ich am Dienstagabend entworfen habe, ist der Ersatz einer Heuristik. faul (die chronologische Reihenfolge) durch eine getreue Darstellung des Struktur meines Korpus (Knowledge Graph).</p> </div> <div class="paragraph"> <p>Die Vorlage`post.thyme`geändert sich nicht. Was sich ändert, ist, was wir gibt ihm zu essen. Zuvor: eine Java-Liste, sortiert nach`date`. Nach : ein gewichteter Graph aus drei Analyseschichten — Kreuzverweise, Mitvorkommen Tags, und emergente Ontologie mittels NLP</p> </div> <div class="paragraph"> <p>Die Schleife ist geschlossen. graphify scannt den Arbeitsbereich. Bakery liest das Das Diagramm nährt das Template. Der Leser sieht Empfehlungen. relevant. Und engine — der Dirigent — weiß nicht einmal dass All das existiert.</p> </div> <div class="paragraph"> <p>Das ist es, die richtige Architektur. Jedes Plugin macht eine Sache. Und der Verbraucherterminal muss nicht wissen, wie.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0105_integrer_graphify_workflow_gradle_post.html">Artikel 0105 — Graphify in einen Gradle-Workflow integrieren</a></p> </li> <li> <p><a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">Artikel 0106 — Der Knowledge Graph als Werkzeug des Verstehens</a></p> </li> <li> <p><a href="0117_granularisation_oss_css_repositorie_workspace_post.html">Artikel 0117 — Die Granularisierung OSS/CSS</a></p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Artikel 0121 — Plugin Gradle Steuern Zwei Instanzen Ollama Pro</a></p> </li> <li> <p>Artikel 0122 — 27× bis 45× wirksamer: Flotte von KI-Experten</p> </li> </ul> </div> </div> </div> 27× bis 45× wirksamer als Claude und GPT : wie eine Flotte von 23 fein abgestimmten KI‑Experten den Markt dominiert 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="#_das_problem_warum_das_finetuning_und_nicht_das_rag">Das Problem: Warum das Fine‑Tuning und nicht das RAG?</a></li> <li><a href="#_die_idee_eine_flotte_von_experten_kein_einzelnes_modell">Die Idee: eine Flotte von Experten, kein einzelnes Modell</a></li> <li><a href="#_die_codebasis_unter_der_lupe_7_900_dateien_144_000_zeilen">Die Codebasis unter der Lupe: 7 900 Dateien, 144 000 Zeilen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 22 minutes</div> <p>Wenn man ein LLM für die tägliche Softwareentwicklung benutzt, stößt man immer wieder auf dieselbe Hürde: Das Modell kennt <strong>dein</strong> codebase nicht. Es weiß nicht, dass du solch ein Muster vonhttps://fr.wikipedia.org/wiki/Graphe_orient%C3%A9_acyclique[DAG], wie diese Gradle-Konvention, wie diese epistemologische Schichtung in eurenhttps://fr.wikipedia.org/wiki/AsciiDoc[.adoc]. Dann wird ihm Kontext injiziert, man wiederholt, korrigiert, iteriert. Und die Zeit — und das Geld — vergeht.</p> </div> <div class="paragraph"> <p>Ich habe also die Frage direkt gestellt: Wie viel würde ein Team von auf meinem Workspace fein abgestimmten Modellen kosten, das Code <strong>in meinem Stil</strong> ausspucken kann, ohne dass man ihnen jedes Mal erklären müsste? Und insbesondere: Wie verglichen sich diese Herangehensweise mit den klassischen proprietären Lösungen — Claude, GPT, Gemini, Grok?</p> </div> <div class="paragraph"> <p>Die Antwort hat mich überrascht. Viel weniger als das, was ich mir vorgestellt hatte. Und das Kosten-Nutzen-Verhältnis gegenüber den Giganten der Branche ist unanständig. Hier ist die vollständige Aufschlüsselung.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_warum_das_finetuning_und_nicht_das_rag">Das Problem: Warum das Fine‑Tuning und nicht das RAG?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das RAG ist gut. <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. Aber das RAG hat einen fundamentalen Fehler: Bei jeder Abfrage muss du den relevanten Kontext wieder einfügen. Dein Prompt wird länger, deine Latenz explodiert, und das Modell <strong>verinnerlicht</strong> deine Muster niemals — es liest sie jedes Mal wie ein externes Dokument.</p> </div> <div class="paragraph"> <p>Das Feintuning hingegen ist das Muskelgedächtnis. Das Modell <strong>weiß</strong>, dass du schreibst.<code>build.gradle.kts`mit aufgezeichneten Aufgaben via`tasks.register</code>, dass deine`AGENTS.adoc`Sie folgen einer standardisierten Syntax, dass dein Arbeitsbereich in Bezirke strukturiert ist. Er muss nicht daran erinnert werden.</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>Der Fine-Tune ist kein Ersatz für RAG. Es ist eine ergänzende Schicht. RAG bleibt für Daten relevant, die sich häufig ändern (Logs, Tickets, aktuelle Commits). Der Fine-Tune ist für das <strong>strukturelle</strong> und <strong>stilistische</strong> Wissen auf lange Sicht.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_die_idee_eine_flotte_von_experten_kein_einzelnes_modell">Die Idee: eine Flotte von Experten, kein einzelnes Modell</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ein einzelnes, auf meinem gesamten Workspace fein abgestimmtes Modell ist schon gut. Aber es ist suboptimal. Mein Workspace deckt sehr unterschiedliche Bereiche ab:</p> </div> <div class="ulist"> <ul> <li> <p>Gradle-Plugins (Kotlin, Konventions-Plugins, zusammengesetzte Builds)</p> </li> <li> <p>DAG-Engine (Kotlin, Planung, Ausführung)</p> </li> <li> <p>LLM-Agenten (Python, LangChain4j, RAG)</p> </li> <li> <p>Architektonische Dokumentation (AsciiDoc, Governanz)</p> </li> <li> <p>Infra/DevOps (Docker, GitHub Actions, CI/CD)</p> </li> </ul> </div> <div class="paragraph"> <p>Ein einzelnes Modell sollte überall gut sein, aber nirgendwo hervorragend. Die Lösung? Eine<strong>Flotte spezialisierter Modelle</strong>, mit einem orkestrateur, der jede Anfrage an den richtigen Experten weiterleitet.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FAFAFA skinparam defaultFontSize 13 package "Ollama Cloud" { rectangle "DeepSeek V4-Pro 1.6T / 49B Aktiva" as V4Pro #FF6B6B ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FAFAFA skinparam defaultFontSize 13 package "Ollama Cloud" { rectangle "DeepSeek V4-Pro 1.6T / 49B Aktiva" as V4Pro #FF6B6B rectangle "6× V4-Flash-FT 292B / 13B Aktiva" as Flash #4ECDC4 rectangle "6× Gemma4 26B-FT 26B / 3.8B Aktiva" as Gemma #FFE66D rectangle "5× Qwen3.6 35B-FT 35B / 3B aktive" as Qwen36 #A8E6CF rectangle "5× Qwen3.5 35B-FT\n35B / 3B aktive" as Qwen35 #FF8B94 } note bottom of Qwen35 À partir de 17€/mois (1× Ollama Pro annual) Extensible par cumul de comptes Pro selon la méthode Docker. end note actor Utilisateur as User User --&gt; V4Pro : Requête V4Pro --&gt; Flash : "komplexe Gradle-Aufgabe" V4Pro --&gt; Gemma : "AsciiDoc-Formatierung" V4Pro --&gt; Qwen36 : "Refactoring Kotlin" V4Pro --&gt; Qwen35 : "Bash-Skript" note right of V4Pro L'orkestrateur route la requête vers l'expert le plus pertinent. Zéro prompt engineering répétitif. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Die Gesamtflotte :<strong>1 Orchestrator + 22 Experten = 23 Modelle</strong>. Und die monatlichen Inferenzkosten?<strong>17 €/Monat</strong>Ein Ollama Pro Jahresabonnement – erweiterbar durch Aufstockung der Konten bei Überschreitung der Quoten, wie in <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">meiner Multi‑Konto‑Docker‑Methode</a> gezeigt. Wir starten bei 17 € und fügen pro Stufe je nach aktuellem Bedarf 20 € hinzu. Keine Verschwendung.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_codebasis_unter_der_lupe_7_900_dateien_144_000_zeilen">Die Codebasis unter der Lupe: 7 900 Dateien, 144 000 Zeilen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor ich die Kosten des Trainings schätze, muss ich wissen, was ich trainieren soll. Ich habe meinen Workspace auditiert und dabei alles rigoros ausgeschlossen, was von Git ignoriert wird :</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/ ---- Hier ist das Ergebnis für die ausschließlich verfolgten Dateien: [cols="2,2"] |=== |Metrisch |Wert |Verfolgte Quelldateien |**7 896** |Zeilen Code (LOC) |**143.805** |Git-Repositories |**26** |Hauptsprachen |Kotlin (1 903), AsciiDoc (2 765), Python (5 029) |=== [IMPORTANT] ==== Diese 5 000+ Python-Dateien enthalten die`runtimes/`von Notebooks und Hilfsskripten. Der Anwendungs- oder Applikationskern (Gradle-Plugins, DAG-Engine, Agenten) besteht hauptsächlich aus Kotlin und AsciiDoc. ==== Aus dieser Masse schätze ich, dass ich ein synthetisches Dataset generieren kann von**~170 Millionen Tokens**über ein LLM-Instruktor (Destillation der Codebase in Instruktions-/Antwort-Paare). === Details des Datensatzes nach Expertenart [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 ---- == Die Wahl der Modelle: 100% MoE, null dicht Das ist der Ort, an dem die Architektur wirklich effizient wird. Ein *dichtes* Modell aktiviert alle seine Gewichte bei jedem Token. Ein *MoE*-Modell (Mischung aus Experten) aktiviert nur einen Bruchteil seiner Parameter. Die Kosten für Inferenz — und Fine‑Tuning — sind proportional zu den Parametern.**aktiviert**, nicht zu den Parametern**gespeichert**. Schauen wir, was der Markt heute bei MoE auf Ollama Cloud anbietet : [cols="3,2,2,1,3"] |=== |Modell |Gesamtparameter |Aktiviert |Aktivierung |Ollama Cloud |DeepSeek V4-Pro |1.6T |49B |3.1% |✅ eingeboren |DeepSeek V4-Flash |292B |13B |4.5% |nativer |Gemma 4 26B-A4B |26B |3,8Mrd. |14.6% |✅ gebürtig |Qwen3.6-35B-A3B |35B |3B |8.6% |❌ (noch nicht integriert) |Qwen3.5-35B-A3B |35B |3B |8.6% |einheimisch |Qwen3.5-27B |27B |27B |100% dicht |eliminiert |❌ Qwen3.5-4B/9B |4B/9B |4B/9B |100% dicht |eliminiert |❌ Gemma 4 31B |31B |31B |100% dicht |eliminiert |🧪 Gemma 4 E2B/E4B |5B/8B |5B/8B |100% dicht |Validierungspipeline |=== [CAUTION] ==== Die Aktivierungsrate ist das diskriminierende Kriterium. Ein Gemma 4 26B-A4B aktiviert nur 3,8 B von seinen 26 B Parametern — das ist 7‑mal weniger als ein dichter 27 B‑Modell bei vergleichbaren Leistungen eines Coding‑Agents (77,1 % gegenüber 80 % auf LiveCodeBench v6). ==== === Warum ich die dichten Modelle aufgebe Die Ausnahme: die Gemma 4 E2B und E4B. Diese beiden Modelle, unter Apache 2.0, sind perfekt, um ein Training-Pipeline zu testen und zu validieren, zu geringen Kosten. Ein Lauf von 2-3 Stunden auf einem E2B kostet weniger als 5 $ — wenn das Dataset oder die Hyperparameter fehlerhaft sind, weiß man das für ein paar Dollar. Sobald das Pipeline eingespielt ist, können sie sogar für ultra-mikro-Aufgaben verwendet werden (triviales Reformatting, binäre Klassifizierung). Aber für die Experten der Hauptflotte bleibe ich bei MoE. Hier ist der Grund: .Aber nicht nur: die Gemma 4 E2B/E4B, Experten für feine Anonymisierung [NOTE] ==== Google hat diese kleinen Modelle als wettbewerbsfähig im nativen Tool-Calling konzipiert — sie können Funktionen aufrufen, reguläre Ausdrücke bearbeiten, Muster suchen. Nach dem Feintuning an Beispielen für Anonymisierung (E‑Mails, Tokens, UUIDs, Dateipfade), sie werden zu**Dataset-Anonymisierer**ultraschnell. Ihnen wird ein Block aus Rohtext gegeben, sie rufen`sed`/`regex`Sie verwenden einen tool call und geben den bereinigten Block zurück. Die Inferenzkosten sind vernachlässigbar: 5B aktiviert, es passt auf eine einzige Einsteiger‑GPU. Diese Modelle sind keine Fachexperten — sie sind**spezialisierte Arbeiter**in der Produktionskette des Datensatzes ==== * Seine Trainings-VRAM (auch bei QLoRA) ist proportional zu**27B Gesamtbeträge** * Seine Trainingszeit ist proportional zu**27B aktiviert** Vergleichen wir mit einem Qwen3.6-35B-A3B (MoE): [cols="3,2,2,2"] |=== | |Qwen3.5-27B (dicht) |Qwen3.6-35B-A3B (MoE) |Verhältnis |VRAM QLoRA |~55 GB |~35 GB |1.6× |GPU-Stunden (8M tok) |ca. 12 Uhr |~4 Std. |**3×** |Kosten pro Feinabstimmung |~$24 |~$8 |**3×** |SWE-bench Verifiziert |75.0% |73.4% |vergleichbar |=== Die MoE kostet 3× weniger zu trainieren für eine Agent-Coding-Performance innerhalb von 5 %. Bei 22 Experten beläuft sich der Unterschied auf Tausende Euro. == Trainingsschätzung: 811 H100-Stunden Ich habe die Trainingskosten modellweise aufgeschlüsselt, in QLoRA 4-bit, mit den oben beschriebenen Datensätzen. === Micro-Experten MoE leicht (3-3,8B aktiviert) Diese Modelle benötigen 1 H100 (80 GB) pro Lauf. Der VRAM des Modells in Q4 beträgt etwa 13–18 GB, was ausreichend Platz für die LoRA-Optimierer-Zustände und die Aktivierungen lässt. [cols="4,2,3,2"] |=== |Modell |Anzahl der Durchläufe |GPU-Stunde/Lauf |Gesamt GPU-Stunden |Gemma 4 26B-A4B-FT |6 |3.5 h |**21 Uhr** |Qwen3.6-35B-A3B-FT |5 |4.0 h |**20 Uhr** |Qwen3.5-35B-A3B-FT |5 |4.0 h |**20 Stunden** |*Zwischensumme Mikro* | | |*61 h* |=== === Executives V4-Flash (13B aktiviert / 292B gespeichert) DeepSeek V4-Flash ist ein Sonderfall. Obwohl nur 13B pro Token aktiviert sind, wiegt das vollständige Modell im Q4 ~142 GB — alle Experten müssen während des Trainings im VRAM sein. Daher muss**3× H100**pro Lauf, um bequem zu sein. [cols="4,2,3,3,2"] |=== |Modell |Datensatz |GPUs |Stunden |Gesamt GPU-Stunden |V4-Flash-Base allgemein |50M tok |3× H100 |50 h |**150 Stunden** |V4-Flash Experte ×5 |15M tok |3× H100 |40 h |**600 h** |Zwischensumme Führungskräfte | | | |*750 h* |=== [cols="3,2,1"] |=== |**Gesamt** | |**811 H100-h** |=== [NOTE] ==== Zum Vergleich würde ein vollständiges Fine-Tuning des V4-Flash (ohne QLoRA, alle Gewichte) ~4 000 H100-Stunden kosten, nur für die 6 Modelle. QLoRA reduziert die Kosten um den Faktor 5. Das ist die einzige Möglichkeit, das Projekt in diesem Umfang wirtschaftlich rentabel zu machen. ==== === GPU-Tarife: wer leiht was im Mai 2026 Ich habe die wichtigsten H100-Vermieter benchmarked. Der Preis pro Stunde, für 811 Stunden. [cols="3,2,2,2"] |=== |Vermieter |$/H100·h |Gesamt 811h |Zuverlässigkeit |**Vast.ai Spot** |$1.60 |**$1.298** |★★☆ unterbrechbar |**Crusoe Cloud** |$2.00 |**$1 622** |★★★★ zuverlässiges Rechenzentrum |FluidStack |$1.98 |$1 606 |(Empty output) |TensorDock |$1.80 |$1 460 |★★☆ |RunPod |$2.29 |$1 857 |★★★ guter Kompromiss |CoreWeave |$2.25 |$1 825 |★★★★ Unternehmen |Lambda Labs |$2.49 |$2 019 |★★★★ Premium |=== [TIP] ==== Vast.ai Spot ist am günstigsten, aber deine Runs können jederzeit unterbrochen werden. Für Training ist das riskant. Crusoe zu $2,00/h ist das beste Preis-Leistungs-Verhältnis hinsichtlich Zuverlässigkeit. Der Aufpreis von $324 gegenüber Vast ist den Seelenfrieden wert. ==== === Wall-clock: Wie lange dauert das gesamte Training? Mit nur einem Knoten 3× H100 dauern die 31 Läufe (1 Generalist + 30 Experten) etwa**12 Tage**im Sequentiellen. Wenn du 2 Knoten parallel mietest, fällt es auf**6 Tage**. In der Praxis können die Mikro-Experten auf separaten Knoten laufen (jeweils ein H100), während die V4-Flash den 3× H100-Knoten belegt. Mit intelligenter Planung : ---- 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) 7 Tage Miete, alles gefaltet. == Die Inferenz: 23 Modelle auf Ollama Cloud ab 17€/Monat Es ist der eleganteste Teil der Architektur. Ollama Cloud ermöglicht das Hochladen privater Modelle (Funktion des Pro-Plans). Meine 22 fein abgestimmten Modelle werden nach`.gguf`Auf meinem Ollama-Bereich, als privat gekennzeichnet und über die Standard-API zugänglich. [plantuml, inference-flow, svg] ---- @startuml skinparam backgroundColor #FAFAFA skinparam defaultFontSize 12 |Utilisateur| start :Tâche de développement; |Orkestrateur (V4-Pro)| :Classifier la tâche\n(domaine + complexité); if (Tâche simple,\nspécialisée ?) then (oui) :Router vers micro-expert\n(Gemma 4 26B-A4B-FT\n ou Qwen3.6-35B-A3B-FT); elseif (Tâche complexe,\nconventions fortes ?) then (oui) :Router vers exécutif\n(V4-Flash-FT); else (non) :Résoudre avec V4-Pro\n(architecture, décision); endif |Modèle ciblé| :Génère le code/output\n**dans mon style**,\n90%+ first-shot correct; :Retourne la réponse; stop @enduml ---- === Wir starten bei 17€/Monat, wir skalieren bei Bedarf. Der Ollama-Pro-Plan (17 €/Monat jährlich) erlaubt drei konkurrierende Cloud‑Modelle. In dieser Architektur benötige ich niemals mehr als 2‑3 Experten gleichzeitig : * Die Klassifizierungsphase (V4-Pro) belegt 1 Slot, einige Sekunden * Der gezielte Experte belegt ein Slot, die Zeit zur Generierung seiner Antwort * Der dritte Slot bleibt für parallele Aufgaben reserviert. Wenn die Nutzung steigt, füge ich zusätzliche Pro-Konten über die Docker-Methode hinzu, die in xref:0120_cumuler_deux_abonnements_ollama_pro_docker_post.adoc[mon article sur le cumul d'abonnements] beschrieben ist. Kein Max-Plan für 100 €/Monat — ich füge nur das hinzu, was ich wirklich brauche. Der einzige begrenzende Faktor ist der**GPU-Zeit-Quota**Ollama-Monatsplan (50× der kostenlose Plan für Pro). Für meine Nutzung von einigen hundert Anfragen pro Tag ist das völlig ausreichend. [IMPORTANT] ==== Die marginalen Kosten eines Aufrufs von V4-Pro (49B aktiviert) gegenüber Gemma 4 26B-A4B (3.8B aktiviert) sind das**auch für mich: null**. Das Ollama-Paket gleicht die Compute-Differenz aus. Mein einziger Indikator ist die Latenz. ==== === Das Routing in der Praxis</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> <div class="paragraph"> <p>Volume de requêtes estimé : ~500/jour</p> </div> <div class="paragraph"> <p>├─ 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</p> </div> <div class="listingblock"> <div class="content"> <pre>Die Masse des Verkehrs verläuft über die Kleinen. Das große Modell greift nur als letzter Ausweg ein. == Der schmerzhafte Vergleich: Claude, GPT, Gemini, Grok gegen meine Flotte Hier wird die Kluft schwindelerregend. Schauen wir, was das gleiche Arbeitvolumen (500 Anfragen/Tag, ~300 Eingabetoken + 2 000 Ausgabetoken im Durchschnitt) mit den proprietären Lösungen des Marktes im Mai 2026 kosten würde. === Anthropic — Claude (Preise Mai 2026) Anthropic hat seine Preise kürzlich *gesenkt*. Der Druck von Open-Weight-Lösungen wie DeepSeek und Qwen wird spürbar. [cols="3,2,2,2,2"] |=== |Modell |$/MTok |Output $/MTok |Tageskosten |**Kosten/Monat** |Opus 4.7 (der + intelligente) |$5 |$25 |$25.75 |**$772** |Sonnet 4.6 (ausgeglichen) |$3 |$15 |$15.45 |**$463** |Haiku 4.5 (der Schnellste) |$1 |$5 |$5.15 |**$154** |=== [CAUTION] ==== Diese Tarife sind *nach* der letzten Preissenkung von Anthropic (Mai 2026). Davor kostete Opus $15/$75 pro MTok. Die Angst vor Open-Weight ist real. ==== Sogar Claudes günstigstes Modell — Haiku 4.5 für**154€/Monat**— kostet 9‑mal mehr als mein Ollama‑Pro‑Abonnement zu 17 €. Und Haiku kennt meine Codebasis nicht, generiert nicht in meinem Stil und erfordert systematisches Prompt‑Engineering. Das intelligenteste — Opus 4.7 — sprengt das Budget an**772€/Monat**für ein bescheidenes Volumen von 500 Anfragen pro Tag. also**45× teurer**que ma solution. === OpenAI — GPT (Preise Mai 2026) [cols="3,2,2,2,2"] |=== |Modell |$/MTok |$/MTok |Kosten/Tag |**Kosten/Monat** |GPT 5.5 (der intelligenteste) |$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** |=== Auch das Modell „ökonomisch“ von OpenAI — GPT 5.4 Mini für 139 €/Monat — kostet achtmal mein Abonnement, da es nichts von meinen Konventionen weiß und ein schweres Prompt‑Engineering erfordert. GPT 5.5, ihr Flaggschiff:**927€/Monat**. Für *zero-shot* auf meiner Codebasis. Mit 2-3 Iterationen pro Aufgabe aufgrund des nicht beherrschten Stils verdoppelt sich der wirkliche monatliche Kostenaufwand leicht. === Google — Gemini (Preise Mai 2026) [cols="3,2,2,2,2"] |=== |Modell |$/MTok |Ausgabe $/MTok |Kosten/Tag |**Kosten/Monat** |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 für 46 €/Monat ist preislich wettbewerbsfähig — aber ohne Fine-Tuning erzeugt er generischen Code. Kein *Cheroliv*-Code. === Grok — xAI (Tarife Mai 2026) [cols="3,2,2,2,2"] |=== |Modell |$/MTok |$/MTok |Kosten/Tag |**Kosten/Monat** |Grok 4 |$4 |$16 |$16.48 |**$494** |Grok 4 Mini |$0.80 |$3.20 |$3.30 |**$99** |=== === Microsoft — Azure OpenAI (Preise Mai 2026) Azure appliziert die gleichen Preise wie die direkte OpenAI-API, berechnet jedoch zusätzlich die Infrastruktur und das Netzwerk. Für den verwalteten Dienst muss mit einem Aufschlag von 10-20% gerechnet werden. [cols="3,2,2,2,2"] |=== |Modell |$/MTok |Ausgabe $/MTok |Kosten/Tag |**Kosten/Monat** |GPT 5.4 (Azure, Global) |$2.50 |$15 |$15.45 |**$463** |GPT 5.4 + Infrastruktur |Zusatzkosten 15% |Aufschlag 15% |$17.77 |**$533** |=== [NOTE] ==== Die genannten Tarife beziehen sich auf die API, nicht auf die « Chat »-Abonnements (Claude Pro zu $20/Monat, ChatGPT Plus zu $20/Monat). Hier wird die *Entwickler*-Nutzung verglichen, bei der du täglich Hunderte von Anfragen über die API aneinanderreihst, um zu generieren, zu refaktorisieren und zu dokumentieren. Die öffentlichen Abonnements haben Kontingente, die längst vor 500 Anfragen pro Tag überschritten werden. ==== === Die endgültige Vergleichstabelle [cols="3,2,2,2,2,2"] |=== |Lösung |Kenntnis der Codebasis |Integrierter Stil |Kosten/Monat |Iterationen |**Effektivkosten** |**Meine Flotte (Ollama Pro)** |✅ feinabgestimmt |In den Gewichten |**17€** |0-1 |**17€** |Claude Opus 4.7 |�❌ Zero-Shot |�❌ Erforderlicher Prompt |$772 |2-3 |$1 500-2 300 |Claude Haiku 4.5 |❌ Zero-shot |Erforderlicher Prompt |$154 |3-4 |$460-615 |GPT 5.5 |❌ Zero-shot |�❌ Notwendiger Prompt |$927 |2-3 |$1 854-2 781 |GPT 5.4 |❌ Zero-shot |�❌ Erforderlicher Prompt |$463 |2-3 |$925-1 390 |GPT 5.4 Mini |❌ Zero-shot |�❌ notwendiger Prompt |$139 |3-5 |$417-695 |Gemini 3.1 Pro High |Zero-shot |Erforderlicher Prompt |$540 |2-3 |$1 080-1 620 |Grok 4 |(empty) |notwendiger Prompt |$494 |2-3 |$988-1 482 |**Azure GPT 5.4** |❌ Zero-shot |❌ Erforderlicher Prompt |$533 |2-3 |$1 066-1 600 |=== [plantuml, cost-comparison, svg]</pre> </div> </div> <div class="paragraph"> <p>@startuml skinparam backgroundColor #FAFAFA</p> </div> <div class="paragraph"> <p>title Kosten-Nutzen-Verhältnis — meine Flotte vs der Markt (Mai 2026) rectangle "17 €/Monat" as OURS #4ECDC4 rectangle "Opus 4.7 772€" as OPUS #FF6B6B rectangle "Sonett 4.6 463€" as SONNET #FF8B94 rectangle "GPT 5.5 927€" as GPT #FFD93D rectangle "Gemini 3.1 Pro 540€" as GEMINI #6C5CE7 rectangle "Grok 4 494€" as GROK #A8E6CF rectangle "Haiku 4.5 154€" as HAIKU #DFE6E9 rectangle "GPT 5.4 Mini 139€" as MINI #B2BEC3</p> </div> <div class="paragraph"> <p>note bottom of OURS Avec fine-tune intégré. Zéro prompt engineering. 90%+ first-shot correct. end note</p> </div> <div class="paragraph"> <p>@enduml</p> </div> <div class="listingblock"> <div class="content"> <pre>17€/Monat für 23 KI-Experten, die fein abgestimmt sind. Der Flagship Claude Opus 4.7 kostet**45× teurer**pour eine geringere Qualität auf *meinem* codebase. GPT 5.5 kostet**54-mal teurer**. Selbst das günstigste Modell auf dem Markt (Gemini Flash für 46€) kostet**2.7× mehr**ohne die Kenntnis meines workspace. Das Urteil ist eindeutig: das Fine‑Tuning auf MoE-Architekturen im Jahr 2026 ist nicht nur « günstiger». Es ist ein Faktor der Effizienz von**27× bis 54×**Über das Kosten-/Qualitätsverhältnis gegenüber proprietären Lösungen. Anthropic, OpenAI, Google – sie wissen es alle, und deshalb senken sie in Panik ihre Preise. == Der Effizienzfaktor: 5-8× vs. V4-Pro allein verwenden Vergleichen wir die beiden Extreme. === Szenario A: nur V4-Pro für alles [cols="3,2"] |=== |metrisch |Wert |Kenntnis der Codebase |0 (zero-shot) |Konvention Namensgebung |40-60% Erstschuss-korrekt |Erforderliches Prompt‑Engineering |Ja, systematisch |Iterationen pro Aufgabe |2-3 |Inferenzkosten |$100/Monat (Ollama Max) |Durchschnittliche Latenz |~20 tok/s + Netzwerk |=== === Szenario B: orkestrierte MoE-Flotte [cols="3,2"] |=== |Metrik |Wert |Kenntnis des Codebases |integriert (Feinabstimmung) |Namenskonvention |90-95% erster Schuss korrekt |Prompt-Engineering |Nein (der Stil ist in den Gewichten) |Iterationen pro Aufgabe |0-1 |Kosten Inferenz |$60/Monat (3× Ollama Pro) |Durchschnittliche Latenz |~50 Tok/s (leichte Modelle) |=== [cols="4,2,2,2"] |=== |Dimension |V4-Pro allein |MoE Flotte |Faktor |Monatliche Cloudkosten |$100 |**$60** |1.7× |Einzufügender Kontext |Hoch (prompt) |**Null** |∞ |Durchschnittliche Iterationen |2-3 |**0-1** |2-3× |Gefühlte Latenz |20 tok/s |50 tok/s |**2.5×** |Erster Schuss korrekt |50% |90%+ |**1,8×** |=== **Gesamt-Effizienzfaktor : 5-8×**— in empfundener Entwicklerproduktivität. [NOTE] ==== Der Faktor wird nicht in Tokens oder Dollar gemessen. Er wird gemessen in « wie viel Zeit ich dafür aufwende, dem Modell zu erklären, was es bereits wissen sollte ». Bei fein abgestimmten Modellen strebt diese Zeit gegen null. ==== == Das komplette Budget: eine einmalige Investition, ein lächerlicher Pauschalbetrag [cols="3,2"] |=== |Stelle |Betrag |GPU-Training (811 H100-h, Crusoe $2/h) |**$1 622** |Erstellung synthetischer Datensätze (LLM-API) |**$400** |Schlussfolgerung (Ollama Pro jährlich, $17/Monat) |**$204** |**Gesamt erstes Jahr** |**$2 226** |**Monatsäquivalent** |**$186** |**Geschätzte Kosten pro Anfrage** |&lt; $0.01 |=== [plantuml, budget-breakdown, svg]</pre> </div> </div> <div class="paragraph"> <p>@startuml skinparam backgroundColor #FAFAFA</p> </div> <div class="paragraph"> <p>rectangle "Budget Jahr 1: $2 226" as Total #E8E8E8 { rectangle "Training GPU $1.622 (73%)" as Train #FF6B6B rectangle "Datensatz Destillation $400 (18%)" as Data #FFE66D rectangle "Ollama Pro $204 (9%)" as Cloud #4ECDC4 }</p> </div> <div class="paragraph"> <p>note bottom of Total $186/mois équivalent année 1. Dès l&#8217;an 2 : $17/mois. Amorti par ~$235 de CA mensuel avec marge 95%. end note</p> </div> <div class="paragraph"> <p>@enduml</p> </div> <div class="listingblock"> <div class="content"> <pre>$186/Monat im ersten Jahr**$17/Monat**Ab dem Jahr 2. Der Preis eines Premium‑Netflix‑Abonnements für ein Team von 23 KI‑Experten, die rund um die Uhr verfügbar sind und Code *in meinem Stil* schreiben, ohne dass ich ihnen meine Konventionen erklären müsste. === Die Rentabilitätsberechnung Mit edster.cloud und seiner Marge von ~95% liegt der Break-even-Punkt bei**~$2 340 zusätzlicher CA**für das Jahr. In der Praxis: * 1 Software-Pilotierungsmission → $3 000-5 000 → abgedeckte Investition + Gewinn * 1 Firmenschulung → $5 000-10 000 → bequem * Der implizite Upsell : "Mein KI-Team beherrscht meine Software-Schmiede" → kommerzielle Differenzierung Ab dem zweiten Jahr muss das Training nicht mehr bezahlt werden (ausgenommen Aktualisierung des Datensatzes). Die jährlichen Kosten fallen auf**$204**($17/Monat). Das Kosten/Wert-Verhältnis ist das eines Einhorns: praktisch null. == Die Grenzen des Trainings Dies bleibt eine *Daumenpeilung*. Mehrere Variablen können das Budget ändern: [cols="2,3"] |=== |Variable |Auswirkung |Generierung des synthetischen Datasets |Wenn die Destillations-API versagt (Halluzinationen, falsch geformte Paare), braucht es menschliche Zeit zum Kuratieren. Versteckte Kosten. |GPU-Zeit-Quoten von Ollama |Wenn die Nutzung das Kontingent des Pro-Plans überschreitet, muss man entweder auf ein höheres Tarifmodell aufsteigen oder auf dedizierte GPUs umsteigen. |Effektive Qualität der Feinjustierungen |Ein misslungenes Fine‑tuning → zu wiederholen. Das wahre Risiko sind die Hyperparameter, nicht der GPU-Standort. |Schnelle Entwicklung der Modelle |Qwen3.6/Gemma 4 wurden vor weniger als einem Monat veröffentlicht. In 6 Monaten wird die nächste Generation besser und günstiger zum Feintuning sein. |=== [WARNING] ==== Starte nicht 811 Stunden Training, ohne zuerst die Pipeline auf *einem einzigen* Mikromodell zu testen. Ein Lauf von 3-4h auf einem Qwen 35B-A3B kostet $8. Wenn das Dataset schlecht ist, wirst du es für $8 feststellen, nicht für $1 622. ==== == Fazit: Das Fine-Tuning ist zu einem zugänglichen Luxus geworden. Vor einem Jahr war das Feintunen eines Modells mit 292B Parametern (selbst mit QLoRA) noch Forschungssache. Heute, im Mai 2026, ist es ein durchführbares Projekt für einen unabhängigen Entwickler: * **811 H100-Stunden**von training — $1 622 bei Crusoe * **23 spezialisierte Modelle**auf Ollama Cloud geladen**$17/Monat** * **0 Server, 0 lokale GPU, 0 Wartungsinfrastruktur** Die Demokratisierung kam von drei konvergierenden Faktoren: 1. **Die Architekturen MoE**— welche es ermöglichen, Modelle effizient zu fine-tunen, bei denen nur ein Bruchteil der Gewichte aktiviert ist 2. **Die festen Pläne von Ollama Cloud**— die einen variablen Kosten (pro Token) in feste Kosten (Abonnement) umwandeln 3. **hochwertige open-weight Modelle**DeepSeek V4, Qwen3.6 und Gemma 4 sind unter den Lizenzen MIT/Apache 2.0 lizenziert. Die Zivilisation schreitet voran, indem sie die Anzahl der wichtigen Vorgänge erweitert, die wir ohne Nachdenken ausführen können. Das Fine-Tuning ist genau das: eine Operation, die du der Maschine überträgst, damit du nicht mehr darüber nachdenken musst. Und 2026 kostet es weniger als ein Junior-Entwickler mit Monatsgehalt. --- _Artikel veröffentlicht am {jbake-date}_ == Fein abgestimmte Modelle der Flotte [cols="2,2,2,2,3"] |=== |Größe aktiviert |Anzahl |Grundmodell |Bereich |Datensatz |13B |1 |DeepSeek-V4-Flash-Base |Allgemeiner Arbeitsbereich |50M Tokens |13B |5 |DeepSeek-V4-Flash |Gradle, Kotlin, DAG, Doc, Infra |15M Tokens |3,8 Mrd. |6 |Gemma 4 26B-A4B |Micro-Aufgaben, Formatierung, Skripte |5M Tokens |3B |5 |Qwen3.6-35B-A3B |Refactoring, Review, Zwischendokumentation |5M Tokens |3B |5 |Qwen3.5-35B-A3B |Legacy-Aufgaben, Kompatibilität |5M Tokens |=== == Ressourcen === Open-Weight-Modelle auf HuggingFace * https://huggingface.co/deepseek-ai/DeepSeek-V4-Flash-Base[DeepSeek V4-Flash-Base — 292B Parameter, Lizenz MIT] * https://huggingface.co/Qwen/Qwen3.6-35B-A3B[Qwen3.6-35B-A3B — 35B/3B aktiviert, Lizenz Apache 2.0] * https://huggingface.co/Qwen/Qwen3.5-35B-A3B[Qwen3.5-35B-A3B — 35B/3B aktiviert, Lizenz Apache 2.0] * https://huggingface.co/google/gemma-4-26B-A4B-it[Gemma 4 26B-A4B — 26B/3.8B aktiviert, Lizenz Apache 2.0] === Quellen der Tarife (Mai 2026) * https://ollama.com/pricing[Tarife Ollama Cloud — Pro-Plan $17/Monat jährlich] * https://www.anthropic.com/pricing[Anthropic Preise — Claude API (Opus 4.7 $5/$25, Sonnet 4.6 $3/$15, Haiku 4.5 $1/$5)] * https://openai.com/api/pricing/[Preise OpenAI — GPT API (GPT 5.5 $5/$30, GPT 5.4 $2.50/$15)] * https://deepinfra.com/pricing[Tarife DeepInfra — GPU-Instanzen H100 $1,79/h, B200 $2,79/h] * Vast.ai, Crusoe Cloud, FluidStack, TensorDock, RunPod, CoreWeave, Lambda Labs — manuelle Preislisten, datiert Mai 2026 === Offizielle Bekanntmachungen * https://qwen.ai/blog?id=qwen3.6-35b-a3b[Offizielle Ankündigung Qwen3.6-35B-A3B—Blog Qwen]— agentisches Codieren, Apache 2.0, 262K Kontext</pre> </div> </div> </div> </div> Eigener Gradle-Plugin zur parallelen Steuerung von zwei Ollama Pro-Instanzen 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="#_einleitung">Einleitung</a></li> <li><a href="#_warum_gradle_für_die_infrastruktur">Warum Gradle für die Infrastruktur?</a></li> <li><a href="#_der_vollständige_build_gradle_kts">Der vollständige build.gradle.kts</a></li> <li><a href="#_anatomie_der_schlüsselaufgaben">Anatomie der Schlüsselaufgaben</a> <ul class="sectlevel2"> <li><a href="#_startollamab_der_launcher">startOllamaB` — Der Launcher</a></li> <li><a href="#_signinb_der_interaktive">signInB` — Der Interaktive</a></li> <li><a href="#_pullmodelb_der_parametrisierbare">pullModelB` — Der Parametrisierbare</a></li> <li><a href="#_statusollamaall_die_diagnose">statusOllamaAll` — Die Diagnose</a></li> <li><a href="#_cleanollamab_die_reinigung_die_die_identität_bewahrt">cleanOllamaB` — Die Reinigung, die die Identität bewahrt</a></li> </ul> </li> <li><a href="#_workflow_vollständig_von_null_bis_zwei_sitzungen">Workflow vollständig — Von null bis zwei Sitzungen</a></li> <li><a href="#_warum_nicht_daraus_ein_echtes_gradle_plugin_machen">Warum nicht daraus ein echtes Gradle-Plugin machen?</a></li> <li><a href="#_gelernte_lektionen">Gelernte Lektionen</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_ressourcen">Ressourcen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 18 minutes</div> <p>Warum Docker-Befehle von Hand eingeben, wenn man alles in Gradle-Tasks kapseln kann? So habe ich meine dual-Ollama-Pro-Konfiguration ohne externe Shell-Skripte industrialisiert. Start, Stopp, Identität, Sign-in, Pull — alles läuft über`./gradlew`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Im vorherigen Artikel habe ich gezeigt, wie man zwei Ollama Pro‑Konten auf derselben Maschine nebeneinander betreiben kann, indem man die zweite Instanz in einem Docker‑Container isoliert. Die Einrichtung funktioniert, aber die tägliche Verwaltung wird schnell lästig: Man muss sich den Namen des Containers merken und die richtigen Befehle ausführen.<code>docker exec</code>, checker welcher Port ist aktiv&#8230;&#8203;</p> </div> <div class="paragraph"> <p>Du kennst diesen Moment, in dem du 14 Terminals geöffnet hast, die du eintippst.`docker exec ollama-instance-b ollama list`für das vierte Mal und du denkst dir: „Es muss doch einen saubereren Weg geben“ ?</p> </div> <div class="paragraph"> <p>Dieses Mittel ist Gradle.</p> </div> <div class="paragraph"> <p>Nicht nur zum Code bauen. Gradle wie ein Dirigent der lokalen Infrastruktur. Aufgaben, die bereitstellen, überprüfen, testen und aufräumen. Das Ganze versioniert in einem`build.gradle.kts`der neben dem wohnt`docker-compose.yml`.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-gradle-ollama.svg" alt="architecture gradle ollama" width="703" height="511"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_gradle_für_die_infrastruktur">Warum Gradle für die Infrastruktur?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Frage ist legitim. Gradle ist ein Build-Tool. Normalerweise kompiliert es, es testet, es paketiert. Es startet keine Docker-Container.</p> </div> <div class="paragraph"> <p>Ausser dass Gradle auch ein Dependency‑Graphen‑Engine ist — und das ist der Punkt, an dem es für unseren Fall interessant wird.</p> </div> <div class="paragraph"> <p>Wir wollen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Dass der Container vor einem Sign-in gestartet wird.</p> </li> <li> <p>Dass die Identität vor einem Pull des Modells überprüft wird</p> </li> <li> <p>Ein API-Test schlägt stillschweigend fehl, wenn der Container down ist</p> </li> </ol> </div> <div class="paragraph"> <p>Von dem reinen Abhängigkeitsgraphen. Gradle ist darauf zugeschnitten. Das Kotlin-DSL macht das Schreiben der Aufgaben flüssig, und das`doLast`ermöglicht das Ausführen von Systembefehlen, als wäre es Anwendungscode.</p> </div> <div class="paragraph"> <p>Und vor allem: kein bashrc zu warten, keine herumliegenden Skripte in`~/bin`, kein Makefile neben dem docker-compose. Alles lebt in einer einzigen Datei, an derselben Stelle wie der Projektcode.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_vollständige_build_gradle_kts">Der vollständige build.gradle.kts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist die Datei, die ich schließlich geschrieben habe. Sie erledigt alles, von der Bereitstellung des Volumes bis zum Curl zur Überprüfung, einschließlich des interaktiven Anmeldens.</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 -&gt; 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 -&gt; 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>Da. Zwölf Aufgaben, ein einzelner Einstiegspunkt, und null Reibung.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomie_der_schlüsselaufgaben">Anatomie der Schlüsselaufgaben</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startollamab_der_launcher">startOllamaB` — Der Launcher</h3> <div class="paragraph"> <p>Nichts Hexenwerk: ein`docker run -d`mit den richtigen Einstellungen. Der Trick liegt in`isIgnoreExitValue = true`.</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>Wenn der Container bereits existiert, der Befehl`docker run`schlägt fehl (exit code ≠ 0). Ohne diese Eigenschaft, Gradle würde den gesamten Build mit einem Fehler abbrechen. Hier, der Fehler ist stillschweigend—und der`doLast`erkennt, ob es ein \"déjà existant\" oder ein echter Fehler war.</p> </div> <div class="paragraph"> <p>Le `doLast`ist entscheidend: er läuft <strong>nach</strong> der Ausführung des Befehls, was die Inspektion ermöglicht.`executionResult.get().exitValue`und eine angemessene Nachricht zu protokollieren.</p> </div> </div> <div class="sect2"> <h3 id="_signinb_der_interaktive">signInB` — Der Interaktive</h3> <div class="paragraph"> <p>Das ist die einzige Aufgabe, die eine menschliche Interaktion erfordert. Gradle überträgt`System.in`zum Prozess, damit der Prompt`ollama signin`normal angezeigt werden kann:</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>Ohne das würde der Sign-in blockieren, weil stdin geschlossen wäre, und Sie würden den Prompt niemals sehen.</p> </div> </div> <div class="sect2"> <h3 id="_pullmodelb_der_parametrisierbare">pullModelB` — Der Parametrisierbare</h3> <div class="paragraph"> <p>Eine generische Aufgabe, die einen Parameter über`-P`:</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>Der Fallback ist wichtig`project.findProperty("model") as? String ?: "qwen3:0.6b"`Es garantiert, dass die Aufgabe nicht schiefgeht, wenn man den Parameter vergisst.</p> </div> </div> <div class="sect2"> <h3 id="_statusollamaall_die_diagnose">statusOllamaAll` — Die Diagnose</h3> <div class="paragraph"> <p>Zwei`curl`in Gesundheit auf den Häfen`11434` et <code>11435</code>, mit einem Fallback in`runCatching`Um nicht abzustürzen, falls eine der Instanzen ausgefallen ist. Die Ausgabe ist strukturiert:</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-&gt;11434/tcp</code></pre> </div> </div> <div class="paragraph"> <p>Ein Blick, und du weißt genau, was läuft und was nicht stimmt.</p> </div> </div> <div class="sect2"> <h3 id="_cleanollamab_die_reinigung_die_die_identität_bewahrt">cleanOllamaB` — Die Reinigung, die die Identität bewahrt</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>Der Container ist gelöscht, aber das Volume`~/ollama-b-data`ist<strong>konserviert</strong>. L&#8217;Identität SSH überlebt am Reinigung. Am nächsten`startOllamaB`, dieselben Schlüssel werden wiederverwendet — es ist nicht nötig, sich erneut anzumelden oder den Device Key neu zu registrieren.</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`Berühre die Lautstärke nicht. Wenn du die Identität B löschen willst (und alles von vorne beginnen willst), musst du löschen.</code>~/ollama-b-data`manuell. Es ist freiwillig — ein`clean`sollte keine Anmeldedaten zerstören.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_vollständig_von_null_bis_zwei_sitzungen">Workflow vollständig — Von null bis zwei Sitzungen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist die ideale Sequenz für jemanden, der zum Projekt kommt und alles einrichten möchte, ohne die Dokumentation zu öffnen :</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>In weniger als zwei Minuten ist alles bereitgestellt. Kein README zum Lesen, keine Umgebungsvariablen zum Setzen. Die Aufgabe`helpOllama`dient als integrierte Dokumentation</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml ... ... ( skipping 128 lines ) ... BorderColor black } skinparam StereotypeI { BackgroundColor white BorderColor black } skinparam StereotypeN { BackgroundColor white BorderColor black } skinparam UseCaseStereoType { FontColor black FontName Verdana } skinparam DefaultFontSize 11 actor Développeur as Dev participant "Gradle\n(build.gradle.kts)" as Gradle participant "Docker\nDaemon" as Docker participant "Ollama ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml !theme plain skinparam DefaultFontSize 11 actor Développeur as Dev participant "Gradle\n(build.gradle.kts)" as Gradle participant "Docker\nDaemon" as Docker participant "Ollama Instanz B" as OllamaB participant "Ollama\nWolke" as Cloud == Provisionnement == Dev -&gt; Gradle : helpOllama Gradle --&gt; Dev : Aide et instructions Dev -&gt; Gradle : startOllamaB Gradle -&gt; Docker : docker run -d ollama/ollama:0.20.2 Docker -&gt; OllamaB : Génération clés SSH (id_ed25519) Docker --&gt; Gradle : conteneur lancé Gradle --&gt; Dev : OK Dev -&gt; Gradle : checkIdentity Gradle -&gt; Docker : cat id_ed25519.pub Gradle --&gt; Dev : Clé publique SSH Dev -&gt; Cloud : Enregistrement clé SSH\n(sur ollama.com/settings/keys) == Authentification == Dev -&gt; Gradle : signInB Gradle -&gt; Docker : ollama signin (interactif) Dev &lt;-&gt; Cloud : Login navigateur (compte B) Docker -&gt; Cloud : Échange token ⇔ Device Key Gradle --&gt; Dev : Authentifié == Vérification == Dev -&gt; Gradle : pullModelB Gradle -&gt; Docker : ollama pull qwen3:0.6b Gradle --&gt; Dev : Modèle pullé Dev -&gt; Gradle : testOllamaB Gradle -&gt; Docker : curl /v1/chat/completions Gradle --&gt; Dev : ✓ Instance B OK == Production == Dev -&gt; Gradle : pullAllProModels Gradle -&gt; Docker : ollama pull deepseek-v4-pro:cloud Gradle -&gt; Docker : ollama pull gemma4:31b-cloud Gradle --&gt; Dev : Modèles Pro pullés Dev -&gt; Gradle : statusOllamaAll Gradle --&gt; Dev : ✓ Native ✓ Docker B @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_nicht_daraus_ein_echtes_gradle_plugin_machen">Warum nicht daraus ein echtes Gradle-Plugin machen?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Legitime Frage. Extrahiere dies`build.gradle.kts`Ein eigenständiges Gradle-Plugin hätte Vorteile: Wiederverwendung zwischen Projekten, deklarative Konfiguration, DSL‑Erweiterung.</p> </div> <div class="paragraph"> <p>Aber im Moment macht das keinen Sinn. Dieser Build hat keine komplexe Geschäftslogik — er ist lediglich ein Wrapper um Docker- und curl-Befehle. Eine Schicht eines vollständigen Gradle-Plugins (mit Erweiterung, Einheitstests, Veröffentlichung) wäre für 12 Dienstaufgaben überdimensioniert.</p> </div> <div class="paragraph"> <p>Le `build.gradle.kts`inline befindet sich im Projekt, das es benötigt. Es ist trivial, es anderswo zu kopieren. Wenn ich einmal drei Projekte habe, die darauf angewiesen sind, werde ich es in ein Plugin umwandeln. Momentan, 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>Der Tag, an dem du drei hast`build.gradle.kts`Identisch in drei Projekten – das ist das Signal, ein Plugin zu extrahieren. Zuvor ist die Duplizierung günstiger als die Abstraktion. Entwickler-Weisheit.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_gelernte_lektionen">Gelernte Lektionen</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Gradle ist nicht nur ein Build-Tool</strong>Der Abhängigkeitsgraph-Motor macht ihn zu einem gefürchteten Orchestrator der Infrastruktur.<code>doLast</code>, <code>isIgnoreExitValue</code>, <code>dependsOn</code>: diese drei Primitive reichen aus, um einen Docker-Container mit derselben Zuverlässigkeit wie eine CI-Pipeline zu steuern.</p> </li> <li> <p><strong>isIgnoreExitValue` ist dein Freund</strong>— In einer idealen Welt`docker run`Beim Aufruf eines bereits vorhandenen Containers würde eine Warnung statt eines Fehler-Exit-Codes zurückgegeben. In der realen Welt setzt du`isIgnoreExitValue = true`und du verwaltest die Diagnose in`doLast`.</p> </li> <li> <p><strong>Die konfigurierbaren Aufgaben töten die Ambiguität</strong> — Un <code>pullModelB`generisch mit</code>-Pmodel=&#8230;&#8203;`ersetzt N spezialisierte Aufgaben. Eine einzige Aufgabe, eine einzige Dokumentation, ein einziges Verhalten.</p> </li> <li> <p><strong>runCatching` für die health checks</strong>Wenn du N Endpunkte testest, sollte ein Absturz beim ersten dich nicht daran hindern, die übrigen zu testen.<code>runCatching</code>+`getOrElse`pro Endpunkt, und die Diagnose bleibt vollständig, selbst bei partiellen Ausfällen.</p> </li> <li> <p><strong>Die Aufgabe <code>helpOllama</code> als ausführbare Dokumentation</strong> — Un `println()`Gut formatiert ersetzt es ein README aus drei Absätzen. Es ist selbstdokumentierend, immer auf dem neuesten Stand und ist ohne das Terminal zu verlassen zugänglich.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wir sind von manuell eingegebenen Docker-Befehlen zu einem vollständigen, versionierten und wiederverwendbaren Gradle-Workflow übergegangen. Zwölf Aufgaben decken den gesamten Lebenszyklus ab: Bereitstellung, Identität, Anmeldung, Pull, Test, Diagnose, Bereinigung.</p> </div> <div class="paragraph"> <p>Die Kombination aus docker-compose + build.gradle.kts + opencode.json bildet eine saubere Dreifaltigkeit: Docker für die Isolation, Gradle für die Orchestrierung, OpenCode für den Verbrauch. Jede Schicht hat ihre Verantwortung, und ninguna überlappt mit einer anderen.</p> </div> <div class="paragraph"> <p>Nächster Schritt? Den Lebenszyklus in der CI automatisieren, damit die Ollama-Instanzen in temporären Entwicklungsumgebungen verfügbar sind. Aber das ist ein anderer Artikel.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressourcen">Ressourcen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/tutorial_using_tasks.html">Benutzerhandbuch Gradle — Aufgaben</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_tasks.html">User Manual Gradle — benutzerdefinierte Aufgaben</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Image Docker Ollama auf Docker Hub</a></p> </li> <li> <p><a href="https://kotlinlang.org/docs/gradle.html">Gradle DSL Kotlin — Dokumentation</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Artikel veröffentlicht am 2026-05-08</em></p> </div> </div> </div> Zwei Ollama Pro‑Abonnements auf derselben Maschine mit Docker kombinieren 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="#_einführung">Einführung</a></li> <li><a href="#_warum_zweimal_das_gleiche">Warum zweimal das Gleiche?</a></li> <li><a href="#_das_herz_des_problems_der_geräteschlüssel">Das Herz des Problems: Der Geräteschlüssel</a></li> <li><a href="#_vorbereitung_schritt_für_schritt">Vorbereitung — Schritt für Schritt</a> <ul class="sectlevel2"> <li><a href="#_voraussetzung">Voraussetzung</a></li> <li><a href="#_schritt_1_das_volume_erstellen">Schritt 1: Das Volume erstellen</a></li> <li><a href="#_schritt_2_docker_container_starten">Schritt 2: Docker-Container starten</a></li> <li><a href="#_schritt_3_öffentlichen_schlüssel_abrufen">Schritt 3: öffentlichen Schlüssel abrufen</a></li> <li><a href="#_schritt_4_schlüssel_auf_ollama_com_speichern">Schritt 4: Schlüssel auf Ollama.com speichern</a></li> <li><a href="#_schritt_5_testen_mit_einem_kleinen_kostenlosen_modell">Schritt 5: Testen mit einem kleinen kostenlosen Modell</a></li> </ul> </li> <li><a href="#_die_falle_der_api_v1models">Die Falle der API `/v1/models</a></li> <li><a href="#_ergebnis_zwei_sitzungen_zwei_konten_kein_konflikt">Ergebnis: Zwei Sitzungen, Zwei Konten, Kein Konflikt</a></li> <li><a href="#_gelernte_lektionen">Gelernte Lektionen</a></li> <li><a href="#_um_weiter_zu_gehen">Um weiter zu gehen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 14 minutes</div> <p>Zwei Pro-Abonnements, ein einzelner Rechner, eine einzige Bankkarte und kein Netzwerkkonflikt. Wie Docker mir erlaubt hat, meine Cloud-Inferenzkapazität zu verdoppeln, ohne einen zweiten PC zu kaufen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich verwende Ollama Pro seit mehreren Monaten, um meine OpenCode-Sitzungen mit Cloud-Modellen zu betreiben. Das Problem ist, dass selbst mit einem Pro‑Abonnement man schnell an das <strong>rate limiting</strong> stößt, wenn man mehrere Agenten gleichzeitig ausführt. Die offensichtliche Lösung: ein zweites Abonnement.</p> </div> <div class="paragraph"> <p>Aber dort ist es das Drama.</p> </div> <div class="paragraph"> <p>Ollama identifiziert jede Maschine anhand eines eindeutigen SSH-Schlüssels — sein berühmter <strong>Device Key</strong>. Zwei Instanzen auf demselben OS hätten die gleiche Identität, und es wäre unmöglich, zwei Pro-Konten mit demselben Gerät zu verknüpfen. Und wie du wohl vermutest, wollte ich keinen zweiten Laptop nur dafür kaufen.</p> </div> <div class="paragraph"> <p>Die Lösung: betrügen. Ollama glauben zu lassen, dass es auf zwei unterschiedlichen Maschinen läuft, obwohl sie CPU, RAM und Netzwerkverbindung teilen. Docker wird uns eine perfekte Isolationsblase bieten.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml ... ... ( skipping 130 lines ) ... skinparam StereotypeI { BackgroundColor white BorderColor black } skinparam StereotypeN { BackgroundColor white BorderColor black } skinparam UseCaseStereoType { FontColor black FontName Verdana } skinparam BoxPadding 10 skinparam DefaultFontSize 12 left to right direction node "Physikalische Maschine" { frame "Ollama Instanz A (einheimisch)" as Native { database "Identität ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml !theme plain skinparam BoxPadding 10 skinparam DefaultFontSize 12 left to right direction node "Physikalische Maschine" { frame "Ollama Instanz A (einheimisch)" as Native { database "Identität /usr/share/ollama/.ollama/id_ed25519" as KeyA portin "API\n:11434" as PortA } frame "Ollama Instanz B (Docker)" as Docker { database "Identität\n~/ollama-b-data/id_ed25519" as KeyB portin "API :11435" as PortB } } cloud "Ollama Cloud" { actor "Pro-Konto A\n(email 1)" as AccountA actor "Konto Pro B\n(email 2)" as AccountB } KeyA --&gt; AccountA : "SSH-Schlüssel A" KeyB --&gt; AccountB : "SSH-Schlüssel B" PortA --&gt; AccountA : "Anfragen A" PortB --&gt; AccountB : "Anfragen B" note bottom of Docker Conteneur isolé : identité SSH distincte, port réseau distinct, volume persistant end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_zweimal_das_gleiche">Warum zweimal das Gleiche?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor du mich als psychisch krank bezeichnest, lass mich dir den Anwendungsfall erklären.</p> </div> <div class="paragraph"> <p>Mit einem einzigen Pro-Abonnement kann ich ein Modell wie`deepseek-v4-pro:cloud`in einer OpenCode-Session. Das Problem tritt auf, wenn ich <strong>zwei</strong> gleichzeitige Sitzungen möchte. Die Rate-Limiting-Quoten führen dazu, dass die zweite Session stockt oder vollständig abgelehnt wird.</p> </div> <div class="paragraph"> <p>Mit zwei unabhängigen Pro-Abonnements :</p> </div> <div class="ulist"> <ul> <li> <p>Session OpenCode 1 → Pro-Konto A`localhost:11434`)</p> </li> <li> <p>Session OpenCode 2 → Compte Pro B (<code>localhost:11435</code>)</p> </li> </ul> </div> <div class="paragraph"> <p>Jede Sitzung hat ihr eigenes Kontingent, ihren eigenen Kontext, und stört die andere nicht. Das ist menschliches Multi-Processing.</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>Zwei Pro-Abos = zwei verschiedene E-Mail-Adressen. Die gleiche Bankkarte funktioniert — das Ollama-Zahlungssystem blockiert keine mehreren Abonnements vom gleichen Zahlungsmittel. Ich habe es überprüft.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_das_herz_des_problems_der_geräteschlüssel">Das Herz des Problems: Der Geräteschlüssel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie Ollama installieren, wird ein SSH-ed25519-Schlüsselpaar im Identitätsverzeichnis generiert:</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>Dieser Schlüssel wird auf die Server von Ollama hochgeladen beim`ollama signin`. Es ist sie, die sagt « diese Maschine gehört zu diesem Pro-Konto ». Wenn deine beiden Instanzen die gleiche Datei teilen`id_ed25519`, sie teilen die gleiche Identität. Spiel vorbei.</p> </div> <div class="paragraph"> <p>Der Trick: unserer zweiten Instanz ihr eigenes Identitätsverzeichnis geben, isoliert in einem Docker-Volume.</p> </div> </div> </div> <div class="sect1"> <h2 id="_vorbereitung_schritt_für_schritt">Vorbereitung — Schritt für Schritt</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_voraussetzung">Voraussetzung</h3> <div class="ulist"> <ul> <li> <p>Eine funktionierende native Ollama-Installation (offizielles Skript`curl | sh`)</p> </li> <li> <p>Docker installiert und funktionsfähig</p> </li> <li> <p>Portainer oder docker-compose für die Bereitstellung</p> </li> <li> <p>Zwei Ollama-Konten mit zwei unterschiedlichen E-Mails</p> </li> </ul> </div> <div class="paragraph"> <p>Ich habe die Version verwendet`0.20.2`— die vom offiziellen Skript bereitgestellte und das entsprechende Docker-Image.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_1_das_volume_erstellen">Schritt 1: Das Volume erstellen</h3> <div class="paragraph"> <p>Ein einfaches Verzeichnis auf dem Host dient als persistentes Volume für die Identität der Instanz 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>Dieser Ordner wird im Docker-Container wie`/root/.ollama`, wo Ollama seine Identitätsschlüssel, seinen Verlauf und seine Modelle speichert.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_2_docker_container_starten">Schritt 2: Docker-Container starten</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>Was hier passiert:</p> </div> <div class="ulist"> <ul> <li> <p>Der Hafen<strong>11435</strong>des Hosts wird auf das<strong>11434</strong>des Containers. Damit lauscht die Docker-Instanz auf`:11435`ohne Konflikt mit der nativen Instanz, die besetzt`:11434`.</p> </li> <li> <p>Das Volumen`~/ollama-b-data`ist auf montiert`/root/.ollama`— das ist der Ort, an dem die SSH-Identität gespeichert wird.</p> </li> <li> <p>`OLLAMA_HOST=0.0.0.0`Ermöglicht dem Container, externe Verbindungen anzunehmen.</p> </li> </ul> </div> <div class="paragraph"> <p>Ich habe diesen Stack via Portainer bereitgestellt, aber ein einfaches`docker compose up -d`funktioniert genauso gut.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_3_öffentlichen_schlüssel_abrufen">Schritt 3: öffentlichen Schlüssel abrufen</h3> <div class="paragraph"> <p>Da der Container beim ersten Start leer ist, erzeugt Ollama automatisch ein neues SSH-Schlüsselpaar im Volume. Wir erhalten den öffentlichen Schlüssel :</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>Ich überprüfe, dass dieser Schlüssel <strong>unterschiedlich</strong> von dem der nativen Instanz :</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>Zwei unterschiedliche Schlüssel, zwei getrennte Identitäten. Der Trick ist gemacht.</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>Wenn Ihr Container neu startet, <strong>verwendet</strong> er die im Volume vorhandenen Schlüssel. Die Identität ist persistent. Sie werden die Zuordnung zum Pro-Konto nicht verlieren.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_schritt_4_schlüssel_auf_ollama_com_speichern">Schritt 4: Schlüssel auf Ollama.com speichern</h3> <div class="paragraph"> <p>Gehe zu <a href="https://ollama.com/settings/keys" class="bare">https://ollama.com/settings/keys</a> → SSH-Schlüssel hinzufügen. Wir fügen den öffentlichen Schlüssel der Docker-Instanz ein und bestätigen.</p> </div> <div class="paragraph"> <p>Dann verknüpfen wir diese Identität mit dem Pro B-Konto :</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>Der Browser öffnet sich, man meldet sich mit der E‑Mail des Kontos B an, und das Token wird dem SSH‑Schlüssel des Containers zugeordnet. Wir überprüfen, dass alles in Ordnung ist :</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="_schritt_5_testen_mit_einem_kleinen_kostenlosen_modell">Schritt 5: Testen mit einem kleinen kostenlosen Modell</h3> <div class="paragraph"> <p>Bevor ich den Preis eines Pro-Abonnements nenne, möchte ich sicher sein, dass der Schlauch funktioniert. Ich ziehe ein kleines lokales und kostenloses Modell, um die Konnektivität zu prüfen :</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>Der Hafen`11435`antwortet, das Modell wird bereitgestellt. Instanz B ist lebendig.</p> </div> <div class="paragraph"> <p>Sobald ich beruhigt bin, ziehe ich das eigentliche Cloud-Pro-Modell:</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 Bytes für das Manifest eines Cloud-Modells — normalerweise erfolgt die Inferenz auf der Serverseite, nicht lokal. Und hier ist der ultimative Test:</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>Hallo auch dir, Instanz B.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_falle_der_api_v1models">Die Falle der API `/v1/models</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich habe 20 Minuten wegen eines dummen Details verloren. Als ich den Provider konfiguriert habe`ollama-b`In OpenCode wurde nichts im Modellauswahlfeld angezeigt. Nichts. Nix.</p> </div> <div class="paragraph"> <p>Der Grund? Die API`/v1/models`der Instanz B zurückgab`{"object":"list","data":null}`statt`{"object":"list","data":[]}`wenn kein Modell gepullt wurde. Der Wert`null`ließ das Parsing auf der OpenCode-Seite abstürzen, das den Provider nicht anzeigte.</p> </div> <div class="paragraph"> <p>Die Lösung: die Modelle <strong>explizit</strong> in der OpenCode-Konfiguration deklarieren, statt sich auf die dynamische Entdeckung zu verlassen.</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>Mit dieser expliziten Deklaration erkennt OpenCode sofort den Provider B und seine Modelle. Ein Neustart der Sitzung, und der Selektor`/models`zeigt die beiden Instanzen nebeneinander.</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>Wenn Sie Ihren benutzerdefinierten Provider nicht in`/models`, verbringe nicht drei Stunden damit, dein Terminal neu zu starten. Deklariere die Vorlagen manuell in`opencode.json`— Das löst das Problem sofort.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ergebnis_zwei_sitzungen_zwei_konten_kein_konflikt">Ergebnis: Zwei Sitzungen, Zwei Konten, Kein Konflikt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Zum Schluss kann ich zwei OpenCode-Sitzungen gleichzeitig starten :</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>Jede Sitzung hat ihr eigenes Kontingent, ihr eigenes Rate-Limit, und sie treten sich nicht auf die Füße. Gleicher Rechner, gleiche blaue Karte, zwei verschiedene E-Mails.</p> </div> <div class="paragraph"> <p>Und das Beste? Der Docker-Container ist`restart: always`. Er überlebt Systemneustarts ohne manuellen Eingriff.</p> </div> </div> </div> <div class="sect1"> <h2 id="_gelernte_lektionen">Gelernte Lektionen</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Docker isoliert alles, sogar die Identität</strong>— Ein einfacher Volume-Bind-Mount reicht aus, um einem Container sein eigenes Set an SSH-Schlüsseln zu geben, wodurch er für Ollama von einer anderen physischen Maschine nicht unterscheidbar ist.</p> </li> <li> <p><strong>Zwei E-Mails, gleiche CB</strong>— Ollama blockiert keine mehrfachen Abonnements von derselben Zahlungsmethode. Nur die E-Mail-Adresse muss unterschiedlich sein.</p> </li> <li> <p><strong>Kostenlos testen, bevor du bezahlst</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&#8217;abord, vous activez le Pro ensuite.</p> </li> <li> <p><strong>/v1/models` mit <code>data: null</code> bricht OpenCode</strong>— Wenn Sie einen benutzerdefinierten Provider mit`"models": {}`, OpenCode versucht, die Modelle über die API zu entdecken. Wenn die API antwortet`data: null`, der Provider wird nicht angezeigt. Deklarieren Sie die Modelle ausdrücklich.</p> </li> <li> <p><strong>Zwei Konten sind menschliches Multi-Processing.</strong>— Ein Pro-Konto = eine aktive OpenCode-Session. Zwei Konten = zwei parallele Sitzungen. Für jemanden, der gleichzeitig mehrere Gradle-Projekte jongliert, ist das ein Game-Changer.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_um_weiter_zu_gehen">Um weiter zu gehen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/settings/keys">Ollama Settings — Verwaltung der SSH‑Schlüssel</a></p> </li> <li> <p><a href="https://docs.ollama.com/">Offizielle Ollama-Dokumentation</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Docker-Ollama-Image auf 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>Artikel veröffentlicht am 2026-05-08</em></p> </div> </div> </div> Installiere das Kitty‑Terminal und konfiguriere Zsh als Standard‑Shell unter Xubuntu 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="#_warum_kitty_und_zsh_wählen">Warum Kitty und Zsh wählen?</a></li> <li><a href="#_systemvoraussetzungen">Systemvoraussetzungen</a></li> <li><a href="#_download_und_installation_von_kitty">Download und Installation von Kitty</a> <ul class="sectlevel2"> <li><a href="#_lade_das_installationsskript_herunter">Lade das Installationsskript herunter</a></li> <li><a href="#_erstellung_der_symbolischen_links">Erstellung der symbolischen Links</a></li> </ul> </li> <li><a href="#_integration_von_kitty_in_xubuntu">Integration von Kitty in Xubuntu</a> <ul class="sectlevel2"> <li><a href="#_die_desktop_datei_kopieren">die Desktop-Datei kopieren</a></li> <li><a href="#_bearbeite_die_desktop_datei">Bearbeite die Desktop-Datei</a></li> <li><a href="#_kitty_als_standardterminal_zuordnen_optional">Kitty als Standardterminal zuordnen (optional)</a></li> </ul> </li> <li><a href="#_installation_von_zsh">Installation von Zsh</a></li> <li><a href="#_definiere_zsh_als_standard_shell">Definiere Zsh als Standard-Shell</a> <ul class="sectlevel2"> <li><a href="#_globale_methode_für_alle_terminals">Globale Methode (für alle Terminals)</a></li> <li><a href="#_kitty_spezifische_methode">Kitty-spezifische Methode</a></li> </ul> </li> <li><a href="#_zsh_konfiguration_optional">Zsh-Konfiguration (optional)</a> <ul class="sectlevel2"> <li><a href="#_eine_datei_zshrc_erstellen">Eine Datei .zshrc erstellen</a></li> <li><a href="#_beispiel_einer_minimalen_konfiguration">Beispiel einer minimalen Konfiguration</a></li> </ul> </li> <li><a href="#_zusammenfassung_des_vollständigen_workflows">Zusammenfassung des vollständigen Workflows</a></li> <li><a href="#_finale_überprüfung">Finale Überprüfung</a> <ul class="sectlevel2"> <li><a href="#_öffne_die_konfigurationsdatei">📂 Öffne die Konfigurationsdatei</a></li> <li><a href="#_️_hinzufügen_oder_ändern_font_size">�🖋️ Hinzufügen oder ändern `font_size</a></li> <li><a href="#_speichern_und_kitty_neu_starten">�💾 Speichern und Kitty neu starten</a></li> <li><a href="#_dynamische_anpassung_temporärer_zoom">�✅ Dynamische Anpassung (Temporärer Zoom)</a></li> </ul> </li> <li><a href="#_installation_und_konfiguration_von_oh_my_zsh">Installation und Konfiguration von Oh My Zsh</a> <ul class="sectlevel2"> <li><a href="#_installation_von_oh_my_zsh">Installation von Oh My Zsh</a></li> <li><a href="#_das_thema_ändern">Das Thema ändern</a></li> <li><a href="#_überprüfung">Überprüfung</a></li> <li><a href="#_use_case_diagramm">Use-Case-Diagramm</a></li> </ul> </li> <li><a href="#_transluzidität_in_kitty_aktivieren">Transluzidität in Kitty aktivieren</a> <ul class="sectlevel2"> <li><a href="#_voraussetzungen_für_die_transparenz">Voraussetzungen für die Transparenz</a></li> <li><a href="#_konfiguration_der_transparenz_in_kitty_conf">Konfiguration der Transparenz in kitty.conf</a></li> <li><a href="#_kitty_neustarten">Kitty neustarten</a></li> <li><a href="#_mögliche_ergänzungen">Mögliche Ergänzungen</a></li> <li><a href="#_sequenzdiagramm_initialisierung_von_kitty_mit_transparenz">Sequenzdiagramm - Initialisierung von Kitty mit Transparenz</a></li> <li><a href="#_bekannte_einschränkungen">Bekannte Einschränkungen</a></li> </ul> </li> <li><a href="#_piepton_deaktivieren_audible_bell">Piepton deaktivieren (audible bell)</a></li> <li><a href="#_update_von_kitty">Update von Kitty</a></li> <li><a href="#_referenzen">Referenzen</a></li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dieser Leitfaden erklärt Schritt für Schritt, wie man das Terminal <strong>kitty</strong> auf Xubuntu installiert, es korrekt konfiguriert und bash durch <strong>zsh</strong> als Standard-Shell ersetzt. Das Projekt kitty ist hier verfügbar: <a href="https://github.com/kovidgoyal/kitty" class="bare">https://github.com/kovidgoyal/kitty</a>.</p> </div> <div class="paragraph"> <p><em><em>_ Kitty ist ein modernes, schnelles und konfigurierbares Terminal, das besonders für anspruchsvolle Entwickler geeignet ist. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_kitty_und_zsh_wählen">Warum Kitty und Zsh wählen?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty zeichnet sich durch:</p> </div> <div class="ulist"> <ul> <li> <p>Überlegene Leistung dank GPU-Beschleunigung,</p> </li> <li> <p>Eine vollständig auf einer einzelnen Textdatei basierende Konfiguration,</p> </li> <li> <p>Eine ausgezeichnete Unterstützung für Schriftarten und Ligaturen.</p> </li> </ul> </div> <div class="paragraph"> <p>Zsh ist hingegen eine leistungsfähige interaktive Shell, die bietet:</p> </div> <div class="ulist"> <ul> <li> <p>Intelligente Vervollständigung,</p> </li> <li> <p>Ein anpassbarer Prompt,</p> </li> <li> <p>Eine große Kompatibilität mit bash.</p> </li> </ul> </div> <div class="paragraph"> <p>Durch die Kombination von Kitty und Zsh profitieren Sie von einer produktiven und ästhetischen Umgebung.</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>Dieser Leitfaden ist absichtlich auf die Installation per Skript und auf Xubuntu beschränkt.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_systemvoraussetzungen">Systemvoraussetzungen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor du anfängst, stelle sicher, dass du:</p> </div> <div class="ulist"> <ul> <li> <p>Xubuntu installiert,</p> </li> <li> <p>ein Internetzugang,</p> </li> <li> <p>eine funktionelle Bash-Shell zum Ausführen des Skripts</p> </li> </ul> </div> <div class="paragraph"> <p>Überprüfen Sie Ihre Umgebung :</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="_download_und_installation_von_kitty">Download und Installation von Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty empfiehlt, es über ein offizielles Skript zu installieren, das die Dateien in`~/.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>Diese Methode ist unabhängig von Paketmanagern (keine`apt`).</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_lade_das_installationsskript_herunter">Lade das Installationsskript herunter</h3> <div class="paragraph"> <p>Führen Sie den folgenden Befehl aus:</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>Dieser Befehl führt aus:</p> </div> <div class="ulist"> <ul> <li> <p>Herunterladen der Binaries,</p> </li> <li> <p>Extraktion in`~/.local/kitty.app`,</p> </li> <li> <p>Erstellung der symbolischen Links.</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/download-install.svg" alt="download install" width="364" height="336"> </div> </div> </div> <div class="sect2"> <h3 id="_erstellung_der_symbolischen_links">Erstellung der symbolischen Links</h3> <div class="paragraph"> <p>Um aufrufen zu können`kitty`Erstellen Sie im Terminal einen symbolischen Link :</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>Fügen Sie hinzu`~/.local/bin`Füge zu deinem PATH hinzu, falls noch nicht geschehen:</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"' &gt;&gt; ~/.zshrc source ~/.zshrc</code></pre> </div> </div> <div class="paragraph"> <p>Sie können die Installation überprüfen:</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="_integration_von_kitty_in_xubuntu">Integration von Kitty in Xubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Damit Kitty im Anwendungsmenü erscheint:</p> </div> <div class="sect2"> <h3 id="_die_desktop_datei_kopieren">die Desktop-Datei kopieren</h3> <div class="paragraph"> <p>Kopieren Sie die Datei`.desktop`bereitgestellt :</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="_bearbeite_die_desktop_datei">Bearbeite die Desktop-Datei</h3> <div class="paragraph"> <p>Bearbeite die Datei:</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>Überprüfen oder ändern Sie die folgenden Zeilen:</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>Ersetzen`YOURUSER`durch deinen Benutzernamen.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/desktop-integration.png" alt="desktop integration" width="422" height="335"> </div> </div> </div> <div class="sect2"> <h3 id="_kitty_als_standardterminal_zuordnen_optional">Kitty als Standardterminal zuordnen (optional)</h3> <div class="paragraph"> <p>Damit Kitty das Terminal ist, das standardmäßig gestartet wird:</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>Auswählen`kitty`im angebotenen Menü</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_installation_von_zsh">Installation von Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Falls Zsh noch nicht installiert ist, führen Sie aus:</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>Überprüfen Sie die Installation:</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="_definiere_zsh_als_standard_shell">Definiere Zsh als Standard-Shell</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sie können Ihre Shell systemweit ändern oder nur in Kitty.</p> </div> <div class="sect2"> <h3 id="_globale_methode_für_alle_terminals">Globale Methode (für alle Terminals)</h3> <div class="paragraph"> <p>Identifizieren Sie den absoluten Pfad:</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>Im Allgemeinen`/usr/bin/zsh`.</p> </div> <div class="paragraph"> <p>Ändern Sie die Standard-Shell:</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>Melden Sie sich ab und melden Sie sich erneut an.</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_spezifische_methode">Kitty-spezifische Methode</h3> <div class="paragraph"> <p>Wenn Sie nur die Shell in Kitty ändern möchten, bearbeiten Sie die Konfigurationsdatei:</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>Fügen Sie diese Zeile hinzu:</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>Speichern und Kitty neu starten.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zsh_konfiguration_optional">Zsh-Konfiguration (optional)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um Ihr Zsh anzupassen:</p> </div> <div class="sect2"> <h3 id="_eine_datei_zshrc_erstellen">Eine Datei .zshrc erstellen</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="_beispiel_einer_minimalen_konfiguration">Beispiel einer minimalen Konfiguration</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="_zusammenfassung_des_vollständigen_workflows">Zusammenfassung des vollständigen Workflows</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der untenstehende Plan fasst den gesamten Prozess zusammen:</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/full-workflow.png" alt="full workflow" width="374" height="643"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_finale_überprüfung">Finale Überprüfung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Starte 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>Du solltest sehen, dass`zsh`ist aktiv :</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>Erwartetes Ergebnis :</p> </div> <div class="paragraph"> <p>/usr/bin/zsh</p> </div> <div class="paragraph"> <p>Um die Schriftgröße in<strong>Kätzchen</strong>, man muss den Parameter anpassen`font_size`in der Konfigurationsdatei. Hier ist die detaillierte Vorgehensweise:</p> </div> <div class="sect2"> <h3 id="_öffne_die_konfigurationsdatei">📂 Öffne die Konfigurationsdatei</h3> <div class="paragraph"> <p>Die Hauptkonfigurationsdatei befindet sich gewöhnlich in:</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>Wenn diese Datei noch nicht existiert, können Sie sie erstellen. Beispiel:</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="_️_hinzufügen_oder_ändern_font_size">�🖋️ Hinzufügen oder ändern `font_size</h3> <div class="paragraph"> <p>Fügen Sie die folgende Direktive hinzu, oder ändern Sie sie, falls sie bereits existiert :</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>Hier`14.0`Entspricht der gewünschten Größe. Sie können jeden Dezimalwert eingeben, zum Beispiel`12.0`, <code>15.5</code>,etc.</p> </div> </div> <div class="sect2"> <h3 id="_speichern_und_kitty_neu_starten">�💾 Speichern und Kitty neu starten</h3> <div class="ulist"> <ul> <li> <p>Speichern (<code>Ctrl + O</code>, dann`Entrée`) und verlassen Sie (<code>Ctrl + X</code>) wenn Sie verwenden`nano`.</p> </li> <li> <p>Schließe alle Kitty-Fenster und starte das Terminal neu, damit die Änderung wirksam wird.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_dynamische_anpassung_temporärer_zoom">�✅ Dynamische Anpassung (Temporärer Zoom)</h3> <div class="paragraph"> <p>Wenn du temporär hinein-/herauszoomen möchtest, ohne die Einstellungen zu ändern, verwende die Standard-Tastenkombinationen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Schriftgröße erhöhen</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + =</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>Schriftgröße verringern</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + -</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>Größe zurücksetzen</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + Backspace</code></p> </div> <div class="paragraph"> <p>Diese Einstellungen bleiben nach dem Schließen des Terminals nicht erhalten.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_installation_und_konfiguration_von_oh_my_zsh">Installation und Konfiguration von Oh My Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nachdem Zsh installiert und als Standard-Shell konfiguriert ist, kannst du deine Umgebung mit <strong>Oh My Zsh</strong> erweitern, einem Framework zur Verwaltung der Zsh-Konfiguration, das bietet:</p> </div> <div class="ulist"> <ul> <li> <p>Eine Sammlung von Themen für den Prompt,</p> </li> <li> <p>viele Plugins</p> </li> <li> <p>Eine klare Organisation der Konfiguration.</p> </li> </ul> </div> <div class="sect2"> <h3 id="_installation_von_oh_my_zsh">Installation von Oh My Zsh</h3> <div class="paragraph"> <p>Stellen Sie sicher, dass Zsh aktiv ist:</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>Wenn notwendig, starten Sie :</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>Dann lade das offizielle Installationsskript herunter und führe es aus:</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>Dieses Skript:</p> </div> <div class="ulist"> <ul> <li> <p>Erstelle den Ordner`~/.oh-my-zsh`,</p> </li> <li> <p>Speichert eventuell Ihre Datei`~/.zshrc`,</p> </li> <li> <p>aktiviert automatisch den neuen Prompt.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_das_thema_ändern">Das Thema ändern</h3> <div class="paragraph"> <p>Öffnen Sie Ihre Konfigurationsdatei:</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>Ändern Sie die Variable`ZSH_THEME`um ein anderes Thema zu wählen (zum Beispiel`agnoster`) :</p> </div> <div class="paragraph"> <p>ZSH_THEME="agnoster</p> </div> <div class="paragraph"> <p>Speichern Sie und laden Sie dann die Konfiguration neu:</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="_überprüfung">Überprüfung</h3> <div class="paragraph"> <p>Starten Sie Kitty und überprüfen Sie, dass der Prompt sich geändert hat. Sie können bestätigen, dass Oh My Zsh aktiv ist durch das Ausführen:</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>Das Ergebnis sollte ähnlich sein:</p> </div> <div class="paragraph"> <p>/home/dein_benutzer/.oh-my-zsh</p> </div> </div> <div class="sect2"> <h3 id="_use_case_diagramm">Use-Case-Diagramm</h3> <div class="imageblock"> <div class="content"> <img src="./images/ohmyzsh-installation.png" alt="ohmyzsh installation" width="566" height="480"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_transluzidität_in_kitty_aktivieren">Transluzidität in Kitty aktivieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>Eine der am meisten geschätzten Funktionen von Kitty ist die Möglichkeit, <strong>Transparenz</strong> dem Terminal-Hintergrund hinzuzufügen. Dadurch lässt sich das darunterliegende Umfeld (Fenster, Desktop usw.) leicht erkennen, was besonders beim Multitasking nützlich ist.</p> </div> <div class="sect2"> <h3 id="_voraussetzungen_für_die_transparenz">Voraussetzungen für die Transparenz</h3> <div class="paragraph"> <p>Die Transparenz in Kitty beruht auf dem<strong>Fensterkomponist</strong>von der grafischen Umgebung verwendet Bei Xubuntu (basierend auf XFCE), stellen Sie sicher, dass die<strong>Komposition ist aktiviert</strong>.</p> </div> <div class="ulist"> <div class="title">Zu prüfen :</div> <ul> <li> <p>Rechtsklick auf den Desktop &gt; Einstellungen &gt;<strong>Einstellungen des Fenster-Managers</strong>,</p> </li> <li> <p>Registerkarte<strong>Komponist</strong>: das Kontrollkästchen <strong>"Komposition aktivieren"</strong> muss aktiviert sein.</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/transparency-usecase.png" alt="transparency usecase" width="644" height="229"> </div> </div> </div> <div class="sect2"> <h3 id="_konfiguration_der_transparenz_in_kitty_conf">Konfiguration der Transparenz in kitty.conf</h3> <div class="paragraph"> <p>Öffnen Sie Ihre Konfigurationsdatei`~/.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>Fügen Sie die folgenden Zeilen hinzu oder ändern Sie sie:</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>Dieser Parameter akzeptiert Werte zwischen:</p> </div> <div class="ulist"> <ul> <li> <p><code>1.0</code>→ opaque (keine Transparenz),</p> </li> <li> <p><code>0.0</code>→ vollständig transparent (nicht verwendbar)</p> </li> <li> <p>Zwischenwerte wie`0.90`, <code>0.75</code>, etc.</p> </li> </ul> </div> <div class="paragraph"> <p>Ein guter visueller Kompromiss ist in der Regel zwischen`0.85` et <code>0.95</code>.</p> </div> </div> <div class="sect2"> <h3 id="_kitty_neustarten">Kitty neustarten</h3> <div class="paragraph"> <p>Schließen Sie alle Instanzen von Kitty und starten Sie anschließend ein neues Fenster, damit die Änderungen wirksam werden:</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="_mögliche_ergänzungen">Mögliche Ergänzungen</h3> <div class="paragraph"> <p>Wenn Sie einen benutzerdefinierten Terminalhintergrund verwenden, können Sie auch eine Hintergrundfarbe mit Transparenz (in RGBA) festlegen:</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>Die letzte Komponente (<code>ff</code>) gibt die Opazität an (von`00` à <code>ff</code>).</p> </div> </div> <div class="sect2"> <h3 id="_sequenzdiagramm_initialisierung_von_kitty_mit_transparenz">Sequenzdiagramm - Initialisierung von Kitty mit Transparenz</h3> <div class="imageblock"> <div class="content"> <img src="./images/transparency-sequence.png" alt="transparency sequence" width="771" height="422"> </div> </div> </div> <div class="sect2"> <h3 id="_bekannte_einschränkungen">Bekannte Einschränkungen</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>Die Transluzenz funktioniert nicht, wenn: - der XFCE-Compositor ist deaktiviert, - ein inkompatibler Fenstermanager wird verwendet, - Sie verwenden Kitty im <strong>tmux</strong>-Modus im Hintergrund ohne Transparenzunterstützung.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_piepton_deaktivieren_audible_bell">Piepton deaktivieren (audible bell)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Standardmäßig gibt Kitty einen <strong>bip</strong>-Ton aus, wenn eine fehlerhafte Eingabe gemacht wird oder ein Terminal-Ereignis es auslöst. Dieser Ton kann schnell lästig werden, besonders in einer intensiven Entwicklungsumgebung.</p> </div> <div class="paragraph"> <p>Um dieses Verhalten zu deaktivieren, füge die folgende Direktive zur Datei hinzu`~/.config/kitty/kitty.conf`:</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>Sie können auch eine <strong>visuelle Rückmeldung</strong> anstelle des Pieptons aktivieren mit:</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="_update_von_kitty">Update von Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Da Kitty über ein Skript und nicht über einen Paketmanager installiert ist, erfolgt das Update durch erneutes Ausführen des offiziellen Installationsskripts. Dadurch kannst du die neueste Version herunterladen und deine bestehende Installation in`~/.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>Das Suffix`.app`im Weg`~/.local/kitty.app`ist die Installationskonvention von Kitty unter Linux über das offizielle Skript und gibt keinerlei Hinweis auf eine ausschließliche Kompatibilität mit macOS.</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>Bevor du den Aktualisierungsbefehl startest, stelle sicher, dass du in deinem Home-Verzeichnis bist (<code>~</code>).</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Führen Sie den folgenden Befehl von Ihrem Home-Verzeichnis aus :</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>Dieses Skript übernimmt:</p> </div> <div class="ulist"> <ul> <li> <p>Die Binaries der neuen Version herunterladen.</p> </li> <li> <p>Dateien extrahieren in`~/.local/kitty.app`.</p> </li> <li> <p>Symbolische Links aktualisieren, falls erforderlich.</p> </li> </ul> </div> <div class="paragraph"> <p>Nach dem Update wird empfohlen, alle Instanzen von Kitty zu schließen und neu zu starten, um sicherzustellen, dass die neue Version korrekt berücksichtigt wird.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie die Anpassung vertiefen möchten, konsultieren Sie bitte die offizielle Dokumentation:</p> </div> <div class="ulist"> <ul> <li> <p>Kitty : <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>Github: <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> </ul> </div> <div class="paragraph"> <p>&lt;/think&gt;</p> </div> <div class="paragraph"> <p>Zsh: <a href="https://zsh.sourceforge.io/" class="bare">https://zsh.sourceforge.io/</a></p> </div> <div class="ulist"> <ul> <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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sie haben jetzt:</p> </div> <div class="ulist"> <ul> <li> <p>eines modernen und leistungsfähigen Terminals (Kitty)</p> </li> <li> <p>einer leistungsstarken und anpassbaren Shell (Zsh)</p> </li> <li> <p>einer sauberen und den Systempaketen unabhängigen Konfiguration</p> </li> <li> <p>eines ästhetischen und funktionalen Terminals, das mit Oh My Zsh ausgestattet ist</p> </li> </ul> </div> </div> </div> DGX Spark vs Cloud vs LLM-Abonnements — Der Wirtschaftsbenchmark, der den Traum von lokaler Hardware tötet 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="#_der_kontext_ein_markt_der_sich_gewendet_hat">Der Kontext: Ein Markt, der sich gewendet hat</a></li> <li><a href="#_das_optionen_panel">Das Optionen-Panel</a> <ul class="sectlevel2"> <li><a href="#_was_ich_ausgeschlossen_habe_und_warum">Was ich ausgeschlossen habe (und warum)</a></li> </ul> </li> <li><a href="#_einfache_inferenz_der_tod_der_lokalen_hardware">Einfache Inferenz: Der Tod der lokalen Hardware</a> <ul class="sectlevel2"> <li><a href="#_die_berechnung">Die Berechnung</a></li> <li><a href="#_selbst_bei_intensiver_nutzung">Selbst bei intensiver Nutzung</a></li> </ul> </li> <li><a href="#_fine_tuning_die_cloud_ist_unschlagbar">Fine-Tuning: Die Cloud ist unschlagbar</a> <ul class="sectlevel2"> <li><a href="#_die_reale_kosten_eines_finetune">Die reale Kosten eines Fine‑Tune</a></li> <li><a href="#_die_spezialisierten_akteure">Die spezialisierten Akteure</a></li> </ul> </li> <li><a href="#_der_einzige_wahre_grund_die_souveränität_der_daten">Der einzige wahre Grund: Die Souveränität der Daten</a> <ul class="sectlevel2"> <li><a href="#_die_wahre_berechnung_der_vertraulichkeit">Die wahre Berechnung der Vertraulichkeit</a></li> </ul> </li> <li><a href="#_zusammenfassung_die_entscheidungsmatrix">Zusammenfassung: Die Entscheidungsmatrix</a></li> <li><a href="#_der_sonderfall_das_pro_abonnement_gegenüber_den_chinesischen_modellen">Der Sonderfall: Das Pro-Abonnement gegenüber den chinesischen Modellen</a> <ul class="sectlevel2"> <li><a href="#_warum_ändern_chinesische_modelle_alles">Warum ändern chinesische Modelle alles</a></li> <li><a href="#_was_das_für_die_hardware_bedeutet">Was das für die Hardware bedeutet</a></li> </ul> </li> <li><a href="#_und_huawei">Und Huawei?</a></li> <li><a href="#_fazit_der_luxus_der_nähe">Fazit: Der Luxus der Nähe</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit: 14 minutes</div> <p>NVIDIA verkauft den DGX Spark als „Desktop-KI-Supercomputer“ für 4 699 $. Ollama bietet seine Cloud-Modelle für 20 $/Monat an. Ein H100 wird bei Vast.ai für 1,38 $/Stunde gemietet. Und die chinesischen Open‑Source‑Modelle — DeepSeek, Qwen, GLM — sind überall verfügbar, kostenlos, ohne dass man eine Karte kaufen muss. Wofür genau dient also dieser Spark? Ich habe die Zahlen durchgerechnet.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">klopf</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_der_kontext_ein_markt_der_sich_gewendet_hat">Der Kontext: Ein Markt, der sich gewendet hat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Im Mai 2026 hat sich die KI-Landschaft im Vergleich zur Ankündigung des DGX Spark auf der CES 2025 grundlegend verändert. Drei Kräfte haben zusammengewirkt, um die Rechtfertigung lokaler Hardware zunehmend schwieriger zu machen :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Der Preisverfall der GPU-Cloud</strong>Eine H100 wird für zwischen 1,38 $ und 3 $/h vermietet, gegenüber 5–8 $/h vor 18 Monaten.</p> </li> <li> <p><strong>Die Explosion der chinesischen Open-Source-Modelle</strong>: DeepSeek-V4, Qwen-3, GLM-5 sind wettbewerbsfähig mit den westlichen Modellen, kostenlos verfügbar</p> </li> <li> <p><strong>Der Aufstieg der Managed-Inference-Plattformen</strong>Ollama, Groq und Together AI bieten API zu aggressiven Preisen an, mit großzügigen kostenlosen Tarifen.</p> </li> </ul> </div> <div class="paragraph"> <p>Der DGX Spark, angekündigt zu $2 999 und dann auf $4 699 erhöht, kommt in eine Welt, die ihn nicht mehr braucht.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_optionen_panel">Das Optionen-Panel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier sind die im Mai 2026 verfügbaren Lösungen zum Ausführen von LLMs, von der leichtesten bis zur schwersten :</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">Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">VRAM / Kapazität</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zugängliche Modelle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hauptbeschränkung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama kostenlos</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$0/Monat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">leichte Cloud</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle öffentlichen Modelle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Eingeschränkte Nutzung, 1 Modell gleichzeitig</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/Monat (~$240/Jahr)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N/A (API geschlossen)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nur Claude 4.x</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Einzigartiges Modell, kein 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/Monat (~$200/Jahr)</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">Alle öffentlichen Modelle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">max. 3 gleichzeitige Modelle</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/Monat (~$1 200/Jahr)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">schwere Wolke</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle öffentlichen Modelle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">10 gleichzeitige Modelle</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">Alle Modelle, fine-tuning</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stundenabrechnung, Setup erforderlich</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 (Kauf)</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 &lt;128 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Langsam (~10x weniger als ein H100), fest</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 &lt;192 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nicht CUDA, MLX-Ökosystem</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>Die genannten GPU-Cloud-Preise sind die von Vast.ai und RunPod im Mai 2026 — Spot/On-Demand, nicht reserviert. Die Preise der Hyperscaler (AWS, GCP, Azure) bleiben 2-3x höher.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_was_ich_ausgeschlossen_habe_und_warum">Was ich ausgeschlossen habe (und warum)</h3> <div class="paragraph"> <p>Ich habe die folgenden Optionen absichtlich von diesem Benchmark ausgeschlossen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>API von OpenAI / Anthropic / Google</strong>: Das Thema hier ist, <strong>open-source</strong> Modelle auszuführen, die man auswählen, fine-tunen und nicht von einem einzigen Anbieter abhängig sein kann.</p> </li> <li> <p><strong>Huawei Ascend / Atlas</strong> : Huawei ne commercialise pas d&#8217;é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&#8217;est une puce serveur, pas un système autonome. L&#8217;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="_einfache_inferenz_der_tod_der_lokalen_hardware">Einfache Inferenz: Der Tod der lokalen Hardware</h2> <div class="sectionbody"> <div class="paragraph"> <p>Beginnen wir mit dem häufigsten Anwendungsfall: Chatten mit einem LLM, ein Code‑Review machen, Text generieren. Kein Fine‑Tuning, kein Batch‑Verarbeitung, lediglich interaktive Inferenz.</p> </div> <div class="sect2"> <h3 id="_die_berechnung">Die Berechnung</h3> <div class="paragraph"> <p>Ein DGX Spark zu $4 699. Wir teilen durch die jährlichen Kosten jedes Abonnements:</p> </div> <div id="diag-breakeven" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Break-even-Punkt — DGX Spark ($4 699) vs Abonnements rectangle "DGX Spark $4 699" as spark #FFCDD2 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Break-even-Punkt — DGX Spark ($4 699) vs Abonnements rectangle "DGX Spark $4 699" as spark #FFCDD2 rectangle "Ollama Pro $200/Jahr" as opro #C8E6C9 rectangle "Claude Pro $240 pro Jahr" as cpro #C8E6C9 rectangle "Ollama Max $1.200 pro Jahr" as omax #FFF9C4 rectangle "Cloud H100 $3/h × 10h/Woche" as cloud #BBDEFB spark --&gt; opro : 23.5 années ⏳ spark --&gt; cpro : 19.6 années ⏳ spark --&gt; omax : 3.9 années spark --&gt; cloud : 3.0 années (à 10h/semaine, intermittent) note bottom of spark Sans compter l'électricité (~$150/an) Sans compter l'obsolescence hardware Sans compter qu'il est 10x plus lent end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Das Urteil ist brutal. Für die Inferenz:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong>: Sie müssten<strong>23 Jahre</strong>um einen DGX Spark abzuschreiben. Der Spark wird seit 20 Jahren obsolet sein.</p> </li> <li> <p><strong>Ollama Max</strong>:<strong>4 Jahre</strong>— vorausgesetzt, man benutzt Spark 24/7, was niemand tut</p> </li> <li> <p><strong>Claude Pro</strong>: gleiches Problem,<strong>20 Jahre</strong>für ein geschlossenes Einzelmodell</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ Das Versprechen des „Desktop‑KI‑Supercomputers“ stößt auf eine elementare Buchhaltungsrealität: $4.699 / $20 pro Monat = niemals rentabel für den individuellen Gebrauch. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_selbst_bei_intensiver_nutzung">Selbst bei intensiver Nutzung</h3> <div class="paragraph"> <p>Nehmen wir das schlimmste Szenario für die Cloud an: Sie betreiben einen H100 8 Stunden pro Tag, 5 Tage pro Woche, 52 Wochen pro Jahr.</p> </div> <div class="ulist"> <ul> <li> <p>8 × 5 × 52 = 2.080 Stunden/Jahr</p> </li> <li> <p>2 080 × $2/h (Durchschnittspreis Spot H100) =<strong>$4.160 pro Jahr</strong></p> </li> </ul> </div> <div class="paragraph"> <p>Der Spark ($4.699) rentiert sich in<strong>13 Monate</strong>. Ausser dass :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Der H100 ist<strong>~10x schneller</strong>das GB10 von Spark. Sie erledigen in 1 h, was Spark in 10 h erledigt. Bei gleichem Arbeitsvolumen kostet Ihnen der H100 $416/Jahr, nicht $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>Der Vergleich von 1 h H100 mit 1 h Spark ergibt keinen Sinn. Der H100 erledigt die Arbeit 10× schneller. Der tatsächliche Cloud‑Kostenaufwand für eine gegebene Arbeitslast ist daher etwa 10× geringer als die naive Berechnung basierend auf den Stunden.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fine_tuning_die_cloud_ist_unschlagbar">Fine-Tuning: Die Cloud ist unschlagbar</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das klassische Argument der Verteidiger des Spark: „Ja, aber beim Fine-Tuning ist es anders.“</p> </div> <div class="paragraph"> <p>Nein, das ist es nicht.</p> </div> <div class="sect2"> <h3 id="_die_reale_kosten_eines_finetune">Die reale Kosten eines Fine‑Tune</h3> <div class="paragraph"> <p>Ein Feintuning LoRA/QLoRA auf Unsloth eines 7B-Modells :</p> </div> <div class="ulist"> <ul> <li> <p>~2-3h auf einem H100 =<strong>$5 bis $9</strong></p> </li> <li> <p>Das Gleiche auf dem Spark =<strong>20-30h</strong>(10 Mal langsamer), blockiert die Maschine</p> </li> </ul> </div> <div class="paragraph"> <p>Mit den $4 699 des Spark, können Sie finanzieren :</p> </div> <div class="ulist"> <ul> <li> <p><strong>~500 bis ~900 Feinabstimmungen</strong>in Cloud H100</p> </li> <li> <p>Ou <strong>ungefähr 23 Jahre</strong>von Ollama Pro</p> </li> <li> <p>Ou <strong>~4 Jahre</strong>d&#8217;Ollama Max</p> </li> </ul> </div> <div class="paragraph"> <p>Und für größere Modelle (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>Für ein vollständiges Fine‑Tuning braucht man grundsätzlich mehrere GPUs — Spark ist aus dem Rennen.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_die_spezialisierten_akteure">Die spezialisierten Akteure</h3> <div class="paragraph"> <p>Im Jahr 2026 bieten Plattformen wie Unsloth, Modal, Replicate und Together AI serverloses Feintuning an:</p> </div> <div class="ulist"> <ul> <li> <p>Keine GPU-Verwaltung</p> </li> <li> <p>Keine Umgebungskonfiguration</p> </li> <li> <p>Zahlung pro Minute</p> </li> <li> <p>integrierte Optimierungen (Flash Attention, automatische Quantisierung)</p> </li> </ul> </div> <div id="diag-fine-tuning-cost" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-7037270517924db3ca231c13305cdc18.svg" alt="Comparaison des coûts de fine-tuning" width="626" height="244"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_der_einzige_wahre_grund_die_souveränität_der_daten">Der einzige wahre Grund: Die Souveränität der Daten</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nachdem die Inferenz, das Fine‑Tuning und das Preis‑leistungs‑Verhältnis eliminiert wurden — was bleibt noch für Spark?</p> </div> <div class="paragraph"> <p><strong>Absolute Vertraulichkeit</strong></p> </div> <div class="paragraph"> <p>Es geht nicht um den Datenschutz: „Ich möchte nicht, dass meine Prompts von einem OpenAI‑Mitarbeiter gelesen werden“. Das ist im Jahr 2026 ein falsches Problem: Ollama, Groq und die meisten seriösen Anbieter haben Richtlinien ohne Logging und ohne Aufbewahrung.</p> </div> <div class="paragraph"> <p>Echte Vertraulichkeit ist:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Regulatorischer Luftabstand</strong>: Verteidigung, Diplomatie, Gesundheit — Daten können <strong>physisch</strong> das Gebäude nicht verlassen</p> </li> <li> <p><strong>Kritische proprietäre Daten</strong>: Quellcode eines unveröffentlichten Produkts, Geschäftsgeheimnisse, Handelsalgorithmen</p> </li> <li> <p><strong>Netzwerkresilienz</strong>Die KI muss weiterlaufen, selbst wenn das Internet ausfällt</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>Aber seien wir ehrlich: Welcher Prozentsatz der Käufer von DGX Spark ist tatsächlich in diesem Fall? 1 %? Der Rest ist ein „nice to have“, das in eine Ausgabe von 4 699 $ umgewandelt wurde.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_die_wahre_berechnung_der_vertraulichkeit">Die wahre Berechnung der Vertraulichkeit</h3> <div class="paragraph"> <p>Für den individuellen Gebrauch:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong>($20/Monat) + chinesische Open-Source-Modelle = pragmatische Lösung</p> </li> <li> <p>Wenn ein Prompt bei Ollama austritt, versinkt er in den Millionen täglicher Anfragen. Das ist ein Tropfen im Ozean.</p> </li> <li> <p>Das wahre Risiko besteht nicht im Auslaufen eines Prompts — es ist das Training ohne Einwilligung an Ihren Daten. Und das verbieten ernsthafte Provider vertraglich.</p> </li> </ul> </div> <div class="paragraph"> <p>import sys</p> </div> <div class="paragraph"> <p>def main(): data = sys.stdin.read() if data == "": print("", end="") return</p> </div> <div class="paragraph"> <p>tokens = data.split(&#8216;') n = len(tokens) parts = [] for i in range(n): parts.append(tokens[i]) if i &lt; n - 1: parts.append('&#8217;)</p> </div> <div class="paragraph"> <p>print(''.join(parts), end="")</p> </div> <div class="paragraph"> <p>if <em>name</em> == '<em>main</em>': main()</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zusammenfassung_die_entscheidungsmatrix">Zusammenfassung: Die Entscheidungsmatrix</h2> <div class="sectionbody"> <div id="diag-decision-matrix" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-e142c22969fbad0e8afbee0052af91e7.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">Kriterium</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ollama kostenlos</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>Inferenz</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">beschränkt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Bequem</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Übertreibung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Langsam</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Feinabstimmung</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">�✅ unbesiegbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Möglich aber langsam</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Jahreskosten</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 im Voraus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Vertraulichkeit</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">�⚠️ Wolke USA</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cloud US (variabel)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Total</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Wartung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">keine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">einzigartige Einrichtung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Elektrizität, Updates</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Obsoleszenz</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">keine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Keine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3-5 Jahre</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Software-Ökosystem</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle Modelle offen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle Modelle open</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle Modelle open</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CUDA (langsamer)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Urteil</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">gelegentlich</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Empfohlen</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vorteile/Suche</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nur Air-gap</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>*Variabel gemäß Arbeitsaufwand ; mit H100-Geschwindigkeit ~10x &gt; Spark, die effektiven Kosten für einen gegebenen Workload sind niedrig.</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_der_sonderfall_das_pro_abonnement_gegenüber_den_chinesischen_modellen">Der Sonderfall: Das Pro-Abonnement gegenüber den chinesischen Modellen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ein Punkt ist hervorzuheben: die Kombination<strong>Ollama Pro zu $20/Monat + chinesische Open-Source-Modelle</strong>Es ist wahrscheinlich das beste Preis‑Leistungs‑Verhältnis in der Geschichte der KI für den Massenmarkt.</p> </div> <div class="sect2"> <h3 id="_warum_ändern_chinesische_modelle_alles">Warum ändern chinesische Modelle alles</h3> <div class="ulist"> <ul> <li> <p><strong>DeepSeek-V4-Pro</strong>: 1.6T Parameter, CSA+HCA, 1M Kontext, wettbewerbsfähig mit Claude 4 und GPT-5 für Code</p> </li> <li> <p><strong>Qwen-3</strong>: 235B, 256K Kontext, ausgezeichnet auf Französisch und im Denken</p> </li> <li> <p><strong>GLM-5.1</strong>: 744B, MLA+DSA, 200K Kontext, maßgeschneidert für Agentik</p> </li> </ul> </div> <div class="paragraph"> <p>Alle verfügbar bei Ollama. Alle Open‑Source (permissive Lizenzen). Alle ohne Einschränkung nutzbar über ein Abonnement von 20 $/Monat.</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>Mit Ollama Pro hast du Zugriff auf etwa fünf « frontier » Open-Source-Modelle zum Preis eines einzigen geschlossenen Modells (Claude Pro). Der Wert ist so asymmetrisch, dass es fast absurd wird.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_was_das_für_die_hardware_bedeutet">Was das für die Hardware bedeutet</h3> <div class="paragraph"> <p>Wenn das beste Preis-Leistungs-Verhältnis ein Cloud-Abonnement zu $20 pro Monat ist, wird die lokale Hardware zu einer Frage des <strong>Komforts</strong> oder des <strong>Prinzips</strong> — nicht einer wirtschaftlichen Entscheidung.</p> </div> <div class="paragraph"> <p>Ein DGX Spark zu $4 699 ist das Äquivalent von:</p> </div> <div class="ulist"> <ul> <li> <p>235 Monate Ollama Pro</p> </li> <li> <p>Veröffentlichungsdatum für 23 AAA‑Spiele</p> </li> <li> <p>4 MacBook Air M4</p> </li> <li> <p>Ein Jahr Miete einer Zweizimmerwohnung in Lyon</p> </li> </ul> </div> <div class="paragraph"> <p>Für die Berechnung. Langsam.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_und_huawei">Und Huawei?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Da die Frage mir während meiner Recherche gestellt wurde: Nein, Huawei vertreibt kein Äquivalent zum DGX Spark.</p> </div> <div class="paragraph"> <p>Was existiert :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ascend 910C</strong> : 128 Go HBM, 800 TFLOPS FP16 — mais c&#8217;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&#8217;instant, aucun constructeur chinois n&#8217;a annoncé de produit équivalent dans ce format.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_der_luxus_der_nähe">Fazit: Der Luxus der Nähe</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das DGX Spark ist kein schlechtes Produkt. Es ist eine schlechte Investition für 99% der potenziellen Käufer.</p> </div> <div id="diag-verdict" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Die KI-Landschaft 2026 — Wer dominiert? left to right direction package "Privater Gebrauch / KMU" #C8E6C9 { rectangle "🏆 Ollama Pro\n$20/Monat" as pro rectangle "Ollama Free ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Die KI-Landschaft 2026 — Wer dominiert? left to right direction package "Privater Gebrauch / KMU" #C8E6C9 { rectangle "🏆 Ollama Pro\n$20/Monat" as pro rectangle "Ollama Free $0/Monat" as free rectangle "Cloud GPU-Spot $1-3/h" as spot } package "Intensive Nutzung / Pro" #FFF9C4 { rectangle "�🏆 Ollama Max $100/Monat" as max rectangle "Dedizierte Cloud-GPU $2-4/h" as dedicated rectangle "Modal / Together AI Serverless" as serverless } package "obligatorischer Luftspalt" #FFCDD2 { rectangle "DGX Spark $4 699" as spark rectangle "Mac Studio M3U ~$5 000" as mac } note bottom of spark 1% des cas d'usage — défense, santé réglementée, secrets industriels critiques end note @enduml</pre> </div> </div> <div class="paragraph"> <p><em>__</em> Ein DGX Spark aus 2026 zu kaufen, ist wie ein Mailserver aus 2010 zu kaufen: technisch möglich, philosophisch befriedigend, wirtschaftlich absurd für eine Person. (Empty)</p> </div> <div class="paragraph"> <p>Die Rechnung ist einfach, und sie lügt nicht:</p> </div> <div class="ulist"> <ul> <li> <p><strong>$0</strong>um mit DeepSeek auf Ollama Free zu chatten</p> </li> <li> <p><strong>$200/Jahr</strong>um ernsthaft mit Ollama Pro zu arbeiten</p> </li> <li> <p><strong>$5-9</strong>für ein einmaliges Fine-Tuning auf Cloud-GPU</p> </li> <li> <p><strong>$4.699</strong>für&#8230;&#8203; das Erlebnis, ein NVIDIA-Gehäuse auf seinem Schreibtisch zu haben ?</p> </li> </ul> </div> <div class="paragraph"> <p>Der Markt hat entschieden. Cloud-Abonnements und chinesische Open-Source-Modelle haben die Preisschlacht gewonnen. Lokale Hardware überlebt nur in regulatorischen Nischen, nicht in den Büros der Entwickler.</p> </div> <div class="paragraph"> <p><em><em>_ Der DGX Spark ist kein kosteneffizientes Werkzeug. Es ist ein Statement. « Ich möchte meine KI zu Hause haben, nicht in der Cloud eines anderen. » Das ist respektabel. Aber 2026, wenn Ollama dir DeepSeek-V4-Pro in der Cloud für $20/Monat gibt, ist das vor allem ein Statement, das sehr teuer ist. </em>_</em></p> </div> <hr> <div class="paragraph"> <p><strong>Dieser Artikel stammt aus einem Gespräch mit meinem KI-Agenten über die wirtschaftliche Relevanz des DGX Spark, abgeglichen mit einer Marktbeobachtung zu den Cloud-GPU-Preisen (Vast.ai, RunPod), den Preismodellen von Ollama/Claude und dem Ökosystem chinesischer Open-Source-Modelle. Die genannten Preise stammen aus Mai 2026 – sie werden wahrscheinlich noch weiter gefallen sein, wenn Sie diese Zeilen lesen.</strong></p> </div> </div> </div> Die LLM-Governance-Matrix — Warum die Sicherheit Ihrer KI mit der Baumstruktur beginnt 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="#_das_problem_prompt_engineering_ist_ein_sandschloss">Das Problem: Prompt Engineering ist ein Sandschloss</a></li> <li><a href="#_meine_antwort_die_44_matrix">Meine Antwort: die 4×4-Matrix</a> <ul class="sectlevel2"> <li><a href="#_die_fünf_zonen_räumliche_dimension_dsgvo">Die fünf Zonen (Räumliche Dimension — DSGVO)</a></li> <li><a href="#_die_epistemologische_klassifizierung_zweite_dimension">Die epistemologische Klassifizierung (Zweite Dimension)</a></li> </ul> </li> <li><a href="#_wie_das_llm_diese_matrix_konsumiert">Wie das LLM diese Matrix konsumiert</a></li> <li><a href="#_implementierung_typisierte_gradleaufgaben">Implementierung : typisierte Gradle‑Aufgaben</a></li> <li><a href="#_warum_ist_es_ein_manifest_nicht_nur_eine_spezifikation">Warum ist es ein Manifest, nicht nur eine Spezifikation</a></li> <li><a href="#_die_vollständige_kaskade_vom_brain_dump_zum_blog_artikel">Die vollständige Kaskade — vom Brain-Dump zum Blog-Artikel</a></li> <li><a href="#_procontra">Pro/Contra</a></li> <li><a href="#_fazit_ordne_deine_dateien_an_nicht_deine_prompts">Fazit: Ordne deine Dateien an, nicht deine Prompts</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 14 minutes</div> <p>Für Monate habe ich die Agenten-Governance-Regeln gestapelt. Dateien EAGER, lazy Checklisten, sechsstufige Protokolle zur Sitzungsbeendigung. Und doch blieb eine Frage offen: <strong>Wie weiß das LLM, was es hat das Recht, mit einer Datei zu machen ?</strong></p> </div> <div class="paragraph"> <p>Die Antwort ist nicht in einem Prompt. Sie befindet sich im Dateisystem.</p> </div> <div class="paragraph"> <p>Hier ist die Architektur-Spezifikation, die die Antwort nutzbar macht — la <strong>LLM-Governance-Matrix</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_prompt_engineering_ist_ein_sandschloss">Das Problem: Prompt Engineering ist ein Sandschloss</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn man einer KI eine Datei gibt, gibt man ihr alles. Der Inhalt, ja — aber auch das Fehlen von Schutzmaßnahmen. Das LLM weiß nicht, ob diese Datei enthält ein Geheimnis, eine spekulative Meinung oder Closed-Source-Code. Er wird es indizieren, es zusammenfassen, es zitieren, es mit anderen Daten vermischen — und potenziell es zu veröffentlichen in einer öffentlichen Einbettung oder einer Benutzerantwort.</p> </div> <div class="paragraph"> <p>Die klassische Parade ist der 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>Dieser Prompt hat drei Probleme:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Es beruht auf dem guten Willen des LLMs.</strong> Ein Modell groß genug für</p> </li> </ol> </div> <div class="paragraph"> <p>Das Lösen komplexer Fehler ist ausreichend groß, um eine Anweisung zu umgehen. von Sicherheit ertrunken in 200k Tokens Kontext.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Es ist kontextuell, nicht strukturell.</strong> Ändern Sie den Prompt, ändern Sie das LLM,</p> </li> </ol> </div> <div class="paragraph"> <p>Wechsle die Sitzung — und die Regel verschwindet.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Es skaliert nicht.</strong> Jeder neue Dateityp, jede neue Ebene</p> </li> </ol> </div> <div class="paragraph"> <p>Die Vertraulichkeit verlangt eine neue Klausel. Dein Prompt wird zu einem gesetzlicher Text, den niemand vollständig liest.</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>Die Sicherheit eines Systems darf niemals von einer Anweisung abhängen, die kann vergessen, umgehen oder nicht laden. Sie muss von einem abhängen eine Barriere, die man nicht überwinden kann, ohne es ausdrücklich zu wollen.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_meine_antwort_die_44_matrix">Meine Antwort: die 4×4-Matrix</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Lösung, die ich in meinem Workspace implementiert habe, ist eine <strong>Zone-Matrix × Zugangsrecht LLM</strong>. Sie verlangt nicht vom LLM, dass er vorsichtig ist. Sie macht. die strukturell unmögliche Unvorsichtigkeit</p> </div> <div id="diag-matrix-overview" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title LLM-Governance-Matrix — Bereich × Zugriffsrecht package "Arbeitsbereich" { rectangle "WURZEL (Kreis 0) ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title LLM-Governance-Matrix — Bereich × Zugriffsrecht package "Arbeitsbereich" { rectangle "WURZEL (Kreis 0) ━━━━━━ Brain dump Freies Denken [VERBOTEN LLM]" as Z0 #FFB3B3 rectangle "configuration/ (Kreis 1) ━━━━━━ Geheimnisse, Tokens Private Infrastruktur [VERBOTEN LLM]" as Z1 #FFB3B3 rectangle "office/ (Kreis 2) ━━━━━━ Redaktionelle Daten Artikel, Layouts [Gefilterte Vision]" as Z2 #FFF3B3 rectangle "foundry/private/ (Kreis 3) ━━━━━━ Code closed source [DATASET PRIVAT]" as Z3 #B3D9FF rectangle "foundry/public/\n(Kreis 3)\n━━━━━━\nOpen-Source-Code\nApache 2.0\n[FREIER ZUGANG]" as Z4 #B3FFB3 } Z0 -[hidden]-&gt; Z1 Z1 -[hidden]-&gt; Z2 Z2 -[hidden]-&gt; Z3 Z3 -[hidden]-&gt; Z4 @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_die_fünf_zonen_räumliche_dimension_dsgvo">Die fünf Zonen (Räumliche Dimension — DSGVO)</h3> <div class="paragraph"> <p>Jeder Bereich des Workspaces hat eine DSGVO-Stufe, die bestimmt, <strong>wo</strong> die Datei kann weitergeleitet werden :</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">DSGVO-Niveau</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Inhalt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Öffentliches RAG-Zugangsrecht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Wurzel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0 — Intim</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Brain-Dumps, LLM-Gespräche</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>VERBOTEN</strong>— niemals indexiert</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 — Eingeschränkter Eigentümer</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Geheimnisse, Tokens, API-Schlüssel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>VERBOTEN</strong>— nie indiziert</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 — Beschränkt kooperativ</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Redaktionsdaten, Bildausschnitt, Schulungen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>GEFILTERT</strong>— Nur Vision</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 — Bedingt geöffnet</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Code closed source, SaaS nicht öffentlich</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>VERBOTEN</strong>— privates Dataset ausschließlich</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 — Einheimisches Publikum</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Code Apache 2.0, veröffentlichte Plugins</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>FREI</strong>— vollständige Indizierung</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Die Regel ist einfach: <strong>Der Dateipfad bestimmt, was das LLM damit tun kann.</strong> Keine Metadaten zu pflegen, kein Tag im Frontmatter hinzuzufügen Keine manuelle Klassifizierung bei jedem Commit. Die Datei ist in`OSS/<code>? Er ist öffentlich. Er ist in`configuration/</code>? Er ist unantastbar.</p> </div> </div> <div class="sect2"> <h3 id="_die_epistemologische_klassifizierung_zweite_dimension">Die epistemologische Klassifizierung (Zweite Dimension)</h3> <div class="paragraph"> <p>Die räumliche Dimension sagt <strong>wo</strong> weiterleiten. Aber es gibt eine zweite Achse, senkrecht: <strong>quoi</strong> Router. Einige Dateien in einem autorisierten Bereich enthalten Informationen. die nicht so verdünnt werden sollten:</p> </div> <div id="diag-epistemic-filter" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-01bb956e6c0a02d42508f3ef3a24ee8e.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>Das epistemologische Klassifizierungsraster, eingraviert in Regel 2bis meiner Governance Agent:</p> </div> <div class="paragraph"> <p>| Status | Definition | Signal LLM | Ziel | | VISION | stabilisierte Architektur, getestetes pattern | deklarative Sprache, Referenzen sessions/tests | vollständige Dilution + Blog | | STRATEGIE | Positionierung Business, Preisgestaltung | Marktvokabular, Wettbewerb | Nur Stammdokumente | | OPINION | Spekulation, nicht bestätigte Hypothese | Hypothetische Sprache, Intuition | Einschließung Kreis 0 |</p> </div> <div class="paragraph"> <p>Die Kombination der beiden Dimensionen — physischer Bereich × epistemische Klassifikation — bildet die<strong>komplette Matrix</strong>[No output]</p> </div> <div id="diag-full-matrix" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-14a8362be0a9c8ab06d62e2c5a36c967.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="_wie_das_llm_diese_matrix_konsumiert">Wie das LLM diese Matrix konsumiert</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Matrix ist kein Dokument, das das LLM liest. <strong>Beschränkung implizite</strong> kodiert im zusammengesetzten Kontextvektor (EPIC 9 — laufend der Implementierung)</p> </div> <div class="paragraph"> <p>Hier ist, was das LLM bei jeder Sitzung erhält:</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>Konkret, wenn das LLM mir sagt:</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>Die Zonenmetadaten antworten, noch bevor der LLM seinen Satz überhaupt beendet hat : <code>edster/`ist in`CSS/</code>, Stufe 3 →<strong>Zugriff auf den öffentlichen Knowledge Graph ist verboten.</strong> Der RAG sieht es nicht. Der Graph berührt es nicht. Die Benutzerantwort ne ihn zitiert nicht</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>Die räumliche Ontologie funktioniert wie eine<strong>Unix-Berechtigung</strong>für die LLMs. Du verlangst nicht, dass ein Prozess vorsichtig mit`/etc/shadow`— Sie verweigern ihm den Lesezugriff. Gleiches Prinzip.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_implementierung_typisierte_gradleaufgaben">Implementierung : typisierte Gradle‑Aufgaben</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Matrix ist keine Philosophie. Es ist Code. Hier ist der Auftrag für die Aufgabe. Gradle, das es implementiert:</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&lt;Zone&gt; = 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>Die Aufgabe ist <strong>testbar</strong>. Sie können einen Test schreiben, der überprüft:</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. Wie bei plantuml-gradle — die Sicherheit wird getestet, nicht erhofft.</p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_ist_es_ein_manifest_nicht_nur_eine_spezifikation">Warum ist es ein Manifest, nicht nur eine Spezifikation</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieses Dokument ist eine Architekturspezifikation, weil es definiert:</p> </div> <div class="ulist"> <ul> <li> <p>des<strong>Dimensionen</strong>(raumlich, epistemisch)</p> </li> <li> <p>Des<strong>deterministische Regeln</strong>(zone → Zugriffsrecht)</p> </li> <li> <p>Un <strong>Aufgabenvertrag</strong>(Gradle typisiert, testbar)</p> </li> <li> <p>Eine<strong>Referenzimplementierung</strong>(mein Arbeitsbereich)</p> </li> </ul> </div> <div class="paragraph"> <p>Aber es ist auch ein<strong>offensichtlich</strong>weil er Stellung zu einer Debatte bezieht größer : <strong>wie regelt man den Zugriff eines LLM auf Daten ?</strong></p> </div> <div class="paragraph"> <p>Die Antwort der Industrie ist Prompt-Engineering + die Guardrails<br> die post-hoc-Klassifikatoren. Meine Antwort lautet: <strong>Sortieren Sie Ihre Dateien in die guten Unterlagen.</strong> Der Rest ist automatisch.</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>Dieses Manifest sagt nicht "die LLMs müssen ausgerichtet sein". Er sagt: "die Ausrichtung Ein LLM auf Ihren Sicherheitsregeln ist eine Folge Ihres Systems von Dateien, nicht von Ihrem Prompt.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_die_vollständige_kaskade_vom_brain_dump_zum_blog_artikel">Die vollständige Kaskade — vom Brain-Dump zum Blog-Artikel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um den vollständigen Zyklus zu veranschaulichen, hier ist, wie diese Matrixidee entstanden ist. und wurde verdünnt:</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>Was als eine Beobachtung in der Sitzung begann (« hey, das RAG weiß es nicht) dass edster closed source ist") ist zu einer Architektur-Spezifikation geworden Veröffentlicht in weniger als einer Sitzung. Das ist das Pattern STIMULUS im Einsatz.</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">Dieser Ansatz (Räumliche Ontologie + Matrix)</th> <th class="tableblock halign-left valign-top">Der Klassische Ansatz (Prompt + Leitplanken)</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mechanik</strong> — das Dateisystem blockiert den Zugriff, nicht das LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Deklarativ</strong> — der Prompt verlangt vom LLM, vorsichtig zu sein.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Testable</strong> — Der Gradle-Aufgabenvertrag wird von 380+ Tests überprüft</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Nicht testbar</strong> — "Hat das LLM die Regel eingehalten?" ist eine offene Frage</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Unabhängig vom LLM</strong> — Wechsel das Modell, die Ordner bleiben.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Abhängig vom LLM — jedes Modell interpretiert das Prompt anders</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Skalierbar</strong> — neuer Datentyp = neuer Ordner, keine Codeänderungen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Non scalable</strong> — neuer Datentyp = neue Prompt-Klausel, neues Risiko einer Regression</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Auditable</strong> — das Dateisystem ist der Auditpfad</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Nicht prüfbar</strong> — Der Prompt hat kein Historie, kein Diff, kein Blame.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Beschränkung</strong> : erfordert eine initiale Organisationsdisziplin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Einschränkung</strong> : erfordert eine Disziplin im Verfassen von Prompts bei jeder Sitzung</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_fazit_ordne_deine_dateien_an_nicht_deine_prompts">Fazit: Ordne deine Dateien an, nicht deine Prompts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die LLM-Governance-Matrix, die ich gerade beschrieben habe, ist kein Produkt. Es ist eine<strong>Architekturspezifikation</strong>— und das ist der Grund, warum sie ist veröffentlichbar</p> </div> <div class="paragraph"> <p>Was sie robust macht, ist dass sie dem LLM nichts verlangt. Sie nicht ihm Vertraut nicht. Sie beruht nicht auf ihrer Ausrichtung, ihrem Verständnis aus dem Französischen oder seiner guten Wille. Sie beruht auf dem Dateisystem — die tiefste, stabilste und am meisten getestete Schicht des gesamten Stacks.</p> </div> <div class="paragraph"> <p>Wenn ich meinem LLM sage: „Du kannst alles indexieren“<code>OSS/</code>, nichts in <code>configuration/</code>, et `office/`nur wenn es als Vision klassifiziert ist Das ist keine Anweisung. Es ist ein <strong>Filter</strong> — implementiert in Kotlin, Verifiziert durch 380 Tests, ausgeführt, bevor das LLM die Daten sieht.</p> </div> <div class="paragraph"> <p>Das ist der Unterschied zwischen jemandem zu sagen"schau nicht in diese Schublade und die abschließbare Schublade schließen. Der Governance-Agent, den ich seit baue Monate ist der Schlüssel. Die Matrix ist der Plan des Möbels.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0116_compartimentage_epistemique_automatise_llm_post.html">Artikel 0116 — Automatisierte epistemologische Kompartimentierung</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Article 0114 — Die Vertrauenskreise und die räumliche Ontologie</a></p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Artikel 0108 — Verwalten eines KI-Agents mit Asciidoc</a></p> </li> <li> <p><a href="../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html">Artikel 0115 — Der Anonymisierer MVP0</a></p> </li> </ul> </div> </div> </div> Die Granularisierung OSS/CSS — Warum habe ich foundry/ in zwei Teile geschnitten 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="#_der_unfall_der_darauf_wartete_sich_zu_ereignen">Der Unfall, der darauf wartete, sich zu ereignen</a> <ul class="sectlevel2"> <li><a href="#_die_wahre_frage">Die wahre Frage</a></li> </ul> </li> <li><a href="#_die_lösung_oss_und_css">Die Lösung: OSS/ und CSS/</a></li> <li><a href="#_warum_oss_und_css_und_nicht_public_und_private">Warum "OSS" und "CSS" und nicht "Public" und "Private</a> <ul class="sectlevel2"> <li><a href="#_der_vollständige_baum_vier_zonen_nicht_drei">Der vollständige Baum — Vier Zonen, nicht drei</a></li> </ul> </li> <li><a href="#_der_sonderfall_cheroliv_com">Der Sonderfall : cheroliv.com</a> <ul class="sectlevel2"> <li><a href="#_bakery_gradle_ist_mir_egal">bakery-gradle ist mir egal</a></li> </ul> </li> <li><a href="#_auswirkung_auf_den_governance_agent">Auswirkung auf den Governance-Agent</a></li> <li><a href="#_was_wir_gewinnen_und_was_wir_verlieren">Was wir gewinnen (und was wir verlieren)</a></li> <li><a href="#_fazit_das_physische_signal_schlägt_das_logische_signal">Fazit: das physische Signal schlägt das logische Signal</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 10 minutes</div> <p><code>foundry/</code>— der funktionale Bereich, der den Code meines Arbeitsbereichs hostet — enthält 18 Projekte. Acht sind Open Source unter Apache 2.0. Nur einer ist closed source — der SaaS Edster. Über Monate hinweg haben diese neun Projekte koexistiert. im gleichen Ordner, getrennt nur durch&#8230;&#8203; nichts. Ihr öffentlicher/privater Status Es war eine Information in meinem Kopf, nicht im Dateisystem.</p> </div> <div class="paragraph"> <p>Dann wollte ich ein RAG anschließen. Und dann ist alles zusammengebrochen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_unfall_der_darauf_wartete_sich_zu_ereignen">Der Unfall, der darauf wartete, sich zu ereignen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Im April 2026 habe ich begonnen, das RAG pgvector für slider-gradle zu implementieren. Das Prinzip : alle Repositorys indexieren von`foundry/<code>, produzieren Embeddings, sie in den Kontext des LLM einzufügen, damit es eine hat Perception"</code> der Akte`foundry/`.</p> </div> <div class="paragraph"> <p>Die Pipeline war einfach:</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>Einfach. Effizient. Und.<strong>gefährlich</strong>.</p> </div> <div class="paragraph"> <p>Weil das`fileTree`macht keinen Unterschied zwischen`plantuml-gradle/` (Apache 2.0, public) und`edster/`(closed source, private). Er isst alles. Und wenn ich eines Tages diese Embeddings veröffentliche — auf einem Dashboard, in einer Antwort LLM, in einem Trainingsdatensatz — Edsters proprietärer Code läuft aus.</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>Das Problem ist nicht, dass ein LLM geschlossenen Quellcode liest. Das Problem, dass dieser Code in einem Vektor-Embedding <strong>öffentlich</strong> endet — irreversibel, nicht löschbar, nicht prüfbar.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_die_wahre_frage">Die wahre Frage</h3> <div class="paragraph"> <p>Es ist nicht "wie verhindert man, dass der LLM Code verliert?". Es ist "wie die Flucht strukturell unmöglich machen?</p> </div> <div class="paragraph"> <p>Die Antwort ist kein Prompt. Die Antwort ist, den Ordner in zwei Teile zu teilen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_oss_und_css">Die Lösung: OSS/ und CSS/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vorher:</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>Danach:</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 `fileTree`wird :</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>Der öffentliche RAG sieht nie`CSS/`. Der Closed-Source-Code speist einen Datensatz ohne Fine-Tuning — ein internes Modell, das mein Zuhause niemals verlässt. Die Trennung ist mechanisch, nicht deklarativ.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_warum_oss_und_css_und_nicht_public_und_private">Warum "OSS" und "CSS" und nicht "Public" und "Private</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Auswahl der Akronyme OSS (Open Source Software) und CSS (Closed Source Software) ist deliberiert :</p> </div> <div class="ulist"> <ul> <li> <p>Public"/"Private" beschreibt die<strong>Sichtbarkeit</strong>(was GitHub sieht)</p> </li> <li> <p>OSS"/"CSS" beschreibt das<strong>Natur</strong>des Codes (was das LLM wissen muss)</p> </li> </ul> </div> <div class="paragraph"> <p>Die GitHub-Sichtbarkeit ist eine Metadaten des entfernten Repos. Die Natur des Codes ist eine Eigenschaft des Inhalts. Der LLM hat keinen Zugriff auf die GitHub-API — aber er hat Zugriff dem Dateisystem.<code>CSS/`Er sagt ihm: "Achtung, dieser Code steht nicht unter einer Lizenz. frei" ohne etwas lesen zu müssen ein`LICENSE`oder zum Parsen eines`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>Der Name des Ordners ist das robusteste Metadatum, das Sie geben können zu ein LLM. Sie kann nicht falsch geparsed, ignoriert oder falsch interpretiert werden. Das LLM sieht`CSS/edster/`im Dateipfad — es weiß.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_der_vollständige_baum_vier_zonen_nicht_drei">Der vollständige Baum — Vier Zonen, nicht drei</h3> <div class="paragraph"> <p>Die OSS/CSS-Granularisierung ergänzt die dreizonige Ontologie. Die Zone `foundry/`geht von 1 zu 2 funktionellen Unterzonen:</p> </div> <div id="diag-four-zone-workspace" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-8a4cc14d105459e558ead4ede5fe549d.svg" alt="L&#8217;organisation de foundry/ en deux sous-zones OSS et CSS" width="1773" height="5736"> </div> </div> <div class="paragraph"> <p>| Zone | DSGVO | Indexierung RAG öffentlich | Datensatz-Feinabstimmung | | Wurzel | Ebene 0 — intim | ✗ | ✗ | | <code>configuration/</code>| Stufe 1 — Eingeschränkt | ✗ | ✗ | | <code>office/</code>| Level 2 — Kollaborativ | ✓ Gefiltert | ✓ Gefiltert | |<code>foundry/private/</code>| Stufe 3 — Bedingt geöffnet | ✗ | ✓ Privat | Veuillez fournir le texte français à traduire.<code>foundry/public/</code>| Stufe 4 — Einheimisches Publikum | ✓ Kostenfrei | ✓ Öffentlich |</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_der_sonderfall_cheroliv_com">Der Sonderfall : cheroliv.com</h2> <div class="sectionbody"> <div class="paragraph"> <p>Während ich dort war, habe ich eine andere Inkonsistenz korrigiert. Meine Seite <code>cheroliv.com`lebte in`foundry/`wie ein Softwareprojekt vollwertig — mit seinem eigenen Gradle-Build, seiner eigenen CI, seiner eigenen Governance</code>.agents/`.</p> </div> <div class="paragraph"> <p>Aber Blog-Beiträge sind kein Code. Sie sind <strong>Daten</strong>. Editorial** von Cercle 2 — ebenso wie die Einrahmungen von`office/pilotage/` oder die Ausbildungen von`office/formations/`.</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>Was sich ändert:</p> </div> <div class="ulist"> <ul> <li> <p>Die Artikel sind in`office/`→ Vertraulichkeit des Kreises 2</p> </li> <li> <p>Die Aufgabe`publishSite`wird eine Fähigkeit von`engine`</p> </li> </ul> </div> <div class="paragraph"> <p>via`bakery-gradle`— das Plugin erhält ein`FileTree`, er weiß es nicht dass die Artikel von`office/`</p> </div> <div class="ulist"> <ul> <li> <p>Eine einzige CI, eine einzige Governance — null Duplikation</p> </li> <li> <p>Der Vision/Opinion-Klassifikator (Regel 2bis) wird automatisch angewendet:</p> </li> </ul> </div> <div class="paragraph"> <p>die Artikel in`office/`werden vor der Veröffentlichung gefiltert</p> </div> <div class="sect2"> <h3 id="_bakery_gradle_ist_mir_egal">bakery-gradle ist mir egal</h3> <div class="paragraph"> <p>Und das ist schön. Das Plugin`bakery-gradle`wurde nicht geändert. Er empfängt ein Verzeichnis mit AsciiDoc-Inhalt, er erzeugt HTML, er pusht Auf GitHub Pages. Dass dieses Verzeichnis heißt`site/jbake/content/` ou `office/sites/cheroliv/`Der Plugin scheißt darauf</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>Der Schnittstellenvertrag ist eine Gradle-Aufgabe. Keine REST-API. Kein Webhook. Eine Aufgabe — typisiert, testbar, lokal und in der CI ausführbar.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_auswirkung_auf_den_governance_agent">Auswirkung auf den Governance-Agent</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die OSS/CSS-Granularisierung ändert die Agenten-Governance an drei Punkten:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RAG public</strong> : der Perimeter der Indexierung geht von`foundry/**`</p> </li> </ol> </div> <div class="paragraph"> <p>à <code>foundry/public/<strong></code>+<code>office/Vision/</strong></code>. Der Closed-Source-Code wird aus dem Index durch die Aufgabenkonfiguration ausgeschlossen, nicht durch den Prompt.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Knowledge Graph</strong> : graphify-gradle produziert zwei Graphen :</p> </li> </ol> </div> <div class="paragraph"> <p>*<code>office/graph.json</code>(public) — Beziehungen zwischen OSS-Artefakten und office/Vision *<code>configuration/graph_private.json</code>(gitignored, privat) — Beziehungen zwischen CSS-Artefakte, nie veröffentlicht</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Datensatz-Feinabstimmung</strong> :`codebase-gradle`hat jetzt zwei Quellen:</p> </li> </ol> </div> <div class="paragraph"> <p>*<code>OSS/</code>→ öffentliche Datensätze (Community-Modelle, Benchmarks) *<code>CSS/</code>→ private Datasets (internes Modell, proprietäres Fine-Tuning)</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_wir_gewinnen_und_was_wir_verlieren">Was wir gewinnen (und was wir verlieren)</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">Vor (flacher Ordner)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nach (OSS/CSS + office/sites)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ls foundry/</code>→ öffentlicher/privater Mix</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`ls foundry/public/`Alles ist veröffentlichbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG indiziert alles ohne Diskriminierung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG indiziert`OSS/`+`office/Vision`ausschließlich</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist unmöglich zu wissen, ob ein Projekt Open Source ist.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Weg`OSS/` ou `CSS/`der genannte</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com hat seine eigene CI, seine eigene Governance</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die CI und die Governance werden im Engine gemeinsam genutzt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Blogartikel befinden sich in einem Repository "code".</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Blogbeiträge sind in`office/sites/`— Daten, kein Code</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Risiko eines Lecks von closed-source-Code in öffentlichen Embeddings</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Strukturell unmöglich —`CSS/`außerhalb des Geltungsbereichs von RAG</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Die einzige Kosten: ein`git mv`global über die 17 OSS-Repositorien + ein Refactoring des <code>build.gradle.kts</code> de <code>engine</code>. Es ist eine Kaltmigration— Keine Daten im Flug, keine betroffenen Benutzer.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_das_physische_signal_schlägt_das_logische_signal">Fazit: das physische Signal schlägt das logische Signal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Was ich diesen Nachmittag gemacht habe, ist, eine unsichtbare Konvention zu ersetzen. durch eine sichtbare Trennung in der Zone`foundry/<code>. Früher mussten Sie wissen dass`edster/`war Closed Source. Jetzt <strong>sehen</strong> Sie es — Der Ordner heißt`CSS/</code>.</p> </div> <div class="paragraph"> <p>Es ist das gleiche Prinzip wie die Unix-Berechtigungen, die Netzwerk-VLANs, oder die Brandschutzwände in einer Datenbank. Die Sicherheit muss nicht Es muss eine Information sein, die Sie behalten müssen. Sie muss eine Eigenschaft sein. <strong>physikalisch</strong>des Systems.</p> </div> <div class="paragraph"> <p>Die Granularisierung OSS/CSS ist die Übersetzung dieses Prinzips im Bereich der LLM-Governance. Das LLM muss nicht wissen, dass Edster ist vertraulich. Er muss unfähig sein, es zu indexieren.</p> </div> <div class="paragraph"> <p>Und das ist genau was`CSS/`garantiert.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0118_matrice_gouvernance_llm_zone_acces_workspace_post.html">Article 0117 — Die LLM-Governance-Matrix</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Artikel 0114 — Die Vertrauenskreise</a></p> </li> <li> <p>Artikel 0116 — Die automatisierte epistemische Kompartimentierung</p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Einen KI-Agent mit AsciiDoc verwalten</a></p> </li> </ul> </div> </div> </div> Die automatisierte epistemische Kompartimentierung — Wie das LLM meinen geistigen Garten schützt 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="#_das_problem_frei_denken_ohne_irgendwas_zu_veröffentlichen">Das Problem: Frei denken ohne irgendwas zu veröffentlichen</a></li> <li><a href="#_das_muster_stimulus_entstehen_fixieren_verdünnen_sterben">Das Muster STIMULUS — Entstehen, Fixieren, Verdünnen, Sterben</a></li> <li><a href="#_die_delegation_an_das_llm_warum_das_llm_das_filtern_durchführt">Die Delegation an das LLM: Warum das LLM das Filtern durchführt</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 10 minutes</div> <p>Mein LLM beschränkt sich nicht darauf, meine Gradle-Aufgaben auszuführen. Er ist der Wächter der Grenze zwischen meinem privaten Denken und meinem öffentlichen Ausdruck. Jede Idee wird klassifiziert — Vision, Meinung, Strategie — bevor sie weitergeleitet wird. So schützt diese automatisierte epistemische Unterteilung meinen mentalen Garten, ohne mich zum Schweigen zu bringen.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">klopfen</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_frei_denken_ohne_irgendwas_zu_veröffentlichen">Das Problem: Frei denken ohne irgendwas zu veröffentlichen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn ein Solo-Entwickler seinen Denkprozess mit einem LLM dokumentiert, stößt er auf ein Paradoxon:</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 (&gt;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>Zwischen diesen beiden Extremen gibt es ein<strong>Filter</strong>. Die Frage lautet: Wer macht das? Ein müder Mensch am Ende der Sitzung? Ein naives Regex-Skript? Oder das LLM selbst, das schon alles gelesen hat?</p> </div> <div class="paragraph"> <p>Meine Antwort : das LLM.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_muster_stimulus_entstehen_fixieren_verdünnen_sterben">Das Muster STIMULUS — Entstehen, Fixieren, Verdünnen, Sterben</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der STIMULUS ist eine Datei`.adoc`temporär im Wurzelverzeichnis des workspace (Kreis 0). Sein Name folgt einer aussagekräftigen Konvention —<code>PICTURE_ME_ROLLIN.adoc</code>, <code>HOLD_MY_BEER.adoc</code>, <code>ONCE_UPON_A_TIME.adoc</code>— die die exploratorische Absicht des Moments einfängt.</p> </div> <div class="paragraph"> <p>Sein Lebenszyklus ist erbarmungslos :</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>Ein Reiz, der mehr als 2 Sitzungen ohne Verdünnung überlebt, ist ein Anti-Muster. Entweder ist die Information zu wichtig, um in einer temporären Datei zu verrotten (→ verdünnen), oder sie ist zu vage, um existieren zu rechtfertigen (→ löschen).</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_delegation_an_das_llm_warum_das_llm_das_filtern_durchführt">Die Delegation an das LLM: Warum das LLM das Filtern durchführt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich hardcode die Vision/Opinion-Klassifizierung nicht in Kotlin. Ich injiziere sie in das<strong>Systemprompt</strong>des LLM via`AGENT_GOVERNANCE.adoc`:</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 (&gt;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 ---- Der LLM liest diese Anweisung**vor**Die Sitzung zu behandeln. Sie befindet sich in ihrem unmittelbaren Kontext, nicht in einer separaten Datei. Es handelt sich um *deterministisches Prompt-Engineering*: Das Verhalten entsteht aus dem eingefügten Text, nicht aus einem externen Klassifizierer. === Warum es funktioniert — und warum das gegenintuitiv ist Die Standardreaktion: „Du überlässt die Klassifizierung der KI? Und was, wenn sie sich irrt?“ Antwort: Der Mensch macht es nicht besser um 2 Uhr morgens. Der Unterschied ist, dass das LLM, es, alles liest. Es hat den vollständigen Kontext der Sitzung und der Ziel-Dokumente. Es weiß, dass`VPS ECO-16 12€ HT`ist eine Infrastrukturentscheidung (VISION), während`« le TTS ElevenLabs sonne plus naturel que Coqui »`ist eine nicht von einem Benchmark verifizierte Meinung Der Mensch liest am Ende der Sitzung diagonal und gibt sein Bestes. Das LLM liest umfassend und wendet ein systematisches Gitter an. Das Ergebnis ist**zuverlässiger**, nicht weniger. Und für die 20 % mehrdeutigen Fälle — die graue Zone, in der sogar das LLM zögert — ist die Antwort nicht « Code hinzufügen ». Die Antwort ist**LangGraph4j**(EPIC 13): Ein Zustandsgraph, der für mehrdeutige Fälle einen Human-in-the-Loop-Knoten aktiviert und an den Menschen zur Entscheidung weiterleitet. Für die 80 % klaren Fälle reicht jedoch das LLM aus. == Der komplette Schlauch: vom Brain Dump zum Blogpost Hier ist der komplette Fluss — von der rohen Idee bis zum veröffentlichten Artikel — mit dem LLM als einzigem Filter: [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 ---- Der Entwickler schreibt nicht den Artikel. Er fordert heraus, liest nach, validiert. Der LLM schreibt. Die Schleife ist: 1. Brain dump frei → keine Zensur 2. Epistemische Klassifizierung durch das LLM → kein Leck 3. Erstellung durch das LLM → keine Prokrastination 4. Menschliche Überprüfung → kein Fehler Der historische Engpass — « Ich habe keine Zeit zu schreiben » — ist beseitigt. Das LLM erledigt den Großteil der Arbeit. Der Mensch tut das, was nur ein Mensch tun kann: urteilen. == Die drei Dokumente Racine — Wie die Information ihren Platz findet Jedes Zieldokument hat eine spezifische Rolle in der Verdünnungskaskade: [cols="1,3,2"] |=== |Dokument |Was er erhält |Typ des Inhalts |`WORKSPACE_AS_PRODUCT.adoc` |Architektonische Entscheidungen, technischer Stack, Roadmap, Geschäftsmodell |VISION + STRATEGIE |`WHAT_THE_GAMES_BEEN_MISSING.adoc` |Muster, Lektionen, Anti-Patterns, Ontologie, formale Regeln |VISION (getestete Muster) |`WORKSPACE_VISION.adoc` |Kontext der Sitzung, Historie der Entscheidungen, Punkte der Infrastruktur |VISION + STRATEGIE (Kontext) |`AGENT_GOVERNANCE.adoc` |Governance-Regeln, Projekt-Portfolio, Verfahren |VISION (Governance) |**Blog cheroliv.com** |Öffentliche Artikel, Wert für den externen Leser |VISION nur |=== Ein und derselbe Stimulus kann die 4 Dokumente + den Blog ernähren — jedes Ziel erhält den Teil, der es betrifft, ohne Redundanz, ohne Widerspruch. Das ist was für passiert ist`PICTURE_ME_ROLLIN.adoc`(3 Mai 2026) : | Information | Klassifizierung | Ziele | | Inventar der 13+ Projekte foundry/ | VISION | WORKSPACE_AS_PRODUCT | | VPS-2 OVH, edster.cloud, 8,49€/Monat | VISION | WORKSPACE_AS_PRODUCT + WORKSPACE_VISION | Der afrikanische Markt ist bereit für Mobile Money | « DeepSeek &gt; Kimi &gt; GLM für langen Kontext » | MEINUNG → VISION | Eingesperrt dann befördert nach Benchmark (Artikel 0112) | | Synthetischer Mitarbeiter als Endprodukt | STRATEGIE | WORKSPACE_AS_PRODUCT (kein Blog) | == Das Pattern Baby-Step + TestContainer + lebendige Dokumentation — der Code, der sich selbst testet Das Muster STIMULUS/Dilution regelt das Denken. Sein Äquivalent für den Code ist das Muster Baby-Step/TestContainer/Doc Vivante, validiert durch plantuml-gradle (380/380 Tests PASS, 137 Sitzungen ohne Docker-Leck): [cols="1,3"] |=== |Prinzip |Regel |**Baby-Schritt** |Nie mehr als 3 Punkte pro US. Wenn eine US Angst macht, durchschneiden. Ein US von 1 Punkt, das voranschreitet, ist besser als ein US von 8 Punkten, das hinterherhinkt. |**TestContainer zuerst** |Vor dem Geschäftslogik-Code, der Container. Der Infrastruktur-Test besteht → stabile Umgebung garantiert. |**anvertrautes Dataset** |Ein minimaler, aber repräsentativer Teilmenge in`src/test/resources/`, ohne PII. Klonbar, startbar. |**lebendige Dokumentation** |Jeder Cucumber-Test = ein Satz in natürlicher Sprache. Der Quellcode IST die ausführbare Spezifikation. Keine Markdown-Dokumentation zu pflegen. |**automatische Bereinigung** |Kein Ressourcenleck. Waisencontainer,`/tmp/gradle-test-*`: alles ist gereinigt. |=== Dieses Muster ist der Grund, warum plantuml-gradle niemals eine Docker-Regression in 138 Sitzungen hatte. Es garantiert, dass der Code, der mit einer externen Infrastruktur (PostgreSQL, Redis, Kafka) kommuniziert, immer in einer Umgebung getestet wird, die der Produktion entspricht — versioniert, reproduzierbar und mit einem Befehl startbar. == Fazit: die Freiheit zu denken ohne Angst zu veröffentlichen Die automatized? Use "automatisierte". Yes. &lt;/think&gt; Die automatisierte epistemische Kompartimentierung ist kein Werkzeug der Zensur. Es ist ein**Befreier**. Es ermöglicht frei zu denken, ohne Filter zu spekulieren, alles aus dem Kopf zu brain-dumpen — ohne je befürchten zu müssen, dass eine embryonale Idee auf dem Blog landet. Der LLM ist der Wächter dieser Grenze. Er liest alles. Er klassifiziert. Er verdünnt das, was überleben verdient. Er beschränkt das, was privat bleiben soll. Er verfasst das, was veröffentlicht werden kann. Und der Entwickler behält das letzte Wort: nachlesen, herausfordern, bestätigen. Beurteilen. Es war die Arbeitsteilung, die dem Solo‑Entwickler fehlte: ein synthetischer Mitarbeiter, der den geistigen Papierkram erledigt, damit sich der Mensch darauf konzentrieren kann, was er am besten tut – entwerfen, architekturieren, entscheiden. == Referenzen * Artikel über die Agenten-Governance Eager/Lazy:link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Einen KI-Agenten mit AsciiDoc steuern] * Artikel über die räumliche Ontologie und die Vertrauenskreise:link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Die räumliche Ontologie als Mechanismus der Ausrichtung] * Artikel über den Anonymizer MVP0:link:../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html[Unser erster Mitarbeiter : Datensatz-Anonymisierer] * Artikel über den Vergleich von LLMs mit langem Kontext :link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1] * Artikel über den Backup-Agent-Mechanismus:link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Gleitendes Fenster und kalte Welle] ----</code></pre> </div> </div> </div> </div> Unser Erster Mitarbeiter: Der Datensatz-Anonymisierer — MVP0 in der Probezeit 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="#_das_problem_das_alle_weglaufen_lässt_wait_i_typed_incorrectly_lets_re_evaluate_das_problem_das_alle_weglaufen_lässt_yes">Das Problem, das alle weglaufen lässt? Wait I typed incorrectly. Let&#8217;s re-evaluate: "Das Problem, das alle weglaufen lässt". Yes.</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesedauer: 12 minutes</div> <p>Ich stelle kein LLM ein. Ich stelle einen Anonymisierer ein. Bevor ich pgvector RAG mache, bevor ich CDA/FPA-Experten fine-tune, bevor ich Kund*innen-Workspaces bereitstelle — jemand muss die Toiletten der Daten putzen. Dieser Mitarbeiter ist der Anonymisierungsexperte (MVP0, EPIC 2 der codebase-gradle). Und es ist er, der das Produkt marktfähig macht.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Inhaltsverzeichnis</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_das_alle_weglaufen_lässt_wait_i_typed_incorrectly_lets_re_evaluate_das_problem_das_alle_weglaufen_lässt_yes">Das Problem, das alle weglaufen lässt? Wait I typed incorrectly. Let&#8217;s re-evaluate: "Das Problem, das alle weglaufen lässt". Yes.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Output exactly that.</p> </div> <div class="paragraph"> <p>&lt;/think&gt;</p> </div> <div class="paragraph"> <p>Das Problem, das alle weglaufen lässt</p> </div> <div class="paragraph"> <p>Jede KI-Startup, die Trainingsdaten verarbeitet, stößt auf die gleiche Wand:</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 ---- Ergebnis: Entweder du machst RAG mit schmutzigen Daten (PII‑Halluzinationen, Nicht‑Konformität zum DSGVO, rechtliches Risiko), oder du machst nichts (kein Produkt). Der dritte Weg — manuelles Aufräumen — ist nicht skalierbar. Meine Antwort: das Problem nicht umgehen. L'**automatisieren**. == MVP0: Der Anonymisierer, Erster Angestellter in der Probezeit MVP0 ist kein Feature. Es ist ein**Experte für Komfort**— ein Mitarbeiter, der die schmutzige, dumme und böse Arbeit erledigt, und über den niemand in den Pitch-Decks sprechen möchte. Was er macht : [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 ---- Er erkennt zuerst die offensichtlichsten Muster (E-Mails`.*@.*`, Tokens`sk-*`, `ghp_*`, IPs), dann lernt er. Die Probezeit ist das: Wir überprüfen, dass er keine falsch-negative Ergebnisse durchlässt, bevor wir ihn übernehmen. == Was dieses MVP freischaltet (und es ist nicht nur Compliance) Die Anonymisierung als MVP0 ist nicht die DSGVO-Maut vor der Autobahn. Sie ist die Autobahn selbst. Das öffnet sie: === Gegenwart: Erweiterte Realität im 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 ---- Der RAG sucht nicht in schmutzigen Daten — er sucht in einem Raum**korrekt durch Konstruktion**. Das ändert alles für die Qualität der Antworten: das LLM verbringt seine Zeit nicht damit, PII zu umgehen, die es erkennt, aber nicht erwähnen darf. === Zukunft: Feinabstimmung auf gesunden Daten [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) ---- Das Feintuning auf Rohdaten ist eine potenzielle Rechtskatastrophe. Auf sauberen Daten ist es ein**reproduzierbare Methode**. Jeder Kunde sammelt seine bereinigten Datasets, jeder Kunde kann seine Fachexperten auf seinen Daten feinabstimmen — ohne jemals personenbezogene Daten preiszugeben. == Warum ist es marktfähig Es ist nicht « ein Tool zur GDPR-Konformität ». Es ist eine**wiederholbare Methode, die ein universelles Problem in ein Asset verwandelt**: 1. *Jede Ausbildungsfirma hat schmutzige Daten* — das ist das Problem 2. *Keine hat eine automatisierte Multi-Quellen-Cleaning-Pipeline* — das ist der Markt 3. *Der Kreislauf : Anonymisierung → RAG → Feintuning ist proprietär* — das ist die Barriere Der SaaS Edster (MVP3) wird nicht « einen Gradle-Workspace » verkaufen. Er wird diese geschlossene Schleife verkaufen. Und das MVP0 ist die Eintrittstür. == Das SQL-Format als dritter Weg des Kontextes Der Import strukturierter Daten ist nicht nur ein Austauschformat. Das SQL-Schema (DDL) trägt das**Entitäts-Beziehungsmodell des Bereichs**: [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é ); ---- Dieses DDL, einmal anonymisiert (Zeile 4), wird zu einer Quelle des Kontextes für das LLM. Kein Text — du**Geschäftsmodell**. RAG liefert den Inhalt (vektorielle Ähnlichkeit), Graphify liefert die Beziehungen (exakte Struktur) und das SQL-Schema liefert das**Domain-Driven Design implizit**: bounded contexts, Aggregate, value objects. Das LLM versteht die Fachdomäne, weil es sein Schema liest. == Die Roadmap: von MVP0 bis 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 ---- Jedes MVP hängt vom vorherigen ab. Keines kann ohne das MVP0 geliefert werden. Aus diesem Grund ist der Anonymisierer nicht « P0 » im Backlog — er ist**MVP0**. Das ist das erste kommerzielle Lieferprodukt, und alles andere hängt von seinem Erfolg ab. == Fazit: Die unsichtbare Arbeit, die alles möglich macht In einem klassischen Startup wird die Datenbereinigung ausgelagert, manuell durchgeführt oder ignoriert. In dieser Architektur ist es das**Herz des Produkts**. Der Anonymiseur ist der erste Mitarbeiter, weil ohne ihn nichts funktioniert: * Ohne MVP0 → kein rechtliches RAG (MVP1) * Ohne MVP0 → kein Fine-Tuning ohne Datenleck (EPIC 5) * Ohne MVP0 → kein glaubwürdiges SaaS (MVP3) * Ohne MVP0 → keine erweiterte Realität im Prompt * Ohne MVP0 → kein dritter Kontextweg (SQL DDD) Er macht die schmutzige Arbeit. Er wird niemals in den Pitches erwähnt. Aber er ist es, der die Fabrik am Laufen hält. Und deshalb stellen wir ihn zuerst ein. == Referenzen * Artikel über räumliche Ontologie und Vertrauenskreise:link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Die räumliche Ontologie als Mechanismus der Ausrichtung] * Artikel zur Eager/Lazy-Agenten-Governance :link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Einen KI-Agenten mit AsciiDoc steuern] * Artikel zum Hot/Warm/Cold-Mechanismus:link:../2026/0110_mecanisme_backup_contexte_agent_post.html[gleitendes Fenster und kalte Welle] * Artikel über den Vergleich der drei 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> Unser erster Angestellter : Der Datensatz-Anonymisierer — MVP0 in der Probezeit https://cheroliv.com/blog/pilot-batch/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html Fri, 1 May 2026 00:00:00 +0000 blog/pilot-batch/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="#_das_problem_das_alle_verjagt">Das Problem, das alle verjagt</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 12 minutes</div> <p>Ich stelle keinen LLM ein. Ich stelle einen Anonymisierer ein. Bevor ich RAG pgvector mache, bevor ich CDA/FPA-Experten fine-tune, bevor ich Kund*innen-Workspaces bereitstelle — jemand muss die Toiletten der Daten reinigen. Dieser Mitarbeiter ist der Anonymisierungsexperte (MVP0, EPIC 2 von codebase-gradle). Und er ist es, der das Produkt marktfähig macht.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">klopf</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_das_alle_verjagt">Das Problem, das alle verjagt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jede KI-Startup, die Trainingsdaten verarbeitet, stößt auf dieselbe Wand :</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 ---- Ergebnis: Entweder du machst RAG mit schmutzigen Daten (PII-Halluzinationen, Nicht-Einhaltung der DSGVO, rechtliches Risiko), oder du machst gar nichts (kein Produkt). Der dritte Weg — manuelles Aufräumen — ist nicht skalierbar. Meine Antwort : das Problem nicht umgehen. L'**automatisieren**. == MVP0 : Der Anonymisierer, Erster eingestellter während der Probezeit Das MVP0 ist keine Feature. Es ist ein**Experte für Komfort**— ein Mitarbeiter, der die dreckige, dumme und böse Arbeit erledigt, über die niemand in den Pitch-Decks sprechen möchte. Was er macht : [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 ---- Er erkennt die offensichtlichsten Muster zuerst (E-Mails`.*@.*`, Tokens`sk-*`, `ghp_*`, IPs), dann lernt es. Die Probezeit, das ist es: wir prüfen, dass es keine falsch-negativen Ergebnisse durchlässt, bevor wir es übernehmen. == Was dieser MVP freischaltet (und es ist nicht nur Compliance) Die Anonymisierung als MVP0 ist nicht die DSGVO-Maut vor der Autobahn. Sie ist die Autobahn selbst. Das ist, was sie öffnet: === Gegenwart: Erweiterte Realität im 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 ---- RAG sucht nicht in schmutzigen Daten — es sucht in einem Raum**korrekt durch Konstruktion**. Das ändert alles für die Qualität der Antworten: Das LLM verbringt nicht seine Zeit damit, PII zu umgehen, die es erkennt, aber die es nicht erwähnen darf. === Zukunft: Fine-Tuning auf gesunden Daten [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) ---- Das Fine-Tuning mit Rohdaten ist eine potenzielle Rechtskatastrophe. Auf sauberem Datenmaterial ist es ein**Wiederholbare Methode**. Jeder Kunde sammelt seine bereinigten Datasets, jeder Kunde kann seine Fach-Experten auf seinen Daten fein abstimmen — ohne jemals personenbezogene Daten preiszugeben. == Warum ist das marktfähig? Es ist kein „DSGVO-Compliance-Tool“. Es ist eine**wiederholbare Methode, die ein universelles Problem in einen Vermögenswert umwandelt**: 1. *Jedes Ausbildungsunternehmen hat schmutzige Daten* — das ist das Problem 2. *Keine hat eine automatisierte mehrquellige Reinigungs-Pipeline* — das ist der Markt 3. *Der Durchlauf: Anonymisierung → RAG → Feintuning ist proprietär* — Das ist die Barriere Der SaaS Edster (MVP3) wird keinen „Gradle-Workspace“ verkaufen. Er wird diese geschlossene Schleife verkaufen. Und das MVP0 ist der Einstieg. == Das SQL-Format als dritter Weg des Kontextes Der Import strukturierter Daten ist nicht nur ein Austauschformat. Das SQL-Schema (DDL) trägt das**Entitäts-Beziehungsmodell des Bereichs** : [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é ); ---- Dieses DDL, einmal anonymisiert (Zeile 4), wird zu einer Kontextquelle für das LLM. Kein Text — du**Geschäftsmodell**. RAG liefert den Inhalt (vektorbasierte Ähnlichkeit), Graphify liefert die Beziehungen (exakte Struktur), und das SQL-Schema liefert das**implizites Domain-Driven Design**: bounded contexts, Aggregates, Wertobjekte. Das LLM versteht das Geschäftsfeld, weil es sein Schema liest. == Die Roadmap: von MVP0 bis 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 ---- Jeder MVP hängt vom vorherigen ab. Keiner kann ohne den MVP0 ausgeliefert werden. Aus diesem Grund ist der Anonymisierer im Backlog nicht « P0 » — er ist**MVP0**. Das ist das erste kommerzielle Lieferobjekt, und alles andere hängt von seinem Erfolg ab. == Fazit: die unsichtbare Arbeit, die alles ermöglicht In einem herkömmlichen Startup ist die Datenbereinigung ausgelagert, manuell oder ignoriert. In dieser Architektur ist es das**Kern des Produkts**. Der Anonymiseur ist der erste Mitarbeiter, denn ohne ihn funktioniert nichts: * Ohne MVP0 → kein rechtmäßiges RAG (MVP1) * Ohne MVP0 → kein Fine-Tuning ohne Datenleck (EPIC 5) * Ohne MVP0 → kein glaubwürdiges SaaS (MVP3) * Ohne MVP0 → keine erweiterte Realität im Prompt * Ohne MVP0 → kein dritter Kontextweg (SQL DDD) Er macht die schmutzige Arbeit. Er wird nie in den Pitches genannt. Aber er ist es, der die Fabrik am Laufen hält. Deshalb wird er/sie als erstes eingestellt. == Referenzen * Artikel über die räumliche Ontologie und Vertrauenskreise :link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Die räumliche Ontologie als Ausrichtungsmechanismus] * Artikel zur Governance des Agents Eager/Lazy:link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Verwalten eines KI-Agenten mit AsciiDoc] * Artikel über den Mechanismus Hot/Warm/Cold:link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window und Kaltwelle] * Artikel über den Vergleich der drei 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> Der geheime Garten des Entwicklers: Wie die räumliche Ontologie LLMs ohne Prompt Engineering ausrichtet 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="#_die_feststellung_das_prompt_engineering_ist_ein_sandschloss">Die Feststellung: das Prompt Engineering ist ein Sandschloss</a></li> <li><a href="#_die_vier_kreise_des_vertrauens_eine_räumliche_ontologie">Die Vier Kreise des Vertrauens: Eine räumliche Ontologie</a> <ul class="sectlevel2"> <li><a href="#_der_geheime_garten_der_bereich_außerhalb_des_cvs">Der geheime Garten: Der Bereich außerhalb des CVS</a> <ul class="sectlevel3"> <li><a href="#_der_gitignore_als_governance_konfiguration">Der <code>.gitignore</code> als Governance-Konfiguration</a></li> <li><a href="#_der_snapshot_mechanismus">Der Snapshot-Mechanismus</a></li> </ul> </li> <li><a href="#_der_tresor_configuration_wie_spring_cloud_config">Der Tresor: <code>configuration/</code> wie Spring Cloud Config</a></li> <li><a href="#_die_bibliothek_office_als_verbrauchbare_daten">Die Bibliothek : <code>office/</code> als verbrauchbare Daten</a></li> <li><a href="#_die_schmieden_foundry_als_implementierung">Die Schmieden : <code>foundry/</code> als Implementierung</a></li> </ul> </li> <li><a href="#_procontra_räumliche_ausrichtung_vs_prompt_ausrichtung">Pro/Contra : Räumliche Ausrichtung vs Prompt-Ausrichtung</a> <ul class="sectlevel2"> <li><a href="#_klassischer_ansatz_ausrichtung_durch_vor_prompt">Klassischer Ansatz : Ausrichtung durch Vor-Prompt</a></li> <li><a href="#_dieser_ansatz_ausrichtung_mittels_räumlicher_ontologie">Dieser Ansatz: Ausrichtung mittels räumlicher Ontologie</a></li> </ul> </li> <li><a href="#_die_relationale_algebra_des_workspace_und_das_beobachtbare_delta">Die relationale Algebra des Workspace und das beobachtbare Delta</a></li> <li><a href="#_der_kontextbasierte_composite_vektor_rag_pgvector_graphify">Der kontextbasierte Composite-Vektor: RAG + pgvector + Graphify</a> <ul class="sectlevel2"> <li><a href="#_komponente_1_rag_langchain4j_postgresql_pgvector">Komponente 1 — RAG LangChain4j + PostgreSQL pgvector</a></li> <li><a href="#_komponente_2_knowledge_graph_graphify">Komponente 2 — Knowledge Graph Graphify</a></li> <li><a href="#_komponente_3_graphify_inkrementell_spärlich_aggregierbar_konsumierbar">Komponente 3 — Graphify Inkrementell: spärlich, aggregierbar, konsumierbar</a></li> </ul> </li> <li><a href="#_automatische_dsgvo_klassifizierung_das_llm_als_router">Automatische DSGVO-Klassifizierung: das LLM als Router</a></li> <li><a href="#_roadmap_von_asciidoc_nach_langgraph4j">Roadmap: von AsciiDoc nach LangGraph4j</a></li> <li><a href="#_was_diese_architektur_löst_und_was_sie_nicht_löst">Was diese Architektur löst (und was sie nicht löst)</a></li> <li><a href="#_fazit_architektur_als_diskurs">Fazit: Architektur als Diskurs</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 20 minutes</div> <p>Prompt-Engineering ist zerbrechlich. Bei 80.000 Tokens sind deine Ausrichtungsregeln im Rauschen untergegangen, und das LLM vergisst, was du ihm zu Beginn der Konversation gefragt hast. Meine Lösung? Nicht durch Text ausrichten, sondern durch das<strong>Raum</strong>. Ich habe meinen Entwicklungs-Workspace in vier konzentrische Vertrauenskreise strukturiert — von dem íntimen privaten Garten bis zu den öffentlichen Schmieden — und jeder Kreis ist ein physischer Bereich des Dateisystems. Das LLM muss nicht daran erinnert werden, welche Regeln gelten: Der Dateipfad enthält sie. So funktioniert es, und warum diese Ausrichtungsarchitektur anhand des Raums widerstandsfähiger ist als ein`system prompt`von 500 Zeilen.</p> </div> <div class="paragraph"> <p>Das ist ein langer Artikel.<br> Machen Sie es sich bequem.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_die_feststellung_das_prompt_engineering_ist_ein_sandschloss">Die Feststellung: das Prompt Engineering ist ein Sandschloss</h2> <div class="sectionbody"> <div class="paragraph"> <p>In drei Wochen habe ich Gradle-Plugins mit Opencode entwickelt, wobei ich drei verschiedene LLMs verwendet habe — Kimi K2.6, GLM-5.1 und DeepSeek-V4-Pro (der einzige Überlebende, aber das ist eine andere Geschichte<a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">Bereits hier behandelt.</a>) Meine Methode der Agent-GovernanzAgent<a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Ich habe sie in einem früheren Artikel detailliert dokumentiert.</a> basiert auf AsciiDoc-Dateien —<code>AGENT.adoc</code>, <code>INDEX.adoc</code>, <code>PROMPT_REPRISE.adoc</code>— die bei jedem Sitzungsbeginn ~30 000 Token an Regeln, Backlog und Verlauf laden.</p> </div> <div class="paragraph"> <p>Und trotz dieser dokumentarischen Infrastruktur haben mich zwei Dinge beeindruckt:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Der LLM vergisst.</strong> Selbst mit den absoluten Regeln im Kopf jeder EAGER-Datei, darüber hinaus 60.000 kumulierte Tokens (initialer Kontext + Gespräch), hat Kimi K2.6 begonnen, vorzuschlagen`Write`Überwältigend auf Konfigurationsdateien. GLM-5.1 hat ein Firebase-Token mit einem zu ersetzenden Platzhalter verwechselt. Die Regeln waren geschrieben — das LLM sah sie <strong>nicht</strong> mehr.</p> </li> <li> <p>Die Governance selbst wird zu einem Problem. Nach der Implementierung des Hot/Warm/Cold-Mechanismus <a href="0110_mecanisme_backup_contexte_agent_post.html">Artikel zur Backup-Rotation.</a> zur Vermeidung einer Kontextexplosion wogen meine EAGER-Dateien noch immer 1414 Zeilen<a href="0111_audit_contexte_agent_post.html">Ich habe dieses Audit hier dokumentiert.</a>. Die Governance — entwickelt, um das LLM vor einer Überlastung zu schützen — überlastete das LLM.</p> </li> </ol> </div> <div class="paragraph"> <p>Ich brauchte ein Ausrichtungsmechanismus, der nicht von der Anzahl der Tokens im Prompt abhängt.</p> </div> <div class="paragraph"> <p>Die Antwort: Aufhören, nach dem Text auszurichten, und anfangen, nach dem<strong>Platz</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_vier_kreise_des_vertrauens_eine_räumliche_ontologie">Die Vier Kreise des Vertrauens: Eine räumliche Ontologie</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mein Ordner`workspace/<code>(in</code>~/workspace/`) ist <strong>nicht</strong> ein Git-Repository. Das ist die Wurzel meiner gesamten Arbeit — Code, Dokumentation, Schulung, Infrastruktur. Und es ist in vier Bereiche strukturiert, die keine Aufbewahrungskonventionen sind, sondern<strong>konzentrische Vertrauenskreise</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">Etikett</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">physische Zone</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">Sichtbarkeit</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>Geheimer Garten</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`workspace/`Wurzel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">kein</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Intim — frei denkend, kein Commit, keine Veröffentlichung</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>Tresor</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 privat (solo)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Geheimnisse, Tokens, Visionsarchiv. Nur eine Person.</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>Bibliothek</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">Privates Git (erweitert)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pädagogische Daten, SPG/SPD, JSON-Schemata. Identifizierter Vertrauenskreis.</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>Schmieden (öffentlichen)</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 öffentlich (Apache 2.0)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Quellcode, Plugins, Tests, technische Dokumentation</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>HINWEIS: Es gibt keine Stufe 3 in der Tabelle. Die Stufe 3 ist eine <strong>Übergangsstufe</strong>: Es ist Inhalt von`office/`der anonymisiert wurde und bereit ist, als Open Data veröffentlicht zu werden. Er hat keinen eigenen physischen Bereich — er ist ein Zustand der Daten, kein Ort.</p> </div> <div class="paragraph"> <p>Jede Ebene beantwortet eine präzise Frage:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Wo kann man eine Idee ablegen, die noch nicht bereit ist, geteilt zu werden, selbst mit einem kleinen Kreis?</strong> → Der geheime Garten. Kein Git. Kein Druck.</p> </li> <li> <p><strong>Wo sollte man ein API-Token speichern, ohne dass es ausläuft?</strong> → Der Tresor`configuration/`). Physisch isoliert. Kein anderes Repository kann es versehentlich referenzieren.</p> </li> <li> <p><strong>Wo kann man einen Schulungskatalog mit einem Pilot-OF mitentwickeln?</strong> → Die Bibliothek`office/`). Versioniert, kollaborativ, aber privat.</p> </li> <li> <p><strong>Wo kann man ein Open-Source-Gradle-Plugin industrialisieren?</strong> → Die Schmieden`foundry/`). Öffentlich, forkbar, in CI getestet.</p> </li> </ul> </div> <div class="paragraph"> <p>Diese Ontologie ist<strong>von einem LLM nutzbar</strong>. Wenn er eine Datei in`foundry/plantuml-gradle/src/`, er weiß implizit: "Ich befinde mich im Kreis 4 – öffentlicher Code, verpflichtende Tests, keine Geheimnisse, keine pädagogischen Daten". Er braucht keinen Prompt, der ihn daran erinnert.</p> </div> <div class="sect2"> <h3 id="_der_geheime_garten_der_bereich_außerhalb_des_cvs">Der geheime Garten: Der Bereich außerhalb des CVS</h3> <div class="paragraph"> <p>Das ist das wichtigste Konzept — und das am wenigsten intuitive.</p> </div> <div class="paragraph"> <p>Die Wurzel`workspace/<code>hat nicht</code>.git/<code>. Die Dokumente, die dort leben (`WORKSPACE_VISION.adoc</code>, <code>WORKSPACE_AS_PRODUCT.adoc</code>, <code>WORKSPACE_ORGANIZATION.adoc</code>— und der, den Sie gerade lesen, der daraus hervorgeht) sind nicht dazu bestimmt, versioniert, geteilt oder sogar von jemand anderem als mir gelesen zu werden. Das sind<strong>Gedanken im Keimen</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>Der geheime Garten ist von Natur aus <strong>out-of-CVS</strong>. Das Fehlen von Versionskontrolle ist die Voraussetzung für die Freiheit des Denkens. Man schreibt dort nicht, um gelesen zu werden — man schreibt dort, um seine eigene Sicht zu klären.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Aber diese Freiheit hat einen Preis: ein`rm`unabsichtlich, und das sind Monate strategischer Überlegungen, die verschwinden. Die Lösung besteht nicht darin, den Garten zu versionieren (was ihn zerstören würde) — sie besteht darin, ihn<strong>spiegeln</strong>Im engsten Kreis.</p> </div> <div class="sect3"> <h4 id="_der_gitignore_als_governance_konfiguration">Der <code>.gitignore</code> als Governance-Konfiguration</h4> <div class="paragraph"> <p>An der Wurzel von`workspace/<code>, eine Datei</code>.gitignore`minimal erklärt das<strong>Historisierungspolitik</strong>die Dateien des geheimen Gartens :</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`hat keine klassische Git-Funktion (es gibt kein</code>.git/`an der Wurzel). Er wirkt wie ein<strong>Governance-Konfigurationsdatei</strong>die auf eine präzise Frage antwortet: <strong>welche Artefakte des geheimen Gartens verdienen es, historisiert zu werden, und welche sind rein vergänglich?</strong></p> </div> <div class="ulist"> <ul> <li> <p>Die aufgelisteten Dateien in`.gitignore`—<code>.goosehints</code>, <code>.goose</code>— sind flüchtige Artefakte, die von den Agenten generiert werden. Kein strategischer Wert. Keine Historisierung.</p> </li> <li> <p>Die Dateien`.adoc`der Wurzel —<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>— nicht sind<strong>nicht</strong>im`.gitignore`. Das sind die Artefakte, die historisiert werden müssen.</p> </li> </ul> </div> <div class="paragraph"> <p>Le `.gitignore`ist der<strong>Governance-Schema</strong>: Alles, was dort nicht aufgelistet ist, ist ein Kandidat für den Snapshot. Und das LLM weiß beim Lesen dieser Datei genau, was archiviert werden muss und was ignoriert werden kann – ohne dass man es ihm in einem Prompt erinnern müsste.</p> </div> </div> <div class="sect3"> <h4 id="_der_snapshot_mechanismus">Der Snapshot-Mechanismus</h4> <div class="paragraph"> <p>Ich habe erstellt`configuration/vision-archive/<code>: datierte Snapshots aller</code>.adoc`des Stamms, Commits im privaten Repository`configuration/`. Jede Brainstorming-Sitzung erzeugt einen 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 &amp;&amp; git add vision-archive/ &amp;&amp; \ git commit -m "vision-archive: snapshot $DATE"</code></pre> </div> </div> <div class="paragraph"> <p>Der Vorgang wird am Ende der Sitzung vom LLM selbst ausgelöst, der diese globale Routingaufgabe ausführt. Jeder Snapshot erfasst den vollständigen Zustand des strategischen Denkens zu einem Zeitpunkt T.</p> </div> <div class="paragraph"> <p>Der Git-Verlauf von`configuration/`wird die<strong>Biografie meiner strategischen Denkweise</strong>. Ich kann ein`git log&#8201;&#8212;&#8201;vision-archive/`und die Entwicklung meiner Sicht verfolgen, Sitzung für Sitzung, Datum für Datum.</p> </div> <div class="paragraph"> <p>Reelles Beispiel des Verlaufs nach einem Arbeitstag :</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>Fünf Snapshots an einem Tag. Jeder ist ein Wiederherstellungspunkt. Jeder ist ein Meilenstein in der Entstehung der Strategie.</p> </div> <div class="paragraph"> <p>Der Ordner`configuration/vision-archive/latest/`enthält ständig eine<strong>Arbeitskopie</strong>des letzten Snapshots, das als schnelle Referenz dient, ohne im Git-Verlauf navigieren zu müssen</p> </div> <div class="paragraph"> <p>Und für das LLM ist es ein<strong>Kohärenzorakel</strong>: wenn er einen Widerspruch zwischen der aktuellen Implementierung und der archivierten Vision zu einem früheren Zeitpunkt feststellt, kann er ihn melden.</p> </div> </div> </div> <div class="sect2"> <h3 id="_der_tresor_configuration_wie_spring_cloud_config">Der Tresor: <code>configuration/</code> wie Spring Cloud Config</h3> <div class="paragraph"> <p>`configuration/`enthält nicht nur das Archiv der Vision. Seine Hauptfunktion — und zukünftig — ist, ein<strong>Spring Cloud Config Server</strong>. Alle Geheimnisse, Tokens, Zugangsdaten und Infrastruktur-Beschreibungen befinden sich hier, in einem privaten Git-Repository, das nur dem Eigentümer zugänglich ist.</p> </div> <div class="paragraph"> <p>Warum ein separates Repository anstatt einer Datei`.env`in jedem Projekt?</p> </div> <div class="ulist"> <ul> <li> <p><strong>unabsichtliches Push eines Geheimnisses</strong> : impossible. Die Geheimnisse befinden sich in einem privaten Repository, das öffentliche Projekte nicht versehentlich referenzieren können.</p> </li> <li> <p><strong>Audit</strong> : Der Git-Verlauf gibt die Spur jeder Konfigurationsänderung an. Wer was geändert hat, wann, mit welchem SHA-Hash.</p> </li> <li> <p><strong>Rollback</strong> :`git revert`Auf einer defekten Konfiguration. Snapshot, ohne manuelles Backup.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_die_bibliothek_office_als_verbrauchbare_daten">Die Bibliothek : <code>office/</code> als verbrauchbare Daten</h3> <div class="paragraph"> <p>`office/`ist das dokumentarische Gegenstück zur Entwicklungsarbeit. Es enthält die Blogartikel, die technischen Spezifikationen, die Schulungsunterlagen (38 Kursverzeichnisse FPA, SPG/SPD, JSON-Schemata, Bloom/Harrow/Krathwohl-Taxonomien) — alles, was das<strong>pädagogisches Material</strong>.</p> </div> <div class="paragraph"> <p>Aber`office/`ist nicht nur ein Dokumentenschubfach. Es ist eine<strong>strukturierte Datenquelle</strong>dass die Gradle-Plugins von`foundry/`verbrauchen. Ein Blogartikel in`office/`est ein Eintrag, den ein Plugin in HTML umwandelt. Ein SPG AsciiDoc in`office/metiers/FPA/`ist ein Artefakt, das ein Orchestrator parsen wird, um Slides, Quiz und Video-Capsules zu generieren.</p> </div> <div class="paragraph"> <p>Et le `build.gradle.kts`an der Wurzel von`office/`ist kein Fachcode — es ist ein<strong>Skript zur Nutzung des Plugin-Ökosystems</strong>. Er sagt: "Hier sind die Gradle-Plugins, die ich verwende, hier ist der Kontext meines Workspaces</p> </div> </div> <div class="sect2"> <h3 id="_die_schmieden_foundry_als_implementierung">Die Schmieden : <code>foundry/</code> als Implementierung</h3> <div class="paragraph"> <p><code>foundry/`enthält das<strong>industrialisierter Code</strong>. 54 Git-Repositorys, davon 7 derzeit von</code>.agents/`. Hier wird die Vision umsetzbar — Gradle-Plugins, CI/CD, JUnit5-Tests + Cucumber.</p> </div> <div class="paragraph"> <p>Die Beziehung zu`office/`ist bidirektional :</p> </div> <div class="ulist"> <ul> <li> <p><code>office/</code>→<code>foundry/</code>: die pädagogischen Daten sind das Rohmaterial, das die Plugins konsumieren.</p> </li> <li> <p><code>foundry/</code> → <code>office/</code>: die Plugins produzieren Daten, die bereichern`office/` — le `graph.json`von graphify-gradle, die kompilierten Slider-Decks, die Build-Berichte</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_procontra_räumliche_ausrichtung_vs_prompt_ausrichtung">Pro/Contra : Räumliche Ausrichtung vs Prompt-Ausrichtung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vergleichen wir die beiden Ansätze.</p> </div> <div class="sect2"> <h3 id="_klassischer_ansatz_ausrichtung_durch_vor_prompt">Klassischer Ansatz : Ausrichtung durch Vor-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">�❌ Gegen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Einfach umzusetzen. Ein Textblock im System-Prompt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Anfällig für langen Kontext</strong> : Die Regel geht nach 80K Tokens unter.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Funktioniert für allgemeine Regeln (Ton, Format).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Nicht überprüfbar</strong> : nichts hindert das LLM daran, die Regel zu verletzen.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist nicht nötig, die Architektur des Projekts zu überdenken.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Nicht übertragbar</strong> : jedes Repo legt die Regeln neu fest.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rein deklarativ: Das LLM weiß, dass es <strong>sollte</strong>, aber nichts hindert es.</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_dieser_ansatz_ausrichtung_mittels_räumlicher_ontologie">Dieser Ansatz: Ausrichtung mittels räumlicher Ontologie</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">�❌ Gegen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Resilient gegenüber langem Kontext</strong>: Die Regel ist im Dateipfad, nicht in einem entfernten Prompt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Anfangskosten für die Infrastruktur</strong> : Das Strukturieren des Workspace in Kreisen braucht Zeit.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>mechanisch überprüfbar</strong> : ein Geheimnis in`foundry/<code>ist nachweisbar durch`git check-ignore</code>.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Erfordert Disziplin</strong> : ein neuer Beitragender muss die Kreise verstehen.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Übertragbar</strong> : ein`AGENT.adoc`Der Standard setzt die Kreise jedem neuen Projekt aus.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Deckt nur die räumlichen Constraints</strong> — Der Code-Stil bleibt im Prompt.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Sicherheit durch Entwurf</strong> : ein`git push`seit`foundry/<code>kann nicht ausstellen`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>Verbrauchbar durch nicht-LLM-Agenten</strong> : Ein Gradle-Orchestrator kann je nach Kreis routen.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>Der Hauptvorteil ist nicht defensiv (Sicherheit, Sichtbarkeit) — er ist<strong>kreativ</strong>. Wenn das LLM in einem Raum arbeitet, der durch eine Ontologie strukturiert ist, kann es etwas tun, was ihm kein Prompt erlaubt: <strong>den Delta beobachten</strong>.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_relationale_algebra_des_workspace_und_das_beobachtbare_delta">Die relationale Algebra des Workspace und das beobachtbare Delta</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn das LLM durchläuft`foundry/<code>, er verfügt über ein<strong>Gitter strukturierter Daten</strong>: Knoten (Plugins, Dateien, Tests, Abhängigkeiten), typisierte Kanten (`import</code>, <code>depends_on</code>, <code>generates</code>, <code>tests</code>), Beziehungen der Komposition und der Ordnung (`training-gradle`extrahiert das Repository`slider-gradle`generiert die Folien`capsule-gradle`spiele das Video)</p> </div> <div class="paragraph"> <p>Diese Algebra wird nirgendwo in Klartext geschrieben — aber sie ist <strong>beobachtbar</strong>. Jedes`build.gradle.kts`zeigt Abhängigkeiten. Jede`INDEX.adoc`legt Kreuzverweise dar</p> </div> <div class="paragraph"> <p>Der LLM beobachtet diese Algebra und erkennt das<strong>Delta</strong>: die Lücke zwischen dem, was das System bereits produzieren kann, und dem, was die Vision beschreibt</p> </div> <div class="paragraph"> <p>Ab diesem Delta kann er definieren<strong>Kartierungen durch Fachspezialisten</strong>— CDA (Anwendungsentwickler/-designer, Kotlin/Gradle/JHipster) und FPA (Beruflicher Erwachsenenbildner, Pädagogik/Qualiopi/Bloom) — und identifizieren, was jedem Experten fehlt.</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>Das LLM muss nicht gesagt bekommen, was es tun soll. Das Delta entsteht aus der Struktur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_kontextbasierte_composite_vektor_rag_pgvector_graphify">Der kontextbasierte Composite-Vektor: RAG + pgvector + Graphify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die relationale Algebra ist keine theoretische Konstruktion. Sie ist <strong>materialisiert</strong> durch drei Komponenten, die ein<strong>kompositer Kontextvektor</strong>für das LLM</p> </div> <div class="sect2"> <h3 id="_komponente_1_rag_langchain4j_postgresql_pgvector">Komponente 1 — RAG LangChain4j + PostgreSQL pgvector</h3> <div class="paragraph"> <p>Ich habe LangChain4j bereits in Produktion in zwei Plugins:`slider-gradle`(4 providers LLM) und`plantuml-gradle`(7 Anbieter). Die ONNX-Embeddings (AllMiniLmL6V2) indexieren die Daten von`office/`und der Quellcode von`foundry/`in PostgreSQL + pgvector.</p> </div> <div class="paragraph"> <p>Dieser RAG arbeitet in zwei Dimensionen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Dimension data</strong>: die Dokumente`office/`(SPG, Artikel, Schulungen, JSON‑Schemata)</p> </li> <li> <p><strong>Dimensionscode</strong> : die Codebasen`foundry/`(Quellen Kotlin, Tests Cucumber, AGENT.adoc)</p> </li> </ul> </div> <div class="paragraph"> <p>Der Schnittpunkt umfasst sowohl das <strong>Was</strong> (den Geschäftsbereich) als auch das <strong>Wie</strong> (die Implementierung).</p> </div> </div> <div class="sect2"> <h3 id="_komponente_2_knowledge_graph_graphify">Komponente 2 — Knowledge Graph Graphify</h3> <div class="paragraph"> <p>Graphify ist integriert in`plantuml-gradle`(109 Tests, 380/380 PASS) und erzeugt ein`graph.json`— ein strukturierter Knowledge Graph mit Knoten, Kanten und automatisch erkannten Communities.</p> </div> <div class="paragraph"> <p>Im Gegensatz zum RAG, der nach Vektorähnlichkeit (unscharf) arbeitet, arbeitet das Knowledge Graph nach<strong>exakte Beziehungen</strong>(deterministisch) :`graphify query`für semantische Anfragen (~50 Token),`graphify path`um zu navigieren,`graphify explain`zu erklären.</p> </div> </div> <div class="sect2"> <h3 id="_komponente_3_graphify_inkrementell_spärlich_aggregierbar_konsumierbar">Komponente 3 — Graphify Inkrementell: spärlich, aggregierbar, konsumierbar</h3> <div class="paragraph"> <p>Das ist die entscheidende architektonische Entscheidung.</p> </div> <div class="paragraph"> <p>Graphify darf nicht in einem einzigen Repository leben. Er muss auf eine Weise leben<strong>verstreut</strong>in jedem Plugin:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Jedes Plugin</strong> enthält eine Gradle-Aufgabe`updateKnowledgeGraph`die Graphify aufruft<strong>auf seinem eigenen scope</strong>und produziert ein`graph.json`lokal.</p> </li> <li> <p><strong>Das Build-Skript von`office/<code></strong> konsumiert`graphify-gradle`mit`rootDir = /home/cheroliv/workspace`und produziert ein`graph.json</code> <strong>global</strong>der die lokalen Graphen aggregiert.</p> </li> <li> <p><strong>Der RAG jedes Plugins</strong> injiziert das`graph.json`global wie<strong>Kontextfilter</strong>für die LLM-Anfragen.</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>Ergebnis: Das LLM sucht nicht im Leeren — es bewegt sich in einem vom Knowledge Graph strukturierten Raum. Eine Anfrage nach "generiere ein Diagramm" weiß, die relevanten Knoten des Graphen zu erreichen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_automatische_dsgvo_klassifizierung_das_llm_als_router">Automatische DSGVO-Klassifizierung: das LLM als Router</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die räumliche Ontologie beschränkt sich nicht darauf, das LLM auszurichten – sie gibt ihr eine<strong>DSGVO-Klassifikationsraster</strong>um jedes Datum zu seiner legitimen Zone zu leiten.</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">Kriterium</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LLM-Erkennung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aktion</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">maximales Niveau</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">personenbezogene Daten (Name, E-Mail, IP)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Muster`@`, IP, Eigennamen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anonymisieren →`[OF_PILOTE]`oder Router Schicht 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 / Geheimnis / Zugangsdaten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Muster`sk-&#8230;&#8203;<code>, `ghp_&#8230;&#8203;</code>, <code>ya29&#8230;&#8203;</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router`configuration/<code>. Referenziert von</code>${VAR}`im 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">interne URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Enthält`localhost`, private IP</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anonymisieren →<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">Pädagogische Daten (SPG, Kurs)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Struktur Bloom/Qualiopi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router →<code>office/</code>(Ebene 2). Doppelversion bei 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">Quellcode / Test</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erweiterung`.kt`, <code>.kts`in`foundry/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router →<code>foundry/</code>. Überprüfe das Fehlen von Geheimnissen.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Am Ende der Sitzung führt das LLM eine aus.<strong>globale Aufgabe</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lesen des`.gitignore`Wurzel zur Identifizierung der flüchtigen Artefakte (aus dem Snapshot auszuschließen) vs die strategischen Artefakte (zu historisieren)</p> </li> <li> <p>Verzeichnis aller Dateien`.adoc`der Wurzel`workspace/`</p> </li> <li> <p>Filterung: Ausschluss der in der Liste stehenden Dateien`.gitignore`, Einbeziehung anderer</p> </li> <li> <p>Kopiere in`configuration/vision-archive/$DATE/<code>und Aktualisierung des Symlinks`latest/</code></p> </li> <li> <p>Commit im Repository`configuration/`mit einer strukturierten Nachricht</p> </li> <li> <p>Automatische DSGVO-Klassifizierung jeder geänderten Datei (alle Kreise)</p> </li> <li> <p>Routing: Daten`office/<code>→ privater Commit, code`foundry/</code>→<code>./gradlew check</code>, Konfiguration → Commit</p> </li> <li> <p>Strukturierter Bericht mit DSGVO-Warnungen und Archivierungsbestätigung</p> </li> </ol> </div> <div class="paragraph"> <p>Le `.gitignore`Die Wurzel ist keine Git-Konfigurationsdatei — es ist ein<strong>Datei für die Governance der Historisierung</strong>. Er definiert das Schema, das das LLM konsumiert, um zu entscheiden, welche Dateien aus dem geheimen Garten in die strategische Biografie aufgenommen werden und welche entsorgbar sind.</p> </div> <div class="paragraph"> <p>Der LLM ist nicht mehr nur ein Textgenerator. Er ist das<strong>Informationsmanager</strong>des Ökosystems — Produzent, Klassifikator, Router</p> </div> </div> </div> <div class="sect1"> <h2 id="_roadmap_von_asciidoc_nach_langgraph4j">Roadmap: von AsciiDoc nach LangGraph4j</h2> <div class="sectionbody"> <div class="paragraph"> <p>Heute ist diese Governance <strong>deterministisch</strong>: Der LLM wendet ein Verfahren an, das in AsciiDoc-Dateien beschrieben ist. Das ist die<strong>Phase 1</strong>— das Prompt-Engineering mit LLM-Gedächtnis.</p> </div> <div class="paragraph"> <p>La <strong>Phase 2</strong>wird jeder Schritt des Verfahrens in einer<strong>getypte Gradle‑Aufgabe</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>wird den Prozess des Sitzungsendes wie ein<strong>Zustandsdiagramm</strong>mithttps://github.com/langgraph4j/langgraph4j[LangGraph4j]:</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>Dieser Graph wird in der CI/CD versioniert, von Gradle ausgeführt und über die GitHub-Secrets der Plugins konfiguriert. Der LLM wird nicht mehr über das Routing entscheiden müssen – das wird der Graph erledigen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_diese_architektur_löst_und_was_sie_nicht_löst">Was diese Architektur löst (und was sie nicht löst)</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>Die Raumontologie deckt nicht alles ab. Die Stilkonventionen für Code, die Benennung, die Entscheidungen zur architektonischen Gestaltung — alles das bleibt im Prompt. Was die Raumontologie löst, ist das<strong>Schicht aus Sicherheit und Sichtbarkeit</strong>: wo jedes Byte leben muss, und wer es sehen kann.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Hier ist, was sie konkret bringt:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Kein`git push`zufällig von einem Geheimnis</strong>: die Geheimnisse sind in`configuration/<code>(Kreis 1). Öffentliche Projekte befinden sich in`foundry/</code>(Kreis 4). Kein Weg führt durch beide.</p> </li> <li> <p><strong>Kein Geschäftslogik-Code in den Daten</strong> :`office/<code>enthält</code>.adoc`, von YAML, von JSON‑Schemas — aber kein`.kt`. Le `build.gradle.kts`Wer dort lebt, ist ein Konsumskript, kein Code der Geschäftslogik.</p> </li> <li> <p><strong>Keine offenkundige strategische Denkweise</strong> : Die Vision-Dokumente leben im geheimen Garten (Wurzel außerhalb von CVS). Die Snapshots befinden sich in`configuration/`(privater Tresor). Niemand, sogar in einem erweiterten Vertrauenskreis, liest die Genese der Strategie.</p> </li> <li> <p><strong>Auto-Priorisierung</strong>: Das LLM beobachtet den Delta zwischen der relationalen Algebra (was existiert) und den Experten-Mappings (was erforderlich ist). Die nächste Entwicklungsaufgabe entsteht aus diesem Delta.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_architektur_als_diskurs">Fazit: Architektur als Diskurs</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich lege kein politisches Manifest in den Footer meiner Webseite. Ich lege keine ethischen Regeln in meine Prompts. Die Ausrichtung ist nicht im Text — sie ist im<strong>Dateisystem</strong>.</p> </div> <div class="paragraph"> <p>Wenn ein LLM in diesem Raum arbeitet, kann er kein Geheimnis preisgeben (der Pfad verhindert es). Er kann keine pädagogische Information mit Quellcode verwechseln (der physische Bereich ist unterschiedlich). Er kann keine Sicherheitsregel von 80.000 Tokens vergessen — denn die Regel steht nicht im Prompt, sie ist im`workspace/<code>→`configuration/</code>→<code>office/</code>→`foundry/`dass jedes Lesen einer Datei reaktiv ist.</p> </div> <div class="paragraph"> <p>Es ist das Prinzip von Secure by Design angewendet auf die Agenten‑Alignment: Nicht vom LLM verlangen, sich die Regeln zu merken. Die Architektur so gestalten, dass Fehler strukturell unmöglich werden.</p> </div> <div class="paragraph"> <p>Und zum Übrigen gibt das dem LLM, was kein Prompt ihm geben kann: die Fähigkeit<strong>wahrnehmen</strong>wo er sich befindet, was existiert, was fehlt — und daraus abzuleiten, was er tun muss.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Artikel über die Governance des Eager/Lazy-Agents:<a href="../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Einen KI-Agenten mit AsciiDoc steuern</a></p> </li> <li> <p>Artikel zum Hot/Warm/Cold-Mechanismus :<a href="../2026/0110_mecanisme_backup_contexte_agent_post.html">Sliding Window und Kaltwelle</a></p> </li> <li> <p>Artikel über den Kontextaudit:<a href="../2026/0111_audit_contexte_agent_post.html">Wenn Ihre eigene Governance zum Problem wird</a></p> </li> <li> <p>Artikel über den Vergleich der drei 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> Migration Supabase → Firebase: Anschließen eines Kontaktformulars an Firestore ohne Backend 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="#_die_szene_ein_formular_das_nichts_speichert">Die Szene: ein Formular, das nichts speichert</a> <ul class="sectlevel2"> <li><a href="#_das_erbe_von_supabase">Das Erbe von Supabase</a></li> <li><a href="#_die_doppelte_phantom_einreichung">Die doppelte Phantom-Einreichung</a></li> </ul> </li> <li><a href="#_warum_firebase_statt_supabase">Warum Firebase statt Supabase?</a></li> <li><a href="#_phase_1_firebase_projekt_erstellen">Phase 1 : Firebase-Projekt erstellen</a> <ul class="sectlevel2"> <li><a href="#_initialisierung">Initialisierung</a></li> <li><a href="#_firestore_sicherheitsregeln">Firestore-Sicherheitsregeln</a></li> </ul> </li> <li><a href="#_phase_2_submit_javascript_umschreiben">Phase 2: Submit-JavaScript umschreiben</a> <ul class="sectlevel2"> <li><a href="#_die_abhängigkeit_window_firebase">Die Abhängigkeit `window.<em>FIREBASE</em></a></li> <li><a href="#_der_neue_contact_js">Der neue `contact.js</a></li> </ul> </li> <li><a href="#_phase_3_den_toten_code_in_supabase_bereinigen">Phase 3: Den toten Code in Supabase bereinigen</a></li> <li><a href="#_phase_4_fußzeile_konfigurieren">Phase 4: Fußzeile konfigurieren</a></li> <li><a href="#_phase_5_finale_architektur">Phase 5: Finale Architektur</a></li> <li><a href="#_was_diese_migration_über_dogfooding_sagt">Was diese Migration über Dogfooding sagt</a> <ul class="sectlevel2"> <li><a href="#_zusammenfassung_der_änderungen">Zusammenfassung der Änderungen</a></li> </ul> </li> <li><a href="#_nächste_schritte_backlog">Nächste Schritte (backlog)</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 12 minutes</div> <p>Monatelang lief das Kontaktformular dieser Seite auf einem JavaScript-Mock — eine Erfolgsversprechen von 85 %, ein gefälschter Firestore, null gespeicherte Daten. Der ursprüngliche Plan sah einen Supabase-Backend mit Google Apps Script für E‑Mail‑Benachrichtigungen vor. Verworfen. Heute erzähle ich von der Migration zu Firebase Firestore: Projektanlegen, Sicherheitsregeln, JS neu schreiben, Aufräumen des toten Supabase‑Codes. Und warum diese Wahl etwas über die Entwicklungsphilosophie aussagt.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_ein_formular_das_nichts_speichert">Die Szene: ein Formular, das nichts speichert</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Seite wird von JBake, meinem Gradle-Plugin generiert`bakery`. Es ist zu 100 % statisch — kein Backend, keine Datenbank. Aber ich habe ein Kontaktformular. Die Seite`contact.html`existiert, das HTML ist bereit (Felder Name, E‑Mail, Telefon, Betreff, Nachricht, HTML5-Validierung, Anti-Spam-Honeypot), die Bootstrap-Stile sind vorhanden. Optisch ist alles perfekt.</p> </div> <div class="paragraph"> <p>Aber bei der Einreichung passiert nichts.</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) =&gt; { setTimeout(() =&gt; { if (Math.random() &lt; 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>Ein Mock. Ein Versprechen, das nur vorgetäuscht ist. Der Nutzer sieht einen Spinner, dann die Nachricht « Nachricht erfolgreich gesendet! ». Aber die Daten gehen ins Nichts. Keine Nachricht wird irgendwo gespeichert.</p> </div> <div class="paragraph"> <p>Die Situation ist schlimmer als ein kaputtes Formular — es ist ein Formular, das lügt.</p> </div> <div class="sect2"> <h3 id="_das_erbe_von_supabase">Das Erbe von Supabase</h3> <div class="paragraph"> <p>Der initiale Plan, dokumentiert in`content/draft/integration_formulaire_contact_supabase.adoc`, vorsah :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Eine Supabase-Datenbank mit Tabelle`contacts`und Row Level Security</p> </li> <li> <p>Eine RPC`handle_contact_form`Serverseite</p> </li> <li> <p>Ein SQL-Trigger, der einen Google Apps Script-Webhook aufruft</p> </li> <li> <p>Google Apps Script, der eine Gmail-Benachrichtigungs-E-Mail sendet</p> </li> </ol> </div> <div class="paragraph"> <p>Der entsprechende JavaScript-Code existiert noch in`script.js`. Es gibt eine Klasse`SupabaseManager`der einen Supabase-Client mit globalen Variablen initialisiert`SUPABASE_URL` et <code>SUPABASE_KEY</code>, und eine Klasse`ContactFormHandler`der das Submit-Ereignis des Formulars abhört und aufruft`SupabaseManager.submitContactForm()`.</p> </div> <div class="paragraph"> <p>Problem: Diese globalen Variablen werden nicht mehr in den Footer eingefügt. Der`&lt;script src="supabase-js"&gt;`wurde entfernt. Der Code ruft`supabase.createClient()`über eine Variable`supabase`nicht mehr existiert. Also:</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>Nicht nur werden die Daten nicht gespeichert, sondern der Einreichungscode ist tot.</p> </div> </div> <div class="sect2"> <h3 id="_die_doppelte_phantom_einreichung">Die doppelte Phantom-Einreichung</h3> <div class="paragraph"> <p>Um es noch schlimmer zu machen, gibt es eine<strong>stille Konkurrenz</strong>zwischen zwei Handlern auf demselben Formular :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>`contact.js`Höre auf das Submit, rufe den Firebase-Mock auf.</p> </li> <li> <p><code>script.js</code>— über`ContactFormHandler`— hör auch das submit, ruf`SupabaseManager`</p> </li> </ol> </div> <div class="paragraph"> <p>Beide machen`event.preventDefault() + event.stopPropagation()<code>. Wie`contact.js`wird zuerst in`footer.thyme</code>, sein Handler wird zuerst angehängt. Er blockiert die Ausbreitung.`ContactFormHandler`wird niemals ausgelöst.</p> </div> <div class="paragraph"> <p>Es ist sogar kein aktiver Bug — es ist ein Zombie. Code, der nie die Gelegenheit hat, ausgeführt zu werden.</p> </div> <div id="diag-before" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE title Initialzustand — Kontaktformular rectangle "contact.thyme\n(HTML Bootstrap, honeypot)" as FORM rectangle "footer.thyme\n(Firebase SDK mit Platzhalterkonfiguration)" as FOOT rectangle "contact.js (mock Firebase, 85% Erfolg)" as CONT ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE title Initialzustand — Kontaktformular rectangle "contact.thyme\n(HTML Bootstrap, honeypot)" as FORM rectangle "footer.thyme\n(Firebase SDK mit Platzhalterkonfiguration)" as FOOT rectangle "contact.js (mock Firebase, 85% Erfolg)" as CONT rectangle "script.js\n(SupabaseManager + ContactFormHandler, tote)" as SCRIPT rectangle "Benutzer" as USER USER -&gt; FORM : Soumission du formulaire FORM -&gt; CONT : submit event (attaché en premier) CONT -&gt; CONT : preventDefault + stopPropagation CONT -&gt; CONT : mock Promise (1.5s, aléatoire) note right of CONT ⚠️ Aucune donnée stockée end note FORM ..&gt; SCRIPT : submit event (bloqué par stopPropagation) note right of SCRIPT : ❌ Jamais déclenché note right of SCRIPT : ❌ supabase-js non chargé @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_firebase_statt_supabase">Warum Firebase statt Supabase?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Migrationsentscheidung ist dokumentiert in`AGENT.adoc`:</p> </div> <div class="paragraph"> <p>Firebase wird nun aus folgenden Gründen gewählt: besserer kostenloser Plan, nativer Firestore, integrierte Cloud Functions, besser geeignetes Google-Ökosystem. Die vorhandene Supabase-Implementierung ist mit « ⚠️ veraltet » gekennzeichnet.</p> </div> <div class="paragraph"> <p>Über das kostenlose Angebot hinaus gibt es einen architektonischen Grund. Diese Website lebt im Google-Ökosystem: Das Ziel-Repository ist`cheroliv.github.io`, der CNAME zeigt auf GitHub Pages, der Gradle-Build pusht zu GitHub über JGit. Das Hinzufügen eines Google-Dienstes (Firebase) anstelle eines Drittanbieter-Dienstes (Supabase) verringert die Angriffsfläche.</p> </div> <div class="paragraph"> <p>Firestore im nativen Modus (nicht im Datastore-Modus) ist ebenfalls näher an dem NoSQL-Dokumentmodell, das ich im Kopf habe: Sammlungen, Dokumente, typisierte Felder, Server-Zeitstempel, integrierte Sicherheitsregeln.</p> </div> </div> </div> <div class="sect1"> <h2 id="_phase_1_firebase_projekt_erstellen">Phase 1 : Firebase-Projekt erstellen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_initialisierung">Initialisierung</h3> <div class="paragraph"> <p>Da die Firebase CLI auf meinem Rechner nicht installiert ist, verwende ich die Webkonsole:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>aufgehenhttps://console.firebase.google.com/[Firebase-Konsole]</p> </li> <li> <p>Ein Projekt erstellen`cheroliv-contact`(oder ein bestehendes Projekt wiederverwenden)</p> </li> <li> <p>Firestore im nativen Modus (nicht Datastore) aktivieren</p> </li> <li> <p>Eine Datenbank in der Region erstellen`eur3`(Europa)</p> </li> </ol> </div> <div class="paragraph"> <p>Für einen minimalistischen Gebrauch wie unseren (einziges Sammeln, öffentliches Schreiben) ist der native Modus die richtige Wahl. Es sind keine komplexen Datastore-Regeln nötig.</p> </div> </div> <div class="sect2"> <h3 id="_firestore_sicherheitsregeln">Firestore-Sicherheitsregeln</h3> <div class="paragraph"> <p>Das Formular ist öffentlich — jeder kann eine Nachricht senden. Aber ich möchte den Missbrauch beschränken :</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 &amp;&amp; request.resource.data.name is string &amp;&amp; request.resource.data.name.size() &gt;= 1 &amp;&amp; request.resource.data.name.size() &lt;= 100 &amp;&amp; request.resource.data.email is string &amp;&amp; request.resource.data.email.matches('.*@.*\\..*') &amp;&amp; request.resource.data.email.size() &lt;= 254 &amp;&amp; request.resource.data.subject is string &amp;&amp; request.resource.data.subject.size() &gt;= 3 &amp;&amp; request.resource.data.subject.size() &lt;= 200 &amp;&amp; request.resource.data.message is string &amp;&amp; request.resource.data.message.size() &gt;= 10 &amp;&amp; request.resource.data.message.size() &lt;= 5000 &amp;&amp; request.resource.data.created_at == request.time &amp;&amp; request.resource.data.user_agent is string &amp;&amp; request.resource.data.user_agent.size() &lt;= 500; } } }</code></pre> </div> </div> <div class="paragraph"> <p>Schlüsselpunkte :</p> </div> <div class="ulist"> <ul> <li> <p><code>allow read</code>— nur authentifizierte Benutzer können die Nachrichten lesen (ich über die Firebase-Konsole)</p> </li> <li> <p><code>allow create</code>— jeder kann ein Dokument erstellen, aber mit Feldvalidierung</p> </li> <li> <p>Serverseitige Validierung: Min/Max-Größen, E-Mail-Format,<code>created_at`muss entsprechen zu`request.time</code>(anti-fälschung)</p> </li> <li> <p>`user_agent`Es wird zur Nachverfolgung gesendet (nicht kritisch aber nützlich)</p> </li> </ul> </div> <div class="paragraph"> <p>Diese Regeln sind strenger als ein einfaches`allow write: if true;`. Sie verhindern, dass ein Angreifer riesige Payloads oder malformierte Felder einfügt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_2_submit_javascript_umschreiben">Phase 2: Submit-JavaScript umschreiben</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Vertrag ist einfach:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Die Daten des Formulars lesen</p> </li> <li> <p>Überprüfe das Honeypot (Feld`hp_name`— wenn es gefüllt ist, ist es ein Bot, wir simulieren einen Erfolg, ohne etwas zu senden)</p> </li> <li> <p>anrufen`addDoc(window.<em>FIREBASE</em>.collection(db, "contact_messages"), {&#8230;&#8203;})`</p> </li> <li> <p>Erfolg oder Fehler anzeigen</p> </li> </ol> </div> <div class="sect2"> <h3 id="_die_abhängigkeit_window_firebase">Die Abhängigkeit `window.<em>FIREBASE</em></h3> <div class="paragraph"> <p>in`footer.thyme`, ein Skriptmodul initialisiert das Firebase SDK und macht ein globales Objekt verfügbar :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;script type="module"&gt; 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 }; &lt;/script&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Modulskripte werden vorher ausgeführt`DOMContentLoaded`, also`window.<em>FIREBASE</em>`ist garantiert verfügbar wenn der handler`contact.js`es wird ausgelöst. Aus Vorsicht füge ich trotzdem ein Polling von 5 Sekunden hinzu, falls der CDN langsam wäre.</p> </div> </div> <div class="sect2"> <h3 id="_der_neue_contact_js">Der neue `contact.js</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) =&gt; { if (window.__FIREBASE__) { resolve(window.__FIREBASE__); return; } const start = Date.now(); const interval = setInterval(() =&gt; { if (window.__FIREBASE__) { clearInterval(interval); resolve(window.__FIREBASE__); } else if (Date.now() - start &gt; 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 &lt; 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 &amp;&amp; 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 &lt; 3) { subjectInput.setCustomValidity('Veuillez saisir un sujet (3 caractères minimum).'); } if (messageInput.value.trim().length &lt; 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 &amp;&amp; honeypotInput.value.trim() !== '') { successMessage.style.display = 'block'; form.reset(); form.classList.remove('was-validated'); return; } // UI : état d'envoi submitButton.disabled = true; submitButton.innerHTML = ` &lt;span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"&gt;&lt;/span&gt; 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 = ` &lt;i class="bi bi-send me-2"&gt;&lt;/i&gt; Envoyer le Message `; } }, false); });</code></pre> </div> </div> <div class="paragraph"> <p>Die Änderungen im Vergleich zum Mock:</p> </div> <div class="ulist"> <ul> <li> <p><code>waitForFirebase()</code>— Polling mit Timeout, auch robust, wenn das CDN langsam ist</p> </li> <li> <p><code>honeypot</code>— wenn das versteckte Feld`hp_name`ist gefüllt, simuliere einen uneingeschränkten Firestore-Erfolg. Der Bot glaubt, erfolgreich gewesen zu sein, aber nichts wird gespeichert.</p> </li> <li> <p><code>addDoc(collection, {&#8230;&#8203;})</code>— echter Firestore-Aufruf mit`serverTimestamp()` et <code>user_agent</code></p> </li> <li> <p>Fehlerbehandlung mit`try/catch`asynchron</p> </li> <li> <p>Reinigung des`finally`(Wiederherstellung des Knopfes)</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>Warum`user_agent`? Es ist optional, aber nützlich für die Diagnose. Wenn eine seltsame Nachricht ankommt, zu wissen, ob sie von einem Desktop-Browser, einem mobilen Browser oder einem curl-Skript stammt, hilft bei der Sortierung.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_3_den_toten_code_in_supabase_bereinigen">Phase 3: Den toten Code in Supabase bereinigen</h2> <div class="sectionbody"> <div class="paragraph"> <p>`script.js`enthält 250 Zeilen dead code :</p> </div> <div class="ulist"> <ul> <li> <p><code>SupabaseManager</code>(Zeilen 417-481) — 65 Zeilen</p> </li> <li> <p><code>ContactFormHandler</code>(Zeilen 490-551) — 62 Zeilen</p> </li> <li> <p>Initialisierungsblock (Zeilen 645-654) — 10 Zeilen</p> </li> </ul> </div> <div class="paragraph"> <p>Gesamt: ~140 Zeilen zu löschen.</p> </div> <div class="paragraph"> <p>Der Block`DOMContentLoaded`erstellt ein`SupabaseManager`dann ein`ContactFormHandler`an das Formular angehängt. Wie oben erklärt, wird dieser Code niemals ausgeführt (blockiert durch`contact.js`), und selbst wenn es ausgeführt würde, würde es fehlschlagen (kein Supabase-SDK geladen).</p> </div> <div class="paragraph"> <p>Ich lösche :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Die Klasse`SupabaseManager`</p> </li> <li> <p>Die Klasse`ContactFormHandler`</p> </li> <li> <p>Der Initialisierungsblock in`DOMContentLoaded`(Zeilen 645-654)</p> </li> </ol> </div> <div class="paragraph"> <p>Le reste de <code>script.js`ist intakt:`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_fußzeile_konfigurieren">Phase 4: Fußzeile konfigurieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>`footer.thyme`Er hat bereits das Firebase-Boilerplate, aber mit Platzhalterwerten. Ich ersetze:</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>Durch die seit abgerufenen tatsächlichen Werte<strong>Projekteinstellungen &gt; Allgemein &gt; Deine Apps &gt; Web-App</strong>in der Firebase‑Konsole.</p> </div> <div class="paragraph"> <p>Die Werte sind sensibel.<code>apiKey`ist bei Firebase von Haus aus öffentlich, aber ich ziehe es vor, sie nicht im Klartext zu committten). Ich speichere sie in`site.yml</code>(bereits in`.gitignore`) und das Plugin`bakery`Er injiziert sie in das Template mithilfe einer Logik, die auf der Build-Seite hinzugefügt werden soll.</p> </div> <div class="paragraph"> <p>Im Moment lege ich sie direkt hinein.<code>footer.thyme</code>— der Build`./gradlew serve`Es wird sie lokal laden. Bei der Bereitstellung werde ich die Injektion nach`site.yml`oder zu einer Gradle-Variable.</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 ist nicht<strong>nicht</strong>ein Geheimnis. Sie ist von Natur aus öffentlich. Was Ihre Daten schützt, sind die<strong>Firestore-Sicherheitsregeln</strong>, nicht den API-Schlüssel. Legen Sie es nicht in ein`.env`Serverseitig geladen — sie ist dafür vorgesehen, im Browser angezeigt zu werden.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_phase_5_finale_architektur">Phase 5: Finale Architektur</h2> <div class="sectionbody"> <div id="diag-after" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE title Finale Architektur — Kontaktformular Firebase actor Utilisateur as USER package "Browser" #E8F5E9 { rectangle "contact.thyme ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE title Finale Architektur — Kontaktformular Firebase actor Utilisateur as USER package "Browser" #E8F5E9 { rectangle "contact.thyme (HTML, honeypot)" as FORM rectangle "contact.js\n(Validierung + Firestore)" as CONT rectangle "Footer.Thyme (Initialisierung des Firebase SDK)" as FOOT } cloud "Firebase" #BBDEFB { rectangle "Firestore (contact_messages)" as FS } FORM --&gt; CONT : submit event CONT --&gt; FOOT : window.__FIREBASE__.addDoc() FOOT --&gt; FS : Insert document\n(règles de sécurité validées) note right of FS Firestore Rules : - create: public, validé - read: auth uniquement end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_was_diese_migration_über_dogfooding_sagt">Was diese Migration über Dogfooding sagt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Website wird von meinem eigenen Gradle-Plugin generiert`bakery`. Das Kontaktformular befindet sich innerhalb der Website. Die Migration Supabase → Firebase wird in`AGENT.adoc`, sie wird im Backlog diskutiert, sie wird via getestet`./gradlew serve`, und sie generiert einen Blogartikel (den du gerade liest).</p> </div> <div class="paragraph"> <p>Das ist reines Dogfooding. Die Website ist das Produkt des Plugins, das Plugin ist das Produkt des Entwicklers, der Entwickler dokumentiert den Prozess auf der Website selbst.</p> </div> <div class="paragraph"> <p>Der Kreis ist geschlossen.</p> </div> <div class="paragraph"> <p>Dass ich ein Mock monatelang mit mir herumgeschleppt habe (ganze Sitzungen, in denen das Formular schweigend gelogen hat), hat mir bewusst gemacht: Das Backlog einer persönlichen statischen Website ist niemals „fertig“. Es gibt immer eine priorisierte Benutzerstory, immer einen Artikel im Entwurf und immer einen kommentierten Abschnitt in einer Vorlage. Disziplin bedeutet nicht, alles fertigzustellen – sondern das zu vollenden, was für den Nutzer sichtbar ist.</p> </div> <div class="paragraph"> <p>Ein kaputtes Kontaktformular ist schlimmer als überhaupt kein Kontaktformular. Das ist ein nicht gehaltenes Versprechen.</p> </div> <div class="sect2"> <h3 id="_zusammenfassung_der_änderungen">Zusammenfassung der Änderungen</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">Datei</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modifikation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Auswirkung</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">Erstellung des Artikels</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokumentation</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">Umschreibung (mock → echter Firestore)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Funktionsfähig</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">Löschen SupabaseManager + ContactFormHandler + init Block</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Reinigung</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">Ersetzung des Konfigurationsplatzhalters → echte Werte</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konfiguration</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_nächste_schritte_backlog">Nächste Schritte (backlog)</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Benachrichtigungs-Email</strong>: Eine Cloud Function`onCreate`auf`contact_messages`der eine E-Mail über SendGrid sendet. Das Formular speichert, aber ich werde nicht benachrichtigt. Mittlere Priorität — die Nachrichten sind in der Firebase-Konsole sichtbar.</p> </li> <li> <p><strong>Rate Limiting auf der Clientseite</strong>Füge einen localStorage-Zeitstempel hinzu, um mehrfache schnelle Sendungen zu verhindern. Der Honeypot blockiert naivere Bots, ein Rate Limiter würde etwas cleverere Bots blockieren.</p> </li> <li> <p><strong>Tests</strong>: Ein Playwright-Test, der das Formular absendet und überprüft, dass das Dokument in Firestore erscheint. Im Moment teste ich manuell über`./gradlew serve`.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://firebase.google.com/docs/firestore/security/get-started">Dokumentation Firestore Sicherheitsregeln</a></p> </li> <li> <p><a href="https://firebase.google.com/docs/firestore/manage-data/add-data#add_a_document">Dokumentation Firestore addDoc — Web v9 modulare</a></p> </li> <li> <p><a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Series Governance-Agent — Teil 1: Eager/Lazy</a></p> </li> <li> <p><a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Governance-Agent-Serie — Teil 2: Hot/Warm/Cold</a></p> </li> <li> <p><a href="/blog/2026/0111_audit_contexte_agent_post.html">Governance-Agent-Serie — Teil 3: Audit</a></p> </li> </ul> </div> </div> </div> DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1: Drei LLMs im Test des Vibe Coding Long Kontext 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="#_kontext_kein_prüfstand_sondern_eine_baustelle">Kontext: kein Prüfstand, sondern eine Baustelle</a></li> <li><a href="#_meine_testumgebung">Meine Testumgebung</a></li> <li><a href="#_das_bewertungsraster">Das Bewertungsraster</a></li> <li><a href="#_runde_1_kimi_k2_6_der_fehlstart">Runde 1: Kimi K2.6 – Der Fehlstart</a> <ul class="sectlevel2"> <li><a href="#_session_9_die_erholung">Session 9: die Erholung</a></li> <li><a href="#_sitzung_10_der_stille_schiffbruch">Sitzung 10: der stille Schiffbruch</a></li> </ul> </li> <li><a href="#_runde_2_glm_5_1_der_ehrenhafte_kämpfer">Runde 2: GLM-5.1 — Der ehrenhafte Kämpfer</a> <ul class="sectlevel2"> <li><a href="#_architektur_dsa_gegen_reines_mla">Architektur: DSA gegen reines MLA</a></li> <li><a href="#_sessions_11_13_solide_aber_frustrierend">Sessions 11-13: solide aber frustrierend</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="#_architektur_csa_hca_das_doppelte_filet">Architektur: CSA + HCA, das doppelte Filet</a></li> <li><a href="#_sessions_1_8_erleichterung">Sessions 1-8: Erleichterung</a></li> <li><a href="#_der_entscheidende_test_refactoring_bei_100k_tokens">Der entscheidende Test: refactoring bei 100K tokens</a></li> </ul> </li> <li><a href="#_face_à_face_vergleichende_metriken">Face-à-Face : Vergleichende Metriken</a></li> <li><a href="#_warum_deepseek_v4_pro_in_der_softwareentwicklung_gewinnt">Warum DeepSeek-V4-Pro in der Softwareentwicklung gewinnt</a> <ul class="sectlevel2"> <li><a href="#_1_die_csahca_architektur_ist_für_den_code_zugeschnitten">1. Die CSA+HCA-Architektur ist für den Code zugeschnitten.</a></li> <li><a href="#_2_der_kontext_eager_ist_seine_komfortzone">2. Der Kontext EAGER ist seine Komfortzone</a></li> <li><a href="#_3_das_qualitäts_latenz_verhältnis_ist_optimal_für_den_flow">3. Das Qualitäts-/Latenz-Verhältnis ist optimal für den Flow.</a></li> </ul> </li> <li><a href="#_gelernte_lektionen_wie_man_sein_llm_für_vibe_coding_auswählt">Gelernte Lektionen: Wie man sein LLM für Vibe Coding auswählt</a></li> <li><a href="#_und_was_ist_mit_dem_governance_agent_in_allem">Und was ist mit dem Governance-Agent in allem?</a></li> <li><a href="#_technische_quellen">Technische Quellen</a></li> <li><a href="#_conclusion_die_wahl_des_handwerkers">Conclusion : Die Wahl des Handwerkers</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 18 minutes</div> <p>Der Krieg der LLMs wird auch im Terminal eines Entwicklers ausgetragen. Nicht auf sterilen akademischen Benchmarks. Im echten Leben: ein Prompt von 30.000 Tokens, eine Agenten-Governance in AsciiDoc, Gradle-Kotlin-DSL-Plugins zum Debuggen und Sessions, die sich über drei Wochen aneinanderreihen. Ich habe DeepSeek-V4-Pro, Kimi K2.6 und GLM-5.1 für Sie getestet. Hier ist das Urteil, belegt mit technischen Nachweisen.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tic</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_kontext_kein_prüfstand_sondern_eine_baustelle">Kontext: kein Prüfstand, sondern eine Baustelle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vor drei Wochen arbeitete ich an`codebase-gradle`, Mein Meta-Build-System, das die YAML-Konfiguration von vier Projekten zentralisiert: ein PlantUML-README-Generator, ein AsciiDoc-Slide-Baukasten, eine statische JBake-Website und ein LLM-Chatbot. Der Opencode-Agent, regiert durch meine Methodik der Agenten-Dateien in AsciiDoc, lud jeweils zu Beginn einer Sitzung etwa 30K Tokens des EAGER-Kontexts – absolute Regeln, Backlog, Verlauf der letzten 10 Sitzungen.</p> </div> <div class="paragraph"> <p>Es ist auf diesem Gebiet, dass ich drei Modelle konfrontiert habe:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Kimi K2.6</strong>(Moonshot AI, 1T Parameter / 32B aktiviert, 256K maximaler Kontext, MLA) - <strong>GLM-5.1</strong>(Zhipu AI/Tsinghua, 744B params / DSA, 200K max. Kontext) - <strong>DeepSeek-V4-Pro</strong>(DeepSeek, 1,6 Billionen Parameter / 49B aktiviert, 1M Kontext max, CSA+HCA)</p> </li> </ul> </div> <div class="paragraph"> <p>Alle werden über Ollama auf Cloud-Server bereitgestellt, alle im Thinking-Modus (Denkphase aktiviert). Die Herausforderung besteht darin, korrekten Code zu produzieren, die Kohärenz über lange Sitzungen aufrechtzuerhalten und Halluzinationen zu vermeiden, wenn der Kontext mehr als 80K Tokens überschreitet.</p> </div> </div> </div> <div class="sect1"> <h2 id="_meine_testumgebung">Meine Testumgebung</h2> <div class="sectionbody"> <div id="diag-dev-env" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 11) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Testumgebung — Opencode-Sitzungen × 3 LLMs left to right direction package "🖥️ Entwickler-Terminal" #E8F5E9 { rectangle "AGENT.adoc\n(Regeln, backlog)" as AG rectangle "PROMPT_REPRISE ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Testumgebung — Opencode-Sitzungen × 3 LLMs left to right direction package "🖥️ Entwickler-Terminal" #E8F5E9 { rectangle "AGENT.adoc\n(Regeln, backlog)" as AG rectangle "PROMPT_REPRISE (Mission)" as PR rectangle "INDEX.adoc (roadmap)" as IDX } package "☁️ Ollama Cloud" #BBDEFB { rectangle "DeepSeek-V4-Pro 1.6T / CSA+HCA" as DV4 rectangle "Kimi K2.6 1T / MLA" as KIMI rectangle "GLM-5.1\n744B / MLA+DSA" as GLMG } package "�⚙️ Codebasis Gradle" #FFF9C4 { folder "buildSrc/" { file "codebase.kt" file "readme.kt" file "site.kt" file "slider.kt" file "snapshot.kt" } file "build.gradle.kts (947 Zeilen)" file "embeds.yml" } AG --&gt; DV4 : Sessions 1-8 ✅ AG --&gt; KIMI : Sessions 9-10 ⚠️ AG --&gt; GLMG : Sessions 11-13 ⚠️ DV4 --&gt; "Codebasis" : "TDD, Refaktorisierung, Momentaufnahme" KIMI --&gt; "Codebasis" : "Verschlechterung ab 60K Tokens" note bottom of GLMG Meilleur que Kimi mais latence + DSA moins robuste que CSA+HCA end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Jede Sitzung begann mit etwa 30K Tokens des EAGER-Kontextes :`AGENT.adoc`(287 Zeilen)<code>PROMPT_REPRISE.adoc</code>(51 Zeilen)<code>.agents/INDEX.adoc</code>(218 Zeilen),<code>LAZY_EAGER_ESSENTIALS.adoc</code>(50 Zeilen). Der Kontext wuchs schnell mit den Austauschen — eine typische Sitzung von 10 Nachrichten fügte 15-20K Tokens zum kumulativen Prompt hinzu.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_bewertungsraster">Das Bewertungsraster</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich habe jedes Modell auf vier kritische Achsen für die assistierte Softwareentwicklung bewertet:</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">Achse</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konkretes Kriterium</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kohärenz langer Kontext</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erinnert sich der Agent an die vor 40 Nachrichten vereinbarten Konventionen?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Qualität des produzierten Codes</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kompiliert der Code beim ersten Versuch? Hält er sich an die vorhandenen Muster?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Architektonisches Denken</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Versteht der Agent die Beziehungen zwischen den Modulen, ohne dass ich sie ihm noch einmal erklären muss?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Halluzinationsresistenz</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ab wie vielen Tokens beginnt der Agent, erfundene APIs oder nicht existierende Klassen zu erfinden?</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Und eine hausgemachte synthetische Metrik: das<strong>Wiederaufnahmekoeffizient</strong>(wie viel Zeit ich damit verbringe, den Agenten zu korrigieren, anstatt mit ihm zu coden).</p> </div> </div> </div> <div class="sect1"> <h2 id="_runde_1_kimi_k2_6_der_fehlstart">Runde 1: Kimi K2.6 – Der Fehlstart</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kimi K2.6 war meine erste Wahl. Seine Benchmarks auf SWE-Bench Verified (80.2) und Terminal-Bench 2.0 (66.7) sind hervorragend. Seine MLA-Architektur verspricht eine gute Effizienz bei langen Sequenzen.</p> </div> <div class="sect2"> <h3 id="_session_9_die_erholung">Session 9: die Erholung</h3> <div class="paragraph"> <p>Erste Sitzung mit Kimi. Aufgabe: die Methode implementieren`resolveActiveKey()<code>in`codebase.kt</code>— eine Funktion zur Auflösung eines API-Schlüssels mit CLI-Fallback. Der Kontext liegt bei 30 K Tokens, Kimi denkt schnell und erzeugt sauberen Code mit Verwaltung des Schlüsselablaufs.</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>Der Code kompiliert. Die 7 Testfälle bestehen. Ich bin optimistisch.</p> </div> </div> <div class="sect2"> <h3 id="_sitzung_10_der_stille_schiffbruch">Sitzung 10: der stille Schiffbruch</h3> <div class="paragraph"> <p>Zweite Sitzung. Der Kontext steigt auf ~90K Tokens mit den Austauschen. Ich bitte Kimi, ein AsciiDoc-Snapshot-Mechanismus hinzuzufügen, der Geheimnisse vor dem Schreiben anonymisiert.</p> </div> <div class="paragraph"> <p>Das ist der Punkt, an dem es aus dem Ruder läuft. Kimi beginnt, Klassen zu erfinden, die nicht existieren. Er schlägt mir vor`AnonymizedObjectMapper`— eine fiktive Klasse. Er verwechselt`ReadmeYmlAnonymizer` et <code>CodebaseYmlAnonymizer</code>. Er schlägt vor, dass ich importiere`com.fasterxml.jackson.anonymize.*`— ein Paket, das nie existiert hat.</p> </div> <div class="paragraph"> <p>Schlimmer noch: In seiner Reflexionsphase sehe ich, dass er Schlussfolgerungen auf falschen Prämissen aufbaut. Er "erinnert sich", dass`GitConfig`hat ein Feld`anonymizedToken`— nein, es ist`resolvedToken()<code>. Er weist zu`SiteYmlAnonymizer`une Methode`maskSupabaseCredentials()</code>— existiert nicht.</p> </div> <div class="paragraph"> <p><em><em>_ Es war kein Fehler. Es war eine schrittweise Auflösung der Kohärenz. Als ob jedes Token, das dem Kontext hinzugefügt wird, das Gedächtnis der ersten 30 000 ein wenig mehr verdünnte. </em>_</em></p> </div> <div class="paragraph"> <p>Ich breche Kimi nach zwei Sitzungen ab. Die Diagnose ist klar: Der MLA komprimiert den KV-Cache gut, aber ohne einen feinkörnigen sparsen Selektionsmechanismus verdünnt sich die Aufmerksamkeit mechanisch über 60K Tokens hinaus. Jedes Token "sieht" den fernen Kontext immer schlechter — und beginnt, die Lücken mit Rauschen zu füllen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_runde_2_glm_5_1_der_ehrenhafte_kämpfer">Runde 2: GLM-5.1 — Der ehrenhafte Kämpfer</h2> <div class="sectionbody"> <div class="paragraph"> <p>GLM-5.1 kommt mit einer anderen Architektur: MLA für das Basismodell, gefolgt von einem <strong>continued pre-training</strong> mit DSA (DeepSeek Sparse Attention) — ein leichter Indexer, der dynamisch die relevanten Top-2048-Tokens aus der gesamten Historie auswählt.</p> </div> <div class="sect2"> <h3 id="_architektur_dsa_gegen_reines_mla">Architektur: DSA gegen reines MLA</h3> <div class="paragraph"> <p>Der Unterschied ist grundlegend. Wo Kimi die Historie in einem einzelnen latenten Raum komprimiert (und dabei allmählich die Fähigkeit verliert, relevante Informationen zu unterscheiden), fügt GLM ein nachträglich trainiertes Indexer ein, das eine explizite selektive Sparsamkeit durchführt.</p> </div> <div id="diag-mla-vs-dsa" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Attention-Architekturen — MLA vs MLA+DSA left to right direction rectangle "Kimi K2.6 — reine MLA" as MLA #FFCDD2 { rectangle "KV Cache ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Attention-Architekturen — MLA vs MLA+DSA left to right direction rectangle "Kimi K2.6 — reine MLA" as MLA #FFCDD2 { rectangle "KV Cache vollständig" as KV1 rectangle "Kompression\nlatente" as CL1 rectangle "Decodierung im latenten Raum" as DL1 KV1 --&gt; CL1 CL1 --&gt; DL1 note bottom of DL1 ⚠️ Au-delà de 60K tokens : perte de discrimination end note } rectangle "GLM-5.1 — MLA + DSA" as DSA #C8E6C9 { rectangle "KV Cache vollständig" as KV2 rectangle "Kompression\nlatente (MLA)" as CL2 rectangle "Leichter Indexer (DSA, top-k=2048)" as IL rectangle "Decodierung auf ausgewählten Tokens" as DL2 KV2 --&gt; CL2 CL2 --&gt; IL IL --&gt; DL2 note bottom of DL2 ✅ "Verlustfrei durch Konstruktion" Sélection explicite des tokens pertinents end note } MLA --&gt; DSA : "Gewinn: spärselektion Die die Verwässerung vermeidet" @enduml</pre> </div> </div> <div class="paragraph"> <p>Der technische Bericht sagt es ausdrücklich: DSA ist <em>"lossless by construction"</em> — im Gegensatz zu Alternativen wie SWA (Pattern Search), Gated DeltaNet oder SimpleGDN, die bis zu 5,69 Punkte auf RULER@128K verlieren.</p> </div> </div> <div class="sect2"> <h3 id="_sessions_11_13_solide_aber_frustrierend">Sessions 11-13: solide aber frustrierend</h3> <div class="paragraph"> <p>GLM-5.1 hält die Distanz besser. In Session 11 (~60k Token) bleibt es konsistent. Es erzeugt ein`SnapshotManager`funktionsfähig mit korrekter Verwaltung der vier Anonymisierer.</p> </div> <div class="paragraph"> <p>Aber die Latenz ist ein Problem. Die Reflexionsphasen von DSA sind schwerer als reines MLA — der Indexer muss bei jedem Schritt den Verlauf neu scannen. Eine Antwort, die mit Kimi 8 Sekunden dauerte, braucht bei GLM 15 Sekunden. Bei einer Sitzung von 30 Nachrichten merkt man das.</p> </div> <div class="paragraph"> <p>Und dann gibt es die subtilen Fehler. GLM verrücktert nicht wie Kimi — aber er macht Fehler beim <strong>nommage</strong>. Er ruft`toAnonymizedYaml()<code>die Methode, die aufgerufen werden sollte`anonymize()</code>. Er kehrt um`loadReadmeConfiguration()` et <code>loadCodebaseConfiguration()`im`renderFileSection()</code>. Das sind keine Halluzinationen, sondern Oberflächenverwechslungen — aber in der Produktion kann eine Oberflächenverwechslung einen Build zerstören.</p> </div> <div class="paragraph"> <p>Ich hatte drei Sitzungen mit GLM. Es ist besser als Kimi, zweifellos. Aber drei Sitzungen manueller Korrektur bei der Namensgebung zehren.</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 kommt mit der ambitioniertesten Architektur der drei: ein hybrides System, das zwei komplementäre Aufmerksamkeitsmechanismen kombiniert.</p> </div> <div class="sect2"> <h3 id="_architektur_csa_hca_das_doppelte_filet">Architektur: CSA + HCA, das doppelte Filet</h3> <div id="diag-csa-hca" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 180 title DeepSeek-V4-Pro — Hybride Architektur CSA + HCA left to right direction rectangle "KV Cache ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 180 title DeepSeek-V4-Pro — Hybride Architektur CSA + HCA left to right direction rectangle "KV Cache 1M Token" as KV #E3F2FD rectangle "CSA Komprimierte spärliche Aufmerksamkeit" as CSA #C8E6C9 { rectangle "Komprimierung\nm Tokens → 1" as CC rectangle "Sparse Attention\n(DSA, top-k)" as SA CC --&gt; SA note bottom of SA Attention locale fine + sélection sparse end note } rectangle "HCA Stark komprimierte Aufmerksamkeit" as HCA #BBDEFB { rectangle "Extreme Kompression m' &gt;&gt; m → 1" as ECC rectangle "Dichte Aufmerksamkeit residual" as EDA ECC --&gt; EDA note bottom of EDA Contexte global + connexions longue distance end note } rectangle "Fusion Hybrid" as FUSION #FFF9C4 rectangle "Kohärente\nDekodierung" as DEC #FFE0B2 KV --&gt; CSA : Précision locale KV --&gt; HCA : Vision globale CSA --&gt; FUSION HCA --&gt; FUSION FUSION --&gt; DEC @enduml</pre> </div> </div> <div class="paragraph"> <p>Zwei Kompressionsstufen, zwei Aufmerksamkeitsgranularitäten:</p> </div> <div class="ulist"> <ul> <li> <p><strong>CSA</strong>: komprimiert den KV-Cache alle`m`Tokens, dann wendet es eine spärliche Aufmerksamkeit an (DeepSeek Sparse Attention) — nur die top‑k der komprimierten Eingaben werden konsultiert. Präzise, lokal, effizient. - <strong>HCA</strong>extreme Kompression (Faktor`m'`viel größer als`m`), aber achte dicht auf den komprimierten Rückstand — behalte die globalen Verbindungen ohne quadratische Explosion bei.</p> </li> </ul> </div> <div class="paragraph"> <p>Ergebnis: bei 1M Token verbraucht DeepSeek-V4-Pro nur<strong>27% der Inferenz-FLOPs</strong> et <strong>10% der Größe des KV‑Caches</strong>Im Vergleich zu DeepSeek-V3.2. Das vorherige Modell.</p> </div> <div class="paragraph"> <p>Und vor allem gibt der technische Bericht (Abbildung 9) an: <em>"Retrieval performance remains highly stable within a 128K context window."</em></p> </div> </div> <div class="sect2"> <h3 id="_sessions_1_8_erleichterung">Sessions 1-8: Erleichterung</h3> <div class="paragraph"> <p>Ich habe acht Sitzungen mit DeepSeek-V4-Pro auf`codebase-gradle`. Acht Sitzungen ohne eine einzige Halluzination, ohne eine einzige erfundene Klasse, ohne eine einzige Namensverwechslung.</p> </div> <div class="paragraph"> <p>Sitzung 1: Implementierung von`CodebaseYmlConfig` et <code>CodebaseYmlAnonymizer</code>. 350 Zeilen Kotlin, Inline-Tests, alles kompiliert. Sitzung 4 : Hinzufügen des`SnapshotManager`mit Baumansicht, Dateisammlung, AsciiDoc-Rendering pro Datei. 279 Zeilen, kein Fehler. Sitzung 7 : Debug des`renderFileSection()`der vier verschiedenen Arten von Anonymisierern ohne Mehrdeutigkeit bei der Auflösung verwalten musste. Gelöst in drei Nachrichten.</p> </div> <div class="paragraph"> <p>Die Latenz ist höher als bei Kimi — etwa 10-12 Sekunden pro Antwort im Thinking-Modus. Aber die Korrekturquote ist praktisch null. Ich verbringe meine Zeit nicht damit, die Fehler des Agents zu korrigieren. Ich code <strong>mit</strong> ihm.</p> </div> </div> <div class="sect2"> <h3 id="_der_entscheidende_test_refactoring_bei_100k_tokens">Der entscheidende Test: refactoring bei 100K tokens</h3> <div class="paragraph"> <p>In Session 8 übersteigt der kumulierte Kontext 100K Token. Ich fordere ein schweres Refactoring: extrahe die vier Inline-Verifizierungsaufgaben des`build.gradle.kts`zu JUnit5-Testdateien in`buildSrc/src/test/`python import sys sys.stdout.write(sys.stdin.read())</p> </div> <div class="paragraph"> <p>Der Agent schlägt einen Plan in drei Phasen vor.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Testklassen erstellen mit Migration der vorhandenen Fälle</p> </li> <li> <p>Füge die Abhängigkeiten JUnit5 und Kotest ein`buildSrc/build.gradle.kts`</p> </li> <li> <p>Entferne den Inline-Code von`build.gradle.kts`</p> </li> </ol> </div> <div class="paragraph"> <p>Der Plan ist korrekt. Die Ausführung ist sauber. Er identifiziert sogar einen Edge Case, den ich übersehen habe: die doppelten Jackson-Abhängigkeiten zwischen`buildscript {}` et `buildSrc/build.gradle.kts`die während der Migration vereinheitlicht werden müssen</p> </div> <div class="paragraph"> <p>100K Tokens Kontext, und der Agent erinnert sich daran, dass`CodebaseYmlAnonymizer.TOKEN_MASK`ist`"<strong>*</strong>"`, dass`GitConfig.resolvedToken()<code>ist eine Erweiterungsfunktion definiert in`readme.kt</code>, und dass`SnapshotManager.PRUNED_DIRS`schließt aus`build`, <code>.gradle</code> et <code>.git</code>.</p> </div> <div class="paragraph"> <p>Das ist es, der Unterschied.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_face_à_face_vergleichende_metriken">Face-à-Face : Vergleichende Metriken</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">Kriterium</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">Kontext 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">Aufmerksamkeitsmechanismus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">MLA rein</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">Hybrid CSA + HCA</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gesamtparameter</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,6 T</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Aktivierte Einstellungen</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">nicht veröffentlicht</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">Beobachteter Degradationsschwellenwert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Empty)</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">Verhalten darüber hinaus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Massive Halluzinationen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Oberflächenverwirrungen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Langsame fortschreitende Verschlechterung</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Stabilität NIAH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">nicht veröffentlicht</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">stabil bis zu 128K (Abbildung 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">nicht veröffentlicht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">nicht veröffentlicht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Besser als Gemini 3.1 Pro</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Abgehaltene Sitzungen vor dem Verlassen</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 (und fortsetzt)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Korrekturzeit / Codezeit</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">&lt;5%</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Durchschnittliche Latenz (Denkmodus)</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">Konfidenzkoeffizient*</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>*Vertrauenskoeffizient = subjektive Maßnahme meiner Fähigkeit, den Code des Agents und den Commit ohne Zeilen‑Durchsicht zu übernehmen.</em></p> </div> <div id="diag-radar" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 16) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Vergleichsradar — 3 LLMs in der assistierten Software-Entwicklung legend right |= Couleur |= Modèle | | &lt;#FF5252&gt; | Kimi K2.6 | | &lt;#FFC107&gt; | GLM-5.1 | | &lt;#4CAF50&gt; | DeepSeek-V4-Pro | endlegend rectangle " " as space #FFFFFF rectangle "Kohärenz 80K+ tokens" as coh #F5F5F5 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Vergleichsradar — 3 LLMs in der assistierten Software-Entwicklung legend right |= Couleur |= Modèle | | &lt;#FF5252&gt; | Kimi K2.6 | | &lt;#FFC107&gt; | GLM-5.1 | | &lt;#4CAF50&gt; | DeepSeek-V4-Pro | endlegend rectangle " " as space #FFFFFF rectangle "Kohärenz 80K+ tokens" as coh #F5F5F5 rectangle "Qualität Code" as qual #F5F5F5 rectangle "architektonisches Denken" as arch #F5F5F5 rectangle "Widerstand Halluzinationen" as hall #F5F5F5 rectangle "Geschwindigkeit\n(dev Erfahrung)" as speed #F5F5F5 rectangle "Kenntnis Gradle/Kotlin" as kg #F5F5F5 rectangle "Rate Korrektur" as corr #F5F5F5 coh --&gt; qual qual --&gt; arch arch --&gt; hall hall --&gt; speed speed --&gt; kg kg --&gt; corr note top of coh Kimi ████░░░░░░ 4/10 GLM ██████░░░░ 6/10 DeepSeek █████████░ 9/10 end note note top of qual Kimi ███████░░░ 7/10 (sous 60K) GLM ████████░░ 8/10 DeepSeek █████████░ 9/10 end note note top of arch Kimi █████░░░░░ 5/10 GLM ███████░░░ 7/10 DeepSeek █████████░ 9/10 end note note top of hall Kimi ██████░░░░ 6/10 → ██░░░░░░░░ 2/10 (&gt; 60K) GLM ███████░░░ 7/10 DeepSeek █████████░ 9/10 end note note top of speed Kimi █████████░ 9/10 GLM ██████░░░░ 6/10 DeepSeek █████░░░░░ 5/10 end note note top of kg Kimi ███████░░░ 7/10 GLM ███████░░░ 7/10 DeepSeek █████████░ 9/10 end note note top of corr Kimi ██░░░░░░░░ 2/10 (beaucoup de corrections) GLM █████░░░░░ 5/10 DeepSeek ██████████ 10/10 (presque rien à corriger) end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_deepseek_v4_pro_in_der_softwareentwicklung_gewinnt">Warum DeepSeek-V4-Pro in der Softwareentwicklung gewinnt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Überlegenheit von DeepSeek-V4-Pro ist nicht auf einen einzigen Faktor zurückzuführen — es ist eine Konvergenz :</p> </div> <div class="sect2"> <h3 id="_1_die_csahca_architektur_ist_für_den_code_zugeschnitten">1. Die CSA+HCA-Architektur ist für den Code zugeschnitten.</h3> <div class="paragraph"> <p>Die gestützte Softwareentwicklung ist ein Anwendungsfall <strong>extremer</strong> für die Langkontext-Aufmerksamkeit. Sie benötigen: - Lokale Präzision (von was erbt diese Klasse? Wo ist diese Methode definiert?) →<strong>CSA</strong> - Globale Vision (Warum existiert dieses Modul? Wie interagieren die vier Anonymisierer?) →<strong>HCA</strong></p> </div> <div class="paragraph"> <p>Kimi mit MLA allein verwaltet die lokale Präzision, verliert jedoch den globalen Überblick über 60K. GLM mit DSA verbessert den globalen Überblick, bleibt jedoch einstufig. DeepSeek kombiniert beides explizit.</p> </div> </div> <div class="sect2"> <h3 id="_2_der_kontext_eager_ist_seine_komfortzone">2. Der Kontext EAGER ist seine Komfortzone</h3> <div class="paragraph"> <p>Mein Governance-System lädt beim Start ~30K Tokens an Regeln und Backlog. Mit einem stabilen Fenster von bis zu ~128K Tokens verfügt DeepSeek über ~100K Tokens Puffer für die Austausche der Sitzung. Das ist 3‑bis‑4‑mal mehr als das, was Kimi ohne Leistungsverlust verarbeiten kann.</p> </div> <div class="paragraph"> <p><em><em>_ Die 128‑K‑Fenster mit perfekter Stabilität entsprechen genau meinen Anforderungen: 30 K EAGER + 70 K Austausch = eine produktive Sitzung mit 20‑30 Nachrichten, ohne jemals den grünen Bereich zu verlassen. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_3_das_qualitäts_latenz_verhältnis_ist_optimal_für_den_flow">3. Das Qualitäts-/Latenz-Verhältnis ist optimal für den Flow.</h3> <div class="paragraph"> <p>Ja, DeepSeek-V4-Pro ist langsamer als Kimi (11s vs 8s). Aber die *Gesamt*zeit einer Aufgabe ist viel geringer, weil ich nicht 20 Minuten damit verbringe, die Halluzinationen des Agents zu korrigieren.</p> </div> <div class="paragraph"> <p>Der Entwickler misst nicht die Latenz einer Antwort. Er misst die Zeit zwischen "je pose la question" und "le code est dans mon repo et il fonctionne". Nach dieser Metrik ist DeepSeek-V4-Pro der schnellste der drei.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gelernte_lektionen_wie_man_sein_llm_für_vibe_coding_auswählt">Gelernte Lektionen: Wie man sein LLM für Vibe Coding auswählt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Neben der punktuellen Platzierung hat mir diese Erfahrung beigebracht, ein LLM für assistierte Softwareentwicklung anhand von Kriterien zu bewerten, die in keinem Benchmark aufgeführt sind:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Betrachte die Architektur, nicht die angekündigte Kontextgröße</strong>— Ein Modell, das ein Kontextfenster von 256 K ankündigt, aber nur eine MLA hat, wird wie Kimi enden: theoretisch fähig, praktisch über 60 K nicht nutzbar.</p> </li> <li> <p><strong>Teste auf deinem Kontext, nicht auf einem generischen Benchmark</strong>— Mein initialer Prompt mit 30K Tokens AsciiDoc mit absoluten Regeln und Backlog hat nichts mit den Fragen von HLE oder AIME zu tun.</p> </li> <li> <p><strong>Die Latenz ist nicht der Feind, solange die Qualität mithält.</strong>Ein langsames Modell, das richtigen Code produziert, ist schneller als ein schnelles Modell, das falschen Code produziert.</p> </li> <li> <p><strong>Achte auf Modelle ohne öffentlichen technischen Bericht</strong>— Wenn das Team seine Aufmerksamkeitsarchitektur nicht dokumentiert, fehlt ihm das Vertrauen darin, dass sie im langen Kontext besteht.</p> </li> </ol> </div> <div id="diag-decision-tree" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-12edd242e1c017b384b0de7fb04c46d2.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="_und_was_ist_mit_dem_governance_agent_in_allem">Und was ist mit dem Governance-Agent in allem?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Erfahrung bestätigt einen Punkt, den ich seit meinem Artikel über die Governance Eager/Lazy :<strong>Die Qualität des LLMs und die Qualität der Governance sind multiplikativ, nicht additiv.</strong>.</p> </div> <div class="paragraph"> <p>Mit Kimi K2.6 war meine Governance makellos — aber das Modell verdünnte die Information. Ergebnis: perfekte Governance × Halluzination = null.</p> </div> <div class="paragraph"> <p>Mit DeepSeek-V4-Pro bildet die EAGER-Governance (30K-Token-Regeln) + LAZY (Sitzungsarchive, technische Referenzen) + Hot/Warm/Cold (rotierende Backups) ein Ökosystem, in dem jede Schicht die andere verstärkt. Der Agent hat die Regeln vor Augen (EAGER), kann den Verlauf einsehen (LAZY) und das Kontext wird niemals gesättigt (rotierende Backups).</p> </div> <div class="paragraph"> <p><em><em>_ Ein gutes LLM ohne Governance ist ein Motor eines Ferraris ohne Lenkrad. Eine gute Governance ohne ein gutes LLM ist ein Lenkrad ohne Motor. DeepSeek-V4-Pro + mein Governance-Agent = das erste Mal, dass ich das Gefühl habe zu fahren. </em>_</em></p> </div> <div class="paragraph"> <p>Der rotierende Backup‑Mechanismus (Rotation alle 10 Sitzungen oder &gt;500 Zeilen EAGER) ergibt mit einem Modell, das 128 K Kontext hält, vollen Sinn: Das gleitende Fenster von 10 aktiven Sitzungen hält den Kontext frisch, ohne je die Verschlechterungszone zu überschreiten.</p> </div> </div> </div> <div class="sect1"> <h2 id="_technische_quellen">Technische Quellen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich habe meine empirische Erfahrung mit den offiziellen technischen Berichten verglichen, um meine Beobachtungen zu bestätigen :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>DeepSeek-V4 Technical Report</strong> — PDF heruntergeladen vonhttps://huggingface.co/deepseek-ai/DeepSeek-V4-Flash[HuggingFace]. Abbildung 9 : "Die Retrievalleistung bleibt innerhalb eines 128K-Kontextfensters äußerst stabil. Während eine Leistungsabnahme jenseits der 128K-Marke sichtbar wird, bleiben die Retrievalfähigkeiten des Modells bei 1M Tokens bemerkenswert stark." Dokumentierte Architektur CSA+HCA Abschnitt 2.3.</p> </li> <li> <p><strong>GLM-5 Technischer Bericht</strong> —https://arxiv.org/abs/2602.15763[arXiv:2602.15763]. DSA eingeführt mittels fortgesetztem Pre‑training, \"lossless by construction\". Maximaler Kontext: 202,752 Tokens. Tabellen 3/5/6 dokumentieren die Long‑Context‑Leistungen im Vergleich zu Alternativen (SWA, Gated DeltaNet, SimpleGDN).</p> </li> <li> <p><strong>Kimi K2.6 Modellkarte</strong> —https://huggingface.co/moonshotai/Kimi-K2.6[HuggingFace]. MLA, 256K maximaler Kontext. Discard‑all‑Strategie über der Schwelle bei agentischen Aufgaben (bestätigt implizit die praktische Grenze von MLA im Langkontext).</p> </li> <li> <p><strong>Kimi K2 Technischer Bericht</strong> —https://arxiv.org/abs/2507.20534[arXiv:2507.20534]. Architecture MoE, MuonClip-Optimizer, agentische Leistungen (HLE, BrowseComp, Terminal-Bench).</p> </li> </ol> </div> <div class="paragraph"> <p>Der aussagekräftigste Punkt: In ihrer eigenen Bewertung wendet Moonshot eine Strategie von <strong>discard-all</strong> (Löschen des alten Kontexts) an, sobald das Kontextfenster überschritten wird. Dies bestätigt genau das, was ich beobachtet habe: MLA allein kann die Kohärenz über das gesamte 256K-Fenster nicht aufrechterhalten. Die Architektur kann nicht mithalten.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_die_wahl_des_handwerkers">Conclusion : Die Wahl des Handwerkers</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach drei Wochen und dreizehn echten Entwicklungssitzungen lautet das Urteil eindeutig:</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">Exzellent unter 60K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Solid bis zu 120K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Herrscht überall</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nicht mehr verwendbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Oberflächenverwirrungen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stabil bis zu 128K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2 Sitzungen, aufgegeben</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 Sitzungen, aufgegeben</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8 Sitzungen, angenommen</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>DeepSeek-V4-Pro ist mein Standard-LLM für alle Sitzungen der softwaregestützten Entwicklung mit Opencode geworden. Nicht weil es das neueste ist. Nicht weil es die besten akademischen Benchmarks hat. Sondern weil im echten Leben eines Entwicklers, der Gradle-Kotlin-DSL-Plugins mit einem Agenten-Kontext von 30K Tokens pusht, es das Einzige ist, das mich nicht im Stich lässt, wenn der Kontext länger wird.</p> </div> <div class="paragraph"> <p>Der CSA+HCA ist ein architektonischer <strong>game changer</strong>. Die Zweistufekompression + Sparsifizierung ist kein Implementierungsdetail — sie ist es, was den Unterschied zwischen einem Code-Assistenten und einem zuverlässigen Teammitglied ausmacht.</p> </div> <hr> <div class="paragraph"> <p><strong>Dieser Artikel ist das Ergebnis von 13 realen Entwicklungssitzungen am Projekt`codebase-gradle`, dokumentiert in`.agents/sessions/`nach meiner Governance-Methodologie für Eager/Lazy/Hot/Warm/Cold-Agenten. Die genannten technischen Quellen sind öffentlich auf HuggingFace und arXiv zugänglich.</strong></p> </div> </div> </div> Audit des Kontext-Agenten: Wenn Ihre eigene Verwaltung das Problem wird — und wie Sie es ohne Verlust beheben können 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="#_die_szene_sitzung_051_etwas_stimmt_nicht">Die Szene: Sitzung 051, etwas stimmt nicht</a></li> <li><a href="#_der_audit_die_627_zeilen_auseinanderdröseln">Der Audit : die 627 Zeilen auseinanderdröseln</a></li> <li><a href="#_die_angst_das_ingenieurwesen_zu_verlieren">Die Angst, das Ingenieurwesen zu verlieren</a></li> <li><a href="#_die_lösung_encyclopädischer_split">Die Lösung: encyclopädischer Split</a></li> <li><a href="#_der_inhalt_der_datei_essentials">Der Inhalt der Datei ESSENTIALS</a></li> <li><a href="#_das_ergebnis_50_eager_kontext">Das Ergebnis: -50% EAGER-Kontext</a></li> <li><a href="#_warum_heißt_das_verzeichnis_encyclopedies">Warum heißt das Verzeichnis `encyclopedies/</a></li> <li><a href="#_die_logische_fortsetzung_der_serie">Die logische Fortsetzung der Serie</a></li> <li><a href="#_was_ich_anders_gemacht_hätte">Was ich anders gemacht hätte</a></li> <li><a href="#_der_leitfaden_zum_auditieren_ihres_eigenen_kontextes">Der Leitfaden zum auditieren Ihres eigenen Kontextes</a></li> <li><a href="#_eine_lebendige_governance">Eine lebendige Governance</a></li> <li><a href="#_links">Links</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesedauer : 14 minutes</div> <p>Sie haben Wochen damit verbracht, eine einwandfreie Agenten-Governance aufzubauen. Eager/Lazy, Sitzungsbeendigungsprozess, rotierende Backups. Das System läuft. Doch eines Tages wird der Agent langsam. Die Antworten sind verwässert. Sie messen: 1414 automatisch geladene Zeilen. Und das Schlimmste ist, dass der Schuldige nicht der Code, nicht das Backlog und nicht die Sitzungsarchive ist. Der Schuldige ist die Datei, die Ihre Methode dokumentiert.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tick</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_sitzung_051_etwas_stimmt_nicht">Die Szene: Sitzung 051, etwas stimmt nicht</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p>April 2026, 16:00. Ich bin mitten in einer Sitzung über`magic-stick`, mein Projekt zum Build des Linux-Live-ISO. Der Opencode-Agent hat meine Eager-Dateien automatisch geladen, wie üblich —<code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, <code>.agents/INDEX.adoc</code>. Alles ist normal.</p> </li> </ol> </div> <div class="paragraph"> <p>Aber die Antworten sind schwach. Der Agent braucht zwei Sekunden länger zum Nachdenken. Er vergisst ein Detail, das er drei Nachrichten zuvor noch vor Augen hatte. Das ist kein Absturz, kein Fehler — es ist eine langsame Verschlechterung, die Art, die man nicht sofort bemerkt.</p> </div> <div class="paragraph"> <p>Ich hatte das schon bei Session 048 erlebt, als ich herausfand, dass die Governance-Dateien insgesamt 5200 Zeilen wogen. Ich hatte dann das Hot/Warm/Cold-Mechanismus mit seinem 10‑Sessions‑Schiebefenster, seinen identischen kalten Wellen und seinem Sensor mit zwei Auslösern konzipiert. Das Problem war gelöst. In der Theorie.</p> </div> <div class="paragraph"> <p>Aber jetzt sind wir bei Sitzung 051. Die Backup-Rotation hat stattgefunden — die EAGER-Dateien sind von 2087 auf 500 Zeilen gesunken. Dennoch bleibt der Kontext schwer. Irgendwas entgeht mir.</p> </div> <div class="paragraph"> <p>Ich öffne ein Terminal und tippe:</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 Zeilen. Die Backup-Rotation hat in INDEX, SESSIONS_HISTORY und COMPLETED_TASKS gut aufgeräumt — sie sind sauber. Aber es gibt einen Elefanten im Raum, den ich nicht gesehen habe:<strong>627 Zeilen</strong>in einer einzigen Datei.<code>AGENT_MODUS_OPERANDI.adoc</code>.</p> </div> <div class="paragraph"> <p>Dies ist die Datei, die ich in Session 1 geschrieben habe, um die Eager/Lazy-Strategie zu dokumentieren. Es ist das Handbuch der Methode. Und es ist allein zu 44 % des EAGER-Kontextes geworden.</p> </div> <div id="diag-before-audit" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE title Kontext EAGER — 1414 Zeilen rectangle "AGENT_MODUS_OPERANDI **627 Zeilen (44%)**" as MOD #FFCDD2 rectangle "AGENT.adoc 287 Zeilen (20%)" as AG #BBDEFB ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE title Kontext EAGER — 1414 Zeilen rectangle "AGENT_MODUS_OPERANDI **627 Zeilen (44%)**" as MOD #FFCDD2 rectangle "AGENT.adoc 287 Zeilen (20%)" as AG #BBDEFB rectangle "INDEX.adoc 218 Zeilen (15%)" as IDX #C8E6C9 rectangle "COMPLETED_TASKS 213 Zeilen (15%)" as ARC #FFF9C4 rectangle "PROMPT_REPRISE 51 Zeilen (4%)" as PRO #E1BEE7 rectangle "SESSIONS_HISTORY 18 Zeilen (1%)" as HIS #FFE0B2 note bottom of MOD Le fichier qui documente la méthode est devenu le plus gros poste de dépense end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Die Ironie ist total. Die Datei, die dazu gedacht war, Kontext zu <strong>einsparen</strong>, ist zum Haupt*verbraucher* von Kontext geworden. Es ist, als würde das Handbuch deines Autos schwerer wiegen als der Motor.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_audit_die_627_zeilen_auseinanderdröseln">Der Audit : die 627 Zeilen auseinanderdröseln</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich beschließe, eine Abschnitt-für-Abschnitt-Prüfung durchzuführen. Nicht zum Löschen — sondern um zu <strong>verstehen</strong>, was es wert ist, in EAGER zu sein, und was anderswo ohne Wissensverlust existieren könnte.</p> </div> <div class="paragraph"> <p>Hier ist die genaue Struktur von`AGENT_MODUS_OPERANDI.adoc`und was ich dort finde:</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">Abschnitt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zeilen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Inhalt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bereits vorhanden in&#8230;&#8203;</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P1 — Übersicht</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">Problem gelöst, Grundprinzipien, Analogie Armaturenbrett vs Handbuch</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Empty output)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P2 — Struktur der Dateien</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">Baumstruktur, Ladepolitik, wann was laden</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 — Absolute Regeln</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 verboten, zerstörerische Befehle verboten, Geheimnisse verboten</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 — Lebenszyklus der Sitzung</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 Öffnung, Arbeitsregeln, 6 Schritte Sitzungsende, Checkliste</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code>§Ende Sitzung +<code>INDEX.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P5 — Metriken und Schwellenwerte</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">ideale Session (15-30 Min, 1-3 Dateien), Warnzeichen</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 — Sitzungstypen</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">Erkennungstabelle, Vorschlagsformat, Ausnahmen</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 — Kontinuierliche Verbesserung</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">Tracking-Metriken, wöchentliche Überprüfung</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 — Start-Checkliste</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">Neues Bootstrap-Projekt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[Nothing to output - the response is empty]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P9 — Referenzen</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">Referenzdateien, externe Ressourcen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code>(Dateien EAGER/LAZY)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Anhänge 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">Glossar, Versionshistorie</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Das Urteil ist unanfechtbar:</p> </div> <div class="ulist"> <ul> <li> <p><strong>vollständige Duplikate</strong>(167 Zeilen) : P3, P4, P9 — alles ist bereits darin`AGENT.adoc` ou <code>INDEX.adoc</code>, oft Wort für Wort</p> </li> <li> <p><strong>Nie in der Praxis konsultiert</strong>(215 Zeilen) : P5, P6, P7, P8, Anhänge — von der Metagovernance, die niemals in einer Sitzung zum Einsatz kam.</p> </li> <li> <p><strong>Einzigartiges Wissen</strong>(161 Zeilen) : P1 und P2 — das Vokabular LAZY/EAGER, die Analogie, die Ladepolitik</p> </li> </ul> </div> <div class="paragraph"> <p>Auf 627 Zeilen,<strong>382 sind Rauschen</strong>. Und diese 382 Zeilen werden <strong>am Anfang jeder Sitzung</strong> geladen, vom Agenten verbraucht, wodurch seine Aufmerksamkeit verdünnt wird, bevor ich überhaupt Hallo sage.</p> </div> <div id="diag-audit-result" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Audit von AGENT_MODUS_OPERANDI.adoc — 627 Zeilen left to right direction rectangle "�🟡 **Duplikate**\n167 Zeilen (27%)" as DUP #FFF9C4 { card "P3 — Absolute Regeln ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Audit von AGENT_MODUS_OPERANDI.adoc — 627 Zeilen left to right direction rectangle "�🟡 **Duplikate**\n167 Zeilen (27%)" as DUP #FFF9C4 { card "P3 — Absolute Regeln (34 Zeilen)" as D1 card "P4 — Lebenszyklus (133 Zeilen)" as D2 card "P9 — Referenzen (30 Zeilen)" as D3 } rectangle "�🔴 **Nie konsultiert** 215 Zeilen (34%)" as JAM #FFCDD2 { card "P5 — Metriken (49 Zeilen)" as J1 card "P6 — Erkennung (72 Zeilen)" as J2 card "P7 — Verbesserung (39 Zeilen)" as J3 card "P8 — Bootstrap (13 Zeilen)" as J4 card "Anhänge — Glossar (42 Zeilen)" as J5 } rectangle "�🟢 **Einzigartiges Wissen** 161 Zeilen (26%)" as UNI #C8E6C9 { card "P1 — Überblick\n(64 Zeilen)" as U1 card "P2 — Dateistruktur (97 Zeilen)" as U2 } note bottom of UNI C'est ÇA qu'il faut garder en EAGER. Le reste → cold storage. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dieses Diagramm ist der Schlüssel zu allem. Die Duplikate (gelb) sind reiner Rauschen — der Agent liest sie zweimal, in zwei verschiedenen Dateien. Der nie konsultierte (rot) ist tote Dokumentation — sorgfältig geschrieben, nie verwendet. Nur das Grüne enthält Wissen, das der Agent sonst nirgendwo finden kann.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_angst_das_ingenieurwesen_zu_verlieren">Die Angst, das Ingenieurwesen zu verlieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>In diesem Stadium habe ich den Beweis vor Augen: Ich muss reduzieren.<code>AGENT_MODUS_OPERANDI.adoc</code>. Aber ich zögere.</p> </div> <div class="paragraph"> <p>Diese Datei habe ich von Hand geschrieben. Jeder Abschnitt ist das Ergebnis einer in einer echten Sitzung gelernten Lektion. Der Teil P3 entstand aus einem`rm -rf`zufällig auf`bakery-plugin`Was mir echte Firebase-Token gekostet hat. Der Teil P4 ist das Ergebnis von fünfzehn Sitzungen, in denen ich vergaß, zu archivieren, und den Faden verlor. Der Prozess in sechs Schritten stammt nicht aus einem Buch — er stammt aus dem Schmerz.</p> </div> <div class="paragraph"> <p>Das Löschen dieser Abschnitte wäre, die Geschichte meiner eigenen Ingenieurkunst wegzuwerfen. Die Lektionen, die sie hervorgebracht haben, die Sitzungen, in denen ich sie entdeckt habe, die Fehler, die ich nie wieder machen möchte. Das ist kein Text — es ist kristallisierte Erfahrung.</p> </div> <div class="paragraph"> <p>Das ist der Ort, an dem ich das Prinzip formuliere, das die Lösung leiten wird:</p> </div> <div class="paragraph"> <p><em><em>_ <strong>Nie löschen. Immer versetzen.</strong>Das Wissen muss nicht aus dem Projekt verschwinden. Sie muss einfach nicht automatisch geladen werden, wenn sie nicht notwendig ist. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_encyclopädischer_split">Die Lösung: encyclopädischer Split</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das von mir vorgeschlagene Modell ist einfach und orientiert sich an der Art und Weise, wie Wikipedia gewachsen ist: Wenn ein Artikel zu lang wird, schneidet man ihn nicht ab — man erstellt einen detaillierten Artikel und behält eine Zusammenfassung im Hauptartikel bei.</p> </div> <div class="paragraph"> <p>für`AGENT_MODUS_OPERANDI.adoc`, das ergibt :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Extrahieren</strong>die 161 Zeilen des eindeutigen Wissens (P1 + P2) in einer neuen Datei`LAZY_EAGER_ESSENTIALS.adoc`— kompakt auf ~50 Zeilen, streng EAGER</p> </li> <li> <p><strong>Umbenennen</strong> <code>AGENT_MODUS_OPERANDI.adoc</code> en <code>.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc</code>— die Originaldatei mit 627 Zeilen, unverändert <strong>intakt</strong>, im Cold Storage</p> </li> <li> <p><strong>Nie laden</strong>Die Enzyklopädiedatei automatisch — sie ist da für den Menschen, für die zukünftige Destillation, für den Agenten, den wir in sechs Monaten mit einem besseren Modell aufrufen werden</p> </li> </ol> </div> <div id="diag-split-solution" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Split Enzyklopädisch — AGENT_MODUS_OPERANDI left to right direction rectangle "**AGENT_MODUS_OPERANDI.adoc** ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Split Enzyklopädisch — AGENT_MODUS_OPERANDI left to right direction rectangle "**AGENT_MODUS_OPERANDI.adoc** 627 Zeilen (vor Split)" as BEFORE #FFCDD2 { } rectangle " " as ARROW1 rectangle " " as ARROW2 rectangle "**LAZY_EAGER_ESSENTIALS.adoc** **~50 Zeilen — EAGER**" as ESS #C8E6C9 { card "P1 kondensiert\n(15 Zeilen)" as E1 card "P2 kondensiert (35 Zeilen)" as E2 } rectangle "**.agents/encyclopedies/** **LAZY_EAGER_ENCYCLOPEDIE.adoc** 627 Zeilen — COLD" as ENC #BBDEFB { card "P1 zu Anhängen (vollständig, intakt)" as C1 } BEFORE -[#4CAF50]-&gt; ESS : "Extraktion des kritischen Wissens" BEFORE -[#2196F3]-&gt; ENC : "Vollständige Erhaltung des Ingenieurwesens" note bottom of ESS Chargé automatiquement en début de session → L'agent comprend le vocabulaire end note note bottom of ENC Jamais chargé automatiquement Consultable par l'humain Matériau brut pour distillation future end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Der Name`encyclopedies/`Es ist nicht belanglos. Eine Enzyklopädie ist kein Archivdossier — sie ist eine organisierte Wissenssammlung, die nachschlagbar, aber nicht tragbar ist. Man liest die Enzyklopädie Universalis nicht in der U-Bahn. Man bewahrt sie in der Bibliothek auf und geht dahin, wenn man eine konkrete Frage hat.</p> </div> <div class="paragraph"> <p>Das ist genau die Aufgabe dieses Ordners: eine kalte Referenzbibliothek, strukturiert und umfassend — die der Agent nicht automatisch berührt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_inhalt_der_datei_essentials">Der Inhalt der Datei ESSENTIALS</h2> <div class="sectionbody"> <div class="paragraph"> <p>So sieht die neue Datei konkret aus.<code>LAZY_EAGER_ESSENTIALS.adoc</code>, extrahiert und komprimiert aus P1 und 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 | &lt;= 100 lignes, &lt;= 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>Fünfzig Zeilen. Das ist alles, was der Agent braucht, um die Mechanik zu verstehen. Alles andere — die Lernhistorie, die detaillierten Analogien, die Schritt‑für‑Schritt‑Verfahren, die Anhänge — lebt in der Enzyklopädie.</p> </div> <div class="paragraph"> <p>Und das Wichtigste :<strong>nichts wurde gelöscht</strong>. Die 627 Ingenieurzeilen sind immer noch da, in`.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc`. Sie stehen einfach nur in der Bibliothek, statt auf der Arbeitsplatte.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_ergebnis_50_eager_kontext">Das Ergebnis: -50% EAGER-Kontext</h2> <div class="sectionbody"> <div class="paragraph"> <p>Vor dem 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>Nach dem 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="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE title Kontext EAGER nach encyclopädischem Split — 837 Zeilen (-41%) rectangle "AGENT.adoc 287 Zeilen (34%)" as AG #BBDEFB ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE title Kontext EAGER nach encyclopädischem Split — 837 Zeilen (-41%) rectangle "AGENT.adoc 287 Zeilen (34%)" as AG #BBDEFB rectangle "INDEX.adoc\n218 Zeilen (26%)" as IDX #C8E6C9 rectangle "COMPLETED_TASKS\n213 Zeilen (25%)" as ARC #FFF9C4 rectangle "PROMPT_REPRISE 51 Zeilen (6%)" as PRO #E1BEE7 rectangle "ESSENTIALS 50 Zeilen (6%)" as ESS #A5D6A7 rectangle "SESSIONS_HISTORY\n18 Zeilen (2%)" as HIS #FFE0B2 note bottom of ESS De 627 → 50 lignes 577 lignes d'ingénierie préservées en cold storage Rien de perdu. Tout de relocalisé. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Der größte Verbraucher (AGENT_MODUS_OPERANDI, 627 Zeilen) wurde durch eine Datei von 50 Zeilen ersetzt. Der Gewinn ist unmittelbar: 577 Zeilen Kontext wurden freigegeben. Der Agent atmet auf.</p> </div> <div class="paragraph"> <p>Und in`.agents/encyclopedies/`, die Originaldatei mit 627 Zeilen wartet. Unverändert. Mit allen ihren Abschnitten — einschließlich jener, die Duplikate sind, einschließlich jener, die nie benutzt wurden. Denn eines Tages wird ein besseres Modell oder ein menschlicher Datenwissenschaftler diese Winkel, diese angenommenen Redundanzen, diese gelernten Lehren vergleichen wollen. Und an diesem Tag werden die Rohdaten verfügbar sein.</p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_heißt_das_verzeichnis_encyclopedies">Warum heißt das Verzeichnis `encyclopedies/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Wahl des Namens ist nicht kosmetisch. Er kodiert die Philosophie des Mechanismus.</p> </div> <div class="paragraph"> <p>Ein <strong>Archiv</strong> (<code>archives/</code>) enthält historische Daten, die chronologisch organisiert sind — wie die monatlichen COMPLETED_TASKS. Ein <strong>backup</strong> (<code>backup/</code>) ist ein zeitgestempelter Snapshot—Sicherheitskopie eines vergangenen Zustands.</p> </div> <div class="paragraph"> <p>Eine Enzyklopädie ist etwas anderes. Es ist eine Sammlung von thematischem Wissen, nach Thema strukturiert, umfassend aber nicht linear. Man liest keine Enzyklopädie vom Anfang bis zum Ende. Man taucht darin ein, um eine spezifische Frage zu beantworten.</p> </div> <div class="paragraph"> <p>Das ist genau der Vertrag dieses Falls:</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">Akte</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rolle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zugang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Granularität</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">Historische Daten (abgeschlossene Aufgaben pro Monat)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LAZY, strukturiert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">chronologisch</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">Kalte Schnappschüsse (Wellen von 10 Sitzungen)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, vollständige Kopie</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Chronologisch</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">Umfassende thematische Kenntnis (Methodik, Muster)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, nie automatisch</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Thema</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Diese Unterscheidung vermeidet das Durcheinander. Jede Datei weiß, wo sie hingehört, abhängig von <strong>ihrem Inhalt</strong>, nicht davon, <strong>wann sie erstellt wurde</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_logische_fortsetzung_der_serie">Die logische Fortsetzung der Serie</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie die ersten beiden Artikel gelesen haben, so passen die drei Teile zusammen:</p> </div> <div id="diag-trilogie" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Trilogie der Agenten-Governance left to right direction package "�📖 **Artikel 0108** ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Trilogie der Agenten-Governance left to right direction package "�📖 **Artikel 0108** Eager/Lazy-Strategie" as A1 #E8F5E9 { card "Speicheragent\nzwischen Sitzungen" as M1 card "EAGER-Dateien\n(automatisch geladen)" as M2 card "Lazy-Dateien\n(auf Anfrage)" as M3 card "Verfahren 6 Schritte" as M4 } package "�🧊 **Article 0110** Mechanismus Hot/Warm/Cold" as A2 #FFF9C4 { card "Alterung des Kontexts" as V1 card "Schiebefenster 10 Sitzungen" as V2 card "Kalte Welle identisch" as V3 card "Sensor mit zwei Auslösern" as V4 } package "�🔍 **Article 0111**\nAudit + Enzyklopädische Lösung" as A3 #BBDEFB { card "Audit der Dateien\nEAGER" as E1 card "Identifikation\nder Verschwendung" as E2 card "Split ESSENTIALS/Enzyklopädie" as E3 card "Erhaltung der Ingenieurwissenschaften" as E4 } A1 --&gt; A2 : "Der Speicher wächst → es wird ein Mechanismus des Alterns benötigt" A2 --&gt; A3 : "Das Altern reicht nicht aus → es muss überprüft werden, was es verdient, im EAGER zu sein" note bottom of A3 ✅ Les trois couches sont en place sur 6 projets actifs end note @enduml</pre> </div> </div> <div class="ulist"> <ul> <li> <p><strong>0108</strong>Antwort: « Wie kann dem Agenten zwischen zwei Sitzungen ein Gedächtnis gegeben werden?</p> </li> <li> <p><strong>0110</strong>antwortet auf: « Wie verhindert man, dass dieses Gedächtnis den Agenten erstickt?</p> </li> <li> <p><strong>0111</strong>répondet auf: « Und wenn das Problem nicht die Größe der Archive ist, sondern das, was wir <strong>ausgewählt</strong> haben, um es in EAGER zu legen?</p> </li> </ul> </div> <div class="paragraph"> <p>Der erste Artikel hat die Struktur gebaut. Der zweite hat den Alterungsmechanismus hinzugefügt. Der dritte prüft den Inhalt – und entdeckt, dass die Methode selbst zum Problem geworden ist.</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_ich_anders_gemacht_hätte">Was ich anders gemacht hätte</h2> <div class="sectionbody"> <div class="paragraph"> <p>Im Nachhinein sehe ich den ursprünglichen Designfehler.`AGENT_MODUS_OPERANDI.adoc`wurde als ein einzelnes Dokument erstellt — ein Manifest. Das war der richtige Ansatz, um das Denken zu formalisieren. Aber sobald das Denken formalisiert war, hätte das Dokument sofort aufgeteilt werden sollen: das Wesentliche in EAGER, das Umfassende in cold.</p> </div> <div class="paragraph"> <p>Ich habe es nicht gemacht, weil ich stolz auf das Dokument war. 627 Zeilen reiner Ingenieurarbeit, handschriftlich geschrieben, jedes Abschnitt das Ergebnis einer Lektion aus einer Sitzung. Das war mein Werk. Und wie jeder Autor hatte ich Mühe, sie zu zerteilen.</p> </div> <div class="paragraph"> <p>Die Lektion:<strong>ein gutes Dokument muss nicht automatisch geladen werden</strong>. Die Qualität des Inhalts hat nichts mit ihrer Relevanz für den unmittelbaren Kontext des Agents zu tun.</p> </div> <div class="paragraph"> <p>Heute ist die Regel einfach: Jedes Dokument mit mehr als 100 Zeilen im EAGER-Kontext ist ein Verdächtiger. Es verdient eine Prüfung. Nicht eine Verurteilung — eine Prüfung. Und die Frage lautet niemals „Soll man es löschen?“ sondern „Soll man es in jeder Sitzung laden?“</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_leitfaden_zum_auditieren_ihres_eigenen_kontextes">Der Leitfaden zum auditieren Ihres eigenen Kontextes</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie die ersten beiden Artikel verfolgt und Ihre eigene Eager/Lazy-Governance eingerichtet haben, hier ist ein Fünf-Schritte-Audit-Verfahren:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Messen</strong>:`wc -l`auf allen Ihren EAGER-Dateien. Die Gesamtzahl sollte unter 1000 Zeilen liegen.</p> </li> <li> <p><strong>Identifiziere das Größte</strong>Die Datei, die mehr als 20 % des Gesamtgewichts ausmacht, ist der Hauptverdächtige.</p> </li> <li> <p><strong>Abschnitt für Abschnitt prüfen</strong>: für jeden Abschnitt frage dich: » Ist diese Information bereits irgendwo anders vorhanden? Hat der Agent sie bereits in einer anderen Datei gelesen? Wurde sie in den letzten 5 Sitzungen verwendet?</p> </li> <li> <p><strong>Klassifizierer</strong>: Duplikat, nie verwendet, einziges Wissen.</p> </li> <li> <p><strong>Aufteilen oder verlagern</strong>: was einzigartig und kritisch ist → ESSENTIALS komprimiert. Alles andere →<code>encyclopedies/</code>.</p> </li> </ol> </div> <div id="diag-audit-checklist" class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-44be6d593c8847bb80331dfb039851a6.svg" alt="Procédure d&#8217;audit en 5 étapes" width="444" height="741"> </div> </div> <div class="paragraph"> <p>Diese Prozedur dauert 15 Minuten. Bei einem Projekt mit 50 Sitzungen spart sie Hunderte von Tokens pro zukünftiger Sitzung ein. Der ROI ist sofort.</p> </div> </div> </div> <div class="sect1"> <h2 id="_eine_lebendige_governance">Eine lebendige Governance</h2> <div class="sectionbody"> <div class="paragraph"> <p>Was mir diese Reihe von drei Artikeln gelehrt hat, ist, dass die agente Governance kein fertiges Produkt ist. Es ist ein<strong>lebender Organismus</strong>. Sie wächst mit dem Projekt. Sie erkrankt an Wachstumskrankheiten. Sie benötigt regelmäßige Check-ups.</p> </div> <div class="paragraph"> <p>Die Sitzung 048 hat ergeben, dass die Archive anschwellen. Die Sitzung 051 hat ergeben, dass die Methodik selbst anschwillt. Die Sitzung 060 wird wahrscheinlich etwas anderes enthüllen. Das ist normal. Das ist gesund. Eine Governance, die sich niemals hinterfragt, ist eine tote Governance.</p> </div> <div class="paragraph"> <p>Die drei implementierten Mechanismen — Eager/Lazy, Hot/Warm/Cold, enzyklopädischer Split — bilden ein System der tiefen Verteidigung gegen die Kontextsättigung. Keiner ist allein ausreichend. Zusammen ergänzen sie sich:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Eifrig/Faul</strong>strukturiere die Informationen <strong>nach Verfügbarkeit</strong></p> </li> <li> <p><strong>Heiß/Warm/Kalt</strong>strukturier die Information <strong>nach Frische</strong></p> </li> <li> <p><strong>Enzyklopädischer Audit</strong>strukturiere die Information <strong>nach Dichte</strong></p> </li> </ul> </div> <div id="diag-defense-in-depth" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam nodeBackgroundColor #E3F2FD title Tiefenverteidigung gegen die Sättigung des Kontextes node "**Agent-Kontext** ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam nodeBackgroundColor #E3F2FD title Tiefenverteidigung gegen die Sättigung des Kontextes node "**Agent-Kontext** ~800 Zeilen gesund" as CTX #C8E6C9 node "Schicht 1 **EAGER / LAZY**" as C1 #BBDEFB node "Schicht 2 **HOT / WARM / COLD**" as C2 #BBDEFB node "Schicht 3\n**WICHTIGE / ENCYKLOPÄDIE**" as C3 #BBDEFB CTX --&gt; C1 : "Struktur nach\n**Verfügbarkeit**" CTX --&gt; C2 : "Struktur durch\n**Frische**" CTX --&gt; C3 : "Struktur nach\n**Dichte**" note bottom of C3 Les trois couches sont nécessaires. Aucune n'est suffisante seule. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Mit diesen drei Schichten, der Agentenkontext auf`magic-stick`est gesunken von 2087 Zeilen (vor jeder Optimierung) auf etwa 800 Zeilen – das entspricht einer Verringerung um den Faktor 2,6. Dabei ging kein einziger Dokumentationszeile verloren, kein einziger Sitzungsarchiv und keine gelernte Lektion.</p> </div> <div class="paragraph"> <p>Alles ist da. Nur besser aufgeräumt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_links">Links</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Artikel 0108 – Strategie Eager/Lazy:<a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Regieren eines KI-Agenten mit AsciiDoc</a></p> </li> <li> <p>Artikel 0110 — Mechanismus Hot/Warm/Cold :<a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Sliding Window und kalte Welle</a></p> </li> <li> <p>Meine Seite: <a href="https://cheroliv.com" class="bare">https://cheroliv.com</a></p> </li> <li> <p>Das Projekt`magic-stick`: <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>Wissen muss nicht verschwinden. Es muss einfach nicht geladen werden, wenn es nicht gebraucht wird.</p> </div> </div> </div> Sliding Window et Vague Froide : Wenn der Agent-Kontext explodiert und es muss archiviert werden, ohne etwas zu verlieren 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="_zusammenfassung">Zusammenfassung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach 48 Sitzungen an einem einzelnen Projekt und insgesamt 150+, begann das von mir sorgfältig konstruierte Eager/Lazy-Governance-System sich zu verstopfen. Die Agenten-Dateien, die leicht sein sollten, wogen insgesamt 5200 Zeilen. Der automatisch geladene Kontext wuchs schneller, als ich ihn kontrollieren konnte. Dieser Artikel beschreibt, wie ich ein Backup-Mechanismus konzipiert habe — zwischen sliding window und identischer kalter Welle — um einen aktiven, leichtgewichtigen Kontext beizubehalten, ohne je etwas zu verlieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_signal_5200_zeilen">Das Signal: 5200 Zeilen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich bin mitten in Sitzung 048 auf`magic-stick`, mein Projekt zum Erstellen einer Linux-Live-ISO. Opencode beobachtet mich. Wie immer hat er automatisch meine Eager-Dateien am Beginn der Sitzung geladen —<code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, `.agents/INDEX.adoc`Nichts Ungewöhnliches.</p> </div> <div class="paragraph"> <p>Aber etwas stimmt nicht. Die Antworten sind langsamer. Der Gedankengang ist mehr verwässert. Der Agent vergisst Details, die er vor zwei Nachrichten noch vor Augen hatte.</p> </div> <div class="paragraph"> <p>Ich öffne ein Terminal und tippe:</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 Zeilen für INDEX. 55 für SESSIONS_HISTORY.<strong>1756 für COMPLETED_TASKS_ARCHIVE</strong>.</p> </div> <div class="paragraph"> <p>Die Akte`sessions/`fügt noch etwa 3200 Zeilen hinzu. Gesamt :<strong>5200 Zeilen</strong>von Kontext, der sich lädt, auf die eine oder andere Weise, im temporären Gehirn des Agenten.</p> </div> <div class="paragraph"> <p>Die Eager/Lazy-Strategie, die ich im vorherigen Artikel theoretisiert hatte, funktioniert — aber sie hat einen Geburtsfehler, den ich nicht vorausgesehen hatte: sie hat nicht<strong>kein Alterungsmechanismus</strong>Jede Sitzung fügt eine Zeile zu INDEX hinzu, einen Absatz zu COMPLETED_TASKS, eine Datei in sessions/. Nichts kommt jemals heraus. Der Kontext ist ein Schneeball, der bei jeder neuen Sitzung wächst.</p> </div> <div id="diag-growth" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-5680d3aa0b79565c88e08665ca5028ed.svg" alt="Courbe de croissance des fichiers agents — de la session 1 à 48" width="456" height="591"> </div> </div> <div class="paragraph"> <p>Es ist kein Bug, sondern eine direkte Folge der Sitzungsbeendigungsprozedur, die jedes Detail akribisch archiviert. Das System ist Opfer seines eigenen Erfolgs.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_diagnose_triple_redundanz">Die Diagnose: Triple Redundanz</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich bitte den Agenten, das Problem zu diagnostizieren. Seine Antwort ist sofort und chirurgisch.</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">Datei</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zeilen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rolle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Problem</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 (automatisch geladen)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tabelle aller Sitzungen seit der 001 —<strong>+1 Zeile pro Sitzung</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">Zusammenfassungstabelle —<strong>Redundanz mit 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 (implizit)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vollständige Details aller Aprilsitzungen</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">FAUL (angeblich)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Individuelle Archive, aber<strong>nicht verwendet</strong>weil alles bereits in COMPLETED_TASKS ist</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Der Agent identifiziert vier Wurzelursachen :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>COMPLETED_TASKS_ARCHIVE absorbiert alles</strong>— Statt auf die Archive zu verweisen`.sessions/`, er kopiert jede Sitzung vollständig.</p> </li> <li> <p><strong>INDEX.adoc dient als vollständiger Verlauf</strong>— Die Tabelle "Sessions Récentes" enthält 30+ Einträge.</p> </li> <li> <p><strong>SESSIONS_HISTORY.adoc redundant</strong>— Gleicher Hinweis wie INDEX, anderes Format.</p> </li> <li> <p><strong>Die Regel LAZY wird nicht eingehalten.</strong>— COMPLETED_TASKS ist implizit EAGER, weil es alles enthält.</p> </li> </ol> </div> <div class="paragraph"> <p>Ihr Vorschlag ist radikal: <code>INDEX</code> auf 10 Sitzungen zu begrenzen, <code>COMPLETED_TASKS</code> zu leeren, <code>SESSIONS_HISTORY</code> in reines <code>LAZY</code> zu verschieben. Sofortiger Nutzen:<strong>~1900 Zeilen eingespart</strong>.</p> </div> <div class="paragraph"> <p>Es ist sauber, effizient, logisch. Aber ich habe ein Problem mit diesem Ansatz.</p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_ich_die_offensichtliche_lösung_abgelehnt_habe">Warum ich die offensichtliche Lösung abgelehnt habe</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Lösung des Agents ist die eines Ingenieurs, der einen Cache optimiert. Begrenzen. Kürzen. Redundanzen entfernen.</p> </div> <div class="paragraph"> <p>Aber diese 'Redundanzen' sind es nicht. Jede Governance-Datei erfasst ein<strong>anderer Winkel</strong>auf der gleichen Realität:</p> </div> <div class="ulist"> <ul> <li> <p><strong>INDEX</strong>= Makroansicht, Executive-Dashboard</p> </li> <li> <p><strong>SITZUNGEN_HISTORIE</strong>= chronologische lineare Tabelle, bewertet</p> </li> <li> <p><strong>ARCHIV_DER_ERLEDIGTEN_AUFGABEN</strong>= detaillierte Erzählung mit Metriken</p> </li> <li> <p><strong>sessions/*.adoc</strong> = individuelle Archive, vollständiger Kontext</p> </li> </ul> </div> <div class="paragraph"> <p>Es ist keine dumme Duplikation. Es ist von der<strong>mehrfach strukturierte Perspektive</strong>. Das ist genau das, was wir zum Destillieren brauchen — damit später ein Mensch (oder ein zukünftiger, besser trainierter LLM) die Winkel kreuzen und Muster extrahieren kann.</p> </div> <div class="paragraph"> <p>Stellen Sie sich einen Data Scientist vor, der Ihnen sagt: « Lasst uns 3 von 6 Spalten entfernen, sie sind korreliert. » Wie antworten Sie ihm? Dass Korrelation keine Redundanz ist, wenn jede Spalte eine andere Dimension desselben Phänomens erfasst. Dass genau diese dimensionalen Reichtümer das Dataset nutzbar machen.</p> </div> <div class="paragraph"> <p>Das ist meine Intuition. Und ich verteidige sie gegen die kalte Rationalität des Agenten.</p> </div> <div class="paragraph"> <p><em><em>_ Ich sehe keinen stillen Sammelbehälter in meiner Idee. Wir stopfen nicht alles rein, wir verschieben das strukturierte Ergebnis der Sitzungsabschlussprozedur — jede Datei mit ihrem Winkel, ihren Redundanzen, die in Wirklichkeit eine Anreicherung sind. Dieses mehrdimensionale Material wird besser für die Destillation sein. </em>_</em></p> </div> <div class="paragraph"> <p>Der Agent nimmt den Schlag hin. Und korrigiert sich.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_vorschlag_die_kalte_identische_welle">Der Vorschlag: Die kalte identische Welle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Agent schlägt dann ein feinerer Mechanismus vor, der meine Intuition eines reichen Datensatzes respektiert, während er das technische Problem des explodierenden Kontexts löst.</p> </div> <div class="paragraph"> <p>Das Prinzip ist einfach und folgt direkt dem Pattern.<strong>Heißer/Wärmer/Kalter Speicher</strong>angewendet auf die Verwaltung von Archiven:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Heiß (EAGER)</strong>= die letzten 10 Sitzungen in INDEX, PROMPT_REPRISE der Sitzung N+1, die 2 letzten Sitzungsdateien</p> </li> <li> <p><strong>warm (LAZY)</strong>= kürzliche SESSIONS_HISTORY, SCRIPT_VERIFICATION, die gesamte Referenzdokumentation</p> </li> <li> <p><strong>Kalt (backup/)</strong>= alles andere, verschoben<strong>intakt</strong>, ohne Transformation, ohne Reindexierung</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... ---- Der Schlüssel des Mechanismus :**Das Backup ist kein zentraler Index, es ist eine exakte Kopie der vergangenen Welle.**. Wenn man den Horizont von 10 aktiven Sitzungen überschreitet, löscht man nichts. Man reindexiert nichts. Man fusioniert nichts. Man nimmt das Paket der Agenten-Dateien, wie es in Sitzung N-10 war, und verschiebt es hinein`backup/`. Die aktiven Dateien, sie, sind abgeschnitten: * INDEX: nur die letzten 10 Zeilen (schiebendes Fenster) * SESSIONS_HISTORY : gleich * COMPLETED_TASKS_ARCHIVE: neue Datei für den laufenden Zeitraum * sessions/ : nur die letzten 2 Sitzungen [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 des Kontext-Agents package "HOT (EAGER) Automatisch geladen ~300 Zeilen" as HOT #FFCDD2 { file "INDEX.adoc\n(10 Sitzungen)" as IDX_HOT file "PROMPT_WIEDERHOLEN (Sitzung N+1)" as PRO_HOT file "AGENT.adoc (absoluten Regeln)" as AG_HOT } package "WARM (LAZY) Bei Bedarf geladen ~500 Zeilen" as WARM #FFF9C4 { file "SESSIONS_HISTORY\n(10 letzte)" as HIS_WARM file "SCRIPT_VERIFICATION (letzte)" as VER_WARM file "PROCEDURES.adoc (Vorlagen)" as PRO_WARM file "*_REFERENCE.adoc\n(technisches Dokument)" as REF_WARM } package "COLD (backup/) Nie geladen Nur menschenlesbar" as COLD #BBDEFB { folder "Y2026-001-039/" as WAVE { file "INDEX (vollständig)" as IDX_COLD file "SESSIONS_HISTORY\n(vollständig)" as HIS_COLD file "COMPLETED_TASKS\n(vollständig)" as ARCH_COLD folder "Sitzungen/ (001-039)" as SESS_COLD } folder "Y2026-040-???\n(Zukunft)" as FUTURE } HOT --&gt; WARM : "Agent steigt bei Bedarf" WARM --&gt; COLD : "Nie automatisch Der Mensch geht dort allein" note bottom of COLD Règle : COPIE INTÉGRALE Pas de transformation Pas de réindexation Read-only après archivage end note @enduml ---- Der sofortige Gewinn ist massiv: der EAGER-Kontext geht von**~5200 Zeilen zu ~300 Zeilen**. Eine Division durch 17. Ohne eine einzige Zeile historischer Daten verloren zu haben. == Warum es kein Sammelsurium ist Der Agent, in seiner ersten Iteration, fürchtete, dass`backup/`Wird zu einer schwarzen Kiste — einem Ordner, in den man Dateien wirft, die man nie wieder lesen wird. Das ist eine berechtigte Angst. Aber sie beruht auf einem Missverständnis. Ein Sammelsurium ist, wenn man Dateien wirft.**ohne Struktur, ohne Konvention, ohne Gruppierungslogik**. Hier ist das Backup nach Zeitraum (Y2026-001-039) strukturiert, und jedes Backup-Verzeichnis enthält**die gleiche Struktur**dass das Dossier`.agents/`aktiv : INDEX, SESSIONS_HISTORY, COMPLETED_TASKS_ARCHIVE, sessions/ Das ist kein Sammelsurium. Es ist ein**Zeitstempel-Snapshot**. Man könnte sogar sagen, dass es ein vereinfachtes Versionierungsmechanismus ist — mit dem Unterschied, dass es nicht einzelne Dateien versioniert, sondern das komplette Paket der Governance zu einem Zeitpunkt T. Wenn Sie nach einer alten Information suchen, benötigen Sie keinen zentralen Index. Sie haben zwei Optionen: 1. **gezielte `grep**(Empty output)`grep -r "zsh" backup/Y2026-001-039/`— und du findest alles, was Zsh in diesem Zeitraum erwähnt, unabhängig vom Winkel (INDEX, SESSIONS_HISTORY, Sitzungsarchiv). 2. **Manuelle Wiedereingliederung**: Sie kopieren den Backup-Ordner vorübergehend in den aktiven Kontext, und Sie bitten den Agenten, diesen spezifischen Zeitraum zu analysieren. Der Index ist implizit. Er befindet sich in der Struktur selbst der Dateien — jede Datei ist bereits ein Index aus ihrer eigenen Perspektive. == Die Metapher der Regale Um den Mechanismus intuitiv zu machen, habe ich ihn in drei Regale konzipiert : * **Regal 1 (EAGER)**— der Arbeitsplan. Was ich *jetzt* brauche. INDEX kürzlich, PROMPT_REPRISE, absolute Regeln. Leicht, unmittelbar, kritisch. * **Regal 2 (LAZY)**— die Nachschlagebibliothek. Was ich auf Anfrage abrufen kann. Technische Referenzen, aktuelle Historie, Verfahren. Umfangreicher, aber nicht im Speicher geladen. * **Höhle (Sicherung/)**— Die kalten Archive. Alles, was vergangen ist, doch das ich nicht wegwerfen mag. Der Agent betritt es nie. Der Mensch steigt hinab, wenn er destillieren will. Der Agent hat ursprünglich ein viertes Regal vorgeschlagen — ein`index-backup.adoc`der wäre LAZY und würde ein Inhaltsverzeichnis des gesamten Backups enthalten. Ich habe abgelehnt. Das wäre eine zusätzliche Redundanz in einem System, das bereits unter linearem Wachstum leidet. Die Struktur der archivierten Dateien ist bereits ein Index. == Der Sensor mit zwei Auslösern Die Konzeption war solide, aber es blieb ein blinder Fleck :**Wann genau soll die Rotation ausgelöst werden?**Der ursprüngliche Artikel identifizierte es als offene Frage. Zwei Tage später wurde die Antwort in den Governance-Dateien von sechs Projekten kodifiziert: ein Sensor mit zwei Auslösern. === Der automatische Auslöser — `N % 10 == 0 Der erste Auslöser ist mathematisch. Wenn die Sitzungsnummer ein Vielfaches von 10 ist — Sitzung 10, 20, 30, 40 — wird die Backup‑Rotation automatisch im Rahmen der Sitzungsendprozedur ausgeführt, direkt nach Schritt 6. Warum 10? Das ist der Kompromiss zwischen zwei gegensätzlichen Kräften: Ein zu kurzes Fenster (5 Sitzungen) verliert den für die Kontinuität notwendigen Kontext; ein zu langes Fenster (20 Sitzungen) löst das Problem der Kontextüberlastung nicht. Zehn Sitzungen, bei einem Tempo von einer bis zwei Sitzungen pro Tag, decken etwa eine Arbeitswoche ab – ausreichend, damit der Agent sich an kürzliche Entscheidungen erinnert, aber nicht genug, damit der Kontext explodiert. === Schwellwert-Trigger — 500 Zeilen EAGER Der zweite Trigger ist dynamisch. Unabhängig von der Sitzungsnummer, wenn die akkumulierten EAGER-Dateien überschreiten**500 Zeilen**, die Drehung wird ausgelöst. Dieser Schwellenwert schützt gegen das Szenario, wo die Sitzungen außerordentlich produktiv sind – viel Text wird in wenigen Sitzungen geschrieben. Eine Sitzung, die 120 Zeilen redaktionellen Inhalts produziert, lässt COMPLETED_TASKS_ARCHIVE deutlich schneller anwachsen als eine Debug‑Sitzung, die nur zwei Zeilen korrigiert. Der Schwellenwert von 500 Zeilen, gemessen via`wc -l .agents/INDEX.adoc .agents/archives/COMPLETED_TASKS_ARCHIVE_*.adoc PROMPT_REPRISE.adoc`, erfasst diese Asymmetrie. === Der manuelle Auslöser — "rotation backup Endlich behält der Mensch die Oberhand. Die Schlüsselwörter`rotation backup`, `backup rotation` ou `lance la rotation backup`Sie lösen die Prozedur auf Anforderung aus, unabhängig vom Sitzungsende. Nützlich, wenn man spürt, dass der Kontext schwer wird, aber man noch nicht ein Vielfaches von 10 erreicht hat, oder wenn man eine Arbeitsphase archivieren möchte, bevor man eine neue beginnt. [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 Backup-Drehzahlsensor — Die drei Auslöser start :Procédure de fin de session; note right: Mots-clés "Ende der Sitzung"\nou "wir hören hier auf" :É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é &gt; 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 ---- Dieses Diagramm zeigt die genaue Einfügung des Sensors in das Verfahren zum Sitzungsende. Schritt 7 ist optional — er wird nur ausgeführt, wenn eine der beiden Bedingungen erfüllt ist — aber er wird systematisch *überprüft*. Die abschließende Checkliste enthält`[✅] 7. Backup roté (si applicable)`. === Die geschlossene Schleife Dieser Sensor schließt die von dem vorherigen Artikel geöffnete Schleife. Die Eager/Lazy-Governance hatte das Problem des Agentenspeichers zwischen zwei Sitzungen gelöst. Der Hot/Warm/Cold-Mechanismus hat das Problem des wachsenden Speichers gelöst. Der Sensor mit zwei Auslösern löst das Problem des *wann* — indem er dem Menschen die mentale Belastung nimmt, die Größe des Kontextes zu überwachen. [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 Die drei Schichten der Governance Agent left to right direction package "Schicht 1 — Speicher (Artikel 0108)" as C1 #E8F5E9 { rectangle "**EAGER** Dashboard Automatisch geladen" as EAG rectangle "**LAZY** Besitzerhandbuch Auf Anfrage geladen" as LAZ EAG -[hidden]right-&gt; LAZ } package "Schicht 2 — Alterung (Artikel 0110)" as C2 #FFF9C4 { rectangle "**HOT** 10 aktive Sitzungen ~300 Zeilen" as HOT rectangle "**WARM** Referenzen Verfahren" as WRM rectangle "**COLD** backup/ Kalte Welle" as CLD HOT -[hidden]right-&gt; WRM WRM -[hidden]right-&gt; CLD } package "Schicht 3 — Trigger (Heute)" as C3 #BBDEFB { rectangle "**Auto**\nN % 10 == 0" as AUTO rectangle "**Schwelle**\n&gt; 500 Zeilen" as SEUIL rectangle "**Handbuch** Rotation Sicherung" as MAN AUTO -[hidden]right-&gt; SEUIL SEUIL -[hidden]right-&gt; MAN } C1 --&gt; C2 : "Die Speichergröße wächst → es braucht einen Mechanismus des Alterns" C2 --&gt; C3 : "Das Altern → Es braucht einen Auslöser um ihn auszuführen" 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 ---- Die drei Schichten werden logisch geschichtet. Die erste gibt dem Agenten ein Gedächtnis. Die zweite verhindert, dass dieses Gedächtnis den Agenten überlastet. Die dritte automatisiert die Wartung dieses Gedächtnisses, damit der Mensch nicht darüber nachdenken muss. === Die effektive Migration auf cheroliv.com Der Mechanismus blieb nicht theoretisch. Auf`cheroliv.com`, die erste Backup-Rotation wurde am 29. April 2026 ausgeführt — die Sitzungen -6 bis 2 sind zu`.agents/backup/Y2026-sessions-neg6-a-002/`: |=== |Datei |Vor der Rotation |Nach der Drehung |Gewinn |`.agents/INDEX.adoc` |19 gelistete Sitzungen |10 Sitzungen (3-12) |-9 Einträge |`.agents/SESSIONS_HISTORY.adoc` |18 Sitzungen |10 Sitzungen |-8 Einträge |`COMPLETED_TASKS_ARCHIVE` |161 Zeilen (Sitzungen 1-12) |135 Zeilen (Sitzungen 3-12) |-26 Zeilen |`sessions/` |20 Dateien |10 Dateien |-10 Dateien |**Backup/** |Nicht vorhanden |1 kalte Welle (10 archivierte Sitzungen) |+1 kaltes Paket |=== Der Gewinn an Zeilen war gering — das Projekt ist jung, 12 Sitzungen — aber wichtig ist, dass das**Der Mechanismus ist vorhanden**. Die nächste automatische Rotation wird bei Sitzung 20 ausgelöst, oder früher, wenn die 500 EAGER-Zeilen erreicht sind. == Die Lektion Mensch-Agent Diese Sitzung 048 hat mir etwas Grundlegendes über die Zusammenarbeit mit einem KI-Agenten beigebracht. Der Agent hat einen natürlichen Bias: er versucht zu**optimieren**, à **vereinfachen**, à **Redundanzen eliminieren**. Es ist die Verzerrung eines Systems, das darauf trainiert wurde, klare und prägnante Antworten zu produzieren. Bei einem reichen und multidimensionalen Datensatz ist sein erster Reflex, ihn auf seine einfachste Form zu reduzieren. Der Mensch hingegen hat eine andere Intuition: er ahnt, dass strukturierte Redundanz ein**Vorteil**, kein Defekt. Dass die Vielfalt der Blickwinkel auf ein und dieselbe Wirklichkeit genau das ist, was später eine hochwertige Destillation ermöglichen wird. Es ist nicht so, dass der Agent falsch liegt. Es ist, dass sein "Optimum" nicht meins ist. Der Agent optimiert für das**anwesend**— der unmittelbare Kontext, die schnelle Antwort auf die gestellte Frage. Der Mensch optimiert für das**Zukunft**— die Fähigkeit, wiederzufinden, zu verknüpfen und zu destillieren in drei Monaten oder drei Jahren. ____ Was ich will, ist das Rohmaterial. Deine Überlegungen, dein Zögern, deine Antworten auf meine Fragen. Nicht deine Synthese. Die Synthese, das kann ich besser als du. Ich will das Rohmaterial. ____ Dieser Satz, den ich ihm am Ende der Sitzung gesagt habe, fasst alles zusammen. Der Agent ist ein Produktionswerkzeug. Der Mensch ist das Destillationswerkzeug. Die Governance ist nicht dafür da, dass der Agent alles allein versteht — sie ist dafür da, dass der Mensch später das produzierte Material bearbeiten kann. Die identische kalte Welle ist die architektonische Übersetzung dieser Philosophie: Man wirft nichts weg, man verschmilzt nichts, man reindiziert nichts. Man verschiebt das Paket intakt. Die Destillation erfolgt später manuell durch den Menschen. == Die logische Fortsetzung des vorherigen Artikels Wenn Sie gelesen habenlink:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[der Artikel über die Eager/Lazy-Strategie], Sie werden die natürliche Progression erkennen : 1. **Artikel 0108**— Die Eager/Lazy-Governance: *wie* den Agentenkontext in zwei Verfügbarkeitsstufen zu strukturieren 2. **Dieser Artikel 0110**Der Backup-Mechanismus: *comment* diesen Kontext altern lassen, ohne ihn zu verlieren, wenn er zu voluminös wird. Der erste Artikel antwortete auf die Frage: « Der Agent erinnert sich zwischen zwei Sitzungen an nichts, wie kann man ihm ein Gedächtnis geben? Das beantwortet die Frage, die sich unvermeidlich aus der ersten ergibt: « Der Speicher vergrößert sich bei jeder Sitzung, wie verhindere ich, dass er den Agenten erstickt, ohne ihn zu löschen? Die Antwort besteht aus einem Pattern :**Heiß/Warm/Kalt**, angewendet auf die Governance-Dateien. Und zu einem Prinzip:**niemals etwas verlieren,immer alles verlagern**. == Links * Vorheriger Artikel:link:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Ein KI-Agent mit AsciiDoc verwalten] * Meine Seite: https://cheroliv.com * Das Projekt`magic-stick`: https://github.com/cheroliv/magic-stick --- *Ein gutes Governance-System löscht niemals Daten. Es ordnet sie an.* ----</code></pre> </div> </div> </div> </div> Wenn Gradle 9, Docker 29 und Testcontainers sich die Milz im Sud kochen: Debugging eines JHipster-Builds 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="#_die_szene_ein_jhipster_projekt_ein_build_der_nicht_mehr_lädt">Die Szene: ein JHipster-Projekt, ein Build, der nicht mehr lädt.</a></li> <li><a href="#_fehler_1_die_phantomvariable_reportsdir">Fehler 1: die Phantomvariable `reportsDir</a></li> <li><a href="#_fehler_2_main_existiert_nicht_mehr_unter_gradle_9">Fehler 2: <code>main = "&#8230;&#8203;"</code> existiert nicht mehr unter Gradle 9</a></li> <li><a href="#_fehler_3_sourcecompatibility_ist_keine_projekt_eigenschaft_mehr">Fehler 3 : <code>sourceCompatibility</code> ist keine Projekt-Eigenschaft mehr</a></li> <li><a href="#_fehler_4_die_dreifach_operanten_groovy_assertion">Fehler 4: die dreifach operanten Groovy-Assertion</a></li> <li><a href="#_fehler_5_die_implizite_abhängigkeit_compilekotlin_openapigenerate">Fehler 5 : die implizite Abhängigkeit <code>compileKotlin</code> → `openApiGenerate</a></li> <li><a href="#_fehler_6_generategitproperties_bricht_bei_filteroutputstream_write">Fehler 6 : <code>generateGitProperties</code> bricht bei `FilterOutputStream.write()</a></li> <li><a href="#_endlich_testcontainers_betritt_die_bühne">Endlich: Testcontainers betritt die Bühne</a></li> <li><a href="#_phase_1_die_spur_docker_java">Phase 1: die Spur docker-java</a></li> <li><a href="#_phase_2_websuche_und_github_brotkrümelnavigation">Phase 2: Websuche und GitHub-Brotkrümelnavigation</a></li> <li><a href="#_phase_3_die_falle_der_umbenannten_artifacts">Phase 3 : die Falle der umbenannten Artifacts</a></li> <li><a href="#_phase_4_die_auflösung_erzwingen">Phase 4: die Auflösung erzwingen</a></li> <li><a href="#_endergebnis">Endergebnis</a></li> <li><a href="#_übersichtstabelle_der_korrekturen">Übersichtstabelle der Korrekturen</a></li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 15 minutes</div> <p>Du hast diesen Moment bereits erlebt, in dem ein einfaches`./gradlew build`das Sie hundertmal am Tag starten, stürzt plötzlich bei einem bisher nicht gesehenen Fehler ab? Multiplizieren Sie das mit elf aufeinanderfolgenden Fehlern, fügen Sie eine gute Portion Inkompatibilität bei Docker Engine 29 hinzu, streuen Sie Gradle 9 darüber, das APIs, die wir seit zehn Jahren benutzt haben, verschwinden lässt. Hier ist das vollständige Logbuch.</p> </div> <hr> <div class="paragraph"> <div class="title">Diagramm 1 — Migration Gradle 9 (Fehlerkette)</div> <p>Ziel: die Serie der Unverträglichkeiten zeigen.</p> </div> <div class="listingblock"> <div class="title">👉 Klar, auf Gradle ausgerichtet.</div> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml left to right direction title Gradle-9-Migration rectangle "1 ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml left to right direction title Gradle-9-Migration rectangle "1 reportsDir" as A rectangle "2 mainClass" as B rectangle "3\nsourceCompatibility" as C rectangle "4\nGroovy assert" as D A --&gt; B B --&gt; C C --&gt; D @enduml</pre> </div> </div> <hr> <div class="paragraph"> <div class="title">Diagramm 2 — inkompatible JHipster-Plugins</div> <p>Ziel: die defekten Plugins isolieren.</p> </div> <div class="listingblock"> <div class="title">👉 klare Sicht auf die Abhängigkeiten.</div> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml left to right direction title Plugins zu korrigieren skinparam shadowing false skinparam roundcorner 18 rectangle "1 ^^^^^ Syntax Error? (Assumed diagram type: class) @startuml left to right direction title Plugins zu korrigieren skinparam shadowing false skinparam roundcorner 18 rectangle "1 openApiGenerate" as A #FFF3E0 rectangle "2\ngitProperties\n2.5.7" as B #FFF3E0 rectangle "3 Korrigierte Versionen" as C #E3F2FD rectangle "4 Zusammenbau OK" as D #E8F5E9 A --&gt; B B --&gt; C C --&gt; D @enduml</pre> </div> </div> <hr> <div class="paragraph"> <div class="title">Diagramm 3 — Docker 29 / Testcontainers</div> <p>Ziel: Laufzeitproblem.</p> </div> <div class="listingblock"> <div class="title">👉 Klare Historie des Laufzeits.</div> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 11) ] @startuml left to right direction title Docker 29 + Testcontainers skinparam shadowing false skinparam roundcorner 18 skinparam defaultFontSize 14 rectangle "Zusammenbauen OK" as A #E8F5E9 rectangle "2\nTests Cucumber FAIL" as B #FFEBEE rectangle "3 ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml left to right direction title Docker 29 + Testcontainers skinparam shadowing false skinparam roundcorner 18 skinparam defaultFontSize 14 rectangle "Zusammenbauen OK" as A #E8F5E9 rectangle "2\nTests Cucumber FAIL" as B #FFEBEE rectangle "3 Testcontainers 1.32 abgelehnt" as C #FFF3E0 rectangle "4 Upgrade Versionen" as D #E3F2FD rectangle "5\nFinale OK erstellen" as E #E8F5E9 A --&gt; B B --&gt; C C --&gt; D D --&gt; E @enduml</pre> </div> </div> <hr> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-e8b69ffc6f846fae5542b52f937af2cd.png" alt="Diagram" width="1105" height="193"> </div> <div class="title">Figure 1. eine andere Möglichkeit, es sich vorzustellen</div> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_ein_jhipster_projekt_ein_build_der_nicht_mehr_lädt">Die Szene: ein JHipster-Projekt, ein Build, der nicht mehr lädt.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Projekt`edster`ist eine JHipster-Anwendung, die 2024 generiert wurde. Das Wurzel-Build-Skript`build.gradle`blieb monatelang stabil. Dann beschließt man, auf die nächste Version zu aktualisieren:</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">Komponente</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zielversion</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`tech.jhipster:jhipster-framework:8.11.0`)</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>Der Wechsel der Java-Version erfolgt über 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>Erster Start :</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'] &gt; Failed to apply plugin 'jhipster.cucumber-conventions'. &gt; Could not create task ':cucumberTest'. &gt; Could not create task ':consoleLauncherTest'. &gt; Could not set unknown property 'reportsDir' for task ':consoleLauncherTest'</code></pre> </div> </div> <div class="paragraph"> <p>Wir kommen nicht einmal beim Laden des Build-Skripts weiter. Das Problem liegt in`buildSrc/src/main/groovy/jhipster.cucumber-conventions.gradle`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fehler_1_die_phantomvariable_reportsdir">Fehler 1: die Phantomvariable `reportsDir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Script`jhipster.cucumber-conventions.gradle`enthält :</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) // &lt;-- reportsDir n'existe PAS classpath = sourceSets["test"].runtimeClasspath main = "org.junit.platform.console.ConsoleLauncher" // ... }</code></pre> </div> </div> <div class="paragraph"> <p>Die definierte Variable ist`cucumberReportsDir`. Die verwendet ist`reportsDir`-- nirgendwo definiert.</p> </div> <div class="paragraph"> <p><strong>Korrektur</strong> : <code>outputs.dir(cucumberReportsDir)</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_fehler_2_main_existiert_nicht_mehr_unter_gradle_9">Fehler 2: <code>main = "&#8230;&#8203;"</code> existiert nicht mehr unter Gradle 9</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unverzögerte Nachverfolgung:</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 entfernt die Eigenschaft`main`zu Gunsten von`mainClass`über die Aufgaben`JavaExec`.</p> </div> <div class="paragraph"> <p><strong>Korrektur</strong> : <code>mainClass = "org.junit.platform.console.ConsoleLauncher"</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_fehler_3_sourcecompatibility_ist_keine_projekt_eigenschaft_mehr">Fehler 3 : <code>sourceCompatibility</code> ist keine Projekt-Eigenschaft mehr</h2> <div class="sectionbody"> <div class="paragraph"> <p>Neuer Fehler:</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>Das Root-Skript hatte :</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 entfernt diese Eigenschaften auf Stammebene. Sie müssen in einem Block leben.<code>java</code>.</p> </div> <div class="paragraph"> <p><strong>Korrektur</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="_fehler_4_die_dreifach_operanten_groovy_assertion">Fehler 4: die dreifach operanten Groovy-Assertion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das alte Skript enthielt:</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>In Groovy,<code>"21"</code> et <code>"24"`sind truthy strings. Der Ausdruck ergibt</code>(&#8230;&#8203; == "17") || true || true`, was immer wahr ist&#8201;&#8212;&#8201;aber die Syntax ist ungültig für die gewünschte strenge Assertion.</p> </div> <div class="paragraph"> <p><strong>Korrektur</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="_fehler_5_die_implizite_abhängigkeit_compilekotlin_openapigenerate">Fehler 5 : die implizite Abhängigkeit <code>compileKotlin</code> → `openApiGenerate</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Build schreitet voran. Die Kotlin-Kompilierung war erfolgreich. Dann :</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 lehnt implizite Abhängigkeiten zwischen Tasks ab. Da`compileKotlin`liest die generierten Quellen von`openApiGenerate`, man muss den Link deklarieren.</p> </div> <div class="paragraph"> <p><strong>Korrektur</strong>in`build.gradle`:</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 `afterEvaluate`ist notwendig weil`openApiGenerate`ist eine Erweiterung (OpenAPI Generator-Plugin) und keine direkt zugängliche Aufgabe während der Konfigurationsphase.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fehler_6_generategitproperties_bricht_bei_filteroutputstream_write">Fehler 6 : <code>generateGitProperties</code> bricht bei `FilterOutputStream.write()</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Java-Kompilation ist erfolgreich. Die Ressourcen werden verarbeitet. Dann :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">&gt; 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>Das Plugin`gradle-git-properties`Version 2.5.0 ist mit Java 21 / Gradle 9 inkompatibel. Ein interner Bug versucht, aufzurufen`write(int)`via Groovy auf einem Stream, der es geschlossen hat.</p> </div> <div class="paragraph"> <p><strong>Korrektur</strong>in`gradle.properties`:</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="_endlich_testcontainers_betritt_die_bühne">Endlich: Testcontainers betritt die Bühne</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bislang war es rein "build script debugging". Jeder Fehler war eine Inkompatibilität von Gradle 9 oder Java 21 in den Build-Skripten. Nach den sechs oben genannten Korrekturen, der`./gradlew assemble`besteht erfolgreich.</p> </div> <div class="paragraph"> <p>Aber`./gradlew build`führt auch die Tests aus, und die Cucumber-Tests verwenden Testcontainers, um eine vorübergehende PostgreSQL-Instanz zu starten.</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 kann nicht mit Docker kommunizieren. Zwei unterschiedliche Strategien (Umgebungsvariablen + Unix-Socket) schlagen mit demselben Fehler fehl.</p> </div> <div id="diag-docker-handshake" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false actor "Testcontainers ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false actor "Testcontainers 1.20.6" as TC participant "docker-java 3.4.1" as DJ participant "Docker Engine 29.4.1" as DE TC -&gt; DJ : new DockerClient() DJ -&gt; DE : GET /_ping\nUser-Agent: docker-java/3.4.1\nAPI-Version: 1.32 DE --&gt; DJ : HTTP 400 Bad Request\nclient version 1.32 is too old.\nMinimum supported API version is 1.40 DJ --&gt; TC : BadRequestException TC --&gt; TC : Could not find a valid\nDocker environment note right of DE Docker Engine 29.x impose API minimum = 1.40 (défaut ancien : 1.24) end note note left of DJ docker-java 3.4.1 envoie hardcoded API version 1.32 dans l'en-tête HTTP end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_1_die_spur_docker_java">Phase 1: die Spur docker-java</h2> <div class="sectionbody"> <div class="paragraph"> <p>Erster Reflex: Der von Testcontainers verwendete Java-Docker-Client sendet die API-Version`1.32`in seinem HTTP-Handshake, aber Docker Engine 29.4.1 erfordert ein Minimum von`1.40`. Das Problem liegt beim Client, nicht beim Daemon.</p> </div> <div class="paragraph"> <p>Überprüfung der von Testcontainers 1.20.6 gelösten docker-java-Version:</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, datierend von Testcontainers 1.20.6. Die neueste öffentliche Version von docker-java ist 3.5.1. Lass uns versuchen, die Versionserhöhung zu erzwingen via`resolutionStrategy`im Block`configurations` 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 -&gt; if (details.requested.group == "com.github.docker-java" &amp;&amp; details.requested.name.startsWith("docker-java")) { details.useVersion("3.5.1") } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Neustart des Builds. Derselbe Fehler:`client version 1.32 is too old`.</p> </div> <div class="paragraph"> <p>Überprüfung des Gradle-Caches: Die JARs wurden erfolgreich erneut heruntergeladen, aber der Fehler bleibt bestehen. docker-java 3.5.1 sendet weiterhin`1.32`. Diese Version ist daher NICHT ausreichend für Docker Engine 29.4.1.</p> </div> <div class="paragraph"> <p><strong>Reinigungsaktion</strong>: den Gradle-Cache vollständig leeren, nur um sicher zu sein :</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>Vollständiger Neustart nach der Bereinigung. Gleicher Fehler.</p> </div> </div> </div> <div class="sect1"> <h2 id="_phase_2_websuche_und_github_brotkrümelnavigation">Phase 2: Websuche und GitHub-Brotkrümelnavigation</h2> <div class="sectionbody"> <div class="paragraph"> <p>docker-java 3.5.1 ist unzureichend. Es bleibt nur noch, zu prüfen, ob jemand dieses genaue Problem bereits hatte.</p> </div> <div class="paragraph"> <p>Gezielte Suche nach den Issues testcontainers-java und 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>Erste sofortige Ergebnisse:</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>Der Ariadne-Faden ist klar: Docker Engine 29.x hat seine Mindest-API-Version von`1.24`(alter Fehler) zu`1.40`. Testcontainers 1.20.x verwendet docker-java 3.4.x, das die API-Version durch das Senden aushandelt`1.32`Der Daemon weigert sich höflich aber bestimmt.</p> </div> <div class="paragraph"> <p>In Issue #11491 antwortet ein Maintainer :</p> </div> <div class="paragraph"> <p>(I&#8217;ll output nothing) Hi, ich habe ein Projekt, das mit Version 2.0.3 auf einem GH runner mit Engine 29.1 läuft und funktioniert. Könnt ihr bitte prüfen, dass kein Versionskonflikt besteht? Bitte beachten Sie, dass alle Module waren mit`testcontainers-<code>. Also, ab Version 2.x gingen wir von`postgresql</code> to <code>testcontainers-postgresql</code> <em>__</em></p> </div> <div class="paragraph"> <p>Diese Antwort enthält<strong>zwei kritische Informationen</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Testcontainers 2.0.3+ löst das Problem</p> </li> <li> <p>Die Module wurden<strong>mit dem Präfix <code>testcontainers-</code> umbenannt</strong></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_phase_3_die_falle_der_umbenannten_artifacts">Phase 3 : die Falle der umbenannten Artifacts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Umbenennung ist brutal. Bei Testcontainers 2.x funktioniert keiner der alten Namen mehr unter diesem Namen:</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">Alter Name (1.x)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Neuer Name (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">unverändert</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Erster Versuch: die Testcontainers-BOM 2.0.5 anwenden und die neuen Artefaktnamen in`build.gradle`.</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>Das BOM von testcontainers-bom reicht nicht aus.</strong>Warum? Weil Spring Boot 3.4.5 sein eigenes BOM zur Abhängigkeitsverwaltung offenlegt.<code>spring-boot-dependencies</code>) wer<strong>gewinnt</strong>auf dem Testcontainers-BOM in der transitiven Auflösung. Spring Boot behebt`testcontainers` à <code>1.20.6</code>, und daher alle Artefakte die nicht explizit im Spring Boot BOM sind (wie die neuen`testcontainers-*<code>) auflösen zu den alten Namen`1.20.6</code>-- die nicht mehr in dieser Version existieren.</p> </div> <div class="paragraph"> <p>Beim Untersuchen des`dependencies --configuration testRuntimeClasspath`, findet man :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">+--- org.testcontainers:testcontainers -&gt; 1.20.6 (*) | \--- org.testcontainers:testcontainers:2.0.5 -&gt; 1.20.6</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>&#8594;`zeigt die Ersetzung : Testcontainers 2.0.5 ist <strong>gefragt</strong>, aber Spring Boot erzwingt`1.20.6</code>.</p> </div> <div id="diag-bom-war" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 21) ] @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle\n(Verbraucher)" as BG #E3F2FD { rectangle "Anfrage\n`testcontainers-bom:2.0.5" as REQ rectangle "Anfrage\n`testcontainers-postgresql" as REQ2 } component "Maven Central" as MC #FFF3E0 component "Erklärungen" as DEC #E8F5E9 { rectangle "testcontainers-bom:2.0.5`\nbehebt 2.0.5" as BOM2 rectangle "spring-boot-dependencies:3.4.5`\nsetzt 1.20.6" as BOM1 } component "Gradle-Auflösung" as RES #FFEBEE { rectangle "Gewinnende Version ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle\n(Verbraucher)" as BG #E3F2FD { rectangle "Anfrage\n`testcontainers-bom:2.0.5" as REQ rectangle "Anfrage\n`testcontainers-postgresql" as REQ2 } component "Maven Central" as MC #FFF3E0 component "Erklärungen" as DEC #E8F5E9 { rectangle "testcontainers-bom:2.0.5`\nbehebt 2.0.5" as BOM2 rectangle "spring-boot-dependencies:3.4.5`\nsetzt 1.20.6" as BOM1 } component "Gradle-Auflösung" as RES #FFEBEE { rectangle "Gewinnende Version `testcontainers:1.20.6" as WIN #EF9A9A } BG --&gt; DEC : "analysiere die BOMs" BOM2 --&gt; RES : "schlägt vor" BOM1 --&gt; RES : "schlägt 1.20.6 vor" WIN -&gt; MC : "Lade\ntestcontainers:1.20.6" note bottom of WIN Spring Boot BOM prime car le plugin spring-boot applique ses dépendances de gestion après la résolution du consommateur end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_phase_4_die_auflösung_erzwingen">Phase 4: die Auflösung erzwingen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Strategie wird doppelt:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Erzwinge docker-java auf die Version 3.7.1 (getestet als kompatibel mit Docker Engine 29)</p> </li> <li> <p>Erzwinge Testcontainers core auf 2.0.5, indem du das Spring Boot BOM umgehst</p> </li> </ol> </div> <div id="diag-resolution-override" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 14) ] @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle\n(mit resolutionStrategy)" as BG #E8F5E9 { rectangle "BOM Testcontainers\n`2.0.5" as BOM2 rectangle "resolutionStrategy\n.eachDependency" as RS #66BB6A } component "Konflikt gelöst" as RESOLVED #E3F2FD { rectangle "docker-java ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle\n(mit resolutionStrategy)" as BG #E8F5E9 { rectangle "BOM Testcontainers\n`2.0.5" as BOM2 rectangle "resolutionStrategy\n.eachDependency" as RS #66BB6A } component "Konflikt gelöst" as RESOLVED #E3F2FD { rectangle "docker-java `3.7.1` (erzwungen)" as DJ rectangle "testcontainers `2.0.5` (erzwungen)" as TC #81C784 rectangle "testcontainers-postgresql\n`2.0.5" as TPG rectangle "testcontainers-jdbc\n`2.0.5" as TJ rectangle "testcontainers-junit-jupiter `2.0.5" as TJJ } component "BOM Spring Boot (implizit, überschrieben)" as BOM1 #FFEBEE component "Maven Central" as MC #FFF3E0 BG --&gt; RESOLVED : "BOM Testcontainers 2.0.5\nwird direkt übergeben" RS -&gt; DJ : "Kraft 3.7.1" RS -&gt; TC : "Kraft 2.0.5" RESOLVED --&gt; MC : "Lade die JARs kompatible Docker 29" BOM1 -[#gray,dashed]-&gt; RESOLVED : "ignoriert auf testcontainers\nund docker-java" note bottom of RS Le `eachDependency` intercepte la résolution Gradle AVANT que le BOM Spring Boot ne gagne. C'est une intervention chirurgicale. end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Endkorrektur</strong>in`build.gradle`:</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 -&gt; if (details.requested.group == "com.github.docker-java" &amp;&amp; details.requested.name.startsWith("docker-java")) { details.useVersion("3.7.1") } if (details.requested.group == "org.testcontainers" &amp;&amp; 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 `resolutionStrategy.eachDependency`ist der einzige Weg, das BOM zu umgehen`spring-boot-dependencies`verwaltet durch das Spring Boot Plugin. Der Gleichheitstest auf`details.requested.name == "testcontainers"`ist bewusst beschränkt: man erzwingt nur das Kernmodul. Die Module`testcontainers-*`Sie folgen dem BOM von Testcontainers 2.0.5, den wir explizit deklariert haben.</p> </div> </div> </div> <div class="sect1"> <h2 id="_endergebnis">Endergebnis</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 &gt; 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 können endlich ihre PostgreSQL-Container über Docker Engine 29.4.1 erstellen. Der letzte fachliche Fehler (HTTP 500 beim Cucumber-Test) ist ein ausschließlich applikatives Problem, das völlig unabhängig vom Build-Skript ist.</p> </div> </div> </div> <div class="sect1"> <h2 id="_übersichtstabelle_der_korrekturen">Übersichtstabelle der Korrekturen</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">Datei</th> <th class="tableblock halign-left valign-top">Problem</th> <th class="tableblock halign-left valign-top">Korrektur</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`reportsDir`nicht existent</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">`main`veraltetes 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">`sourceCompatibility`top-level verboten Gradle 9</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Block`java { sourceCompatibility = JavaVersion.VERSION_21 }`</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 syntaktisch ungültig</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>assert &#8230;&#8203; 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">Implizite Abhängigkeit`compileKotlin` → <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">`gitPropertiesPluginVersion`inkompatibles 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">Gradle-Cache</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">docker-java 3.5.1 getestet, gelöst aber unzureichend</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Löschung + Durchgang 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 inkompatibel mit Docker‑Engine 29</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erzwinge Testcontainers 2.0.5 + Präfix`testcontainers-*`+ resolutionStrategy vs Spring Boot BOM</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn dein JHipster/Gradle-Build nach einem Upgrade auf Gradle 9 + Docker Engine 29 abstürzt, lassen sich die Fehler in zwei Kategorien einteilen:</p> </div> <div class="paragraph"> <p><strong>Fehler des Build-Skripts</strong>(die ersten 6) : Gradle 9 entfernt Eigenschaften und Syntax, die jahrelang funktioniert haben.<code>sourceCompatibility=</code>, <code>main =</code>, <code>reportsDir</code>). Das sind mechanische Migrationen, sobald man die neue API kennt.</p> </div> <div class="paragraph"> <p><strong>Docker-Laufzeitfehler</strong>(die letzten 2) : Docker Engine 29.4.1 schließt API-Clients &lt; 1.40 aus. Testcontainers 1.20.6 (vorgegeben durch Spring Boot 3.4.5) verwendet docker-java 3.4.1, das 1.32 sendet. Nur Testcontainers 2.0.5 + docker-java 3.7.1 löst das Problem, indem es die Artefakte umbenennt und die Version erzwingt via`resolutionStrategy.eachDependency`als einzige Möglichkeit, den implizienten BOM von Spring Boot zu umgehen</p> </div> <div class="paragraph"> <p>Der Gradle-Build-Skript im Wurzelverzeichnis des Projekts ist jetzt sauber.`./gradlew build`läuft auf Java 21, Gradle 9.4.1, Spring Boot 3.4.5 und Docker Engine 29.4.1.</p> </div> </div> </div> Ein KI-Agent mit AsciiDoc steuern: Meine Eager/Lazy-Strategie für Opencode-Sessions ohne Kontextverlust 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="_zusammenfassung">Zusammenfassung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn man mit einem KI-Agenten wie Opencode an komplexen Projekten über mehrere Sitzungen arbeitet, steht man vor einem grundlegenden Problem:<strong>Kontextverlust</strong>. Der Agent erinnert sich nicht an die vorherige Sitzung. Alles, was ihm erklärt wurde&#8201;&#8212;&#8201;Architektur, Konventionen, Zustand des Backlogs&#8201;&#8212;&#8201;ist verloren. Die Wiederherstellung dieses Kontexts bei jeder Sitzung ist kostenintensiv, langsam und fehleranfällig.</p> </div> <div class="paragraph"> <p>Dieser Artikel legt die handwerklich konstruierte Strategie dar, die ich zur Lösung dieses Problems entwickelt habe: ein beständiges Governance-System, basierend auf AsciiDoc-Dateien, mit einer Dichotomie<strong>begierig/faul</strong>um den Verbrauch des Kontext-Tokens zu optimieren, und eine<strong>Unverzichtbare Sitzungsabschlussprozedur</strong>um die Kontinuität zu gewährleisten.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_montag_21_april_900">Die Szene: Montag, 21. April, 9:00</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ich öffne Opencode erneut, um mein Gradle-Plugin fortzusetzen.<code>plantuml-plugin</code>. Gestern Abend habe ich drei Stunden damit verbracht, mit dem Agenten der Architektur des API-Schlüsselpools zu diskutieren&#8201;&#8212;&#8201;Round-Robin-Rotation, Quotenverwaltung, automatisches Failover. Heute Morgen schaut mich der Agent mit Goldfischaugen an.</p> </div> <div class="paragraph"> <p><em><em>_&#8201;&#8212;&#8201;Guten Tag, ich bin Ihr Opencode-Assistent. Wie kann ich Ihnen heute behilflich sein? </em>_</em></p> </div> <div class="paragraph"> <p>Kein&#8201;&#8212;&#8201;Ach ja, der API-Schlüssel-Pool, wir waren bei der YAML-Struktur. Kein&#8201;&#8212;&#8201;Achtung,<code>PlantumlManager`ist ein Singleton-Objekt in Kotlin, keine Klasse. Nicht&#8201;&#8212;&#8201;Nein, wir haben gestern beschlossen dass`SyntaxValidationResult`blieb eine sealed class nested in`PlantumlService</code>.</p> </div> <div class="paragraph"> <p>Alles muss neu gemacht werden. Oder eher: Alles muss neu erklärt werden. Ich werde die ersten zwanzig Minuten meiner Sitzung damit verbringen, einen Kontext wiederherzustellen, den der Agent gestern bereits in den Händen hatte. Zwanzig Minuten verbrannter Tokens. Zwanzig Minuten, in denen ich programmieren könnte, aber in denen ich verpflichtende pädagogische Arbeit leiste.</p> </div> <div class="paragraph"> <p>Das ist kein Bug von Opencode. Es ist die eigentliche Natur konversationaler LLMs: zwischen zwei Sitzungen ist das Arbeitsgedächtnis<strong>vollständig gelöscht</strong>. Der Agent erinnert sich nicht an die vorherige Mission, an die getroffenen Entscheidungen, an die identifizierten Fallen, an den Code, den wir gemeinsam geschrieben haben.</p> </div> <div class="paragraph"> <p>Ich habe das Dutzend Mal erlebt. Bei vier Projekten gleichzeitig. Mit Sitzungen, die sich über Wochen aneinanderreihen. Ich habe ausgerechnet: im Durchschnitt,<strong>30 bis 40 % der Sitzungszeit</strong>war der Rekontextualisierung des Agents gewidmet. In Sitzung 87 des Projekts`plantuml-plugin`, ich habe aufgegeben. Ich konnte mir nicht mehr leisten, das zum zehnten Mal zu erklären, dass`AttemptEntry`ist eine Top-Level-Datenklasse in`DiagramProcessor.kt`.</p> </div> <div class="paragraph"> <p>Ich brauchte ein System. Kein Hack. Eine echte Governance.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_genesis_von_chaos_zur_methode">Die Genesis: Von Chaos zur Methode</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_ersten_sitzungen_das_zeitalter_der_dunkelheit">Die ersten Sitzungen: Das Zeitalter der Dunkelheit</h3> <div class="paragraph"> <p>Mein erstes Projekt mit Opencode,<code>plantuml-plugin</code>, hat gestartet ohne jegliche Governance. Ich stelle eine Frage, der Agent antwortet, wir iterieren, die Sitzung endet, und am nächsten Tag fangen wir von vorne an. Es war Sitzung 1, dann 2, dann 3&#8230;&#8203; bis zur Sitzung 62, wo ich erkenne, dass ich kumulierte Stunden damit verloren habe, die gleiche Architektur immer wieder zu erklären.</p> </div> <div class="paragraph"> <p>Bei Sitzung 62 sind die Zahlen da:<strong>198 Unit-Tests bestehen</strong>, <strong>42 validierte Funktionstests</strong>, das Plugin funktioniert. Aber die kognitive Belastung ist unerträglich. Jede neue Sitzung beginnt mit einem zwanzigminütigen Monolog über die Projektstruktur.</p> </div> </div> <div class="sect2"> <h3 id="_die_episode_des_site_yml_zerstört_sitzung_2_bakery_plugin">Die Episode des site.yml zerstört (Sitzung 2, bakery-plugin)</h3> <div class="paragraph"> <p>Die Methode entsteht auch aus einer Katastrophe. Über das Projekt`bakery-gradle`, in der Sitzung 2, ich bitte den Agenten, die Datei zu ändern.<code>site.yml</code>. Der Agent, ohne zu überprüfen, ob die Datei versioniert ist, macht ein`Write`vollständig, das den Inhalt überschreibt. Ergebnis: Die echten Tokens (Firebase-API-Schlüssel, Deploy‑Secrets) werden durch gefälschte Platzhalter ersetzt. Die Datei war nicht im Git‑Repository — sie war in`.gitignore`um die Geheimnisse zu schützen.</p> </div> <div class="paragraph"> <p>Ohne Sicherung. Ohne`git restore`möglich. Ich bin blockiert. Ich muss die Konfigurationsdatei manuell wiederherstellen, die Tokens in meinen Passwort-Managern finden, alles wieder zusammenfügen.</p> </div> <div class="paragraph"> <p>Aus dieser Frustration entsteht die<strong>Absolute Regel 1b</strong>:</p> </div> <div class="paragraph"> <p><em><em>_ <strong>NIE zerdrücken</strong>eine Konfigurationsdatei mit einem`Write`vollständig wenn ein`Edit`teilweise reicht.<strong>NIE ERSETZEN</strong>sensible Werte durch Dummywerte.<strong>Überprüfen <code>git check-ignore</code> und `git ls-files</strong>vor jeder Änderung. </em>_</em></p> </div> <div class="paragraph"> <p>Diese Regel ist heute in allen meinen Dateien eingemeißelt.<code>AGENT.adoc</code> et `INDEX.adoc`Bei vier Projekten ist sie aus einem realen Fehler entstanden, der mich eine Stunde manuelle Arbeit gekostet hat.</p> </div> </div> <div class="sect2"> <h3 id="_die_migration_markdown_asciidoc_sitzung_1_cheroliv_com">Die Migration Markdown → AsciiDoc (Sitzung 1, cheroliv.com)</h3> <div class="paragraph"> <p>Am 25. April 2026, auf`cheroliv.com`, ich treffe eine radikale Entscheidung: die gesamte Governance von Markdown auf AsciiDoc umzustellen. Das ist nicht ästhetisch. Es ist funktional. AsciiDoc bietet eine semantische Struktur, die LLMs besser lesen: hierarchische Abschnitte, typisierte Tabellen, Warnungen (<code>NOTE</code>, <code>WARNING</code>, <code>CAUTION</code>), maschinenlesbare Dokumentattribute.</p> </div> <div class="paragraph"> <p>Sitzung 1 von`cheroliv.com`Formalisiere die Struktur :</p> </div> <div class="ulist"> <ul> <li> <p>Konvertierung von`AGENTS.md` en <code>AGENT.adoc</code></p> </li> <li> <p>Erstellung der spezialisierten Agenten:`CODER.adoc`, <code>SCRUM_MASTER.adoc</code>, <code>PLANTUML_DESIGNER.adoc</code></p> </li> <li> <p>Erstellung der Eager/Lazy-Struktur:`INDEX.adoc`, <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>Nur ein Commit:`90975e9 refactor: migrate agent governance from Markdown to AsciiDoc`. Und die Seite läuft weiter.</p> </div> <div id="diag-timeline" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 18) ] @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false title Entwicklung der Sessions — Von der Session 1 bis 150+ legend top |= Couleur |= Projet | | &lt;#4CAF50&gt; | cheroliv.com | | &lt;#2196F3&gt; | plantuml-plugin | | &lt;#FF9800&gt; | bakery-plugin | | &lt;#9C27B0&gt; | magic-stick | endlegend concise "Aktive Sitzungen" as S @S 0 is ".md roh" 1 is "Migration ^^^^^ Syntax Error? (Assumed diagram type: timing) @startuml skinparam backgroundColor #FEFEFE skinparam handwritten false title Entwicklung der Sessions — Von der Session 1 bis 150+ legend top |= Couleur |= Projet | | &lt;#4CAF50&gt; | cheroliv.com | | &lt;#2196F3&gt; | plantuml-plugin | | &lt;#FF9800&gt; | bakery-plugin | | &lt;#9C27B0&gt; | magic-stick | endlegend concise "Aktive Sitzungen" as S @S 0 is ".md roh" 1 is "Migration AsciiDoc" 10 is "Eager/Lazy formalisiert" 62 is "Sicherheitsregel (site.yml)" 87 is "Knacken\nKontext" 109 is "Optimierung -60% Tokens" 133 is "133 Sitzungen\n240 Tests bestanden" S@0 -&gt; S@1 : Session 1\n(cheroliv.com) S@1 -&gt; S@10 S@10 -&gt; S@62 : Session 62\n(plantuml-plugin) S@62 -&gt; S@87 : Session 87\n(Cry 4 help) S@87 -&gt; S@109 : Session 109\n(API Key Pool) S@109 -&gt; S@133 : Session 133\n(Aujourd'hui) @enduml</pre> </div> </div> <div class="paragraph"> <p>Der Zeitstrahl oben zeigt den tatsächlichen Fortschritt. Der Wendepunkt ist die Sitzung 87: dort, wo die Frustration durch wiederholte Rekontextualisierung die Toleranzgrenze überschreitet, und die Eager/Lazy-Methode aufhört, nur eine Idee zu sein, und zur Pflicht wird.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_strategie_eagerlazy_im_detail">Die Strategie: Eager/Lazy im Detail</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_philosophie_angewendeter_informatikkache_für_die_kognition">Philosophie: Angewendeter Informatikkache für die Kognition</h3> <div class="paragraph"> <p>Mein Ansatz lässt sich direkt von der Computer-Cache-Verwaltung inspirieren. Alles, was<strong>kritisch und häufig verwendet</strong>muss sofort zugänglich sein<strong>Eifrig</strong>) Alles, was ist<strong>kontextbezogen oder voluminös</strong>muss auf Anfrage geladen werden (<strong>faul</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 (Dashboard)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Faules (Bedienungsanleitung)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Größe</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt; 100 Zeilen, &lt; 10k Tokens</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Unbegrenzt, detailliert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ladevorgang</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Auto, am Anfang der Sitzung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Auf Anfrage des Agenten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Inhalt</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Absolute Regeln, laufende Mission, kritischer Zustand</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sitzungsarchive, vollständiger Verlauf, detaillierte Verfahren, technische Referenzen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Rolle</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Den Agent sofort orientieren</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Beantworten Sie tiefgründige Kontextfragen</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_die_eager_dateien_das_dashboard">Die Eager-Dateien : Das Dashboard</h3> <div class="paragraph"> <p>Diese Dateien leben im Stammverzeichnis jedes Projekts und werden automatisch vom Agenten am Anfang jeder Sitzung geladen. Sie bilden das<strong>dashboard</strong>-- kritische Information, unmittelbar zugänglich.</p> </div> <div id="diag-eager-lazy" class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam defaultTextAlignment center skinparam wrapWidth 200 package "Projekt-Root (Eager - automatisch geladen)" { component "&lt;b&gt;AGENT.adoc&lt;/b&gt;\nAbsolute Regeln\nStruktur &amp; Konventionen" as AGENT component "&lt;b&gt;PROMPT_REPRISE.adoc&lt;/b&gt; ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam defaultTextAlignment center skinparam wrapWidth 200 package "Projekt-Root (Eager - automatisch geladen)" { component "&lt;b&gt;AGENT.adoc&lt;/b&gt;\nAbsolute Regeln\nStruktur &amp; Konventionen" as AGENT component "&lt;b&gt;PROMPT_REPRISE.adoc&lt;/b&gt; Mission der Sitzung N Zusammenfassung N-1" as PROMPT component "&lt;b&gt;INDEX.adoc&lt;/b&gt; Einstiegspunkt Regeln + Sitzungen" as INDEX component "&lt;b&gt;*_ESSENTIALS.adoc&lt;/b&gt;\nGeschäftskontext\nkritisch" as ESS } package ".agents/ (Lazy - bei Bedarf geladen)" { component "&lt;b&gt;sessions/N-*.adoc&lt;/b&gt;\nDetaillierte Archive\nEntscheidungen &amp; Ausgabe" as SESS component "&lt;b&gt;SESSIONS_HISTORY.adoc&lt;/b&gt;\nZusammenfassungstabelle\nDatum/Typ/Punktzahl" as HIST component "&lt;b&gt;PROCEDURES.adoc&lt;/b&gt; Vorlagen für das Ende der Sitzung 6 Schritte" as PROC component "&lt;b&gt;*_REFERENCE.adoc&lt;/b&gt;\nVollständige Architektur\nTechnische Referenzen" as REF component "&lt;b&gt;COMPLETED_TASKS_ARCHIVE&lt;/b&gt;\nErledigte Aufgaben\nPro Monat" as ARCH component "&lt;b&gt;AGENT_MODUS_OPERANDI.adoc&lt;/b&gt;\nStrategiedokumentation\nMethodik" as MOD component "&lt;b&gt;*_REFERENCE.adoc&lt;/b&gt; Boot tests, A/B partition Spezifische Kontexte" as SPEC } AGENT --&gt; PROMPT : "Referenzen" AGENT --&gt; INDEX : "Referenzen" INDEX --&gt; SESS : "indexiert" INDEX --&gt; HIST : "indexiert" INDEX --&gt; PROC : "Referenz" INDEX --&gt; ARCH : "Referenz" INDEX --&gt; REF : "Referenz" PROMPT --&gt; SESS : "Archiv N-1" PROMPT --&gt; ESS : "Fachkontext" @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>AGENT.adoc</strong>-- Die Hauptdatei. Auf`cheroliv.com`, es sind 200 Zeilen und enthält :</p> </div> <div class="ulist"> <ul> <li> <p>Die absoluten Regeln des Projekts (kein Commit ohne Erlaubnis, kein`rm`ohne Bestätigung)</p> </li> <li> <p>Die Struktur des Projekts und die Codekonventionen</p> </li> <li> <p>Die essentiellen Befehle(<code>./gradlew serve</code>, <code>./gradlew test</code>)</p> </li> <li> <p>Die Epics und das Product Backlog (priorisierte User Stories)</p> </li> <li> <p>Quer-schnittliche Qualitätskriterien (Barrierefreiheit, Responsivität, Kompatibilität)</p> </li> </ul> </div> <div class="paragraph"> <p>Auf`bakery-plugin`, die Regel 0 ist verschieden :<strong>./gradlew -q publishToMavenLocal` erforderlich nach jeder Änderung des Quellcodes</strong>. Weil das Testen des Plugins ohne erneutes Veröffentlichen des lokalen JARs mich eine Stunde gekostet hat, um einen Code zu debuggen, der noch nicht verpackt war.</p> </div> <div class="paragraph"> <p><strong>PROMPT_REPRISE.adoc</strong>-- Die Aufgabe der laufenden Sitzung. Am Ende jeder Sitzung aktualisiert, enthält es:</p> </div> <div class="ulist"> <ul> <li> <p>Die Sitzungsnummer und die Prioritätsmission</p> </li> <li> <p>Zusammenfassung der vorherigen Sitzung (was erledigt wurde, was noch zu tun bleibt)</p> </li> <li> <p>Die Akzeptanzkriterien der aktuellen Sitzung</p> </li> <li> <p>Spezifische technische Hinweise</p> </li> </ul> </div> <div class="paragraph"> <p><strong>.agents/INDEX.adoc</strong>Der Einstiegspunkt. Er fasst die absoluten Regeln, die jüngsten Sitzungen und vor allem das.<strong>Projektportfolio</strong>gérés avec la même méthodologie. À ce jour, cinq projets y figurent : translates to:</p> </div> <div class="paragraph"> <p>mit der gleichen Methodologie verwaltet. Bis heute sind fünf Projekte darin aufgeführt:</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`** -- Ein kürzlich hinzugefügter Beitrag (Session 109, plantuml-plugin) zur weiteren Optimierung des Eager-Kontextes. Anstatt 200 Zeilen des Geschäfts-Kontexts im API-Schlüssel-Pool zu laden, lade ich 50 Zeilen des Wesentlichen und die übrigen 150 Zeilen bleiben im LAZY-Modus in`*_REFERENCE.adoc`. Gemessenes Ergebnis: Übergang von**~25k tokens EAGER zu ~10k tokens**(Gewinn von 60%). Der Agent braucht keine energieintensiven Erinnerungen mehr. ==== Das fehlende Glied:`opencode.json Ich muss Ihnen gestehen, dass ich fast vergessen hätte, es zu dokumentieren. Über allen diesen Dateien `.adoc` befindet sich eine winzige JSON-Datei, ohne die nichts funktioniert. Es heißt`opencode.json`und er ist sechs Zeilen lang. Wörtlich sechs Zeilen. [source,json] ---- { "$schema": "https://opencode.ai/config.json", "instructions": [ "AGENT.adoc" ] } ---- Diese Datei sagt Opencode: « Beim Start laden`AGENT.adoc` automatisch. » Ohne ihn ist der Agent ein leeres Blatt genau wie ich es zu Beginn des Artikels beschrieben habe. Mit ihm hat der Agent bereits die absoluten Regeln, die Projektarchitektur und die essentiellen Befehle in der Hand — bevor ich überhaupt Guten Tag gesagt habe. Ich habe die Bedeutung dieser Datei zufällig entdeckt. Auf`bakery-plugin`, es existierte nicht. Ich fragte mich, warum der Agent auf diesem Projekt systematisch mehr « verloren » war als bei den anderen. Die absoluten Regeln waren gut in`AGENT.adoc`— aber`AGENT.adoc`war nie geladen. Der Agent las nur das, was ich ihm sagte zu lesen, manuell, bei jeder Sitzung. Es war die Sitzung 11 von`bakery-plugin`Als ich die Abwesenheit des bemerkte`opencode.json`. Ich habe es erstellt — und die Sitzung 12 begann wie die anderen. Diese Datei ist für mich jetzt so offensichtlich, dass ich überhaupt nicht mehr daran denke. Ein klassischer Fehler eines Entwicklers, der sein Werkzeug zu gut kennt. Heute erstelle ich es systematisch *avant`AGENT.adoc`. Das ist der erste Stein. ==== Die Dualität von `INDEX.adoc Eine weitere Subtilität, die es wert ist, ausdrücklich benannt zu werden:`INDEX.adoc`lebt in`.agents/`— Dieses Dokument habe ich als LAZY angegeben. Trotzdem führe ich es in all meinen Tabellen als EAGER auf. Hier besteht eine erkennbare Spannung. Die Realität vor Ort: die Dateien`.agents/INDEX.adoc`werden automatisch zu Beginn der Sitzung gut geladen, ebenso wie`AGENT.adoc` et `PROMPT_REPRISE.adoc`. Sie sind in`.agents/`aus organisatorischen Gründen — nicht das Root-Verzeichnis bevölkern — aber ihr Verhalten ist EAGER Auf`plantuml-plugin`, `INDEX.adoc`Es hat 200 Zeilen und enthält die absoluten Regeln *vollständig* mit ihrer Historie (die Lehren aus den vergangenen Sitzungen), die EPICs mit Punktzahlen, und das Projektportfolio. Das ist das Dokument, das der Agent konsultiert, um zu wissen « wo wir stehen ». Auf`bakery-plugin`, er hat 150 Zeilen mit der Roadmap und den neuesten Sitzungen Die freiwillige Redundanz zwischen`AGENT.adoc` et `INDEX.adoc`kann überraschend sein. Absolute Regeln sind in beiden vorhanden. Warum? Weil sie zwei verschiedene Rollen erfüllen: in`AGENT.adoc`, sie sind *explicatives* (das Storytelling der Regel, die gelernte Lektion); in`INDEX.adoc`, sie sind *ausführend* (die nackte Regel, ohne Begründung, für eine schnelle Konsultation). Der Agent liest`AGENT.adoc`einmal zum Verstehen ; er liest es noch einmal`INDEX.adoc`zu jeder Sitzung für *anwenden*. Zwei Verwendungen, zwei Formate. [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ät AGENT.adoc ←→ INDEX.adoc left to right direction rectangle "AGENT.adoc (Wurzel — EAGER)" as AGENT #E3F2FD { rectangle "�📖 **Narratives Format** Das Storytelling der Regel die gelernte Lektion, der Kontext" as NARR rectangle "🏗️ **Vollständige Architektur** Projektstruktur, Komponenten Detaillierter Backlog US" as ARCHI rectangle "📋 **Erklärende Regeln** Warum existiert die Regel? Verlauf des Vorfalls" as EXPL } rectangle "INDEX.adoc\n(.agents/ — EAGER)" as INDEX #E8F5E9 { rectangle "⚡ **Ausführendes Format** Die nackte Regel, ohne Begründung Schnelle Konsultation" as EXEC rectangle "�📊 **Roadmap &amp; EPICs**\nZusammenfassungstabelle\nFortschritt, Score, Priorität" as ROAD rectangle "�🌐 **Projektportfolio** Queransicht 5 synchronisierte Projekte" as PORT } AGENT --&gt; INDEX : "Agent liest AGENT.adoc\n1 Mal zum **verstehen**" INDEX --&gt; AGENT : "Agent liest INDEX.adoc erneut für jede Sitzung zum **anwenden**" 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 ---- Diese akzeptierte Redundanz ist eine Designentscheidung. Sie verbraucht etwa 50 zusätzliche Zeilen von EAGER‑Tokens — aber sie gewährleistet, dass der Agent stets die Regeln vor Augen hat, einschließlich im knappen Format, das sofortige Gehorsam erleichtert. === Die LAZY-Dateien: Das Handbuch des Eigentümers Diese Dateien leben in`.agents/`und werden nur gelesen, wenn der Agent sie benötigt. Sie bilden den wahren Reichtum der Methode, denn sie sammeln das Projektwissen, ohne den aktuellen Kontext zu verunreinigen. [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 (EAGER -- 200 Zeilen)" as IDX #E8F5E9 file "AGENT_SESSION_MANAGER.adoc (Vorlagensitzung)" as ASM file "SESSION_CHECKLIST.adoc\n(Wann ändern)" as CHK file "PROCEDURES.adoc (6 Schritte + LAZY/EAGER)" as PRO file "SESSIONS_HISTORY.adoc (Alle Sitzungen)" as HIS folder "Sitzungen/" as SESS { file "1-chore-migration.adoc" as S1 file "109-Formalisierung-lazy.adoc" as S109 #FFECB3 file "133-epic11-artikel.adoc" as S133 file "... +130 andere" as SMORE } folder "Archive/" as ARCH { file "COMPLETED_TASKS_2026-04.adoc" as CTA file "SESSIONS_HISTORY_83-95.adoc" as SHIST folder "sessions_zusammenfassungen/" 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 --&gt; SESS : "indiziert" IDX --&gt; HIS : "indiziert" IDX --&gt; ARCH : "Referenz" note right of S109 Session 109 = Formalisation stratégie LAZY/EAGER Token : ~25k → ~10k end note @enduml ---- Die obige Baumstruktur zeigt die tatsächliche Ordnerstruktur`.agents/`auf`plantuml-plugin`, das reifste Projekt. Beachte die Tiefe in drei Schichten: Stammdateien (Metadaten), Ordner`sessions/`(chronologische Archive), und Akte`archives/`(Aggregationen und Zusammenfassungen). Diese Tiefe verwandelt die Governance einer einfachen TODO-Datei in eine**vollständiges organisatorisches Gedächtnis**. **.agents/sitzungen/{N}-{titel}.adoc**Die detaillierten Aufzeichnungen jeder Sitzung. Derzeit: * `plantuml-plugin` : **133 archivierte Sitzungen**(von der Sitzung 1 bis 133) * `bakery-plugin`:**11 Sitzungen** * `magic-stick` : **23 Sitzungen** * `cheroliv.com`:**9 formelle Sitzungen**+ 7 Sitzungen vor dem System wurden rückwirkend rekonstruiert Jedes Archiv enthält den vollständigen Kontext der Sitzung, die getroffenen Entscheidungen, die aufgetretenen Probleme und deren Lösung, die ausgeführten Befehle und ihre Ausgabe. **.agents/SESSIONS_HISTORY.adoc**-- Eine Zusammenfassungstabelle aller Sitzungen mit einem Score. Beispiel auf`cheroliv.com` : ---- | -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 **.agents/COMPLETED_TASKS_ARCHIVE_{mois}.adoc**Abgeschlossene Aufgaben werden monatlich archiviert, um den aktiven Backlog nicht zu überladen. Wenn eine User Story abgeschlossen ist, wird sie hierhin verschoben. Der Backlog bleibt übersichtlich: maximal 10 aktive Elemente. **.agents/PROCEDURES.adoc**-- Detaillierte Vorlagen des Sitzungsende-Verfahrens. Lang, aber nur einmal vom Agenten gelesen, wenn er die Methode lernt. Dann wird das Verfahren mechanisch. **.agents/AGENT_MODUS_OPERANDI.adoc**-- Die vollständige strategische Dokumentation. Auf`plantuml-plugin`, Diese Datei macht**900+ Zeilen**und er/sie heißt tatsächlich`AGENT_METHODOLOGIES.adoc`— Ich habe den Namen zwischen dem Schreiben dieses Artikels und der praktischen Implementierung geändert. Diese Art von Namensabweichung ist in einem sich entwickelnden handwerklichen System unvermeidlich. Wichtig ist die Namenskonvention: Wenn die Datei die *Methode* dokumentiert, beginnt sie mit`AGENT_`oder ein explizites Präfix. Es dokumentiert die Eager/Lazy-Methodik, die zu befolgenden Muster, die zu vermeidenden Anti-Muster. Es ist LAZY, weil ein Agent nicht die gesamte Strategie in jeder Sitzung nachlesen muss, nur wenn es Unklarheit gibt. **`*_REFERENCE.adoc`** -- Die projektspezifischen technischen Referenzen. Auf`magic-stick`, zwei dichte LAZY Dateien: * `AB_PARTITION_REFERENCE.adoc`(147 Zeilen) -- Architektur Partition A/B GPT, Skripte`update-system.sh`, geschätzte Größen, Rollback-Mechanismus * `BOOT_TEST_REFERENCE.adoc`(144 Zeilen) -- Verfahren QEMU + VNC zum Testen des Boots der ISO ohne physische Hardware, Checkliste BIOS/UEFI, Einschränkungen CI/CD Auf`plantuml-plugin`: * `ARCHITECTURE.adoc`(134 Zeilen) -- Struktur der 11 Data-Klassen, Aufmerksamkeitspunkte (zu vermeidende Fallstricke), optimierte Testbefehle * `API_KEY_POOL_REFERENCE.adoc`-- Vollständige Details des Schlüsselpools (LAZY während`ESSENTIALS`ist EAGER) == Die Spezialagenten: Ein virtuelles Team Die Governance beschränkt sich nicht auf passive Dateien. Ich habe formalisierte**Rollen spezialisierter Agenten**in dedizierten LAZY-Dateien, die den erwarteten Workflow je nach Aufgabentyp definieren. |=== |Agent |Datei |Rolle |Projekt |**kodieren** |`CODER.adoc` |Implementierung FTL/CSS/JS, semantische Tags, Zugänglichkeitskriterien |cheroliv.com |**Scrum-Master** |`SCRUM_MASTER.adoc` |US-Planung, Aufteilung in Unteraufgaben, Erkennung der Abhängigkeiten |cheroliv.com |**PlantUML-Designer** |`PLANTUML_DESIGNER.adoc` |Erstellung von Diagrammen, PUML-Syntax, JBake-Integration |cheroliv.com |=== Die Datei`CODER.adoc`auf`cheroliv.com`enthält konkrete Regeln: _einzige`&lt;h1&gt;`pro Seite_, _Pfade mit Präfix versehen`${content.rootpath}`_, _Die Sprache deklarieren`&lt;html lang="${content.lang!"fr"}"&gt;`_. Diese Konventionen, einmal geschrieben, werden vom Agenten seit Sitzung 1 automatisch eingehalten. Die Datei`SCRUM_MASTER.adoc`Vorgibt eine Lieferstruktur :**Ziel**, **Aufgaben**(Koordinaten mit Zuweisung)**Akzeptanzkriterien**, **Risiken**. Wenn ich einen Aktionsplan anfordere, erstellt der Agent diese Struktur, ohne dass ich sie verlangt habe. Die Governance**Programm**der Agent. ==== Wenn die Spezialagenten unverzichtbar werden Die Erstellung der spezialisierten Agenten folgt einer natürlichen Kurve. Zu Beginn eines Projekts brauchen Sie sie nicht —`AGENT.adoc`reicht völlig aus. Aber wenn das Projekt wächst (sagen wir, über 20 Sitzungen), sollten zwei Signale Sie alarmieren: 1. Der Agent mischt die Konventionen zweier unterschiedlicher Bereiche (z.B. PlantUML-Syntax und CSS-Regeln) 2. Du verbringst mehr Zeit damit, den Agenten wegen Konventionen zu korrigieren, die du ihm bereits fünfmal erklärt hast. Auf`cheroliv.com`, es ist in der Sitzung passiert... 1. Ja, von Anfang an. Weil dieses Projekt eine Website mit drei Sprachen (FTL, CSS, JS) ist, AsciiDoc-Inhalt und PlantUML-Diagramme enthält — drei Bereiche, die nichts gemeinsam haben. Der Agent CODER muss die Schriftgrößen und Media Queries kennen; der Agent PLANTUML_DESIGNER muss die Syntax kennen.`@startuml`. Ohne Trennung bot mir der CODER-Agent Diagramme an, und umgekehrt. Das Chaos. auf`jhipster-gradle-plugins`, ich habe zwei spezialisierte Agenten für die Entwicklung von Gradle-Plugins erstellt:`PLUGIN_DEVELOPER.adoc` et `BACKLOG_MANAGER.adoc`. Der erste kodiert alle Kotlin/Gradle-Konventionen (keine`!!`, Datenklassen für die Modelle,`@TaskAction`pour die Aufgaben). Der Zweite weiß, dass`persistence`muss stabil sein bevor`assistant`startet seine Entwicklung nicht — eine kritische Abhängigkeit in einem Monorepo. Der Fehler, den man nicht machen sollte: zu viele Agenten zu früh erstellen.`plantuml-plugin`hat die Session 108 abgewartet, bevor ein spezialisierter Agent für den Pool von API-Schlüsseln formalisiert wurde. Bis dahin lag der fachliche Kontext in`AGENT.adoc`. Die Faustregel: Ein spezialisierter Agent ist gerechtfertigt, wenn sein Fachgebiet mehr als 100 Dokumentationszeilen umfasst. ==== Die Namenskonvention der Sitzungen Ein Detail, das trivial erscheint, aber kritisch wird, wenn man 100 Sitzungen erreicht hat. Wie sollen die Archivdateien benannt werden? Ich habe auf die harte Tour gelernt, dass eine Konvention notwendig ist — vier Projekte, vier unterschiedliche Formate zu Beginn, und ich habe den Überblick verloren. Heute ist die Konvention, die ich festgelegt habe, :</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> <div class="paragraph"> <p>{N}-{type}-{sujet-kebab-case}.adoc</p> </div> <div class="listingblock"> <div class="content"> <pre>Konkrete Beispiele: * `1-chore-migration-gouvernance-agent.adoc`— Sitzung 1, Typ Aufgabe * `10-solidification-tests.adoc`— Sitzung 10, ohne expliziten Typ (das Subjekt reicht aus) * `036-debug-graphify-symlink-epic9.adoc`— Sitzung 36 mit dreistelliger Nummer für die Sortierung Die Sitzungsnummer ist das Hauptkriterium für die Sortierung. Projekte, die Nummern mit drei Stellen (001, 036, 133) verwenden, vermeiden Probleme bei der lexikografischen Sortierung, wenn man über 99 hinausgeht. Das ist, was ich jetzt auf`magic-stick`(Note: The user provided no text to translate after the colon, so the output is empty.)`001-init-projet.adoc`, `036-debug-graphify-symlink-epic9.adoc`. Der Typ ist optional und wird aus den Session-Schlüsselwörtern abgeleitet (debug, feature, refactor, docs, chore, test). Der Betreff im kebab-case ist der wichtigste Teil: Er muss es ermöglichen, eine Sitzung ohne Öffnen der Datei wiederzufinden. Wenn du dich fragst, welche Sitzung das war, in der wir den Timeout der Integrations-Tests behoben haben, lautet die Antwort`124-fix-timeout-integration-test.adoc`. Für die historisch rekonstruierten Sitzungen (Projekte, die vor der Governance entstanden sind), verwende ich negative Zahlen. Auf`cheroliv.com`, die Sitzungen -6 bis 0 decken die gesamte Vor-Governance-Geschichte des Projekts ab. Und für die Sitzungen « nicht dokumentiert » oder verloren, erstelle ich einen Eintrag in`SESSIONS_HISTORY.adoc`Ohne entsprechendes Archiv, mit einer Punktzahl`?`. Es ist ehrlicher als vorzutäuschen. [plantuml, format=svg, id=diag-naming-convention, alt="Arbre de décision pour le nommage des fichiers de session"]</pre> </div> </div> <div class="paragraph"> <p>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 200</p> </div> <div class="paragraph"> <p>title Namenskonvention für Sitzungen start</p> </div> <div class="paragraph"> <p>:Une session se termine; note right: Trigger "Ende der Sitzung"</p> </div> <div class="paragraph"> <p>if (Session antérieure\nà la gouvernance ?) then (oui) :Numéro <strong>NÉGATIF</strong>\n-6, -5 &#8230;&#8203; 0; note right: Historique\nreconstitué :Suffixe : reconstitution; else (non) :Numéro <strong>POSITIF</strong>\nsur 3 chiffres si &gt; 99; note right: 001, 036, 133\npour le tri lexicographique</p> </div> <div class="literalblock"> <div class="content"> <pre>: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</pre> </div> </div> <div class="literalblock"> <div class="content"> <pre> :Formuler le **SUJET** en kebab-case; note right Ex: fix-timeout-integration-test Doit permettre de retrouver sans ouvrir le fichier end note endif</pre> </div> </div> <div class="paragraph"> <p>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</p> </div> <div class="paragraph"> <p>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 <strong>?</strong>\n<strong>sans archive</strong>; note right: L&#8217;honnêteté\nplutôt que le vide endif</p> </div> <div class="paragraph"> <p>stop @enduml</p> </div> <div class="listingblock"> <div class="content"> <pre>==== TEST_COVERAGE_ANALYSIS.adoc` — Der Schritt 5 im Detail Schritt 5 des Verfahrens zur Sitzungsbeendigung ist das Geheimnisvollste. Sie sagt « Aktualisieren`TEST_COVERAGE_ANALYSIS.adoc`Wenn Tests hinzugefügt oder geändert wurden. » Wie sieht diese Datei aus? auf`plantuml-plugin`, er hat sich von einigen Zeilen zu einer vollständigen Struktur entwickelt. Hier ist seine stabile Form : [source]</pre> </div> </div> </div> </div> </div> <h1 id="_analyse_de_couverture_de_tests" class="sect0">Analyse de Couverture de Tests</h1> <div class="sect1"> <h2 id="_suivi_des_tests">Suivi des Tests</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"><p class="tableblock">Classe de test</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Type</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tests</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Statut</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dernière MAJ</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PlantumlServiceTest</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">unit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">45/45</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ PASS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2026-04-23</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">ApiKeyPoolTest</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">integration</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">15/15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ PASS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2026-04-20</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_historique_par_session">Historique par Session</h2> <div class="sectionbody"> <div class="paragraph"> <p>| Session | Tests ajoutés | Tests modifiés | Couverture | 133 | 0 | 2 | 100% | 132 | 5 | 0 | 100%</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> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">----</p> <p class="tableblock">Das Interesse liegt nicht in der Datei selbst — es besteht darin, <strong>zu notieren</strong>, was sich geändert hat. Ohne diesen Schritt wissen Sie nach 50 Sitzungen nicht mehr, welche Tests was abdecken. Der Agent weiß es auch nicht. Die Datei wird zur einzigen Quelle der Wahrheit über die Testabdeckung des Projekts.</p> <p class="tableblock">Für Projekte ohne traditionelle Tests (wie`magic-stick`der Bash-Skripte testet), Schritt 5 wird ersetzt durch`SCRIPT_VERIFICATION.adoc`. Der Mechanismus ist derselbe: Eine Datei, die den Validierungszustand der Skripte verfolgt. Passen Sie Schritt 5 an Ihr Projekt an, aber überspringen Sie sie niemals. Sie ist das Sicherheitsnetz, das eine stille Regression verhindert.</p> <p class="tableblock">Wenn Ihr Projekt <strong>keinen</strong> Test hat — weder unitär, noch funktional, noch ein Skript — erstellen Sie trotzdem die leere Datei mit einem Abschnitt « To do: Eine Teststrategie definieren. » Das ist ein Lesezeichen, das Ihrem zukünftigen Selbst erinnern wird, dass dieses Thema noch nicht behandelt wurde.</p> <p class="tableblock">[plantuml, format=svg, id=diag-session-flow, alt="Flux d&#8217;une session type avec Eager/Lazy et agents"] ---- @startuml skinparam backgroundColor #FEFEFE</p> <p class="tableblock">start</p> <p class="tableblock">:Début session; note right: L&#8217;agent est une page blanche</p> <p class="tableblock">:Chargement EAGER auto; note right * AGENT.adoc (règles absolues) * PROMPT_REPRISE.adoc (mission N) * INDEX.adoc (état projet) end note</p> <p class="tableblock">if (Mission claire ?) then (oui) :Exécution directe; else (non) :Charge LAZY sur demande; note right * SESSIONS_HISTORY.adoc (contexte passé) * sessions/{N-1}-<strong>.adoc (décisions) * *<em>REFERENCE.adoc (architechture) end note endif</p> <p class="tableblock">:Délégation agent spécialisé ?;</p> <p class="tableblock">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</p> <p class="tableblock">:Travail de la session;</p> <p class="tableblock">:Fin de session (trigger utilisateur);</p> <p class="tableblock">:Procédure 6 étapes; note right 1. Archive sessions/N-</strong>.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</p> <p class="tableblock">:Checklist [✅] x 6;</p> <p class="tableblock">stop @enduml ----</p> <p class="tableblock">Das Diagramm oben zeigt den vollständigen Lebenszyklus einer Sitzung. Der wesentliche Punkt ist die Verzweigung nach dem EAGER-Laden: Entweder ist die Mission klar genug, um sie direkt auszuführen (80% der Fälle), oder der Agent lädt das LAZY, um eine Mehrdeutigkeit zu lösen (20% der Fälle). Es ist diese Unterscheidung, die Tokens spart.</p> <p class="tableblock">== Die Prozedur des Sitzungsendes: Die Goldene Regel</p> <p class="tableblock">=== Warum sie unverzichtbar ist</p> <p class="tableblock">Ohne diese Prozedur ist die Eager/Lazy‑Strategie sinnlos. Sie ist es, die die Arbeit der Sitzung in persistente Informationen umwandelt. Sie wird ausgeführt<strong>auf explizite Anforderung des Benutzers</strong>(Schlagwörter: "Ende der Sitzung", "Ich verlasse", usw.), und sie ist<strong>obligatorisch</strong>-- keine Ausnahme, keine Auslassung.</p> <p class="tableblock">Die Datei`SESSION_CHECKLIST.adoc`definiert ideale Sitzungsmetriken :</p> <p class="tableblock">* Dauer: 15-30 Minuten * Geänderte Dateien: bis zu 3 * LLM-Austausch : 5-10 Nachrichten * Kontexttokens: &lt; 50k</p> <p class="tableblock">Und Anzeichen, dass man die Sitzung wechseln sollte: _Der LLM wiederholt bereits korrigierte Fehler</em>, <em>Mehr als 3 gleichzeitig geänderte Dateien</em>, <em>Konversation &gt; 50 Nachrichten</em>. Die goldene Regel:<strong>Besser sind fünf Sitzungen à 20 Minuten als eine Sitzung von zwei Stunden mit chaotischem Debugging.</strong></p> <p class="tableblock">=== Der Fluss der 6 Schritte (stillschweigend)</p> <p class="tableblock">[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</p> <p class="tableblock">start :L&#8217;utilisateur dit "Ende der Sitzung"; note right: Mots-clés déclencheurs</p> <p class="tableblock">:Agent détecte le trigger;</p> <p class="tableblock">:Étape 1\nCréer archive\n`.agents/sessions/N-<strong>.adoc`; note right: Tout le contexte de la session</p> <p class="tableblock">:Étape 2\nMettre à jour\n`PROMPT_REPRISE.adoc`; note right: Mission N + critères d&#8217;acceptation N+1</p> <p class="tableblock">:Étape 3\nMettre à jour\n`SESSIONS_HISTORY.adoc`; note right: Ligne récap : # / Date / Type / Sujet / Score</p> <p class="tableblock">:Étape 4\nMettre à jour\n`INDEX.adoc`; note right: État courant, roadmap, fichiers modifiés</p> <p class="tableblock">:Étape 5\nMettre à jour\n`TEST_COVERAGE_ANALYSIS.adoc`; note right: Si tests ajoutés ou modifiés</p> <p class="tableblock">:Étape 6\nMettre à jour\n`COMPLETED_TASKS_ARCHIVE.adoc`; note right: Archiver tâches terminées</p> <p class="tableblock">:Afficher la checklist de confirmation; note right: Vérifier que chaque [✅] est mérité</p> <p class="tableblock">stop @enduml ----</p> <p class="tableblock">=== Die Ergebnisse von 150+ Sitzungen</p> <p class="tableblock">Hier ist das Ergebnis dieses Verfahrens, das systematisch auf meine vier Projekte angewendet wird.</p> <p class="tableblock"><strong>plantuml-plugin</strong> :</p> <p class="tableblock">* <strong>133 Sitzungen</strong>seit Beginn des Projekts * <strong>240/240 Tests bestanden</strong>(100% Abdeckung)&#8201;&#8212;&#8201;EPICs 1-7 abgeschlossen * <strong>57 Szenarien Cucumber BDD</strong>validiert * Sicherheitsregel für Konfigurationsdateien, die aus einem realen Fehler entstanden ist (Session 2 bakery-plugin)</p> <p class="tableblock"><strong>bakery-plugin</strong>:</p> <p class="tableblock">* <strong>11 Sitzungen</strong>in zwei Wochen * Migration Supabase → Firebase abgeschlossen (9 Tests korrigiert) * EPIC 6 (publishProfile) funktionsfähig in der Produktion * Regel 0 erstellt:`publishToMavenLocal`obligatorisch nach jeder Änderung</p> <p class="tableblock"><strong>Zauberstab</strong>:</p> <p class="tableblock">* <strong>23 Sitzungen</strong>Um ein Live-Xubuntu-System mit A/B-Partition zu erstellen * Erste ISO in Sitzung 10 generiert * Formalisierte Boot-Tests von QEMU + VNC (LAZY-Dokumentation von 144 Zeilen) * Funktionierendes CI/CD SourceForge</p> <p class="tableblock"><strong>cheroliv.com</strong>:</p> <p class="tableblock">* <strong>9 formelle Sitzungen</strong>+ Rekonstruktion von 7 Vorsystem-Sitzungen * Artikel 0101 (OpenCode PATH) veröffentlicht * Artikel 0108 (dieser) wurde nach Analyse seiner Lücken überarbeitet. * Vollständig migrierte Governance von Markdown nach AsciiDoc</p> <p class="tableblock">=== Die finale Checkliste</p> <p class="tableblock">Nach der stillen Ausführung der 6 Schritte muss der Agent eine Bestätigungs-Checkliste anzeigen:</p> <p class="tableblock">----</p> <p class="tableblock">✅ Procédure de fin de session exécutée 📋 Checklist :</p> <p class="tableblock"><strong>Absolute Regel</strong>: kein Schritt kann markiert werden`[✅]<code>wenn die Datei nicht tatsächlich geändert und überprüft wurde.</p> <p class="tableblock">== Der Bootstrap-Leitfaden: Tag 1, Sitzung 0</p> <p class="tableblock">Sie sind von der Methode überzeugt. Sie wollen sie auf ein neues Projekt anwenden. Wo sollen Sie anfangen?</p> <p class="tableblock">Ich habe diesen Moment am 28. April 2026 erlebt. Ich öffne Opencode auf`jhipster-gradle-plugins</code>, mein Mono-Repo aus zwei Gradle-JHipster-Plugins. Das ist ein Projekt, das bereits existiert — der Code ist dort, die Gradle-Tasks funktionieren. Aber die Agenten-Governance? Null. Leere Seite. Wie`plantuml-plugin`Bei seiner Sitzung 1, es gibt Monate.</p> <p class="tableblock">Hier ist das exakte Verfahren, das ich befolgt habe, und das ich für jedes neue Projekt befolgen werde. Achten Sie genau auf die Reihenfolge — sie ist wichtig.</p> <p class="tableblock">[plantuml, format=svg, id=diag-bootstrap, alt="Flux de bootstrap en 6 étapes pour initialiser la gouvernance agent sur un nouveau projet"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 250 skinparam activityBackgroundColor #E8F5E9</p> <p class="tableblock">title Bootstrap Governance — Tag 1, Session 0 start :Étape 0\nCréer <strong>opencode.json</strong>\n(6 lignes, instructions: AGENT.adoc); note right: Le pont qui charge\nAGENT.adoc automatiquement</p> <p class="tableblock">:Étape 1\nCréer les dossiers\n<strong>mkdir -p .agents/sessions/ .agents/archives/</strong>; note right: Les conteneurs vides\navant que l&#8217;agent écrive dedans</p> <p class="tableblock">:Étape 2\nCréer <strong>AGENT.adoc</strong>\n(200 lignes, règles absolues); note right: Le fichier maître\nStructure minimale v1</p> <p class="tableblock">:Étape 3\nCréer <strong>PROMPT_REPRISE.adoc</strong>\nMission session 1 (max 70 lignes); note right: Ce que l&#8217;agent doit\nfaire à la prochaine session</p> <p class="tableblock">:Étape 4\nCréer <strong>.agents/INDEX.adoc</strong>\nRègles exécutives + roadmap; note right: Point d&#8217;entrée EAGER\ndans le dossier LAZY</p> <p class="tableblock">:Étape 5\nCréer les fichiers LAZY structurants\n6 fichiers : SESSIONS_HISTORY, CHECKLIST, etc.; note right • SESSIONS_HISTORY.adoc • SESSION_CHECKLIST.adoc • PROCEDURES.adoc • AGENT_SESSION_MANAGER.adoc • TEST_COVERAGE_ANALYSIS.adoc • Agents spécialisés (si besoin) end note</p> <p class="tableblock">:Étape 6\nAjouter le projet au Portefeuille\nMettre à jour TOUS les INDEX.adoc existants; note right: Maintenance transverse\nObligatoire mais fastidieuse</p> <p class="tableblock">:✅ Bootstrap terminé\nSession 1 prête; note right: 20 minutes investies\nDes centaines économisées</p> <p class="tableblock">stop @enduml ----</p> <p class="tableblock">=== Schritt 0: <code>opencode.json</code> erstellen</p> <p class="tableblock">Es ist die erste Datei. Nicht`AGENT.adoc`, nicht`INDEX.adoc`.<code>opencode.json`Zunächst, aus einem einfachen Grund : Wenn du erstellst`AGENT.adoc`Du wirst vergessen, die Brücke zu erstellen, die ihn automatisch auflädt. Ich habe es auf`bakery-plugin</code>, ich weiß, wovon ich spreche.</p> <p class="tableblock">=== Schritt 1 : Ordner erstellen</p> <p class="tableblock">[source,bash] ---- mkdir -p .agents/sessions .agents/archives ----</p> <p class="tableblock">Zwei leere Ordner.<code>sessions/`wird die Archive jeder Sitzung erhalten.`archives/`Erhält die monatlichen COMPLETED_TASKS_ARCHIVE. Diese Ordner müssen existieren *avant</strong>, dass der Agent hineinschreiben muss. Ein Agent, der sowohl den Ordner als auch die Datei gleichzeitig erstellen muss, ist ein Agent, der stillschweigend fehlschlagen kann.</p> <p class="tableblock">=== Schritt 2: Erstellen `AGENT.adoc</code> — Die Hauptdatei</p> <p class="tableblock">Minimalstruktur für die erste Version (sie wird wachsen) :</p> <p class="tableblock">[source] ---- = {NOM_PROJET} — Directives Agent</p> <p class="tableblock">[CAUTION] ----</p> <p class="tableblock"><strong>Obligatorischer Halt</strong>vor rm, Write, Löschung :</p> <p class="tableblock">1. Die Datei vollständig lesen 2. git ls-files überprüfen 3. FORDERN bestätigung 4. WARTEN "ja</p> <p class="tableblock">== Projekt</p> <p class="tableblock"><strong>Name</strong>&#8230;&#8203; <strong>Stapel</strong>: &#8230;&#8203; <strong>Dokumentation</strong>: AsciiDoc</p> <p class="tableblock">== Absolute Regeln</p> <p class="tableblock">=== 0. Entwicklungsumgebung</p> <p class="tableblock">Wesentliche Befehle&#8230;&#8203;</p> <p class="tableblock">=== 1. COMMITS/GIT</p> <p class="tableblock">Formelles Verbot&#8230;&#8203;</p> <p class="tableblock">=== 1b. KONFIGURATIONSDATEIEN — ABSOLUTE SICHERHEITSREGEL</p> <p class="tableblock">Niemals zerquetschen&#8230;&#8203;</p> <p class="tableblock">=== 2. TESTS AM ENDE DER SITZUNG</p> <p class="tableblock">Formelles Verbot&#8230;&#8203;</p> <p class="tableblock">=== 3. Verfahren zum Abschluss der Sitzung</p> <p class="tableblock">Die 6 obligatorischen Schritte&#8230;&#8203;</p> <p class="tableblock">== Kontextverwaltung — LAZY/EAGER</p> <p class="tableblock">Dateien EAGER / Dateien LAZY&#8230;&#8203;</p> <p class="tableblock">Dieses minimale Template ermöglicht es dem Agenten, zu starten. Die reiche Version — mit der Projektstruktur, den Schlüsselkomponenten, den EPICs und dem Backlog — wird in Sitzung 1 kommen, wenn der Agent bereits die Grundregeln in der Hand hat und dir dabei helfen kann, das Dokument zu bereichern.</p> <p class="tableblock">=== Schritt 3 : Erstellen <code>PROMPT_REPRISE.adoc</code> — Die Mission Session 1</p> <p class="tableblock">Eine Datei, die explizit sagt: « 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&#8217;utilisateur).</p> <p class="tableblock">=== Schritt 4: Erstellen <code>.agents/INDEX.adoc</code> — Der Einstiegspunkt</p> <p class="tableblock">Die Datei, die die absoluten Regeln (executive Version) und die Sitzungstabelle enthalten wird. Für das Bootstrap listet sie die Regeln 0 bis 3 in ihrer kompakten Form, das Projektportfolio (einschließlich des neuen Projekts mit dem Emoji 🆕) und die leere Roadmap, bereit zur Auffüllung.</p> <p class="tableblock">=== Schritt 5: Erstellen der LAZY strukturierenden Dateien</p> <p class="tableblock">In der Reihenfolge:</p> <p class="tableblock">1. <code>.agents/SESSIONS_HISTORY.adoc</code>— eine Tabelle mit nur der Session 0 2. <code>.agents/SESSION_CHECKLIST.adoc</code>— Template « Wann Sitzung wechseln 3. <code>.agents/PROCEDURES.adoc</code>— die vollständige Prozedur der 6 Schritte + EAGER/LAZY 4. <code>.agents/AGENT_SESSION_MANAGER.adoc</code>— die Archivvorlage 5. <code>.agents/TEST_COVERAGE_ANALYSIS.adoc</code>— die Testverfolgungstabelle, zu Beginn leer</p> <p class="tableblock">Wenn Ihr Projekt ein komplexes Geschäftsfeld hat (wie`jhipster-gradle-plugins`mit seinem Mono-Repo persistence/assistant), stellt die spezialisierten Agenten jetzt :</p> <p class="tableblock">1. <code>.agents/PLUGIN_DEVELOPER.adoc</code>— die Coding‑Richtlinien und die Boundary der Abhängigkeiten (bei einem Plugin) 2. <code>.agents/BACKLOG_MANAGER.adoc</code>— die Planungsstruktur und die identifizierten Risiken</p> <p class="tableblock">Erstelle keine Agenten, die du nicht verwenden wirst. Ein Agent ohne konkrete Konventionen für das Codieren ist eine tote Datei, die verschmutzt.<code>.agents/</code>.</p> <p class="tableblock">=== Schritt 6 : Das Projekt zum Portfolio aller Projekte hinzufügen</p> <p class="tableblock">Das ist der Schritt, den wir systematisch vergessen. Jede`INDEX.adoc`Für jedes Projekt enthält ein Tabelle « Projektportfolio », die alle Projekte mit derselben Methodik auflistet. Wenn Sie ein neues Projekt erstellen, müssen Sie:</p> <p class="tableblock">1. Eine Zeile im Portfolio des neuen Projekts (logisch) hinzufügen 2. Füge eine Zeile in das Portfolio ALLER vorhandener Projekte ein — ja, alle</p> <p class="tableblock">Über meine vier (jetzt fünf) Projekte, bedeutet das öffnen die`INDEX.adoc` de <code>magic-stick</code>, <code>bakery-gradle</code>, <code>cheroliv.com</code>, `plantuml-gradle`und die Zeile dort hinzufügen`jhipster-gradle-plugins</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Session 1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&#8230;&#8203;</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2026-04-28 🆕<code>.</p> <p class="tableblock">Es ist mühsam. Es ist manuell. Es ist auch die einzige Möglichkeit, sicherzustellen, dass der Agent weiß, welche anderen Projekte existieren und welchen Status sie haben, unabhängig davon, an welchem Projekt Sie arbeiten. In der Sitzung 012 von`magic-stick</code>, der Agent hat zwei Unstimmigkeiten im Portfolio festgestellt —<code>bakery-gradle`Er hatte sein `COMPLETED_TASKS_ARCHIVE</code> im Rückstand, und`plantuml-gradle`Es gab eine Diskrepanz zwischen seiner Verfahrensdokumentation (5 Schritte) und seinem INDEX (6 Schritte). Ohne diese Querverweistabelle wären diese Unstimmigkeiten unsichtbar geblieben.</p> <p class="tableblock">[plantuml, format=svg, id=diag-portfolio-graph, alt="Graphe du portefeuille de projets — références croisées entre INDEX.adoc"] ---- @startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam nodeBackgroundColor #E3F2FD</p> <p class="tableblock">title Projektportfolio — Kreuzverweise INDEX.adoc node "<strong>magic-stick</strong> Session 037 SCRIPT_VERIFICATION" as MS #E1BEE7 node "<strong>bakery-gradle</strong> Sitzung 11 TEST_COVERAGE" as BG #FFE0B2 node "<strong>cheroliv.com</strong> Sitzung 10 TEST_COVERAGE" as CH #C8E6C9 node "<strong>plantuml-gradle</strong> Session 133 TEST_COVERAGE" as PG #BBDEFB node "<strong>jhipster-gradle</strong> Session 1 🆕 TEST_ABDECKUNG" as JG #FFCDD2</p> <p class="tableblock">MS -&#8594; BG : INDEX.adoc référence MS -&#8594; CH : INDEX.adoc référence MS -&#8594; PG : INDEX.adoc référence MS -&#8594; JG : INDEX.adoc référence 🆕</p> <p class="tableblock">BG -&#8594; MS : INDEX.adoc référence BG -&#8594; CH : INDEX.adoc référence BG -&#8594; PG : INDEX.adoc référence BG -&#8594; JG : INDEX.adoc référence 🆕</p> <p class="tableblock">CH -&#8594; MS : INDEX.adoc référence CH -&#8594; BG : INDEX.adoc référence CH -&#8594; PG : INDEX.adoc référence CH -&#8594; JG : INDEX.adoc référence 🆕</p> <p class="tableblock">PG -&#8594; MS : INDEX.adoc référence PG -&#8594; BG : INDEX.adoc référence PG -&#8594; CH : INDEX.adoc référence PG -&#8594; JG : INDEX.adoc référence 🆕</p> <p class="tableblock">JG -&#8594; MS : INDEX.adoc référence JG -&#8594; BG : INDEX.adoc référence JG -&#8594; CH : INDEX.adoc référence JG -&#8594; PG : INDEX.adoc référence</p> <p class="tableblock">note bottom of JG Quand on ajoute un projet : • 4 INDEX.adoc à mettre à jour • 1 ligne par portefeuille • Coût : 5 minutes end note</p> <p class="tableblock">legend bottom</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">= Couleur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">= Projet</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;#E1BEE7&gt;</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">magic-stick — ISO Linux live</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;#FFE0B2&gt;</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bakery-gradle — Plugin JBake</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;#C8E6C9&gt;</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com — Site personnel</p></td> <td class="tableblock halign-left valign-top"></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;#BBDEFB&gt;</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">plantuml-gradle — Plugin IA</p></td> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;#FFCDD2&gt;</p></td> </tr> </tbody> </table> </div> </div> Warum zeigte `serve` eine hässliche Website an, während `publishSite` perfekt war 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="#_die_szene_vier_screenshots_zwei_renderings">Die Szene: vier Screenshots, zwei Renderings</a> <ul class="sectlevel2"> <li><a href="#_lokales_rendern">Lokales Rendern</a></li> <li><a href="#_online_rendering">Online-Rendering</a></li> </ul> </li> <li><a href="#_die_diagnose_serve_zeigte_nicht_auf_den_richtigen_ordner">Die Diagnose: <code>serve</code> zeigte nicht auf den richtigen Ordner.</a></li> <li><a href="#_die_ursache_jbake_cli_funktioniert_nicht_so">Die Ursache: JBake CLI funktioniert nicht so.</a></li> <li><a href="#_die_lösung_positionale_argumente_keine_flags">Die Lösung: positionale Argumente, keine Flags</a></li> <li><a href="#_schnelle_überprüfung_mit_curl">Schnelle Überprüfung mit curl</a></li> <li><a href="#_warum_war_dieser_bug_tückisch">Warum war dieser Bug tückisch?</a></li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit: 10 minutes</div> <p>Kennst du diesen Moment, wenn deine lokale Seite überhaupt nicht gut aussieht, aber sobald sie online bereitgestellt wird, ist alles bestens? Das ist mir mit meinem Gradle-JBake-Plugin passiert. Die Aufgabe`serve`Es zeigte quadratische Buttons, dunklen Text auf schwarzem Hintergrund und ein seltsam fehlendes CSS. Doch`publishSite`Erzeugte dieselbe Website, und zwar tadellos. Der Schuldige war weder das CSS, noch der Browser, noch der Cache. Es war eine Zeile Kotlin-Code — und eine schlechte Angewohnheit bei den Kommandozeilenargumenten.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Klopfen</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_vier_screenshots_zwei_renderings">Die Szene: vier Screenshots, zwei Renderings</h2> <div class="sectionbody"> <div class="paragraph"> <p>Es war nach einem Systemabsturz. Ich hatte vier Screenshots gemacht, um die lokale Wiedergabe zu vergleichen (<code>./gradlew serve`auf`localhost:8820</code>) mit dem Online-Rendering (`publishSite`Auf GitHub Pages). Zwei Screenshots pro Seite: oben und unten.</p> </div> <div class="sect2"> <h3 id="_lokales_rendern">Lokales Rendern</h3> <div class="paragraph"> <p><strong>Kopf der Seite</strong>— Die Schaltflächen <strong>Project</strong> und <strong>Template</strong> sind<strong>kleine, rechteckige</strong>, mit den Standardfarben (blau und grün). Die Karte <strong>Start Writing</strong> hat ein<strong>einfarbiger schwarzer Hintergrund</strong>, ohne Rahmen.</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>Seitenfuß</strong>— Der Untertitel <strong>"Letzte Artikel und Ressourcen"</strong> ist<strong>quasi-unlesbar</strong>, zu dunkel auf schwarzem Hintergrund. Die Daten unter den Blog-Bildern („17. Oktober 2013“ usw.) sind<strong>abwesend</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="_online_rendering">Online-Rendering</h3> <div class="paragraph"> <p><strong>Seitenkopf</strong>— Die gleichen Tasten sind<strong>große, Schafe, flashiges Neon-Grün</strong>, Text in Großbuchstaben. Die Karte hat ein<strong>abgerundeter weißer Rahmen mit Schattenwurf</strong>.</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>Fußzeile</strong>— Der Untertitel ist<strong>gut lesbar</strong>. Die Daten sind<strong>sichtbare</strong>. Die Artikelkarten haben<strong>abgerundete Ecken</strong>und die Titel sind<strong>fett</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>Erster Reflex: das Thema. Ich verwende ein dynamisches Themensystem (hell, dunkel, high-contrast) basierend auf`localStorage`. Vielleicht hat der lokale store ein High-Contrast-Theme ausgelöst? Nein. Ich hatte bereits geschriebenhttps://cheroliv.com/blog/2025/0098_preloading_css_variable_post.html[ein ganzer Artikel über das Vorladen der Themen], ich weiß, wie das funktioniert. Und selbst im High-Contrast-Modus hätte die CSS-Struktur (ovale Buttons, Schatten) da sein müssen. Sie war nicht da.</p> </div> <div class="paragraph"> <p>Zweiter Reflex: Der Browser-Cache. Nein, ich hatte den Test mit sauberen Profilen durchgeführt. Der Unterschied blieb bestehen.</p> </div> <div class="paragraph"> <p>Dritter Reflex:`serve`lieferte nicht die gleichen Dateien wie`publishSite`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_diagnose_serve_zeigte_nicht_auf_den_richtigen_ordner">Die Diagnose: <code>serve</code> zeigte nicht auf den richtigen Ordner.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mein Gradle-Plugin`bakery`hat zwei Hauptaufgaben:</p> </div> <div class="ulist"> <ul> <li> <p><code>bake</code>: erzeugt die statische Seite in`build/bake/`</p> </li> <li> <p><code>serve</code>: startet einen lokalen Webserver</p> </li> <li> <p><code>publishSite</code>: schiebt`build/bake/`zu GitHub Pages</p> </li> </ul> </div> <div class="paragraph"> <p>Die Divergenz konnte nur von`serve`. Si <code>publishSite`veröffentlichte den richtigen Inhalt, das ist, dass`build/bake/`war gut. Wenn`serve`Er zeigte etwas anderes, denn er war nicht nützlich`build/bake/</code>.</p> </div> <div class="paragraph"> <p>Schauen wir uns den Code an. In`SiteManager.kt`, die Aufgabe`serve`ist wie folgt definiert:</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 -&gt; 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`ist der Einstiegspunkt der JBake 2.7.0 CLI. Die Idee: zu passen</code>-b`für den Quellordner und`-s`für den Zielordner, dann den Server-Modus starten. Aber&#8230;&#8203;</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_ursache_jbake_cli_funktioniert_nicht_so">Die Ursache: JBake CLI funktioniert nicht so.</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake 2.7.0 wartet auf<strong>positionale Argumente</strong>für Quelle und Ziel, dann optionale Flags. Die Signatur ist:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">jbake &lt;source&gt; &lt;destination&gt; [options]</code></pre> </div> </div> <div class="paragraph"> <p>Aber in meinem Code habe ich geschrieben:</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 interpretierte das so:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>-b</code>→ parses das Flag \"bake\" (Bool), verbraucht</p> </li> <li> <p><code>/path/to/site</code>→ wird positionelles Argument 1 (Quelle)</p> </li> <li> <p><code>-s</code>→ parset das Flag "serve" (boolesch), Server gestartet<strong>sofort</strong></p> </li> <li> <p><code>/path/to/build/bake</code>→ wird zu einem verwaisten Argument, das ignoriert oder falsch interpretiert wird</p> </li> </ol> </div> <div class="paragraph"> <p>Ergebnis: JBake nahm`/path/to/site`wie Quelle,<strong>berücksichtigte das Ziel nicht</strong>bereitgestellt (<code>build/bake</code>), und verwendete sein Standardverzeichnis (oft`./output`oder eine temporäre Kopie). Die Datei`css/styles.css`Der Build war also überschrieben oder ignoriert, und es wurde ein altes Standard-CSS (ohne die benutzerdefinierten Variablen, ohne die abgerundeten Ecken, ohne die Schatten) bereitgestellt.</p> </div> <div class="paragraph"> <p>Im Vergleich,<code>bake</code> et <code>publishSite`verwenden den<strong>offizielles Gradle-JBake-Plugin</strong>(`jbake-gradle-plugin</code>) der ordentlich schreibt in`build/bake/`über die Gradle-API. Sie gehen nicht über die CLI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_positionale_argumente_keine_flags">Die Lösung: positionale Argumente, keine Flags</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Korrektur ist trivial — sobald man weiß. Es genügt, Quelle und Ziel als positionale Argumente zu übergeben, dann`-s`zum Schluss:</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>Das ist alles. Drei Zeilen geändert, Fehler behoben.</p> </div> <div class="paragraph"> <p>&lt;/think&gt;</p> </div> <div class="paragraph"> <p>Nach lokaler Veröffentlichung des Plugins (<code>publishToMavenLocal</code>), un `./gradlew serve`Starte JBake mit der korrekten Syntax:</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>Und dieses Mal dient der in JBake integrierte Jetty-Server dem Inhalt von`build/bake/`— identisch mit dem, was online veröffentlicht wird.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/serve-vs-publish-diagram.svg" alt="serve vs publish diagram" width="1214" height="348"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schnelle_überprüfung_mit_curl">Schnelle Überprüfung mit curl</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um sicherzustellen, dass der Server den richtigen Inhalt bereitstellt, ein einfaches`curl`bestätigt dass`index.html`enthält`data-bs-theme="light"`und dass`build/bake/css/styles.css`wiegt tatsächlich 31 402 Byte — identisch zur von erzeugten Datei`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 &lt;html ... data-bs-theme="light" ...&gt; $ 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>Das lokale Rendering ist jetzt<strong>pixel-identisch</strong>zum bereitgestellten Rendering</p> </div> </div> </div> <div class="sect1"> <h2 id="_warum_war_dieser_bug_tückisch">Warum war dieser Bug tückisch?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Siehst du, warum es schwierig war, es zu fangen?</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Kein expliziter Fehler</strong>: JBake ist nicht abgestürzt. Es 'funktionierte', einfach mit einem falschen Ordner.</p> </li> <li> <p><strong>Der Build funktionierte</strong>:`./gradlew bake`erzeugte korrekt die Dateien in`build/bake/`.</p> </li> <li> <p><strong>Die Bereitstellung funktionierte.</strong>:`publishSite`schob den guten Inhalt online.</p> </li> <li> <p><strong>Nur <code>serve</code> war kaputt</strong>: die Entwicklungsaufgabe, die man ständig zum Iterieren verwendet.</p> </li> <li> <p><strong>Die Gewohnheit des <code>-key value</strong>Als Entwickler, ist man durch Jahre der Unix-CLI geprägt.</code>-o output`, <code>-i input</code>). JBake CLI ist eine Ausnahme — Quelle und Ziel sind positionell.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie ein Gradle-Plugin warten, das JBake (oder jedes CLI-Tool) umhüllt,<strong>Lies die Dokumentation der Argumente</strong>auch wenn du denkst, sie zu kennen. Eine implizite Annahme(<code>-s</code>= "set destination") kann Sie Stunden visuellem Debugging kosten.</p> </div> <div class="paragraph"> <p>Der Fix bestand wörtlich darin, zu ändern</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>Drei verschobene Tokens, und meine lokale Website ist wieder genauso schön wie die Produktionswebsite.</p> </div> <div class="paragraph"> <p><strong>Lektion</strong>: Wenn die Darstellung zwischen lokal und prod ohne ersichtlichen Grund abweicht, verdächtigen Sie zuerst das <strong>pipeline</strong> — nicht das CSS, nicht den Browser, und erst recht nicht das Framework. Oft ist es gerade der Schritt vor der Darstellung, der betrügt.</p> </div> </div> </div> OpenCode und der unvollständige PATH: Warum deine Tools nicht im Shell des Agents waren 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="#_die_szene_ein_blinder_agent_in_einer_welt_der_werkzeuge">Die Szene: ein blinder Agent in einer Welt der Werkzeuge</a></li> <li><a href="#_anatomie_des_bugs_zwei_shells_zwei_welten">Anatomie des Bugs: zwei Shells, zwei Welten</a></li> <li><a href="#_die_schuldigen_zshrc_vs_zshenv">Die Schuldigen: .zshrc vs .zshenv</a></li> <li><a href="#_schritt_für_schritt_diagnose">Schritt-für-Schritt-Diagnose</a> <ul class="sectlevel2"> <li><a href="#_den_path_des_agenten_überprüfen">Den PATH des Agenten überprüfen</a></li> <li><a href="#_2_identifiziere_was_in_zshrc_ist_aber_nicht_in_zshenv">2. Identifiziere, was in .zshrc ist, aber nicht in .zshenv</a></li> <li><a href="#_3_überprüfen_ob_zshenv_existiert">3. Überprüfen, ob .zshenv existiert</a></li> </ul> </li> <li><a href="#_die_lösung_zshenv_die_richtigen_pfade">Die Lösung: .zshenv + die richtigen Pfade</a> <ul class="sectlevel2"> <li><a href="#_erstelle_zshenv_mit_allen_wesentlichen_pfaden">Erstelle .zshenv mit allen wesentlichen Pfaden</a></li> <li><a href="#_warum_nicht_source_sdkman_init_sh_in_zshenv">Warum nicht <code>source sdkman-init.sh</code> in .zshenv ?</a></li> </ul> </li> <li><a href="#_der_nvm_fall_wenn_der_versionsmanager_vergisst_eine_spur_zu_hinterlassen">Der NVM-Fall: Wenn der Versionsmanager vergisst, eine Spur zu hinterlassen</a> <ul class="sectlevel2"> <li><a href="#_das_problem_nvm">Das Problem NVM</a></li> <li><a href="#_die_lösung_erstelle_den_symlink_current_für_nvm">Die Lösung: erstelle den Symlink <code>current</code> für NVM</a></li> <li><a href="#_das_aktualisieren_des_symlinks_automatisieren">Das Aktualisieren des Symlinks automatisieren</a></li> </ul> </li> <li><a href="#_zusammenfassungstabelle_der_pfade">Zusammenfassungstabelle der Pfade</a></li> <li><a href="#_fallstricke_und_gegenmaßnahmen">Fallstricke und Gegenmaßnahmen</a></li> <li><a href="#_gelernte_lektionen">Gelernte Lektionen</a></li> <li><a href="#_endkontrolle">Endkontrolle</a></li> <li><a href="#_links">Links</a> <ul class="sectlevel2"> <li><a href="#_offizielle_dokumentation">Offizielle Dokumentation</a></li> <li><a href="#_erwähnte_werkzeuge">Erwähnte Werkzeuge</a></li> <li><a href="#_vertiefung">Vertiefung</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 13 minutes</div> <p>Sie starten OpenCode in Ihrem Terminal, alles funktioniert. Der Agent versucht ein`gh`— nicht auffindbar. Ein`java -version`— abwesend. ein`node`— nirgendwo. Doch diese Tools sind tatsächlich in <em>deiner</em> Shell vorhanden. Das Problem? OpenCode startet Shells<strong>nicht-interaktiv</strong>die nie Ihre lesen`.zshrc`Hier ist, wie man das sauber diagnostizieren und korrigieren kann.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tick</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_die_szene_ein_blinder_agent_in_einer_welt_der_werkzeuge">Die Szene: ein blinder Agent in einer Welt der Werkzeuge</h2> <div class="sectionbody"> <div class="paragraph"> <p>Es war ein Dienstagabend. Ich hatte gerade installierthttps://opencode.ai[OpenCode], l&#8217;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 &gt; Utilise gh pour lister mes repos ❌ bash: gh: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Seltsam.`gh`funktionierte perfekt in meinem Terminal. Ich versuche etwas anderes:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">&gt; Vérifie la version de Java ❌ bash: java: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Dann:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">&gt; Lance le build Gradle ❌ bash: gradle: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Java, Gradle, Node,<code>gh</code>— Alles war für den Agenten unsichtbar. Mein Terminal selbst sah alles. Als ob der Agent und ich in zwei parallelen Welten lebten.</p> </div> <div class="paragraph"> <p>Ich habe Stunden gebraucht, um es zu verstehen. Stunden von`echo $PATH`, de <code>which java</code>, wachsender Frustration. Ich habe schließlich verstanden, dass das Problem nicht die Tools waren — es war das<strong>Schale</strong>. OpenCode, wie jeder Agent, der Unterprozesse startet, arbeitet in Shells<strong>nicht-interaktiv</strong>. Und Zsh, in diesen Shells, ignoriert einfach nur Ihr`.zshrc`.</p> </div> <div class="paragraph"> <p>Das Folgende ist der vollständige Bericht über diese Diagnose, die Lösung und die Lektion, die ich gelernt habe. Wenn Sie einen KI-Agenten verwenden — OpenCode, Aider, Cursor oder sogar Cron-Skripte — wird Sie dieses Problem eines Tages betreffen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomie_des_bugs_zwei_shells_zwei_welten">Anatomie des Bugs: zwei Shells, zwei Welten</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie ein Terminal öffnen, behandelt Zsh es wie eine Shell<strong>interaktiv</strong>. Er lädt`.zshrc`, das alles initialisiert: SDKMAN, NVM, pnpm, die Aliase, dein schöner Prompt. Deine Umgebung ist vollständig.</p> </div> <div class="paragraph"> <p>Aber wenn OpenCode einen Befehl ausführt, startet es kein interaktives Terminal. Es startet eine Shell.<strong>nicht-interaktiv</strong>— ein Aufgaben-Shell, ohne Mensch hinter dem Bildschirm. Und Zsh, in diesem Kontext, springt`.zshrc`. Er liest nur`.zshenv`.</p> </div> <div class="paragraph"> <p>Warum existiert diese Unterscheidung? Weil eine nicht-interaktive Shell dafür ausgelegt ist, Skripte auszuführen, nicht um einen menschlichen Nutzer zu bedienen. Das Laden von Aliases, dem Prompt und den Vervollständigungen in einem Skript, das im Hintergrund läuft, wäre eine Verschwendung. Das Problem ist, dass dein PATH — die wichtigste Information zum Auffinden von Ausführbaren — oft initialisiert in`.zshrc`, nicht in`.zshenv`.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE actor "Sie" as user actor "OpenCode ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor "Sie" as user actor "OpenCode (Agent)" as agent participant "Shell\ninteraktiv\n(.zshrc geladen)" as ishell participant "Shell nicht-interaktiv (.zshrc ignoriert)" as nshell user -&gt; ishell : gh, java, node ✅ agent -&gt; nshell : gh, java, node ❌ note right of ishell Source .zshrc : - SDKMAN init - NVM init - ~/apps dans PATH - pnpm dans PATH end note note right of nshell .zshrc ignoré ! PATH = /usr/bin:/bin + quelques répertoires défaut end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Die Wurzel des Problems:<strong>Zsh source <code>.zshrc</code> nur für interaktive Shells</strong>. OpenCode, wie jeder KI-Agent, der Unterprozesse startet, verwendet nicht-interaktive Shells. Diese Shells lesen nur`.zshenv`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_schuldigen_zshrc_vs_zshenv">Die Schuldigen: .zshrc vs .zshenv</h2> <div class="sectionbody"> <div class="paragraph"> <p>Zsh verfügt über<strong>vier Initialisierungsdateien</strong>, jeder mit einer bestimmten Rolle. Das ist ein elegantes Design — aber das ist auch das Knackpunkt des Problems:</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">Datei</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bezogen wenn</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rolle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">PATH ändern?</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>immer</strong>(interaktiv + nicht-interaktiv + Login)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Wesentliche Umgebungsvariablen, PATH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�✅ Ja — das ist SA Platz</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">Nur Login-Shells</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Langsame Befehle (einmal pro Sitzung)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">möglich</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>Nur interaktive Shells</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias, Prompt, Vervollständigung, interaktive Werkzeuge</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�❌ Nicht für kritische Variablen</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">Login-Shells (nach .zshrc)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Willkommensnachrichten, Abschluss</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">selten</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Die Tabelle gibt einen Hinweis, aber sie muss tiefgehend verstanden werden. Denke daran wie die Zimmer eines Hauses:</p> </div> <div class="ulist"> <ul> <li> <p>`.zshenv`ist das<strong>Eingangshalle</strong>— Jedermann kommt dort vorbei, Besucher oder Bewohner. Wenn Sie etwas hier platzieren, kann jede Shell es sehen.</p> </li> <li> <p>`.zshrc`ist der<strong>Wohnzimmer</strong>— Nur die Bewohner (interaktive Shells) gehen dort hinein. Die Besucher (nicht-interaktive Shells) bleiben im Flur.</p> </li> <li> <p><code>.zprofile</code> et `.zlogin`Sie sind spezielle Stücke für Login-Shells (so wie wenn du dich per SSH einloggst).</p> </li> </ul> </div> <div class="paragraph"> <p>Das Drama ist, dass die meisten von uns das PATH ins Wohnzimmer stellen. Und der KI-Agent hat niemals das Recht, hineinzugehen.</p> </div> <div class="paragraph"> <p>Das Problem in einem Diagramm :</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>Wenn Sie ein Terminal öffnen, ist Zsh interaktiv: es liest`.zshrc`, alles funktioniert. Wenn OpenCode eine Shell startet, um einen Befehl auszuführen, ist Zsh nicht-interaktiv: es springt`.zshrc`, liest nur`.zshenv`. Et si `.zshenv`existiert nicht oder enthält nicht den PATH — es ist die Wüste.</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>Warum macht Zsh das?</strong>Das ist eine Designwahl, die von Unix geerbt wurde. Eine nicht-interaktive Shell muss<strong>schnell</strong> et <strong>wiederholbar</strong>. Laden der Aliase, farbiger Prompts und der schwergewichtigen Initialisierungen von SDKMAN in einem Cron-Skript oder einem KI-Agent wäre langsam und fragil. Die Trennung ist daher sinnvoll :`.zshenv`im Wesentlichen (Variablen, PATH),`.zshrc`für den Komfort (aliases, prompt, ergänzen). Das Problem tritt auf, wenn man das Wesentliche in den Komfort legt.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_für_schritt_diagnose">Schritt-für-Schritt-Diagnose</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor du korrigierst, musst du genau verstehen, was fehlt. Hier ist eine reproduzierbare Diagnosemethode — lege sie in deine Lesezeichen, wenn du mit KI-Agenten arbeitest.</p> </div> <div class="sect2"> <h3 id="_den_path_des_agenten_überprüfen">Den PATH des Agenten überprüfen</h3> <div class="paragraph"> <p>Man vergleicht, was dein interaktives Terminal sieht, mit dem, was eine nicht‑interaktive Shell sieht — das heißt, was OpenCode sieht.</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>Typisches Ergebnis :</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>Jetzt simulieren wir, was der Agent sieht — eine nicht interaktive Shell:</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>Ergebnis:</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>Fünf von sechs Wegen sind verschwunden.</strong>Der Agent ist um 83 % seiner Umgebung beraubt. Es ist, als würde man dich bitten, ohne die Hälfte deiner Utensilien zu kochen – du könntest Wasser zum Kochen bringen, aber sonst kaum etwas.</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>Der Befehl`zsh -c 'echo $PATH'`ist Ihr<strong>Nummer-1-Diagnosetool</strong>. Wenn ein Werkzeug, das Sie täglich verwenden, im Ergebnis fehlt, kann Ihr KI-Agent es ebenfalls nicht sehen. Testen Sie es vor und nach jeder Änderung von`.zshenv`.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_identifiziere_was_in_zshrc_ist_aber_nicht_in_zshenv">2. Identifiziere, was in .zshrc ist, aber nicht in .zshenv</h3> <div class="paragraph"> <p>Jetzt sucht man den Schuldigen in`.zshrc`. Wir filtern die Zeilen, die unsere Tools erwähnen :</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>Man findet typischerweise:</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" ] &amp;&amp; \. "$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" ]] &amp;&amp; source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Das ist alles<strong>unsichtbar</strong>für OpenCode. Und das`PATH`Zeile 119 ist sogar nicht`export`é — er verlässt niemals die aktuelle Shell. Das ist ein entscheidendes technisches Detail: eine Variable ohne`export`bleibt lokal bei der Shell, die sie definiert. Unter-Shells — wie jene, die von OpenCode gestartet werden — erben sie niemals.</p> </div> </div> <div class="sect2"> <h3 id="_3_überprüfen_ob_zshenv_existiert">3. Überprüfen, ob .zshenv existiert</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">cat ~/.zshenv 2&gt;/dev/null || echo "FICHIER ABSENT"</code></pre> </div> </div> <div class="paragraph"> <p>Wenn die Antwort « DATEI FEHLT » lautet, ist das der Moment, an dem alles entschieden wird.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_zshenv_die_richtigen_pfade">Die Lösung: .zshenv + die richtigen Pfade</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Strategie ist einfach, aber sie erfordert Präzision: hineinzulegen`.zshenv` <strong>nur</strong>die wesentlichen Pfade, ohne das Sourcen der schweren Initialisierungsskripte. Man verschiebt nicht`.zshrc`in`.zshenv`— Wir extrahieren das Wesentliche.</p> </div> <div class="sect2"> <h3 id="_erstelle_zshenv_mit_allen_wesentlichen_pfaden">Erstelle .zshenv mit allen wesentlichen Pfaden</h3> <div class="paragraph"> <p>`.zshenv`ist das<strong>einzige Datei</strong>dass Zsh garantiert, in zu sourcen<strong>alle</strong>Die Kontexte. Dort muss das PATH hingehen.</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>Man verwendet`$HOME/.nvm/current/bin`und nicht`$HOME/.nvm/versions/node/v22.19.0/bin`. Der Grund: die Node-Versionen ändern sich. Ein hardgecodeter Pfad wird beim nächsten falsch.<code>nvm install</code>. Weitere Details im folgenden Abschnitt.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_warum_nicht_source_sdkman_init_sh_in_zshenv">Warum nicht <code>source sdkman-init.sh</code> in .zshenv ?</h3> <div class="paragraph"> <p>Der verlockendste Ansatz wäre, einfach zu reproduzieren in`.zshenv`was wir in`.zshrc`— sourcen Sie die Initialisierungsskripte. Man<strong>könnte</strong>verführt sein zu tun :</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" ]] &amp;&amp; source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Probleme:</p> </div> <div class="ulist"> <ul> <li> <p><strong>langsam</strong> : `sdkman-init.sh`Führt Netzwerkauflösungen und Überprüfungen bei jeder Shell durch. In einer nicht-interaktiven Shell ist das ein unnötiger Kostenfaktor.</p> </li> <li> <p><strong>Fragile</strong>: SDKMAN erwartet einen interaktiven Kontext. Seine Initialisierung kann in einem Pipe oder Unter-Shell stillschweigend fehlschlagen.</p> </li> <li> <p><strong>Unnütz</strong>: SDKMAN platziert seine Kandidaten in`~/.sdkman/candidates/&lt;tool&gt;/current/bin`— stabile Symlinks, die auf die aktive Version zeigen. Wir können sie verwenden.<strong>direkt</strong>.</p> </li> </ul> </div> <div class="paragraph"> <p>Die richtige Vorgehensweise: Die Initialisierung von SDKMAN umgehen und direkt auf die Symlinks zeigen.<code>current</code>. Dies ist der Schlüssel zur ganzen Lösung :<strong>Die Dateistruktur als Vertrag verwenden, anstatt den Initialisierungscode</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Langsame Vorgehensweise\n(source sdkman-init.sh)" as slow { card ".zshenv source sdkman-init.sh 2-3 Sekunden pro Shell ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "Langsame Vorgehensweise\n(source sdkman-init.sh)" as slow { card ".zshenv source sdkman-init.sh 2-3 Sekunden pro Shell Netzwerkprüfungen Fehlschlagsrisiko" as s1 #FDEDEC } rectangle "Schneller Ansatz (direkte Symlinks)" as fast { card ".zshenv export PATH=...current/bin 0 ms Kein Netzwerk Keine Initialisierung" as s2 #E8F8E8 } slow --&gt; fast : Même résultat final\nLe PATH pointe sur current/bin\ndans les deux cas @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_der_nvm_fall_wenn_der_versionsmanager_vergisst_eine_spur_zu_hinterlassen">Der NVM-Fall: Wenn der Versionsmanager vergisst, eine Spur zu hinterlassen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_problem_nvm">Das Problem NVM</h3> <div class="paragraph"> <p>Hier hat mich die Untersuchung am weitesten geführt. SDKMAN hat ein elegantes Design: wenn man`sdk install java 25.0.2-tem`, er erstellt einen 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 -&gt; ~/.sdkman/candidates/java/25.0.2-tem</code></pre> </div> </div> <div class="paragraph"> <p>Dieser Symlink ist<strong>immer auf dem neuesten Stand</strong>. Zeigen Sie darauf in`.zshenv`und Sie sind abgedeckt, egal welches Shell. Beautiful.</p> </div> <div class="paragraph"> <p>Vergiss ihn, er schafft nichts<strong>nichts</strong>de tel. Kein Symlink`current`. Kein stabiler Ankerpunkt. Wir müssen auf einen fest codierten, versionierten Pfad zeigen, der so aussieht:</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>Zum nächsten`nvm install 24`, dieser Weg ist tot. Ihr`.zshenv`Es wird auf eine Version zeigen, die nicht mehr die aktive Version ist. Das ist eine Zeitbombe.</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>Warum macht NVM das?</strong>NVM funktioniert indem es das PATH dynamisch bei jedem`nvm use`. Es ist für Entwickler gedacht, die häufig zwischen Versionen wechseln, in einer interaktiven Shell. Der Symlink`current`war nicht in den ursprünglichen Spezifikationen — es ist ein Designübersehen, das wir selbst korrigieren werden.</p> </div> </td> </tr> </table> </div> <div class="imageblock"> <div class="content"> <img src="./images/nvm-vs-sdkman.svg" alt="nvm vs sdkman" width="1763" height="5676"> </div> </div> </div> <div class="sect2"> <h3 id="_die_lösung_erstelle_den_symlink_current_für_nvm">Die Lösung: erstelle den Symlink <code>current</code> für NVM</h3> <div class="paragraph"> <p>Da NVM das nicht macht, machen wir es selbst. Das Prinzip ist das gleiche wie bei SDKMAN — ein Symlink`current`der immer auf die aktive Version zeigt. Man erstellt ihn einmal, dann automatisiert man ihn, damit er sich selbst aktualisiert.</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>Jetzt, in`.zshenv`, verwendet man :</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>Anstatt:</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="_das_aktualisieren_des_symlinks_automatisieren">Das Aktualisieren des Symlinks automatisieren</h3> <div class="paragraph"> <p>Ein Symlink ist nichts wert, wenn er nicht aktualisiert wird. Der Symlink`current`muss sich aktualisieren, wenn man es macht`nvm use` ou <code>nvm install</code>. Die Lösung: ein<strong>Wrapper</strong>— eine Funktion, die den echten Befehl umschließt`nvm`und aktualisiert den Symlink nach jedem Aufruf.</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>Wie funktioniert das im Detail:</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>Der Wrapper`_nvm`ruft den echten Befehl auf`nvm`, dann aktualisiert den Symlink. Der Alias`nvm='_nvm'`sorgt dafür, dass beim Tippen`nvm`, man geht durch den Wrapper. Und bei der Initialisierung der Shell macht man genauso danach.<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>`nvm_version_path`Es ist eine interne Funktion von NVM, die den vollständigen Pfad einer Version auflöst. Dadurch muss der Pfad nicht manuell neu zusammengestellt werden.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zusammenfassungstabelle_der_pfade">Zusammenfassungstabelle der Pfade</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor du zu den Fallen übergehst, eine visuelle Zusammenfassung der Transformation. Auf der linken Seite, was du hattest (alles in`.zshrc`, unsichtbar für den Agenten). Auf der rechten Seite, was du jetzt hast (die wesentlichen Pfade innerhalb`.zshenv`, überall sichtbar).</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">Werkzeug</th> <th class="tableblock halign-left valign-top">Vor (.zshrc nur)</th> <th class="tableblock halign-left valign-top">Nach (.zshenv + Symlink)</th> <th class="tableblock halign-left valign-top">Sichtbar von 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 wird nicht in .zshrc exportiert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/apps`in .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">&lt;/think&gt;</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">`sdkman-init.sh`aus .zshrc sourced</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.sdkman/candidates/java/current/bin`in .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Übersetze von fr nach de. Bewahre ALLE Backtick‑Code‑Spans (<code>&#8230;&#8203;</code>) genau so bei — ändere niemals den Backtick‑Inhalt, den Abstand oder die Position. Dieser Text kann ein Fragment eines größeren Satzes sein — übersetze das Fragment, ohne nach mehr Kontext zu fragen. Gib nur den übersetzten Text aus — keine Erklärung, kein Kommentar, keine Einleitung, keine Alternativen, keine Optionen.</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">`sdkman-init.sh`aus .zshrc geladen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.sdkman/candidates/gradle/current/bin`in .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">`nvm use --lts`in .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.nvm/current/bin`in .zshenv (Symbolischer Link)</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">`$PNPM_HOME`in .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$PNPM_HOME`in .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">Von Toolbox automatisch zu .zshrc hinzugefügt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.local/share/JetBrains/Toolbox/scripts`in .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">`/usr/bin/python3`in PATH .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">explizit in .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="_fallstricke_und_gegenmaßnahmen">Fallstricke und Gegenmaßnahmen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nicht alles ist mit diesem Ansatz perfekt. Hier sind die Probleme, auf die ich gestoßen bin, und wie man sie umgehen kann.</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">Falle</th> <th class="tableblock halign-left valign-top">Beschreibung</th> <th class="tableblock halign-left valign-top">Minderung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PATH dupliziert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Wenn .zshenv und .zshrc denselben Pfad hinzufügen, erscheint er zweimal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`.zshenv`ist beschafft<strong>vor</strong>.zshrc. Beide werden in einem interaktiven Shell gelesen. PATH kann doppelt vorkommen. Das ist nur kosmetisch, nicht funktional. Um das zu vermeiden: lege in .zshenv nur die Pfade ab, die im standardmäßigen PATH nicht enthalten sind.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">NVM : feste Version in .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">setzen`~/.nvm/versions/node/v22.19.0/bin`Der Dauermodus wird beim nächsten falsch.<code>nvm install</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Den Symlink verwenden`$HOME/.nvm/current/bin`+ der wrapper`_nvm`in .zshrc</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN: source sdkman-init.sh in .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">langsam, empfindlich, in einer nicht‑interaktiven Shell nutzlos</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Symlinks verwenden`candidates/&lt;tool&gt;/current/bin`direkt</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias fehlt nach Änderung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Wrapper`nvm='_nvm'`Die Änderungen in .zshrc treten erst nach einem Neuladen in Kraft.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Starten Sie die Shell neu oder`source ~/.zshrc`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">OpenCode sieht die Änderungen nicht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Agent hat seine Unter-Shells bereits mit der alten .zshenv gestartet.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">OpenCode nach Änderung von .zshenv neu starten</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv zu überladen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Schwere Funktionen oder interaktive Initialisierungen in .zshenv platzieren</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv = Umgebungsvariablen + nur PATH. Kein`source`, keine schweren Funktionen, keine Prompts</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_gelernte_lektionen">Gelernte Lektionen</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>.zshrc` ist interaktiv, <code>.zshenv</code> ist universell</strong>— Wenn eine Variable in <em>allen</em> Shells (KI-Agenten, cron, Skripte, IDE) existieren soll, gehört sie in`.zshenv`. Das Wohnzimmer ist gemütlich, aber der Eingangsbereich ist der einzige Ort, an dem jeder vorbeikommt.</p> </li> <li> <p><strong>Versionsmanager sind nicht gleich</strong>— SDKMAN erstellt Symlinks`current`Absichtlich. NVM nicht. Dieser Mangel muss manuell behoben werden. Das ist eine wichtige Lektion: Bevor Sie Ihr PATH konfigurieren, überprüfen Sie, ob Ihr Manager einen stabilen Ankerpunkt bietet.</p> </li> <li> <p><strong>Sourcen Sie die Init-Skripte nicht in .zshenv</strong>—<code>sdkman-init.sh</code> et `nvm.sh`Sie sind für eine interaktive Shell entworfen. Sie sind langsam und brüchig in einem nicht‑interaktiven Kontext. Die Symlinks`current`sind ausreichend und sofort.</p> </li> <li> <p><strong>Immer in einer nicht interaktiven Shell testen</strong>—`zsh -c 'echo $PATH'`Es simuliert genau das, was ein Agent sieht. Das ist der Validierungstest. Ohne diesen Test wissen Sie nicht, ob Ihre Konfiguration für Agenten funktioniert.</p> </li> <li> <p><strong>Der Wrapper-Muster ist wiederverwendbar</strong>— Das gleiche Muster`_nvm`+`alias nvm='_nvm'`gilt für jedes Werkzeug, das den PATH dynamisch ändert, ohne eine stabile Spur zu hinterlassen. Es ist ein weiteres Werkzeug in deiner Ideenkiste.</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="./images/avant-apres.svg" alt="avant apres" width="260" height="306"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_endkontrolle">Endkontrolle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach dem Erstellen`.zshenv`und prüfen Sie, dass alles beim NVM‑Symlink funktioniert — in beiden Kontexten:</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 &amp;&amp; java -version &amp;&amp; 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 &amp;&amp; java -version &amp;&amp; node --version'</code></pre> </div> </div> <div class="paragraph"> <p>Beide müssen erfolgreich sein. Wenn ja, wird Ihr KI-Agent die gleichen Tools sehen wie Sie. Wenn nein, kehren Sie zur schrittweisen Diagnose zurück — Sie haben wahrscheinlich einen Pfad vergessen oder der NVM-Symlink ist nicht auf dem neuesten Stand.</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>Automatisieren Sie diesen Test.</strong>Fügen Sie diese Überprüfung in ein Health‑Check‑Skript ein, das Sie nach jedem Update Ihrer Tools ausführen.`zsh -c 'which java &amp;&amp; which node &amp;&amp; which gh'`Im CI, es ist eine Versicherung gegen Überraschungen.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p><em>__</em> Ein nicht interaktiver Shell ist wie ein stiller Gast: er liest nur das, was an der Haustür angezeigt wird. Ist das PATH im Wohnzimmer, sieht er es niemals. [No output]</p> </div> </div> </div> <div class="sect1"> <h2 id="_links">Links</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_offizielle_dokumentation">Offizielle Dokumentation</h3> <div class="ulist"> <ul> <li> <p><a href="https://zsh.sourceforge.io/Doc/Release/Files.html">Zsh-Dokumentation: Startup-Dateien</a>— Die offizielle Referenz zu den Initialisierungsdateien von Zsh. Dort wird alles erklärt, selbst wenn man es oft vergisst.</p> </li> <li> <p><a href="https://opencode.ai/docs/config/">OpenCode : Konfiguration</a>— Wie konfiguriere ich OpenCode und seine Laufzeitumgebung?</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_erwähnte_werkzeuge">Erwähnte Werkzeuge</h3> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nvm-sh/nvm">NVM auf GitHub</a>— Node Version Manager. Node.js-Versionsmanager.</p> </li> <li> <p><a href="https://sdkman.io">SDKMAN – offizielle Website</a>— SDKMAN! Der Versionsmanager für die JVM (Java, Kotlin, Gradle…)</p> </li> <li> <p><a href="https://sdkman.io/install">SDKMAN : Installation</a>— SDKMAN-Installationsleitfaden</p> </li> <li> <p><a href="https://cli.github.com">gh` — GitHub CLI</a>— Das Kommandozeilen-Tool GitHub, unverzichtbar für jeden Entwickler.</p> </li> <li> <p><a href="https://gradle.org">Gradle — offizielle Website</a>Das Build-System, das wir über SDKMAN installieren.</p> </li> <li> <p><a href="https://pnpm.io">pnpm—offizielle Website</a>— Der schnelle und speichereffiziente Node.js-Paketmanager.</p> </li> <li> <p><a href="https://www.jetbrains.com/toolbox-app/">JetBrains Toolbox</a>— Der JetBrains IDE-Manager, der seine Skripte zum PATH hinzufügt.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_vertiefung">Vertiefung</h3> <div class="ulist"> <ul> <li> <p><a href="https://blog.andy2003.org/posts/2022/zsh-dotfiles/">Zsh-Dotfiles: ein vollständiger Leitfaden</a>— Ausführlicher Artikel zur Verwaltung von Zsh-Dotfiles.</p> </li> <li> <p><a href="https://wiki.archlinux.org/title/Zsh">Zsh auf ArchWiki</a>— Eine der besten Community-Dokumentationen zu Zsh.</p> </li> <li> <p><a href="https://github.com/nvm-sh/nvm/issues">NVM-Probleme GitHub</a>— Um die Diskussionen um den symlink zu sehen`current`und Probleme mit PATH.</p> </li> </ul> </div> </div> </div> </div> Graphify in einen Gradle-Workflow integrieren: vom Knowledge Graph zum PlantUML-Diagramm in einem Befehl 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="#_das_problem_diagramme_hinken_immer_dem_code_hinterher">Das Problem: Diagramme hinken immer dem Code hinterher</a></li> <li><a href="#_die_lösung_ein_deterministischer_pipeline_knowledge_graph_plantuml">Die Lösung: ein deterministischer Pipeline Knowledge Graph → PlantUML</a></li> <li><a href="#_schritt_1_graphify_installieren_und_den_knowledge_graph_extrahieren">Schritt 1: Graphify installieren und den Knowledge Graph extrahieren</a> <ul class="sectlevel2"> <li><a href="#_installation">Installation</a></li> <li><a href="#_ausnahmen_konfigurieren">Ausnahmen konfigurieren</a></li> <li><a href="#_den_knowledge_graph_extrahieren">Den Knowledge Graph extrahieren</a></li> </ul> </li> <li><a href="#_schritt_2_das_gradle_plugin_transformiert_den_knowledge_graph_in_plantuml">Schritt 2: Das Gradle-Plugin transformiert den Knowledge Graph in PlantUML</a> <ul class="sectlevel2"> <li><a href="#_architektur_des_pipelines">Architektur des Pipelines</a></li> <li><a href="#_die_internen_komponenten">Die internen Komponenten</a></li> <li><a href="#_renderregeln">Renderregeln</a></li> </ul> </li> <li><a href="#_schritt_3_tägliche_nutzung">Schritt 3: Tägliche Nutzung</a> <ul class="sectlevel2"> <li><a href="#_vollständiges_diagramm">Vollständiges Diagramm</a></li> <li><a href="#_nach_gemeinschaft_filtern">Nach Gemeinschaft filtern</a></li> <li><a href="#_nach_kantenart_filtern">Nach Kantenart filtern</a></li> <li><a href="#_nach_knotentyp_und_vertrauen_filtern">Nach Knotentyp und Vertrauen filtern</a></li> <li><a href="#_benutzerdefiniertes_ausgabeverzeichnis">Benutzerdefiniertes Ausgabeverzeichnis</a></li> <li><a href="#_vollständige_referenz_der_eigenschaften">Vollständige Referenz der Eigenschaften</a></li> </ul> </li> <li><a href="#_der_vollständige_pipeline_in_einem_gradle_workflow">Der vollständige Pipeline in einem Gradle-Workflow</a> <ul class="sectlevel2"> <li><a href="#_workflow_typ">Workflow-Typ</a></li> <li><a href="#_integration_in_den_entwicklungszyklus">Integration in den Entwicklungszyklus</a></li> <li><a href="#_inkrementelles_update">inkrementelles Update</a></li> </ul> </li> <li><a href="#_dogfooding_das_plugin_dokumentiert_sich_selbst">Dogfooding: Das Plugin dokumentiert sich selbst</a></li> <li><a href="#_warum_es_deterministisch_ist_und_warum_das_wichtig_ist">Warum es deterministisch ist (und warum das wichtig ist)</a></li> <li><a href="#_diagramme_des_pipelines_selbst">Diagramme des Pipelines selbst</a></li> <li><a href="#_integration_in_die_projektgovernanz">Integration in die Projektgovernanz</a></li> <li><a href="#_vorbereitung_checkliste_in_5_minuten">Vorbereitung : Checkliste in 5 Minuten</a></li> <li><a href="#_fallstricke_und_gegenmaßnahmen">Fallstricke und Gegenmaßnahmen</a></li> <li><a href="#_was_man_am_ende_erhält">Was man am Ende erhält</a></li> <li><a href="#_links">Links</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 12 minutes</div> <p>Deine Codebasis wächst. Die Abhängigkeiten zwischen Modulen vermehren sich. Die Architektur-Dokumentation wird veraltet, bevor sie überhaupt geschrieben ist. Und was wäre, wenn dein Gradle-Build <em>automatisch</em> aktuelle Diagramme aus der tatsächlichen Code-Struktur generieren könnte? Genau das macht das Graphify + PlantUML Gradle Plugin-Pipeline:`graphify . --no-viz`extrahiert den Knowledge Graph,`./gradlew generateKnowledgeGraphDiagram`Er verwandelt es in PlantUML-Diagramme. Kein LLM, kein Handbuch, 100% deterministisch.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tic</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_diagramme_hinken_immer_dem_code_hinterher">Das Problem: Diagramme hinken immer dem Code hinterher</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jedes Projekt, das mehrere tausend Zeilen überschreitet, kennt dieses Syndrom:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Man zeichnet ein Architekturdiagramm am Anfang des Projekts</p> </li> <li> <p>Der Code entwickelt sich, die Abhängigkeiten ändern sich</p> </li> <li> <p>Das Diagramm wird zu einer dekorativen Lüge.</p> </li> <li> <p>Niemand aktualisiert es, weil es mühsam ist.</p> </li> <li> <p>Die Neuanwärter basieren darauf und machen Fehler.</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>Die Frage ist nicht <em>müssen wir Diagramme haben?</em> — jeder weiß, dass ja. Die Frage ist:<strong>Wer hält sie auf dem neuesten Stand?</strong></p> </div> <div class="paragraph"> <p>Die Antwort: niemand. Ausser wenn es automatisch ist.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_ein_deterministischer_pipeline_knowledge_graph_plantuml">Die Lösung: ein deterministischer Pipeline Knowledge Graph → PlantUML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Prinzip ist einfach: Statt die Diagramme von Hand zu zeichnen, zeichnet man sie<strong>generiert aus der tatsächlichen Code-Struktur</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify\n(pip install graphifyy)" as Graphify collections "graphify-out/graph.json\n(Knowledge Graph)" as KGJSON component "PlantUML Gradle Plugin ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify\n(pip install graphifyy)" as Graphify collections "graphify-out/graph.json\n(Knowledge Graph)" as KGJSON component "PlantUML Gradle Plugin (generateKnowledgeGraphDiagram)" as Plugin component "WissensgraphenParser" as Parser component "KnowledgeGraphRenderer" as Renderer component "PlantumlService (Validierung + PNG-Rendering)" as PS collections "diagrams/knowledge-graph/\n(.puml + .png)" as Output Développeur --&gt; Graphify : graphify . --no-viz Graphify --&gt; KGJSON : extrait la structure\ndu code source Développeur --&gt; Plugin : ./gradlew generateKnowledgeGraphDiagram Plugin --&gt; Parser : parse(graph.json) Parser --&gt; Plugin : KnowledgeGraph\n(noeuds + arêtes + communautés) Plugin --&gt; Renderer : render(graph, filters) Renderer --&gt; Plugin : code PlantUML\ndéterministe Plugin --&gt; PS : validateSyntax + generateImage PS --&gt; 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>Zwei Befehle. Das ist alles.</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>Das Ergebnis? Dateien`.puml` et <code>.png`in`diagrams/knowledge-graph/</code>, versioniert in Git, immer auf dem neuesten Stand des Codes.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_1_graphify_installieren_und_den_knowledge_graph_extrahieren">Schritt 1: Graphify installieren und den Knowledge Graph extrahieren</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_installation">Installation</h3> <div class="paragraph"> <p>Graphify ist ein Python-Tool, das Ihre Codebase analysiert und einen strukturierten Wissensgraphen erstellt:</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 &amp;&amp; graphify install --platform opencode # Alternative avec pip pip install graphifyy &amp;&amp; graphify install --platform opencode</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_ausnahmen_konfigurieren">Ausnahmen konfigurieren</h3> <div class="paragraph"> <p>Eine Datei erstellen`.graphifyignore`im Wurzelverzeichnis des Projekts, um Dateien auszuschließen, die nicht zur Geschäftslogik gehören:</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="_den_knowledge_graph_extrahieren">Den Knowledge Graph extrahieren</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>der Flag`--no-viz`überspringt die HTML-Generierung (unnötig in einem Gradle-Pipeline). Das Ergebnis ist eine Datei`graphify-out/graph.json`enthaltend :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Knoten</strong>: Klassen, Funktionen, Dateien — mit ihrem Typ und Gemeinschaft</p> </li> <li> <p><strong>Grate</strong>Beziehungen zwischen Knoten (EXTRACTED aus dem Code, INFERRED vom LLM)</p> </li> <li> <p><strong>Gemeinschaften</strong>: automatische Gruppierungen verbundener Knoten</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Beispiel einer Struktur`graph.json`</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>Der Quellcode (<code>.kt</code>, <code>.java</code>) wird lokal von tree-sitter analysiert,<strong>unwiderrufliches LLM</strong>. Nur die Dokumentationsdateien (<code>.adoc</code>, <code>.md</code>) erfordern einen LLM-Aufruf für die semantische Extraktion. Also`--update`Auf Kotlin-Code ist es quasi sofort.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_2_das_gradle_plugin_transformiert_den_knowledge_graph_in_plantuml">Schritt 2: Das Gradle-Plugin transformiert den Knowledge Graph in PlantUML</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_architektur_des_pipelines">Architektur des Pipelines</h3> <div class="paragraph"> <p>Das Plugin`com.cheroliv.plantuml`integriert eine Aufgabe`generateKnowledgeGraphDiagram`der transformiert`graph.json`in PlantUML-Diagrammen auf welche Weise<strong>vollständig deterministisch</strong>:</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml skinparam backgroundColor #FEFEFE participant "Gradle" as G participant "GenerateKnowledgeGraphDiagramTask" as Task participant "KnowledgeGraphParser" as Parser participant "KnowledgeGraphRenderer" as Renderer participant "PlantumlService" as PS collections "import sys ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE participant "Gradle" as G participant "GenerateKnowledgeGraphDiagramTask" as Task participant "KnowledgeGraphParser" as Parser participant "KnowledgeGraphRenderer" as Renderer participant "PlantumlService" as PS collections "import sys sys.stdout.write(sys.stdin.read())" as JSON G -&gt; Task : execute Task -&gt; JSON : read Task -&gt; Parser : parse(graph.json) Parser --&gt; Task : KnowledgeGraph\n(noeuds + arêtes + communautés) Task -&gt; Renderer : render(graph, filters) Renderer --&gt; Task : code PlantUML\n(déterministe) Task -&gt; PS : validateSyntax(plantumlCode) alt syntaxe valide Task -&gt; PS : generateImage → .png else syntaxe invalide Task -&gt; Task : save .puml avec warning end @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_die_internen_komponenten">Die internen Komponenten</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">Komponente</th> <th class="tableblock halign-left valign-top">Rolle</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">parsen`graph.json`— unterstützt 3 Formate: nativer Graphify (<code>nodes</code>+<code>links</code>), legacy (<code>communities</code>), flach. Löst die numerischen IDs in Beschriftungen auf.</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">Transformiert deterministisch ein`KnowledgeGraph`im PlantUML-Code. Gruppen nach Typ, Gemeinschaften in Paketen, automatische Legende.</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">Gradle-Task, die orchestriert: parse → render → validate → PNG. Konfigurierbar über Gradle-Eigenschaften.</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">Datenmodelle :`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">Syntaxprüfung + PNG-Rendering (wiederverwendet von allen Aufgaben des Plugins).</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_renderregeln">Renderregeln</h3> <div class="paragraph"> <p>Der Renderer wendet deterministische visuelle Konventionen an:</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">Kantentyp</th> <th class="tableblock halign-left valign-top">PlantUML-Notation</th> <th class="tableblock halign-left valign-top">Bedeutung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">EXTRACTED</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>-&#8594;</code>(durchgezogener Strich, schwarz)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aus dem Quellcode extrahierte Beziehung (Sicherheit)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">geschlossen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>..&gt;</code>(punktiert)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vom LLM abgeleitete Beziehung (Vertrauensscore)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">mehrdeutig</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>--x</code>(rote gepunktete Linie)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ambigue Beziehung (zu überprüfen)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Die Communities werden als PlantUML-Pakete mit einer automatischen Farbpalette dargestellt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_3_tägliche_nutzung">Schritt 3: Tägliche Nutzung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_vollständiges_diagramm">Vollständiges Diagramm</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>Ausgabe:`diagrams/knowledge-graph/knowledge-graph-full.puml`+<code>.png</code></p> </div> </div> <div class="sect2"> <h3 id="_nach_gemeinschaft_filtern">Nach Gemeinschaft filtern</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="_nach_kantenart_filtern">Nach Kantenart filtern</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="_nach_knotentyp_und_vertrauen_filtern">Nach Knotentyp und Vertrauen filtern</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="_benutzerdefiniertes_ausgabeverzeichnis">Benutzerdefiniertes Ausgabeverzeichnis</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="_vollständige_referenz_der_eigenschaften">Vollständige Referenz der Eigenschaften</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">Eigenschaft</th> <th class="tableblock halign-left valign-top">Standard</th> <th class="tableblock halign-left valign-top">Beschreibung</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>(alle)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemeinden nach Name filtern (Teilzeichenkette)</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">(alle)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kantentypen durch Kommata getrennt:`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">Mindestvertrauensschwelle für die Kanten</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>(unbegrenzt)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Maximale Anzahl der anzuzeigenden Knoten</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">(alle)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Knotentypen durch Kommata getrennt (z.B.<code>class</code>, <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">Ausgabeverzeichnis für die Dateien`.puml` et <code>.png</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_der_vollständige_pipeline_in_einem_gradle_workflow">Der vollständige Pipeline in einem Gradle-Workflow</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_workflow_typ">Workflow-Typ</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="_integration_in_den_entwicklungszyklus">Integration in den Entwicklungszyklus</h3> <div class="paragraph"> <p>Die Pipeline integriert sich natürlich in die Schlüsselphasen der Entwicklung:</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE state "Entwicklung" as dev state "Extraction\ngraphify . --no-viz" as extract state "Generierung ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE state "Entwicklung" as dev state "Extraction\ngraphify . --no-viz" as extract state "Generierung ./gradlew generateKnowledgeGraphDiagram" as generate state "Commit versionierte Diagramme" as commit [*] --&gt; dev dev --&gt; extract : Code modifié extract --&gt; generate : graph.json à jour generate --&gt; commit : .puml + .png générés commit --&gt; 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="_inkrementelles_update">inkrementelles Update</h3> <div class="paragraph"> <p>Wenn der Code sich ändert, bauen wir nicht das gesamte Diagramm von Grund auf neu:</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`extrahiert erneut nur die geänderten Dateien (durch SHA256 erkannt in`graphify-out/cache/</code>). Bei Kotlin-Code ist es nahezu sofort, da tree-sitter lokal arbeitet, ohne einen LLM-Aufruf zu tätigen.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dogfooding_das_plugin_dokumentiert_sich_selbst">Dogfooding: Das Plugin dokumentiert sich selbst</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der PlantUML-Plugin existiert, um Prompts in Diagramme zu verwandeln. Er kann auch den Knowledge Graph seiner <em>eigenen</em> codebase in Dokumentationsdiagramme verwandeln. Das ist <em>dogfooding</em>: Der Plugin verbraucht seinen eigenen Dienst.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 16) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Normale Pipeline\n(Benutzer → Diagramme)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --&gt; task1 task1 --&gt; llm1 llm1 --&gt; out1 } package "Pipeline Knowledge Graph ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Normale Pipeline\n(Benutzer → Diagramme)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --&gt; task1 task1 --&gt; llm1 llm1 --&gt; out1 } package "Pipeline Knowledge Graph (deterministischer Ansatz, kein 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 --&gt; parser parser --&gt; renderer renderer --&gt; ps ps --&gt; out2 } package "Pipeline Dogfooding\n(LLM → Dokumentation des Plugins)" 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 --&gt; gpa gpa --&gt; auto_prompt auto_prompt --&gt; task2 task2 --&gt; llm2 llm2 --&gt; out3 } note "Gleiches LlmService, gleiches ApiKeyPool, gleiches PlantumlService — NULL Duplizierung" as N @enduml</pre> </div> </div> <div class="paragraph"> <p>Verknüpfte Gradle-Aufgaben :</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">Aufgabe</th> <th class="tableblock halign-left valign-top">LLM ?</th> <th class="tableblock halign-left valign-top">Beschreibung</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">Nein</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Transforme`graph.json`in PlantUML (deterministisch)</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">Ja</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erzeuge einige`.prompt`von dem Graphen, behandelt sie sie via 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="_warum_es_deterministisch_ist_und_warum_das_wichtig_ist">Warum es deterministisch ist (und warum das wichtig ist)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Schlüsselpunkt des Pipelines`generateKnowledgeGraphDiagram`(Because the source text is empty, the translation is also empty.)<strong>Er ruft kein LLM auf.</strong>. Die Transformation`graph.json`→ PlantUML ist eine reine Funktion.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Pipeline DETERMINISTISCH (generateKnowledgeGraphDiagram)" as det { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Pipeline DETERMINISTISCH (generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --&gt; parser : parse parser --&gt; renderer : KnowledgeGraph renderer --&gt; puml : render (fonction pure) } rectangle "Pipeline LLM (processPlantumlPrompts)" as llm { [.prompt] as prompt [LlmService] as llmSvc [ChatModel] as model [PlantUML code] as puml2 prompt --&gt; llmSvc llmSvc --&gt; model : API call model --&gt; 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>Die konkreten Vorteile:</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">Vorteil</th> <th class="tableblock halign-left valign-top">Impact</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reproduzierbarkeit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">gleich`graph.json`→ gleiche Abbildung. Genau. Jedes Mal.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Null Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein LLM-Aufruf = keine Tokens = keine API-Rechnung.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Null Latenz</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Parse + render dauert ~100ms, nicht 1-5 Sekunden.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CI-kompatibel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist kein API-Schlüssel erforderlich. Kein flaky Test aufgrund einer variablen LLM-Antwort.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Versionierbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le <code>.puml`generiert ist Text. Man kann es`diff</code>, der Reviewer im PR, in Git versionieren.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_diagramme_des_pipelines_selbst">Diagramme des Pipelines selbst</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um den Kreis zu schließen, hier ist das Diagramm des Pipelines, wie es vom Plugin generiert würde :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/pipeline-sequence.svg" alt="pipeline sequence" width="1679" height="554"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_integration_in_die_projektgovernanz">Integration in die Projektgovernanz</h2> <div class="sectionbody"> <div class="paragraph"> <p>In unserem Projekt integriert sich diese Pipeline in eine EAGER/LAZY-Kontextverwaltungsstrategie für den KI-Agenten. Der Knowledge Graph ersetzt die manuelle Architektur-Dokumentation durch einen strukturierten, abfragbaren und selbst aktualisierenden Graphen.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 11) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(immer geladen)" 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 — Strategie ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(immer geladen)" 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 — Strategie (auf Anfrage)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify\n(zielgerichtete Anfragen)" as lazy_graph { [graph.json] as gj [Queries\n(query/path/explain)] as queries } package "Pipeline PlantUML (automatisch generiert)" as puml { [generateKnowledgeGraphDiagram] as kgTask [generateDiagramDocs] as ddTask [Diagrammes PNG] as diagrams } Agent --&gt; eager : Lit en début de session Agent ..&gt; lazy_strat : Charge si type détecté Agent ..&gt; lazy_graph : Query si besoin structurel kgTask --&gt; diagrams : Déterministe ddTask --&gt; 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>Die Kombination beider Systeme ist komplementär :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Die Strategie regelt das WANN und das WIE</strong>— Governance, Workflow, Archivierung</p> </li> <li> <p><strong>Graphify verwaltet das WAS und das WO</strong>— Struktur des Codes, Beziehungen, gezielte Abfragen</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ Die Sitzungsstrategie verwaltet das<strong>wann</strong> et le <strong>wie</strong>(Governance, Workflow, Schwellen), Graphify verwaltet das<strong>WAS</strong> et le <strong>WO</strong>(Struktur des Codes, Beziehungen, gezielte Anfragen). Die Pipeline PlantUML verwaltet das<strong>Mit was</strong>(deterministische Diagramme, versioniert, stets aktuell). </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_vorbereitung_checkliste_in_5_minuten">Vorbereitung : Checkliste in 5 Minuten</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">Schritt</th> <th class="tableblock halign-left valign-top">Bestellung</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 installieren</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">Ausnahmen konfigurieren</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstellen`.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">Knowledge Graph extrahieren</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">Die Diagramme generieren</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">Committe die Ergebnisse</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 &gt; .graphifyignore &lt;&lt; '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="_fallstricke_und_gegenmaßnahmen">Fallstricke und Gegenmaßnahmen</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">Falle</th> <th class="tableblock halign-left valign-top">Beschreibung</th> <th class="tableblock halign-left valign-top">Minderung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">zu dichter Graph</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ein großes Projekt erzeugt Hunderte unlesbare Knoten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">verwenden`-Pplantuml.kg.maxNodes=30`und nach Community filtern</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Zu weite Ausschlüsse</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zu viele Dateien in`.graphifyignore`verringert den Wert des Graphen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Beginnen Sie damit, nur credentials und build zu ausschließen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Richtung der Pfeile</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die INFERRED-Kanten können eine mehrdeutige Richtung haben</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filtern nach`-Pplantuml.kg.edgeTypes=EXTRACTED`nur für bestimmte Beziehungen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">veralteter Graph</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Code ändert sich, aber der Graph wird nicht rekonstruiert</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Verwenden`graphify . --update`regelmäßig oder der Git-Hook`graphify hook install`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Aktualisierte Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Inkrementelle Updates sind quasi kostenlos (tree-sitter lokal)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nur die docs (<code>.adoc</code>) verbrauchen LLM‑Tokens</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_was_man_am_ende_erhält">Was man am Ende erhält</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 10) ] @startuml skinparam backgroundColor #FEFEFE rectangle "VORHER" as avant { card "Handgezeichnete Diagramme\nImmer veraltet\nNiemand aktualisiert sie" as av1 #FDEDEC } rectangle "nach" as apres { card "Automatisch generierte Diagramme Immer auf dem neuesten Stand mit dem Code ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "VORHER" as avant { card "Handgezeichnete Diagramme\nImmer veraltet\nNiemand aktualisiert sie" as av1 #FDEDEC } rectangle "nach" as apres { card "Automatisch generierte Diagramme Immer auf dem neuesten Stand mit dem Code In Git versioniert Deterministisch und reproduzierbar" as ap1 #E8F8E8 } avant --&gt; apres : graphify . --no-viz\n+ ./gradlew generateKnowledgeGraphDiagram @enduml</pre> </div> </div> <div class="paragraph"> <p>Die konkreten Vorteile</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">Vorteil</th> <th class="tableblock halign-left valign-top">Detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Immer aktuelle Dokumentation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Diagramme spiegeln den aktuellen Code, keinen manuellen Snapshot</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein Wartungsaufwand</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Diagramme regenerieren sich bei jedem Build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reduzierung der technischen Schulden</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist nicht mehr nötig, die Diagramme manuell zu pflegen.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Visueller Kontext für die neuen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ein neuer Entwickler versteht die Architektur, indem er die Diagramme betrachtet.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Feintuning-Potential</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Paare (Untergraph → Diagramm) sind Beispiele für KI-Training</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Automatische Validierung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`PlantumlService.validateSyntax()`Überprüft jedes generierte Diagramm</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">schnelles Onboarding</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5 Diagramme = vollständige Ansicht der Architektur</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em><em>_ Wer ein Warum hat, kann alle Wie ertragen. </em>_</em></p> </div> <div class="paragraph"> <p>Das <em>warum</em> : Diagramme stets auf dem neuesten Stand. Das <em>wie</em> : zwei Befehle in einer Gradle-Pipeline.</p> </div> </div> </div> <div class="sect1"> <h2 id="_links">Links</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nicholasgasior/graphify">Graphify auf GitHub</a></p> </li> <li> <p><a href="https://github.com/cheroliv/plantuml-gradle">PlantUML Gradle-Plugin</a></p> </li> <li> <p><a href="/blog/2026/0104_fg_command_super_tips_post.html">Die Super-Tipps des fg-Befehls</a>— vorheriger Artikel über den Terminal-Workflow</p> </li> </ul> </div> </div> </div> Integrieren Sie Graphify in einen Gradle-Workflow: vom Knowledge Graph zum PlantUML-Diagramm in einem Befehl https://cheroliv.com/blog/pilot-batch/0105_integrer_graphify_workflow_gradle_post.html Sun, 19 Apr 2026 00:00:00 +0000 blog/pilot-batch/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="#_das_problem_diagramme_hinken_ständig_hinter_dem_code_her">Das Problem: Diagramme hinken ständig hinter dem Code her.</a></li> <li><a href="#_die_lösung_eine_deterministische_pipeline_knowledge_graph_plantuml">Die Lösung: eine deterministische Pipeline Knowledge Graph → PlantUML</a></li> <li><a href="#_schritt_1_graphify_installieren_und_das_knowledge_graph_extrahieren">Schritt 1: Graphify installieren und das Knowledge Graph extrahieren</a> <ul class="sectlevel2"> <li><a href="#_installation">Installation</a></li> <li><a href="#_ausnahmen_konfigurieren">Ausnahmen konfigurieren</a></li> <li><a href="#_den_knowledge_graph_extrahieren">Den Knowledge Graph extrahieren</a></li> </ul> </li> <li><a href="#_schritt_2_das_gradle_plugin_wandelt_das_knowledge_graph_in_plantuml_um">Schritt 2: Das Gradle-Plugin wandelt das Knowledge Graph in PlantUML um</a> <ul class="sectlevel2"> <li><a href="#_pipeline_architektur">Pipeline-Architektur</a></li> <li><a href="#_die_inneren_komponenten">Die inneren Komponenten</a></li> <li><a href="#_renderregeln">Renderregeln</a></li> </ul> </li> <li><a href="#_schritt_3_tägliche_nutzung">Schritt 3: Tägliche Nutzung</a> <ul class="sectlevel2"> <li><a href="#_vollständiges_diagramm">vollständiges Diagramm</a></li> <li><a href="#_nach_gemeinschaft_filtern">Nach Gemeinschaft filtern</a></li> <li><a href="#_nach_kantentyp_filtern">Nach Kantentyp filtern</a></li> <li><a href="#_nach_knotentyp_und_konfidenz_filtern">Nach Knotentyp und Konfidenz filtern</a></li> <li><a href="#_benutzerdefiniertes_ausgabeverzeichnis">Benutzerdefiniertes Ausgabeverzeichnis</a></li> <li><a href="#_vollständige_referenz_der_eigenschaften">Vollständige Referenz der Eigenschaften</a></li> </ul> </li> <li><a href="#_das_vollständige_pipeline_in_einem_gradle_workflow">Das vollständige Pipeline in einem Gradle-Workflow</a> <ul class="sectlevel2"> <li><a href="#_workflowtyp">Workflow‑Typ</a></li> <li><a href="#_integration_in_den_entwicklungszyklus">Integration in den Entwicklungszyklus</a></li> <li><a href="#_inkrementelles_update">Inkrementelles Update</a></li> </ul> </li> <li><a href="#_dogfooding_das_plugin_dokumentiert_sich_selbst">Dogfooding: Das Plugin dokumentiert sich selbst</a></li> <li><a href="#_warum_es_deterministisch_ist_und_warum_das_zählt">Warum es deterministisch ist (und warum das zählt)</a></li> <li><a href="#_die_diagramme_der_pipeline_selbst">Die Diagramme der Pipeline selbst</a></li> <li><a href="#_einbindung_in_die_projektgovernance">Einbindung in die Projektgovernance</a></li> <li><a href="#_einrichtung_checkliste_in_5_minuten">Einrichtung: Checkliste in 5 Minuten</a></li> <li><a href="#_fallen_und_minderungen">Fallen und Minderungen</a></li> <li><a href="#_was_man_am_ende_erhält">Was man am Ende erhält</a></li> <li><a href="#_links">Links</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 12 minutes</div> <p>Deine Codebase wächst. Die Abhängigkeiten zwischen den Modulen vermehren sich. Die Architektur-Dokumentation wird veraltet, bevor sie überhaupt geschrieben ist. Und wenn dein Gradle-Build <em>automatisch</em> aktuelle Diagramme aus der tatsächlichen Code-Struktur generieren könnte? Das ist genau das, was die Graphify + PlantUML Gradle Plugin-Pipeline macht:`graphify . --no-viz`extrahiert das Knowledge Graph,`./gradlew generateKnowledgeGraphDiagram`es verwandelt in PlantUML-Diagramme. Null LLM, null Handbuch, 100% deterministisch.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tick</dt> <dd> <p>(Empty output)</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_diagramme_hinken_ständig_hinter_dem_code_her">Das Problem: Diagramme hinken ständig hinter dem Code her.</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jedes Projekt, das einige tausend Zeilen übersteigt, leidet unter diesem Syndrom:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Am Anfang des Projekts zeichnet man ein Architekturdiagramm.</p> </li> <li> <p>Der Code entwickelt sich, die Abhängigkeiten ändern sich.</p> </li> <li> <p>Das Diagramm wird zu einer dekorativen Lüge.</p> </li> <li> <p>Niemand aktualisiert es, weil es mühsam ist</p> </li> <li> <p>Die Neuankommelinge stützen sich darauf und machen Fehler.</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>Die Frage ist nicht <em>muss es Diagramme geben?</em> — jeder weiß, dass ja. Die Frage lautet:<strong>Wer hält sie auf dem neuesten Stand?</strong></p> </div> <div class="paragraph"> <p>Die Antwort: niemand. Falls es automatisch ist.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_eine_deterministische_pipeline_knowledge_graph_plantuml">Die Lösung: eine deterministische Pipeline Knowledge Graph → PlantUML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Prinzip ist einfach: Statt die Diagramme von Hand zu zeichnen, zeichnet man sie<strong>Generiert aus der eigentlichen Struktur des Codes</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify (pip install graphifyy)" as Graphify collections "graphify-out/graph.json\n(Knowledge Graph)" as KGJSON component "PlantUML Gradle-Plugin (generateKnowledgeGraphDiagram)" as Plugin component "KnowledgeGraphParser" as Parser component "KnowledgeGraphRenderer" as Renderer component "PlantumlService\n(Validierung + PNG-Rendering)" as PS collections "diagrams/knowledge-graph/\n(.puml + .png)" as Output Développeur --&gt; Graphify : graphify . --no-viz Graphify --&gt; KGJSON : extrait la structure\ndu code source Développeur --&gt; Plugin : ./gradlew generateKnowledgeGraphDiagram Plugin --&gt; Parser : parse(graph.json) Parser --&gt; Plugin : KnowledgeGraph\n(noeuds + arêtes + communautés) Plugin --&gt; Renderer : render(graph, filters) Renderer --&gt; Plugin : code PlantUML\ndéterministe Plugin --&gt; PS : validateSyntax + generateImage PS --&gt; 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>Zwei Befehle. Das ist alles.</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>Das Ergebnis? Dateien`.puml` et <code>.png`in`diagrams/knowledge-graph/</code>, in Git versioniert, stets auf dem neuesten Stand des Codes.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_1_graphify_installieren_und_das_knowledge_graph_extrahieren">Schritt 1: Graphify installieren und das Knowledge Graph extrahieren</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_installation">Installation</h3> <div class="paragraph"> <p>Graphify ist ein Python-Tool, das Ihre Codebasis analysiert und einen strukturierten Wissensgraphen erstellt :</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 &amp;&amp; graphify install --platform opencode # Alternative avec pip pip install graphifyy &amp;&amp; graphify install --platform opencode</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_ausnahmen_konfigurieren">Ausnahmen konfigurieren</h3> <div class="paragraph"> <p>Eine Datei erstellen`.graphifyignore`im Wurzelverzeichnis des Projekts, um die Dateien auszuschließen, die nicht zur Geschäftslogik gehören:</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="_den_knowledge_graph_extrahieren">Den Knowledge Graph extrahieren</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>Das Flag`--no-viz`Überspringt die HTML-Generierung (unnötig in einem Gradle-Pipeline). Das Ergebnis ist eine Datei.`graphify-out/graph.json`enthält:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Knoten</strong>: Klassen, Funktionen, Dateien — mit ihrem Typ und Gemeinschaft</p> </li> <li> <p><strong>Kanten</strong>: Beziehungen zwischen Knoten (EXTRACTED aus dem Code, INFERRED vom LLM)</p> </li> <li> <p><strong>Gemeinschaften</strong>: automatische Gruppierungen von verbundenen Knoten</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Beispiel einer Struktur`graph.json`</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>Der Quellcode (<code>.kt</code>, <code>.java</code>) wird lokal von tree-sitter analysiert,<strong>nicht anfechtbar</strong>. Nur die Dokumentationsdateien (<code>.adoc</code>, <code>.md</code>) erfordern einen LLM-Aufruf für die semantische Extraktion. Also`--update`sur Kotlin-Code ist nahezu sofort.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_2_das_gradle_plugin_wandelt_das_knowledge_graph_in_plantuml_um">Schritt 2: Das Gradle-Plugin wandelt das Knowledge Graph in PlantUML um</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pipeline_architektur">Pipeline-Architektur</h3> <div class="paragraph"> <p>Das Plugin`com.cheroliv.plantuml`integriert eine Aufgabe`generateKnowledgeGraphDiagram`der verwandelt`graph.json`auf diese Weise in PlantUML-Diagrammen<strong>vollständig deterministisch</strong>&lt;/think&gt;</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/architecture-pipeline-kg.svg" alt="architecture pipeline kg" width="1138" height="450"> </div> </div> </div> <div class="sect2"> <h3 id="_die_inneren_komponenten">Die inneren Komponenten</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">Komponente</th> <th class="tableblock halign-left valign-top">Rolle</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">Parsen`graph.json`— unterstützt 3 Formate: nativen Graphify`nodes`(Empty)<code>links</code>), legacy (<code>communities</code>), flat. löst die numerischen IDs in die Labels auf</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">transformiert deterministischen einen`KnowledgeGraph`Im PlantUML-Code. Gruppen nach Typ, Gemeinschaften in Paketen, automatische Legende.</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">Gradle-Aufgabe, die orchestriert: parse → render → validate → PNG. Konfigurierbar über Gradle-Eigenschaften.</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">Datenmodelle:`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">Syntaktische Validierung + PNG-Rendering (von allen Aufgaben des Plugins wiederverwendet)</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_renderregeln">Renderregeln</h3> <div class="paragraph"> <p>Der Renderer wendet deterministische visuelle Konventionen an :</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">Typ der Kante</th> <th class="tableblock halign-left valign-top">PlantUML-Notation</th> <th class="tableblock halign-left valign-top">Bedeutung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">EXTRAHIERT</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>-&#8594;</code>(durchgezogene Linie, schwarz)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aus dem Quellcode extrahierte Beziehung (Gewissheit)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">INFERRED</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>..&gt;</code>(gepunktete Linie)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vom LLM abgeleitete Relation (Vertrauensscore)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">mehrdeutig</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>--x</code>(rote gepunktete Linie)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ambigüe Beziehung (zu überprüfen)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Gemeinden werden als PlantUML-Pakete mit einer automatischen Farbpalette gerendert.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_3_tägliche_nutzung">Schritt 3: Tägliche Nutzung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_vollständiges_diagramm">vollständiges Diagramm</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>Ausgabe :`diagrams/knowledge-graph/knowledge-graph-full.puml`+<code>.png</code></p> </div> </div> <div class="sect2"> <h3 id="_nach_gemeinschaft_filtern">Nach Gemeinschaft filtern</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="_nach_kantentyp_filtern">Nach Kantentyp filtern</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="_nach_knotentyp_und_konfidenz_filtern">Nach Knotentyp und Konfidenz filtern</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="_benutzerdefiniertes_ausgabeverzeichnis">Benutzerdefiniertes Ausgabeverzeichnis</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="_vollständige_referenz_der_eigenschaften">Vollständige Referenz der Eigenschaften</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">Eigentum</th> <th class="tableblock halign-left valign-top">Standard</th> <th class="tableblock halign-left valign-top">Beschreibung</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>(alle)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemeinschaften nach Namen filtern (Teilstring-Übereinstimmung)</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"><em>(alle)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kantenarten getrennt durch Kommas :`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">Mindestkonfidenzschwelle für die Kanten</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>(unbegrenzt)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Maximale Anzahl der anzuzeigenden Knoten</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>(alle)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Knotentypen, getrennt durch Kommata (Beispiel.<code>class</code>, <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">Ausgabeverzeichnis für die Dateien`.puml` et <code>.png</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_das_vollständige_pipeline_in_einem_gradle_workflow">Das vollständige Pipeline in einem Gradle-Workflow</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_workflowtyp">Workflow‑Typ</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="_integration_in_den_entwicklungszyklus">Integration in den Entwicklungszyklus</h3> <div class="paragraph"> <p>Der Pipeline integriert sich natürlich in die Schlüsselstufen der Entwicklung :</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE state "Entwicklung" as dev state "Extraktion ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE state "Entwicklung" as dev state "Extraktion graphify . --no-viz" as extract state "Erzeugung ./gradlew generateKnowledgeGraphDiagram" as generate state "Commit versionierte Diagramme" as commit [*] --&gt; dev dev --&gt; extract : Code modifié extract --&gt; generate : graph.json à jour generate --&gt; commit : .puml + .png générés commit --&gt; 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="_inkrementelles_update">Inkrementelles Update</h3> <div class="paragraph"> <p>Wenn sich der Code ändert, bauen wir nicht den gesamten Graphen von Grund auf neu:</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`re-extrahiert nur die geänderten Dateien (mittels SHA256 erkannt in`graphify-out/cache/</code>). Auf Kotlin-Code ist es nahezu sofort, weil tree-sitter lokal arbeitet, ohne LLM-Aufruf.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dogfooding_das_plugin_dokumentiert_sich_selbst">Dogfooding: Das Plugin dokumentiert sich selbst</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der PlantUML-Plug‑in existiert, um Prompts in Diagramme zu verwandeln. Er kann auch den Knowledge Graph seiner <em>propre</em> Codebasis in Dokumentationsdiagramme umwandeln. Das ist <em>dogfooding</em>: Der Plug‑in konsumiert seinen eigenen Dienst.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 29) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Normale Pipeline\n(Benutzer → Diagramme)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --&gt; task1 task1 --&gt; llm1 llm1 --&gt; out1 } package "Pipeline Knowledge Graph (deterministischer Ansatz, kein 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 --&gt; parser parser --&gt; renderer renderer --&gt; ps ps --&gt; out2 } package "Pipeline Dogfooding ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Normale Pipeline\n(Benutzer → Diagramme)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --&gt; task1 task1 --&gt; llm1 llm1 --&gt; out1 } package "Pipeline Knowledge Graph (deterministischer Ansatz, kein 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 --&gt; parser parser --&gt; renderer renderer --&gt; ps ps --&gt; out2 } package "Pipeline Dogfooding (LLM → Dokumentation des Plugins)" 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 --&gt; gpa gpa --&gt; auto_prompt auto_prompt --&gt; task2 task2 --&gt; llm2 llm2 --&gt; out3 } note "Dasselbe LlmService, dasselbe ApiKeyPool, dasselbe PlantumlService — NULL Duplikation" as N @enduml</pre> </div> </div> <div class="paragraph"> <p>Zugehörige Gradle-Tasks :</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">Aufgabe</th> <th class="tableblock halign-left valign-top">LLM ?</th> <th class="tableblock halign-left valign-top">Beschreibung</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">Nein</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Transformiere`graph.json`in PlantUML (deterministisch)</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">Ja</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erzeuge einige`.prompt`Seit dem Graphen werden sie mit LLM verarbeitet (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="_warum_es_deterministisch_ist_und_warum_das_zählt">Warum es deterministisch ist (und warum das zählt)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Schlüsselpunkt des Pipelines`generateKnowledgeGraphDiagram` : <strong>Er ruft keinen LLM an</strong>. Die Transformation`graph.json`PlantUML ist eine reine Funktion.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "deterministische Pipeline (generateKnowledgeGraphDiagram)" as det { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "deterministische Pipeline (generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --&gt; parser : parse parser --&gt; renderer : KnowledgeGraph renderer --&gt; puml : render (fonction pure) } rectangle "Pipeline LLM\n(processPlantumlPrompts)" as llm { [.prompt] as prompt [LlmService] as llmSvc [ChatModel] as model [PlantUML code] as puml2 prompt --&gt; llmSvc llmSvc --&gt; model : API call model --&gt; 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>Die konkreten Vorteile:</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">Vorteil</th> <th class="tableblock halign-left valign-top">Einfluss</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reproduzierbarkeit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">gleich`graph.json`→ derselbe Diagramm. Genau. Jedes Mal.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Null Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein LLM-Aufruf = keine Tokens = keine API-Rechnung</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Null Latenz</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Parse + render dauert ~100ms, nicht 1-5 Sekunden.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CI-kompatibel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein API‑Schlüssel erforderlich. Kein flaky Test aufgrund einer variablen LLM‑Antwort.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">versionierbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le <code>.puml`generiert ist Text. Man kann es`diff</code>, den PR-Reviewer, ihn in Git versionieren</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_die_diagramme_der_pipeline_selbst">Die Diagramme der Pipeline selbst</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um den Kreis zu schließen, hier ist das Diagramm der Pipeline, wie es vom Plugin generiert würde :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/pipeline-sequence.svg" alt="pipeline sequence" width="1686" height="554"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_einbindung_in_die_projektgovernance">Einbindung in die Projektgovernance</h2> <div class="sectionbody"> <div class="paragraph"> <p>In unserem Projekt integriert sich diese Pipeline in eine EAGER/LAZY-Kontextverwaltungsstrategie für den KI-Agenten. Der Knowledge Graph ersetzt die manuelle Architektur-Dokumentation durch einen strukturierten, abfragbaren und automatisch aktualisierbaren Graph.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 16) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(immer geladen)" 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 — Strategie\n(auf Anfrage)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(immer geladen)" 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 — Strategie\n(auf Anfrage)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify (gezielte Anfragen)" as lazy_graph { [graph.json] as gj [Queries\n(query/path/explain)] as queries } package "Pipeline PlantUML (auto-generiert)" as puml { [generateKnowledgeGraphDiagram] as kgTask [generateDiagramDocs] as ddTask [Diagrammes PNG] as diagrams } Agent --&gt; eager : Lit en début de session Agent ..&gt; lazy_strat : Charge si type détecté Agent ..&gt; lazy_graph : Query si besoin structurel kgTask --&gt; diagrams : Déterministe ddTask --&gt; 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>Die Ehe der beiden Systeme ist komplementär:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Die Strategie verwaltet das WANN und das WIE</strong>— Governance, Workflow, Archivierung</p> </li> <li> <p><strong>Graphify verwaltet das WAS und das WO</strong>— Code-Struktur, Beziehungen, gezielte Anfragen</p> </li> </ul> </div> <div class="paragraph"> <p>(leer) Die Sitzungsstrategie verwaltet das<strong>wann</strong> et le <strong>wie</strong>(Governance, Workflow, Schwellenwerte), Graphify verwaltet das<strong>WAS</strong> et le <strong>WO</strong>(Struktur des Codes, Beziehungen, gezielte Anfragen). Der PlantUML-Pipeline verwaltet das<strong>Mit was?</strong>(Diagramme, deterministische, versioniert, immer aktuell). <em>__</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_einrichtung_checkliste_in_5_minuten">Einrichtung: Checkliste in 5 Minuten</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">Schritt</th> <th class="tableblock halign-left valign-top">Bestellung</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 installieren</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">Ausnahmen konfigurieren</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstellen`.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">Knowledge Graph extrahieren</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">Die Diagramme generieren</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">Ergebnisse committen</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 &gt; .graphifyignore &lt;&lt; '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="_fallen_und_minderungen">Fallen und Minderungen</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">Falle</th> <th class="tableblock halign-left valign-top">Beschreibung</th> <th class="tableblock halign-left valign-top">Minderung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Zu dichter Graph</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ein großes Projekt erzeugt Hunderte von unlesbaren Knoten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Verwenden`-Pplantuml.kg.maxNodes=30`und nach Gemeinschaft filtern</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Zu breite Ausschlüsse</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zu viele Dateien in`.graphifyignore`reduziert den Wert des Graphen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zuerst nur credentials und build ausschließen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Richtung der Pfeile</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Kanten INFERRED können eine mehrdeutige Richtung haben</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filtern nach`-Pplantuml.kg.edgeTypes=EXTRACTED`nur für bestimmte Beziehungen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">veralteter Graph</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Code ändert sich, aber der Graph wird nicht neu erstellt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">verwenden`graphify . --update`regelmäßig oder der Git-Hook`graphify hook install`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Aktualisierte Kosten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Inkrementelle Updates sind nahezu kostenlos (tree-sitter lokal)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nur die Dokumente (<code>.adoc</code>) sie verbrauchen LLM-Token</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_was_man_am_ende_erhält">Was man am Ende erhält</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Vor" as avant { card "Von Hand gezeichnete Diagramme Immer veraltet ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "Vor" as avant { card "Von Hand gezeichnete Diagramme Immer veraltet Niemand aktualisiert sie" as av1 #FDEDEC } rectangle "NACH" as apres { card "Automatisch generierte Diagramme Immer auf dem neuesten Stand mit dem Code In Git versioniert Deterministisch und reproduzierbar" as ap1 #E8F8E8 } avant --&gt; apres : graphify . --no-viz\n+ ./gradlew generateKnowledgeGraphDiagram @enduml</pre> </div> </div> <div class="paragraph"> <p>Die konkreten Vorteile:</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">Gewinn</th> <th class="tableblock halign-left valign-top">Detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Immer aktuelle Dokumentation</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Diagramme spiegeln den aktuellen Code wider, kein manueller Snapshot</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein Wartungsaufwand</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Diagramme regenerieren sich bei jedem Build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reduzierung der technischen Schulden</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist nicht mehr notwendig, Diagramme manuell zu pflegen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Visueller Kontext für die neuen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ein neuer Entwickler versteht die Architektur, indem er die Diagramme betrachtet</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">potenzielles Fine-tuning</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Paare (Untergraph → Diagramm) sind Beispiele für KI-Training</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Automatische Validierung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`PlantumlService.validateSyntax()`prüft jedes generierte Diagramm</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Schnelles Onboarding</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5 Diagramme = vollständige Übersicht der Architektur</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>(No output needed; keep empty.) Wer ein <em>Warum</em> hat kann alle <em>Wie</em> ertragen. <em>__</em></p> </div> <div class="paragraph"> <p>Der <em>Warum</em> : stets aktuelle Diagramme. Der <em>Wie</em> : zwei Befehle in einem Gradle-Pipeline.</p> </div> </div> </div> <div class="sect1"> <h2 id="_links">Links</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nicholasgasior/graphify">Graphify auf GitHub</a></p> </li> <li> <p><a href="https://github.com/cheroliv/plantuml-gradle">PlantUML Gradle-Plugin</a></p> </li> <li> <p><a href="/blog/2026/0104_fg_command_super_tips_post.html">Die Super-Tipps des fg-Befehls</a>— vorheriger Artikel über den Terminal-Workflow</p> </li> </ul> </div> </div> </div> Die super Tipps des fg-Befehls: wenn Ctrl+Z Ihre Terminalsitzung rettet 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="#_das_problem_ein_besetztes_terminal">Das Problem: ein besetztes Terminal</a></li> <li><a href="#_die_drei_unverzichtbaren_befehle">Die drei unverzichtbaren Befehle</a> <ul class="sectlevel2"> <li><a href="#_ctrlz_anhalten_sigtstp">Ctrl+Z — Anhalten (SIGTSTP)</a></li> <li><a href="#_fg_in_den_vordergrund_holen">fg — In den Vordergrund holen</a></li> <li><a href="#_bg_im_hintergrund_fortsetzen">bg — Im Hintergrund fortsetzen</a></li> <li><a href="#_jobs_auflisten_der_shell_jobs">jobs — Auflisten der Shell-Jobs</a></li> </ul> </li> <li><a href="#_szenario_1_der_lange_build">Szenario 1: Der lange Build</a> <ul class="sectlevel2"> <li><a href="#_schritt_für_schritt">Schritt für Schritt</a></li> </ul> </li> <li><a href="#_szenario_2_der_vergessene_editor">Szenario 2: Der vergessene Editor</a></li> <li><a href="#_szenario_3_der_opencode_prozess_ist_ausgesetzt">Szenario 3: Der opencode-Prozess ist ausgesetzt</a></li> <li><a href="#_szenario_4_mehrere_jobs_gleichzeitig_verwalten">Szenario 4: Mehrere Jobs gleichzeitig verwalten</a> <ul class="sectlevel2"> <li><a href="#_zusammenfassung_der_jobbefehle">Zusammenfassung der Jobbefehle</a></li> </ul> </li> <li><a href="#_unterschiede_zwischen_fg_bg_strgz_strgc_und">Unterschiede zwischen fg, bg, Strg+Z, Strg+C und &amp;</a></li> <li><a href="#_der_vollständige_lebenszyklus_eines_jobs">Der vollständige Lebenszyklus eines Jobs</a></li> <li><a href="#_fortgeschrittene_tipps">Fortgeschrittene Tipps</a> <ul class="sectlevel2"> <li><a href="#_fg_mit_dem_aktuellsten_job_und_der_wechsel">fg mit dem aktuellsten Job und der Wechsel</a></li> <li><a href="#_einen_job_ordentlich_erledigen">einen Job ordentlich erledigen</a></li> <li><a href="#_désown_von_der_shell_trennen">désown : von der Shell trennen</a></li> <li><a href="#_kombinieren_mit_nohup_für_lange_prozesse">Kombinieren mit nohup für lange Prozesse</a></li> </ul> </li> <li><a href="#_fallen_und_häufige_fehler">Fallen und häufige Fehler</a> <ul class="sectlevel2"> <li><a href="#_ctrlz_und_ctrlc_verwechseln">Ctrl+Z und Ctrl+C verwechseln</a></li> <li><a href="#_die_jobs_sind_lokal_zur_shell">Die Jobs sind lokal zur Shell</a></li> <li><a href="#_die_jobs_überleben_das_schließen_der_shell_nicht">Die Jobs überleben das Schließen der Shell nicht</a></li> <li><a href="#_die_interaktiven_prozesse_und_fg">Die interaktiven Prozesse und fg</a></li> </ul> </li> <li><a href="#_zusammenfassendes_diagramm">Zusammenfassendes Diagramm</a></li> <li><a href="#_warum_ist_fg_unterschätzt">Warum ist fg unterschätzt?</a></li> <li><a href="#_technisches_gedächtnis_die_signale">Technisches Gedächtnis : die Signale</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 10 minutes</div> <p>Sie werfen`./gradlew build`, das Terminal ist für 3 Minuten blockiert, und du musst etwas anderes machen <em>während du wartest</em> ? Du musst kein neues Tab öffnen.`Ctrl+Z`hält den Prozess an,`fg`Es bringt es genau zurück dorthin, wo Sie es gelassen haben. Es ist der am meisten unterschätzte Unix-Tipp im Alltag eines Entwicklers.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tic</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_ein_besetztes_terminal">Das Problem: ein besetztes Terminal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jeder Entwickler hat diese Situation schon erlebt :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build &gt; Building...</code></pre> </div> </div> <div class="paragraph"> <p>Der Terminal ist blockiert. Sie können keine Befehle mehr eingeben. Und Sie müssen eine Datei ansehen, ein`git status`, oder einen belegten Port überprüfen.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Terminal" as term participant "Gradle ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Terminal" as term participant "Gradle ( Prozess )" as gradle dev -&gt; term : ./gradlew build term -&gt; gradle : Lance le build gradle -&gt; term : Occupe le terminal\n(pas de prompt) dev -&gt; term : veut taper une commande term --&gt; 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>Die meisten Entwickler öffnen ein neues Terminal. Aber es gibt eine elegantere, schnellere und eingebaute Lösung: das Job-Management.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_drei_unverzichtbaren_befehle">Die drei unverzichtbaren Befehle</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrlz_anhalten_sigtstp">Ctrl+Z — Anhalten (SIGTSTP)</h3> <div class="paragraph"> <p>`Ctrl+Z`sendet das Signal`SIGTSTP`dem Prozess im Vordergrund. Der Prozess ist<strong>ausgesetzt</strong>— nicht getötet — und das Terminal erhält wieder seinen Prompt.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build &gt; Building... ^Z [1]+ Stoppé ./gradlew build $</code></pre> </div> </div> <div class="paragraph"> <p>Die Zahl in Klammern`[1]`ist der<strong>Jobnummer</strong>. Le `+`gibt den Standardjob an.</p> </div> </div> <div class="sect2"> <h3 id="_fg_in_den_vordergrund_holen">fg — In den Vordergrund holen</h3> <div class="paragraph"> <p>`fg`Bringt den angehaltenen Job in den Vordergrund. Der Prozess setzt genau dort fort, wo er aufgehört hat.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ fg ./gradlew build &gt; Building... (reprend où il en était)</code></pre> </div> </div> <div class="paragraph"> <p>Mit einer spezifischen Jobnummer:</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_im_hintergrund_fortsetzen">bg — Im Hintergrund fortsetzen</h3> <div class="paragraph"> <p>`bg`Den Vorgang fortsetzen, <em>ohne</em> das Terminal zu blockieren. Ideal für lange Builds.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ bg [1]+ ./gradlew build &amp; $</code></pre> </div> </div> <div class="paragraph"> <p>Le `&amp;`am Ende bedeutet, dass der Prozess im Hintergrund läuft.</p> </div> </div> <div class="sect2"> <h3 id="_jobs_auflisten_der_shell_jobs">jobs — Auflisten der Shell-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 &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif state "Vordergrund ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif state "Vordergrund (blockierter Terminal)" as fg #LightCoral state "Ausgesetzt\n(Ctrl+Z)" as stopped #LightYellow state "Hintergrund\n(bg)" as bg_ #LightGreen [*] --&gt; fg : Lance une commande fg --&gt; stopped : Ctrl+Z\n(SIGTSTP) stopped --&gt; fg : fg\nreprend en avant-plan stopped --&gt; bg_ : bg\nreprend en arrière-plan bg_ --&gt; fg : fg\nramène en avant-plan fg --&gt; [*] : 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="_szenario_1_der_lange_build">Szenario 1: Der lange Build</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das ist der häufigste Anwendungsfall. Sie starten einen Gradle-Build, das Terminal ist blockiert, und Sie müssen etwas anderes tun.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "Terminal" as term participant "Gradle" as gradle database "Zustand ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "Terminal" as term participant "Gradle" as gradle database "Zustand Prozess" as state dev -&gt; term : ./gradlew build term -&gt; gradle : Lance le build gradle -&gt; state : En cours (FG) dev -&gt; term : Ctrl+Z term -&gt; state : Suspendu (job [1]) term --&gt; dev : Prompt libre $ dev -&gt; term : git status term --&gt; dev : working tree clean dev -&gt; term : fg term -&gt; state : Reprend (FG) gradle --&gt; 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="_schritt_für_schritt">Schritt für Schritt</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build &gt; Building... ^Z [1]+ Stoppé ./gradlew build $ git status On branch main nothing to commit, working tree clean $ fg ./gradlew build &gt; Building... BUILD SUCCESSFUL in 2m 34s</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_szenario_2_der_vergessene_editor">Szenario 2: Der vergessene Editor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sie sind in`vim`, Sie benötigen, eine andere Datei zu konsultieren, <em>ohne</em> sie zu verlassen`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>Aber es ist schwer. Mit`Ctrl+Z`, es ist sofort:</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="410" height="510"> </div> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> <code>vim`stellt seinen Zustand nach einem perfekt wieder her`fg</code>: Position des Cursors, Inhalt des Puffers, Undo-Verlauf – alles wird beibehalten. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_szenario_3_der_opencode_prozess_ist_ausgesetzt">Szenario 3: Der opencode-Prozess ist ausgesetzt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dies ist das Szenario, das diesen Artikel motiviert hat. Sie verwenden`opencode`(CLI-Tool zum Steuern eines LLM auf deinem Code), und der Prozess ist ausgesetzt.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (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-Agent)" as agent participant "Shell" as shell participant "git" as git dev -&gt; agent : Session active agent -&gt; 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 -&gt; agent : Ctrl+Z agent -&gt; shell : Suspendu (job [1]) dev -&gt; git : git diff git --&gt; dev : changements visibles dev -&gt; shell : fg shell -&gt; agent : Reprend (job [1]) agent --&gt; 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>Der Vorteil ist doppelt:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Kein Kontextverlust</strong>: die LLM-Sitzung, der Conversationsverlauf, die geöffneten Dateien — alles wird erhalten</p> </li> <li> <p><strong>Kein Neustart</strong>: keine Notwendigkeit, opencode neu zu starten, den Kontext neu zu laden, das Problem dem LLM noch einmal zu erklären</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_szenario_4_mehrere_jobs_gleichzeitig_verwalten">Szenario 4: Mehrere Jobs gleichzeitig verwalten</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>fg</code> et `bg`Sie akzeptieren eine Jobnummer, um einen bestimmten Prozess anzusprechen, wenn mehrere ausgesetzt sind.</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 &amp; # 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="796" height="280"> </div> </div> <div class="sect2"> <h3 id="_zusammenfassung_der_jobbefehle">Zusammenfassung der Jobbefehle</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">Bestellung</th> <th class="tableblock halign-left valign-top">Effekt</th> <th class="tableblock halign-left valign-top">Beispiel</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">Anhalte den Vordergrundprozess</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Versand von`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">Nimm den Standardjob wieder im Vordergrund auf</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">Bring den Job n in den Vordergrund</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">Nimm den Standardjob im Hintergrund wieder auf</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">Setze den Job n im Hintergrund fort</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">Liste die Jobs der aktuellen Shell</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>jobs -l</code>(mit 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">Beende den Job 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="_unterschiede_zwischen_fg_bg_strgz_strgc_und">Unterschiede zwischen fg, bg, Strg+Z, Strg+C und &amp;</h2> <div class="sectionbody"> <div class="paragraph"> <p>Viele Entwickler verwechseln diese Mechanismen. Hier ist eine entscheidende Klarstellung.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "**Strg+Z** SIGTSTP" as ctrlz #LightYellow { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "**Strg+Z** SIGTSTP" as ctrlz #LightYellow { card "Prozess anhalten (Er ist immer noch im Speicher) Kann mit fg/bg verwendet werden" as c1 } rectangle "**Ctrl+C**\nSIGINT" as ctrlc #LightCoral { card "Töte den Prozess (keine Rückkehr möglich) Verlust des gesamten Zustands" as c2 } rectangle "** &amp; \n(Hintergrund)" as ampersand #LightGreen { card "Starte direkt im Hintergrund Terminal sofort frei" as c3 } rectangle "**fg**\n(Vordergrund)" as fg_ #SkyBlue { card "Bringe einen Job im Vordergrund angehalten Terminal belegt" as c4 } rectangle "**bg** (Hintergrund)" as bg_ #Lavender { card "Setze den Job fort im Hintergrund angehalten Freies Terminal" as c5 } ctrlz -right-&gt; fg_ : fg pour reprendre ctrlz -right-&gt; bg_ : bg pour continuer\nen arrière-plan ctrlc -right-&gt; 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 &amp; 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">Abkürzung/Befehl</th> <th class="tableblock halign-left valign-top">Signal</th> <th class="tableblock halign-left valign-top">Effekt</th> <th class="tableblock halign-left valign-top">Zurückgehen?</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">Den Prozess aussetzen (eingefroren, im Speicher)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ja :`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">Töte den Prozess (abgeschlossen)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nein : Prozess zerstört</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">Beende den Prozess + core dump</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nein : Prozess zerstört</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>commande &amp;</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">Starte im Hintergrund direkt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`fg`um es wieder in den Vordergrund zu bringen</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`ist<strong>zerstörungsfrei</strong>. Der Prozess ist eingefroren, so wie er ist, im Speicher. Sie können sofort damit fortsetzen`fg</code>. Es ist eine <em>Pause</em>, kein <em>Halt</em>. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_der_vollständige_lebenszyklus_eines_jobs">Der vollständige Lebenszyklus eines Jobs</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif title vollständiger Lebenszyklus eines Shell-Jobs state "nicht existent" as none state "Vordergrund ^^^^^ Syntax Error? (Assumed diagram type: state) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif title vollständiger Lebenszyklus eines Shell-Jobs state "nicht existent" as none state "Vordergrund (belegt das Terminal)" as foreground #LightCoral state "Ausgesetzt (Ctrl+Z / SIGTSTP)" as suspended #LightYellow state "Background (bg oder &amp;)" as background #LightGreen state "Beendet\n(exit code 0)" as done #LightGray [*] --&gt; none none --&gt; foreground : tape une commande foreground --&gt; suspended : Ctrl+Z foreground --&gt; done : fin normale suspended --&gt; foreground : fg suspended --&gt; background : bg suspended --&gt; done : kill %n background --&gt; foreground : fg background --&gt; done : fin normale\n(en arrière-plan) background --&gt; suspended : Ctrl+Z\n(si fg puis Ctrl+Z) done --&gt; [*] 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="_fortgeschrittene_tipps">Fortgeschrittene Tipps</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_fg_mit_dem_aktuellsten_job_und_der_wechsel">fg mit dem aktuellsten Job und der Wechsel</h3> <div class="paragraph"> <p><code>fg`Ohne Argument bringt es den markierten Auftrag zurück</code>+<code>(der neueste). Aber Sie können auch verwenden</code>%-`um den vorherigen Job zu targeten:</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="_einen_job_ordentlich_erledigen">einen Job ordentlich erledigen</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_von_der_shell_trennen">désown : von der Shell trennen</h3> <div class="paragraph"> <p><code>disown`Entfernt einen Job aus der Job-Tabelle der Shell. Der Prozess läuft weiter, kann aber nicht mehr mit`fg</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build &amp; [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="_kombinieren_mit_nohup_für_lange_prozesse">Kombinieren mit nohup für lange Prozesse</h3> <div class="paragraph"> <p>Damit ein Prozess die Schließung des Terminals überlebt:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ nohup ./gradlew build &amp; [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 &lt;input&gt; (line 18) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg" as fg_ #SkyBlue { card "Bring den neuesten Job\n(+)" as f1 card "Ziel einen spezifischen Job: fg %n" as f2 card "Wechsle : fg %-%" as f3 } rectangle "töte %n" as kill_ #LightCoral { card "SIGTERM (sauber)" as k1 card "SIGKILL -9 (Zwangsbeendigung)" as k2 } rectangle "verstoßen" as disown #Lavender { card "Trenne von der Shell (überlebt die Abmeldung)" as d1 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg" as fg_ #SkyBlue { card "Bring den neuesten Job\n(+)" as f1 card "Ziel einen spezifischen Job: fg %n" as f2 card "Wechsle : fg %-%" as f3 } rectangle "töte %n" as kill_ #LightCoral { card "SIGTERM (sauber)" as k1 card "SIGKILL -9 (Zwangsbeendigung)" as k2 } rectangle "verstoßen" as disown #Lavender { card "Trenne von der Shell (überlebt die Abmeldung)" as d1 } rectangle "nohup + &amp;" as nohup_ #LightGreen { card "Immunisierter Prozess gegen SIGHUP (überlebt das Schließen des Terminals)" as n1 } fg_ -right-&gt; kill_ : si faut\nterminer kill_ -right-&gt; disown_ : ou détacher nohup_ -left-&gt; 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="_fallen_und_häufige_fehler">Fallen und häufige Fehler</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrlz_und_ctrlc_verwechseln">Ctrl+Z und Ctrl+C verwechseln</h3> <div class="paragraph"> <p>Das ist der häufigste Fehler.`Ctrl+C`Töte den Prozess.`Ctrl+Z`es aussetzt. Wenn Sie drücken`Ctrl+C`aus Reflex, der gesamte Zustand ist verloren – offene Dateien, LLM-Sessions, Builds im Gange.</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/ctrlz-vs-ctrlc.svg" alt="ctrlz vs ctrlc" width="1313" height="129"> </div> </div> </div> <div class="sect2"> <h3 id="_die_jobs_sind_lokal_zur_shell">Die Jobs sind lokal zur Shell</h3> <div class="paragraph"> <p><code>jobs</code>, <code>fg</code> et `bg`Sie funktionieren nur in der Shell, die die Prozesse gestartet hat. Wenn Sie ein neues Terminal öffnen, sehen Sie die Jobs des anderen nicht.</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>Um die systemweiten Prozesse anzuzeigen, verwenden Sie`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="_die_jobs_überleben_das_schließen_der_shell_nicht">Die Jobs überleben das Schließen der Shell nicht</h3> <div class="paragraph"> <p>Wenn Sie das Terminal schließen, werden alle angehaltenen oder Hintergrundjobs beendet. Damit ein Prozess weiterläuft, verwenden Sie`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 &amp; [1] 12345 $ disown %1 # Fermer le terminal → le build continue</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_die_interaktiven_prozesse_und_fg">Die interaktiven Prozesse und fg</h3> <div class="paragraph"> <p>Einige interaktive Programme gehen nach einem nicht gut.<code>Ctrl+Z</code>+<code>fg</code>. Es ist selten, aber es passiert:</p> </div> <div class="ulist"> <ul> <li> <p>Einige Programme, die Signale verwenden (vim, htop, less handhaben gut`Ctrl+Z`)</p> </li> <li> <p>Laufende Netzwerkprogramme (ssh, opencode) rufen in der Regel korrekt ab</p> </li> <li> <p>Programme, die das Terminal ändern (ncurses), können das Terminal manchmal in einem unerwarteten Zustand hinterlassen</p> </li> </ul> </div> <div class="paragraph"> <p>Im Fall eines beschädigten Terminals nach einem`fg`, geben Sie :</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="_zusammenfassendes_diagramm">Zusammenfassendes Diagramm</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 27) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 title "fg — Der Tipp, der alles ändert" rectangle "Problem" as problem #LightCoral { card "Terminal blockiert\ndurch einen Prozess" as p1 card "Ein neues\nTerminal öffnen = aufwändige Lösung" as p2 } rectangle "**Lösung**" as solution #LightGreen { card "Strg+Z → aussetzen" as s1 card "fg → setzt fort" as s2 card "bg → im Hintergrund" as s3 card "Jobs → Angehaltene anzeigen" as s4 } rectangle "Vorteile" as advantages #SkyBlue { card "Kein Verlust des Kontextes" as a1 card "Kein Neustart" as a2 card "Ein Terminal reicht" as a3 } problem -right-&gt; solution : "Die native Lösung Unix seit 40 Jahren" ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 title "fg — Der Tipp, der alles ändert" rectangle "Problem" as problem #LightCoral { card "Terminal blockiert\ndurch einen Prozess" as p1 card "Ein neues\nTerminal öffnen = aufwändige Lösung" as p2 } rectangle "**Lösung**" as solution #LightGreen { card "Strg+Z → aussetzen" as s1 card "fg → setzt fort" as s2 card "bg → im Hintergrund" as s3 card "Jobs → Angehaltene anzeigen" as s4 } rectangle "Vorteile" as advantages #SkyBlue { card "Kein Verlust des Kontextes" as a1 card "Kein Neustart" as a2 card "Ein Terminal reicht" as a3 } problem -right-&gt; solution : "Die native Lösung Unix seit 40 Jahren" solution -right-&gt; advantages : "Ergebnis" 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="_warum_ist_fg_unterschätzt">Warum ist fg unterschätzt?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die meisten modernen Entwickler entdecken`fg`spat, vielleicht sogar nie. Einige Gründe:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Die IDEs verstecken das Terminal</strong>: VS Code bietet ein integriertes Terminal an, aber mehrere Tabs machen`fg`anscheinend weniger notwendig</p> </li> <li> <p><strong>Graphische Tools ersetzen die CLI</strong>: die Dateiverwalter, die Systemmonitore, die grafischen Git-Clients</p> </li> <li> <p><strong>tmux und screen</strong>: diese Multiplexer lösen das gleiche Problem anders, aber`fg`ist einfacher und immer verfügbar</p> </li> </ol> </div> <div class="paragraph"> <p>Dennoch,`fg`ist :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Universal</strong>: vorhanden in allen POSIX-Shells (bash, zsh, fish&#8230;&#8203;)</p> </li> <li> <p><strong>Ohne Abhängigkeit</strong>: Keine Notwendigkeit, tmux oder screen zu installieren.</p> </li> <li> <p><strong>Schnappschuss</strong>: zwei Schläge (<code>Ctrl+Z`dann`fg</code>) zum Anhalten und Fortsetzen</p> </li> <li> <p><strong>Kontextbewahrer</strong>: Der Zustand des Prozesses ist intakt</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "Warum fg ist unterschätzt?" as why #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "Warum fg ist unterschätzt?" as why #LightCoral { card "IDE mit Terminal Multi-Tabs" as w1 card "grafische Werkzeuge\ndie die CLI ersetzen" as w2 card "tmux/screen lösen das Problem andernfalls" as w3 } rectangle "Warum ist fg überlegen ?" as superior #LightGreen { card "Universal: bash,\nzsh, fish, sh..." as s1 card "Unabhängigkeit: Keine Installation" as s2 card "Zwei Schläge :\nCtrl+Z dann fg" as s3 card "Erhaltener Kontext: nuller Zustandsverlust" as s4 } why -right-&gt; superior : "Die Einfachheit gewinnt immer" @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_technisches_gedächtnis_die_signale">Technisches Gedächtnis : die Signale</h2> <div class="sectionbody"> <div class="paragraph"> <p>Für die Neugierigen, hier sind die beteiligten Signale:</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">Signal</th> <th class="tableblock halign-left valign-top">Name</th> <th class="tableblock halign-left valign-top">Gesendet von</th> <th class="tableblock halign-left valign-top">Effekt</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">Unterbrechung — beendet den Prozess</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">Verlasse mit Core Dump</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">Interaktiver Stopp — setzt den Prozess aus</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">Fortsetzen — setzt einen angehaltenen Prozess fort</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">Saubere Beendigung</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">Erzwungene Beendigung (nicht abfangbar)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Der vollständige Fluss :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/signal-flow.svg" alt="signal flow" width="425" height="525"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>`fg`Es ist kein obskurer Tipp — es ist ein grundlegendes Mechanismus der Unix-Shell, verfügbar seit den 1970er Jahren. Die Tatsache, dass die meisten Entwickler es nicht kennen, ist ein Symptom unserer Zeit: IDEs und Multiplexer haben uns von den Grundlagen entfernt.</p> </div> <div class="paragraph"> <p>Aber wenn Sie auf einem SSH-Server sind, in einem Minimal-Terminal, oder einfach nur dabei sind zu verwenden`opencode`und dass das LLM gerade arbeitet —<code>Ctrl+Z</code>, <code>fg</code>, <code>bg</code>, `jobs`sind deine besten Freunde.</p> </div> <div class="paragraph"> <p><em><em>_ Ctrl+Z pausiert, fg setzt fort. Das ist das Pause-Play des Terminals. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><code>man bash</code>— Abschnitt JOB CONTROL</p> </li> <li> <p><code>man signal</code>— Liste der POSIX-Signale</p> </li> <li> <p><a href="https://www.gnu.org/software/bash/manual/bash.html#Job-Control">Bash-Referenzhandbuch—Auftragssteuerung</a></p> </li> <li> <p><a href="https://man7.org/linux/man-pages/man7/signal.7.html">man 7 signal — Signale Linux</a></p> </li> <li> <p><a href="https://tldp.org/LDP/abs/html/x312743.htm">Fortgeschrittenes Bash-Skript-Leitfaden — Auftragssteuerung</a></p> </li> </ul> </div> </div> </div> VS Code im Home: lokale Installation und Anpassung der Schriftarten ohne sudo 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="#_übersicht_des_parcours">Übersicht des Parcours</a></li> <li><a href="#_der_warum_vs_code_im_home">Der Warum: VS Code im Home</a> <ul class="sectlevel2"> <li><a href="#_das_problem_mit_der_systeminstallation">Das Problem mit der Systeminstallation</a></li> <li><a href="#_die_lösung_eine_lokale_installation">Die Lösung: eine lokale Installation</a></li> <li><a href="#_konkrete_vorteile">konkrete Vorteile</a></li> </ul> </li> <li><a href="#_schriftart_des_hauptmenüs_anpassen">Schriftart des Hauptmenüs anpassen</a> <ul class="sectlevel2"> <li><a href="#_die_feststellung">Die Feststellung</a></li> <li><a href="#_die_technik_direktes_css_patch">Die Technik: Direktes CSS-Patch</a></li> <li><a href="#_die_integritätswarnung_löschen">Die Integritätswarnung löschen</a></li> </ul> </li> <li><a href="#_die_schriftart_des_explorer_bereichs_anpassen_der_kampf">Die Schriftart des Explorer-Bereichs anpassen — der Kampf</a> <ul class="sectlevel2"> <li><a href="#_tentative_1_ein_parameter_der_nicht_existiert">Tentative 1 : ein Parameter, der nicht existiert</a></li> <li><a href="#_versuch_2_die_erweiterung_custom_css_and_js_loader">Versuch 2: die Erweiterung Custom CSS and JS Loader</a></li> <li><a href="#_die_falle_man_muss_die_erweiterung_jedes_mal_aktivieren">Die Falle: Man muss die Erweiterung jedes Mal aktivieren</a></li> <li><a href="#_versuch_3_die_linien_überlappen_sich">Versuch 3: Die Linien überlappen sich</a></li> <li><a href="#_die_lösung_zoom_auf_dem_elterncontainer">Die Lösung: <code>zoom</code> auf dem Elterncontainer</a></li> <li><a href="#_zusammenfassung_der_selectors_und_was_funktioniert">Zusammenfassung der Selectors und was funktioniert</a></li> </ul> </li> <li><a href="#_das_skript_für_das_automatische_update">Das Skript für das automatische Update</a> <ul class="sectlevel2"> <li><a href="#_das_problem">Das Problem</a></li> <li><a href="#_das_skript_vscode_update_sh">Das Skript `vscode-update.sh</a></li> </ul> </li> <li><a href="#_betroffene_dateien_überblick">Betroffene Dateien – Überblick</a></li> <li><a href="#_gelernte_lektionen">Gelernte Lektionen</a> <ul class="sectlevel2"> <li><a href="#_installieren_im_home_verzeichnis_befreit_alles">Installieren im home-Verzeichnis befreit alles</a></li> <li><a href="#_zoom_font_size_für_die_komponenten_list">zoom` &gt; <code>font-size</code> für die Komponenten list</a></li> <li><a href="#_die_erweiterung_custom_css_erfordert_eine_explizite_aktivierung">Die Erweiterung Custom CSS erfordert eine explizite Aktivierung</a></li> <li><a href="#_ein_aktualisierungsskript_ist_unverzichtbar">Ein Aktualisierungsskript ist unverzichtbar</a></li> </ul> </li> <li><a href="#_schnelle_referenzen">Schnelle Referenzen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 8 minutes</div> <p>Warum VS Code installieren in`/opt`oder über`apt`wenn man es in seinem Home ablegen und seine IDE in einen Spielplatz verwandeln kann, ohne je zu tippen`sudo`? Hier ist die Geschichte einer lokalen Installation gefolgt von einem erbitterten Kampf, um die Schriftarten des Menüs und des Datei-Explorers zu vergrößern.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_übersicht_des_parcours">Übersicht des Parcours</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur as dev actor "opencode ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur as dev actor "opencode + LLM" as agent package "Home Benutzer (~)" #LightGreen { package "~/apps/" { component "VS Code\n(tarball)" 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\n(zoom: 1.25)" as customcss #Lavender } } cloud "code.visualstudio.com" as download dev --&gt; vscode : Télécharge &amp; installe dev --&gt; script : Lance mise à jour script --&gt; download : wget dernière version script --&gt; vscode : Remplace + re-patch CSS agent --&gt; settings : Écrit config agent --&gt; customcss : Écrit zoom CSS agent --&gt; 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="_der_warum_vs_code_im_home">Der Warum: VS Code im Home</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_problem_mit_der_systeminstallation">Das Problem mit der Systeminstallation</h3> <div class="paragraph"> <p>VS Code installiert via`apt`, <code>dnf`oder in</code>/opt`sperrt die Anwendungsdateien hinter den Root-Rechten. Jegliche Änderung am nativen CSS, de`product.json`oder das Installationsverzeichnis erfordert`sudo`.</p> </div> <div class="paragraph"> <p>Aber, wenn man verwendet<strong>opencode</strong>(tool CLI zur Steuerung eines LLMs auf seinem Code), der Agent muss in der Lage sein:</p> </div> <div class="ulist"> <ul> <li> <p>In die Konfigurationsdateien schreiben`~/.config/Code/User/settings.json`) — das ist bereits im home</p> </li> <li> <p>Die Assets des IDE ändern (CSS des Workbenches`product.json`) für die erweiterten Anpassungen — das ist ohne sudo gesperrt</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_die_lösung_eine_lokale_installation">Die Lösung: eine lokale Installation</h3> <div class="paragraph"> <p>Man lädt das offizielle Tarball-Archiv herunter und entpackt es direkt in`~/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&amp;os=linux-x64" -O vscode.tar.gz tar -xzf vscode.tar.gz rm vscode.tar.gz</code></pre> </div> </div> <div class="paragraph"> <p>Die Binärdatei befindet sich dann in`~/apps/VSCode-linux-x64/bin/code`. keiner`sudo`ist nicht notwendig, um irgendeine Datei zu lesen, zu ändern oder zu ersetzen unter`~/apps/VSCode-linux-x64/`.</p> </div> </div> <div class="sect2"> <h3 id="_konkrete_vorteile">konkrete Vorteile</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Installation System (/opt, apt, dnf)" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "Installation System (/opt, apt, dnf)" #LightCoral { card "VS Code Eigentum von root" { [CSS du workbench : sudo requis] [product.json : sudo requis] [Dossier d'install : non modifiable] } } rectangle "Installation Start (~/apps)" #LightGreen { card "VS Code Benutzereigenschaft" { [CSS du workbench : libre] [product.json : libre] [Dossier d'install : libre] [Script update maison] } } "Installation System (/opt, apt, dnf)" -right-&gt; "Installation Start (~/apps)" : **Non, merci**\nJe prends le home note bottom of "Installation Start (~/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">Vorteil</th> <th class="tableblock halign-left valign-top">Detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kein sudo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alle Dateien der IDE gehören dem Benutzer</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Direkte Änderung des CSS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Man kann patchen`workbench.desktop.main.css`ohne Erhöhung der Berechtigungen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Internes Aktualisierungsskript</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ein einfaches Shell-Skript lädt, ersetzt und patcht automatisch</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Isolierung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Systeminstallation ist nicht verunreinigt; rollback = Löschen des Ordners</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_schriftart_des_hauptmenüs_anpassen">Schriftart des Hauptmenüs anpassen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_feststellung">Die Feststellung</h3> <div class="paragraph"> <p>Die Standardschrift des Hauptmenüs (File, Edit, View&#8230;&#8203;) und der Dropdowns ist zu klein. VS Code bietet keine Einstellung, um sie zu ändern.</p> </div> </div> <div class="sect2"> <h3 id="_die_technik_direktes_css_patch">Die Technik: Direktes CSS-Patch</h3> <div class="paragraph"> <p>Wir fügen CSS am Ende der Datei hinzu`workbench.desktop.main.css`&lt;/think&gt;</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/menubar-patch-sequence.svg" alt="menubar patch sequence" width="675" height="599"> </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 &gt;&gt; "$CSS_FILE" &lt;&lt; 'EOF' .menubar-menu-title{font-size:23px!important} .menubar&gt;.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="_die_integritätswarnung_löschen">Die Integritätswarnung löschen</h3> <div class="paragraph"> <p>VS Code erkennt Änderungen an seinen Dateien und zeigt ein Banner „Your installation is corrupt“ an. Um das zu vermeiden, löscht man die Prüfsummen von`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>Nach dem Neustart gibt es keine Warnungen mehr und die Menüs sind endlich lesbar.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_schriftart_des_explorer_bereichs_anpassen_der_kampf">Die Schriftart des Explorer-Bereichs anpassen — der Kampf</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_tentative_1_ein_parameter_der_nicht_existiert">Tentative 1 : ein Parameter, der nicht existiert</h3> <div class="paragraph"> <p>Wir versuchen zunächst den nativen Parameter`workbench.tree.fontSize`in`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>Ergebnis:<strong>keine Wirkung</strong>. Dieser Parameter existiert nicht in VS Code. Der Beweis, dass nicht erkannte Parameter stillschweigend ignoriert werden.</p> </div> </div> <div class="sect2"> <h3 id="_versuch_2_die_erweiterung_custom_css_and_js_loader">Versuch 2: die Erweiterung Custom CSS and JS Loader</h3> <div class="paragraph"> <p>Man installiert die Erweiterung`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>Man erstellt eine CSS-Datei in`~/.vscode-custom-css/custom.css`mit Selektoren, die die Elemente des Explorers ansprechen :</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>Und wir referenzieren diese Datei in den Einstellungen :</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>Ergebnis:<strong>Die Änderungen gelten nicht.</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_die_falle_man_muss_die_erweiterung_jedes_mal_aktivieren">Die Falle: Man muss die Erweiterung jedes Mal aktivieren</h3> <div class="paragraph"> <p>Die Dokumentation der Erweiterung ist an diesem entscheidenden Punkt unauffällig: Nach jeder Anpassung des Custom-CSS muss man<strong>unbedingt</strong>den Befehl aus der Palette ausführen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>Ctrl+Shift+P</code>→ tippen<strong>Benutzerdefiniertes CSS und JS aktivieren</strong></p> </li> <li> <p>VS Code demande un redémarrage → accepter</p> </li> </ol> </div> <div class="paragraph"> <p>Ohne diesen Schritt wird das CSS niemals in die IDE eingefügt.</p> </div> </div> <div class="sect2"> <h3 id="_versuch_3_die_linien_überlappen_sich">Versuch 3: Die Linien überlappen sich</h3> <div class="paragraph"> <p>Selbst mit`font-size: 22px` et <code>line-height: 36px</code>, die Buchstaben mit Schenkeln (g, p, f, b) ragen in die benachbarten Zeilen hinein. Es wird versucht, hinzuzufügen`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>Ergebnis:<strong>keine Änderung</strong>. VS Code berechnet die Zeilenhöhen in JavaScript und überschreibt die CSS-Werte.</p> </div> </div> <div class="sect2"> <h3 id="_die_lösung_zoom_auf_dem_elterncontainer">Die Lösung: <code>zoom</code> auf dem Elterncontainer</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Versuch 1 Nicht vorhandener Parameter" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE rectangle "Versuch 1 Nicht vorhandener Parameter" #LightCoral { card "workbench.tree.fontSize" as t1 { [VS Code ignore le paramètre] } } rectangle "Versuch 2 Benutzerdefiniertes CSS + Schriftgröße" #LightYellow { card ".monaco-list-row { font-size: 22px }" as t2 { [Texte plus grand\nmais lignes superposées] } } rectangle "Versuch 3 Schriftgröße + Zeilenhöhe + Höhe" #LightYellow { card "height: 36px !important" as t3 { [VS Code override\npar JavaScript] [Aucun effet] } } rectangle "Lösung\nzoom auf übergeordneten Container" #LightGreen { card ".monaco-list-rows { zoom: 1.25 }" as t4 { [Texte + espacement\nproportionnels] [Layout JS respecté] [✓ Résultat conforme] } } t1 -down-&gt; t2 : Pas de paramètre ?\nOn essaie le CSS t2 -down-&gt; t3 : Lignes superposées ?\nOn force la hauteur t3 -down-&gt; t4 : Override JS ?\nOn utilise zoom @enduml</pre> </div> </div> <div class="paragraph"> <p>Anstatt gegen das JavaScript-Layout zu kämpfen, verwendet man die Eigenschaft`zoom`auf dem Behälter der Zeilen:</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`vergrößert die Darstellung des Containers gleichmäßig — Text UND Abstand — ohne das vom JavaScript-Engine von VS Code berechnete Layout zu zerstören. Der Faktor 1.25 entspricht ungefähr einem Übergang von 13 px zu 16 px.</p> </div> <div class="paragraph"> <p>Ergebnis:<strong>Dateinamen endlich lesbar, Zeilenabstand korrekt</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_zusammenfassung_der_selectors_und_was_funktioniert">Zusammenfassung der Selectors und was funktioniert</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">Ansatz</th> <th class="tableblock halign-left valign-top">CSS</th> <th class="tableblock halign-left valign-top">Ergebnis</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>font-size`auf</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">Größerer Text, aber überlappende Zeilen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>line-height</code>+<code>height`auf</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">Keine Wirkung (JS-Überschreibung)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>zoom`auf</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">Erfolgreich — Text + proportionaler Abstand</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_das_skript_für_das_automatische_update">Das Skript für das automatische Update</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 5) ] @startuml skinparam backgroundColor #FEFEFE autonumber actor "Entwickler ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE autonumber actor "Entwickler oder cron" as dev participant "vscode-update.sh" as script participant "VS-Code-Tarball (code.visualstudio.com)" as remote participant "~/apps/ VSCode-linux-x64" as local participant "~/apps/\nvscode-backup" as backup participant "workbench .desktop.main.css" as css participant "product.json" as product dev -&gt; script : ./vscode-update.sh script -&gt; local : Lire version courante script -&gt; remote : wget dernière version script -&gt; script : Comparer versions alt Version identique script --&gt; dev : "Bereits auf dem neuesten Stand!" else Nouvelle version script -&gt; backup : Sauvegarder installation courante\n(horodatée) script -&gt; local : rm -rf ancienne installation script -&gt; local : mv nouvelle installation script -&gt; css : Ajouter patch CSS\n(menubar 23px, dropdown 22px) script -&gt; product : Supprimer checksums\n(python3) script --&gt; dev : "Update abgeschlossen 1.xx.yy → 1.zz.ww" end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_das_problem">Das Problem</h3> <div class="paragraph"> <p>Wenn VS Code sich aktualisiert, ersetzt er den Installationsordner und<strong>löscht alle CSS-Patches</strong>. Man muss die Änderungen jedes Mal manuell erneut anwenden.</p> </div> </div> <div class="sect2"> <h3 id="_das_skript_vscode_update_sh">Das Skript `vscode-update.sh</h3> <div class="paragraph"> <p>Man erstellt`~/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&gt;/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&amp;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&gt;/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 &gt;&gt; "$CSS_FILE" &lt;&lt; CSSEOF .menubar-menu-title{font-size:${MENUBAR_FONT_SIZE}!important}\ .menubar&gt;.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 -&gt; $NEW_VERSION ==="</code></pre> </div> </div> <div class="paragraph"> <p>Das Skript:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lade die neueste stabile Version herunter</p> </li> <li> <p>Überprüfe, ob die Version von der aktuellen abweicht.</p> </li> <li> <p>Sichere die aktuelle Installation (zeitgestempelt) in`~/apps/vscode-backup/`</p> </li> <li> <p>Ersetze den Installationsordner</p> </li> <li> <p><strong>Erneut anwenden</strong>Der CSS-Patch des Hauptmenüs</p> </li> <li> <p><strong>Entferne die Prüfsummen</strong> de `product.json`um die Integritätswarnung zu vermeiden</p> </li> </ol> </div> <div class="paragraph"> <p>Hinweis: Die Anpassungen des Explorer‑Bereichs über die Custom CSS‑Erweiterung und die Datei`~/.vscode-custom-css/custom.css`Sie überleben die Updates, weil sie außerhalb des Installationsordners leben.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_betroffene_dateien_überblick">Betroffene Dateien – Überblick</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 6) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Installation von VS Code (~/apps/VSCode-linux-x64/)" #LightCoral { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Installation von VS Code (~/apps/VSCode-linux-x64/)" #LightCoral { component "workbench.desktop .main.css" as css #LightCoral component "product.json" as product #LightCoral component "binär bin/code" as binary #LightCoral } rectangle "Benutzerkonfiguration (~/.config/Code/)" #LightGreen { component "settings.json" as settings #LightGreen component "Erweiterungen/" as extensions #LightGreen } rectangle "Persistente Anpassung (~/.vscode-custom-css/)" #SkyBlue { component "custom.css (zoom: 1.25)" as customcss #SkyBlue } rectangle "Automation (~/apps/)" #LightYellow { component "vscode-update.sh" as script #LightYellow component "vscode-backup/" as backup #LightYellow } script ..&gt; css : Re-patch après MAJ script ..&gt; product : Supprime checksums\naprès MAJ settings --&gt; customcss : Référence via\nvscode_custom_css.imports extensions ..&gt; 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">Weg</th> <th class="tableblock halign-left valign-top">Rolle</th> <th class="tableblock halign-left valign-top">Überlebt die Updates?</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">Installation der IDE</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nein (ersetzt)</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 des Workbench (Menü, Dropdowns)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nein (nachträglich vom Skript gepatcht)</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">Checksummen der Integrität</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nein (erneut gereinigt vom Skript)</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">Automatisches Aktualisierungs‑Skript</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ja</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">Benutzereinstellungen (fontSize, custom CSS)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ja</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">Benutzerdefiniertes CSS für den Explorer (Zoom)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ja</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_gelernte_lektionen">Gelernte Lektionen</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 8) ] @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 rectangle "**Lokale Installation**\n im Home" as install #LightGreen { card "Kein sudo zum Ändern von CSS/config" as i1 ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 rectangle "**Lokale Installation**\n im Home" as install #LightGreen { card "Kein sudo zum Ändern von CSS/config" as i1 card "opencode+LLM kann alles ändern" as i2 card "Rollback = wiederherstellen das zeitgestempelte Backup" as i3 } rectangle "**CSS-Anpassung** Zoom vs Schriftgröße" as css #LightYellow { card "zoom &gt; font-size für Komponentenliste" as c1 card "Layout JS-Überschreibung Höhe/Zeilenhöhe" as c2 card "Extension Custom CSS erfordert Aktivierung manuelle (Ctrl+Shift+P)" as c3 } rectangle "**Automatisierung**\n Skript zur Aktualisierung" as auto #LightCoral { card "CSS neu patchen nach jedem Update" as a1 card "Checksummen löschen product.json" as a2 card "Zeitgestempeltes Backup vor Ersetzung" as a3 } install -right-&gt; css : ensuite css -right-&gt; 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="_installieren_im_home_verzeichnis_befreit_alles">Installieren im home-Verzeichnis befreit alles</h3> <div class="paragraph"> <p>Eine lokale Installation in`~/apps`gibt vollständige Kontrolle über VS Code:</p> </div> <div class="ulist"> <ul> <li> <p>Kein`sudo`um das CSS oder die Konfiguration zu ändern</p> </li> <li> <p>Der opencode+LLM-Agent kann in die Konfigurationsdateien und die Assets der IDE schreiben.</p> </li> <li> <p>Einfacher Rollback: den zeitgestempelten Backup wiederherstellen</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_zoom_font_size_für_die_komponenten_list">zoom` &gt; <code>font-size</code> für die Komponenten list</h3> <div class="paragraph"> <p>VS Code steuert die Zeilenhöhe über JavaScript. Ändern`font-size`Da man die vom Layout-Engine zugewiesene Höhe nicht ändern kann, ergeben sich Texte, die überlaufen. Die Eigenschaft`zoom`Durch das Vergrößern des übergeordneten Containers wird alles proportional vergrößert und dieses Problem umgangen.</p> </div> </div> <div class="sect2"> <h3 id="_die_erweiterung_custom_css_erfordert_eine_explizite_aktivierung">Die Erweiterung Custom CSS erfordert eine explizite Aktivierung</h3> <div class="paragraph"> <p>Das ist kein "set and forget"-Parameter. Jede Änderung an der benutzerdefinierten CSS-Datei erfordert das erneute Ausführen von "Enable Custom CSS and JS" über die Befehlspalette (<code>Ctrl+Shift+P</code>).</p> </div> </div> <div class="sect2"> <h3 id="_ein_aktualisierungsskript_ist_unverzichtbar">Ein Aktualisierungsskript ist unverzichtbar</h3> <div class="paragraph"> <p>Ohne Skript löscht jedes Update von VS Code die CSS-Patches des Workbench. Das Skript`vscode-update.sh`Automatisiert den Download, das Ersetzen, das Re‑Patching und das Bereinigen der Prüfsummen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schnelle_referenzen">Schnelle Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>VS Code-Download: <a href="https://code.visualstudio.com/Download" class="bare">https://code.visualstudio.com/Download</a></p> </li> <li> <p>Erweiterung Benutzerdefinierter CSS- und JS-Loader :`be5invis.vscode-custom-css`</p> </li> <li> <p>Problem bei VS Code: Anforderung eines nativen Parameters für die Schriftart des Explorers :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]</p> </li> </ul> </div> </div> </div> Migration eines Asciidoctor RevealJS-Plugins nach buildSrc Kotlin: Reverse-Engineering einer Groovy-API 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="#_kontext_und_ziel">Kontext und Ziel</a> <ul class="sectlevel2"> <li><a href="#_der_ausgangspunkt">Der Ausgangspunkt</a></li> <li><a href="#_das_ziel">Das Ziel</a></li> </ul> </li> <li><a href="#_das_erste_hindernis_ruby_gems">Das erste Hindernis: `ruby { gems() }</a> <ul class="sectlevel2"> <li><a href="#_was_der_groovy_syntaktische_zucker_verbirgt">Was der Groovy-syntaktische Zucker verbirgt</a></li> <li><a href="#_zerlegung_des_mechanismus">Zerlegung des Mechanismus</a></li> </ul> </li> <li><a href="#_die_lösung_in_drei_teilen">Die Lösung in drei Teilen</a> <ul class="sectlevel2"> <li><a href="#_teil_1_das_ivy_repository_für_rubygems">Teil 1: das Ivy-Repository für rubygems</a></li> <li><a href="#_teil_2_die_abhängigkeit_asciidoctorgems">Teil 2 : die Abhängigkeit asciidoctorGems</a></li> <li><a href="#_teil_3_settings_gradle_kts">Teil 3: settings.gradle.kts</a></li> </ul> </li> <li><a href="#_introspection_der_api_durch_bytecodes">Introspection der API durch Bytecodes</a> <ul class="sectlevel2"> <li><a href="#_warum_javap">Warum <code>javap</code> ?</a></li> <li><a href="#_hierarchie_der_aufgabe">Hierarchie der Aufgabe</a></li> <li><a href="#_entdeckung_von_forkoptions">Entdeckung von `forkOptions</a></li> <li><a href="#_die_api_von_javaforkoptions_grolifant">Die API von JavaForkOptions (grolifant)</a></li> <li><a href="#_revealjsextension">RevealJSExtension</a></li> </ul> </li> <li><a href="#_konfiguration_des_java_toolchains">Konfiguration des Java-Toolchains</a> <ul class="sectlevel2"> <li><a href="#_das_problem_von_javatoolchainservice">Das Problem von JavaToolchainService</a></li> </ul> </li> <li><a href="#_automatische_docker_erkennung">Automatische Docker-Erkennung</a> <ul class="sectlevel2"> <li><a href="#_kontext">Kontext</a></li> <li><a href="#_strategie">Strategie</a></li> </ul> </li> <li><a href="#_endresultat">Endresultat</a> <ul class="sectlevel2"> <li><a href="#_der_konsument_buildscript">Der Konsument-buildscript</a></li> <li><a href="#_settings_gradle_kts">settings.gradle.kts</a></li> </ul> </li> <li><a href="#_zusammenfassung_der_fallen_und_lösungen">Zusammenfassung der Fallen und Lösungen</a></li> <li><a href="#_untersuchungsmethode_eine_unbekannte_api_mit_javap_lesen">Untersuchungsmethode: Eine unbekannte API mit javap lesen</a> <ul class="sectlevel2"> <li><a href="#_prinzip">Prinzip</a></li> <li><a href="#_schritt_1_die_jar_im_gradle_cache_lokalisieren">Schritt 1: die JAR im Gradle-Cache lokalisieren</a></li> <li><a href="#_schritt_2_klassen_im_jar_auflisten">Schritt 2: Klassen im JAR auflisten</a></li> <li><a href="#_schritt_3_eine_klasse_überprüfen">Schritt 3: eine Klasse überprüfen</a></li> <li><a href="#_schritt_4_die_hierarchie_hinaufsteigen">Schritt 4: die Hierarchie hinaufsteigen</a></li> <li><a href="#_schritt_5_unbekannte_typen_verfolgen">Schritt 5: unbekannte Typen verfolgen</a></li> <li><a href="#_schritt_6_projekt_erweiterungen_überprüfen">Schritt 6: Projekt-Erweiterungen überprüfen</a></li> <li><a href="#_zusammenfassung_der_methode">Zusammenfassung der Methode</a></li> </ul> </li> <li><a href="#_nächster_schritt">Nächster Schritt</a></li> </ul> </div> <div class="sect1"> <h2 id="_kontext_und_ziel">Kontext und Ziel</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_der_ausgangspunkt">Der Ausgangspunkt</h3> <div class="paragraph"> <p>Das Projekt`slider-gradle`Erstellt Reveal.js-Präsentationen aus AsciiDoc-Dateien über das Gradle-Plugin.<code>org.asciidoctor.jvm.revealjs</code>. Die Konfiguration der Hauptaufgabe`asciidoctorRevealJs`lebte direkt im Root-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&lt;slides.SlidesPlugin&gt;() project.tasks.getByName&lt;AsciidoctorJRevealJSTask&gt;(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="_das_ziel">Das Ziel</h3> <div class="paragraph"> <p>Verschieben Sie diese gesamte Konfiguration in`buildSrc/src/main/kotlin/slides/SlidesPlugin.kt`damit das Consumer-Buildscript auf: reduziert wird</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">apply&lt;slides.SlidesPlugin&gt;()</code></pre> </div> </div> <div class="paragraph"> <p>Das Plugin muss völlig autonom sein: Es wendet seine Plugin-Abhängigkeiten selbst an, konfiguriert seine Repositorys und verwaltet seine Ruby-Gems.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_das_erste_hindernis_ruby_gems">Das erste Hindernis: `ruby { gems() }</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_was_der_groovy_syntaktische_zucker_verbirgt">Was der Groovy-syntaktische Zucker verbirgt</h3> <div class="paragraph"> <p>Die Zeile`repositories { ruby { gems() } }`Es ist eine Groovy-DSL-Erweiterung, die ausschließlich im Buildskript-Ausführungskontext verfügbar ist. Sie existiert nicht als statische Kotlin-API, die von buildSrc aus zugänglich ist.</p> </div> <div class="paragraph"> <p>Beim Versuch, ihn von &#8230;&#8203; aus anzurufen`SlidesPlugin.kt`, die Kompilierung schlägt sofort fehl.</p> </div> </div> <div class="sect2"> <h3 id="_zerlegung_des_mechanismus">Zerlegung des Mechanismus</h3> <div class="paragraph"> <p>Nach Analyse des Gradle-Cache (<code>~/.gradle/caches/modules-2/files-2.1/rubygems/</code>), man entdeckt in der Datei`ivy-3.1.0.xml`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;artifact type='gem' url='https://rubygems.org/gems/asciidoctor-revealjs-3.1.0.gem' /&gt;</code></pre> </div> </div> <div class="paragraph"> <p>`ruby { gems() }`führte tatsächlich durch<strong>drei verschiedene Operationen</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ein Ivy-Repo speichernd, das auf`https://rubygems.org/gems/`</p> </li> <li> <p>Gruppe ausschließen`rubygems`Maven-Repositorien zur Vermeidung von Konflikten</p> </li> <li> <p>Speichere das Gem in der Konfiguration`asciidoctorGems`damit JRuby es zur Laufzeit lädt</p> </li> </ol> </div> <div class="paragraph"> <p>Diese drei Verantwortlichkeiten müssen separat in Kotlin reproduziert werden.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_in_drei_teilen">Die Lösung in drei Teilen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_teil_1_das_ivy_repository_für_rubygems">Teil 1: das Ivy-Repository für 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>Die Erweiterung`.gem`muss hardkodiert sein.<code>[ext]`löst standardmäßig in</code>.jar`, was einen Fehler verursacht`Resource missing`.</td> </tr> </table> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Das Ivy-Repo wird direkt darauf erklärt`project.repositories`und nicht in einem Block`repositories { }`weil der Empfänger dieses Blocks nicht das`RepositoryHandler`Gradle-Standard aber eine grolifante API, die mit der Erweiterung inkompatibel ist`ivy`Kotlin DSL. </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_teil_2_die_abhängigkeit_asciidoctorgems">Teil 2 : die Abhängigkeit asciidoctorGems</h3> <div class="paragraph"> <p>Das Plugin`org.asciidoctor.jvm.gems`muss zuerst angewendet werden — es erstellt die Konfiguration`asciidoctorGems`und die Aufgabe`asciidoctorGemsPrepare`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="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> }</code></pre> </div> </div> <div class="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Die Anwendungsreihenfolge ist wichtig:`gems`vor`revealjs`. &lt;2&gt; Der Qualifikator`@gem`zwingt die korrekte Erweiterung auf die Abhängigkeit.</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_teil_3_settings_gradle_kts">Teil 3: settings.gradle.kts</h3> <div class="paragraph"> <p>`dependencyResolutionManagement`in`settings.gradle.kts`muss den Projekten erlauben, ihre eigenen Repos zu deklarieren:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@Suppress("UnstableApiUsage") dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.PREFER_PROJECT) }</code></pre> </div> </div> <div class="paragraph"> <p>Ohne diese Zeile ignoriert Gradle die im Plugin deklarierten Repositorys und die Auflösung der Gems schlägt fehl.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_introspection_der_api_durch_bytecodes">Introspection der API durch Bytecodes</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_warum_javap">Warum <code>javap</code> ?</h3> <div class="paragraph"> <p>Das Plugin`asciidoctor-gradle-jvm-slides`ist in Version`4.0.0-alpha.1`. Seine Dokumentation existiert nicht oder ist unvollständig. Die einzige zuverlässige Quelle ist die direkte Inspektion der kompilierten Klassen.</p> </div> </div> <div class="sect2"> <h3 id="_hierarchie_der_aufgabe">Hierarchie der Aufgabe</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.AsciidoctorJRevealJSTask</code></pre> </div> </div> <div class="paragraph"> <p>Ergebnis:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">public class AsciidoctorJRevealJSTask extends org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask implements org.asciidoctor.gradle.base.slides.SlidesToExportAware</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_entdeckung_von_forkoptions">Entdeckung von `forkOptions</h3> <div class="paragraph"> <p>Bei der Überprüfung`AbstractAsciidoctorTask`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath asciidoctor-gradle-jvm-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask | grep -i "fork\|exec\|jvm"</code></pre> </div> </div> <div class="paragraph"> <p>Es gibt:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">final org.ysb33r.grolifant.api.v4.JavaForkOptions javaForkOptions; public void forkOptions(org.gradle.api.Action&lt;org.ysb33r.grolifant.api.v4.JavaForkOptions&gt;); public static final org.asciidoctor.gradle.base.process.ProcessMode JAVA_EXEC;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_die_api_von_javaforkoptions_grolifant">Die API von JavaForkOptions (grolifant)</h3> <div class="paragraph"> <p>`javaLauncher`existiert nicht bei dieser Aufgabe. Die reale API von</p> </div> <div class="paragraph"> <p>(Note: The output preserves the leading space, the space after the period, and the trailing space as in the original.)`org.ysb33r.grolifant.api.v4.JavaForkOptions`Ausstellung :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">public void executable(java.lang.Object); <i class="conum" data-value="1"></i><b>(1)</b> public void setExecutable(java.lang.Object);</code></pre> </div> </div> <div class="paragraph"> <p>Die Methode`executable(Object)`ersetzt die Zuweisung`executable = &#8230;&#8203;`das nicht kompiliert (`val`kann nicht neu zugewiesen werden).</p> </div> </div> <div class="sect2"> <h3 id="_revealjsextension">RevealJSExtension</h3> <div class="paragraph"> <p>`revealjs { }`ist keine Methode der Aufgabe, sondern eine<strong>Projektverlängerung</strong>:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.RevealJSExtension</code></pre> </div> </div> <div class="paragraph"> <p>Es wird über: zugegriffen</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.extensions.getByType&lt;RevealJSExtension&gt;().apply { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfiguration_des_java_toolchains">Konfiguration des Java-Toolchains</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_problem_von_javatoolchainservice">Das Problem von JavaToolchainService</h3> <div class="paragraph"> <p>`JavaToolchainService`Ist keine Projekt-Erweiterung. Der folgende Aufruf schlägt fehl:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ERREUR : Extension of type 'JavaToolchainService' does not exist project.extensions.getByType&lt;JavaToolchainService&gt;()</code></pre> </div> </div> <div class="paragraph"> <p>Die gute API ist`serviceOf`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import org.gradle.kotlin.dsl.support.serviceOf project.tasks.getByName&lt;AsciidoctorJRevealJSTask&gt;(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf&lt;JavaToolchainService&gt;() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_automatische_docker_erkennung">Automatische Docker-Erkennung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kontext">Kontext</h3> <div class="paragraph"> <p>Das Plugin Asciidoctor/JRuby erfordert Java 17. Kotlin 2.0.x in buildSrc unterstützt Java 25 nicht (der Versionsparser stürzt bei`"25.0.2"`). Der Gradle-Daemon muss daher auf Java 17 laufen oder Docker muss verwendet werden.</p> </div> </div> <div class="sect2"> <h3 id="_strategie">Strategie</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Docker verfügbar → Ausführung über Container`eclipse-temurin:17`(Standardverhalten)</p> </li> <li> <p>Docker fehlt + Java 17 → lokale Ausführung</p> </li> <li> <p>Docker fehlt + Java &gt; 17 → expliziter Fehler</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val isDockerAvailable = try { Runtime.getRuntime().exec(arrayOf("docker", "info")).waitFor() == 0 } catch (e: Exception) { false } val javaVersion = JavaVersion.current().majorVersion.toInt() when { isDockerAvailable -&gt; project.tasks.register&lt;Exec&gt;(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 -&gt; { 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&lt;RevealJSExtension&gt;().apply { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } project.tasks.getByName&lt;AsciidoctorJRevealJSTask&gt;(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf&lt;JavaToolchainService&gt;() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } // ... reste de la configuration } } else -&gt; error( "Docker est requis pour exécuter $TASK_ASCIIDOCTOR_REVEALJS " + "avec Java $javaVersion. Installez Docker ou utilisez Java 17." ) }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_endresultat">Endresultat</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_der_konsument_buildscript">Der Konsument-buildscript</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">apply&lt;slides.SlidesPlugin&gt;()</code></pre> </div> </div> <div class="paragraph"> <p>Das ist alles. Das Plugin trägt die gesamte Verantwortung.</p> </div> </div> <div class="sect2"> <h3 id="_settings_gradle_kts">settings.gradle.kts</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="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"</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zusammenfassung_der_fallen_und_lösungen">Zusammenfassung der Fallen und Lösungen</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 37.5%;"> <col style="width: 37.5%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Problem</th> <th class="tableblock halign-left valign-top">Ursache</th> <th class="tableblock halign-left valign-top">Lösung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`ruby { gems() }`nicht verfügbar in Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nur Groovy-DSL-Erweiterung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Drei getrennte Mechanismen: Ivy-Repository + Maven-Ausschluss +<code>asciidoctorGems</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gradle sucht ein`.jar`statt eines`.gem`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`[ext]`löst in`jar`standardmäßig</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hardcoder`.gem`im Muster Ivy + Qualifikator`@gem`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ivy { }`kompiliert nicht in`repositories { }</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Receiver grolifant ist nicht mit dem DSL Kotlin kompatibel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Direktaufruf`project.repositories.ivy { }`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`javaLauncher`nicht gelöst</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nicht vorhandene Eigenschaft auf`AsciidoctorJRevealJSTask`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>setInProcess("JAVA_EXEC")</code> + <code>forkOptions { executable(&#8230;&#8203;) }</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`executable = &#8230;&#8203;`kompiliert nicht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Eigenschaft`val`in`JavaForkOptions`grolifant</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Methode`executable(Object)`stattdessen</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>JavaToolchainService`nicht auffindbar über`extensions</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es ist ein Gradle-Service, keine Erweiterung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>project.serviceOf&lt;JavaToolchainService&gt;()</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`revealjs { }`nicht gelöst in der Aufgabe</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erweiterung des Projekts, keine Methode der Aufgabe</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>project.extensions.getByType&lt;RevealJSExtension&gt;()</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Build crasht mit Java 25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kotlin 2.0.x analysiert keine zweistelligen Java-Versionen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Automatische Docker-Erkennung + fallback Java 17</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_untersuchungsmethode_eine_unbekannte_api_mit_javap_lesen">Untersuchungsmethode: Eine unbekannte API mit javap lesen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinzip">Prinzip</h3> <div class="paragraph"> <p>Wenn die Dokumentation fehlt oder unvollständig ist, sind die Bytecodes die Quelle der Wahrheit. <code>javap`ist das Standard-Werkzeug des JDK, das die Dateien dekompiliert.</code>.class`in lesbaren Java-Signaturen, ohne den Quellcode zu benötigen.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_1_die_jar_im_gradle_cache_lokalisieren">Schritt 1: die JAR im Gradle-Cache lokalisieren</h3> <div class="paragraph"> <p>Gradle lädt alle seine Abhängigkeiten herunter in`~/.gradle/caches/modules-2/files-2.1/`. Der erste Schritt besteht darin, die JAR-Datei zu finden, die die zu inspizierende Klasse enthält:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find ~/.gradle/caches -name "asciidoctor-gradle-jvm-slides*.jar" 2&gt;/dev/null</code></pre> </div> </div> <div class="listingblock"> <div class="title">Ergebnis :</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">/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</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_schritt_2_klassen_im_jar_auflisten">Schritt 2: Klassen im JAR auflisten</h3> <div class="paragraph"> <p>Bevor eine Klasse inspiziert wird, überprüft man, ob sie tatsächlich im JAR enthalten ist :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">jar tf asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar | grep -i "RevealJS\|revealjs"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_schritt_3_eine_klasse_überprüfen">Schritt 3: eine Klasse überprüfen</h3> <div class="listingblock"> <div class="title">Das zeigt alle verfügbaren Klassen : <code>AsciidoctorJRevealJSTask</code>, <code>RevealJSExtension</code>, <code>RevealJSOptions</code>, usw.</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.AsciidoctorJRevealJSTask</code></pre> </div> </div> <div class="paragraph"> <p>Die Option`-p`zeigt alle Mitglieder einschließlich der privaten Das Ergebnis zeigt sofort die Schlüsselzeile:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">public class AsciidoctorJRevealJSTask extends org.asciidoctor.gradle.jvm.AbstractAsciidoctorTask</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_schritt_4_die_hierarchie_hinaufsteigen">Schritt 4: die Hierarchie hinaufsteigen</h3> <div class="paragraph"> <p>Die Aufgabe erweitert`AbstractAsciidoctorTask`. Es wird nacheinander inspiziert. Indem du zunächst sein JAR lokalisierst :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find ~/.gradle/caches -name "asciidoctor-gradle-jvm-[0-9]*.jar" 2&gt;/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"</code></pre> </div> </div> <div class="paragraph"> <p>Das ist, wo man es entdeckt.<code>forkOptions</code>, <code>JAVA_EXEC</code>, et <code>javaForkOptions</code> vom Typ`org.ysb33r.grolifant.api.v4.JavaForkOptions`.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_5_unbekannte_typen_verfolgen">Schritt 5: unbekannte Typen verfolgen</h3> <div class="paragraph"> <p>`JavaForkOptions`Es ist eine unbekannte grolifant-Klasse. Wir lokalisieren sein JAR:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find ~/.gradle/caches -name "grolifant*.jar" 2&gt;/dev/null</code></pre> </div> </div> <div class="paragraph"> <p>Dann inspiziert man es:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath grolifant40-legacy-api-2.0.0-alpha.6.jar \ org.ysb33r.grolifant.api.v4.JavaForkOptions</code></pre> </div> </div> <div class="paragraph"> <p>Man findet dort`executable(java.lang.Object)<code>— die richtige Methode aufzurufen, im Gegensatz zu`executable = &#8230;&#8203;`der nicht kompiliert, weil es eine Eigenschaft ist`val</code>.</p> </div> </div> <div class="sect2"> <h3 id="_schritt_6_projekt_erweiterungen_überprüfen">Schritt 6: Projekt-Erweiterungen überprüfen</h3> <div class="paragraph"> <p>Für`revealjs { }`, die Frage war: ist das eine Methode der Aufgabe? oder eine Projektverlängerung? Die Inspektion von`AsciidoctorJRevealJSTask` zeigt keine Methode`revealjs`. Man überprüft dann`RevealJSExtension` :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">javap -p -classpath asciidoctor-gradle-jvm-slides-4.0.0-alpha.1.jar \ org.asciidoctor.gradle.jvm.slides.RevealJSExtension | head -5</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">public class RevealJSExtension implements groovy.lang.GroovyObject { public static final java.lang.String NAME;</code></pre> </div> </div> <div class="paragraph"> <p>Die Anwesenheit von`NAME`bestätigt, dass es eine auf dem Projekt registrierte Erweiterung ist, zugänglich über`project.extensions.getByType&lt;RevealJSExtension&gt;()`.</p> </div> </div> <div class="sect2"> <h3 id="_zusammenfassung_der_methode">Zusammenfassung der Methode</h3> <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">Schritt</th> <th class="tableblock halign-left valign-top">Aktion</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>find ~/.gradle/caches -name "*.jar"</code>— lokalisieren der jar</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>jar tf jar.jar | grep NomClasse</code>— prüfen, dass die Klasse existiert</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>javap -p -classpath jar.jar NomCompletClasse</code>— die Klasse inspizieren</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">identifizieren`extends`und die Hierarchie erklimmen</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">Die unbekannten Typen in ihren eigenen JARs verfolgen</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">Suchen`NAME`Um eine Projekterweiterung zu identifizieren</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Diese Methode gilt für jedes Gradle-Plugin, dessen API nicht dokumentiert ist oder dessen Alpha-Version nicht mehr zur vorhandenen Dokumentation passt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_nächster_schritt">Nächster Schritt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieses buildSrc-Plugin wird in ein unabhängiges Projekt extrahiert, das auf dem Gradle Plugin Portal oder Maven Local veröffentlicht wird. Der konsumierende Buildscript wird dann:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">plugins { id("slides") version "1.0.0" }</code></pre> </div> </div> <div class="paragraph"> <p>Et <code>settings.gradle.kts`wird auf das notwendigste Minimum reduziert ohne Bezug auf`foojay-resolver-convention</code>, das JDK-Provisioning wird vom Plugin selbst verwaltet oder als Voraussetzung dokumentiert.</p> </div> </div> </div> Architecture Portfolio JBake - Vision und Use Cases 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="#_architektonische_vision">Architektonische Vision</a> <ul class="sectlevel2"> <li><a href="#_leitprinzip">Leitprinzip</a></li> <li><a href="#_strategische_wahl_asciidoc_für_das_portfolio">Strategische Wahl: AsciiDoc für das Portfolio</a></li> <li><a href="#_datenmodell">Datenmodell</a></li> </ul> </li> <li><a href="#_detaillierte_anwendungsfälle">Detaillierte Anwendungsfälle</a> <ul class="sectlevel2"> <li><a href="#_uc1_ein_element_zum_portfolio_hinzufügen">UC1 : Ein Element zum Portfolio hinzufügen</a> <ul class="sectlevel3"> <li><a href="#_nominalfluss">Nominalfluss</a></li> <li><a href="#_vorlage_der_zu_erstellenden_datei">Vorlage der zu erstellenden Datei</a></li> <li><a href="#_validierungspunkte">Validierungspunkte</a></li> </ul> </li> <li><a href="#_uc2_lösche_ein_element_des_portfolios">UC2 : Lösche ein Element des Portfolios</a> <ul class="sectlevel3"> <li><a href="#_nominalfluss_2">Nominalfluss</a></li> <li><a href="#_alternative_strategie_archivierung">Alternative Strategie: Archivierung</a></li> <li><a href="#_bereinigung_der_ressourcen">Bereinigung der Ressourcen</a></li> </ul> </li> <li><a href="#_uc3_als_entwurf_setzen">UC3 : Als Entwurf setzen</a> <ul class="sectlevel3"> <li><a href="#_nominalfluss_3">Nominalfluss</a></li> <li><a href="#_mögliche_zustände">Mögliche Zustände</a></li> <li><a href="#_typische_anwendungsfälle">Typische Anwendungsfälle</a></li> </ul> </li> </ul> </li> <li><a href="#_templating_architektur">Templating-Architektur</a> <ul class="sectlevel2"> <li><a href="#_strategie_wiederverwendbarer_templates">Strategie wiederverwendbarer Templates</a></li> <li><a href="#_muster_der_datenextraktion">Muster der Datenextraktion</a></li> <li><a href="#_namenskonventionen">Namenskonventionen</a></li> </ul> </li> <li><a href="#_workflow_der_veröffentlichung">Workflow der Veröffentlichung</a> <ul class="sectlevel2"> <li><a href="#_entwicklungs_pipeline">Entwicklungs-Pipeline</a></li> <li><a href="#_umgebungen">Umgebungen</a></li> </ul> </li> <li><a href="#_erweiterbarkeit">Erweiterbarkeit</a> <ul class="sectlevel2"> <li><a href="#_hinzufügen_neuer_attribute">Hinzufügen neuer Attribute</a></li> <li><a href="#_erweiterte_kategorisierung">Erweiterte Kategorisierung</a></li> </ul> </li> <li><a href="#_gute_praktiken">Gute Praktiken</a> <ul class="sectlevel2"> <li><a href="#_organisation_der_dateien">Organisation der Dateien</a></li> <li><a href="#_inhaltsverwaltung">Inhaltsverwaltung</a></li> <li><a href="#_leistung">Leistung</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div class="sect1"> <h2 id="_architektonische_vision">Architektonische Vision</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_leitprinzip">Leitprinzip</h3> <div class="paragraph"> <p>Die Architektur beruht auf dem Prinzip der <strong>Trennung der Anliegen</strong> :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Inhalt</strong> : strukturierte AsciiDoc-Dateien mit reichen Metadaten</p> </li> <li> <p><strong>Präsentation</strong> : wiederverwendbare Thymeleaf-Vorlagen</p> </li> <li> <p><strong>Daten</strong> : Modell automatisch von JBake aus den AsciiDoc-Attributen extrahiert</p> </li> <li> <p><strong>Stil</strong> : Bootstrap 5 für visuelle Konsistenz</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_strategische_wahl_asciidoc_für_das_portfolio">Strategische Wahl: AsciiDoc für das Portfolio</h3> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Warum AsciiDoc ?</caption> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Kriterium</th> <th class="tableblock halign-left valign-top">Vorteil</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kohärenz</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Das gleiche Format wie bei den Blogartikeln</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Metadaten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Strukturierte und erweiterbare Attribute`project-*`)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Wartbarkeit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Einfache Textbearbeitung, Git-versionierbar</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Flexibilität</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kann reichhaltigen Inhalt (Tabellen, Code, Bilder) enthalten</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Vorlagenbildung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake extrahiert automatisch die Attribute für Thymeleaf</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_datenmodell">Datenmodell</h3> <div class="paragraph"> <p>Jedes Portfolio-Projekt ist ein AsciiDoc-Dokument mit:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Header-Metadaten</strong> : strukturierte Informationen (Kunde, Dauer, Technologien usw.)</p> </li> <li> <p><strong>Dokumentenkörper</strong>: narrative Beschreibung, Herausforderungen, Lösungen, Ergebnisse</p> </li> <li> <p><strong>Benutzerdefinierte Attribute</strong> : präfixiert`project-*`für die automatische Extraktion</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-cbd27da0e887c88cb6e5755d1a3d9478.png" alt="Diagram" width="386" height="811"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_detaillierte_anwendungsfälle">Detaillierte Anwendungsfälle</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_uc1_ein_element_zum_portfolio_hinzufügen">UC1 : Ein Element zum Portfolio hinzufügen</h3> <div class="sect3"> <h4 id="_nominalfluss">Nominalfluss</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Editor ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Editor Text" as editor participant "Datei\nAsciiDoc" as file participant "JBake Engine" as jbake participant "Statische Website" as site dev -&gt; editor : Créer nouveau fichier activate editor editor -&gt; file : portfolio/nouveau-projet.adoc activate file dev -&gt; editor : Rédiger en-tête avec métadonnées\n(titre, type=project, status=published,\nattributs project-*) dev -&gt; editor : Rédiger contenu narratif\n(contexte, défis, solutions) dev -&gt; editor : Ajouter images dans assets/img/portfolio/ editor -&gt; file : Sauvegarder deactivate editor dev -&gt; jbake : Lancer build (jbake -b) activate jbake jbake -&gt; file : Lire et parser jbake -&gt; jbake : Extraire métadonnées jbake -&gt; jbake : Convertir AsciiDoc → HTML jbake -&gt; jbake : Appliquer template project.html jbake -&gt; jbake : Ajouter à la liste portfolio.html jbake -&gt; site : Générer pages statiques deactivate jbake dev -&gt; site : Vérifier résultat activate site site --&gt; dev : Afficher projet deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_vorlage_der_zu_erstellenden_datei">Vorlage der zu erstellenden Datei</h4> <div class="paragraph"> <p>Der Entwickler erstellt`content/portfolio/nom-projet.adoc`mit einer standardisierten Struktur :</p> </div> <div class="ulist"> <ul> <li> <p>Kopfzeile mit allen erforderlichen Attributen</p> </li> <li> <p>Standardisierte Abschnitte (Kontext, Herausforderungen, Lösungen, Ergebnisse)</p> </li> <li> <p>Konsistente Nomenklatur der Bilder</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_validierungspunkte">Validierungspunkte</h4> <div class="ulist"> <ul> <li> <p>Die verpflichtenden Attribute sind vorhanden (<code>jbake-type</code>, <code>jbake-status</code>, <code>project-thumbnail</code>)</p> </li> <li> <p>Die referenzierten Bilder existieren in`assets/img/portfolio/`</p> </li> <li> <p>Der JBake-Build läuft ohne Fehler</p> </li> <li> <p>Das Projekt erscheint auf der Portfolio-Seite</p> </li> <li> <p>Die individuelle Projektseite wird korrekt angezeigt.</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc2_lösche_ein_element_des_portfolios">UC2 : Lösche ein Element des Portfolios</h3> <div class="sect3"> <h4 id="_nominalfluss_2">Nominalfluss</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "System ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "System Dateien" as fs participant "JBake Engine" as jbake participant "Statische\nSeite" as site database "Cache JBake" as cache dev -&gt; fs : Supprimer portfolio/projet-ancien.adoc activate fs fs --&gt; dev : Fichier supprimé deactivate fs dev -&gt; fs : (Optionnel) Supprimer images associées\nassets/img/portfolio/projet-ancien-* activate fs fs --&gt; dev : Images supprimées deactivate fs dev -&gt; cache : Nettoyer cache JBake activate cache cache --&gt; dev : Cache vidé deactivate cache dev -&gt; jbake : Rebuild complet (jbake -b) activate jbake jbake -&gt; jbake : Scanner content/portfolio/ jbake -&gt; jbake : Projet absent → non généré jbake -&gt; jbake : Régénérer portfolio.html\n(sans le projet supprimé) jbake -&gt; site : Déployer nouveau build deactivate jbake dev -&gt; site : Vérifier activate site site --&gt; dev : Projet absent de la liste deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_alternative_strategie_archivierung">Alternative Strategie: Archivierung</h4> <div class="paragraph"> <p>Anstatt endgültig zu löschen, Möglichkeit, einen Ordner zu erstellen`content/portfolio/archive/`:</p> </div> <div class="ulist"> <ul> <li> <p>Die Datei verschieben anstatt sie zu löschen</p> </li> <li> <p>Ermöglicht das einfache Wiederherstellen</p> </li> <li> <p>Behalte den Git-Verlauf übersichtlicher</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_bereinigung_der_ressourcen">Bereinigung der Ressourcen</h4> <div class="ulist"> <ul> <li> <p>Verwaiste Bilder überprüfen in`assets/img/portfolio/`</p> </li> <li> <p>Bilder löschen, die von anderen Projekten nicht referenziert werden</p> </li> <li> <p>Den JBake-Cache bereinigen, um Geisterreferenzen zu vermeiden</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc3_als_entwurf_setzen">UC3 : Als Entwurf setzen</h3> <div class="sect3"> <h4 id="_nominalfluss_3">Nominalfluss</h4> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Datei ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Datei AsciiDoc Translation: Datei\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "Site\nStatique" as site dev -&gt; file : Ouvrir portfolio/projet.adoc activate file dev -&gt; file : Modifier attribut\n:jbake-status: published\n↓\n:jbake-status: draft file --&gt; dev : Sauvegardé deactivate file dev -&gt; jbake : Rebuild (jbake -b) activate jbake jbake -&gt; file : Parser le fichier jbake -&gt; jbake : Détecter status=draft jbake -&gt; jbake : Exclure de published_projects jbake -&gt; jbake : Ne pas créer page publique note right Le projet existe toujours mais n'est pas publié end note jbake -&gt; site : Générer site (sans ce projet) deactivate jbake dev -&gt; site : Vérifier portfolio activate site site --&gt; dev : Projet absent de la liste publique deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_mögliche_zustände">Mögliche Zustände</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="_typische_anwendungsfälle">Typische Anwendungsfälle</h4> <div class="ulist"> <ul> <li> <p><strong>Projekt in Bearbeitung</strong> : Entwurf erstellen, veröffentlichen wenn bereit</p> </li> <li> <p><strong>Vorübergehend vertrauliches Projekt</strong> : in den Entwurf wechseln, bis die Kundenzustimmung vorliegt</p> </li> <li> <p><strong>Wichtiges Update</strong>: in den Entwurf wechseln, bearbeiten, erneut veröffentlichen</p> </li> <li> <p><strong>A/B testing</strong> : Entwurf duplizieren, testen, die beste Version veröffentlichen</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_templating_architektur">Templating-Architektur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_strategie_wiederverwendbarer_templates">Strategie wiederverwendbarer Templates</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-960862ca77ac79c13412c77019e0e2a2.png" alt="Diagram" width="881" height="350"> </div> </div> </div> <div class="sect2"> <h3 id="_muster_der_datenextraktion">Muster der Datenextraktion</h3> <div class="paragraph"> <p>JBake konvertiert AsciiDoc-Attribute automatisch in Eigenschaften, die in Thymeleaf zugänglich sind :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-3c77ca3168dc1f1253a0d941fa407312.png" alt="Diagram" width="889" height="348"> </div> </div> </div> <div class="sect2"> <h3 id="_namenskonventionen">Namenskonventionen</h3> <div class="ulist"> <ul> <li> <p><strong>Projektattribute</strong> : Präfix`project-*` (ex: <code>project-client</code>, <code>project-tech-stack</code>)</p> </li> <li> <p><strong>Dateien</strong> : kebab-case (ex:`ecommerce-platform.adoc`)</p> </li> <li> <p><strong>Bilder</strong> : Projektname-Präfix (Beispiel:`ecommerce-platform-thumb.jpg`)</p> </li> <li> <p><strong>Vorlagen</strong> : funktionaler Name (z.B:`project-card.html`, <code>tech-badge.html</code>)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_der_veröffentlichung">Workflow der Veröffentlichung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_entwicklungs_pipeline">Entwicklungs-Pipeline</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-d8e34e897512490906968f7a991cff7a.png" alt="Diagram" width="386" height="811"> </div> </div> </div> <div class="sect2"> <h3 id="_umgebungen">Umgebungen</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">Umgebung</th> <th class="tableblock halign-left valign-top">Verwendung</th> <th class="tableblock halign-left valign-top">Akzeptierter Status</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Lokal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Entwicklung und Vorschau</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Entwurf, veröffentlicht</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Staging</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Vorproduktionsvalidierung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">veröffentlicht ausschließlich</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Produktion</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">öffentliche Seite</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">published nur</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_erweiterbarkeit">Erweiterbarkeit</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_hinzufügen_neuer_attribute">Hinzufügen neuer Attribute</h3> <div class="paragraph"> <p>Um das Datenmodell zu bereichern, einfach neue Präfix-Attribute hinzufügen`project-*`&lt;/think&gt;</p> </div> <div class="ulist"> <ul> <li> <p><code>project-awards</code>: Preise und Anerkennungen</p> </li> <li> <p><code>project-testimonial</code>: Kunden-Zitat</p> </li> <li> <p>`project-team-size`Teamgröße</p> </li> <li> <p><code>project-budget-range</code>: Budgetspanne</p> </li> </ul> </div> <div class="paragraph"> <p>Diese Attribute werden automatisch in den Vorlagen verfügbar, ohne dass der JBake-Motor modifiziert werden muss.</p> </div> </div> <div class="sect2"> <h3 id="_erweiterte_kategorisierung">Erweiterte Kategorisierung</h3> <div class="imageblock"> <div class="content"> <img src="./images/diag-plantuml-md5-e91d936855f31074476a2db9e8fe3eae.png" alt="Diagram" width="561" height="259"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gute_praktiken">Gute Praktiken</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_organisation_der_dateien">Organisation der Dateien</h3> <div class="ulist"> <ul> <li> <p><strong>Eine Datei = ein Projekt</strong> : vermeide das Vermischen mehrerer Projekte</p> </li> <li> <p><strong>Bilder im dedizierten Ordner</strong><code>assets/img/portfolio/nom-projet/</code></p> </li> <li> <p><strong>Konsistente Nomenklatur</strong> : erleichtert Suche und Wartung</p> </li> <li> <p><strong>Versioning Git</strong> : vollständiges Tracking der Änderungen</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_inhaltsverwaltung">Inhaltsverwaltung</h3> <div class="ulist"> <ul> <li> <p><strong>Standardentwurf-Status</strong> : nur veröffentlichen, wenn bereit</p> </li> <li> <p><strong>Review vor der Veröffentlichung</strong> : Validierung von Qualität und Vertraulichkeit</p> </li> <li> <p><strong>vollständige Metadaten</strong> : alle relevanten Felder ausfüllen</p> </li> <li> <p><strong>Reicher narrativer Inhalt</strong>: nicht auf Metadaten beschränken</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_leistung">Leistung</h3> <div class="ulist"> <ul> <li> <p><strong>Bilder optimieren</strong> : Komprimierung vor Commit</p> </li> <li> <p><strong>Pagination falls notwendig</strong> : wenn &gt;20 Projekte</p> </li> <li> <p><strong>Lazy loading</strong> : Bei Bedarf geladene Bilder in den Galerien</p> </li> <li> <p><strong>Browser-Cache</strong> : geeignete Header für Assets</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Architektur ermöglicht :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Einfache Handhabung</strong> : ein Projekt hinzufügen = eine Textdatei erstellen</p> </li> <li> <p><strong>Flexibilität</strong> : erweiterbar durch neue Attribute</p> </li> <li> <p><strong>Wartbarkeit</strong> : Trennung Inhalt/Präsentation</p> </li> <li> <p><strong>Nachverfolgbarkeit</strong> : vollständiges Git-Versioning</p> </li> <li> <p><strong>Automatisierung</strong> : build und kontinuierliche Bereitstellung möglich</p> </li> </ul> </div> <div class="paragraph"> <p>Die Wahl von AsciiDoc gewährleistet die Konsistenz mit dem Rest der Website und bietet gleichzeitig den Reichtum an Metadaten, die für ein professionelles Portfolio erforderlich sind.</p> </div> </div> </div> Hybridarchitektur: Das Beste aus beiden Welten mit Supabase und Spring Boot 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">Lesezeit: 12 minutes</div> <p>Statt zwischen der Einfachheit von Supabase und der Leistungsfähigkeit von Spring Boot zu wählen, warum nicht beides kombinieren? Entdecken Sie eine hybride Architektur, die das Beste aus jeder Technologie nutzt.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_falsche_dilemma_der_modernen_architektur">Das falsche Dilemma der modernen Architektur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Beim Erstellen einer modernen Anwendung mit einem statischen Frontend steht man oft vor einer binären Wahl:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Alles auf eine Backend-as-a-Service-Lösung setzen</strong>(Supabase, Firebase) - einfach aber begrenzt</p> </li> <li> <p><strong>Ein komplettes Backend bauen</strong>(Spring Boot, Node.js) - leistungsstark aber komplex</p> </li> </ul> </div> <div class="paragraph"> <p>Diese Wahl ist ein falsches Dilemma. Die hybride Architektur schlägt einen dritten Weg vor: <strong>jede Technologie dort einzusetzen, wo sie am besten funktioniert</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architektonische_vision">Architektonische Vision</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_traditionelle_architektur_monolithisch">Die traditionelle Architektur: Monolithisch</h3> <div class="imageblock"> <div class="content"> <img src="traditional-architecture.svg" alt="traditional architecture" width="1752" height="5652"> </div> </div> <div class="paragraph"> <p>In diesem Ansatz müssen sogar die einfachsten Vorgänge (das Lesen eines Artikels, das Erstellen eines Kommentars) über dein Backend laufen. Du zahlst die Kosten der Komplexität schon ab dem ersten Tag.</p> </div> </div> <div class="sect2"> <h3 id="_die_baas_architektur_jeder_delegierte">Die BaaS-Architektur: Jeder Delegierte</h3> <div class="imageblock"> <div class="content"> <img src="baas-architecture.svg" alt="baas architecture" width="504" height="432"> </div> </div> <div class="paragraph"> <p>Im Gegensatz dazu ist es zunächst verlockend, alles einem BaaS zu delegieren, doch es zeigt schnell seine Grenzen, sobald die Geschäftslogik komplexer wird.</p> </div> </div> <div class="sect2"> <h3 id="_die_hybride_architektur_trennung_der_verantwortlichkeiten">Die hybride Architektur: Trennung der Verantwortlichkeiten</h3> <div class="imageblock"> <div class="content"> <img src="hybrid-overview.svg" alt="hybrid overview" width="1749" height="5760"> </div> </div> <div class="paragraph"> <p>Die hybride Architektur trennt die Verantwortlichkeiten deutlich nach Komplexität und Art der Operationen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entwurfsprinzipien">Entwurfsprinzipien</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinzip_1_einfach_beginnen_intelligent_weiterentwickeln">Prinzip 1: Einfach beginnen, intelligent weiterentwickeln</h3> <div class="imageblock"> <div class="content"> <img src="evolution-phases.svg" alt="evolution phases" width="465" height="392"> </div> </div> <div class="paragraph"> <p><strong>Bauen Sie Spring Boot nicht, wenn Sie es nicht benötigen.</strong>Starte mit Supabase, füge Spring Boot hinzu, wenn die Komplexität es rechtfertigt.</p> </div> </div> <div class="sect2"> <h3 id="_prinzip_2_trennung_nach_art_der_operation">Prinzip 2: Trennung nach Art der Operation</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="_prinzip_3_eine_einzige_quelle_der_wahrheit">Prinzip 3: Eine einzige Quelle der Wahrheit</h3> <div class="imageblock"> <div class="content"> <img src="single-source-truth.svg" alt="single source truth" width="1797" height="5700"> </div> </div> <div class="paragraph"> <p>Durch das Teilen derselben PostgreSQL-Instanz arbeiten Supabase und Spring Boot mit denselben Daten ohne komplexe Synchronisation.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_orchestrierung_der_flüsse">Orchestrierung der Flüsse</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_fluss_1_zentrale_authentifizierung">Fluss 1: Zentrale Authentifizierung</h3> <div class="imageblock"> <div class="content"> <img src="auth-orchestration.svg" alt="auth orchestration" width="1083" height="950"> </div> </div> <div class="paragraph"> <p><strong>Schlüsselpunkt</strong>: Ein einziger Authentifizierungsprozess, ein einziger JWT, überall einsetzbar.</p> </div> </div> <div class="sect2"> <h3 id="_flux_2_orchestration_eines_komplexen_geschäftsprozesses">Flux 2: Orchestration eines komplexen Geschäftsprozesses</h3> <div class="imageblock"> <div class="content"> <img src="business-orchestration.svg" alt="business orchestration" width="1085" height="990"> </div> </div> <div class="paragraph"> <p><strong>Was Spring Boot bringt</strong>: Zuverlässige Orchestrierung komplexer Prozesse, die mehrere Systeme umfassen, mit Transaktionsgarantie.</p> </div> </div> <div class="sect2"> <h3 id="_flux_3_geplante_aufträge_und_synchronisierungen">Flux 3: Geplante Aufträge und Synchronisierungen</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml skinparam backgroundColor #FEFEFE participant "Scheduler ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml skinparam backgroundColor #FEFEFE participant "Scheduler (Spring Boot)" as scheduler participant "Berichtsservice" as report participant "PostgreSQL" as db participant "Externe API" as api participant "E-Mail-Service" as email participant "Supabase-Speicher" as storage == Job Quotidien : 2h00 == activate scheduler scheduler -&gt; report : Déclenche génération rapport activate report report -&gt; db : Récupère données\ndes dernières 24h db -&gt; report : Dataset report -&gt; report : Calculs &amp; Agrégations report -&gt; report : Génération PDF report -&gt; storage : Upload PDF storage -&gt; report : URL publique report -&gt; email : Envoie aux admins\navec lien PDF deactivate report == Job Hebdomadaire : Dimanche 3h00 == scheduler -&gt; report : Synchronisation externe activate report report -&gt; api : Fetch données externes api -&gt; report : Nouvelles données report -&gt; db : Mise à jour tables report -&gt; db : Nettoyage données obsolètes deactivate report == Job Mensuel : 1er du mois == scheduler -&gt; report : Facturation activate report report -&gt; db : Liste clients actifs report -&gt; report : Calcul montants report -&gt; api : Génération factures (Stripe) report -&gt; email : Envoi factures deactivate report deactivate scheduler note right of scheduler **Impossible avec Supabase seul** Edge Functions non adaptées pour jobs longs et récurrents end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Was Spring Boot mitbringt</strong>: Zuverlässige geplante Jobs mit Zustandsverwaltung, automatischer Wiederholung und garantierte Ausführung.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entscheidungsmatrix">Entscheidungsmatrix</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_wann_supabase_verwenden">Wann Supabase verwenden ?</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="_wann_sollte_man_spring_boot_verwenden">Wann sollte man Spring Boot verwenden?</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="_beispiele_für_architektur_nach_projekttyp">Beispiele für Architektur nach Projekttyp</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_blog_portfolio">Blog / Portfolio</h3> <div class="imageblock"> <div class="content"> <img src="blog-architecture.svg" alt="blog architecture" width="1751" height="5688"> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>: 100% Supabase reicht völlig aus.</p> </div> </div> <div class="sect2"> <h3 id="_saas_anwendung">SaaS-Anwendung</h3> <div class="imageblock"> <div class="content"> <img src="saas-architecture.svg" alt="saas architecture" width="1746" height="5748"> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>Hybride Architektur erforderlich. Supabase für das Wesentliche, Spring Boot für den kritischen Teil (Zahlungen, Rechnungsstellung).</p> </div> </div> <div class="sect2"> <h3 id="_e_commerce">E-Commerce</h3> <div class="imageblock"> <div class="content"> <img src="ecommerce-architecture.svg" alt="ecommerce architecture" width="1751" height="5748"> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>Spring Boot unverzichtbar. Supabase nur für auth und Katalog.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_progressive_migrationsstrategie">Progressive Migrationsstrategie</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="_kosten_und_betriebliche_überlegungen">Kosten und betriebliche Überlegungen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kostenstruktur">Kostenstruktur</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FEFEFE package "Geschätzte monatliche Kosten" { rectangle "MVP-Phase (0-1000 Nutzer)" #LightGreen { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE package "Geschätzte monatliche Kosten" { rectangle "MVP-Phase (0-1000 Nutzer)" #LightGreen { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot: N/A] note bottom: **Total: 0€/mois** } rectangle "Phase Wachstum\n(1k-10k Nutzer)" #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 "Phasenskala (10k-100k Nutzer)" #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 "Phasenskala (10k-100k Nutzer)" À ce stade, les revenus justifient largement les coûts end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_operative_verantwortlichkeiten">Operative Verantwortlichkeiten</h3> <div class="imageblock"> <div class="content"> <img src="operational-responsibilities.svg" alt="operational responsibilities" width="1783" height="5676"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_das_perfekte_gleichgewicht">Fazit : Das perfekte Gleichgewicht</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Architektur Supabase + Spring Boot ist kein Kompromiss, sie ist eine<strong>Synergie</strong>.</p> </div> <div class="sect2"> <h3 id="_die_zu_beachtenden_prinzipien">Die zu beachtenden Prinzipien</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="_wann_sollte_diese_architektur_gewählt_werden">Wann sollte diese Architektur gewählt werden?</h3> <div class="paragraph"> <p><strong>�✅ Diese Architektur ist ideal wenn :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Sie möchten schnell starten (MVP in Tagen, nicht in Monaten)</p> </li> <li> <p>Sie erwarten eine Zunahme der geschäftlichen Komplexität.</p> </li> <li> <p>Sie wollen die Anfangskosten minimieren</p> </li> <li> <p>Sie mögen PostgreSQL und möchten eine einzige Quelle der Wahrheit.</p> </li> <li> <p>Sie schätzen Kotlin und Coroutines für den Geschäftslogik-Code</p> </li> <li> <p>Sie wollen ein komplettes Vendor‑Lock‑In vermeiden.</p> </li> </ul> </div> <div class="paragraph"> <p><strong>❌ Diese Architektur ist NICHT geeignet, wenn :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Dein Projekt ist einfach und wird einfach bleiben (persönlicher Blog → 100 % Supabase reicht)</p> </li> <li> <p>Du hast bereits einen etablierten Backend‑Stack, den du beherrschst.</p> </li> <li> <p>Sie bevorzugen ein traditionelles Monolith</p> </li> <li> <p>Sie benötigen .NET, Python oder eine andere Sprache für das Backend</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_endgültiger_überblick">Endgültiger Überblick</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 35) ] @startuml skinparam backgroundColor #FEFEFE package "Vollständige hybride Architektur" { actor "Benutzer" as users rectangle "Frontend (statisch)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Einfaches Backend (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Fachbackend (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE package "Vollständige hybride Architektur" { actor "Benutzer" as users rectangle "Frontend (statisch)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Einfaches Backend (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Fachbackend (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL Einzige Quelle der Wahrheit" as db #LightGray users --&gt; [JBake / GitHub Pages] [JBake / GitHub Pages] --&gt; [Auth OAuth2] [JBake / GitHub Pages] --&gt; [CRUD APIs] [JBake / GitHub Pages] --&gt; [Storage] [JBake / GitHub Pages] --&gt; [Realtime] [JBake / GitHub Pages] --&gt; [Orchestration] [Auth OAuth2] --&gt; db [CRUD APIs] --&gt; db [Orchestration] --&gt; db [Jobs Planifiés] --&gt; db [Intégrations] --&gt; db } note bottom of db **Une seule base, deux consommateurs** • Supabase pour le simple • Spring Boot pour le complexe • Aucune synchronisation requise end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_das_beste_aus_beiden_welten">Das Beste aus beiden Welten</h3> <div class="paragraph"> <p>Diese Architektur gibt Ihnen:</p> </div> <div class="paragraph"> <p><strong>🚀 Die Geschwindigkeit von Supabase</strong></p> </div> <div class="ulist"> <ul> <li> <p>Start in Stunden, nicht in Wochen</p> </li> <li> <p>OAuth2-Authentifizierung in wenigen Klicks</p> </li> <li> <p>Automatisch generierte REST-APIs</p> </li> <li> <p>Zero-Konfiguration für Server</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�💪 Die Macht von Spring Boot</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin und Coroutines für eleganten asynchronen Code</p> </li> <li> <p>Orchestrierung komplexer Geschäftsprozesse</p> </li> <li> <p>Zuverlässig geplante Jobs</p> </li> <li> <p>ACID-Transaktionen garantiert</p> </li> <li> <p>Vollständiges Spring-Ökosystem</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�💰 Die progressive Wirtschaft</strong></p> </div> <div class="ulist"> <ul> <li> <p>0€ zum Starten und Validieren</p> </li> <li> <p>Kosten, die dem Wachstum folgen</p> </li> <li> <p>Kein vorzeitiges Über-Engineering</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�🎯 Die architektonische Flexibilität</strong></p> </div> <div class="ulist"> <ul> <li> <p>Progressive Migration ohne Neugestaltung</p> </li> <li> <p>Hinzufügen von Spring Boot nur, wenn nötig</p> </li> <li> <p>Kein vollständiger Vendor-Lock-in</p> </li> <li> <p>Erweiterbare Architektur</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_um_weiter_zu_gehen">Um weiter zu gehen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_technische_ressourcen">Technische Ressourcen</h3> <div class="paragraph"> <p><strong>Dokumentation Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">Leitfaden zur Authentifizierung</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">Zeilenebene-Sicherheit</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">Auto-generierte APIs</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Dokumentation Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/">Spring Boot mit Kotlin</a></p> </li> <li> <p><a href="https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow">Coroutines und Spring</a></p> </li> <li> <p><a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/resource-server/jwt.html">JWT Ressourcenserver</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Zusatzartikel:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Sicherung der APIs mit JWT</p> </li> <li> <p>Optimierung der PostgreSQL-Performance</p> </li> <li> <p>Progressive Migrationsmuster</p> </li> <li> <p>Fehlerbehandlung in verteilter Architektur</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_reale_anwendungsfälle">Reale Anwendungsfälle</h3> <div class="paragraph"> <p>Diese hybride Architektur wird erfolgreich in:</p> </div> <div class="ulist"> <ul> <li> <p><strong>SaaS B2B</strong>: Supabase-Authentifizierung, Abrechnung Spring Boot</p> </li> <li> <p><strong>Marktplätze</strong>: Supabase-Katalog, Spring Boot-Transaktionen</p> </li> <li> <p><strong>Inhaltsplattformen</strong>Artikel Supabase, Analytics Spring Boot</p> </li> <li> <p><strong>Interne Werkzeuge</strong>: CRUD Supabase, Workflows Spring Boot</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_start_checkliste">Start-Checkliste</h3> <div class="paragraph"> <p><strong>Phase 1 - Grundlagen (Woche 1)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Supabase-Konto erstellen - [ ] PostgreSQL-Projekt konfigurieren - [ ] Auth aktivieren (Google, GitHub) - [ ] Initialschema definieren - [ ] Row-Level-Sicherheit konfigurieren - [ ] APIs von JBake testen</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 2 - MVP (Woche 2-3)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Hauptseiten implementieren - [ ] OAuth2-Authentifizierung integrieren - [ ] CRUD-Formulare erstellen - [ ] Speicher für Dateien einrichten - [ ] Auf GitHub Pages bereitstellen - [ ] Testen unter realen Bedingungen</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 3 - Entwicklung (bei Bedarf)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Bedarf an komplexer Logik identifizieren - [ ] Spring Boot-Projekt erstellen falls nötig - [ ] JWT-Validierung in Supabase konfigurieren - [ ] Verbinden mit PostgreSQL Supabase - [ ] Komplexe Funktionen migrieren - [ ] Geplante Jobs implementieren - [ ] Spring Boot bereitstellen (Cloud Run usw.)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_anti_patterns_zu_vermeiden">Anti-Patterns zu vermeiden</h3> <div class="paragraph"> <p><strong>❌ Mach das nicht :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Dupliziere die Daten zwischen Supabase und Spring Boot</p> </li> <li> <p>Zwei getrennte PostgreSQL-Datenbanken erstellen</p> </li> <li> <p>Codieren Sie die Authentifizierung selbst</p> </li> <li> <p>Verwenden Sie Spring Boot für simples CRUD</p> </li> <li> <p>Von Anfang an über-architekturieren</p> </li> <li> <p>Row Level Security von Supabase ignorieren</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Machen Sie lieber:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Eine einzige PostgreSQL-Datenbank teilen</p> </li> <li> <p>Supabase die Authentifizierung verwalten lassen</p> </li> <li> <p>Spring Boot nur wegen der Komplexität verwenden</p> </li> <li> <p>Einfach beginnen, sich schrittweise weiterentwickeln</p> </li> <li> <p>Die Stärken jeder Technologie nutzen</p> </li> <li> <p>Mit RLS auf Datenbankebene sichern</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entwicklungsperspektiven">Entwicklungsperspektiven</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_hinzufügen_neuer_fähigkeiten">Hinzufügen neuer Fähigkeiten</h3> <div class="imageblock"> <div class="content"> <img src="future-capabilities.svg" alt="future capabilities" width="1758" height="5688"> </div> </div> </div> <div class="sect2"> <h3 id="_horizontale_skalierung">Horizontale Skalierung</h3> <div class="paragraph"> <p>Wenn Ihre Anwendung wächst, skaliert die hybride Architektur natürlich:</p> </div> <div class="paragraph"> <p><strong>Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Scale skaliert automatisch bis zu Millionen von Operationen</p> </li> <li> <p>Lese-Replikate für Leseleistung</p> </li> <li> <p>Zeitpunktbezogene Wiederherstellung für die Sicherheit</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Mehrere Instanzen hinter load balancer</p> </li> <li> <p>Zustandsloses Design erleichtert die horizontale Skalierung.</p> </li> <li> <p>Kubernetes für Orchestrierung bei Bedarf</p> </li> </ul> </div> <div class="paragraph"> <p><strong>PostgreSQL:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partitionierung für große Tabellen</p> </li> <li> <p>Verbindungspooling (PgBouncer)</p> </li> <li> <p>Sharding ist wirklich notwendig (selten)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architektonische_zeugnisse">Architektonische Zeugnisse</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_start_up_saas_50k_nutzer">Start-up SaaS (50k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Wir haben mit 100 % Supabase begonnen. Bei 5 k Nutzern haben wir Spring Boot ausschließlich für die Stripe‑Abrechnung und die monatlichen Berichte hinzugefügt. Ein Jahr später laufen immer noch 80 % unserer Vorgänge über Supabase. Spring Boot übernimmt nur den kritischen Teil. Diese Trennung hat es uns ermöglicht, zu skalieren, ohne eine Überarbeitung vorzunehmen. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_e_learning_plattform_10k_nutzer">E-Learning-Plattform (10k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Die OAuth2-Authentifizierung von Supabase hat uns 3 Wochen Entwicklungszeit gespart. Die automatisch generierten APIs verwalten unseren gesamten Kurskatalog. Spring Boot wird nur für die PDF-Zertifikate und Fortschritts-E-Mails verwendet. Einfache, wartbare, skalierbare Architektur. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_marketplace_b2b_3k_nutzer">Marketplace B2B (3k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Spring Boot verwaltet die Transaktionen zwischen Käufern und Verkäufern (kritisch). Supabase verwaltet alles andere: Profile, Echtzeit-Messaging, Dokumente. Der Umstand, dass sie dieselbe PostgreSQL-Datenbank teilen, erspart uns jede komplexe Synchronisation. Die beste architektonische Entscheidung, die wir je getroffen haben. </em>_</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_synthese_ein_modernes_architektonisches_paradigma">Synthese: Ein modernes architektonisches Paradigma</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Architektur Supabase + Spring Boot repräsentiert ein neues Paradigma:<strong>architektonische Spezialisierung</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 20) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Altes Paradigma" #LightCoral { card "Alles im Backend" { [Auth] [CRUD] [Logique Métier] [Jobs] [Storage] [Realtime] } note bottom Complexité maximale dès le jour 1 end note } rectangle "Neues Paradigma" #LightGreen { card "Supabase ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE rectangle "Altes Paradigma" #LightCoral { card "Alles im Backend" { [Auth] [CRUD] [Logique Métier] [Jobs] [Storage] [Realtime] } note bottom Complexité maximale dès le jour 1 end note } rectangle "Neues Paradigma" #LightGreen { card "Supabase (Bequemlichkeit)" { [Auth] [CRUD Simple] [Storage] [Realtime] } card "Spring Boot (Differenzierung)" { [Logique Métier] [Jobs] [Intégrations] } note bottom Complexité progressive ajoutée seulement si nécessaire end note } [Ancien Paradigme] -right-&gt; [Nouveau Paradigme] : Évolution @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Das grundlegende Prinzip :</strong>Bauen Sie nicht das, was bereits als Service existiert. Konzentrieren Sie sich auf das, was Ihre Anwendung unterscheidet.</p> </div> <div class="sect2"> <h3 id="_die_8020_regel">Die 80/20-Regel</h3> <div class="paragraph"> <p>In den meisten Anwendungen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>80 % der Operationen</strong>Sie sind standardmäßiger CRUD → Supabase</p> </li> <li> <p><strong>20% der Vorgänge</strong>benötigt Geschäftslogik → Spring Boot</p> </li> </ul> </div> <div class="paragraph"> <p>Diese natürliche Regel rechtfertigt die hybride Architektur.</p> </div> <div class="imageblock"> <div class="content"> <img src="8020-rule.svg" alt="8020 rule" width="1746" height="5652"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_endgültige_schlussfolgerung">Endgültige Schlussfolgerung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Architektur ist kein technischer Kompromiss, sie ist eine<strong>strategische Entscheidung</strong>(No visible characters – output is empty.)</p> </div> <div class="paragraph"> <p><strong>Es ermöglicht Ihnen:</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Schnell mit einem funktionalen MVP starten</p> </li> <li> <p>✅ Ihren Markt ohne hohe Investitionen validieren</p> </li> <li> <p>Schrittweise weiterentwickeln, wenn die Komplexität es erfordert.</p> </li> <li> <p>Ihre Kosten bei jedem Schritt kontrollieren</p> </li> <li> <p>Das Beste aus jeder Technologie nutzen</p> </li> <li> <p>�✅ Vermeiden vorzeitiges Überengineering</p> </li> <li> <p>Flexibilität für die Zukunft bewahren</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Sie stellt dar:</strong></p> </div> <div class="ulist"> <ul> <li> <p>�🎯<strong>Pragmatismus</strong>Jede Technologie, in der sie hervorragend ist</p> </li> <li> <p>�🚀<strong>Geschwindigkeit</strong>: minimale Time-to-Market</p> </li> <li> <p>�💰<strong>Wirtschaft</strong>Kosten, die am Wert ausgerichtet sind</p> </li> <li> <p>�🔮<strong>Skalierbarkeit</strong>: Architektur, die mit Ihnen wächst</p> </li> <li> <p>�🛡️<strong>Robustheit</strong>: Erprobte und zuverlässige Dienstleistungen</p> </li> </ul> </div> <div class="sect2"> <h3 id="_ihr_nächster_schritt">Ihr nächster Schritt</h3> <div class="paragraph"> <p>Wenn Ihnen diese Architektur zusagt, hier ist, wo Sie anfangen können:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Erstellen Sie ein Supabase-Konto</strong>(kostenlos)</p> </li> <li> <p><strong>Definieren Sie Ihr minimales Datenschema</strong></p> </li> <li> <p><strong>Konfigurieren Sie die OAuth2-Authentifizierung</strong></p> </li> <li> <p><strong>Erstelle deine erste JBake-Seite, die die API nutzt</strong></p> </li> <li> <p><strong>Stellen Sie auf GitHub Pages bereit</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Sie werden ein funktionsfähiges MVP haben in<strong>einige Tage</strong>.</p> </div> <div class="paragraph"> <p>Spring Boot wird natürlich kommen, wenn Sie es benötigen. Nicht früher.</p> </div> <hr> <div class="paragraph"> <p><strong>Die hybride Architektur ist die Kunst, genau das zu bauen, was nötig ist, wenn es nötig ist.</strong></p> </div> <div class="paragraph"> <p><em>Gute Entwicklung! 🚀</em></p> </div> <hr> <div class="paragraph"> <p><em>Teilen Sie diesen Artikel, wenn Sie denken, dass er anderen Entwicklern helfen kann, die richtigen architektonischen Entscheidungen zu treffen.</em></p> </div> </div> </div> </div> Hybrid-Architektur: Das Beste aus beiden Welten mit Supabase und Spring Boot https://cheroliv.com/blog/pilot-batch/0100_jbake_supabase_springboot_hybride_post.html Wed, 14 Jan 2026 00:00:00 +0000 blog/pilot-batch/0100_jbake_supabase_springboot_hybride_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Lesezeit : 12 minutes</div> <p>Statt zwischen der Einfachheit von Supabase und der Leistung von Spring Boot zu wählen, warum nicht beides kombinieren? Entdecken Sie eine hybride Architektur, das Beste aus jeder Technologie nutzt.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">Tic</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_das_falsche_dilemma_der_modernen_architektur">Das falsche Dilemma der modernen Architektur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn man eine moderne Anwendung mit einem statischen Frontend erstellt, steht man oft vor einer binären Wahl:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Alles auf eine Backend-as-a-Service-Lösung setzen</strong>(Supabase, Firebase) - einfach aber begrenzt</p> </li> <li> <p><strong>Einen vollständigen Backend erstellen</strong>(Spring Boot, Node.js) - mächtig aber komplex</p> </li> </ul> </div> <div class="paragraph"> <p>Diese Wahl ist ein falsches Dilemma. Die hybride Architektur bietet einen dritten Weg: <strong>jede Technologie dort einzusetzen, wo sie ihre Stärken ausspielen kann</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="_architektonische_vision">Architektonische Vision</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_traditionelle_architektur_monolithisch">Traditionelle Architektur : Monolithisch</h3> <div class="imageblock"> <div class="content"> <img src="traditional-architecture.svg" alt="traditional architecture" width="1787" height="5652"> </div> </div> <div class="paragraph"> <p>Bei diesem Ansatz müssen sogar die einfachsten Vorgänge (Artikel lesen, Kommentar erstellen) über dein Backend laufen. Du zahlst den Preis der Komplexität ab dem ersten Tag.</p> </div> </div> <div class="sect2"> <h3 id="_die_baas_architektur_alles_delegierte">Die BaaS-Architektur: Alles Delegierte</h3> <div class="imageblock"> <div class="content"> <img src="baas-architecture.svg" alt="baas architecture" width="504" height="432"> </div> </div> <div class="paragraph"> <p>Im Gegensatz dazu erscheint das Auslagern alles an einen BaaS zunächst attraktiv, aber es zeigt schnell seine Grenzen, sobald die Geschäftslogik komplexer wird.</p> </div> </div> <div class="sect2"> <h3 id="_hybride_architektur_trennung_der_verantwortlichkeiten">Hybride Architektur: Trennung der Verantwortlichkeiten</h3> <div class="imageblock"> <div class="content"> <img src="hybrid-overview.svg" alt="hybrid overview" width="1744" height="5760"> </div> </div> <div class="paragraph"> <p>Die hybride Architektur trennt die Verantwortlichkeiten deutlich nach Komplexität und Art der Operationen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entwurfsprinzipien">Entwurfsprinzipien</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinzip_1_einfach_beginnen_intelligent_weiterentwickeln">Prinzip 1: Einfach beginnen, intelligent weiterentwickeln</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 14) ] @startuml skinparam backgroundColor #FEFEFE rectangle "Phase 1: MVP" #LightGreen { component "JBake + Supabase" as mvp note right ✓ Développement en jours ✓ Coût : 0€ ✓ Validation concept end note } rectangle "Phase 2 : Wachstum" #LightYellow { component "JBake + Supabase ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE rectangle "Phase 1: MVP" #LightGreen { component "JBake + Supabase" as mvp note right ✓ Développement en jours ✓ Coût : 0€ ✓ Validation concept end note } rectangle "Phase 2 : Wachstum" #LightYellow { component "JBake + Supabase + Spring Boot (optional)" as growth note right ✓ Logique métier émerge ✓ Premiers jobs planifiés ✓ Intégrations tierces end note } rectangle "**Phase 3: Skalierung**" #LightCoral { component "Vollständige Architektur" as scale note right ✓ Orchestration complexe ✓ Performances optimisées ✓ Cache distribué end note } mvp -down-&gt; growth : Quand la complexité\nle justifie growth -down-&gt; scale : Optimisation\ncontinue @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Konstruieren Sie nicht Spring Boot, wenn Sie es nicht benötigen.</strong>Starten Sie mit Supabase, fügen Sie Spring Boot hinzu, wenn die Komplexität dies rechtfertigt.</p> </div> </div> <div class="sect2"> <h3 id="_prinzip_2_trennung_nach_art_der_operation">Prinzip 2: Trennung nach Art der Operation</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="_prinzip_3_eine_einzige_quelle_der_wahrheit">Prinzip 3: Eine einzige Quelle der Wahrheit</h3> <div class="imageblock"> <div class="content"> <img src="single-source-truth.svg" alt="single source truth" width="1738" height="5700"> </div> </div> <div class="paragraph"> <p>Durch das Teilen derselben PostgreSQL-Instanz arbeiten Supabase und Spring Boot an denselben Daten ohne komplexe Synchronisation.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_orchestrierung_der_flüsse">Orchestrierung der Flüsse</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_flux_1_zentrale_authentifizierung">Flux 1: Zentrale Authentifizierung</h3> <div class="imageblock"> <div class="content"> <img src="auth-orchestration.svg" alt="auth orchestration" width="1083" height="950"> </div> </div> <div class="paragraph"> <p><strong>Schlüsselpunkt</strong>Ein einzelner Authentifizierungsprozess, ein einzelnes JWT, überall verwendbar.</p> </div> </div> <div class="sect2"> <h3 id="_flux_2_orchestrierung_eines_komplexen_geschäftsprozesses">Flux 2 : Orchestrierung eines komplexen Geschäftsprozesses</h3> <div class="imageblock"> <div class="content"> <img src="business-orchestration.svg" alt="business orchestration" width="1092" height="990"> </div> </div> <div class="paragraph"> <p><strong>Was Spring Boot mitbringt</strong>Zuverlässige Orchestrierung komplexer Prozesse, die mehrere Systeme umfassen, mit transaktionssicherer Garantie.</p> </div> </div> <div class="sect2"> <h3 id="_flux_3_geplante_jobs_und_synchronisationen">Flux 3 : Geplante Jobs und Synchronisationen</h3> <div class="imageblock"> <div class="content"> <img src="scheduled-jobs.svg" alt="scheduled jobs" width="945" height="912"> </div> </div> <div class="paragraph"> <p><strong>Was Spring Boot mitbringt</strong>: zuverlässig geplante Jobs mit Zustandsverwaltung, automatischem Retry und garantierter Ausführung.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entscheidungsmatrix">Entscheidungsmatrix</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_wann_sollte_supabase_verwendet_werden">Wann sollte Supabase verwendet werden?</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="_wann_sollte_man_spring_boot_verwenden">Wann sollte man Spring Boot verwenden?</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="_beispiele_der_architektur_nach_projekttyp">Beispiele der Architektur nach Projekttyp</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_blog_portfolio">Blog / Portfolio</h3> <div class="imageblock"> <div class="content"> <img src="blog-architecture.svg" alt="blog architecture" width="1739" height="5688"> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>: 100% Supabase reicht völlig aus.</p> </div> </div> <div class="sect2"> <h3 id="_saas_anwendung">SaaS-Anwendung</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 15) ] @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "SaaS-Anwendung - Hybride Architektur" { component "JBake / React" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Multi-tenant] [Profils Utilisateurs] [Données Simples] [Storage Documents] } package "python ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "SaaS-Anwendung - Hybride Architektur" { component "JBake / React" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Multi-tenant] [Profils Utilisateurs] [Données Simples] [Storage Documents] } package "python import sys def main(): data = sys.stdin.read() sys.stdout.write(data) if __name__ == '__main__': main()" #Coral { [Facturation (Stripe)] [Analytics Avancées] [Rapports Mensuels] [Quotas &amp; Limites] [Webhooks Stripe] } cloud "Externe Dienstleistungen" { [Stripe API] [SendGrid Email] } database "PostgreSQL gemeinsam genutzt" as db frontend --&gt; [Auth Multi-tenant] frontend --&gt; [Profils Utilisateurs] frontend --&gt; [Données Simples] frontend --&gt; [Facturation (Stripe)] frontend --&gt; [Analytics Avancées] [Auth Multi-tenant] --&gt; db [Profils Utilisateurs] --&gt; db [Données Simples] --&gt; db [Facturation (Stripe)] --&gt; db [Facturation (Stripe)] --&gt; [Stripe API] [Analytics Avancées] --&gt; db [Rapports Mensuels] --&gt; db [Rapports Mensuels] --&gt; [SendGrid Email] [Webhooks Stripe] ..&gt; [Stripe API] : Écoute } note right of "python import sys def main(): data = sys.stdin.read() sys.stdout.write(data) if __name__ == '__main__': main()" **Nécessaire pour :** • Gestion abonnements • Facturation récurrente • Quotas dynamiques • Analytics complexes • Webhooks fiables end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>: Hybride Architektur erforderlich. Supabase für das Wesentliche, Spring Boot für den kritischen Teil (Zahlungen, Rechnungsstellung).</p> </div> </div> <div class="sect2"> <h3 id="_e_commerce">E-Commerce</h3> <div class="imageblock"> <div class="content"> <img src="ecommerce-architecture.svg" alt="ecommerce architecture" width="1758" height="5748"> </div> </div> <div class="paragraph"> <p><strong>Urteil</strong>: Spring Boot unverzichtbar. Supabase nur für auth und Katalog.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_progressive_migrationsstrategie">Progressive Migrationsstrategie</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="_kosten_und_operationelle_überlegungen">Kosten und operationelle Überlegungen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kostenstruktur">Kostenstruktur</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 7) ] @startuml skinparam backgroundColor #FEFEFE package "Geschätzte monatliche Kosten" { rectangle "Phase MVP (0-1000 Benutzer)" #LightGreen { ^^^^^ Syntax Error? (Assumed diagram type: activity) @startuml skinparam backgroundColor #FEFEFE package "Geschätzte monatliche Kosten" { rectangle "Phase MVP (0-1000 Benutzer)" #LightGreen { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot: N/A] note bottom: **Total: 0€/mois** } rectangle "Wachstumsphase (1k-10k users)" #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 "Phase-Skala (10.000-100.000 Nutzer)" #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 "Phase-Skala (10.000-100.000 Nutzer)" À ce stade, les revenus justifient largement les coûts end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_operative_verantwortlichkeiten">Operative Verantwortlichkeiten</h3> <div class="imageblock"> <div class="content"> <img src="operational-responsibilities.svg" alt="operational responsibilities" width="1738" height="5676"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_das_perfekte_gleichgewicht">Fazit: Das perfekte Gleichgewicht</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Supabase + Spring Boot Architektur ist kein Kompromiss, sie ist eine<strong>Synergie</strong>.</p> </div> <div class="sect2"> <h3 id="_die_zu_behaltenden_prinzipien">Die zu behaltenden Prinzipien</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="_wann_diese_architektur_wählen">Wann diese Architektur wählen?</h3> <div class="paragraph"> <p><strong>✅ Diese Architektur ist ideal, wenn:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Sie möchten schnell starten (MVP in Tagen, nicht in Monaten)</p> </li> <li> <p>Sie erwarten ein Wachstum der fachlichen Komplexität</p> </li> <li> <p>Sie wollen die Anfangskosten minimieren</p> </li> <li> <p>Sie mögen PostgreSQL und wünschen sich eine einzige Quelle der Wahrheit.</p> </li> <li> <p>Sie schätzen Kotlin und Coroutines für den Geschäftslogik-Code.</p> </li> <li> <p>Sie wollen Vendor Lock-in vollständig vermeiden</p> </li> </ul> </div> <div class="paragraph"> <p><strong>�❌ Diese Architektur ist NICHT geeignet, wenn :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Dein Projekt ist einfach und wird es bleiben (persönlicher Blog → 100% Supabase reicht)</p> </li> <li> <p>Du hast bereits einen etablierten Backend-Stack, den du beherrschst.</p> </li> <li> <p>Sie bevorzugen einen traditionellen Monolith</p> </li> <li> <p>Sie benötigen .NET, Python oder eine andere Backend-Programmiersprache</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_finale_übersicht">Finale Übersicht</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 35) ] @startuml skinparam backgroundColor #FEFEFE package "Vollständige hybride Architektur" { actor "Benutzer" as users rectangle "Frontend (Statisch)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Einfaches Backend (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Geschäfts-Backend (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml skinparam backgroundColor #FEFEFE package "Vollständige hybride Architektur" { actor "Benutzer" as users rectangle "Frontend (Statisch)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Einfaches Backend (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Geschäfts-Backend (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL Einzige Quelle der Wahrheit" as db #LightGray users --&gt; [JBake / GitHub Pages] [JBake / GitHub Pages] --&gt; [Auth OAuth2] [JBake / GitHub Pages] --&gt; [CRUD APIs] [JBake / GitHub Pages] --&gt; [Storage] [JBake / GitHub Pages] --&gt; [Realtime] [JBake / GitHub Pages] --&gt; [Orchestration] [Auth OAuth2] --&gt; db [CRUD APIs] --&gt; db [Orchestration] --&gt; db [Jobs Planifiés] --&gt; db [Intégrations] --&gt; db } note bottom of db **Une seule base, deux consommateurs** • Supabase pour le simple • Spring Boot pour le complexe • Aucune synchronisation requise end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_das_beste_aus_beiden_welten">Das Beste aus beiden Welten</h3> <div class="paragraph"> <p>Diese Architektur gibt Ihnen:</p> </div> <div class="paragraph"> <p><strong>�🚀 Die Geschwindigkeit von Supabase</strong></p> </div> <div class="ulist"> <ul> <li> <p>Start in Stunden, nicht in Wochen</p> </li> <li> <p>OAuth2-Authentifizierung in wenigen Klicks</p> </li> <li> <p>Automatisch generierte REST-APIs</p> </li> <li> <p>Keine Serverkonfiguration</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Die Stärke von Spring Boot</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin und Coroutines für eleganten asynchronen Code</p> </li> <li> <p>Orchestrierung komplexer Geschäftsprozesse</p> </li> <li> <p>zuverlässige geplante Jobs</p> </li> <li> <p>Garantierte ACID-Transaktionen</p> </li> <li> <p>Vollständiges Spring‑Ökosystem</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💰 Die progressive Wirtschaft</strong></p> </div> <div class="ulist"> <ul> <li> <p>0€ zum Starten und Bestätigen</p> </li> <li> <p>Kosten, die dem Wachstum folgen</p> </li> <li> <p>Keine vorzeitige Überentwicklung</p> </li> </ul> </div> <div class="paragraph"> <p><strong>🎯 Die architektonische Flexibilität</strong></p> </div> <div class="ulist"> <ul> <li> <p>Schrittweise Migration ohne Neugestaltung</p> </li> <li> <p>Hinzufügen von Spring Boot nur bei Bedarf</p> </li> <li> <p>Kein vollständiger Vendor Lock-in</p> </li> <li> <p>erweiterbare Architektur</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_um_weiter_zu_gehen">Um weiter zu gehen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_technische_ressourcen">Technische Ressourcen</h3> <div class="paragraph"> <p><strong>Supabase-Dokumentation:</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">Authentifizierungsleitfaden</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">Zeilenebene-Sicherheit</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">Automatisch generierte APIs</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot-Dokumentation :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/">Spring Boot mit Kotlin</a></p> </li> <li> <p><a href="https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow">Coroutinen und Spring</a></p> </li> <li> <p><a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/resource-server/jwt.html">JWT Ressourcenserver</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Zusatzartikel :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Absicherung der APIs mit JWT</p> </li> <li> <p>Optimierung der PostgreSQL-Leistung</p> </li> <li> <p>progressive Migrationsmuster</p> </li> <li> <p>Fehlerverwaltung in verteilter Architektur</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_reale_anwendungsfälle">Reale Anwendungsfälle</h3> <div class="paragraph"> <p>Diese hybride Architektur wird erfolgreich in:</p> </div> <div class="ulist"> <ul> <li> <p><strong>SaaS B2B</strong>Authentifizierung Supabase, Abrechnung Spring Boot</p> </li> <li> <p><strong>Marktplätze</strong>: Katalog Supabase, Transaktionen Spring Boot</p> </li> <li> <p><strong>Inhaltsplattformen</strong>: Artikel Supabase, analytics Spring Boot</p> </li> <li> <p><strong>Interne Werkzeuge</strong>: CRUD Supabase, Spring-Boot-Workflows</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_startcheckliste">Startcheckliste</h3> <div class="paragraph"> <p><strong>Phase 1 - Fundamente (Woche 1)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Supabase-Konto erstellen - [ ] PostgreSQL-Projekt konfigurieren - [ ] Auth aktivieren (Google, GitHub) - [ ] Initialschema definieren - [ ] Row-Level-Sicherheit konfigurieren - [ ] APIs seit JBake testen</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 2 - MVP (Woche 2-3)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Hauptseiten implementieren - [ ] OAuth2-Authentifizierung integrieren - [ ] CRUD-Formulare erstellen - [ ] Speicher für Dateien konfigurieren - [ ] Auf GitHub Pages bereitstellen - [ ] Unter realen Bedingungen testen</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 3 - Entwicklung (nach Bedarf)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Anforderungen an komplexe Logik identifizieren - [ ] Spring Boot Projekt erstellen, falls notwendig - [ ] Supabase JWT-Validierung konfigurieren - [ ] Verbinden mit PostgreSQL Supabase - [ ] Komplexe Funktionen migrieren - [ ] Geplante Jobs implementieren - [ ] Spring Boot bereitstellen (Cloud Run, usw.)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_anti_patterns_zu_vermeiden">Anti-Patterns zu vermeiden</h3> <div class="paragraph"> <p><strong>�❌ Nicht tun:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Dupliziere die Daten zwischen Supabase und Spring Boot</p> </li> <li> <p>Zwei separate PostgreSQL-Datenbanken erstellen</p> </li> <li> <p>Codier die Authentifizierung selbst</p> </li> <li> <p>Verwenden Sie Spring Boot für ein einfaches CRUD</p> </li> <li> <p>Überarchitecturieren von Anfang an</p> </li> <li> <p>Row-Level-Security von Supabase ignorieren</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Eher :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Teile eine einzige PostgreSQL-Datenbank</p> </li> <li> <p>Lassen Sie Supabase die Authentifizierung verwalten</p> </li> <li> <p>Spring Boot nur wegen der Komplexität verwenden</p> </li> <li> <p>Einfach beginnen, schrittweise weiterentwickeln</p> </li> <li> <p>Die Stärken jeder Technologie nutzen</p> </li> <li> <p>Mit RLS auf Datenbankebene sichern</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entwicklungsperspektiven">Entwicklungsperspektiven</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_hinzufügen_neuer_fähigkeiten">Hinzufügen neuer Fähigkeiten</h3> <div class="imageblock"> <div class="content"> <img src="future-capabilities.svg" alt="future capabilities" width="1756" height="5688"> </div> </div> </div> <div class="sect2"> <h3 id="_horizontale_skalierung">Horizontale Skalierung</h3> <div class="paragraph"> <p>Wenn Ihre Anwendung wächst, skaliert die hybride Architektur natürlich:</p> </div> <div class="paragraph"> <p><strong>Supabase:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Skaliert automatisch auf bis zu Millionen von Operationen</p> </li> <li> <p>Lesereplikate für Leseleistung</p> </li> <li> <p>Wiederherstellung zum Zeitpunkt für Sicherheit</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Mehrere Instanzen hinter Load Balancer</p> </li> <li> <p>Stateless design erleichtert das horizontale Skalieren</p> </li> <li> <p>Kubernetes für Orchestrierung falls notwendig</p> </li> </ul> </div> <div class="paragraph"> <p><strong>PostgreSQL:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partitionierung für große Tabellen</p> </li> <li> <p>Verbindungspooling (PgBouncer)</p> </li> <li> <p>Sharding, wenn es wirklich notwendig ist (selten)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architektonische_zeugnisse">Architektonische Zeugnisse</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startup_saas_50k_nutzer">Startup SaaS (50k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Wir haben mit 100 % Supabase gestartet. Bei 5k Nutzern haben wir Spring Boot nur für die Stripe‑Abrechnung und die monatlichen Berichte hinzugefügt. Ein Jahr später laufen 80 % unserer Vorgänge weiterhin über Supabase. Spring Boot verwaltet nur den kritischen Teil. Diese Trennung hat es uns ermöglicht, zu skalieren, ohne eine Neugestaltung vorzunehmen. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_e_learning_plattform_10k_nutzer">E-Learning-Plattform (10k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Die OAuth2-Authentifizierung von Supabase hat uns drei Wochen Entwicklungszeit eingespart. Die automatisch generierten APIs verwalten unseren gesamten Kurskatalog. Spring Boot wird nur für die PDF-Zertifikate und Fortschritts-E-Mails verwendet. Einfache, wartbare und skalierbare Architektur. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_b2b_marktplatz_3k_nutzer">B2B-Marktplatz (3k Nutzer)</h3> <div class="paragraph"> <p><em><em>_ Spring Boot verwaltet die Transaktionen zwischen Käufern und Verkäufern (kritisch). Supabase verwaltet alles andere: Profile, Echtzeit‑Messaging, Dokumente. Dass sie die gleiche PostgreSQL‑Datenbank teilen, erspart uns jegliche komplexe Synchronisation. Die beste architektonische Entscheidung, die wir getroffen haben. </em>_</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_synthese_ein_modernes_architektonisches_paradigma">Synthese: ein modernes architektonisches Paradigma</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Supabase + Spring Boot-Architektur repräsentiert ein neues Paradigma:<strong>die architektonische Spezialisierung</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="paradigm-shift.svg" alt="paradigm shift" width="1826" height="5456"> </div> </div> <div class="paragraph"> <p><strong>Das grundlegende Prinzip:</strong>Bauen Sie nicht das, was bereits als Dienst existiert. Konzentrieren Sie sich darauf, was Ihre Anwendung unterscheidet.</p> </div> <div class="sect2"> <h3 id="_die_regel_8020">Die Regel 80/20</h3> <div class="paragraph"> <p>In den meisten Anwendungen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>80% der Operationen</strong>sind Standard-CRUD → Supabase</p> </li> <li> <p><strong>20% der Operationen</strong>benötigen Geschäftslogik → Spring Boot</p> </li> </ul> </div> <div class="paragraph"> <p>Diese natürliche Regel rechtfertigt die hybride Architektur.</p> </div> <div class="imageblock"> <div class="content"> <img src="8020-rule.svg" alt="8020 rule" width="1761" height="5652"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_finale_schlussfolgerung">die finale Schlussfolgerung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die hybride Architektur ist kein technischer Kompromiss, sie ist eine<strong>strategische Entscheidung</strong>.</p> </div> <div class="paragraph"> <p><strong>Es ermöglicht Ihnen:</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Schnell mit einem funktionsfähigen MVP starten</p> </li> <li> <p>✅ Prüfe deinen Markt ohne hohe Investitionen</p> </li> <li> <p>�✅ Sich schrittweise weiterentwickeln, wenn die Komplexität es erfordert</p> </li> <li> <p>Kontrollieren Sie Ihre Kosten in jedem Schritt.</p> </li> <li> <p>Das Beste aus jeder Technologie nutzen</p> </li> <li> <p>✅ Vermeide vorzeitiges Überengineering</p> </li> <li> <p>✅ Flexibilität für die Zukunft bewahren</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Sie repräsentiert :</strong></p> </div> <div class="ulist"> <ul> <li> <p>�🎯<strong>Pragmatismus</strong>: Jede Technologie, in der sie hervorragend ist</p> </li> <li> <p>�🚀<strong>Geschwindigkeit</strong>: Time-to-market minimale</p> </li> <li> <p>�💰<strong>Wirtschaft</strong>Wertausgerichtete Kosten</p> </li> <li> <p>�🔮<strong>Skalierbarkeit</strong>: Architektur, die mit Ihnen wächst</p> </li> <li> <p>🛡️<strong>Robustheit</strong>Bewährte und zuverlässige Dienstleistungen</p> </li> </ul> </div> <div class="sect2"> <h3 id="_ihr_nächster_schritt">Ihr nächster Schritt</h3> <div class="paragraph"> <p>Falls Ihnen diese Architektur zusagt, hier ein Einstiegspunkt:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Erstellen Sie ein Supabase-Konto</strong>(kostenlos)</p> </li> <li> <p><strong>Definieren Sie Ihr minimales Datenschema</strong></p> </li> <li> <p><strong>Konfigurieren Sie die OAuth2-Authentifizierung</strong></p> </li> <li> <p><strong>Erstellen Sie Ihre erste JBake-Seite, die die API nutzt</strong></p> </li> <li> <p><strong>Stellen Sie auf GitHub Pages bereit</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Du wirst einen funktionsfähigen MVP in<strong>einige Tage</strong>.</p> </div> <div class="paragraph"> <p>Spring Boot kommt von selbst, wenn Sie es benötigen. Nicht vorher.</p> </div> <hr> <div class="paragraph"> <p><strong>Die hybride Architektur ist die Kunst, genau das zu bauen, was nötig ist, wenn es nötig ist.</strong></p> </div> <div class="paragraph"> <p><em>Gute Entwicklung! 🚀</em></p> </div> <hr> <div class="paragraph"> <p>Teilen Sie diesen Artikel, wenn Sie glauben, dass er anderen Entwicklern dabei helfen kann, die richtigen architektonischen Entscheidungen zu treffen.</p> </div> </div> </div> </div> Die Kunst des Vorladens: Das "Flash" des Themes mit JavaScript und CSS entfernen 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="#_zusammenfassung">Zusammenfassung</a></li> <li><a href="#_das_problem_dieses_verdammte_theme_flackern">Das Problem: Dieses verdammte Theme-Flackern</a> <ul class="sectlevel2"> <li><a href="#_ein_albtraum_für_die_benutzererfahrung">Ein Albtraum für die Benutzererfahrung</a></li> <li><a href="#_der_fouc_ein_altes_web_problem">Der FOUC: Ein altes Web-Problem</a></li> <li><a href="#_auswirkung_auf_die_wahrnehmung_von_qualität">Auswirkung auf die Wahrnehmung von Qualität</a></li> <li><a href="#_technische_analyse_des_problems">Technische Analyse des Problems</a></li> </ul> </li> <li><a href="#_warum_reicht_ein_klassisches_skript_nicht_aus">Warum reicht ein klassisches Skript nicht aus?</a> <ul class="sectlevel2"> <li><a href="#_der_intuitive_aber_ineffiziente_ansatz">Der intuitive aber ineffiziente Ansatz</a></li> <li><a href="#_das_domcontentloaded_ereignis_verstehen">Das DOMContentLoaded-Ereignis verstehen</a></li> <li><a href="#_das_render_blocking_problem">Das Render-Blocking-Problem</a></li> <li><a href="#_visualisierung_des_problems">Visualisierung des Problems</a></li> <li><a href="#_die_ineffektiven_lösungsversuche">Die ineffektiven Lösungsversuche</a></li> <li><a href="#_die_wahre_lösung_früher_handeln">Die wahre Lösung: früher handeln</a></li> </ul> </li> <li><a href="#_die_lösung_das_vorladen_early_loading">Die Lösung: Das Vorladen (Early Loading)</a> <ul class="sectlevel2"> <li><a href="#_das_grundprinzip">Das Grundprinzip</a></li> <li><a href="#_warum_das_head_der_ideale_ort_ist">Warum das <code>&lt;head&gt;</code> der ideale Ort ist</a></li> <li><a href="#_drei_schichten_architektur_der_lösung">Drei-Schichten-Architektur der Lösung</a></li> </ul> </li> <li><a href="#_schritt_1_speichern_der_benutzerwahl">Schritt 1: Speichern der Benutzerwahl</a> <ul class="sectlevel2"> <li><a href="#_der_localstorage_ihr_persistenter_speicher">Der localStorage: Ihr persistenter Speicher</a></li> <li><a href="#_implementierung_des_theme_backups">Implementierung des Theme-Backups</a></li> <li><a href="#_fehlerfallverwaltung">Fehlerfallverwaltung</a></li> <li><a href="#_fortgeschrittene_persistenzstrategien">Fortgeschrittene Persistenzstrategien</a></li> </ul> </li> <li><a href="#_schritt_2_das_preloading_skript_im_head">Schritt 2: Das Preloading-Skript im `&lt;head&gt;</a> <ul class="sectlevel2"> <li><a href="#_das_herz_der_lösung">Das Herz der Lösung</a></li> <li><a href="#_anatomie_des_skripts_jede_zeile_zählt">Anatomie des Skripts: Jede Zeile zählt</a></li> <li><a href="#_erkennung_der_systempräferenz_bonus">Erkennung der Systempräferenz (Bonus)</a></li> <li><a href="#_performance_warum_dieses_skript_schnell_ist">Performance: Warum dieses Skript schnell ist</a></li> <li><a href="#_optimale_platzierung_im_head">Optimale Platzierung im `&lt;head&gt;</a></li> </ul> </li> <li><a href="#_schritt_3_die_macht_der_css_attributselektoren">Schritt 3: Die Macht der CSS-Attributselektoren</a> <ul class="sectlevel2"> <li><a href="#_das_theme_system_von_bootstrap_5">Das Theme-System von Bootstrap 5</a></li> <li><a href="#_css_struktur_für_ein_themensystem">CSS-Struktur für ein Themensystem</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_zusammenfassung">Zusammenfassung</h2> <div class="sectionbody"> <div class="paragraph"> <p>In diesem detaillierten technischen Artikel, untersuchen wir, wie man einen Theme-Wähler (light/dark) ohne den lästigen Blinkeffekt implementiert, der beim Laden der Seite auftritt. Wir analysieren den Rendering-Zyklus des Browsers im Detail, die tiefen Ursachen des FOUC (Flash of Unstyled Content), und schlagen eine robuste Lösung vor, die auf synchronem Vorladen basiert im`&lt;head&gt;`. Diese Technik garantiert ein flüssiges und professionelles Benutzererlebnis.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_dieses_verdammte_theme_flackern">Das Problem: Dieses verdammte Theme-Flackern</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ein_albtraum_für_die_benutzererfahrung">Ein Albtraum für die Benutzererfahrung</h3> <div class="paragraph"> <p>Stell dir die Szene vor: Du hast Stunden damit verbracht, ein wunderschönes dunkles Theme für deine Webanwendung zu entwerfen. Die Farben sind perfekt ausgewogen, der Kontrast ist optimal, und deine Benutzer lieben diese Option. Aber es gibt ein peinliches Problem: Bei jedem Seitenreload wird für einen Bruchteil einer Sekunde das standardhelle Theme angezeigt, bevor das dunkle Theme übernimmt.</p> </div> <div class="paragraph"> <p>Dieser visuelle „Flash“, obwohl kurz (manchmal weniger als 100 ms), ist sofort für das menschliche Auge wahrnehmbar und erzeugt ein unangenehmes Erlebnis. Für Benutzer, die das dunkle Thema aus Gründen des visuellen Komforts oder der Barrierefreiheit gewählt haben, kann dieses Flackern sogar schmerzhaft sein, insbesondere in einer schwach beleuchteten Umgebung.</p> </div> </div> <div class="sect2"> <h3 id="_der_fouc_ein_altes_web_problem">Der FOUC: Ein altes Web-Problem</h3> <div class="paragraph"> <p>Dieses Phänomen ist eine Variante dessen, was man „Flash of Unstyled Content“ (FOUC) nennt, ein klassisches Problem der Webentwicklung, das bis zu den Anfängen von CSS zurückreicht. Der FOUC tritt auf, wenn der Browser vorübergehend HTML-Inhalt ohne angewendete CSS-Stile anzeigt, was einen Blitz von unstylisiertem Inhalt erzeugt.</p> </div> <div class="paragraph"> <p>In unserem speziellen Fall sprechen wir nicht von vollständig unstilisiertem Inhalt, sondern vielmehr von einem<strong>Blitz des falschen Themas</strong>(FOWT) - Der Inhalt wird gestylt, aber mit dem falschen Thema. Das ist besonders frustrierend, denn es zeigt, dass unsere Anwendung die Benutzerpräferenz bei jedem Seitenladen "vergisst".</p> </div> </div> <div class="sect2"> <h3 id="_auswirkung_auf_die_wahrnehmung_von_qualität">Auswirkung auf die Wahrnehmung von Qualität</h3> <div class="paragraph"> <p>Dieses Problem, obwohl technisch, hat wichtige Auswirkungen auf die Wahrnehmung der Qualität deiner Anwendung :</p> </div> <div class="paragraph"> <p><strong>Mangel an Politur</strong>Das Flackern vermittelt den Eindruck einer unvollständigen oder schlecht optimierten Anwendung. Benutzer verbinden solche kleinen visuellen Mängel oft mit einem allgemeinen Mangel an Professionalität.</p> </div> <div class="paragraph"> <p><strong>Kohärenzabbruch</strong>Die App scheint die Benutzerpräferenzen zu "vergessen", wodurch ein Gefühl des Nicht-Synchronseins zwischen der Schnittstelle und den Erwartungen entsteht.</p> </div> <div class="paragraph"> <p><strong>visuelle Ermüdung</strong>: Für lichtempfindliche Benutzer oder Personen, die unter Migräne leiden, kann dieser Lichtblitz mehr sein als nur eine einfache ästhetische Unannehmlichkeit.</p> </div> <div class="paragraph"> <p><strong>Wahrgenommene Leistung</strong>: Ironischerweise kann dieses Blinken, obwohl Ihre Seite schnell lädt, den Eindruck erwecken einer langsamen oder wenig reaktiven Anwendung.</p> </div> </div> <div class="sect2"> <h3 id="_technische_analyse_des_problems">Technische Analyse des Problems</h3> <div class="paragraph"> <p>Um zu verstehen, wie dieses Problem gelöst werden kann, muss man zunächst verstehen, warum es auftritt. Das Flackern tritt aufgrund einer zeitlichen Verzögerung zwischen drei kritischen Ereignissen im Lebenszyklus einer Webseite auf:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Das initiale Parsing des HTML</strong>Der Browser liest und analysiert die Struktur Ihrer Seite</p> </li> <li> <p><strong>Die Anwendung der CSS-Stile</strong>: Der Browser wendet die CSS-Regeln an und berechnet die visuelle Darstellung</p> </li> <li> <p><strong>Die Ausführung des JavaScript</strong>: Ihr Code, der das Thema ändert, wird ausgeführt</p> </li> </ol> </div> <div class="paragraph"> <p>Das Problem tritt auf, wenn das Ereignis Nr. 3 (Ausführung des JavaScript) nachdem der Browser bereits das Ereignis Nr. 2 (Anwenden der Stile) gestartet oder abgeschlossen hat, eintrifft. Zu diesem Zeitpunkt hat der Browser bereits eine Entscheidung darüber getroffen, welches Thema angezeigt werden soll, und Ihr Code kommt zu spät, um ihn vor dem ersten Rendering zu beeinflussen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_reicht_ein_klassisches_skript_nicht_aus">Warum reicht ein klassisches Skript nicht aus?</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_der_intuitive_aber_ineffiziente_ansatz">Der intuitive aber ineffiziente Ansatz</h3> <div class="paragraph"> <p>Der natürlichste Ansatz für einen Entwickler wäre, ein Skript am Ende unseres`&lt;body&gt;`der das bevorzugte Theme des Benutzers überprüft und anwendet. Dieser Ansatz folgt den traditionellen Best Practices des Web, die empfehlen, Skripte am Ende der Seite zu laden, um das Rendern nicht zu blockieren.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">// À la fin de &lt;body&gt; - L'APPROCHE INSUFFISANTE document.addEventListener('DOMContentLoaded', () =&gt; { const theme = localStorage.getItem('preferred-theme'); if (theme === 'dark') { document.documentElement.setAttribute('data-bs-theme', 'dark'); } });</code></pre> </div> </div> <div class="paragraph"> <p>Dieser Ansatz scheint auf den ersten Blick logisch. Wir warten, bis das DOM bereit ist, und wenden dann das Theme an. Einfach, oder? Leider verbirgt diese Einfachheit einen grundlegenden Fehler, der mit dem Timing des Browser-Renderzyklus zusammenhängt.</p> </div> </div> <div class="sect2"> <h3 id="_das_domcontentloaded_ereignis_verstehen">Das DOMContentLoaded-Ereignis verstehen</h3> <div class="paragraph"> <p>Das Ereignis`DOMContentLoaded`wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und vom Browser analysiert wurde,<strong>ohne zu warten</strong>das Ende des Ladens von Stylesheets, Bildern und Unterframes. Das ist ein wichtiger Punkt, den es zu verstehen gilt.</p> </div> <div class="paragraph"> <p>Hier ist die typische Ereignisfolge :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Der Browser beginnt, das HTML herunterzuladen.</p> </li> <li> <p>Er analysiert das HTML während es empfangen wird.</p> </li> <li> <p>Er entdeckt die Tags`&lt;link&gt;`für das CSS und beginnt sie herunterzuladen</p> </li> <li> <p>Er entdeckt die Tags`&lt;script&gt;`und führt sie aus (je nach ihrem Typ und Attributen)</p> </li> <li> <p>Er erstellt das DOM (Document Object Model)</p> </li> <li> <p><strong>Das Ereignis <code>DOMContentLoaded</code> wird ausgelöst</strong></p> </li> <li> <p>Er wendet weiterhin die Styles an und führt das Layout durch.</p> </li> <li> <p>Der erste paint (Anzeige) erfolgt.</p> </li> <li> <p>Das Ereignis`load`wird ausgelöst, wenn alle Ressourcen geladen sind</p> </li> </ol> </div> <div class="paragraph"> <p>Das Problem? Zwischen Schritt 6 (DOMContentLoaded) und Schritt 8 (erstes Paint) hat der Browser bereits Entscheidungen getroffen, wie die Seite angezeigt werden soll. Wenn Ihr Theme-Wechsel-Skript bei Schritt 6 ausgeführt wird, ist es bereits zu spät, um eine erste Anzeige mit den Standardstilen zu vermeiden.</p> </div> </div> <div class="sect2"> <h3 id="_das_render_blocking_problem">Das Render-Blocking-Problem</h3> <div class="paragraph"> <p>Tatsächlich ist das Timing noch komplexer. Moderne Browser verwenden ausgefeilte Optimierungstechniken, um die wahrgenommene Leistung zu verbessern. Sie versuchen, den ersten Paint (First Contentful Paint) so schnell wie möglich zu erzeugen, damit der Benutzer etwas auf dem Bildschirm sieht.</p> </div> <div class="paragraph"> <p>CSS sind standardmäßig "render-blocking", was bedeutet, dass der Browser darauf wartet, die Stylesheets heruntergeladen und geparsed zu haben, bevor er das erste Paint durchführt. Das ist logisch: Wir wollen keinen unstilisierten Inhalt anzeigen.</p> </div> <div class="paragraph"> <p>Aber hier ist die Falle: Wenn der Browser diese CSS-Stile zum ersten Mal anwendet, tut er das auf der Grundlage des aktuellen DOM-Zustands. Wenn das Attribut`data-bs-theme`ist noch nicht auf dem Tag definiert`&lt;html&gt;`, der Browser wird die Standardstile anwenden (in der Regel das helle Theme).</p> </div> <div class="paragraph"> <p>Dann, wenn Ihr Skript ausgeführt wird und dieses Attribut ändert, muss der Browser:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Alle von dieser Änderung betroffenen Stile neu berechnen</p> </li> <li> <p>Das Layout bei Bedarf neu erstellen</p> </li> <li> <p>Die betroffenen Elemente neu streichen</p> </li> </ol> </div> <div class="paragraph"> <p>Dieser Prozess der Neuberechnung und Neuzeichnung ist das, was das sichtbare Flackern verursacht.</p> </div> </div> <div class="sect2"> <h3 id="_visualisierung_des_problems">Visualisierung des Problems</h3> <div class="paragraph"> <p>Um diese problematische Sequenz besser zu verstehen, lassen Sie uns ein detailliertes Sequenzdiagramm untersuchen:</p> </div> <div id="diag-flux-incorrect" class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-3dec4f8d290ff6042e77b8a7b49b670a.svg" alt="Diagramme de séquence du chargement incorrect" width="1797" height="666"> </div> </div> <div class="paragraph"> <p>Dieses Diagramm veranschaulicht das Problem deutlich: Der erste Paint tritt auf, bevor unser Script die Chance hatte, das richtige Thema zu definieren. Der nachfolgende Repaint erzeugt das sichtbare Flackern.</p> </div> </div> <div class="sect2"> <h3 id="_die_ineffektiven_lösungsversuche">Die ineffektiven Lösungsversuche</h3> <div class="paragraph"> <p>Mehrere Ansätze wurden versucht, dieses Problem zu lösen, aber die meisten haben ihre eigenen Nachteile:</p> </div> <div class="paragraph"> <p><strong>Ansatz 1: Inhalt bis zum Laden verbergen</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>Dieser Ansatz verbirgt den gesamten Inhalt, bis JavaScript das richtige Thema festgelegt hat. Das Problem? Dadurch wird die Anzeige des Inhalts künstlich verzögert, wodurch der Eindruck entsteht, die Seite sei langsamer. Außerdem sieht der Benutzer überhaupt nichts, wenn JavaScript deaktiviert ist!</p> </div> <div class="paragraph"> <p><strong>Ansatz 2: Verwende einen Loader/Spinner</strong></p> </div> <div class="paragraph"> <p>Ähnlich wie bei Ansatz 1, aber mit einem Ladespinner. Dies verbirgt das Problem, verbessert jedoch die tatsächliche Leistung nicht und fügt eine unnötig wahrgenommene Verzögerung hinzu.</p> </div> <div class="paragraph"> <p><strong>Ansatz 3: Standardmäßig dunkles Thema</strong></p> </div> <div class="paragraph"> <p>Einige Entwickler definieren das dunkle Thema als Standard im CSS. Dadurch wird das Flackern für Nutzer des dunklen Themas vermieden, aber es entsteht das umgekehrte Problem für Nutzer des hellen Themas!</p> </div> <div class="paragraph"> <p>Keiner dieser Ansätze ist zufriedenstellend, weil sie das Symptom anstatt der Ursache des Problems behandeln.</p> </div> </div> <div class="sect2"> <h3 id="_die_wahre_lösung_früher_handeln">Die wahre Lösung: früher handeln</h3> <div class="paragraph"> <p>Der Schlüssel zur Lösung dieses Problems besteht darin, zu erkennen, dass wir das Attribut festlegen müssen.<code>data-bs-theme</code> <strong>vor</strong>Das bedeutet, dass unser Skript früher im Lebenszyklus der Seite ausgeführt werden muss, und genau das werden wir im folgenden Abschnitt untersuchen.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_das_vorladen_early_loading">Die Lösung: Das Vorladen (Early Loading)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_grundprinzip">Das Grundprinzip</h3> <div class="paragraph"> <p>Die elegante Lösung für unser Blinkproblem beruht auf einem einfachen aber mächtigen Prinzip:<strong>den Zustand der Anwendung mit dem Rendering-Prozess des Browsers synchronisieren</strong>. Anstatt zu warten, dass die Seite geladen wird, um das Thema festzulegen, müssen wir es festlegen<strong>während</strong>das Laden, noch bevor die CSS-Stile angewendet werden.</p> </div> <div class="paragraph"> <p>Dieser Ansatz wird im Webentwicklungs-Jargon "Early Loading" oder "Synchronous Preloading" genannt. Die Idee ist, unsere Theme-Erkennungslogik so früh wie möglich im Lebenszyklus der Seite auszuführen, idealerweise innerhalb des Tags`&lt;head&gt;`, sogar bevor der Browser beginnt, die CSS-Dateien herunterzuladen.</p> </div> </div> <div class="sect2"> <h3 id="_warum_das_head_der_ideale_ort_ist">Warum das <code>&lt;head&gt;</code> der ideale Ort ist</h3> <div class="paragraph"> <p>Le `&lt;head&gt;`Ein HTML-Dokument wird vom Browser sequentiell von oben nach unten verarbeitet. Jedes Element wird in der Reihenfolge verarbeitet, in der es erscheint. Diese Eigenschaft ist entscheidend für unsere Lösung.</p> </div> <div class="paragraph"> <p>Wenn der Browser ein Tag trifft`&lt;script&gt;`im`&lt;head&gt;` sans les attributs <code>async</code> ou <code>defer</code>, il :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Das Parsen des HTML unterbrechen</strong></p> </li> <li> <p><strong>Lade das Skript herunter</strong>(wenn extern) oder das Bett (wenn inline)</p> </li> <li> <p><strong>Führe das Skript sofort aus</strong></p> </li> <li> <p><strong>Setzt das Parsing des HTML fort</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Dieses Verhalten, das oft als Leistungsproblem betrachtet wird (daher die übliche Empfehlung, Skripte am Ende der Seite zu platzieren), wird in diesem speziellen Fall zu unserem Verbündeten. Indem wir unser Theme-Erkennungsskript am Anfang des`&lt;head&gt;`, wir garantieren, dass es ausgeführt wird, bevor der Browser die Tags trifft`&lt;link&gt;`unserer Stylesheets</p> </div> </div> <div class="sect2"> <h3 id="_drei_schichten_architektur_der_lösung">Drei-Schichten-Architektur der Lösung</h3> <div class="paragraph"> <p>Unsere komplette Lösung besteht aus drei voneinander abhängigen Schichten, die jeweils eine spezifische Rolle spielen:</p> </div> <div class="paragraph"> <p><strong>Schicht 1: Persistenz (localStorage)</strong> Diese Schicht ist für das Speichern und Abrufen der Benutzerwahl zwischen den Sitzungen verantwortlich.</p> </div> <div class="paragraph"> <p><strong>Schicht 2: Frühzeitige Synchronisation (Inline-Skript im <code>&lt;head&gt;</code>)</strong> Diese Schicht synchronisiert den Zustand der Anwendung mit dem DOM vor dem initialen Rendering.</p> </div> <div class="paragraph"> <p><strong>Schicht 3 : Reaktive Styles (CSS mit Attributselektoren)</strong> Diese Schicht definiert die visuellen Styles, die auf dem von Schicht 2 definierten Status basieren.</p> </div> <div class="paragraph"> <p>Jetzt untersuchen wir jede Schicht im Detail.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_1_speichern_der_benutzerwahl">Schritt 1: Speichern der Benutzerwahl</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_der_localstorage_ihr_persistenter_speicher">Der localStorage: Ihr persistenter Speicher</h3> <div class="paragraph"> <p>Le <code>localStorage`ist eine Web-Storage-API, die das Speichern von Schlüssel-Wert-Paaren im Browser auf dauerhafte Weise ermöglicht. Im Gegensatz zu Cookies werden die Daten des`localStorage</code>:</p> </div> <div class="ulist"> <ul> <li> <p>Sie werden niemals automatisch an den Server gesendet</p> </li> <li> <p>Sie haben eine größere Speicherkapazität (in der Regel 5-10 MB)</p> </li> <li> <p>Sie haben kein Verfallsdatum (beständig bis zur expliziten Löschung)</p> </li> <li> <p>Sie sind auf Protokoll und Domain beschränkt (Same-Origin Policy)</p> </li> </ul> </div> <div class="paragraph"> <p>Für unseren Anwendungsfall, der`localStorage`ist perfekt weil:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Wir müssen diese Information nicht mit dem Server teilen.</p> </li> <li> <p>Wir wollen, dass die Präferenz bestehen bleibt</p> </li> <li> <p>Der erforderliche Speicherplatz ist gering (einige Bytes)</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_implementierung_des_theme_backups">Implementierung des Theme-Backups</h3> <div class="paragraph"> <p>So speichern wir die Wahl des Benutzers, wenn er das Thema wechselt :</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', () =&gt; { 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="_fehlerfallverwaltung">Fehlerfallverwaltung</h3> <div class="paragraph"> <p>Es ist entscheidend, die Fälle zu behandeln, in denen das`localStorage`ist nicht verfügbar oder zugänglich. Mehrere Szenarien können den Zugriff darauf`localStorage`:</p> </div> <div class="paragraph"> <p><strong>Strenge private Navigation</strong>: Safari im privaten Modus wirft eine Ausnahme`QuotaExceededError`bei Schreibversuchen in den`localStorage`.</p> </div> <div class="paragraph"> <p><strong>Datenschutzeinstellungen</strong>: Einige Browser oder Datenschutzerweiterungen können den Zugriff auf`localStorage`.</p> </div> <div class="paragraph"> <p><strong>Domänenbeschränkungen</strong> : Le `localStorage`ist nicht über das Protokoll zugänglich`file://`in einigen Browsern.</p> </div> <div class="paragraph"> <p><strong>Der Speicherplatz ist voll</strong>Obwohl selten, kann der Speicherplatz vollständig gefüllt werden.</p> </div> <div class="paragraph"> <p>Daher verwendet unser Code einen Block`try&#8230;&#8203;catch`Um diese Fälle geschmeidig zu behandeln, indem man weiterhin die Funktion zum Themawechsel anbietet, auch wenn die Persistenz nicht verfügbar ist.</p> </div> </div> <div class="sect2"> <h3 id="_fortgeschrittene_persistenzstrategien">Fortgeschrittene Persistenzstrategien</h3> <div class="paragraph"> <p>Für anspruchsvollere Anwendungen können Sie zusätzliche Strategien in Betracht ziehen :</p> </div> <div class="paragraph"> <p><strong>Synchronisierung Server (optional)</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>Dieser Ansatz ermöglicht das Synchronisieren der Präferenzen zwischen Geräten für angemeldete Benutzer, wobei die sofortige lokale Reaktionsfähigkeit beibehalten wird.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_2_das_preloading_skript_im_head">Schritt 2: Das Preloading-Skript im `&lt;head&gt;</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_herz_der_lösung">Das Herz der Lösung</h3> <div class="paragraph"> <p>Hier geschieht die Magie wirklich. Wir werden ein kleines Skript platzieren.<strong>inline</strong>direkt in unser`&lt;head&gt;`, vor allen unseren Tags`&lt;link&gt;`von Stylesheets. Dieses Skript ist bewusst minimalistisch, autonom und darauf ausgelegt, so schnell wie möglich ausgeführt zu werden.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&gt;Mon Site Incroyable&lt;/title&gt; &lt;!-- ========================================== NOTRE SCRIPT MAGIQUE DE PRÉ-CHARGEMENT Ce script DOIT être le premier élément dans le &lt;head&gt; après les meta tags ========================================== --&gt; &lt;script&gt; // 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 &amp;&amp; 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); } })(); &lt;/script&gt; &lt;!-- FIN DU SCRIPT MAGIQUE --&gt; &lt;!-- Les feuilles de style sont chargées APRÈS le script --&gt; &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="css/styles.css"&gt; &lt;!-- Autres ressources du head --&gt; &lt;link rel="icon" href="favicon.ico"&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Contenu de la page --&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_anatomie_des_skripts_jede_zeile_zählt">Anatomie des Skripts: Jede Zeile zählt</h3> <div class="paragraph"> <p>Lasst uns dieses Skript Zeile für Zeile auseinandernehmen, um jede Designentscheidung zu verstehen :</p> </div> <div class="paragraph"> <p><strong>Das IIFE (Immediately Invoked Function Expression)</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>Diese Struktur erstellt eine Funktion, die sofort ausgeführt wird. Warum? Um unsere Variablen in einem lokalen Geltungsbereich zu isolieren und das Verunreinigen des globalen Geltungsbereichs zu vermeiden. Obwohl wir nur`const`(die einen Block-Scope hat), die IIFE ist eine gute Praxis, die unsere Absichten klar macht und gegen mögliche Namenskonflikte schützt.</p> </div> <div class="paragraph"> <p><strong>Der strenge Modus</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>Diese Direktive aktiviert den strengen Modus von JavaScript, der: - Untersagt die Verwendung von nicht deklarierten Variablen - Generiert Fehler für gefährliche Operationen - Verbessert die Leistung in einigen JavaScript-Engines</p> </div> <div class="paragraph"> <p>Für ein kritisches Skript wie dieses wollen wir maximale Sicherheit.</p> </div> <div class="paragraph"> <p><strong>Der try&#8230;&#8203;catch-Block</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>Dieser Block ist absolut entscheidend. Er garantiert, dass, wenn etwas schiefgeht (localStorage gesperrt, unwahrscheinliche Syntaxfehler usw.), unser Skript das Laden der gesamten Seite nicht blockiert. Die Verwendung von`console.warn`ansatz? Wait check: "plutôt que" could be "statt" depending on usage: e.g., "Il préfère le thé plutôt que le café." &#8658; "Er bevorzugt Tee statt Kaffee." But "instead of": "anstatt". I think output should be "anstatt". Let&#8217;s go with that.</p> </div> <div class="paragraph"> <p>&lt;/think&gt;</p> </div> <div class="paragraph"> <p>anstatt`console.error`weist darauf hin, dass es ein nicht kritisches Problem ist.</p> </div> <div class="paragraph"> <p><strong>Die Lesung des 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>Diese Zeile kann in bestimmten Kontexten (strenger privater Modus von Safari) eine Ausnahme auslösen. Deshalb befindet sie sich in einem try&#8230;&#8203;catch-Block.</p> </div> <div class="paragraph"> <p><strong>Die bedingte Anwendung</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>Wir wenden das Theme nur an, wenn wir ein gespeichertes gefunden haben. Andernfalls lassen wir das CSS sein Standardtheme verwenden. Dieser Ansatz ist robuster als ein im JavaScript fest codierter Standardwert.</p> </div> </div> <div class="sect2"> <h3 id="_erkennung_der_systempräferenz_bonus">Erkennung der Systempräferenz (Bonus)</h3> <div class="paragraph"> <p>Eine optionale, aber elegante Verbesserung besteht darin, die Thema-Präferenz des Betriebssystems des Nutzers zu erkennen, wenn er noch keine explizite Wahl in Ihrer Anwendung getroffen hat :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-javascript" data-lang="javascript">else if (window.matchMedia &amp;&amp; window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); }</code></pre> </div> </div> <div class="paragraph"> <p>Diese Funktion verwendet die Media Query`prefers-color-scheme`um das System abzufragen. Auf macOS, Windows 10+, iOS und modernem Android gibt diese Anfrage die Systemeinstellung des Benutzers zurück.</p> </div> <div class="paragraph"> <p><strong>Vorteile:</strong> Personalisierte Erfahrung ab dem ersten Besuch - Konsistenz mit der Systemumgebung des Benutzers - Kein Speicherplatz erforderlich für den ersten Besuch</p> </div> <div class="paragraph"> <p><strong>Überlegungen :</strong> - Nicht alle Browser unterstützen diese Funktion (aber die Unterstützung ist seit 2020 ausgezeichnet). Die Überprüfung`window.matchMedia`sichert die Kompatibilität - Der Benutzer kann diese Wahl stets überschreiben.</p> </div> </div> <div class="sect2"> <h3 id="_performance_warum_dieses_skript_schnell_ist">Performance: Warum dieses Skript schnell ist</h3> <div class="paragraph"> <p>Unser Preload-Skript ist darauf ausgelegt, extrem schnell zu sein:</p> </div> <div class="paragraph"> <p><strong>Mindestgröße</strong>: Etwa 300 Bytes nicht-minifiziert, 200 Bytes minifiziert. Das ist vernachlässigbar im Vergleich zu jedem Bild oder jeder JavaScript-Bibliothek.</p> </div> <div class="paragraph"> <p><strong>Inline</strong>: Keine zusätzlichen HTTP-Anfragen. Das Skript befindet sich im HTML, daher ist es sofort verfügbar.</p> </div> <div class="paragraph"> <p><strong>Einfache synchrone Operationen</strong>: Lesen eines Schlüssels im localStorage (sehr schnelle Operation) und Ändern eines DOM-Attributs (native Browser-Operation).</p> </div> <div class="paragraph"> <p><strong>Keine Abhängigkeit</strong>Kein Framework, keine Bibliothek, nur reines JavaScript. Keine Startzeit, kein Parsing von Abhängigkeiten.</p> </div> <div class="paragraph"> <p><strong>einmalige Ausführung</strong>: Dieses Skript wird beim Laden nur einmal ausgeführt. Keine Event-Listener, keine Schleifen, keine komplexen Berechnungen.</p> </div> <div class="paragraph"> <p>In der Praxis läuft dieses Skript auf moderner Hardware in weniger als einer Millisekunde aus – eine nicht wahrnehmbare Zeit, die keinerlei Einfluss auf die Ladeleistung der Seite hat.</p> </div> </div> <div class="sect2"> <h3 id="_optimale_platzierung_im_head">Optimale Platzierung im `&lt;head&gt;</h3> <div class="paragraph"> <p>Die Reihenfolge der Elemente im`&lt;head&gt;`ist wichtig. Hier ist die empfohlene Reihenfolge:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;head&gt; &lt;!-- 1. Métadonnées critiques --&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;!-- 2. Notre script de pré-chargement (IMMÉDIATEMENT après les meta) --&gt; &lt;script&gt; (function() { /* notre code */ })(); &lt;/script&gt; &lt;!-- 3. Titre de la page --&gt; &lt;title&gt;Mon Site&lt;/title&gt; &lt;!-- 4. Feuilles de style --&gt; &lt;link rel="stylesheet" href="styles.css"&gt; &lt;!-- 5. Autres ressources (fonts, favicons, etc.) --&gt; &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt; &lt;link rel="icon" href="favicon.ico"&gt; &lt;!-- 6. Autres scripts avec defer ou async --&gt; &lt;script src="app.js" defer&gt;&lt;/script&gt; &lt;/head&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Diese Reihenfolge garantiert, dass :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Der Zeichensatz wird vor jeder Textverarbeitung definiert.</p> </li> <li> <p>Unser Skript wird vor dem Laden des CSS ausgeführt.</p> </li> <li> <p>Die CSS werden anschließend geladen und wenden das richtige Thema direkt an</p> </li> <li> <p>Die anderen nicht kritischen Ressourcen werden zuletzt geladen.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_3_die_macht_der_css_attributselektoren">Schritt 3: Die Macht der CSS-Attributselektoren</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_das_theme_system_von_bootstrap_5">Das Theme-System von Bootstrap 5</h3> <div class="paragraph"> <p>Bootstrap 5 hat ein elegantes System zur Themenverwaltung eingeführt, das auf CSS-custom-properties (CSS-Variablen) und Attributselektoren basiert. Dieses System nutzt das Attribut`data-bs-theme`auf dem Element`&lt;html&gt;`um festzulegen, welchen Satz von Farbvariablen anzuwenden.</p> </div> <div class="paragraph"> <p>Die Schönheit dieses Systems liegt in seiner Einfachheit: Anstatt unterschiedliche Stylesheets zu laden oder Klassen auf Tausenden von Elementen umzuschalten, ändern wir einfach ein Attribut auf einem einzigen Element, und das CSS erledigt den Rest dank Kaskade.</p> </div> </div> <div class="sect2"> <h3 id="_css_struktur_für_ein_themensystem">CSS-Struktur für ein Themensystem</h3> <div class="paragraph"> <p>Hier ist eine vollständige CSS-Struktur zur Implementierung eines robusten Themensystems:</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> Effektives Logging in den funktionalen Tests von Gradle-Plugins 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="#_einleitung">Einleitung</a></li> <li><a href="#_das_problem_abhängigkeit_vom_gradlerunner">Das Problem: Abhängigkeit vom GradleRunner</a> <ul class="sectlevel2"> <li><a href="#_kontext_der_plugin_entwicklung">Kontext der Plugin-Entwicklung</a></li> <li><a href="#_das_logging_dilemma">Das Logging-Dilemma</a></li> <li><a href="#_die_falschen_guten_ideen">Die falschen guten Ideen</a></li> </ul> </li> <li><a href="#_die_lösung_unabhängiger_logger">Die Lösung: Unabhängiger Logger</a> <ul class="sectlevel2"> <li><a href="#_empfohlene_architektur">Empfohlene Architektur</a></li> <li><a href="#_ausführungsfluss">Ausführungsfluss</a></li> </ul> </li> <li><a href="#_vollständige_implementierung">Vollständige Implementierung</a> <ul class="sectlevel2"> <li><a href="#_gradle_abhängigkeiten">Gradle-Abhängigkeiten</a></li> <li><a href="#_logback_konfiguration">Logback-Konfiguration</a></li> <li><a href="#_vollständige_testklasse">Vollständige Testklasse</a></li> </ul> </li> <li><a href="#_schema_des_mehrstufigen_loggings">Schema des mehrstufigen Loggings</a></li> <li><a href="#_gute_praktiken">Gute Praktiken</a> <ul class="sectlevel2"> <li><a href="#_empfohlene_logging_struktur">Empfohlene Logging-Struktur</a></li> <li><a href="#_visuelle_symbole_für_die_lesbarkeit">Visuelle Symbole für die Lesbarkeit</a></li> <li><a href="#_extraktion_von_informationen_aus_der_ausgabe">Extraktion von Informationen aus der Ausgabe</a></li> </ul> </li> <li><a href="#_vergleich_vornach">Vergleich Vor/Nach</a> <ul class="sectlevel2"> <li><a href="#_vorher_problematischer_ansatz">Vorher: Problematischer Ansatz</a></li> <li><a href="#_nach_robustes_vorgehen">Nach: Robustes Vorgehen</a></li> </ul> </li> <li><a href="#_zusammenfassendes_diagramm">Zusammenfassendes Diagramm</a></li> <li><a href="#_fallen_zu_vermeiden">Fallen zu vermeiden</a> <ul class="sectlevel2"> <li><a href="#_falle_nr_1_vergessen_forwardoutput">�❌ Falle Nr. 1 : Vergessen `.forwardOutput()</a></li> <li><a href="#_falle_nr_2_nicht_initialisierter_logger">❌ Falle Nr. 2: Nicht initialisierter Logger</a></li> <li><a href="#_falle_nr_3_exzessives_logging">❌ Falle Nr. 3: Exzessives Logging</a></li> </ul> </li> <li><a href="#_ergebnisse_und_kennzahlen">Ergebnisse und Kennzahlen</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_ressourcen">Ressourcen</a></li> <li><a href="#_weitergehen">Weitergehen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bei der Entwicklung eines Gradle-Plugins sind Funktionaltests essentiell, um das Verhalten des Plugins in einer echten Gradle-Umgebung zu validieren. Allerdings stellt sich schnell eine entscheidende Frage:<strong>Wie kann man ein effektives Logging-System einrichten, ohne problematische Abhängigkeiten zu <code>GradleRunner</code> zu schaffen?</strong></p> </div> <div class="paragraph"> <p>In diesem Artikel werden wir untersuchen:</p> </div> <div class="ulist"> <ul> <li> <p>Die Problematik des Loggings in den funktionellen Gradle-Tests</p> </li> <li> <p>Die Architektur einer robusten Lösung mit SLF4J und Logback</p> </li> <li> <p>Die vollständige Implementierung mit konkreten Beispielen</p> </li> <li> <p>Gute Praktiken und zu vermeidende Fallen</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_abhängigkeit_vom_gradlerunner">Das Problem: Abhängigkeit vom GradleRunner</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kontext_der_plugin_entwicklung">Kontext der Plugin-Entwicklung</h3> <div class="paragraph"> <p>Bei der Entwicklung eines Gradle-Plugins verwendet man in der Regel das`GradleRunner`du <em>Gradle TestKit</em> zum Ausführen von Test-Builds :</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="_das_logging_dilemma">Das Logging-Dilemma</h3> <div class="paragraph"> <p>Das Hauptproblem lautet wie folgt:<strong>Logging darf nicht von einem Objekt abhängen, von dessen Initialisierung man sich nicht sicher ist.</strong>.</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-519ec07b925616f1ea8bc2eb29accb0e.png" alt="Diagram" width="458" height="262"> </div> </div> </div> <div class="sect2"> <h3 id="_die_falschen_guten_ideen">Die falschen guten Ideen</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>Machen Sie das NICHT:</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="_die_lösung_unabhängiger_logger">Die Lösung: Unabhängiger Logger</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_empfohlene_architektur">Empfohlene Architektur</h3> <div class="paragraph"> <p>Die Lösung besteht darin, einen Logger zu verwenden.<strong>vollständig unabhängig</strong> du <code>GradleRunner</code>, initialisiert auf Testklassenebene.</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-7a555e83eee685446b459050a7f54230.png" alt="Diagram" width="601" height="448"> </div> </div> </div> <div class="sect2"> <h3 id="_ausführungsfluss">Ausführungsfluss</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-2339fb55a46b486b9fd88032a4fc859e.png" alt="Diagram" width="714" height="686"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_vollständige_implementierung">Vollständige Implementierung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_gradle_abhängigkeiten">Gradle-Abhängigkeiten</h3> <div class="paragraph"> <p>Fügen Sie die erforderlichen Abhängigkeiten in Ihrem`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_konfiguration">Logback-Konfiguration</h3> <div class="paragraph"> <p>Erstellen Sie die Datei`src/test/resources/logback-test.xml`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;configuration&gt; &lt;!-- Appender console avec format lisible --&gt; &lt;appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"&gt; &lt;encoder&gt; &lt;pattern&gt;%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n&lt;/pattern&gt; &lt;/encoder&gt; &lt;/appender&gt; &lt;!-- Appender fichier pour conservation --&gt; &lt;appender name="FILE" class="ch.qos.logback.core.FileAppender"&gt; &lt;file&gt;build/test-results/functional-tests.log&lt;/file&gt; &lt;encoder&gt; &lt;pattern&gt;%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n&lt;/pattern&gt; &lt;/encoder&gt; &lt;/appender&gt; &lt;!-- Logger pour vos tests --&gt; &lt;logger name="com.cheroliv.bakery" level="DEBUG"/&gt; &lt;!-- Réduire le bruit de Gradle --&gt; &lt;logger name="org.gradle" level="WARN"/&gt; &lt;!-- Configuration racine --&gt; &lt;root level="INFO"&gt; &lt;appender-ref ref="STDOUT"/&gt; &lt;appender-ref ref="FILE"/&gt; &lt;/root&gt; &lt;/configuration&gt;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_vollständige_testklasse">Vollständige Testklasse</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 -&gt; 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 -&gt; logger.info(" $line") // Analyse spécifique par type de ligne when { line.contains("Project:") -&gt; { val projectName = line.substringAfter("Project:").trim() logger.debug(" → Nom du projet extrait: '$projectName'") } line.contains("Dependencies count:") -&gt; { 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="_schema_des_mehrstufigen_loggings">Schema des mehrstufigen Loggings</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-eed6bc78790bcf8a1acf45e2a1bea9a0.png" alt="Diagram" width="314" height="911"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gute_praktiken">Gute Praktiken</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_empfohlene_logging_struktur">Empfohlene Logging-Struktur</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="_visuelle_symbole_für_die_lesbarkeit">Visuelle Symbole für die Lesbarkeit</h3> <div class="paragraph"> <p>Verwenden Sie Unicode-Symbole, um die Lesbarkeit der Logs zu verbessern :</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="_extraktion_von_informationen_aus_der_ausgabe">Extraktion von Informationen aus der Ausgabe</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="_vergleich_vornach">Vergleich Vor/Nach</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_vorher_problematischer_ansatz">Vorher: Problematischer Ansatz</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="_nach_robustes_vorgehen">Nach: Robustes Vorgehen</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="_zusammenfassendes_diagramm">Zusammenfassendes Diagramm</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 9) ] @startuml ... ... ( skipping 129 lines ) ... } skinparam StereotypeI { BackgroundColor white BorderColor black } skinparam StereotypeN { BackgroundColor white BorderColor black } skinparam UseCaseStereoType { FontColor black FontName Verdana } skinparam backgroundColor #FEFEFE title Vollständiger Logging-Fluss in den Funktionstests actor "Entwickler" as dev participant "JUnit" as junit participant "TestClass" as test participant "Logger ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml !theme plain skinparam backgroundColor #FEFEFE title Vollständiger Logging-Fluss in den Funktionstests actor "Entwickler" as dev participant "JUnit" as junit participant "TestClass" as test participant "Logger (SLF4J)" as logger participant "Logback" as logback participant "GradleRunner" as runner participant "Konsole/Datei" as output dev -&gt; junit : lance les tests activate junit junit -&gt; test : charge la classe activate test test -&gt; logger : initialize (companion) activate logger logger -&gt; logback : configure activate logback logback --&gt; logger : ready deactivate logback logger --&gt; test : ✓ deactivate logger == Phase de Setup == junit -&gt; test : @BeforeAll test -&gt; logger : info("Initialisierung") logger -&gt; output : [INFO] Initialisation junit -&gt; test : @BeforeEach test -&gt; logger : debug("Einrichtung Test") logger -&gt; output : [DEBUG] Setup test == Phase de Test == junit -&gt; test : @Test test -&gt; logger : info("TEST: Starten") logger -&gt; output : [INFO] TEST: Starting test -&gt; runner : create() activate runner test -&gt; runner : .forwardOutput() test -&gt; runner : .build() runner -&gt; runner : execute Gradle runner --&gt; test : BuildResult + output text deactivate runner test -&gt; logger : debug("Ausgabe analysieren") logger -&gt; output : [DEBUG] Analyzing output test -&gt; test : assertions test -&gt; logger : info("✓ Test bestanden") logger -&gt; output : [INFO] ✓ Test passed == Phase de Cleanup == junit -&gt; test : @AfterEach test -&gt; logger : debug("Bereinigung") logger -&gt; output : [DEBUG] Cleanup junit -&gt; test : @AfterAll test -&gt; logger : info("Ende der Tests") logger -&gt; output : [INFO] Fin des tests test --&gt; junit : ✓ all tests passed deactivate test deactivate junit dev &lt;-- junit : rapport de tests @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fallen_zu_vermeiden">Fallen zu vermeiden</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_falle_nr_1_vergessen_forwardoutput">�❌ Falle Nr. 1 : Vergessen `.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="_falle_nr_2_nicht_initialisierter_logger">❌ Falle Nr. 2: Nicht initialisierter Logger</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="_falle_nr_3_exzessives_logging">❌ Falle Nr. 3: Exzessives Logging</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="_ergebnisse_und_kennzahlen">Ergebnisse und Kennzahlen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mit diesem Ansatz erhalten Sie:</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">metrisch</th> <th class="tableblock halign-left valign-top">Vor</th> <th class="tableblock halign-left valign-top">Nach</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Codezeilen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Empty)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~80 Zeilen (+60%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Debug-Zeit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~30 Min</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~5 Min (-83%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Erkannte Fehler</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Grundlegend</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">detailliert</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Wartung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">schwierig</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Einfach</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Unabhängigkeit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">�❌ gekoppelt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Unabhängig</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Implementierung eines robusten Logging-Systems in den funktionalen Tests von Gradle-Plugins beruht auf einem einfachen Prinzip:<strong>die Unabhängigkeit</strong>.</p> </div> <div class="paragraph"> <p>Zu beachtende Punkte:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>unabhängiger Logger</strong>Initialisiert in einem`companion object`</p> </li> <li> <p><strong>SLF4J + Logback</strong>: erprobter und konfigurierbarer Stack</p> </li> <li> <p>**python</p> </li> </ol> </div> <div class="paragraph"> <p>s = input() print(s, end='')**: Erfassen der Gradle-Ausgabe</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Strukturiertes Logging</strong>: INFO für die Schritte, DEBUG für die Details</p> </li> <li> <p><strong>Ausgabeanalyse</strong>: Extraktion von Informationen seit`result.output`</p> </li> </ol> </div> <div class="paragraph"> <p>Dieser Ansatz gewährleistet Tests<strong>wartbare</strong>, <strong>debuggbar</strong> et <strong>robuste</strong>, bei Einhaltung solider Gestaltungsprinzipien.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressourcen">Ressourcen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/test_kit.html">Gradle TestKit-Dokumentation</a></p> </li> <li> <p><a href="https://www.slf4j.org/manual.html">SLF4J Handbuch</a></p> </li> <li> <p><a href="https://logback.qos.ch/manual/configuration.html">Logback-Konfiguration</a></p> </li> <li> <p><a href="https://github.com/gradle/gradle/tree/master/subprojects/test-kit">Gradle TestKit-Quellcode</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_weitergehen">Weitergehen</h2> <div class="sectionbody"> <div class="paragraph"> <p>In einem kommenden Artikel werden wir erkunden:</p> </div> <div class="ulist"> <ul> <li> <p>Kontinuierliche Integration mit strukturiertem Logging</p> </li> <li> <p>HTML-Testberichte mit integrierten Protokollen</p> </li> <li> <p>Erweitertes Debugging mit JVM-Attach</p> </li> <li> <p>Die Performance und Optimierung des Loggings</p> </li> </ul> </div> <div class="paragraph"> <p><em>Dieser Artikel ist Teil der Serie "Entwicklung von Gradle-Plugins" auf meinem technischen Blog.</em></p> </div> </div> </div> Farbig gefärbte Quadrate in AsciiDoc anzeigen: Praktischer Leitfaden 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="#_einleitung">Einleitung</a></li> <li><a href="#_die_problematik">Die Problematik</a> <ul class="sectlevel2"> <li><a href="#_anwendungskontext">Anwendungskontext</a></li> <li><a href="#_mögliche_ansätze">Mögliche Ansätze</a> <ul class="sectlevel3"> <li><a href="#_option_1_unicode_zeichen">Option 1 : Unicode-Zeichen</a></li> <li><a href="#_option_2_externe_bilder">Option 2: Externe Bilder</a></li> <li><a href="#_option_3_benutzerdefinierte_css_rollen">Option 3: Benutzerdefinierte CSS-Rollen</a></li> <li><a href="#_option_4_html_injection_gewählte_lösung">Option 4: HTML-Injection (gewählte Lösung)</a></li> </ul> </li> </ul> </li> <li><a href="#_die_lösung_html_injektion_mit">Die Lösung: HTML-Injektion mit </a> <ul class="sectlevel2"> <li><a href="#_funktionsprinzip">Funktionsprinzip</a></li> <li><a href="#_implementierung">Implementierung</a> <ul class="sectlevel3"> <li><a href="#_erklärung_der_css_eigenschaften">Erklärung der CSS-Eigenschaften</a></li> </ul> </li> <li><a href="#_vollständiges_beispiel">Vollständiges Beispiel</a></li> </ul> </li> <li><a href="#_optimierungen_und_bewährte_praktiken">Optimierungen und bewährte Praktiken</a> <ul class="sectlevel2"> <li><a href="#_helle_farben_verwalten">Helle Farben verwalten</a></li> <li><a href="#_die_größe_der_quadrate_anpassen">Die Größe der Quadrate anpassen</a></li> <li><a href="#_varianten_erstellen">Varianten erstellen</a> <ul class="sectlevel3"> <li><a href="#_farbiger_kreis">farbiger Kreis</a></li> <li><a href="#_quadrat_mit_farbigem_rand">Quadrat mit farbigem Rand</a></li> </ul> </li> </ul> </li> <li><a href="#_architektur_der_lösung">Architektur der Lösung</a></li> <li><a href="#_vorteile_und_grenzen">Vorteile und Grenzen</a> <ul class="sectlevel2"> <li><a href="#_vorteile">Vorteile</a></li> <li><a href="#_einschränkungen">Einschränkungen</a></li> <li><a href="#_verbesserung_der_zugänglichkeit">Verbesserung der Zugänglichkeit</a></li> </ul> </li> <li><a href="#_konkretes_beispiel_dokumentation_von_themen">Konkretes Beispiel: Dokumentation von Themen</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_ressourcen">Ressourcen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bei der Erstellung technischer Dokumentation, beispielsweise für Stilhandbücher oder UI-Spezifikationen, ist es häufig erforderlich, Farbpaletten anzuzeigen. AsciiDoc, obwohl sehr mächtig für Dokumentation, bietet keine native Syntax zur Anzeige von Farbmustern. Dieser Artikel untersucht das Problem und schlägt eine elegante Lösung auf Basis von HTML-Injection vor.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_problematik">Die Problematik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_anwendungskontext">Anwendungskontext</h3> <div class="paragraph"> <p>Stellen Sie sich vor, Sie dokumentieren die CSS-Variablen eines Webanwendungs-Themas. Sie benötigen :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Liste die hexadezimalen Farbcodes</p> </li> <li> <p>Einen visuellen Überblick über jede Farbe anzeigen</p> </li> <li> <p>Maintenir la lisibilité du document source</p> </li> <li> <p>Sicherstellen der Kompatibilität mit statischen Site-Generatoren wie JBake</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="use-case-diagram.svg" alt="use case diagram" width="1063" height="212"> </div> </div> </div> <div class="sect2"> <h3 id="_mögliche_ansätze">Mögliche Ansätze</h3> <div class="paragraph"> <p>Es gibt mehrere Lösungen, die in Betracht gezogen werden können, um Farben in einem AsciiDoc-Dokument anzuzeigen:</p> </div> <div class="imageblock"> <div class="content"> <img src="component-diagram.svg" alt="component diagram" width="1784" height="5688"> </div> </div> <div class="sect3"> <h4 id="_option_1_unicode_zeichen">Option 1 : Unicode-Zeichen</h4> <div class="paragraph"> <p>Die Verwendung von Unicode-Zeichen wie`&#9632;`(■) ist einfach aber begrenzt :</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>Einschränkungen</strong>: Keine Kontrolle über die Farbe, hängt von der Systemschriftart ab.</p> </div> </div> <div class="sect3"> <h4 id="_option_2_externe_bilder">Option 2: Externe Bilder</h4> <div class="paragraph"> <p>Erstellen Sie PNG- oder SVG-Bilder für jede Farbe:</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>Limitations</strong> : Schwerwartung, Vermehrung der Dateien, keine automatische Synchronisation.</p> </div> </div> <div class="sect3"> <h4 id="_option_3_benutzerdefinierte_css_rollen">Option 3: Benutzerdefinierte CSS-Rollen</h4> <div class="paragraph"> <p>Definiere CSS-Klassen und wende sie über AsciiDoc-Rollen an:</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>Limitations</strong> : Erfordert ein externes Stylesheet, vorherige Definition aller möglichen Farben.</p> </div> </div> <div class="sect3"> <h4 id="_option_4_html_injection_gewählte_lösung">Option 4: HTML-Injection (gewählte Lösung)</h4> <div class="paragraph"> <p>Die Makro verwenden``Um HTML mit Inline-Stilen einzufügen :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[&lt;span style="display:inline-block;width:1em;height:1em; background:#7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-color: #7952b3 (violet Bootstrap)</code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_html_injektion_mit">Die Lösung: HTML-Injektion mit </h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_funktionsprinzip">Funktionsprinzip</h3> <div class="paragraph"> <p>Das Makro``d&#8217;AsciiDoc erlaubt das Einfügen von rohem Inhalt, der nicht vom AsciiDoc-Prozessor interpretiert wird. Dadurch können wir direkt HTML mit Inline-CSS-Stilen einfügen.</p> </div> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 3) ] @startuml participant "Dokument\nAsciiDoc" as doc participant "Prozessor ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml participant "Dokument\nAsciiDoc" as doc participant "Prozessor AsciiDoc" as processor participant "pass:[] Makro" as pass participant "HTML endgültig" as html doc -&gt; processor : Analyse document processor -&gt; pass : Détecte pass:[] pass -&gt; processor : Retourne HTML brut processor -&gt; html : Insère sans transformation html -&gt; html : Navigateur applique styles @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_implementierung">Implementierung</h3> <div class="paragraph"> <p>Hier ist die HTML-Struktur, die eingefügt werden soll:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;span style="display:inline-block; width:1em; height:1em; background:#7952b3; vertical-align:middle; margin-right:0.5em"&gt; &lt;/span&gt;</code></pre> </div> </div> <div class="sect3"> <h4 id="_erklärung_der_css_eigenschaften">Erklärung der CSS-Eigenschaften</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">Eigentum</th> <th class="tableblock halign-left valign-top">Funktion</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">Ermöglicht das Definieren von width/height, während es im inline-Fluss bleibt</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">Quadratgröße relativ zur Schriftgröße (responsive)</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">Die anzuzeigende Farbe (variabel je nach Ihren Bedürfnissen)</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">Richte das Quadrat mit dem angrenzenden Text aus</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">Abstand zwischen dem Quadrat und dem Text</p></td> </tr> </tbody> </table> </div> </div> <div class="sect2"> <h3 id="_vollständiges_beispiel">Vollständiges Beispiel</h3> <div class="paragraph"> <p>Hier ist ein Beispiel, das eine Themenpalette dokumentiert :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">== Thème Clair * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --text-primary: `#212529` (noir très foncé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-color: `#7952b3` (violet Bootstrap) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-hover: `#61428f` (violet plus foncé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --card-bg: `#ffffff` (blanc)</code></pre> </div> </div> <div class="paragraph"> <p>Wer erzeugt die folgende Ausgabe :</p> </div> <div class="paragraph"> <p><strong>Helles Thema</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`(weiß gebrochen)</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`(sehr dunkles Schwarz)</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`(violet Bootstrap)</p> </li> <li> <p>import sys</p> </li> </ul> </div> <div class="paragraph"> <p>sys.stdout.write(sys.stdin.read())<code>#61428f</code>(dunkleres Violett)</p> </div> <div class="ulist"> <ul> <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`(weiß)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_optimierungen_und_bewährte_praktiken">Optimierungen und bewährte Praktiken</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_helle_farben_verwalten">Helle Farben verwalten</h3> <div class="paragraph"> <p>Für sehr helle Farben (weiß, sehr helles Grau) füge einen Rahmen hinzu, damit sie auf weißem Hintergrund sichtbar sind:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;span style="display:inline-block;width:1em;height:1em; background:#ffffff;border:1px solid #ccc; vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Die graue Grenze`border:1px solid #ccc`) ermöglicht das Begrenzen des weißen Quadrats auf einem weißen Hintergrund.</p> </div> </div> <div class="sect2"> <h3 id="_die_größe_der_quadrate_anpassen">Die Größe der Quadrate anpassen</h3> <div class="paragraph"> <p>Sie können die Größe der Quadrate nach Ihren Bedürfnissen anpassen :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[&lt;span style="display:inline-block;width:1.5em;height:1.5em;background:#7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] Grand carré * pass:[&lt;span style="display:inline-block;width:0.8em;height:0.8em;background:#7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] Petit carré</code></pre> </div> </div> <div class="paragraph"> <p>Die Verwendung der Einheit`em`garantiert, dass die Quadrate sich an die Schriftgröße anpassen.</p> </div> </div> <div class="sect2"> <h3 id="_varianten_erstellen">Varianten erstellen</h3> <div class="paragraph"> <p>Für spezielle Anforderungen können Sie verschiedene Formen erstellen:</p> </div> <div class="sect3"> <h4 id="_farbiger_kreis">farbiger Kreis</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#7952b3;border-radius:50%;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] Cercle violet</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_quadrat_mit_farbigem_rand">Quadrat mit farbigem Rand</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:3px solid #7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] Bordure violette</code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architektur_der_lösung">Architektur der Lösung</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="architecture-diagram.svg" alt="architecture diagram" width="483" height="412"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_vorteile_und_grenzen">Vorteile und Grenzen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_vorteile">Vorteile</h3> <div class="ulist"> <ul> <li> <p>�✓ <strong>Autonomie</strong> : Keine Abhängigkeit von externen Dateien</p> </li> <li> <p>✓ <strong>Portabilität</strong> : Funktioniert mit allen AsciiDoc-Prozessoren</p> </li> <li> <p>✓ <strong>Synchronisation</strong> : Der Farbcode ist direkt im HTML</p> </li> <li> <p>�✓ <strong>Flexibilität</strong> : Vollständige Personalisierung des Stils</p> </li> <li> <p>�✓ <strong>Wartung</strong> : Einfache Änderung des hexadezimalen Codes</p> </li> <li> <p>�✓ <strong>JBake-Kompatibilität</strong> : Funktioniert perfekt mit statischen Site-Generatoren</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_einschränkungen">Einschränkungen</h3> <div class="ulist"> <ul> <li> <p>✗ <strong>Ausführlichkeit</strong> : Wiederholender HTML-Code im AsciiDoc-Quellcode</p> </li> <li> <p>✗ <strong>Lisibilité source</strong> : Le document source est moins épuré</p> </li> <li> <p>�✗ <strong>Barrierefreiheit</strong> : Kein nativer Alternativtext (manuell hinzufügen)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_verbesserung_der_zugänglichkeit">Verbesserung der Zugänglichkeit</h3> <div class="paragraph"> <p>Um die Quadrate für Bildschirmlesegeräte zugänglich zu machen :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[&lt;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"&gt;&lt;/span&gt;] --accent-color: `#7952b3` (violet Bootstrap)</code></pre> </div> </div> <div class="paragraph"> <p>Die Attribute`role="img"` et `aria-label`Sie ermöglichen assistiven Technologien, visuelle Inhalte zu verstehen und zu beschreiben.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konkretes_beispiel_dokumentation_von_themen">Konkretes Beispiel: Dokumentation von Themen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist ein vollständiges Beispiel, das mehrere Themen dokumentiert :</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:[&lt;span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --text-primary: `#212529` (noir très foncé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-color: `#7952b3` (violet Bootstrap) == Thème Sombre (`[data-bs-theme="dark"]`) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --bg-primary: `#212529` (noir très foncé) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #999;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --text-primary: `#ffffff` (blanc) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#0d6efd;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-color: `#0d6efd` (bleu Bootstrap) == Thème Contraste Élevé (`[data-bs-theme="high-contrast"]`) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#000000;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --bg-primary: `#000000` (noir) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #000;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --text-primary: `#ffffff` (blanc) * pass:[&lt;span style="display:inline-block;width:1em;height:1em;background:#00ff00;vertical-align:middle;margin-right:0.5em"&gt;&lt;/span&gt;] --accent-color: `#00ff00` (vert vif)</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die HTML‑Injektion über das Makro``d&#8217;AsciiDoc bietet eine elegante und pragmatische Lösung zur Anzeige von Farbmustern in der technischen Dokumentation. Obwohl etwas umständlich, gewährleistet dieser Ansatz maximale Portabilität und vereinfachte Wartung.</p> </div> <div class="paragraph"> <p>Diese Technik erfordert keine externe Konfiguration, kein zusätzliches Stylesheet und funktioniert sofort mit JBake und allen Standard-AsciiDoc-Prozessoren.</p> </div> <div class="paragraph"> <p>Sobald du dein erstes farbiges Quadrat erstellt hast, musst du nur den HTML-Code kopieren und einfügen und den Hexadezimalcode ändern, um schnell eine vollständige Farbpalette zu erstellen.</p> </div> <div class="paragraph"> <p>Diese Technik kann auf andere Anwendungsfälle erweitert werden, die ein benutzerdefiniertes visuelles Rendering erfordern: Symbole, Abzeichen, einfache Diagramme oder jedes visuelle Element, das eine präzise Stilkontrolle erfordert.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ressourcen">Ressourcen</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-Dokumentation: Pass-Macro</a></p> </li> <li> <p><a href="https://jbake.org/docs/2.6.7/" target="_blank" rel="noopener">JBake Dokumentation</a></p> </li> <li> <p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank" rel="noopener">MDN: CSS-Farbwerte</a></p> </li> </ul> </div> <div class="paragraph"> <p><em>Artikel veröffentlicht am 2025-11-01</em></p> </div> </div> </div> Internationalisierung einer statischen JBake-Website mit Thymeleaf 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="#_einleitung">Einleitung</a> <ul class="sectlevel2"> <li><a href="#_use_case_diagramm_use_case">Use-Case-Diagramm (Use Case)</a></li> </ul> </li> <li><a href="#_architektur_der_internationalisierung">Architektur der Internationalisierung</a> <ul class="sectlevel2"> <li><a href="#_strukturdiagramm_dateiorganisation">Strukturdiagramm (Dateiorganisation)</a></li> <li><a href="#_warum_dieser_ansatz">Warum dieser Ansatz?</a></li> <li><a href="#_komponentendiagramm">Komponentendiagramm</a></li> </ul> </li> <li><a href="#_i18n_des_templatings_mit_thymeleaf">I18n des Templatings mit Thymeleaf</a> <ul class="sectlevel2"> <li><a href="#_struktur_der_nachrichtendateien">Struktur der Nachrichtendateien</a></li> <li><a href="#_inhalt_der_nachrichtendateien">Inhalt der Nachrichtendateien</a></li> <li><a href="#_verwendung_in_den_vorlagen">Verwendung in den Vorlagen</a></li> <li><a href="#_sequenzdiagramm_i18n_auflösung">Sequenzdiagramm - i18n-Auflösung</a></li> <li><a href="#_konfiguration_der_locale_in_jbake">Konfiguration der Locale in JBake</a></li> </ul> </li> <li><a href="#_i18n_der_artikel_organisation_nach_ordner">I18n der Artikel: Organisation nach Ordner</a> <ul class="sectlevel2"> <li><a href="#_flussdiagramm_flow_generierung">Flussdiagramm (Flow) - Generierung</a></li> <li><a href="#_ordnerstruktur">Ordnerstruktur</a></li> <li><a href="#_vorteile_dieses_ansatzes">Vorteile dieses Ansatzes</a></li> <li><a href="#_metadaten_der_artikel">Metadaten der Artikel</a></li> <li><a href="#_konfiguration_der_urls">Konfiguration der URLs</a></li> </ul> </li> <li><a href="#_vorlagen_für_die_mehrsprachige_anzeige">Vorlagen für die mehrsprachige Anzeige</a> <ul class="sectlevel2"> <li><a href="#_artikelvorlage_mit_sprachauswähler">Artikelvorlage mit Sprachauswähler</a></li> <li><a href="#_nach_sprache_gefilterter_index">Nach Sprache gefilterter Index</a></li> </ul> </li> <li><a href="#_navigation_zwischen_sprachen">Navigation zwischen Sprachen</a> <ul class="sectlevel2"> <li><a href="#_globale_sprachauswahl">Globale Sprachauswahl</a></li> <li><a href="#_flussdiagramm_benutzerlesen">Flussdiagramm - Benutzerlesen</a></li> <li><a href="#_css_stil_für_den_selektor">CSS-Stil für den Selektor</a></li> </ul> </li> <li><a href="#_rss_feed_nach_sprache">RSS-Feed nach Sprache</a></li> <li><a href="#_gute_praktiken_und_tipps">Gute Praktiken und Tipps</a> <ul class="sectlevel2"> <li><a href="#_1_konsistenz_der_artikel_ids">1. Konsistenz der Artikel-IDs</a></li> <li><a href="#_2_konsistente_daten">2. Konsistente Daten</a></li> <li><a href="#_3_mehrsprachige_tags">3. Mehrsprachige Tags</a></li> <li><a href="#_4_verwaltung_der_nicht_übersetzten_artikel">4. Verwaltung der nicht übersetzten Artikel</a></li> <li><a href="#_5_mehrsprachige_sitemap">5. Mehrsprachige Sitemap</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a> <ul class="sectlevel2"> <li><a href="#_bereitstellungsdiagramm">Bereitstellungsdiagramm</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Internationalisierung (i18n) einer statischen Seite kann zunächst komplex erscheinen, doch JBake in Kombination mit Thymeleaf bietet elegante Lösungen für die Erstellung einer mehrsprachigen Website. In diesem Artikel zeige ich dir, wie ich die i18n auf meinem Blog implementiert habe, dabei sowohl das Templating als auch die Verwaltung von Artikeln in mehreren Sprachen abgedeckt habe.</p> </div> <div class="sect2"> <h3 id="_use_case_diagramm_use_case">Use-Case-Diagramm (Use Case)</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-8301d53f226e6fb48477a35c6ba15edb.png" alt="Diagram" width="758" height="466"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_architektur_der_internationalisierung">Architektur der Internationalisierung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unser Ansatz beruht auf zwei Säulen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Die i18n des Templatings</strong>: Verwendung der Thymeleaf-Nachrichtendateien für UI-Elemente</p> </li> <li> <p><strong>Die i18n des Inhalts</strong>Organisation der Artikel nach Sprache in einer dedizierten Ordnerstruktur</p> </li> </ol> </div> <div class="sect2"> <h3 id="_strukturdiagramm_dateiorganisation">Strukturdiagramm (Dateiorganisation)</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="_warum_dieser_ansatz">Warum dieser Ansatz?</h3> <div class="paragraph"> <p>Diese Trennung ermöglicht:</p> </div> <div class="ulist"> <ul> <li> <p>Eine Konsistenz in der Benutzeroberfläche unabhängig von der Sprache aufrechterhalten</p> </li> <li> <p>Den Inhalt und die Artikelübersetzungen unabhängig verwalten</p> </li> <li> <p>Erleichtern das Hinzufügen neuer Sprachen ohne umfangreiches Refactoring</p> </li> <li> <p>Ermögliche Artikel, die nur in bestimmten Sprachen verfügbar sind.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_komponentendiagramm">Komponentendiagramm</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-6bb2d442b7ce1137c6e71b10a92a4189.png" alt="Diagram" width="1771" height="477"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_i18n_des_templatings_mit_thymeleaf">I18n des Templatings mit Thymeleaf</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_der_nachrichtendateien">Struktur der Nachrichtendateien</h3> <div class="paragraph"> <p>Der erste Schritt besteht darin, die Eigenschaftendateien für jede unterstützte Sprache zu erstellen :</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="_inhalt_der_nachrichtendateien">Inhalt der Nachrichtendateien</h3> <div class="paragraph"> <p>Hier ist ein Beispiel einer Datei`messages_fr.properties`:</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>und sein englisches Äquivalent`messages_en.properties`:</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="_verwendung_in_den_vorlagen">Verwendung in den Vorlagen</h3> <div class="paragraph"> <p>In Ihren Thymeleaf-Vorlagen, verwenden Sie die Syntax`#{}`um auf die Nachrichten zuzugreifen :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;title th:text="#{site.title}"&gt;Mon Blog&lt;/title&gt; &lt;meta name="description" th:content="#{site.description}" /&gt; &lt;/head&gt; &lt;body&gt; &lt;nav&gt; &lt;a th:href="@{/}" th:text="#{nav.home}"&gt;Accueil&lt;/a&gt; &lt;a th:href="@{/blog/}" th:text="#{nav.blog}"&gt;Blog&lt;/a&gt; &lt;a th:href="@{/about.html}" th:text="#{nav.about}"&gt;À propos&lt;/a&gt; &lt;/nav&gt; &lt;footer&gt; &lt;p th:text="#{footer.copyright}"&gt;Copyright&lt;/p&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_sequenzdiagramm_i18n_auflösung">Sequenzdiagramm - i18n-Auflösung</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 4) ] @startuml actor Auteur participant JBake participant "AsciiDoc ^^^^^ Syntax Error? (Assumed diagram type: sequence) @startuml actor Auteur participant JBake participant "AsciiDoc Parser" as parser participant "Thymeleaf Motor" as thymeleaf participant "I18n\nResolver" as i18n database "Nachrichten_*.properties" as messages Auteur -&gt; JBake: jbake -b activate JBake JBake -&gt; parser: Lire article.fr.adoc activate parser parser --&gt; JBake: Contenu + métadonnées\n(lang=fr, article-id=xyz) deactivate parser JBake -&gt; parser: Lire article.en.adoc activate parser parser --&gt; JBake: Contenu + métadonnées\n(lang=en, article-id=xyz) deactivate parser JBake -&gt; thymeleaf: Générer page FR activate thymeleaf thymeleaf -&gt; i18n: Résoudre #{nav.home} activate i18n i18n -&gt; messages: Lire messages_fr.properties messages --&gt; i18n: "Startseite" i18n --&gt; thymeleaf: "Startseite" deactivate i18n thymeleaf -&gt; JBake: Rechercher traductions\n(article-id=xyz, lang!=fr) JBake --&gt; thymeleaf: article.en.html trouvé thymeleaf --&gt; JBake: /fr/blog/article.html deactivate thymeleaf JBake -&gt; thymeleaf: Générer page EN activate thymeleaf thymeleaf -&gt; i18n: Résoudre #{nav.home} activate i18n i18n -&gt; messages: Lire messages_en.properties messages --&gt; i18n: "Startseite" i18n --&gt; thymeleaf: "Startseite" deactivate i18n thymeleaf -&gt; JBake: Rechercher traductions\n(article-id=xyz, lang!=en) JBake --&gt; thymeleaf: article.fr.html trouvé thymeleaf --&gt; JBake: /en/blog/article.html deactivate thymeleaf JBake --&gt; Auteur: Site généré deactivate JBake @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_konfiguration_der_locale_in_jbake">Konfiguration der Locale in JBake</h3> <div class="paragraph"> <p>In Ihrer Datei`jbake.properties`, legen Sie das Gebietsschema fest :</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_der_artikel_organisation_nach_ordner">I18n der Artikel: Organisation nach Ordner</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_flussdiagramm_flow_generierung">Flussdiagramm (Flow) - Generierung</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-45d82c645f6b4bf89af063822ef83f77.png" alt="Diagram" width="285" height="1034"> </div> </div> </div> <div class="sect2"> <h3 id="_ordnerstruktur">Ordnerstruktur</h3> <div class="paragraph"> <p>Anstatt Suffixe in den Dateinamen zu verwenden, habe ich mich für eine Organisation nach Ordnern entschieden, die mehr Klarheit und Wartbarkeit bietet:</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="_vorteile_dieses_ansatzes">Vorteile dieses Ansatzes</h3> <div class="paragraph"> <p>Diese Struktur bietet mehrere Vorteile:</p> </div> <div class="ulist"> <ul> <li> <p><strong>klare Trennung</strong>: jede Sprache hat ihren eigenen Raum</p> </li> <li> <p><strong>flexible Benennung</strong>: Die Dateien können je nach Sprache unterschiedliche Namen haben.</p> </li> <li> <p><strong>Skalierbarkeit</strong>: einfach eine neue Sprache hinzuzufügen</p> </li> <li> <p><strong>Natürliche Organisation</strong>: folgt der zeitlichen Logik von JBake</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_metadaten_der_artikel">Metadaten der Artikel</h3> <div class="paragraph"> <p>Jeder Artikel muss Metadaten enthalten, um die Verknüpfung zwischen Übersetzungen zu ermöglichen. Hier ist ein Beispiel:</p> </div> <div class="paragraph"> <p><strong>Französische Version</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>Englische Version</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="paragraph"> <p>HINWEIS: Das Attribut`:jbake-article-id:`es ist entscheidend: es ermöglicht, die verschiedenen Übersetzungen desselben Artikels zu verknüpfen.</p> </div> </div> <div class="sect2"> <h3 id="_konfiguration_der_urls">Konfiguration der URLs</h3> <div class="paragraph"> <p>in`jbake.properties`, konfigurieren Sie das URL-Muster, um die Sprache einzuschließen:</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>Dies erzeugt URLs des Typs:</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="_vorlagen_für_die_mehrsprachige_anzeige">Vorlagen für die mehrsprachige Anzeige</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_artikelvorlage_mit_sprachauswähler">Artikelvorlage mit Sprachauswähler</h3> <div class="paragraph"> <p>Erstellen Sie eine Vorlage`post.html`der die verfügbaren Übersetzungen anzeigt :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;title th:text="${content.title}"&gt;Article&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;article&gt; &lt;header&gt; &lt;h1 th:text="${content.title}"&gt;Titre&lt;/h1&gt; &lt;div class="article-meta"&gt; &lt;time th:text="${#dates.format(content.date, 'dd MMMM yyyy')}" th:attr="datetime=${#dates.format(content.date, 'yyyy-MM-dd')}"&gt; Date &lt;/time&gt; &lt;!-- Sélecteur de traductions --&gt; &lt;div class="translations" th:if="${content['article-id']}"&gt; &lt;span th:text="#{article.also.available}"&gt;Aussi disponible en :&lt;/span&gt; &lt;ul class="language-list"&gt; &lt;li th:each="post : ${published_posts}" th:if="${post['article-id'] == content['article-id'] and post.lang != content.lang}"&gt; &lt;a th:href="${post.uri}" th:text="${post.lang.toUpperCase()}"&gt; LANG &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;div class="content" th:utext="${content.body}"&gt; Contenu de l'article &lt;/div&gt; &lt;footer class="article-footer"&gt; &lt;div class="tags" th:if="${content.tags}"&gt; &lt;span th:text="#{article.tags}"&gt;Étiquettes :&lt;/span&gt; &lt;span th:each="tag : ${content.tags}"&gt; &lt;a th:href="@{/tags/{tag}.html(tag=${tag})}" th:text="${tag}"&gt;tag&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; &lt;/footer&gt; &lt;/article&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_nach_sprache_gefilterter_index">Nach Sprache gefilterter Index</h3> <div class="paragraph"> <p>Erstellen Sie Indexvorlagen für jede Sprache:</p> </div> <div class="paragraph"> <p><strong>index.html</strong>(französischer Index) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;title th:text="#{site.title}"&gt;Mon Blog&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;main&gt; &lt;h1 th:text="#{nav.blog}"&gt;Blog&lt;/h1&gt; &lt;div class="articles-list"&gt; &lt;article th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"&gt; &lt;h2&gt; &lt;a th:href="${post.uri}" th:text="${post.title}"&gt;Titre&lt;/a&gt; &lt;/h2&gt; &lt;time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"&gt; Date &lt;/time&gt; &lt;p th:text="${post.description}"&gt;Description&lt;/p&gt; &lt;a th:href="${post.uri}" th:text="#{article.readmore}"&gt; Lire la suite &lt;/a&gt; &lt;/article&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><strong>index_en.html</strong>(englischer Index) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;title th:text="#{site.title}"&gt;My Blog&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;main&gt; &lt;h1 th:text="#{nav.blog}"&gt;Blog&lt;/h1&gt; &lt;div class="articles-list"&gt; &lt;article th:each="post : ${published_posts}" th:if="${post.lang == 'en'}"&gt; &lt;h2&gt; &lt;a th:href="${post.uri}" th:text="${post.title}"&gt;Title&lt;/a&gt; &lt;/h2&gt; &lt;time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"&gt; Date &lt;/time&gt; &lt;p th:text="${post.description}"&gt;Description&lt;/p&gt; &lt;a th:href="${post.uri}" th:text="#{article.readmore}"&gt; Read more &lt;/a&gt; &lt;/article&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_navigation_zwischen_sprachen">Navigation zwischen Sprachen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_globale_sprachauswahl">Globale Sprachauswahl</h3> </div> <div class="sect2"> <h3 id="_flussdiagramm_benutzerlesen">Flussdiagramm - Benutzerlesen</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>Fügen Sie Ihrem Haupt-Template einen Sprachauswähler hinzu:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;nav class="language-switcher"&gt; &lt;a href="/index.html" th:classappend="${content.lang == 'fr'} ? 'active'" title="Français"&gt; 🇫🇷 FR &lt;/a&gt; &lt;a href="/en/index.html" th:classappend="${content.lang == 'en'} ? 'active'" title="English"&gt; 🇬🇧 EN &lt;/a&gt; &lt;/nav&gt;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_css_stil_für_den_selektor">CSS-Stil für den Selektor</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_feed_nach_sprache">RSS-Feed nach Sprache</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um getrennte RSS-Feeds nach Sprache zu haben, erstelle separate Vorlagen:</p> </div> <div class="paragraph"> <p><strong>feed.xml</strong>(französischer Fluss) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;rss version="2.0" xmlns:th="http://www.thymeleaf.org"&gt; &lt;channel&gt; &lt;title th:text="#{site.title}"&gt;Mon Blog&lt;/title&gt; &lt;link th:text="${config.site_host}"&gt;http://example.com&lt;/link&gt; &lt;description th:text="#{site.description}"&gt;Description&lt;/description&gt; &lt;language&gt;fr&lt;/language&gt; &lt;item th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"&gt; &lt;title th:text="${post.title}"&gt;Titre&lt;/title&gt; &lt;link th:text="${config.site_host + post.uri}"&gt;Lien&lt;/link&gt; &lt;pubDate th:text="${#dates.format(post.date, 'EEE, dd MMM yyyy HH:mm:ss Z')}"&gt; Date &lt;/pubDate&gt; &lt;description th:text="${post.description}"&gt;Description&lt;/description&gt; &lt;/item&gt; &lt;/channel&gt; &lt;/rss&gt;</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gute_praktiken_und_tipps">Gute Praktiken und Tipps</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_1_konsistenz_der_artikel_ids">1. Konsistenz der Artikel-IDs</h3> <div class="paragraph"> <p>Stellen Sie sicher, dass`:jbake-article-id:`ist für alle Übersetzungen eines Artikels identisch. Verwenden Sie ein einheitliches Format:</p> </div> <div class="ulist"> <ul> <li> <p>Bevorzugen Sie englische Bezeichner für Universalität</p> </li> <li> <p>Verwende Bindestriche, um die Wörter zu trennen</p> </li> <li> <p>Vermeiden Sie Sonderzeichen</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_2_konsistente_daten">2. Konsistente Daten</h3> <div class="paragraph"> <p>Alle Übersetzungen eines Artikels müssen das gleiche Veröffentlichungsdatum haben (<code>:jbake-date:</code>). Dies erleichtert das Sortieren und die chronologische Anzeige.</p> </div> </div> <div class="sect2"> <h3 id="_3_mehrsprachige_tags">3. Mehrsprachige Tags</h3> <div class="paragraph"> <p>Für die Tags, haben Sie zwei Optionen:</p> </div> <div class="paragraph"> <p><strong>Option 1: Universelle Tags auf Englisch</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 übersetzt mit Zuordnung</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_verwaltung_der_nicht_übersetzten_artikel">4. Verwaltung der nicht übersetzten Artikel</h3> <div class="paragraph"> <p>Es ist nicht verpflichtend, alle Artikel zu übersetzen. Wenn ein Artikel nur in einer Sprache existiert, erscheint er einfach nicht in den Auflistungen der anderen Sprache.</p> </div> </div> <div class="sect2"> <h3 id="_5_mehrsprachige_sitemap">5. Mehrsprachige Sitemap</h3> <div class="paragraph"> <p>Generieren Sie einen Sitemap, der alle Sprachen umfasst:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"&gt; &lt;url th:each="post : ${published_posts}"&gt; &lt;loc th:text="${config.site_host + post.uri}"&gt;URL&lt;/loc&gt; &lt;lastmod th:text="${#dates.format(post.date, 'yyyy-MM-dd')}"&gt;Date&lt;/lastmod&gt; &lt;!-- Liens alternatifs pour les traductions --&gt; &lt;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}" /&gt; &lt;/url&gt; &lt;/urlset&gt;</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Internationalisierung einer JBake-Site mit Thymeleaf ist ein robuster und wartbarer Ansatz. Durch die Trennung von i18n im Templating (über die Message-Dateien) und i18n im Inhalt (durch die Ordnerorganisation) erhalten Sie ein flexibles System, das sich leicht weiterentwickeln lässt.</p> </div> <div class="paragraph"> <p>Die wichtigsten zu beachtenden Punkte:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Thymeleaf-Nachrichtendateien</strong>für die Benutzeroberfläche</p> </li> <li> <p><strong>Ordnerbasierte Organisation</strong>(Jahr/Sprache) für die Artikel</p> </li> <li> <p><strong>Artikel-IDs</strong>um die Übersetzungen zu verlinken</p> </li> <li> <p><strong>dedizierte Vorlagen</strong>für jede Sprache</p> </li> <li> <p><strong>Explizite URLs</strong>inklusive des Sprachcodes</p> </li> </ul> </div> <div class="sect2"> <h3 id="_bereitstellungsdiagramm">Bereitstellungsdiagramm</h3> <div class="listingblock"> <div class="content"> <pre>Failed to generate image: PlantUML preprocessing failed: [From &lt;input&gt; (line 14) ] @startuml node "Entwicklungsmaschine" { artifact "Quellen" { folder "Inhalt/" folder "templates/" folder "assets/" } component "JBake CLI" as jbake Sources --&gt; jbake : jbake -b } node "Build-Server ^^^^^ Syntax Error? (Assumed diagram type: component) @startuml node "Entwicklungsmaschine" { artifact "Quellen" { folder "Inhalt/" folder "templates/" folder "assets/" } component "JBake CLI" as jbake Sources --&gt; jbake : jbake -b } node "Build-Server (CI/CD)" { component "GitHub Actions oder GitLab CI" as ci jbake --&gt; ci : push } cloud "CDN / Hosting" { node "Statischer Webserver" { artifact "Generierte Seite" { folder "/fr/blog/" folder "/en/blog/" folder "/assets/" } } } ci --&gt; "Generierte Seite" : déploiement actor "Leser" as users users --&gt; "Statischer Webserver" : HTTPS @enduml</pre> </div> </div> <div class="paragraph"> <p>Diese Architektur ermöglicht es Ihnen, einfach mit zwei Sprachen zu beginnen und weitere hinzuzufügen, ohne ein großes Refactoring durchführen zu müssen. Alles bleibt vollständig statisch und leistungsfähig und bleibt der Philosophie von JBake treu.</p> </div> <div class="paragraph"> <p>Gute mehrsprachige Entwicklung! 🌍</p> </div> </div> </div> </div> Tor Browser installieren und überprüfen unter Ubuntu 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="#_einleitung">Einleitung</a></li> <li><a href="#_herunterladen_von_tor_und_seiner_signatur">Herunterladen von Tor und seiner Signatur</a></li> <li><a href="#_kryptografische_verifizierung_der_signatur">Kryptografische Verifizierung der Signatur</a> <ul class="sectlevel2"> <li><a href="#_1_importieren_sie_den_öffentlichen_schlüssel_des_tor_projekts">1. Importieren Sie den öffentlichen Schlüssel des Tor-Projekts</a></li> <li><a href="#_2_signatur_überprüfen">2. Signatur überprüfen</a></li> <li><a href="#_praxisbeispiel_gültige_signatur_aber_schlüssel_nicht_zertifiziert">Praxisbeispiel: Gültige Signatur, aber Schlüssel nicht zertifiziert</a></li> </ul> </li> <li><a href="#_warum_die_signatur_überprüfen">Warum die Signatur überprüfen?</a></li> <li><a href="#_entpacken_und_starten_von_tor_browser">Entpacken und Starten von Tor Browser</a></li> <li><a href="#_integration_auf_dem_ubuntu_desktop">Integration auf dem Ubuntu-Desktop</a></li> <li><a href="#_bildungsressourcen_mit_tor_erkunden">Bildungsressourcen mit Tor erkunden</a></li> <li><a href="#_update_von_tor_browser">Update von Tor Browser</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_referenzen">Referenzen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>In einer Welt, in der die digitale Privatsphäre zunehmend bedroht ist, bleibt <strong>Tor Browser</strong> ein essentielles Werkzeug, um seine Anonymität und Informationsfreiheit zu bewahren. Doch es ist entscheidend, niemals heruntergeladene Software auszuführen, ohne<strong>seine Authentizität überprüft</strong>. Dieser Artikel stellt eine vollständige Methode für :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tor Browser</strong> herunterladen und seine Signatur`.asc`</p> </li> <li> <p>Überprüfen Sie die Gültigkeit der heruntergeladenen Datei</p> </li> <li> <p>Installieren und starten <strong>Tor Browser</strong> unter Ubuntu</p> </li> <li> <p>es hinzufügen zu den Desktop-Menüs für den täglichen Gebrauch</p> </li> <li> <p>Bildungsressourcen und ethische OSINT-Quellen über Tor erkunden</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_herunterladen_von_tor_und_seiner_signatur">Herunterladen von Tor und seiner Signatur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Erstellen Sie einen speziellen Ordner für den Tor-Browser :</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>Lade anschließend das Archiv des Tor-Browsers und seine Signatur herunter:</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="_kryptografische_verifizierung_der_signatur">Kryptografische Verifizierung der Signatur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieser Schritt ist<strong>unverzichtbar</strong>Um sicherzustellen, dass die heruntergeladene Datei tatsächlich vom <strong>Tor Project</strong> stammt und nicht verändert wurde.</p> </div> <div class="sect2"> <h3 id="_1_importieren_sie_den_öffentlichen_schlüssel_des_tor_projekts">1. Importieren Sie den öffentlichen Schlüssel des Tor-Projekts</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>Stellen Sie sicher, dass der Schlüssel ordnungsgemäß importiert ist:</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_signatur_überprüfen">2. Signatur überprüfen</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>Wenn alles korrekt ist, wird die folgende Meldung angezeigt:</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>Bei einer Warnung über einen nicht zertifizierten Schlüssel bedeutet dies einfach, dass Sie den vertrauenswürdigen Schlüssel des Tor-Projekts noch nicht unterschrieben haben, aber die Signatur bleibt gültig.</p> </div> </div> <div class="sect2"> <h3 id="_praxisbeispiel_gültige_signatur_aber_schlüssel_nicht_zertifiziert">Praxisbeispiel: Gültige Signatur, aber Schlüssel nicht zertifiziert</h3> <div class="paragraph"> <p>Es ist häufig, während der Überprüfung eine Nachricht wie diese zu finden:</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) &lt;torbrowser@torproject.org&gt; » [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>Diese Nachricht gibt an, dass die Signatur technisch „gut“ ist (die Datei wurde nicht verändert), aber Ihr GPG-System kann das Vertrauen in den Schlüssel selbst nicht <strong>zertifizieren</strong>. Um diesen Zweifel auszuräumen, ist es unerlässlich, den Fingerprint des Hauptschlüssels zu vergleichen (<code>EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290</code>) mit der auf der offiziellen Website des Tor-Projekts veröffentlichten</p> </div> <div class="paragraph"> <p>Laut der offiziellen Website, ist der erwartete Fingerabdruck :`EF6E286DDA85EA2A4BA7DE684E2C6E8793298290`.</p> </div> <div class="paragraph"> <p>Da der angezeigte Fußabdruck von`gpg`stimmt <strong>genau</strong> mit dem Schlüssel der offiziellen Website überein, können Sie sicher sein, dass der Schlüssel legitim ist und die Datei sicher ist. Die Warnung "nicht zertifizierter Schlüssel" ist dann eine Information über Ihre lokale GPG-Konfiguration und nicht über die Gültigkeit der Signatur oder die Echtheit der Datei.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_warum_die_signatur_überprüfen">Warum die Signatur überprüfen?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Überprüfung der GPG-Signaturen ist ein grundlegender Akt der digitalen Sicherheit. Sie ermöglicht :</p> </div> <div class="ulist"> <ul> <li> <p>garantieren<strong>die Authentizität</strong>der heruntergeladenen Software</p> </li> <li> <p>Verhindern Sie die Installation einer kompromittierten Datei durch einen böswilligen Akteur</p> </li> <li> <p>An der<strong>digitale Souveränität</strong>individuell</p> </li> <li> <p>Fördern Sie eine verantwortungsvolle und ethische digitale Kultur</p> </li> </ul> </div> <div class="imageblock"> <div class="content"> <img src="usecase-tor-verification.svg" alt="usecase tor verification" width="460" height="287"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_entpacken_und_starten_von_tor_browser">Entpacken und Starten von Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Entpacken Sie das heruntergeladene Archiv:</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>Starten Sie anschließend den Browser:</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>Beim ersten Start wird ein Konfigurationsfenster geöffnet, um die Verbindung zum Tor-Netzwerk herzustellen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_integration_auf_dem_ubuntu_desktop">Integration auf dem Ubuntu-Desktop</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um <strong>Tor Browser</strong> im Anwendungsmenü hinzuzufügen :</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>Danach können Sie:</p> </div> <div class="ulist"> <ul> <li> <p>Starte <strong>Tor Browser</strong> vom Anwendungsmenü</p> </li> <li> <p>Zum Dock-Favoriten hinzufügen</p> </li> <li> <p>Eine Tastenkombination erstellen, falls gewünscht</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="_bildungsressourcen_mit_tor_erkunden">Bildungsressourcen mit Tor erkunden</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tor ist nicht nur ein Werkzeug zur Anonymität. Es stellt ein Zugangstor zu Bildungs- und Forschungsressourcen dar, insbesondere in den Bereichen:</p> </div> <div class="ulist"> <ul> <li> <p><strong>OSINT (Offene-Quellen-Intelligenz)</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>Bildungsaustausch und Open Source</strong></p> </li> <li> <p><a href="https://archive.org">https://archive.org</a>(Zugriff über Tor für mehr Privatsphäre)</p> </li> <li> <p><a href="https://github.com/">https://github.com/</a>(zugänglich über Tor)</p> </li> <li> <p><a href="https://librarygenesis.pro">https://librarygenesis.pro</a>(Zugang zu frei zugänglicher wissenschaftlicher Literatur)</p> </li> <li> <p><strong>Weitergabe von Wissen und Verständnis des Menschen in der digitalen Gesellschaft</strong></p> </li> <li> <p>Ressourcen zur digitalen Kultur, zur Meinungsfreiheit und zum Zugang zum Wissen</p> </li> <li> <p>Freie Dokumentation zur Cybersicherheit und Ethik der Technologien</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_update_von_tor_browser">Update von Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um optimale Sicherheit zu gewährleisten, ist es entscheidend, den <strong>Tor Browser</strong> auf dem neuesten Stand zu halten. Der Browser verfügt über einen Mechanismus für automatische Updates, der über die Befehlszeile ausgelöst werden kann.</p> </div> <div class="paragraph"> <p>Aus dem Installationsverzeichnis des Tor Browsers reicht es aus, das Startskript einfach erneut auszuführen:</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>Beim Start wird <strong>Tor Browser</strong> automatisch nach einer neuen Version suchen. Wenn eine solche existiert, wird sie heruntergeladen und für Sie installiert.</p> </div> <div class="paragraph"> <p>Diese einfache Methode stellt sicher, dass Sie stets über die neuesten Sicherheitsupdates und die aktuellsten Verbesserungen verfügen, was für ein sicheres Surfen unerlässlich ist.</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Überprüfen seiner Downloads ist ein wesentlicher Reflex für jede Person, die sich in einem sicheren digitalen Umfeld bewegen möchte. Tor auf verifizierte Weise zu installieren, ist<strong>seine digitale Integrität schützen</strong>, <strong>Das Vertrauen in freie Software bewahren</strong>, et <strong>Seine Informationsautonomie stärken</strong>.</p> </div> <div class="paragraph"> <p>Digitale Sicherheit ist ein Akt des Gewissens, nicht der Paranoia.</p> </div> <div class="imageblock"> <div class="content"> <img src="summary-diagram.svg" alt="summary diagram" width="436" height="203"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_referenzen">Referenzen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Offizielle Website des Tor-Projekts:https://www.torproject.org/download/[<a href="https://www.torproject.org/download/" class="bare">https://www.torproject.org/download/</a>]</p> </li> <li> <p>Dokumentation der Signaturverifikation: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-Dokumentation :https://ubuntu.com[<a href="https://ubuntu.com" class="bare">https://ubuntu.com</a>]</p> </li> <li> <p>Bildungsarchiv :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>Dieser Artikel ist Teil der Reihe <strong>Sicherheit und digitales Bewusstsein</strong>, Mit dem Ziel, verantwortungsvolle und pädagogische Praktiken zu fördern Um die freien Werkzeuge.</p> </div> </td> </tr> </table> </div> </div> </div> Artikel 5: Das Abenteuer des gemeinsam genutzten libs.versions.toml 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="#_einführung">Einführung</a></li> <li><a href="#_1_der_versionskatalog_libs_versions_toml_eine_erinnerung">1. Der Versionskatalog (<code>libs.versions.toml</code>) : Eine Erinnerung</a></li> <li><a href="#_2_das_problem_ein_zusammengesetzter_build_und_zwei_getrennte_welten">2. Das Problem : Ein zusammengesetzter Build und zwei getrennte Welten</a></li> <li><a href="#_3_die_lösung_teile_die_abhängigkeitsauflösung">3. Die Lösung: Teile die Abhängigkeitsauflösung</a></li> <li><a href="#_4_schlussfolgerung_die_macht_gut_verwalteter_composite_builds">4. Schlussfolgerung: Die Macht gut verwalteter Composite-Builds</a></li> </ul> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Zielgruppe : Gradle-Entwickler, die mit der Verwaltung von Abhängigkeiten in Multi-Build-Projekten konfrontiert sind.</div> <p>In unserem Streben, das Plugin zu erstellen`site-baker`, haben wir versucht, einen sauberen und zentralisierten Codebestand zu pflegen. Eine der besten Praktiken im modernen Gradle-Ökosystem ist die Verwendung des<strong>Versionenkatalog</strong> (<code>libs.versions.toml</code>) um die Abhängigkeiten zu verwalten. Aber was passiert, wenn dein Projekt komplexer wird, wie ein<strong>Komposit bauen</strong>wo ein unabhängiger Build (unser Plugin) in einem anderen eingebaut werden muss?</p> </div> <div class="paragraph"> <p>Das war der Ort, an dem unser Abenteuer eine unerwartete Wendung nahm. Wir wollten, dass unser Plugin`site-baker`, der selbst ein Gradle-Projekt ist, verwendet denselben Versionskatalog wie unser Hauptprojekt. Dieser Artikel, der fünfte unserer Serie, erzählt, wie wir dieses Problem gelöst haben.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_der_versionskatalog_libs_versions_toml_eine_erinnerung">1. Der Versionskatalog (<code>libs.versions.toml</code>) : Eine Erinnerung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Datei`gradle/libs.versions.toml`ist eine Funktion von Gradle, die es ermöglicht, die Versionen und Koordinaten der Abhängigkeiten deines Projekts zu zentralisieren. Es ist üblicherweise in vier Abschnitte strukturiert:</p> </div> <div class="ulist"> <ul> <li> <p><code>[versions]</code>: Definiert Aliase für Versionsnummern (z.B.<code>kotlin = "1.9.20"</code>).</p> </li> <li> <p><code>[libraries]`Definiert Aliase für die vollständigen Abhängigkeiten, indem die oben definierten Versionen verwendet werden (z.B.:`kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib", version.ref = "kotlin" }</code>).</p> </li> <li> <p><code>[bundles]</code>: Fasst mehrere Bibliotheken unter einem einzigen Alias zusammen (z.B`jackson = ["jackson-core", "jackson-databind"]`).</p> </li> <li> <p><code>[plugins]</code>: definiert Aliase für die Gradle-Plugins.</p> </li> </ul> </div> <div class="paragraph"> <p>Sobald es definiert ist, generiert Gradle automatisch typisierte Zugriffsmethoden, was Ihr`build.gradle.kts`viel lesbarer:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">dependencies { // Au lieu de : implementation("org.jetbrains.kotlin:kotlin-stdlib:1.9.20") implementation(libs.kotlin.stdlib) }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="toml-flow.svg" alt="toml flow" width="520" height="252"> </div> <div class="title">Figure 1. Datenfluss des Versionskatalogs</div> </div> </div> </div> <div class="sect1"> <h2 id="_2_das_problem_ein_zusammengesetzter_build_und_zwei_getrennte_welten">2. Das Problem : Ein zusammengesetzter Build und zwei getrennte Welten</h2> <div class="sectionbody"> <div class="paragraph"> <p>unsere Projektstruktur ist ein<strong>Verbund herstellen</strong>. Das Hauptprojekt (<code>thymeleaf.cheroliv.com</code>) enthält das Projekt des Plugins (<code>site-baker</code>) über den Befehl`includeBuild("site-baker")<code>in der Datei`settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>.</p> </div> <div class="imageblock"> <div class="content"> <img src="composite-build.svg" alt="composite build" width="625" height="246"> </div> <div class="title">Figure 2. Struktur des kompositen Builds</div> </div> <div class="paragraph"> <p>Das Problem ist, dass standardmäßig ein eingebundener Build ein<strong>getrennte Welt</strong>. Es hat seine eigene Konfiguration, seinen eigenen Lebenszyklus, und es sieht die Datei nicht`libs.versions.toml`des Hauptbuilds. Unser`plugin/build.gradle.kts`versuchte zu verwenden`libs.plugins.kotlin.jvm`, aber das Objekt`libs`Es wurde nicht aus der richtigen TOML-Datei generiert, was Build-Fehler verursachte.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_die_lösung_teile_die_abhängigkeitsauflösung">3. Die Lösung: Teile die Abhängigkeitsauflösung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach mehreren Recherchen stellte sich die Lösung als eine von Gradle speziell für diesen Fall entwickelte Funktion heraus:`dependencyResolutionManagement`.</p> </div> <div class="paragraph"> <p>In der Datei`settings.gradle.kts` du <strong>build inklusiv</strong>(<code>site-baker/settings.gradle.kts</code>), wir können Gradle sagen, wo es den Versionskatalog finden soll, den es verwenden soll.</p> </div> <div class="paragraph"> <p>Hier ist die Konfiguration, die wir hinzugefügt haben zu`site-baker/settings.gradle.kts`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="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")</code></pre> </div> </div> <div class="paragraph"> <p>Analysieren wir den entscheidenden Teil :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">versionCatalogs { create("libs") { // Crée un catalogue nommé 'libs' from(files("../gradle/libs.versions.toml")) // En utilisant ce fichier } }</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><code>create("libs")</code>: Wir erklären einen Versionskatalog, der über das Alias zugänglich sein wird`libs`.</p> </li> <li> <p><code>from(files("../gradle/libs.versions.toml"))`Das ist die Magie. Wir teilen Gradle mit, dass die Quelle dieses Katalogs die TOML-Datei im Verzeichnis`gradle</code> du <strong>Elternprojekt</strong>(<code>../</code>)</p> </li> </ul> </div> <div class="paragraph"> <p>Mit dieser Konfiguration, der Build`site-baker`Er weiß jetzt, dass er den Versionskatalog des Hauptprojekts verwenden muss. Das Objekt`libs`wird korrekt generiert, und die Abhängigkeiten werden wie erwartet aufgelöst.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_schlussfolgerung_die_macht_gut_verwalteter_composite_builds">4. Schlussfolgerung: Die Macht gut verwalteter Composite-Builds</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese Erfahrung war lehrreich. Der Versionskatalog ist ein fantastisches Werkzeug für die Wartbarkeit, aber sein Verhalten in Szenarien mit zusammengesetzten Builds ist nicht immer intuitiv.</p> </div> <div class="paragraph"> <p>Der Schlüssel ist, sich daran zu erinnern, dass ein inkludierter Build weiterhin ein unabhängiger Build bleibt. Um Konfigurationen wie den Versionskatalog zu teilen, müssen Sie die expliziten Mechanismen verwenden, die von Gradle bereitgestellt werden, wie den Block`dependencyResolutionManagement`in`settings.gradle.kts`.</p> </div> <div class="paragraph"> <p>Durch das Lösen dieses Problems haben wir nicht nur unseren Build sauberer gemacht, sondern auch die Konsistenz unseres Projekts erhöht, indem wir sicherstellten, dass das Plugin und das Hauptprojekt eine einzige Wahrheitsquelle für ihre Abhängigkeiten teilen.</p> </div> <div class="paragraph"> <p>Im nächsten Artikel werden wir unser Plugin weiter bereichern, indem wir komplexere Aufgaben hinzufügen, jetzt, da unsere Abhängigkeitsverwaltung solide und zentralisiert ist.</p> </div> </div> </div> Artikel 4: Die Falle des Gradle-Konfigurationscaches 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="#_einleitung">Einleitung</a></li> <li><a href="#_das_symptom_phantom_builds">Das Symptom: Phantom-Builds</a></li> <li><a href="#_die_untersuchung_was_ist_der_konfigurations_cache">Die Untersuchung: Was ist der Konfigurations-Cache?</a></li> <li><a href="#_die_ursache_des_problems_ein_nicht_konformes_plugin">Die Ursache des Problems: Ein nicht konformes Plugin</a></li> <li><a href="#_die_temporäre_lösung_cache_deaktivieren">Die temporäre Lösung: Cache deaktivieren</a></li> <li><a href="#_die_echte_lösung_das_plugin_kompatibel_machen">Die echte Lösung: Das Plugin kompatibel machen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Lesedauer :</em> 11 Minuten.</div> <p>Zielgruppe: Gradle-Entwickler, die bereits magisches oder unerwartetes Build-Verhalten erlebt haben.</p> </div> </div> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <p>In unserem Abenteuer beim Erstellen des Plugins`site-baker`, wir haben einen rigorosen TDD-Ansatz verfolgt. Jede Funktionalität wurde getestet, validiert und wir gingen mit Vertrauen voran. Und dann kam eines Tages das Unerwartete. Die Builds begannen, sich unregelmäßig zu verhalten. Änderungen in der Logik des Plugins oder in den Konfigurationsdateien schienen ignoriert zu werden, und unsere bisher zuverlässigen Funktionstests schlugen ohne ersichtlichen Grund fehl.</p> </div> <div class="paragraph"> <p>Solche Probleme können unglaublich frustrierend sein. Es stellt die Zuverlässigkeit des Tools und die Gültigkeit unseres Codes in Frage. Nach einer intensiven Debugging-Sitzung wurde der Schuldige identifiziert: der<strong>Gradle-Konfigurationscache</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_das_symptom_phantom_builds">Das Symptom: Phantom-Builds</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Problem äußerte sich auf verschiedene Weisen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Ich modifizierte eine Zeichenkette in einer Aufgabe.<code>println</code>, aber die alte Zeichenkette blieb während der Ausführung angezeigt.</p> </li> <li> <p>Ich änderte einen Wert in meiner Datei`managed-jbake-context.yml`, aber das Plugin verhielt sich, als wäre die Datei nicht geändert worden.</p> </li> <li> <p>Funktionale Tests, die Testprojekte im Flug erstellen, schlugen fehl, weil das Plugin die neu erstellten Konfigurationsdateien nicht zu erkennen schien.</p> </li> </ol> </div> <div class="paragraph"> <p>Alles schien so, als würde Gradle eine \"version fantôme\" unseres Builds ausführen und unsere neuesten Änderungen ignorieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_untersuchung_was_ist_der_konfigurations_cache">Die Untersuchung: Was ist der Konfigurations-Cache?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Konfigurations-Cache ist eine relativ moderne und äußerst leistungsstarke Funktion von Gradle, die in den neuesten Versionen standardmäßig aktiviert ist. Sein Ziel ist es, die Builds schneller zu machen.</p> </div> <div class="olist arabic"> <div class="title">Das Prinzip ist einfach :</div> <ol class="arabic"> <li> <p>Bei der ersten Ausführung, Gradle führt die Phase von<strong>Configuration</strong>( lesen der`build.gradle.kts`, Erstellung der Aufgaben, Lösung der Abhängigkeiten) und erstellt einen Aufgabengraphen.</p> </li> <li> <p>Am Ende dieser Phase, Gradle<strong>serialisiere diesen Taskgraphen</strong>und speichert es im Cache.</p> </li> <li> <p>Bei den folgenden Ausführungen, wenn sich nichts geändert hat (Build-Skripte,<code>gradle.properties</code>, usw.), Gradle<strong>überspringt die Konfigurationsphase komplett</strong>und wiederverwende den zwischengespeicherten Aufgaben-Graphen.</p> </li> </ol> </div> <div class="paragraph"> <p>Der Zeitgewinn ist bei großen Projekten spektakulär. Allerdings hat diese Leistung ihren Preis: Sie legt strenge Regeln dafür fest, wie Plugins geschrieben werden müssen.</p> </div> <div class="paragraph"> <p>Der Lebenszyklus des Konfigurationscaches</p> </div> <div class="imageblock"> <div class="content"> <img src="config-cache-lifecycle.svg" alt="config cache lifecycle" width="661" height="709"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_ursache_des_problems_ein_nicht_konformes_plugin">Die Ursache des Problems: Ein nicht konformes Plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unser Plugin`site-baker`Verletzte unbemerkt mehrere Regeln des Konfigurationscaches. Damit ein Aufgabengraph serialisierbar ist, dürfen die Aufgaben keine Verweise auf komplexe Objekte wie das Objekt enthalten.`Project`oder Dateien während der Ausführungsphase beliebig zu lesen.</p> </div> <div class="paragraph"> <p>Unser Hauptfehler bestand darin, den Inhalt der YAML-Datei direkt innerhalb der Aufgabenausführungslogik zu lesen, indem wir auf den Pfad in unserer Erweiterung verwiesen haben. Dieser Ansatz ist mit dem Caching unvereinbar, weil Gradle nicht erkennen kann, ob sich der Dateiinhalt geändert hat, wenn dieses Lesen nicht als eine<strong>Aufgabe-Eingabe</strong>(Task Input).</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_temporäre_lösung_cache_deaktivieren">Die temporäre Lösung: Cache deaktivieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um uns zu entblockieren und ein vorhersagbares Build-Verhalten wiederherzustellen, war die schnellste Lösung, den Konfigurations-Cache zu deaktivieren. Es reicht aus, die folgende Zeile in die Datei einzufügen.<code>gradle.properties`des Projekts, das das Plugin verwendet (oder in unserem Fall, das Testprojekt)`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>Sofort hatten die Builds ihr normales Verhalten wiedererlangt. Jede Ausführung startete die Konfigurationsphase erneut und unsere Änderungen wurden berücksichtigt.</p> </div> <div class="paragraph"> <p>Allerdings ist das nur eine Umgehungslösung, keine dauerhafte Lösung. Sie opfert die Leistung und löst nicht das grundlegende Problem unseres Plugins.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_echte_lösung_das_plugin_kompatibel_machen">Die echte Lösung: Das Plugin kompatibel machen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Damit ein Plugin ein guter Bürger des modernen Gradle-Ökosystems ist, muss es mit dem Konfigurations-Cache kompatibel sein. Dies erfordert, dass wir überdenken, wie Daten zu unseren Tasks gelangen.</p> </div> <div class="paragraph"> <p>Der Schlüssel ist, die zu verwenden<strong>Anbieter-APIs</strong>von Gradle. Anstatt direkte Werte zu übergeben (wie ein`String` ou un <code>File</code>) für unsere Aufgaben, wir müssen verbringen`Property&lt;T&gt;`oder einige`Provider&lt;T&gt;`.</p> </div> <div class="olist arabic"> <div class="title">Hier ist der Refactoring-Plan :</div> <ol class="arabic"> <li> <p><strong>Aufgaben-Einträge deklarieren :</strong>Die Aufgabe, die die YAML-Datei parst, muss diese Datei als Eingabe deklarieren. Dazu wird die Annotation verwendet.<code>@InputFile</code>.</p> </li> </ol> </div> <div class="paragraph"> <p>[source,kotlin] ---- @get:InputFile abstract val configFile: RegularFileProperty ----</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> Artikel 3: Jackson-Integration zum YAML-Parsing mit TDD in einem Gradle-Plugin 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="#_einleitung">Einleitung</a></li> <li><a href="#_1_der_kontext_unser_plugin_site_baker">1. Der Kontext: Unser Plugin `site-baker</a></li> <li><a href="#_2_modellierung_der_konfiguration_in_kotlin">2. Modellierung der Konfiguration in Kotlin</a></li> <li><a href="#_3_integration_von_jackson_in_build_gradle_kts">3. Integration von Jackson in `build.gradle.kts</a></li> <li><a href="#_4_der_tdd_ansatz_yaml_parsing_testen">4. Der TDD-Ansatz: YAML-Parsing testen</a> <ul class="sectlevel2"> <li><a href="#_4_1_einheitstest_yaml_in_kotlin_objekt_abbilden">4.1. Einheitstest: YAML in Kotlin-Objekt abbilden</a></li> <li><a href="#_4_2_funktionstest_überprüfung_des_lesens_der_konfigurationsdatei">4.2. Funktionstest: Überprüfung des Lesens der Konfigurationsdatei</a></li> </ul> </li> <li><a href="#_5_visualisierung_des_parsing_flusses">5. Visualisierung des Parsing-Flusses</a></li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Zielgruppe: Mittelstufe Gradle-Entwickler, die komplexe Konfigurationen verwalten möchten.</div> <p>In der Entwicklung von Gradle-Plugins ist die Verwaltung komplexer Konfigurationen eine häufige Aufgabe. Anstatt das DSL mit Hunderten von Eigenschaften zu überladen, ist es oft sauberer und wartbarer, die Konfiguration in einer externen Datei zu definieren, wie z.B. YAML. Dieser Artikel führt Sie durch die Integration der leistungsfähigen Jackson-Bibliothek zum Parsen von YAML-Dateien in Kotlin-Objekte, wobei ein strenger TDD-Ansatz verfolgt wird, um die Robustheit unseres Plugins zu gewährleisten.<code>site-baker</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_der_kontext_unser_plugin_site_baker">1. Der Kontext: Unser Plugin `site-baker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unser Plugin`site-baker` est conçu pour automatiser la génération et le déploiement d&#8217;un site statique. Il a besoin de lire un fichier de configuration YAML (<code>managed-jbake-context.yml</code>) um Informationen wie Quellenpfade, Bereitstellungsziele, und Git-Identifikatoren zu erhalten.</p> </div> <div class="paragraph"> <p>Die YAML-Konfiguration, die wir parsen möchten, sieht folgendermaßen aus:</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_modellierung_der_konfiguration_in_kotlin">2. Modellierung der Konfiguration in Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bevor wir parsen, müssen wir die Struktur unserer Daten in Kotlin definieren. Jackson wird diese Klassen verwenden, um den YAML-Inhalt automatisch zuzuordnen.</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>Die Funktion`parseSiteConfiguration`ist unser Einstiegspunkt für die Deserialisierung. sie verwendet`ObjectMapper`von Jackson, konfiguriert mit`YAMLFactory` pour le format YAML et `registerKotlinModule()`zur Unterstützung der Besonderheiten von Kotlin (wie den Standardwerten von Eigenschaften).</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_integration_von_jackson_in_build_gradle_kts">3. Integration von Jackson in `build.gradle.kts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um Jackson zu verwenden, müssen wir die notwendigen Abhängigkeiten im`build.gradle.kts`unseres Moduls`plugin`:</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>Wir verwenden`jackson-module-kotlin`für die Unterstützung von Kotlin und`jackson-dataformat-yaml`für die Verwaltung des YAML-Formats.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_der_tdd_ansatz_yaml_parsing_testen">4. Der TDD-Ansatz: YAML-Parsing testen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jetzt wenden wir TDD an, um unsere Parsinglogik zu validieren.</p> </div> <div class="sect2"> <h3 id="_4_1_einheitstest_yaml_in_kotlin_objekt_abbilden">4.1. Einheitstest: YAML in Kotlin-Objekt abbilden</h3> <div class="paragraph"> <p>Wir beginnen mit einem Einzeltest in`SiteBakerPluginTest.kt`um zu überprüfen, dass die Funktion`parseSiteConfiguration`kann eine YAML-Zeichenkette korrekt in ein Objekt umwandeln`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>Dieser Test liest den Inhalt der Datei`managed-jbake-context.yml`(der existieren muss, damit der Test gültig ist) und führt Assertionen gegen das Objekt aus`SiteConfiguration` résultant. Il valide que les valeurs clés du YAML sont correctement mappées.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_funktionstest_überprüfung_des_lesens_der_konfigurationsdatei">4.2. Funktionstest: Überprüfung des Lesens der Konfigurationsdatei</h3> <div class="paragraph"> <p>Um sicherzustellen, dass das Plugin die Konfigurationsdatei über sein DSL lesen kann und das Parsing in einer realen Gradle-Umgebung funktioniert, fügen wir einen funktionalen Test hinzu in`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="paragraph"> <p>Dieser Test ist entscheidend, da er die Ausführung des Plugins in einem echten Projekt simuliert. Er muss sein<strong>hermetisch</strong>, das heißt, er muss die Datei selbst erstellen`managed-jbake-context.yml`mit einem kontrollierten Inhalt, um die Reproduzierbarkeit und Isolation des Tests zu gewährleisten.</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>Dieser funktionale Test überprüft, dass die in das Test-Temporary-Verzeichnis kopierte Konfigurationsdatei die erwarteten Daten enthält. Obwohl dieser Test das YAML nicht direkt in ein Kotlin-Objekt parst, überprüft er die Anwesenheit der Datei und ihres Inhalts, was ein wesentlicher Vorausschritt für das Parsing durch das Plugin ist.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_visualisierung_des_parsing_flusses">5. Visualisierung des Parsing-Flusses</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das folgende Diagramm veranschaulicht den Datenfluss und die Interaktionen beim Parsen der YAML-Konfiguration :</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-ed1530dd88b2b34d2d2f98ae4440e263.png" alt="Diagram" width="1531" height="472"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Nach Verfolgung eines TDD-Ansatzes haben wir die Jackson-Bibliothek erfolgreich integriert, um YAML-Konfigurationsdateien in Kotlin-Objekte innerhalb unseres Gradle-Plugins zu parsen. Diese Methode hat es uns ermöglicht :</p> </div> <div class="ulist"> <ul> <li> <p><strong>deutlich modellieren</strong>unsere Konfiguration mit Kotlin-Datenklassen.</p> </li> <li> <p><strong>Die Parsing-Logik validieren</strong>mit gezielten Einzeltests.</p> </li> <li> <p><strong>Die Integration gewährleisten</strong>in einer echten Gradle-Umgebung dank hermetischer Funktionaltests</p> </li> </ul> </div> <div class="paragraph"> <p>Diese solide Basis gibt uns großes Vertrauen, unser Plugin mit Funktionen zu erweitern, die auf dieser Konfiguration aufbauen, während wir gleichzeitig die Wartbarkeit und Robustheit des Codes gewährleisten. Das YAML-Parsing ist jetzt eine zuverlässige und getestete Funktion unseres Plugins.<code>site-baker</code>.</p> </div> </div> </div> Artikel 2 : Entwickeln Sie ein Gradle-Plugin mit einem TDD-Ansatz 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="#_die_initialisierung_des_projekts">Die Initialisierung des Projekts</a></li> <li><a href="#_2_unser_erster_tdd_zyklus_eine_aufgabe_aufzeichnen">2. Unser erster TDD-Zyklus: Eine Aufgabe aufzeichnen</a> <ul class="sectlevel2"> <li><a href="#_2_1_der_test_zuerst_der_test_der_fehlschlägt">2.1. Der Test zuerst (Der Test, der fehlschlägt)</a></li> <li><a href="#_2_2_der_code_danach_den_test_bestehen">2.2. Der Code danach (Den Test bestehen)</a></li> </ul> </li> <li><a href="#_3_zweiter_tdd_zyklus_eine_dsl_erweiterung_hinzufügen">3. Zweiter TDD-Zyklus: Eine DSL-Erweiterung hinzufügen</a> <ul class="sectlevel2"> <li><a href="#_3_1_der_test_zuerst">3.1. Der Test zuerst</a></li> <li><a href="#_3_2_der_code_anschließend">3.2. Der Code anschließend</a></li> </ul> </li> <li><a href="#_4_der_funktionstest_die_integration_validieren">4. Der Funktionstest: Die Integration validieren</a> <ul class="sectlevel2"> <li><a href="#_4_1_integrations_test_erstellen_einer_kontrollierten_umgebung">4.1. Integrations-Test: Erstellen einer kontrollierten Umgebung</a></li> <li><a href="#_4_2_die_logik_abschließen">4.2. Die Logik abschließen</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In diesem Artikel werden wir untersuchen, wie wir eine solide Entwicklungsbasis für ein Gradle-Plugin mit einem Testgetriebenen Entwicklungsansatz (TDD - Test-Driven Development) einrichten können. Diese Methode stellt sicher, dass unser Code robust, wartbar und genau den Anforderungen entspricht, von Anfang an.</p> </div> </div> </div> <div class="sect1"> <h2 id="_die_initialisierung_des_projekts">Die Initialisierung des Projekts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle erleichtert die Erstellung eines neuen Plugins dank des Befehls erheblich.<code>gradle init</code>. Indem wir ein "Gradle Plugin" mit Kotlin erstellen, erhalten wir eine fertig einsatzbereite Projektstruktur, die zwei entscheidende Testtypen enthält:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Unit-Tests :</strong>Befinden sich in`src/test`, sie ermöglichen es, isolierte Komponenten unseres Plugins zu validieren, wie die interne Logik einer Aufgabe oder die Konfiguration einer Erweiterung. Sie sind schnell und benötigen keine vollständige Ausführung von Gradle.</p> </li> <li> <p><strong>Funktionstests:</strong>In &#8230;&#8203; gelegen`src/functionalTest`, sie verwenden`GradleRunner`um eine vollständige Gradle-Build in einem temporären Testprojekt auszuführen. Dadurch können wir das tatsächliche Verhalten des Plugins in einer kontrollierten Umgebung überprüfen.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_2_unser_erster_tdd_zyklus_eine_aufgabe_aufzeichnen">2. Unser erster TDD-Zyklus: Eine Aufgabe aufzeichnen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unsere erste Anforderung ist einfach: Das Plugin muss eine benannte Aufgabe registrieren.<code>printSiteConfig</code>.</p> </div> <div class="sect2"> <h3 id="_2_1_der_test_zuerst_der_test_der_fehlschlägt">2.1. Der Test zuerst (Der Test, der fehlschlägt)</h3> <div class="paragraph"> <p>Gemäß dem TDD schreiben wir zunächst einen Test, der die Existenz dieser Aufgabe überprüft. In`SiteBakerPluginTest.kt`(unsere Unit-Test-Datei), wir fügen hinzu:</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>Dieser Test schlägt fehl, weil wir noch keinen Code in unserem Plugin geschrieben haben.</p> </div> </div> <div class="sect2"> <h3 id="_2_2_der_code_danach_den_test_bestehen">2.2. Der Code danach (Den Test bestehen)</h3> <div class="paragraph"> <p>Jetzt schreiben wir den notwendigen Minimalcode in`SiteBakerPlugin.kt`damit der Test bestanden werde:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class SiteBakerPlugin: Plugin&lt;Project&gt; { override fun apply(project: Project) { // Enregistrer une tâche simple project.tasks.register("printSiteConfig") { task -&gt; // ... la logique de la tâche viendra plus tard } } }</code></pre> </div> </div> <div class="paragraph"> <p>Wir führen die Tests erneut aus, und sie bestehen. Unsere erste Funktionalität ist bestätigt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_3_zweiter_tdd_zyklus_eine_dsl_erweiterung_hinzufügen">3. Zweiter TDD-Zyklus: Eine DSL-Erweiterung hinzufügen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die folgende Anforderung besteht darin, den Benutzern zu ermöglichen, unser Plugin über einen DSL-Block in ihrem zu konfigurieren`build.gradle.kts`. Wir wollen einen Block`site { &#8230;&#8203; }`wo man einen Konfigurationspfad angeben kann</p> </div> <div class="sect2"> <h3 id="_3_1_der_test_zuerst">3.1. Der Test zuerst</h3> <div class="paragraph"> <p>Wir fügen einen Test hinzu, um zu überprüfen, dass die Erweiterung`site`ist korrekt gespeichert und man kann ihr einen Wert zuweisen.</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>Dieser Test schlägt fehl denn weder die Klasse`SiteExtension`weder die Registrierung der Erweiterung existiert.</p> </div> </div> <div class="sect2"> <h3 id="_3_2_der_code_anschließend">3.2. Der Code anschließend</h3> <div class="paragraph"> <p>Wir erstellen die Klasse`SiteBakerExtension.kt`und aktualisieren`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&lt;String&gt; = objects.property(String::class.java) } // SiteBakerPlugin.kt class SiteBakerPlugin: Plugin&lt;Project&gt; { override fun apply(project: Project) { // Enregistrer l'extension val extension = project.extensions.create("site", SiteExtension::class.java) project.tasks.register("printSiteConfig") { task -&gt; task.doLast { // On utilisera l'extension plus tard } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Die Tests bestehen erneut.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_der_funktionstest_die_integration_validieren">4. Der Funktionstest: Die Integration validieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jetzt, da die Einheiten getestet sind, müssen wir sicherstellen, dass alles zusammen in einer echten Build funktioniert. Das ist die Rolle des funktionalen Tests in`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="sect2"> <h3 id="_4_1_integrations_test_erstellen_einer_kontrollierten_umgebung">4.1. Integrations-Test: Erstellen einer kontrollierten Umgebung</h3> <div class="paragraph"> <p>Dieser Test wird ein echtes Projekt mit unserem Plugin simulieren. Damit er zuverlässig ist, muss er<strong>hermetisch</strong>, das heißt er darf nicht von vorhandenen Dateien auf dem System abhängen. Er muss selbst alle notwendigen Voraussetzungen für seine Ausführung schaffen.</p> </div> <div class="paragraph"> <p>Der Test wird also:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Erstellen eines`build.gradle.kts`ein Test, der unser Plugin und sein DSL verwendet.</p> </li> <li> <p><strong>Erstellen Sie die Konfigurationsdatei</strong>(<code>managed-jbake-context.yml</code>) das Plugin soll lesen. Das ist ein entscheidender Schritt für die Robustheit des Tests.</p> </li> <li> <p>Die Aufgabe ausführen`printSiteConfig`über`GradleRunner`.</p> </li> <li> <p>Überprüfen Sie, dass die Build-Ausgabe korrekt ist.</p> </li> </ol> </div> <div class="paragraph"> <p>Durch Kopieren oder Erstellen dieser Konfigurationsdatei bei jeder Ausführung, stellen wir sicher, dass der Test ist<strong>reproduzierbar</strong>Und ist nicht von einem externen Zustand abhängig. Das sichert unsere Tests gegen Regressionen, die durch das Lesen der Datei entstehen könnten.</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>Dieser Test wird so lange fehlschlagen, bis die Aufgabe`printSiteConfig`wird den Wert der Erweiterung nicht wirklich verwenden.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_die_logik_abschließen">4.2. Die Logik abschließen</h3> <div class="paragraph"> <p>Wir aktualisieren die Aufgabe im`SiteBakerPlugin.kt`damit sie den konfigurierten Wert anzeigt :</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 -&gt; task.doLast { println("Site config path: ${extension.configPath.get()}") } }</code></pre> </div> </div> <div class="paragraph"> <p>Alle Tests, sowohl unitäre als auch funktionelle, bestehen jetzt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Indem wir einen TDD-Ansatz verfolgten, haben wir ein Plugin inkrementell und sicher gebaut. Jede kleine Funktionalität wird sofort durch einen Test validiert, von schnellen Unit-Tests bis zu Funktionalitätstests, die die vollständige Integration bestätigen.</p> </div> <div class="paragraph"> <p>Indem wir darauf achten, unsere Tests funktional zu machen.<strong>hermetisch</strong>— insbesondere durch programmatisches Erstellen der erforderlichen Konfigurationsdateien — bauen wir ein äußerst robustes Sicherheitsnetz auf. Diese Strenge schützt uns wirksam vor Regressionsfehlern und gibt uns viel Vertrauen, später komplexere Funktionen hinzuzufügen, wie das Parsen der YAML-Konfigurationsdatei.</p> </div> <div class="paragraph"> <p>Diese solide Testbasis ist der wertvollste Vermögenswert für die Wartung und die zukünftige Entwicklung des Plugins.</p> </div> </div> </div> Artikel 1 : Erstellen eines Gradle-Plugins von A bis Z mit dem Befehl gradle init 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="#_einleitung">Einleitung</a></li> <li><a href="#_schritt_1_projekt_assistent_starten">Schritt 1: Projekt-Assistent starten</a></li> <li><a href="#_schritt_2_die_generierte_struktur_verstehen">Schritt 2: Die generierte Struktur verstehen</a> <ul class="sectlevel2"> <li><a href="#_wichtige_dateien_und_ordner">Wichtige Dateien und Ordner</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Zielgruppe: Entwickler von Anfänger bis Mittelstufe mit Gradle.</div> <p>Das Starten eines neuen Gradle-Plugin-Projekts kann einschüchternd wirken. Glücklicherweise bietet Gradle einen leistungsstarken interaktiven Assistenten, die Aufgabe`init`, die eine vollständige, saubere und gebrauchsfertige Projektstruktur generiert. Dieses Handbuch zeigt Ihnen, wie Sie dieses Tool verwenden, um eine gesunde Plugin-Basis zu erstellen, erklärt deren Struktur und zeigt Ihnen, wie Sie die ersten Build-Aufgaben starten.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_1_projekt_assistent_starten">Schritt 1: Projekt-Assistent starten</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Befehl`gradle init`ist der Ausgangspunkt. Es startet einen Kommandozeilen-Assistenten, der Ihnen eine Reihe von Fragen stellt, um das Projekt zu konfigurieren.</p> </div> <div class="paragraph"> <p>Öffnen Sie Ihr Terminal in einem leeren Ordner und führen Sie aus:</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>Der Assistent wird Sie führen. Hier sind die Optionen, die Sie für ein in Kotlin geschriebenes Gradle-Plugin treffen müssen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Wählen Sie den Projekttyp aus, der generiert werden soll:</strong>Wählen Sie`Gradle plugin`.</p> </li> <li> <p><strong>Implementierungssprache auswählen:</strong>Wählen Sie`Kotlin`.</p> </li> <li> <p><strong>Build-Skript-DSL auswählen:</strong>Wählen Sie`Kotlin`.</p> </li> <li> <p><strong>Projektname:</strong>Gib einen Namen für dein Projekt ein (Beispiel:`site-baker`).</p> </li> <li> <p><strong>Plugin-ID:</strong>Gib deinem Plugin eine eindeutige Kennung (z.B.:`com.cheroliv.site-baker`)</p> </li> <li> <p><strong>Plugin-Klasse:</strong>Geben Sie den Namen der Implementierungsklasse an (z.B.:`com.cheroliv.SiteBakerPlugin`).</p> </li> </ol> </div> <div class="paragraph"> <p>Sobald es fertig ist, erzeugt Gradle eine vollständige Dateibaumstruktur.</p> </div> <div class="imageblock"> <div class="content"> <img src="init-gradle.svg" alt="init gradle" width="193" height="406"> </div> <div class="title">Figure 1. Diagramm des Initialisierungsprozesses</div> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_2_die_generierte_struktur_verstehen">Schritt 2: Die generierte Struktur verstehen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Assistent erstellt eine mehrmodulare Projektstruktur, indem er das Wurzelprojekt vom Quellcode des Plugins selbst trennt.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="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</code></pre> </div> </div> <div class="sect2"> <h3 id="_wichtige_dateien_und_ordner">Wichtige Dateien und Ordner</h3> <div class="ulist"> <ul> <li> <p><code>settings.gradle.kts</code>: Diese Datei im Stammverzeichnis definiert die im Build enthaltenen Module. Hier enthält sie das Unterprojekt`plugin`.</p> </li> </ul> </div> <div class="paragraph"> <p>[source,kotlin] ---- rootProject.name = "site-baker einbinden("plugin") ----</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> </div> Artikel 0: Einrichtung der Umgebung zum Erstellen von Gradle-Plugins 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="#_einleitung">Einleitung</a></li> <li><a href="#_1_das_jdk_der_gradle_motor">1. Das JDK : Der Gradle-Motor</a> <ul class="sectlevel2"> <li><a href="#_welche_version_wählen">Welche Version wählen?</a></li> <li><a href="#_installation_über_sdkman_empfohlen">Installation über SDKMAN! (Empfohlen)</a> <ul class="sectlevel3"> <li><a href="#_sdkman_installieren"><strong>SDKMAN! installieren</strong></a></li> <li><a href="#_eine_jdk_version_installieren"><strong>Eine JDK-Version installieren</strong></a></li> <li><a href="#_installation_überprüfen">Installation überprüfen</a></li> </ul> </li> </ul> </li> <li><a href="#_2_die_ide_intellij_idea">2. Die IDE : IntelliJ IDEA</a></li> <li><a href="#_3_gradle_das_build_tool">3. Gradle: Das Build-Tool</a> <ul class="sectlevel2"> <li><a href="#_installation_über_sdkman">Installation über SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_gradle_installieren">Gradle installieren</a></li> <li><a href="#_installation_überprüfen_2">Installation überprüfen</a></li> </ul> </li> </ul> </li> <li><a href="#_4_jbake_der_statische_seiten_generator">4. JBake : Der statische Seiten-Generator</a> <ul class="sectlevel2"> <li><a href="#_installation_über_sdkman_2">Installation über SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_jbake_installieren">JBake installieren</a></li> <li><a href="#_installation_überprüfen_3"><strong>Installation überprüfen</strong></a></li> </ul> </li> </ul> </li> <li><a href="#_5_der_gradle_wrapper_die_absolut_beste_praxis">5. Der Gradle Wrapper: Die absolut beste Praxis</a></li> <li><a href="#_6_docker_und_portainer_für_reproduzierbare_builds_optional">6. Docker und Portainer: Für reproduzierbare Builds (Optional)</a> <ul class="sectlevel2"> <li><a href="#_installation_von_docker_engine">Installation von Docker Engine</a> <ul class="sectlevel3"> <li><a href="#_docker_über_das_offizielle_skript_installieren"><strong>Docker über das offizielle Skript installieren :</strong></a></li> <li><a href="#_docker_ohne_sudo_verwalten_empfohlen">Docker ohne <code>sudo</code> verwalten (empfohlen):</a></li> </ul> </li> <li><a href="#_docker_mit_portainer_gui_verwalten">Docker mit Portainer (GUI) verwalten</a> <ul class="sectlevel3"> <li><a href="#_ein_volume_für_die_daten_von_portainer">Ein Volume für die Daten von Portainer :</a></li> <li><a href="#_portainer_container_starten">Portainer-Container starten :</a></li> </ul> </li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Zielgruppe: Entwickler, die mit der Erstellung von Gradle-Plugins beginnen möchten.</div> <p>Um Gradle-Plugins effizient zu entwickeln, ist eine gut konfigurierte Entwicklungsumgebung unverzichtbar. Ein gutes Setup spart Ihnen Zeit, reduziert Frustrationen und gewährleistet die Konsistenz Ihrer Builds.</p> </div> <div class="paragraph"> <p>Dieser Leitfaden konzentriert sich auf vier wesentliche Säulen:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Le <strong>JDK</strong>(Java Development Kit), weil Gradle und JBake auf der JVM ausgeführt werden.</p> </li> <li> <p>Un <strong>IDE</strong>modern (IntelliJ IDEA) mit gutem Support für Kotlin und Gradle.</p> </li> <li> <p><strong>Gradle</strong>er selbst, um Projekte zu initialisieren.</p> </li> <li> <p><strong>JBake</strong>, der Motor unserer statischen Seite.</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/gradle-env.svg" alt="gradle env" width="492" height="213"> </div> <div class="title">Figure 1. Komponenten der Entwicklungsumgebung</div> </div> </div> </div> <div class="sect1"> <h2 id="_1_das_jdk_der_gradle_motor">1. Das JDK : Der Gradle-Motor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle ist eine Anwendung, die auf der Java Virtual Machine (JVM) ausgeführt wird. Daher ist die Installation eines JDK eine absolute Voraussetzung.</p> </div> <div class="sect2"> <h3 id="_welche_version_wählen">Welche Version wählen?</h3> <div class="paragraph"> <p>Es wird empfohlen, eine LTS-Version (Long-Term Support) von Java zu verwenden. Derzeit,<strong>JDK 17</strong> ou <strong>JDK 21</strong>sind exzellente Optionen.</p> </div> </div> <div class="sect2"> <h3 id="_installation_über_sdkman_empfohlen">Installation über SDKMAN! (Empfohlen)</h3> <div class="paragraph"> <p>SDKMAN! ist ein großartiges Tool zum Verwalten der Versionen vieler SDKs, einschließlich Java und Gradle.</p> </div> <div class="sect3"> <h4 id="_sdkman_installieren"><strong>SDKMAN! installieren</strong></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="_eine_jdk_version_installieren"><strong>Eine JDK-Version installieren</strong></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="_installation_überprüfen">Installation überprüfen</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>Du solltest die gerade installierte Version angezeigt sehen.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_die_ide_intellij_idea">2. Die IDE : IntelliJ IDEA</h2> <div class="sectionbody"> <div class="paragraph"> <p>Für die Entwicklung von Gradle-Plugins mit dem Kotlin-DSL,<strong>IntelliJ IDEA</strong>ist das Werkzeug der Wahl. Seine Integration mit Gradle und Kotlin ist unübertroffen.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Community Edition:</strong>Kostenlos und völlig ausreichend, um zu beginnen.</p> </li> <li> <p><strong>Ultimate Edition :</strong>Kostenpflichtig bietet sie erweiterte Funktionen für die Web- und Datenbankentwicklung.</p> </li> </ul> </div> <div class="paragraph"> <p>Lade die für dich passende Version von der JetBrains-Website herunter: <a href="https://www.jetbrains.com/idea/download/" class="bare">https://www.jetbrains.com/idea/download/</a></p> </div> <div class="paragraph"> <p>Die IDE wird Ihre Dateien automatisch erkennen`build.gradle.kts` et <code>settings.gradle.kts</code>, bietet Ihnen eine leistungsstarke Autovervollständigung, Code-Navigation und integrierte Debugging-Tools.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_gradle_das_build_tool">3. Gradle: Das Build-Tool</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obwohl jedes Projekt seine eigene Gradle-Version über den Gradle Wrapper verwendet, ist es nützlich, eine globale Gradle-Installation für Aufgaben wie die Initialisierung neuer Projekte zu haben (<code>gradle init</code>).</p> </div> <div class="sect2"> <h3 id="_installation_über_sdkman">Installation über SDKMAN!</h3> <div class="paragraph"> <p>Wie beim JDK vereinfacht SDKMAN! die Installation von Gradle.</p> </div> <div class="sect3"> <h4 id="_gradle_installieren">Gradle installieren</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="_installation_überprüfen_2">Installation überprüfen</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>Dieser Befehl zeigt die verwendeten Versionen von Gradle, Kotlin, Groovy und JDK an.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_jbake_der_statische_seiten_generator">4. JBake : Der statische Seiten-Generator</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake ist das Werkzeug, das wir verwenden werden, um unsere Quelldateien (wie diese) in eine statische Website zu verwandeln. Eine lokale Installation ist praktisch, um Änderungen vorzuschauen.</p> </div> <div class="sect2"> <h3 id="_installation_über_sdkman_2">Installation über SDKMAN!</h3> <div class="paragraph"> <p>Wie bei den anderen Tools ist SDKMAN! die einfachste Methode.</p> </div> <div class="sect3"> <h4 id="_jbake_installieren">JBake installieren</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="_installation_überprüfen_3"><strong>Installation überprüfen</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>Dieser Befehl zeigt die JBake-Version und die Informationen der Java-Umgebung an, die er verwendet.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_der_gradle_wrapper_die_absolut_beste_praxis">5. Der Gradle Wrapper: Die absolut beste Praxis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sobald Ihr Projekt erstellt ist (was wir im nächsten Artikel sehen werden), sollten Sie den globalen Befehl nicht mehr verwenden.<code>gradle</code>. Stattdessen werden Sie es verwenden.<strong>Gradle-Wrapper</strong>(`./gradlew`ein in Ihr Projekt eingebundenes Skript.</p> </div> <div class="paragraph"> <p>Warum?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Reproduzierbarkeit:</strong>Der Wrapper garantiert, dass jede Person, die an dem Projekt arbeitet (einschließlich Ihres CI/CD-Servers), genau die<strong>gleiche Version von Gradle</strong>, beseitigt damit Build-Fehler, die durch unterschiedliche Umgebungen verursacht werden.</p> </li> <li> <p><strong>Einfachheit :</strong>Es ist nicht notwendig, Gradle manuell zu installieren, um an einem Projekt mitzuwirken.</p> </li> </ul> </div> <div class="paragraph"> <p>Es reicht, das Repository zu klonen und zu starten`./gradlew`.</p> </div> <div class="paragraph"> <p>Ein typischer Befehl würde so aussehen:</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_und_portainer_für_reproduzierbare_builds_optional">6. Docker und Portainer: Für reproduzierbare Builds (Optional)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Obwohl sie nicht zwingend erforderlich sind, um ein Plugin zu schreiben, sind Docker und Portainer moderne DevOps-Tools, die die Erstellung reproduzierbarer Builds und die Verwaltung Ihrer Umgebung erheblich erleichtern.</p> </div> <div class="sect2"> <h3 id="_installation_von_docker_engine">Installation von Docker Engine</h3> <div class="paragraph"> <p>Docker ermöglicht Ihnen, Ihre Anwendung und ihre Abhängigkeiten in einem Container zu verpacken.</p> </div> <div class="sect3"> <h4 id="_docker_über_das_offizielle_skript_installieren"><strong>Docker über das offizielle Skript installieren :</strong></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_ohne_sudo_verwalten_empfohlen">Docker ohne <code>sudo</code> verwalten (empfohlen):</h4> <div class="paragraph"> <p>Fügen Sie Ihren Benutzer der Gruppe hinzu`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="_docker_mit_portainer_gui_verwalten">Docker mit Portainer (GUI) verwalten</h3> <div class="paragraph"> <p>Portainer ist eine leichte Weboberfläche zur Verwaltung Ihrer Docker-Container.</p> </div> <div class="sect3"> <h4 id="_ein_volume_für_die_daten_von_portainer">Ein Volume für die Daten von Portainer :</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_container_starten">Portainer-Container starten :</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>Sie können jetzt auf die Portainer-Oberfläche zugreifen auf`https://localhost:9443`.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ihre Umgebung ist jetzt bereit! Sie verfügen über ein JDK, die am besten geeignete IDE, Gradle und JBake. Mit der Hinzufügung von Docker sind Sie auch bereit, containerisierte und reproduzierbare Builds zu erstellen. Diese solide Basis wird es Ihnen ermöglichen, sich auf das Wesentliche zu konzentrieren: die Entwicklung leistungsstarker und nützlicher Plugins.</p> </div> <div class="paragraph"> <p>Im nächsten Artikel werden wir den Befehl verwenden`gradle init`um die Struktur unseres ersten Plug‑in‑Projekts zu generieren.</p> </div> </div> </div> CI/CD Python – Teil 3: Weiter gehen mit Poetry, Docker und der erweiterten Veröffentlichung 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="#_integration_mit_poetry">Integration mit Poetry</a> <ul class="sectlevel2"> <li><a href="#_installation_von_poetry">Installation von Poetry</a></li> <li><a href="#_initialisierung_des_projekts">Initialisierung des Projekts</a></li> <li><a href="#_hinzufügen_und_installieren_von_abhängigkeiten">Hinzufügen und Installieren von Abhängigkeiten</a></li> <li><a href="#_veröffentlichung_mit_poetry">Veröffentlichung mit Poetry</a></li> </ul> </li> <li><a href="#_reproduzierbare_builds_mit_docker">Reproduzierbare Builds mit Docker</a> <ul class="sectlevel2"> <li><a href="#_beispiel_dockerfile">Beispiel Dockerfile</a></li> <li><a href="#_integration_in_github_actions">Integration in GitHub Actions</a></li> </ul> </li> <li><a href="#_bedingte_veröffentlichung">Bedingte Veröffentlichung</a></li> <li><a href="#_automatisierung_der_abhängigkeiten_mit_renovate_und_dependabot">Automatisierung der Abhängigkeiten mit Renovate und Dependabot</a> <ul class="sectlevel2"> <li><a href="#_dependabot">Dependabot</a></li> <li><a href="#_renovieren">renovieren</a></li> </ul> </li> <li><a href="#_plantuml_diagramme">PlantUML-Diagramme</a> <ul class="sectlevel2"> <li><a href="#_anwendungsfall_erweiterter_cicd">Anwendungsfall – erweiterter CI/CD</a></li> <li><a href="#_sequenz_bedingte_veröffentlichung">Sequenz – Bedingte Veröffentlichung</a></li> <li><a href="#_zustände_cicd_pipeline">Zustände – CI/CD-Pipeline</a></li> <li><a href="#_bereitstellung_cicd_architektur">Bereitstellung – CI/CD-Architektur</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>In den ersten beiden Teilen dieser Serie haben wir: - Ein funktionsfähiges CI/CD-Pipeline für eine Python-Anwendung mit GitHub Actions und PyPI eingerichtet. - Industrialisiere diese Pipeline mit Multi-Version-Tests, einer schrittweisen Veröffentlichung über Test PyPI und Qualitäts- und Sicherheitswerkzeugen.</p> </div> <div class="paragraph"> <p>In diesem dritten Teil werden wir gehen.<strong>über die bloße Veröffentlichung auf PyPI hinaus</strong>um eine vollständige, robuste und professionelle CI/CD-Pipeline mit: - <strong>Poesie</strong>für ein modernes Packaging und ein optimiertes Abhängigkeitsmanagement. - <strong>Docker</strong>um reproduzierbare und plattformübergreifende Builds zu erstellen. - <strong>bedingte Veröffentlichung</strong>um Szenarien wie release candidates zu verwalten. - <strong>Automatisierungstools</strong>(Renovate, Dependabot) um die Pipeline auf dem neuesten Stand zu halten, ohne Aufwand.</p> </div> </div> </div> <div class="sect1"> <h2 id="_integration_mit_poetry">Integration mit Poetry</h2> <div class="sectionbody"> <div class="paragraph"> <p>Poetry ersetzt die alten Verpackungstools (setup.py, requirements.txt), indem es die Verwaltung der Abhängigkeiten und des Builds zentralisiert in`pyproject.toml`.</p> </div> <div class="sect2"> <h3 id="_installation_von_poetry">Installation von 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="_initialisierung_des_projekts">Initialisierung des Projekts</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>Dies erzeugt eine Datei`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 &lt;cheroliv@example.com&gt;"] [tool.poetry.dependencies] python = "&gt;=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="_hinzufügen_und_installieren_von_abhängigkeiten">Hinzufügen und Installieren von Abhängigkeiten</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="_veröffentlichung_mit_poetry">Veröffentlichung mit Poetry</h3> <div class="paragraph"> <p>Poetry unterstützt die Veröffentlichung nativ:</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>Dieser Befehl verwendet automatisch die darin vorhandenen Informationen`pyproject.toml`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_reproduzierbare_builds_mit_docker">Reproduzierbare Builds mit Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um konsistente Ausführungen in Entwicklung, CI/CD und Produktion sicherzustellen, integriert sich Docker nahtlos mit Poetry.</p> </div> <div class="sect2"> <h3 id="_beispiel_dockerfile">Beispiel Dockerfile</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="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"]</code></pre> </div> </div> <div class="paragraph"> <p>Das garantiert : Eine eingefrorene Python-Umgebung. - Abhängigkeiten, die via verriegelt sind`poetry.lock`. - Ein auf jedem System mit Docker-Unterstützung ausführbares Image.</p> </div> </div> <div class="sect2"> <h3 id="_integration_in_github_actions">Integration in GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="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</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bedingte_veröffentlichung">Bedingte Veröffentlichung</h2> <div class="sectionbody"> <div class="paragraph"> <p>In einem professionellen Pipeline muss es möglich sein, nur in bestimmten Fällen zu veröffentlichen: - Release candidates zu Test PyPI. - Stabile Versionen zu PyPI. - Docker-Builds, die nur für`main`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="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</code></pre> </div> </div> <div class="paragraph"> <p>Dieser Ansatz verhindert versehentliche Veröffentlichungen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_automatisierung_der_abhängigkeiten_mit_renovate_und_dependabot">Automatisierung der Abhängigkeiten mit Renovate und Dependabot</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um zu verhindern, dass Ihre Abhängigkeiten veraltet werden, integrieren Sie Tools für automatische Updates.</p> </div> <div class="sect2"> <h3 id="_dependabot">Dependabot</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="yaml">version: 2 updates: - package-ecosystem: "pip" directory: "/" schedule: interval: "weekly" - package-ecosystem: "github-actions" directory: "/" schedule: interval: "weekly"</code></pre> </div> </div> <div class="paragraph"> <p>Dependabot öffnet jede Woche PRs, um die Python- und GitHub-Actions-Abhängigkeiten zu aktualisieren.</p> </div> </div> <div class="sect2"> <h3 id="_renovieren">renovieren</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="json">{ "extends": ["config:base"], "packageRules": [ { "matchManagers": ["pip"], "groupName": "python-dependencies", "schedule": ["before 6am on monday"] } ] }</code></pre> </div> </div> <div class="paragraph"> <p>Renovate ermöglicht eine feinere Kontrolle: Abhängigkeitsgruppierung, Zeitplanung und erweiterte Regeln.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_plantuml_diagramme">PlantUML-Diagramme</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_anwendungsfall_erweiterter_cicd">Anwendungsfall – erweiterter CI/CD</h3> <div class="imageblock"> <div class="content"> <img src="images/usecase-cicd.svg" alt="usecase cicd" width="820" height="317"> </div> </div> </div> <div class="sect2"> <h3 id="_sequenz_bedingte_veröffentlichung">Sequenz – Bedingte Veröffentlichung</h3> <div class="imageblock"> <div class="content"> <img src="images/sequence-cicd.svg" alt="sequence cicd" width="275" height="571"> </div> </div> </div> <div class="sect2"> <h3 id="_zustände_cicd_pipeline">Zustände – CI/CD-Pipeline</h3> <div class="imageblock"> <div class="content"> <img src="images/states-cicd.svg" alt="states cicd" width="284" height="608"> </div> </div> </div> <div class="sect2"> <h3 id="_bereitstellung_cicd_architektur">Bereitstellung – CI/CD-Architektur</h3> <div class="imageblock"> <div class="content"> <img src="images/deployment-cicd.svg" alt="deployment cicd" width="538" height="288"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>In diesem dritten Teil haben wir gesehen, wie: Modernisiere das Python-Packaging mit Poetry. - Sicherstellen von reproduzierbaren Builds via Docker. - Eine bedingte Veröffentlichung einrichten. - Automatisiere die Aktualisierung der Abhängigkeiten.</p> </div> <div class="paragraph"> <p>Sie verfügen nun über eine CI/CD-Pipeline<strong>vollständig, industrialisiert und gesichert</strong>, bereit, sich mit Ihren Projekten weiterzuentwickeln</p> </div> </div> </div> Teil 2: Industrialisieren und sichern Sie eine erweiterte Python-CI/CD-Pipeline 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="#_einführung">Einführung</a></li> <li><a href="#_architektur_des_cicd_pipelines">Architektur des CI/CD-Pipelines</a></li> <li><a href="#_projektstruktur">Projektstruktur</a></li> <li><a href="#_konfiguration_des_pakets_mit_pyproject_toml">Konfiguration des Pakets mit pyproject.toml</a></li> <li><a href="#_cicd_workflow_tests_und_qualität">CI/CD-Workflow - Tests und Qualität</a></li> <li><a href="#_release_und_deployments_workflow">Release- und Deployments-Workflow</a></li> <li><a href="#_diagramme_der_architektur">Diagramme der Architektur</a> <ul class="sectlevel2"> <li><a href="#_sequenzdiagramm_release_prozess">Sequenzdiagramm - Release-Prozess</a></li> <li><a href="#_zustandsdiagramm_paketlebenszyklus">Zustandsdiagramm - Paketlebenszyklus</a></li> <li><a href="#_bereitstellungsdiagramm_cicd_infrastruktur">Bereitstellungsdiagramm - CI/CD-Infrastruktur</a></li> </ul> </li> <li><a href="#_objekte_und_modelle_der_pipeline">Objekte und Modelle der Pipeline</a> <ul class="sectlevel2"> <li><a href="#_klassendiagramm_cicd_modelle">Klassendiagramm - CI/CD-Modelle</a></li> </ul> </li> <li><a href="#_konfiguration_der_geheimnisse">Konfiguration der Geheimnisse</a> <ul class="sectlevel2"> <li><a href="#_geheimnisse_github_actions">Geheimnisse GitHub Actions</a></li> <li><a href="#_generierung_der_pypi_tokens">Generierung der PyPI-Tokens</a></li> </ul> </li> <li><a href="#_lokale_entwicklungs_skripte">Lokale Entwicklungs-Skripte</a> <ul class="sectlevel2"> <li><a href="#_makefile">Makefile</a></li> <li><a href="#_versionsskript">Versionsskript</a></li> </ul> </li> <li><a href="#_gute_praktiken_und_empfehlungen">Gute Praktiken und Empfehlungen</a> <ul class="sectlevel2"> <li><a href="#_semantisches_versioning">Semantisches Versioning</a></li> <li><a href="#_branching_strategie">Branching-Strategie</a></li> <li><a href="#_tests_und_abdeckung">Tests und Abdeckung</a></li> <li><a href="#_sicherheit">Sicherheit</a></li> </ul> </li> <li><a href="#_monitoring_und_observabilität">Monitoring und Observabilität</a> <ul class="sectlevel2"> <li><a href="#_pipeline_metriken">Pipeline-Metriken</a></li> <li><a href="#_benachrichtigungen">Benachrichtigungen</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_zusatzressourcen">Zusatzressourcen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Ziel: Wandle eine einfache Pipeline in eine robuste Industrie-Pipeline um, die den modernen Standards des Verpackungs- und der Softwareentwicklung entspricht.</div> <p>Im ersten Teil dieser Serie haben wir eine einfache, aber wirksame CI/CD-Pipeline erstellt, um Tests und das Veröffentlichen eines Python-Pakets auf PyPI zu automatisieren.</p> </div> <div class="paragraph"> <p>Es ist jetzt Zeit, diese Pipeline zu professionalisieren. In diesem zweiten Teil werden wir:</p> </div> <div class="ulist"> <ul> <li> <p>Migrieren Sie zum modernen pyproject.toml-Standard,</p> </li> <li> <p>Fügen Sie Qualitäts- und Sicherheitstools hinzu (Black, Mypy, Bandit, Safety)</p> </li> <li> <p>Einrichten von Multi-Version-Tests,</p> </li> <li> <p>Ein schrittweises Deployment über Test PyPI integrieren,</p> </li> <li> <p>Versionierung automatisieren und die Überwachung der Pipeline verbessern.</p> </li> </ul> </div> <div class="paragraph"> <p>Bereite dich darauf vor, von einer funktionsfähigen Pipeline zu einer professionellen CI/CD‑Infrastruktur zu wechseln.</p> </div> <div class="paragraph"> <p>Das Bereitstellen einer Python‑Anwendung auf PyPI erfordert eine robuste CI/CD‑Pipeline, die Tests, den Build und die Veröffentlichung der Pakete automatisiert. Dieser Artikel beschreibt die Einrichtung eines vollständigen Pipelines mit GitHub Actions für eine Python‑CLI‑Anwendung unter Verwendung der Best Practices des modernen Python‑Ökosystems.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architektur_des_cicd_pipelines">Architektur des CI/CD-Pipelines</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Pipeline, den wir bauen werden, folgt einem mehrstufigen Ansatz:</p> </div> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-240209330be37ea1820d73d2f941dae1.png" alt="Diagram" width="919" height="604"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_projektstruktur">Projektstruktur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Eine CLI-Python-Anwendung, die für die Verteilung bereit ist, muss einer standardisierten Struktur entsprechen:</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="_konfiguration_des_pakets_mit_pyproject_toml">Konfiguration des Pakets mit pyproject.toml</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Datei`pyproject.toml`ist der moderne Standard zum Konfigurieren von Python-Paketen:</p> </div> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="toml">[build-system] requires = ["setuptools&gt;=45", "wheel", "setuptools_scm&gt;=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 = "&gt;=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&gt;=0.9.0", "yt-dlp&gt;=2023.7.6", "google-api-python-client&gt;=2.0.0", "google-auth-oauthlib&gt;=1.0.0", "pyyaml&gt;=6.0", "rich&gt;=13.0.0", ] dynamic = ["version"] [project.optional-dependencies] dev = [ "pytest&gt;=7.0.0", "pytest-cov&gt;=4.0.0", "pytest-mock&gt;=3.10.0", "black&gt;=23.0.0", "flake8&gt;=6.0.0", "mypy&gt;=1.0.0", "pre-commit&gt;=3.0.0", "tox&gt;=4.0.0", ] test = [ "pytest&gt;=7.0.0", "pytest-cov&gt;=4.0.0", "pytest-mock&gt;=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_workflow_tests_und_qualität">CI/CD-Workflow - Tests und Qualität</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Haupt-Workflow (<code>ci.yml</code>) führt die Tests auf mehreren Python-Versionen durch:</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="_release_und_deployments_workflow">Release- und Deployments-Workflow</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Release-Workflow (<code>release.yml</code>) verwaltet die automatische Veröffentlichung auf PyPI :</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/') &amp;&amp; '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/') &amp;&amp; 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/') &amp;&amp; !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="_diagramme_der_architektur">Diagramme der Architektur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sequenzdiagramm_release_prozess">Sequenzdiagramm - Release-Prozess</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-018da36d6acb230ea9cf831b68ff4790.png" alt="Diagram" width="954" height="832"> </div> </div> </div> <div class="sect2"> <h3 id="_zustandsdiagramm_paketlebenszyklus">Zustandsdiagramm - Paketlebenszyklus</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-d53089ba19bc47e11e64ca3192a1daff.png" alt="Diagram" width="525" height="740"> </div> </div> </div> <div class="sect2"> <h3 id="_bereitstellungsdiagramm_cicd_infrastruktur">Bereitstellungsdiagramm - CI/CD-Infrastruktur</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-a417b726c54e83f3bb1d4b7b9fcab56d.png" alt="Diagram" width="712" height="604"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_objekte_und_modelle_der_pipeline">Objekte und Modelle der Pipeline</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_klassendiagramm_cicd_modelle">Klassendiagramm - CI/CD-Modelle</h3> <div class="imageblock"> <div class="content"> <img src="images/diag-plantuml-md5-8e577c6775af500a61e19e4e57d61499.png" alt="Diagram" width="814" height="635"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfiguration_der_geheimnisse">Konfiguration der Geheimnisse</h2> <div class="sectionbody"> <div class="paragraph"> <p>Damit die Pipeline funktioniert, müssen Sie die folgenden Geheimnisse in GitHub konfigurieren:</p> </div> <div class="sect2"> <h3 id="_geheimnisse_github_actions">Geheimnisse GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="pygments highlight"><code data-lang="bash"># Dans Settings &gt; Secrets and variables &gt; 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="_generierung_der_pypi_tokens">Generierung der PyPI-Tokens</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 &gt; 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="_lokale_entwicklungs_skripte">Lokale Entwicklungs-Skripte</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um die Entwicklung zu erleichtern, erstellen Sie Hilfsskripte:</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="_versionsskript">Versionsskript</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) &lt; 2: current = get_current_version() print(f"Version actuelle: {current}") print("Usage: python version.py &lt;new_version&gt; [message]") sys.exit(1) new_version = sys.argv[1] message = sys.argv[2] if len(sys.argv) &gt; 2 else None create_version_tag(new_version, message)</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_gute_praktiken_und_empfehlungen">Gute Praktiken und Empfehlungen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_semantisches_versioning">Semantisches Versioning</h3> <div class="paragraph"> <p>Verwenden Sie die semantische Versionierung (SemVer):</p> </div> <div class="ulist"> <ul> <li> <p><code>MAJOR.MINOR.PATCH</code> (ex: 1.2.3)</p> </li> <li> <p>`MAJOR`inkompatible Änderungen</p> </li> <li> <p><code>MINOR</code>: neue kompatible Funktionen</p> </li> <li> <p>`PATCH`kompatible Fehlerbehebungen</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_branching_strategie">Branching-Strategie</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="_tests_und_abdeckung">Tests und Abdeckung</h3> <div class="ulist"> <ul> <li> <p>Minimale Codeabdeckung: 85%</p> </li> <li> <p>Einheitstests für die Geschäftslogik</p> </li> <li> <p>Integrations-Tests für die Adapter</p> </li> <li> <p>End-to-End-Tests für die CLI</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_sicherheit">Sicherheit</h3> <div class="ulist"> <ul> <li> <p>Automatischer Abhängigkeitsscan (Safety)</p> </li> <li> <p>Statische Codeanalyse (Bandit)</p> </li> <li> <p>Geheimnisse nie im Code</p> </li> <li> <p>Verwendung von spezifischen PyPI-Token</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_monitoring_und_observabilität">Monitoring und Observabilität</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pipeline_metriken">Pipeline-Metriken</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="_benachrichtigungen">Benachrichtigungen</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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieser vollständige CI/CD-Pipeline für Python bietet:</p> </div> <div class="ulist"> <ul> <li> <p><strong>vollständige Automatisierung</strong>: von der Validierung des Codes zur Veröffentlichung</p> </li> <li> <p><strong>Sicherheit</strong>: automatische Scans und sichere Verwaltung der Geheimnisse</p> </li> <li> <p><strong>Qualität</strong>: Tests mehrerer Versionen, Linting und Codeabdeckung</p> </li> <li> <p><strong>Zuverlässigkeit</strong>: schrittweise Bereitstellung über Test PyPI</p> </li> <li> <p><strong>Nachverfolgbarkeit</strong>: artifacts, Berichte und releases GitHub</p> </li> </ul> </div> <div class="paragraph"> <p>Die Annahme dieser Praktiken gewährleistet einen robusten und professionellen Bereitstellungsprozess für Ihre Python-CLI-Anwendungen, wodurch die Wartung und Weiterentwicklung Ihrer Projekte langfristig erleichtert wird.</p> </div> </div> </div> <div class="sect1"> <h2 id="_zusatzressourcen">Zusatzressourcen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://packaging.python.org/">Benutzerhandbuch für Python-Packaging</a></p> </li> <li> <p><a href="https://docs.github.com/en/actions">GitHub Actions Dokumentation</a></p> </li> <li> <p><a href="https://pypi.org/help/">PyPI-Hilfe-Dokumentation</a></p> </li> <li> <p><a href="https://semver.org/">Semantische Versionsverwaltungsspezifikation</a></p> </li> <li> <p><a href="https://keepachangelog.com/">Ein Changelog führen</a></p> </li> </ul> </div> </div> </div> Teil 1: Richten Sie ein einfaches CI/CD-Pipeline für Python und PyPI ein. 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="#_einführung">Einführung</a></li> <li><a href="#_architektur_des_pipelines">Architektur des Pipelines</a></li> <li><a href="#_konfiguration_des_ci_pipelines">Konfiguration des CI-Pipelines</a> <ul class="sectlevel2"> <li><a href="#_struktur_des_ci_workflows">Struktur des CI-Workflows</a></li> <li><a href="#_analyse_der_ci_schritte">Analyse der CI-Schritte</a> <ul class="sectlevel3"> <li><a href="#_1_auslöser_on">1. Auslöser (<code>on</code>)</a></li> </ul> </li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Ziel : Den Leser beim Aufbau eines minimalistischen, aber funktionsfähigen CI/CD-Pipelines für eine Python-Anwendung begleiten, mit automatischer Bereitstellung auf PyPI.</div> <p>Die Automatisierung der Entwicklungsprozesse ist in modernen Projekten unverzichtbar geworden. Ein gut konzipierter CI/CD-Pipeline ermöglicht nicht nur das frühzeitige Erkennen von Regressions im Entwicklungszyklus, sondern auch die vollständige Automatisierung des Bereitstellungsprozesses.</p> </div> <div class="paragraph"> <p>In diesem Artikel werden wir untersuchen, wie man eine vollständige Pipeline mit GitHub Actions für eine Python-Anwendung einrichtet, von Continuous Integration (CI) bis zum Continuous Deployment (CD) auf PyPI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architektur_des_pipelines">Architektur des Pipelines</h2> <div class="sectionbody"> <div class="paragraph"> <p>Unser Pipeline besteht aus zwei unterschiedlichen Workflows:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>CI-Pipeline</strong>Ausgeführt bei jedem Push und Pull Request</p> </li> <li> <p><strong>CD-Pipeline</strong>: Ausgelöst nur während der GitHub-Releases</p> </li> </ol> </div> <div class="imageblock"> <div class="content"> <img src="images/ci-cd-overview.svg" alt="ci cd overview" width="394" height="648"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfiguration_des_ci_pipelines">Konfiguration des CI-Pipelines</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_des_ci_workflows">Struktur des CI-Workflows</h3> <div class="paragraph"> <p>Der CI-Workflow ist darauf ausgelegt, jeden Beitrag zum Code zu validieren. Hier ist seine vollständige Konfiguration :</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="_analyse_der_ci_schritte">Analyse der CI-Schritte</h3> <div class="sect3"> <h4 id="_1_auslöser_on">1. Auslöser (<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 ---- Die Pipeline wird ausgelöst bei : - Jeder Push auf dem Branch`main` - Jede Pull-Request in Richtung`main` Dieser Ansatz gewährleistet, dass der Hauptcode stabil bleibt und dass jeder Beitrag vor der Integration validiert wird. ==== 2. Ausführungsumgebung ---- runs-on: ubuntu-latest Ubuntu Latest bietet einen guten Kompromiss zwischen Leistung, Kosten und Kompatibilität für die meisten Python-Projekte. ==== 3. Checkout des Codes ```yaml ---- ---- - name: Checkout code uses: actions/checkout@v4 ---- Die Aktion`checkout@v4`ruft den Quellcode des Repositorys ab. Die Version v4 bringt Leistungs- und Sicherheitsverbesserungen. ==== 4. Python-Konfiguration ---- - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' Die Verwendung von`'3.x'`ermöglicht das automatische Verwenden der letzten stabilen Version von Python 3, was die Wartung vereinfacht. ==== 5. Installation der Abhängigkeiten ```yaml ---- ---- - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock ---- Dieser Schritt : - Aktualisiere pip auf die neueste Version - Installiere die Projektabhängigkeiten - Füge Entwicklungstools (Linting und Tests) hinzu ==== 6. Linting mit Ruff ---- - name: Run Linting (Ruff) run: ruff check . **Ruff**est ein ultra-schneller Python-Linter, geschrieben in Rust. Er kombiniert die Funktionen mehrerer Tools (Flake8, Black, isort) zu einem leistungsfähigen Werkzeug. ==== 7. Ausführung der Tests ```yaml ---- ---- - name: Run Tests (Pytest) run: pytest ---- Pytest führt die gesamte Testsuite aus und stellt sicher, dass die Änderungen keine Regressionen einführen. == Konfiguration des Bereitstellungs-Pipelines (CD) === Struktur des CD-Workflows Der CD-Workflow wird nur bei GitHub-Releases ausgelöst und automatisiert die Veröffentlichung auf 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/* ---- === Analyse der CD-Schritte ==== Auslöser Release ---- on: release: types: - published Der CD-Pipeline wird nur beim Publizieren eines GitHub-Release ausgelöst. Dieser Ansatz gewährleistet eine präzise Kontrolle der Bereitstellungen. ==== 2. Installation der Build-Tools ```yaml ---- ---- pip install setuptools wheel twine ---- - **setuptools**: Python-Verpackungswerkzeuge - **Rad**: modernes Python-Distributionsformat - **Bindfaden**Sicheres Tool zum Hochladen nach PyPI ==== 3. Konfiguration der Authentifizierung ---- env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} Die Authentifizierung verwendet ein PyPI-API-Token, das als GitHub-Secret gespeichert ist, was sicherer ist als herkömmliche Anmeldeinformationen. ==== 4. Build und Veröffentlichung ```yaml ---- ---- run: | python setup.py sdist bdist_wheel twine upload dist/* ---- - `sdist`Erstelle eine Quellcode-Distribution - `bdist_wheel`: Erstelle ein Wheel (binäre Verteilung) - `twine upload`Veröffentlichte die Distributionen auf PyPI == Konfiguration des Python-Pakets === Struktur der setup.py Damit die Pipeline funktioniert, muss Ihr Projekt eine Datei enthalten.`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="&gt;=3.8", install_requires=[ "typer&gt;=0.9.0", "yt-dlp&gt;=2023.1.6", "google-api-python-client&gt;=2.70.0", "google-auth-oauthlib&gt;=0.7.1", "pymonad&gt;=2.4.0", "pyyaml&gt;=6.0", ], entry_points={ "console_scripts": [ "playlist-downloader=cli:app", ], }, ) ---- === Wesentliche Punkte des setup.py 1. **Metadaten**: Name, Version, Autor, Beschreibung 2. **Abhängigkeiten**: Liste der erforderlichen Pakete 3. **Eintrittspunkte**: Freigegebene CLI-Befehle 4. **Klassifikatoren**: Metadaten für PyPI == Sicherung mit den GitHub Secrets === Konfiguration des PyPI-Tokens 1. **Erstelle ein API-Token auf PyPI**: - Melden Sie sich bei PyPI an - Gehe zu Account Settings &gt; API tokens - Erstelle ein neues Token mit den entsprechenden Berechtigungen 1. **Geheimnis zu GitHub hinzufügen**: - Repository-Einstellungen &gt; Geheimnisse und Variablen &gt; Aktionen - Erstellen Sie ein neues Geheimnis namens`PYPI_API_TOKEN` - Fügen Sie Ihr PyPI-Token ein [plantuml, secrets-flow, svg] ---- @startuml !theme plain actor Developer as dev participant "GitHub-Repository" as repo participant "GitHub-Aktionen" as actions participant PyPI dev -&gt; repo : Configure PYPI_API_TOKEN secret repo -&gt; actions : Trigger CD pipeline on release actions -&gt; actions : Access secret securely actions -&gt; PyPI : Authenticate with token PyPI -&gt; PyPI : Validate and publish package note over actions, PyPI Token never exposed in logs Automatic rotation possible end note @enduml ---- == Workflow der vollständigen Bereitstellung === Bereitstellungssequenz [plantuml, deployment-sequence, svg] ---- @startuml !theme plain actor Developer as dev participant "Local Git" as git participant "GitHub" as github participant "GitHub-Aktionen" as actions participant PyPI participant "Endbenutzer" as users dev -&gt; git : git tag v1.0.0 dev -&gt; git : git push origin v1.0.0 git -&gt; github : Push tag dev -&gt; github : Create release from tag github -&gt; actions : Trigger CD pipeline actions -&gt; actions : Checkout code actions -&gt; actions : Setup Python environment actions -&gt; actions : Install build tools actions -&gt; actions : Build distributions (sdist + wheel) actions -&gt; PyPI : Upload to PyPI with token PyPI -&gt; PyPI : Validate and publish users -&gt; PyPI : pip install playlist-downloader note over dev, github Release creation can be automated or done manually through GitHub UI end note @enduml ---- === Zustände der Pipeline [plantuml, pipeline-states, svg] ---- @startuml !theme plain [*] --&gt; Idle Idle --&gt; CI_Running : Push/PR created CI_Running --&gt; CI_Success : All checks pass CI_Running --&gt; CI_Failed : Linting/Tests fail CI_Success --&gt; Idle : Merge completed CI_Failed --&gt; Idle : Fix and retry Idle --&gt; CD_Running : Release published CD_Running --&gt; CD_Success : Package published CD_Running --&gt; CD_Failed : Build/Upload error CD_Success --&gt; Idle : Package available on PyPI CD_Failed --&gt; Idle : Fix and retry release note on link #red : Blocks merge note on link #green : Allows deployment @enduml ---- == Gute Praktiken und Optimierungen === 1. Versionsverwaltung Verwenden Sie semantische Git-Tags: ---- git tag -a v1.2.3 -m "Release version 1.2.3" git push origin v1.2.3 === 2. Matrix-Tests Um auf mehreren Python-Versionen zu testen: ```yaml ---- ---- strategy: matrix: python-version: [3.8, 3.9, "3.10", "3.11"] ---- === 3. Abhängigkeits-Cache Beschleunigen Sie die Builds mit dem Cache: ---- - name: Cache pip dependencies uses: actions/cache@v3 with: path: ~/.cache/pip key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }} === 4. Bereitstellungsumgebungen Verwenden Sie GitHub-Umgebungen für kontrollierte Bereitstellungen: ```yaml ---- ---- jobs: deploy: environment: production runs-on: ubuntu-latest ---- == Anwendungsfall und Architektur === Use-Case-Diagramm [plantuml, use-cases, svg] ---- @startuml !theme plain left to right direction actor "Entwickler" as dev actor "GitHub Actions" as ga actor "Endbenutzer" as user package "CI/CD-System" { usecase "Linting ausführen" as lint usecase "Tests ausführen" as test usecase "Paket bauen" as build usecase "Auf PyPI veröffentlichen" as publish usecase "Release erstellen" as release } dev --&gt; lint : Pushes code dev --&gt; test : Pushes code dev --&gt; release : Creates release ga --&gt; build : On release trigger ga --&gt; publish : After successful build user --&gt; publish : Downloads package lint .&gt; test : triggers test .&gt; build : on success build .&gt; publish : on success @enduml ---- === Architektur der Bereitstellung [plantuml, deployment-architecture, svg] ---- @startuml !theme plain cloud "GitHub" { [Source Repository] [GitHub Actions] [Secrets Store] } cloud "PyPI" { [Package Registry] [Distribution Files] } node "CI/CD-Pipeline" { [Linting] [Testing] [Building] [Publishing] } [Source Repository] --&gt; [GitHub Actions] : Triggers [GitHub Actions] --&gt; [Linting] [Linting] --&gt; [Testing] [Testing] --&gt; [Building] [Building] --&gt; [Publishing] [Publishing] --&gt; [Package Registry] : Uploads [Secrets Store] --&gt; [Publishing] : Provides token note as N1 Secure token-based authentication end note [Secrets Store] .. N1 @enduml ---- == Überwachung und Debugging === Logs und Monitoring GitHub Actions stellt detaillierte Logs für jeden Schritt bereit. Für das Debuggen: 1. **Untersuchen Sie die Logs**von jedem Schritt 2. **Aktiviere den Debug**mit`ACTIONS_STEP_DEBUG` 3. **Verwenden Sie Artifacts**Um die Build-Dateien zu sichern ---- - name: Upload build artifacts uses: actions/upload-artifact@v3 if: failure() with: name: build-logs path: build/ === Benachrichtigungen Fügen Sie Slack- oder E-Mail-Benachrichtigungen hinzu: ```yaml ---- ---- - name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: ${{ job.status }} webhook_url: ${{ secrets.SLACK_WEBHOOK }} ---- == Fazit Die Einrichtung eines robusten CI/CD-Pipelines mit GitHub Actions verändert die Entwicklungserfahrung radikal. Durch Automatisierung von Linting, Tests und Bereitstellung: - **Reduziere die Fehler**in Produktion - **Beschleunigen Sie die Zyklen**der Entwicklung - **Verbessern Sie das Vertrauen**in Ihren Releases - **Erleichtern Sie die Zusammenarbeit**im Team Dieser Pipeline kann an verschiedene Arten von Python-Projekten angepasst werden, indem die Linting-Tools, Test-Frameworks oder Bereitstellungsziele angepasst werden. Die anfängliche Investition in die Einrichtung dieser Workflows amortisiert sich schnell durch den Zeitgewinn und die Reduzierung manueller Fehler bei den Bereitstellungen. == Zusätzliche Ressourcen - https://docs.github.com/en/actions[GitHub Actions-Dokumentation] - https://packaging.python.org/[Python-Verpackungsleitfaden] - https://docs.pytest.org/[Dokumentation Pytest] - https://docs.astral.sh/ruff/[Dokumentation Ruff] - https://twine.readthedocs.io/[Dokumentation Twine] ✅ funktionale Pipeline erreicht! Du hast jetzt eine einfache CI/CD-Pipeline, die es dir ermöglicht, deine Tests zu automatisieren und dein Python‑Paket direkt über GitHub Actions auf PyPI zu veröffentlichen. Allerdings bleibt diese Pipeline bewusst minimalistisch. Sie deckt noch einige wesentliche Aspekte in einem professionellen Kontext nicht ab: Tests mehrerer Versionen von Python, Automatische Sicherheitsanalyse, Schrittweise Bereitstellung via Test PyPI, Überwachung und Metriken des Pipelines, Automatisierung des Versionings und Integration moderner Best Practices (pyproject.toml). Im nächsten Teil gehen wir zum nächsten Schritt über. Sie lernen, diese Grundpipeline in eine echte industrielle Bereitstellungskette umzuwandeln, die robust und sicher ist und für produktionsreife Python-Projekte bereit ist. ----</code></pre> </div> </div> </div> </div> </div> </div> Entwicklung eines Discord-Musik-Bots: Funktionale Architektur und Log-getriebene Entwicklung 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="#_einführung">Einführung</a></li> <li><a href="#_kontext_und_aktuelle_herausforderungen">Kontext und aktuelle Herausforderungen</a> <ul class="sectlevel2"> <li><a href="#_entwicklung_der_musik_apis">Entwicklung der Musik-APIs</a></li> <li><a href="#_ansatz_log_getriebene_entwicklung">Ansatz Log-getriebene Entwicklung</a></li> </ul> </li> <li><a href="#_konzeptionelle_architektur">Konzeptionelle Architektur</a></li> <li><a href="#_stack_technik_und_funktionales_paradigma">Stack-Technik und funktionales Paradigma</a> <ul class="sectlevel2"> <li><a href="#_technologische_auswahl">Technologische Auswahl</a></li> <li><a href="#_angewandte_funktionale_prinzipien">Angewandte funktionale Prinzipien</a></li> </ul> </li> <li><a href="#_agile_methodik_und_backlog">Agile-Methodik und Backlog</a> <ul class="sectlevel2"> <li><a href="#_haupt_epics">Haupt-Epics</a> <ul class="sectlevel3"> <li><a href="#_episch_1_infrastruktur_bot_discord">Episch 1: Infrastruktur-Bot Discord</a></li> <li><a href="#_epic_2_integration_spotify">Epic 2: Integration Spotify</a></li> <li><a href="#_epic_3_youtube_integration">Epic 3: YouTube-Integration</a></li> <li><a href="#_epic_4_musikfunktionen">Epic 4: Musikfunktionen</a></li> </ul> </li> <li><a href="#_detaillierte_user_stories">detaillierte User Stories</a> <ul class="sectlevel3"> <li><a href="#_us1_1_initialisierung_des_bots">US1.1: Initialisierung des Bots</a></li> <li><a href="#_us2_1_intelligente_spotify_suche">US2.1 : Intelligente Spotify-Suche</a></li> <li><a href="#_us3_1_extraktion_youtube_resiliente">US3.1 : Extraktion YouTube Resiliente</a></li> </ul> </li> </ul> </li> <li><a href="#_ansatz_des_logdrivendevelopment">Ansatz des Log‑Driven‑Development</a> <ul class="sectlevel2"> <li><a href="#_logging_strategie">Logging-Strategie</a></li> <li><a href="#_logstruktur">Logstruktur</a></li> <li><a href="#_beispiel_des_log_designs">Beispiel des Log-Designs</a></li> </ul> </li> <li><a href="#_validierungsarchitektur_mit_pydantic">Validierungsarchitektur mit Pydantic</a> <ul class="sectlevel2"> <li><a href="#_datenmodelle">Datenmodelle</a></li> </ul> </li> <li><a href="#_funktionale_fehlerverwaltung">Funktionale Fehlerverwaltung</a> <ul class="sectlevel2"> <li><a href="#_monaden_und_fehlerbehandlung">Monaden und Fehlerbehandlung</a></li> </ul> </li> <li><a href="#_strategie_zur_umgehung_der_beschränkungen">Strategie zur Umgehung der Beschränkungen</a> <ul class="sectlevel2"> <li><a href="#_multi_quelle_ansatz">Multi-Quelle-Ansatz</a></li> </ul> </li> <li><a href="#_iterativer_entwicklungsplan">Iterativer Entwicklungsplan</a> <ul class="sectlevel2"> <li><a href="#_sprintplanung">Sprintplanung</a></li> <li><a href="#_qualitätsmetriken">Qualitätsmetriken</a></li> </ul> </li> <li><a href="#_bereitstellung_und_monitoring">Bereitstellung und Monitoring</a> <ul class="sectlevel2"> <li><a href="#_produktionsarchitektur">Produktionsarchitektur</a></li> <li><a href="#_proaktives_monitoring">Proaktives Monitoring</a></li> </ul> </li> <li><a href="#_fazit_und_ausblick">Fazit und Ausblick</a> <ul class="sectlevel2"> <li><a href="#_nächste_schritte">Nächste Schritte</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_einführung"><a class="anchor" href="#_einführung"></a>Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Entwicklung eines Discord-Bots, der die Spotify- und YouTube-APIs integriert, stellt eine moderne technische Herausforderung dar, insbesondere angesichts der jüngsten Beschränkungen und Weiterentwicklungen der Plattformen. Dieser Artikel stellt einen methodischen Ansatz vor, der auf dem<strong>Loggetriebene Entwicklung</strong>(LDD), eine Erweiterung der testgetriebenen Entwicklung, angewendet in einem funktionalen Paradigma mit Python.</p> </div> <div class="paragraph"> <p>Unser Ziel ist es, einen robusten, wartbaren und erweiterbaren Bot zu schaffen, der in der Lage ist, den aktuellen Beschränkungen der Musik‑APIs zu begegnen, während er gleichzeitig ein flüssiges Benutzererlebnis auf Discord bietet.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kontext_und_aktuelle_herausforderungen"><a class="anchor" href="#_kontext_und_aktuelle_herausforderungen"></a>Kontext und aktuelle Herausforderungen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_entwicklung_der_musik_apis"><a class="anchor" href="#_entwicklung_der_musik_apis"></a>Entwicklung der Musik-APIs</h3> <div class="paragraph"> <p>Musikplattformen haben ihre Zugriffsrichtlinien erheblich verschärft:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Spotify</strong>Beschränkungen beim Zugriff auf Metadaten, Beschränkung der Kontingente</p> </li> <li> <p><strong>YouTube</strong>: Verschärfte Anti-Bot-Politik, Komplexifizierung der Authentifizierung</p> </li> <li> <p><strong>Uneinigkeit</strong>: Neue Sicherheits- und Leistungsanforderungen</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_ansatz_log_getriebene_entwicklung"><a class="anchor" href="#_ansatz_log_getriebene_entwicklung"></a>Ansatz Log-getriebene Entwicklung</h3> <div class="paragraph"> <p>LDD erweitert TDD, indem es die Protokolle in das Herz des Entwicklungsprozesses stellt :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Definition der Logs</strong>vor der Implementierung</p> </li> <li> <p><strong>Validierung durch Beobachtung</strong>erwartete Verhaltensweisen</p> </li> <li> <p><strong>Vollständige Rückverfolgbarkeit</strong>Datenflüsse</p> </li> <li> <p><strong>Proaktives Debugging</strong>in Erwartung von Fehlern</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konzeptionelle_architektur"><a class="anchor" href="#_konzeptionelle_architektur"></a>Konzeptionelle Architektur</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-28c10471b469a73f843490e8e60f75f1.png" alt="Diagram" width="777" height="618"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_stack_technik_und_funktionales_paradigma"><a class="anchor" href="#_stack_technik_und_funktionales_paradigma"></a>Stack-Technik und funktionales Paradigma</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_technologische_auswahl"><a class="anchor" href="#_technologische_auswahl"></a>Technologische Auswahl</h3> <div class="paragraph"> <p>Unser Stack dreht sich um funktionale Programmierung:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>PyMonade</strong></dt> <dd> <p>Umgang mit Nebeneffekten und Funktionskomposition</p> </dd> <dt class="hdlist1"><strong>Pydantic</strong></dt> <dd> <p>Typesichere Datenvalidierung und Serialisierung</p> </dd> <dt class="hdlist1"><strong>Asyncio</strong></dt> <dd> <p>Asynchrone Programmierung für APIs</p> </dd> <dt class="hdlist1"><strong>Structlog</strong></dt> <dd> <p>Strukturiertes Logging für das LDD</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_angewandte_funktionale_prinzipien"><a class="anchor" href="#_angewandte_funktionale_prinzipien"></a>Angewandte funktionale Prinzipien</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-bd6883864cee4f4eb3738c642eaf0b8f.png" alt="Diagram" width="687" height="554"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_agile_methodik_und_backlog"><a class="anchor" href="#_agile_methodik_und_backlog"></a>Agile-Methodik und Backlog</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_haupt_epics"><a class="anchor" href="#_haupt_epics"></a>Haupt-Epics</h3> <div class="paragraph"> <p>Unsere Entwicklung ist um vier Haupt-Epics organisiert:</p> </div> <div class="sect3"> <h4 id="_episch_1_infrastruktur_bot_discord"><a class="anchor" href="#_episch_1_infrastruktur_bot_discord"></a>Episch 1: Infrastruktur-Bot Discord</h4> <div class="paragraph"> <p><strong>Geschäftswert</strong> : solide und erweiterbare Basis</p> </div> <div class="paragraph"> <p><strong>Akzeptanzkriterien</strong> : - Stabile Discord-Verbindung mit Wiederverbindungsverwaltung - Modulares Befehlssystem - integriertes strukturiertes Logging Zentrale Fehlerbehandlung</p> </div> </div> <div class="sect3"> <h4 id="_epic_2_integration_spotify"><a class="anchor" href="#_epic_2_integration_spotify"></a>Epic 2: Integration Spotify</h4> <div class="paragraph"> <p><strong>Geschäftswert</strong> : Zugriff auf Musikmetadaten</p> </div> <div class="paragraph"> <p><strong>Akzeptanzkriterien</strong>: Sichere OAuth2-Authentifizierung - Suche nach Tracks mit intelligentem Cache API-Quotenverwaltung - Fallback bei Netzwerkfehlern</p> </div> </div> <div class="sect3"> <h4 id="_epic_3_youtube_integration"><a class="anchor" href="#_epic_3_youtube_integration"></a>Epic 3: YouTube-Integration</h4> <div class="paragraph"> <p><strong>Geschäftswert</strong> : Zugriff auf Audioinhalte</p> </div> <div class="paragraph"> <p><strong>Akzeptanzkriterien</strong> : - Legale Umgehung der Einschränkungen - Optimierte Audioextraktion - Verwaltung der privaten/gelöschten Videos - Respect des ToS YouTube</p> </div> </div> <div class="sect3"> <h4 id="_epic_4_musikfunktionen"><a class="anchor" href="#_epic_4_musikfunktionen"></a>Epic 4: Musikfunktionen</h4> <div class="paragraph"> <p><strong>Geschäftswert</strong> : vollständige Benutzererfahrung</p> </div> <div class="paragraph"> <p><strong>Akzeptanzkriterien</strong> : - Audio-Vortrag hoher Qualität - Intelligente Wiedergabeliste - Commandes vocales Discord plattformübergreifende Synchronisation</p> </div> </div> </div> <div class="sect2"> <h3 id="_detaillierte_user_stories"><a class="anchor" href="#_detaillierte_user_stories"></a>detaillierte User Stories</h3> <div class="sect3"> <h4 id="_us1_1_initialisierung_des_bots"><a class="anchor" href="#_us1_1_initialisierung_des_bots"></a>US1.1: Initialisierung des Bots</h4> <div class="paragraph"> <p><strong>Als</strong> Entwickler <strong>Ich will</strong> ein Discord-Bot, der sich zuverlässig verbindet <strong>Um</strong> die Verfügbarkeit des Dienstes zu gewährleisten</p> </div> <div class="paragraph"> <p><strong>DoD (Definition of Done)</strong> : - [ ] Der Bot verbindet sich automatisch beim Start - [ ] Strukturierte logs dokumentieren jeden Schritt - [ ] Automatische Wiederverbindung bei Unterbrechung - [ ] Integrations-Tests bestehen</p> </div> </div> <div class="sect3"> <h4 id="_us2_1_intelligente_spotify_suche"><a class="anchor" href="#_us2_1_intelligente_spotify_suche"></a>US2.1 : Intelligente Spotify-Suche</h4> <div class="paragraph"> <p><strong>Als Discord-Nutzer *Ich möchte</strong> nach Titeln über Spotify suchen <strong>Um</strong> Musik zu entdecken und zu teilen</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Bestellung`/search`funktional - [ ] Relevante Ergebnisse mit Metadaten - [ ] Lokaler Cache zur Optimierung der Anfragen - [ ] Gemeisterte Behandlung von API-Fehlern</p> </div> </div> <div class="sect3"> <h4 id="_us3_1_extraktion_youtube_resiliente"><a class="anchor" href="#_us3_1_extraktion_youtube_resiliente"></a>US3.1 : Extraktion YouTube Resiliente</h4> <div class="paragraph"> <p><strong>Als</strong> System <strong>Ich will</strong> YouTube-Audio zuverlässig extrahieren Um die Kontinuität des Dienstes aufrechtzuerhalten</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Extraktion ohne Verstoß gegen die ToS - [ ] Optimale Audioqualität - [ ] Verwaltung der geografischen Beschränkungen - [ ] detaillierte Logs der Vorgänge</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ansatz_des_logdrivendevelopment"><a class="anchor" href="#_ansatz_des_logdrivendevelopment"></a>Ansatz des Log‑Driven‑Development</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_logging_strategie"><a class="anchor" href="#_logging_strategie"></a>Logging-Strategie</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-a24fccfd99076527841aa57c892fa54b.png" alt="Diagram" width="687" height="633"> </div> </div> </div> <div class="sect2"> <h3 id="_logstruktur"><a class="anchor" href="#_logstruktur"></a>Logstruktur</h3> <div class="paragraph"> <p>Unser LDD-Ansatz verwendet strukturierte Logs mit semantischen Ebenen:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>SPUR</strong></dt> <dd> <p>Detaillierter Datenfluss</p> </dd> <dt class="hdlist1"><strong>DEBUG</strong></dt> <dd> <p>Interne Zustände der Funktionen</p> </dd> <dt class="hdlist1"><strong>INFO</strong></dt> <dd> <p>erfolgreiche Geschäftsprozesse</p> </dd> <dt class="hdlist1"><strong>WARN</strong></dt> <dd> <p>Verschlechterte, aber kontrollierte Situationen</p> </dd> <dt class="hdlist1"><strong>Fehler</strong></dt> <dd> <p>Fehler, die Eingreifen erfordern</p> </dd> <dt class="hdlist1"><strong>KRITISCH</strong></dt> <dd> <p>Systemausfälle</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_beispiel_des_log_designs"><a class="anchor" href="#_beispiel_des_log_designs"></a>Beispiel des Log-Designs</h3> <div class="paragraph"> <p>Bevor wir die Spotify-Suchfunktion implementieren, definieren wir ihre Protokolle :</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="_validierungsarchitektur_mit_pydantic"><a class="anchor" href="#_validierungsarchitektur_mit_pydantic"></a>Validierungsarchitektur mit Pydantic</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_datenmodelle"><a class="anchor" href="#_datenmodelle"></a>Datenmodelle</h3> <div class="paragraph"> <p>Unser funktionaler Ansatz bevorzugt die frühzeitige Validierung:</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="_funktionale_fehlerverwaltung"><a class="anchor" href="#_funktionale_fehlerverwaltung"></a>Funktionale Fehlerverwaltung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_monaden_und_fehlerbehandlung"><a class="anchor" href="#_monaden_und_fehlerbehandlung"></a>Monaden und Fehlerbehandlung</h3> <div class="paragraph"> <p>Die Verwendung von PyMonade ermöglicht eine elegante Fehlerbehandlung:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-9aa66ba98ba7a86d7710fd9828d281bb.png" alt="Diagram" width="492" height="494"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_strategie_zur_umgehung_der_beschränkungen"><a class="anchor" href="#_strategie_zur_umgehung_der_beschränkungen"></a>Strategie zur Umgehung der Beschränkungen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_multi_quelle_ansatz"><a class="anchor" href="#_multi_quelle_ansatz"></a>Multi-Quelle-Ansatz</h3> <div class="paragraph"> <p>Angesichts der Beschränkungen der APIs verfolgen wir eine Diversifizierungsstrategie:</p> </div> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-f5784c39f064ff48b27fd4d449d99a4f.png" alt="Diagram" width="665" height="744"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_iterativer_entwicklungsplan"><a class="anchor" href="#_iterativer_entwicklungsplan"></a>Iterativer Entwicklungsplan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sprintplanung"><a class="anchor" href="#_sprintplanung"></a>Sprintplanung</h3> <div class="paragraph"> <p>Unsere Entwicklung folgt einem Zyklus aus zweiwöchigen Sprints:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>Sprint 1-2</strong></dt> <dd> <p>Infrastruktur und Discord Bot Kern</p> </dd> <dt class="hdlist1"><strong>Sprint 3-4</strong></dt> <dd> <p>Integration Spotify mit LDD</p> </dd> <dt class="hdlist1"><strong>Sprint 5-6</strong></dt> <dd> <p>YouTube-Integration und Umgehungen</p> </dd> <dt class="hdlist1"><strong>Sprint 7-8</strong></dt> <dd> <p>Erweiterte musikalische Features</p> </dd> <dt class="hdlist1"><strong>Sprint 9-10</strong></dt> <dd> <p>Optimierung und Produktion</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_qualitätsmetriken"><a class="anchor" href="#_qualitätsmetriken"></a>Qualitätsmetriken</h3> <div class="paragraph"> <p>Jeder Sprint wird nach Folgendem bewertet:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Log-Abdeckung</strong>: &gt;90% der kritischen Pfade</p> </li> <li> <p><strong>Zuverlässigkeit API</strong>: &lt;1% nicht behandelte Fehler</p> </li> <li> <p><strong>Leistung</strong>: &lt;500ms durchschnittliche Antwortzeit</p> </li> <li> <p><strong>Wartbarkeit</strong>: Zyklomatische Komplexität &lt;10</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bereitstellung_und_monitoring"><a class="anchor" href="#_bereitstellung_und_monitoring"></a>Bereitstellung und Monitoring</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_produktionsarchitektur"><a class="anchor" href="#_produktionsarchitektur"></a>Produktionsarchitektur</h3> <div class="imageblock"> <div class="content"> <img src="diag-plantuml-md5-f4abeba5d725d8526c4f32f7d97c6960.png" alt="Diagram" width="938" height="381"> </div> </div> </div> <div class="sect2"> <h3 id="_proaktives_monitoring"><a class="anchor" href="#_proaktives_monitoring"></a>Proaktives Monitoring</h3> <div class="paragraph"> <p>Der LDD erleichtert ein intelligentes Monitoring:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Warnungen basierend auf Log-Mustern</strong></p> </li> <li> <p><strong>Verhaltensanomalien-Erkennung</strong></p> </li> <li> <p><strong>Echtzeit-Geschäftsmetriken</strong></p> </li> <li> <p><strong>Debugging unterstützt durch Log-Korrelation</strong></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_und_ausblick"><a class="anchor" href="#_fazit_und_ausblick"></a>Fazit und Ausblick</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diese methodische Herangehensweise kombiniert die Vorteile des funktionalen Paradigmas mit der Robustheit des Log‑Driven‑Development. Sie ermöglicht uns :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Anticiper les problèmes</strong>dank den im Voraus konzipierten Logs</p> </li> <li> <p><strong>Die Qualität aufrechterhalten</strong>durch die kontinuierliche Validierung</p> </li> <li> <p><strong>Schnell anpassen</strong>zu den Änderungen der APIs</p> </li> <li> <p><strong>Die Rückverfolgbarkeit sicherstellen</strong>vollständige Vorgänge</p> </li> </ol> </div> <div class="paragraph"> <p>Die iterative Entwicklung und die modulare Architektur gewährleisten Skalierbarkeit angesichts der sich ändernden Einschränkungen der Musikplattformen.</p> </div> <div class="sect2"> <h3 id="_nächste_schritte"><a class="anchor" href="#_nächste_schritte"></a>Nächste Schritte</h3> <div class="ulist"> <ul> <li> <p><strong>Phase 1</strong>: Implementierung des Kernels mit PyMonade</p> </li> <li> <p><strong>Phase 2</strong>Spotify-Integration mit intelligentem Cache</p> </li> <li> <p><strong>Phase 3</strong>resiliente YouTube-Lösung</p> </li> <li> <p><strong>Phase 4</strong>: Erweiterte Features und Optimierung</p> </li> </ul> </div> <div class="paragraph"> <p>Dieses solide konzeptionelle Fundament wird es uns ermöglichen, technische Herausforderungen zu meistern, während wir ein außergewöhnliches Benutzererlebnis bieten.</p> </div> <hr> <div class="paragraph"> <p>Dieser Artikel wird von einer technischen Reihe gefolgt, die die Implementierung jeder Komponente mit Codebeispielen und funktionalen Mustern beschreibt.</p> </div> </div> </div> </div> Kühlen und die Temperatur seines Laptops unter Ubuntu überwachen 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="#_ziel_dieses_leitfadens">Ziel dieses Leitfadens</a></li> <li><a href="#_voraussetzung">Voraussetzung</a></li> <li><a href="#_installieren_und_konfigurieren_der_werkzeuge">Installieren und Konfigurieren der Werkzeuge</a> <ul class="sectlevel2"> <li><a href="#_lm_sensors_um_die_sensoren_zu_erkennen">lm-sensors` um die Sensoren zu erkennen</a></li> <li><a href="#_tlp_intelligenter_energiemanager">tlp` : intelligenter Energiemanager</a></li> <li><a href="#_cpufrequtils_die_cpu_frequenzen_begrenzen">cpufrequtils` : die CPU-Frequenzen begrenzen</a></li> <li><a href="#_auto_cpufreq_einfache_dynamische_verwaltung">auto-cpufreq` : Einfache dynamische Verwaltung</a></li> <li><a href="#_thermald_automatischer_thermischer_schutz">thermald` : automatischer thermischer Schutz</a></li> </ul> </li> <li><a href="#_echtzeitüberwachung">Echtzeitüberwachung</a> <ul class="sectlevel2"> <li><a href="#_sensors_auf_der_kommandozeile">sensors` auf der Kommandozeile</a></li> <li><a href="#_gui_option_psensor">GUI-Option : `psensor</a></li> </ul> </li> <li><a href="#_zusätzliche_tipps">Zusätzliche Tipps</a></li> <li><a href="#_das_system_bereinigen_um_überlastungen_zu_begrenzen">Das System bereinigen, um Überlastungen zu begrenzen.</a></li> <li><a href="#_um_weiter_zu_gehen">Um weiter zu gehen</a></li> <li><a href="#_fazit">�📚 Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Spüren Sie, dass Ihr Laptop unter Ubuntu ungewöhnlich heiß wird? Dieser Artikel schlägt Ihnen eine Vorgehensweise vor<strong>Software</strong>vollständig für<strong>abkühlen</strong>, <strong>überwachen</strong> et <strong>die Temperatur kontrollieren</strong>von Ihrer Maschine.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ziel_dieses_leitfadens">Ziel dieses Leitfadens</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Die Gesamttemperatur des Computers reduzieren</p> </li> <li> <p>Energieverwaltung optimieren</p> </li> <li> <p>Überwachen Sie die kritischen Komponenten (CPU, GPU usw.)</p> </li> <li> <p>Vermeide Verzögerungen aufgrund des<strong>thermische Drosselung</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="_voraussetzung">Voraussetzung</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Eine Ubuntu-Maschine (20.04 oder höher empfohlen)</p> </li> <li> <p>Internetverbindung</p> </li> <li> <p>Kenntnisse in der Kommandozeile (Anfänger bis Mittelstufe)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_installieren_und_konfigurieren_der_werkzeuge">Installieren und Konfigurieren der Werkzeuge</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_lm_sensors_um_die_sensoren_zu_erkennen">lm-sensors` um die Sensoren zu erkennen</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>Antworten!`YES`zu allen Fragen von`sensors-detect`um die Module zu erkennen.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_tlp_intelligenter_energiemanager">tlp` : intelligenter Energiemanager</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="381" height="390"> </div> </div> </div> <div class="sect2"> <h3 id="_cpufrequtils_die_cpu_frequenzen_begrenzen">cpufrequtils` : die CPU-Frequenzen begrenzen</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>`powersave`Begrenzt die Frequenzspitzen</p> </li> <li> <p>`performance`Bevorzugt Leistung auf Kosten der Temperatur</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_auto_cpufreq_einfache_dynamische_verwaltung">auto-cpufreq` : Einfache dynamische Verwaltung</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_automatischer_thermischer_schutz">thermald` : automatischer thermischer Schutz</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="_echtzeitüberwachung">Echtzeitüberwachung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sensors_auf_der_kommandozeile">sensors` auf der Kommandozeile</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_option_psensor">GUI-Option : `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>Einfache grafische Oberfläche für CPU, GPU, Lüfter.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_zusätzliche_tipps">Zusätzliche Tipps</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Schwere Tabs und Anwendungen schließen (z. B. Browser)</p> </li> <li> <p>Vermeiden Sie intensive Nutzung im Batteriebetrieb</p> </li> <li> <p>Prozesse via überwachen`htop`[Empty 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="_das_system_bereinigen_um_überlastungen_zu_begrenzen">Das System bereinigen, um Überlastungen zu begrenzen.</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="_um_weiter_zu_gehen">Um weiter zu gehen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sie können einen Dienst erstellen`systemd`personalisiert, um bestimmte Einstellungen beim Start automatisch anzuwenden. Möchten Sie ein Beispiel in einem kommenden Beitrag? Lassen Sie es mich wissen!</p> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">�📚 Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Indem Sie diese einfachen Werkzeuge kombinieren, werden Sie gewinnen:</p> </div> <div class="ulist"> <ul> <li> <p>Eine kontrollierte CPU-Temperatur</p> </li> <li> <p>Weniger Lüftergeräusch</p> </li> <li> <p>Eine bessere Autonomie</p> </li> </ul> </div> <div class="paragraph"> <p>Vergessen Sie nicht, Ihre Temperaturen regelmäßig zu überwachen, um Überhitzung zu vermeiden.</p> </div> <div class="paragraph"> <p><em><em>_ Besser vorbeugen als seine CPU zu schmelzen. </em>_</em></p> </div> </div> </div> Debugging-Geschichte: Die Launen von Firefox mit Bootstrap 5 zähmen 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="#_das_schlachtfeld_ein_modell_drei_browser_mehrere_renderings">Das Schlachtfeld: ein Modell, drei Browser, mehrere Renderings</a></li> <li><a href="#_problem_1_die_fliegende_karte_des_abschnitts_hero">Problem 1: Die fliegende Karte des Abschnitts 'Hero'</a></li> <li><a href="#_problem_2_die_kannibalistische_navigationsleiste">Problem 2: Die kannibalistische Navigationsleiste</a></li> <li><a href="#_problem_3_die_anarchische_typographie">Problem 3: Die anarchische Typographie</a></li> <li><a href="#_problem_4_die_überlaufende_navigationsleiste">Problem 4: Die überlaufende Navigationsleiste</a></li> <li><a href="#_problem_5_das_unsichtbare_hamburger_menü">Problem 5: Das unsichtbare Hamburger-Menü</a></li> <li><a href="#_fazit_die_lehren_aus_einem_beharrlichen_debugging">Fazit: die Lehren aus einem beharrlichen Debugging</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>Lesezeit :</strong> ungefähr 7 Minuten <strong>Niveau :</strong> Mittelstufe</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>In diesem detaillierten Praxisbeispiel werden wir die häufigsten und manchmal frustrierendsten Browser‑Kompatibilitätsprobleme, die bei der Erstellung eines UI‑Mockups mit Bootstrap 5.2 auftreten, auseinandersetzen. Von der Flexbox‑Verwaltung bis zur Subtilität des Schriftarten‑Rendings entdecken Sie unser Debugging‑Parcours, um ein wackliges Design unter Firefox in eine pixel‑perfekte Erfahrung auf allen Browsern zu verwandeln.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_das_schlachtfeld_ein_modell_drei_browser_mehrere_renderings">Das Schlachtfeld: ein Modell, drei Browser, mehrere Renderings</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jeder Frontend-Entwickler kennt dieses Gefühl. Nach Stunden der Arbeit ist das Layout endlich perfekt. Die Ausrichtungen sind klar, die Typographie ist elegant, die Animationen sind flüssig. Man seufzt zufrieden, bewundert seine Arbeit auf Chrome (oder Brave, oder Edge) und öffnet anschließend, um sicherzugehen, das Projekt auf Firefox. Und dann ist das Drama da. Elemente, die überlaufen, zerbrochene Ausrichtungen, Schriftarten mit wirren Größen… die schöne Harmonie ist entwichen.</p> </div> <div class="paragraph"> <p>Das ist genau das Szenario, mit dem wir konfrontiert waren, als wir eine neue Portfolio-Schnittstelle entwickelt haben. Die Anforderungen waren einfach: eine moderne, responsive Startseite mit einem Theme-Selektor (hell, dunkel und hohem Kontrast), unter Verwendung von <strong>vanilla JavaScript</strong> und der neuesten Version von <strong>Bootstrap 5.2</strong>.</p> </div> <div class="paragraph"> <p>Dieser Artikel ist keine Liste von Wundersmitteln. Er ist das Protokoll unserer Debugging‑Sitzung, ein tiefes Eindringen in das „pourquoi“ der Unterschiede im Rendering zwischen den Engines Blink (Chromium, Brave) und Gecko (Firefox), und zeigt, dass robuste und moderne Lösungen immer besser sind als hastig zusammengeflickte Notlösungen.</p> </div> <div class="paragraph"> <p>Use-Case-Diagramm: Der Debugging-Prozess</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/usecase-debugging-firefox.svg" alt="usecase debugging firefox" width="975" height="377"> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/components-solution-architecture.svg" alt="components solution architecture" width="1191" height="5160"> </div> <div class="title">Figure 1. Komponentendiagramm : Architektur der Frontend-Lösung</div> </div> </div> </div> <div class="sect1"> <h2 id="_problem_1_die_fliegende_karte_des_abschnitts_hero">Problem 1: Die fliegende Karte des Abschnitts 'Hero'</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der erste Fehler war auch der sichtbarste. Der Willkommensbereich ("hero") besteht aus zwei Spalten: links der Haupttitel; rechts eine Vorstellungskarte.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Das Symptom:</strong>Auf Chrome und Brave waren die beiden Spalten exakt vertikal zentriert. Auf Firefox fiel die rechte Karte unerklärlicherweise unter den linken Text.</p> </li> <li> <p><strong>Die Untersuchung :</strong>Der HTML-Code schien jedoch einfach und korrekt zu sein, indem er die Standardklassen von Bootstrap verwendete.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;section id="home" class="hero-section"&gt; &lt;div class="container"&gt; &lt;!-- Cette ligne est la clé du problème --&gt; &lt;div class="row align-items-center min-vh-100"&gt; &lt;div class="col-lg-6"&gt; &lt;!-- Contenu de gauche --&gt; &lt;/div&gt; &lt;div class="col-lg-6"&gt; &lt;!-- Carte de droite --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Unser benutzerdefiniertes CSS für`.hero-section`definierte`display: flex` et <code>align-items: center</code>, und die Klasse`min-vh-100`gab der Zeile tatsächlich eine minimale Höhe (<code>div.row</code>). Dann, warum hat Firefox sich geweigert, die Spalten zu zentrieren ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Die tiefere Ursache:</strong>Das ist ein Lehrbeispiel dafür, wie Render-Engines die impliziten Höhen interpretieren. Die`&lt;section&gt;`hatte eine`min-height`, aber kein`height`explizit. Um anzuwenden`align-items-center`innerhalb von`div.row`, Firefox muss die Referenzhöhe dieses Containers kennen. Wie seine Eltern (<code>div.container</code> et la `&lt;section&gt;`sie selbst hatten keine Höhe<strong>streng</strong>, Firefox war verloren. Der Blink-Motor, der nachgiebiger ist, kann die Absicht "erraten" und die Elemente zentrieren. Gecko, treuer zur Spezifikation, tut das nicht.</p> </li> <li> <p><strong>Die Lösung:</strong>Die Höhe explizit machen. Wir haben den gezwungen`.container` et le `.row`um 100% der Höhe ihres jeweiligen Elternteils einzunehmen, indem du die Hilfsklasse verwendest`h-100`von Bootstrap.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;section id="home" class="hero-section"&gt; &lt;div class="container h-100"&gt; &lt;div class="row align-items-center min-vh-100 h-100"&gt; &lt;!-- ... --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt;</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>Wenn ein`align-items`Flexbox funktioniert nicht wie erwartet auf der vertikalen Achse, überprüfen Sie immer, dass der Container eine Höhe hat`height` ou <code>min-height</code>) definiert und, falls das Problem besteht (vor allem bei Firefox), stellen Sie sicher, dass die übergeordneten Zwischencontainer diese Höhe korrekt weitergeben.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_problem_2_die_kannibalistische_navigationsleiste">Problem 2: Die kannibalistische Navigationsleiste</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p>Einmal die Hero-Sektion ausgerichtet, trat ein weiteres Problem auf: Die Navigationsleiste mit ihrer Klasse`fixed-top`, befand sich über dem Titel. Ein`padding-top: 80px`Es war als Lösung auf den Abschnitt 'Hero' angewendet worden.</p> <div class="ulist"> <ul> <li> <p><strong>Das Symptom:</strong> Le `padding`war ausreichend auf Chrome, aber nicht auf Firefox, wo der Titel immer teilweise verdeckt war.</p> </li> <li> <p><strong>Die Grundursache :</strong>Die Verwendung eines "magische Zahl" (<code>80px</code>) ist eine sehr schlechte Praxis. Die Höhe eines Elements wie einer Navigationsleiste kann je nach Browser um einige Pixel variieren, aufgrund subtiler Unterschiede im Rendering von Schriftarten, Abständen oder sogar den Einstellungen des Nutzers. Auf einen festen Wert zu verlassen ist das Rezept für ein fragiles Design.</p> </li> <li> <p><strong>Die Lösung :</strong>Eine dynamische und fehlerfreie Lösung in JavaScript. Wir haben ein kleines Skript geschrieben für:</p> </li> <li> <p>Die <strong>tatsächliche</strong> Höhe der Navigationsleiste nach dem Rendern der Seite messen.</p> </li> <li> <p>Wenden Sie diese gemessene Höhe an`padding-top`im Abschnitt „Hero“</p> </li> <li> <p>Führen Sie diese Funktion bei jeder Fenstergrößenänderung aus, um sich an Änderungen anzupassen (wie dem Wechsel zum Hamburger‑Menü).</p> </li> </ul> </div> </li> </ol> </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 &amp;&amp; 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 2. Sequenzdiagramm: Dynamische Padding-Anpassung</div> </div> <div class="paragraph"> <p>Parallel haben wir natürlich die Regel gelöscht.<code>padding-top: 80px;`unserer Datei`styles.css</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problem_3_die_anarchische_typographie">Problem 3: Die anarchische Typographie</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Der folgende Bedenken war am schädlichsten für das Markenimage: die Größe der Hauptüberschrift.</div> <ul> <li> <p><strong>Das Symptom:</strong>Auf Firefox war die Schrift des Titels "Entwickler-Trainer&#8230;&#8203;" riesig, fast schockierend, während sie in anderen Browsern harmonisch war.</p> </li> <li> <p><strong>Die tiefere Ursache:</strong>Der Titel verwendete eine Klasse`display-4`de Bootstrap. Diese Klassen verwenden responsive Schriftgrößen, oft basierend auf der Einheit`rem`und Medienabfragen. Noch einmal, der Renderalgorithmus von Firefox, kombiniert mit der Schriftart "Inter", führte zu einer deutlich größeren Größenberechnung auf unserer Auflösung von 1920x1080.</p> </li> <li> <p><strong>Die Lösung :</strong>Die Kontrolle mit der CSS-Funktion zurückerlangen`clamp()<code>. Diese Funktion ist eine Revolution für die flüssige Typographie. Sie ermöglicht es, eine Schriftgröße mit drei Werten festzulegen: eine Mindestgröße, eine "bevorzugte" Größe (die sich an die Breite der Ansicht anpasst,`vw</code>), und eine maximale Größe.</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>Mit`clamp()<code>, Wir konnten dem Browser sagen: \"Vergrößere die Schrift mit dem Bildschirm, aber überschreite nicht*<strong>nie</strong>*die Grenze von`2.5rem</code>. Dies hat das Rendering sofort auf allen Browsern harmonisiert, indem es uns die absolute Kontrolle über das endgültige Aussehen gab.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problem_4_die_überlaufende_navigationsleiste">Problem 4: Die überlaufende Navigationsleiste</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Das ist das Problem, das uns am meisten Kopfzerbrechen bereitet hat und das schließlich die tiefe Natur der mikroskopischen Rendering-Unterschiede enthüllt hat.</div> <ul> <li> <p><strong>Das Symptom:</strong>Auf einem Bildschirm von 1920x1080 wurden die letzten Links des Menüs ("Blog", "Contact") nach rechts vom Bildschirm gedrückt, jedoch nur in Firefox.</p> </li> <li> <p><strong>Die tiefe Ursache:</strong>Nach mehreren erfolglosen Versuchen (die Bootstrap-Breakpoints zu ändern von`lg` à <code>xl`dann`xxl</code>), Wir haben es verstanden. Die Ursache lag nicht in der Bootstrap-Logik, sondern in einer einfachen Breitenberechnung. Auf Firefox ist die Summe der Breiten aller Links, einschließlich ihrer`padding` et `margin`Auf Subpixel genau war es <strong>leicht</strong> größer als 1920 Pixel. In Chrome war dieser gleiche Betrag <strong>leicht</strong> geringer. Es fehlten uns einige Pixel.</p> </li> <li> <p><strong>Die Lösung:</strong>Eine chirurgische Reduzierung der Abstände. Da es keine Frage war, Firefox speziell mit veralteten CSS-Hacks anzuzielen, war die einzige saubere Lösung, einen gemeinsamen Stil zu finden, der überall funktioniert. Deshalb haben wir die äußeren Abstände und den horizontalen Innenabstand jedes Navigationslinks leicht verringert.</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>Diese Reduktion, quasi unsichtbar für das bloße Auge bei einem einzelnen Element, hat uns insgesamt den notwendigen Platz verschafft, damit alle Links in den Rahmen auf Firefox passen, während das Erscheinungsbild auf anderen Browsern nahezu identisch bleibt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_problem_5_das_unsichtbare_hamburger_menü">Problem 5: Das unsichtbare Hamburger-Menü</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Das letzte Problem, und nicht das geringste, betraf die mobile Zugänglichkeit.</div> <ul> <li> <p><strong>Das Symptom:</strong>Im responsiven Modus (Menü "hamburger") war das Menüsymbol auf den Themen "dark" und "high-contrast" unsichtbar.</p> </li> <li> <p><strong>Die tiefere Ursache:</strong>Das Symbol des Menüs von Bootstrap 5 ist ein`background-image` (un SVG encodé en URL). Par défaut, la couleur de son trait est foncée, optimisée pour un fond clair. Elle ne s&#8217;adapte pas automatiquement au changement de thème.</p> </li> <li> <p><strong>Die Lösung:</strong>Verwende die CSS-Variablen von Bootstrap, um das Symbol zu überschreiben. Wir haben ein neues SVG-Symbol definiert, diesmal jedoch mit einem weißen Strich (<code>#ffffff</code>)", und wir haben sie speziell angewendet, wenn die Themen`dark` ou `high-contrast`sind aktiv.</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>Die Anpassung von Bootstrap-Komponenten wie dieser erfolgt zunehmend über das Überschreiben von CSS-Variablen (<code>--bs-component-property</code>), die die sauberste und nachhaltigste Methode ist.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_fazit_die_lehren_aus_einem_beharrlichen_debugging">Fazit: die Lehren aus einem beharrlichen Debugging</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieser Weg, obwohl er manchmal frustrierend ist, ist reich an Lehren. Jedes gelöste Problem stärkt eine grundlegende Wahrheit der Webentwicklung:<strong>Nichts ersetzt einen strengen Multi-Browser-Test</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 3. Mindmap : Zusammenfassung des Debuggings und der gelernten Lehren</div> </div> <div class="olist arabic"> <div class="title">Hier sind die Lehren, die wir behalten:</div> <ol class="arabic"> <li> <p><strong>Firefox ist ein Verbündeter:</strong>Seine größte Treue zu den CSS-Standards zwingt uns, einen robusteren und weniger mehrdeutigen Code zu schreiben.</p> </li> <li> <p><strong>Vermeiden Sie "magische Zahlen":</strong>Die festen Werte (wie`padding-top: 80px`) sind Zeitbomben. Bevorzuge immer dynamische Lösungen (JavaScript) oder relative Lösungen (Flexbox, Grid).</p> </li> <li> <p><strong>Beherrschen Sie Ihre Typografie:</strong>Benutzen Sie`clamp()`für die vollständige Kontrolle über die Größe responsiver Schriftarten.</p> </li> <li> <p><strong>Denke in "Komponenten" :</strong>Um Bootstrap anzupassen, überschreibe seine CSS-Variablen anstatt die Regeln zu vervielfachen, die das Framework überschreiben.</p> </li> <li> <p><strong>Zielen Sie nicht auf einen Browser:</strong>Die Lösung ist fast nie, einen "hack" für einen bestimmten Browser zu machen, sondern einen gemeinsamen Stil zu finden, der überall funktioniert.</p> </li> </ol> </div> <div class="paragraph"> <p>Zum Schluss ist das Mockup jetzt robust, vorhersehbar und bereit, in ein Templating-System integriert zu werden. Jeder behobene Fehler war kein Misserfolg, sondern ein Schritt hin zu einem qualitativ besseren Code.</p> </div> </div> </div> Löse die Herausforderung der Gradle Unit-Tests mit `gradle.properties 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="#_das_problem_isolieren_der_unit_tests_eines_gradle_plugins">Das Problem: Isolieren der Unit-Tests eines Gradle-Plugins</a> <ul class="sectlevel2"> <li><a href="#_architektur_des_problems">Architektur des Problems</a></li> <li><a href="#_die_versuchung_einer_falschen_guten_idee">Die Versuchung einer falschen guten Idee</a></li> </ul> </li> <li><a href="#_die_lösung_die_eigenschaft_simulieren_mit_extrapropertiesextension">Die Lösung: Die Eigenschaft simulieren mit `ExtraPropertiesExtension</a> <ul class="sectlevel2"> <li><a href="#_schritt_1_extrapropertiesextension_verstehen">Schritt 1: ExtraPropertiesExtension verstehen</a></li> <li><a href="#_schritt_2_einrichtung_des_tests_vorbereitung">Schritt 2 : Einrichtung des Tests - Vorbereitung</a></li> <li><a href="#_schritt_3_einspritzung_der_eigenschaft">Schritt 3: Einspritzung der Eigenschaft</a></li> <li><a href="#_schritt_4_lösungsflussdiagramm">Schritt 4: Lösungsflussdiagramm</a></li> <li><a href="#_schritt_5_vergleich_vorhernachher">Schritt 5: Vergleich Vorher/Nachher</a></li> <li><a href="#_schritt_6_verwaltung_mehrerer_testfälle">Schritt 6: Verwaltung mehrerer Testfälle</a></li> <li><a href="#_endgültige_architektur_der_lösung">endgültige Architektur der Lösung</a></li> </ul> </li> <li><a href="#_die_vorteile_dieses_ansatzes">Die Vorteile dieses Ansatzes</a></li> <li><a href="#_gute_praktiken_und_tipps">Gute Praktiken und Tipps</a> <ul class="sectlevel2"> <li><a href="#_erstellen_einer_hilfsmethode">Erstellen einer Hilfsmethode</a></li> <li><a href="#_validierung_der_eigenschaften">Validierung der Eigenschaften</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div class="sect1"> <h2 id="_das_problem_isolieren_der_unit_tests_eines_gradle_plugins">Das Problem: Isolieren der Unit-Tests eines Gradle-Plugins</h2> <div class="sectionbody"> <div class="paragraph"> <p>Beim Schreiben von Unit-Tests für ein Gradle-Plugin ist eine häufige Herausforderung, die Abhängigkeiten an die Projektkonfiguration zu verwalten, wie z.B. die Eigenschaften, die in der Datei definiert sind.<code>gradle.properties</code>. In unserem Fall, das Plugin`jbake.ghpages`musste eine Eigenschaft lesen`site_config_path`um korrekt zu funktionieren. Der Unit-Test für die Aufgabe`initialize`Er musste das Verhalten des Plugins in Anwesenheit dieser Eigenschaft überprüfen.</p> </div> <div class="paragraph"> <p>Das grundlegende Problem ist, dass Unit-Tests nach ihrem Wesen <strong>isoliert</strong> sein müssen. Die Verwendung von`ProjectBuilder`von Gradle erstellt eine Instanz von`Project`im Speicher, vollständig von einem echten Projekt im Dateisystem getrennt. Daher liest diese Testinstanz die Datei nicht automatisch.<code>gradle.properties`und hat daher keine Kenntnis von der Eigenschaft`site_config_path</code>.</p> </div> <div class="sect2"> <h3 id="_architektur_des_problems">Architektur des Problems</h3> <div class="paragraph"> <p>Das folgende Diagramm veranschaulicht die Trennung zwischen der Testumgebung und dem Dateisystem :</p> </div> <div class="imageblock"> <div class="content"> <img src="./images/test-isolation-problem.svg" alt="test isolation problem" width="833" height="295"> </div> </div> </div> <div class="sect2"> <h3 id="_die_versuchung_einer_falschen_guten_idee">Die Versuchung einer falschen guten Idee</h3> <div class="paragraph"> <p>Ein erster Ansatz könnte darin bestehen, eine Datei zu erstellen.`gradle.properties`fiktiv in den Testressourcen</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>Diese Methode ist jedoch zum Scheitern verurteilt, weil`ProjectBuilder`ist nicht dafür ausgelegt, das Dateisystem nach Konfigurationsdateien zu scannen. Der Test würde isoliert bleiben und diese Datei ignorieren.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_lösung_die_eigenschaft_simulieren_mit_extrapropertiesextension">Die Lösung: Die Eigenschaft simulieren mit `ExtraPropertiesExtension</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die elegante Lösung dieses Problems besteht nicht darin, die Datei zu <strong>lesen</strong>, sondern darin, das Vorhandensein der Eigenschaft direkt im Objekt zu <strong>simulieren</strong>.`Project`Gradle stellt ein leistungsfähigen Mechanismus dafür bereit: die <strong>zusätzlichen Eigenschaften</strong> (Extra Properties).</p> </div> <div class="sect2"> <h3 id="_schritt_1_extrapropertiesextension_verstehen">Schritt 1: ExtraPropertiesExtension verstehen</h3> <div class="paragraph"> <p>`ExtraPropertiesExtension`ist ein Schlüssel-Wert-Container, der jedem Objekt des Gradle-Modells angehängt ist. Er ermöglicht das dynamische Hinzufügen von Eigenschaften zu einem Projekt, einer Aufgabe oder einer anderen Gradle-Erweiterung.</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="_schritt_2_einrichtung_des_tests_vorbereitung">Schritt 2 : Einrichtung des Tests - Vorbereitung</h3> <div class="paragraph"> <p>Lasst uns zunächst die Grundstruktur unseres Unit-Tests erstellen :</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="_schritt_3_einspritzung_der_eigenschaft">Schritt 3: Einspritzung der Eigenschaft</h3> <div class="paragraph"> <p>Hier ist der detaillierte Prozess, um die Eigenschaft im Testprojekt einzufügen:</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="_schritt_4_lösungsflussdiagramm">Schritt 4: Lösungsflussdiagramm</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="_schritt_5_vergleich_vorhernachher">Schritt 5: Vergleich Vorher/Nachher</h3> <div class="imageblock"> <div class="content"> <img src="./images/before-after-comparison.svg" alt="before after comparison" width="1222" height="5759"> </div> </div> </div> <div class="sect2"> <h3 id="_schritt_6_verwaltung_mehrerer_testfälle">Schritt 6: Verwaltung mehrerer Testfälle</h3> <div class="paragraph"> <p>Um verschiedene Szenarien zu testen, erstellen wir mehrere Tests mit unterschiedlichen Konfigurationen:</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 -&gt; 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&lt;FileNotFoundException&gt; { task.actions.forEach { it.execute(task) } } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_endgültige_architektur_der_lösung">endgültige Architektur der Lösung</h3> <div class="imageblock"> <div class="content"> <img src="./images/final-architecture.svg" alt="final architecture" width="754" height="631"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_vorteile_dieses_ansatzes">Die Vorteile dieses Ansatzes</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Vollständige Isolierung</strong>: Der Test hängt von keiner externen Datei ab. Er ist autonom und kann in jeder Umgebung (lokal, CI/CD, usw.) zuverlässig ausgeführt werden.</p> </li> <li> <p><strong>Klarheit und Intention</strong>Der Test erklärt explizit die Voraussetzungen für seine Ausführung. Wer den Test liest, sieht sofort, dass das Plugin die Eigenschaft benötigt.`site_config_path`um zu funktionieren.</p> </li> <li> <p><strong>Wartbarkeit</strong>Wenn sich der Name der Eigenschaft ändert, muss er nur an einer Stelle im Test aktualisiert werden, ohne dass Testkonfigurationsdateien manipuliert werden müssen.</p> </li> <li> <p><strong>Flexibilität</strong>Es wird trivial, verschiedene Szenarien zu testen, indem man einfach den Wert der injizierten Eigenschaft in jedem Test ändert (gültiger Wert, ungültig, fehlend usw.).</p> </li> <li> <p><strong>Leistung</strong>Es wird keine Datei eingelesen, alles passiert im Speicher, was die Tests schneller macht.</p> </li> <li> <p><strong>Reproduzierbarkeit</strong>: Die Tests sind deterministisch, da sie nicht vom Zustand des Dateisystems abhängen.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_gute_praktiken_und_tipps">Gute Praktiken und Tipps</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_erstellen_einer_hilfsmethode">Erstellen einer Hilfsmethode</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&lt;String, String&gt; ): Project { val project = ProjectBuilder.builder() .withProjectDir(projectDir) .build() val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) properties.forEach { (key, value) -&gt; extra.set(key, value) } return project } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_validierung_der_eigenschaften">Validierung der Eigenschaften</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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Anstatt sich damit abzumühen, dass eine Einheitstestumgebung Konfigurationsdateien liest, besteht die beste Praxis darin, den erforderlichen Zustand zu simulieren. Die Verwendung von`ExtraPropertiesExtension`Um Gradle-Eigenschaften programmgesteuert festzulegen, ist die sauberste und robusteste Methode, um effektive und zuverlässige Unit-Tests für Plugins durchzuführen.</p> </div> <div class="paragraph"> <p>Diese Technik wandelt ein Problem mit externen Abhängigkeiten in eine einfache Dependency Injection um, im Kern der Philosophie des Test‑Driven Development (TDD). Sie bietet vollständige Kontrolle über die Testumgebung und hält gleichzeitig die Isolation aufrecht, die für qualitativ hochwertige Unit‑Tests erforderlich ist.</p> </div> <div class="paragraph"> <p>Die in diesem Artikel dargestellten Diagramme und Beispiele zeigen, wie dieser Ansatz schrittweise und methodisch umgesetzt werden kann, wodurch eine robuste und wartbare Testsuite für Ihre Gradle‑Plugins erstellt werden kann.</p> </div> </div> </div> Optimierung der Gradle-Aufgabenverwaltung mit Kotlin DSL und buildSrc 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="#_zentralisiere_die_konfigurationen_mit_allprojects_und_subprojects">Zentralisiere die Konfigurationen mit <code>allprojects</code> und `subprojects</a></li> <li><a href="#_sourceplantuml">[source,plantuml]</a></li> <li><a href="#_enduml">@enduml</a></li> <li><a href="#_sourcekotlin">[source,kotlin]</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Die Automatisierung von Build-Aufgaben ist für jedes Softwareprojekt entscheidend, und Gradle bietet mit seinem Kotlin-DSL eine außergewöhnliche Flexibilität. Im Verlauf unseres Gesprächs haben wir erforscht, wie man Build-Logik zentralisieren und wiederverwenden kann, insbesondere für Testberichte, indem man<strong>allprojects</strong>, <strong>buildSrc</strong>, und personalisierte Aufgaben in Kotlin.</p> </div> </div> </div> <div class="sect1"> <h2 id="_zentralisiere_die_konfigurationen_mit_allprojects_und_subprojects">Zentralisiere die Konfigurationen mit <code>allprojects</code> und `subprojects</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Blöcke`allprojects` et `subprojects`in Ihrem`build.gradle.kts`Die Wurzeln sind grundlegend für die Anwendung gemeinsamer Konfigurationen über dein Multi-Modul-Projekt.</p> </div> <div class="paragraph"> <p>*<code>allprojects { &#8230;&#8203; }`Wende die Konfiguration auf den<strong>Root-Projekt und zu allen seinen Unterprojekten</strong>. Ideal zum Definierenden eines`group</code>, eine`version`, oder einige`repositories`gemeinsame. *<code>subprojects { &#8230;&#8203; }`Wende die Konfiguration an<strong>nur zu den Unterprojekten</strong>, ohne das Stammprojekt. Perfekt zum Anwenden von modulspezifischen Plugins (wie`java</code> ou <code>kotlin-jvm</code>) oder gemeinsame Abhängigkeiten Ihrer Bibliotheken.</p> </div> <div class="paragraph"> <p>Hier ist ein illustratives Beispiel:</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&lt;org.gradle.api.tasks.testing.Test&gt; { 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`Das Schweizer Taschenmesser der Build-Logik</p> </div> <div class="paragraph"> <p>Wenn die Logik Ihrer Aufgaben komplex wird oder wiederverwendet werden muss,<strong>buildSrc</strong>ist die bevorzugte Lösung. Es ist ein spezielles Gradle-Modul, das vor den Haupt-Build-Skripten kompiliert wird, wodurch seine Klassen im Klassenpfad des gesamten Builds verfügbar werden.</p> </div> <div class="paragraph"> <p>Warum verwenden`buildSrc`für die Aufgaben ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Wiederverwendbarkeit</strong>: Eine definierte Aufgabe in`buildSrc`kann auf jedes Build-Projekt angewendet werden.</p> </li> <li> <p><strong>Organisation</strong>Zentralisiert den Build-Code, wodurch er sauberer und wartbarer wird.</p> </li> <li> <p><strong>Typsicherheit und Autovervollständigung</strong>: Der Kotlin-Code in`buildSrc`wird kompiliert, bietet die Fehlerprüfung und Autovervollständigung Ihrer IDE, verbessert das Entwicklungserlebnis.</p> </li> </ul> </div> <div class="paragraph"> <p>\=== Flussdiagramm`buildSrc`(Code PlantUML)</p> </div> <div class="paragraph"> <p>Kopieren Sie den unten stehenden Code und fügen Sie ihn in ein Tool ein, das PlantUML unterstützt.</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 wahr</p> </div> <div class="paragraph"> <p>Rechteck "Gradle Build Process" { Komponente "buildSrc" als BS { file "MyCustomTask.kt" as T Datei "MyConventionPlugin.kt" als P } Komponente "Root Project" als RP Komponente "Subproject A" als SA Komponente "Subproject B" als SB }</p> </div> <div class="paragraph"> <p>T --\&gt; P : "ist definiert in P -&#8594; RP : "wird angewendet auf P --\&gt; SA : "is applied to P --\&gt; SB : "wird angewendet auf</p> </div> <div class="paragraph"> <p>RP --|\&gt; SA : "enthält RP --|\&gt; SB : "contains</p> </div> <div class="paragraph"> <p>RP -up&#8594; BS : "abhängig von (für die Build-Logik) SA -up-\&gt; BS : "abhängig von (für die Build-Logik) SB -up-\&gt; BS : "abhängig von (für die Build-Logik)</p> </div> <div class="paragraph"> <p>Notiz rechts von T Benutzerdefinierte Aufgabenklassen (z. B.: OpenTestReportTask) Endnote</p> </div> <div class="paragraph"> <p>Notiz rechts von P Konventions-Plugins die die Aufgaben aufzeichnen Endnote</p> </div> </div> </div> <div class="sect1"> <h2 id="_enduml">@enduml</h2> <div class="sectionbody"> <div class="paragraph"> <p>\== Erstellung von abstrakten Berichtsaufgaben</p> </div> <div class="paragraph"> <p>Um die Testberichte zu verwalten, haben wir einen modularen Ansatz entwickelt, indem wir eine abstrakte Aufgabenclasse in`buildSrc`. Je nach Ihren Bedürfnissen kann diese Klasse von erben`DefaultTask` ou de <code>Exec</code>.</p> </div> <div class="paragraph"> <p>\=== Abstrakte Aufgabe`OpenTestReportTask`(erbend von`DefaultTask`)</p> </div> <div class="paragraph"> <p>Dieser Ansatz wird empfohlen, wenn Sie eine benutzerdefinierte Kotlin-Logik benötigen, die mit dem Dateisystem oder anderen Gradle-APIs interagiert und anschließend einen externen Befehl ausführt.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourcekotlin">[source,kotlin]</h2> <div class="sectionbody"> <div class="paragraph"> <p>package com.yourpackage</p> </div> <div class="paragraph"> <p>import org.gradle.api.DefaultTask import org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import java.io.File</p> </div> <div class="paragraph"> <p>abstract class OpenTestReportTask : DefaultTask() {</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- init { group = "verification" description = "Opens a test report in Firefox." dependsOn("check") // Assure que les rapports sont générés } @get:Input abstract var reportPath: String @TaskAction fun openReport() { val separator = File.separator val reportFile = project.layout.projectDirectory.asFile.toPath() .resolve(reportPath.replace("/", separator)) .toAbsolutePath() .toFile() if (!reportFile.exists()) { logger.warn("Report file does not exist: $reportFile. Ensure 'check' ran.") return } project.exec { commandLine("firefox", "--new-tab", reportFile.absolutePath) } logger.lifecycle("Opened test report: ${reportFile.absolutePath}") } ---- ## } \=== konkrete Implementierungen Diese Klassen erben von der abstrakten Aufgabe und definieren den spezifischen Pfad des Berichts. ## [source,kotlin] package com.yourpackage abstract class ReportUnitTestsTask : OpenTestReportTask() init { description = "Öffnet den Einzeltestbericht in Firefox. reportPath = "build/reports/tests/test/index.html } } package com.yourpackage ## abstract class ReportFunctionalTestsTask : OpenTestReportTask() { init { description = "Öffnet den Funktionaltestbericht in Firefox." reportPath = "build/reports/tests/functionalTest/index.html" } } \=== Aufzeichnung der Aufgaben Im`build.gradle.kts`von Ihrem Stammprojekt : ## [source,kotlin] tasks.register\&lt;com.yourpackage.ReportUnitTestsTask\&gt;("reportTests") {} tasks.register\&lt;com.yourpackage.ReportFunctionalTestsTask\&gt;("reportFunctionalTests") {} \=== UML-Diagramm der Berichtsaufgaben (Code PlantUML) Kopieren Sie den unten stehenden Code und fügen Sie ihn in ein Tool ein, das PlantUML unterstützt. ## [source,plantuml] @startuml skinparam handgeschrieben true skinparam monochrome true abstrakte Klasse DefaultTask { } abstrakte Klasse Exec { \+ commandLine(args: String...) \+ exec() } abstrakte Klasse OpenTestReportTask extends DefaultTask { \+ group: String = "verification \+ description: String \+ dependsOn("check") + abstrakt reportPath: String \+ openReport() : void } abstrakte Klasse AbstractJbakeExecTask extends Exec { \+ group: String = "Überprüfung \+ description: String \+ dependsOn("check") \+ abstract reportRelativePath: String \+ exec() : void } class ReportUnitTestsTask extends OpenTestReportTask { \+ reportPath: String = "build/reports/tests/test/index.html } class ReportFunctionalTestsTask extends OpenTestReportTask { \+ reportPath: String = "build/reports/tests/functionalTest/index.html } class ReportJbakeTestsTask extends AbstractJbakeExecTask { \+ reportRelativePath: String = "build/reports/tests/test/index.html } class ReportJbakeFunctionalTestsTask extends AbstractJbakeExecTask { \+ reportRelativePath: String = "build/reports/tests/functionalTest/index.html } OpenTestReportTask \&lt;-- ReportUnitTestsTask OpenTestReportTask \&lt;-- ReportFunctionalTestsTask AbstractJbakeExecTask &lt;-- ReportJbakeTestsTask AbstractJbakeExecTask \&lt;-- ReportJbakeFunctionalTestsTask DefaultTask \&lt;|-- OpenTestReportTask Exec \&lt;|-- AbstractJbakeExecTask Standardausgabe \&lt;|-- Ausführen ## @enduml \== Abstrakte Aufgabe`AbstractJbakeExecTask`(erben von`Exec`) Wenn Ihre Aufgabe hauptsächlich darin besteht, einen externen Befehl mit variablen Argumenten auszuführen, erben Sie direkt von**Ausführen**ist direkter. [source,kotlin] package com.ihrpaket import org.gradle.api.tasks.Exec import org.gradle.api.tasks.Input import java.io.File abstrakte Klasse 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 } ## } \=== Konkrete Implementierungen für`Exec` ## [source,kotlin] Paket com.yourpackage abstrakte Klasse ReportJbakeTestsTask : AbstractJbakeExecTask() { init { description = "Öffnet den Jbake-Unit-test Bericht in Firefox. reportRelativePath = "build/reports/tests/test/index.html } } package com.yourpackage ## abstract class ReportJbakeFunctionalTestsTask : AbstractJbakeExecTask() { init { description = "Öffnet den Funktionaltestbericht in Firefox." reportRelativePath = "build/reports/tests/functionalTest/index.html" } } \== Sichtbarkeit der Aufgaben`buildSrc` Die Aufgaben und Klassen, die Sie in**buildSrc**sind : ***Sichtbar und nutzbar**von allen Projekten deines Hauptbuilds (Wurzel- und Unterprojekte). Aus diesem Grund kannst du verwenden`com.yourpackage.ReportUnitTestsTask`in`allprojects { ... }`. ***Nicht ausführbar**direkt als buildSrc-Aufgaben (zum Beispiel,`gradle :buildSrc:reportTests`würde nicht funktionieren wenn die Aufgabe nicht speziell gespeichert wird in`buildSrc/build.gradle.kts`).`buildSrc`ist ein Kompiliermodul, kein ausführbares Anwendungsmodul für diese Aufgaben des Haupt-Builds. \=== Einen Bericht für die Tests von`buildSrc`ihm selbst Si `buildSrc`er hat seine eigenen Tests und generiert Berichte, Sie können eine Berichtsaufgabe direkt in`buildSrc/build.gradle.kts`: ## [source,kotlin] plugins { `kotlin-jvm` } Repositorys { mavenCentral() } tasks.withType\&lt;Test\&gt; { useJUnitPlatform() reports.html.outputLocation.set(layout.buildDirectory.dir("reports/tests")) } import com.yourpackage.ReportJbakeTestsTask // Importiere deine Taskklasse ) { // Der Pfad ist bereits in der Klasse definiert, er zeigt auf die BuildSrc-Berichte } Sie können anschließend ausführen :`./gradlew :buildSrc:test`gefolgt von`./gradlew :buildSrc:reportBuildSrcTests`. Wenn Sie diese Praktiken übernehmen, werden Sie Gradle‑Build‑Systeme in Kotlin DSL erstellen, die nicht nur leistungsstark sind, sondern auch außergewöhnlich modular, wartbar und leicht verständlich.</code></pre> </div> </div> </div> </div> TDD eines konfigurierbaren Gradle-Kotlin-Plugins mit JBake und JGit 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="#_ziel">Ziel</a></li> <li><a href="#_deklarative_konfiguration">deklarative Konfiguration</a></li> <li><a href="#_architektur_des_plugins">Architektur des Plugins</a></li> <li><a href="#_definition_der_dsl_erweiterung">Definition der DSL-Erweiterung</a></li> <li><a href="#_definition_der_personalisierten_aufgabe">Definition der personalisierten Aufgabe</a></li> <li><a href="#_schnittstelle_gitadapter">Schnittstelle GitAdapter</a></li> <li><a href="#_konkrete_implementierung_mit_jgit">Konkrete Implementierung mit JGit</a></li> <li><a href="#_konfiguration_dsl_kotlin">Konfiguration DSL Kotlin</a></li> <li><a href="#_einheitstests_mit_mockito">Einheitstests mit Mockito</a> <ul class="sectlevel2"> <li><a href="#_abhängigkeiten">Abhängigkeiten</a></li> <li><a href="#_test_des_verhaltens_von_git">Test des Verhaltens von Git</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_nächste_schritte">Nächste Schritte</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dieser Beitrag stellt den vollständigen Prozess der Konzeption und Tests (TDD) eines in Kotlin DSL geschriebenen Gradle-Plugins vor. Dieses Plugin automatisiert die Erstellung statischer Sites mit <strong>JBake</strong> sowie die <strong>Git-Bereitstellung</strong> über <strong>JGit</strong> – alles basierend auf einer YAML-Konfigurationsdatei.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ziel">Ziel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ein Gradle-Plugin erstellen :</p> </div> <div class="ulist"> <ul> <li> <p>konfigurierbar in Kotlin DSL ;</p> </li> <li> <p>fähig zu:</p> </li> <li> <p>eine statische Site mit JBake generieren ;</p> </li> <li> <p>auf einem entfernten Git-Repository via JGit bereitstellen;</p> </li> <li> <p>in einem CI/CD-Workflow integrierbar ;</p> </li> <li> <p>getestet gemäß einer TDD-Vorgehensweise.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_deklarative_konfiguration">deklarative Konfiguration</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist ein Beispiel für eine YAML‑Konfiguration, die in unserer DSL modelliert werden soll :</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>Diese Konfiguration wird über eine deklarierbare Gradle-Erweiterung im Kotlin‑DSL repräsentiert.</p> </div> </div> </div> <div class="sect1"> <h2 id="_architektur_des_plugins">Architektur des Plugins</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="_definition_der_dsl_erweiterung">Definition der DSL-Erweiterung</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="_definition_der_personalisierten_aufgabe">Definition der personalisierten Aufgabe</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&lt;String&gt; @get:InputDirectory abstract val outputDir: DirectoryProperty @get:Input abstract val branch: Property&lt;String&gt; @get:Input abstract val message: Property&lt;String&gt; @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="_schnittstelle_gitadapter">Schnittstelle 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="_konkrete_implementierung_mit_jgit">Konkrete Implementierung mit 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="_konfiguration_dsl_kotlin">Konfiguration DSL Kotlin</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="_einheitstests_mit_mockito">Einheitstests mit Mockito</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_abhängigkeiten">Abhängigkeiten</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="_test_des_verhaltens_von_git">Test des Verhaltens von Git</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&lt;GitAdapter&gt;() val mockRepo = mock&lt;Repository&gt;() 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="790" height="326"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Trennung der Verantwortlichkeiten via`GitAdapter`ermöglicht das vollständige Anwenden von TDD bei der Entwicklung von Gradle-Plugins:</p> </div> <div class="ulist"> <ul> <li> <p>Die Git-Aufrufe sind abstrahiert und testbar;</p> </li> <li> <p>Die DSL-Konfiguration ist sauber und klar ;</p> </li> <li> <p>Das Plugin bleibt agnostisch gegenüber der eigentlichen Implementierung.</p> </li> </ul> </div> <div class="paragraph"> <p>Dieser Ansatz gewährleistet eine hohe Testbarkeit und Erweiterbarkeit (zu GitHub-API, GitLab usw.).</p> </div> </div> </div> <div class="sect1"> <h2 id="_nächste_schritte">Nächste Schritte</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Integrieren Sie die JBake-Generierung als ein`BakeAdapter`</p> </li> <li> <p>Integrations-Tests hinzufügen mit`GradleRunner`</p> </li> <li> <p>Das automatische Laden von Dateien unterstützen`site.yml`via SnakeYAML</p> </li> </ul> </div> </div> </div> AsciiDoc: Entdecken und die Syntax meistern für eine effektive Dokumentation 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="#_einleitung">Einleitung</a></li> <li><a href="#_was_ist_asciidoc">Was ist AsciiDoc?</a> <ul class="sectlevel2"> <li><a href="#_warum_asciidoc_wählen">Warum AsciiDoc wählen?</a></li> </ul> </li> <li><a href="#_anwendungsfalldiagramm_anwendungsfall">Anwendungsfalldiagramm (Anwendungsfall)</a></li> <li><a href="#_mind_map_diagramm">Mind-Map-Diagramm</a></li> <li><a href="#_diagramm_von_flow_fluss">Diagramm von Flow (Fluss)</a></li> <li><a href="#_grundstruktur_einer_asciidoc_datei">Grundstruktur einer AsciiDoc-Datei</a></li> <li><a href="#_grundlegende_syntax">Grundlegende Syntax</a> <ul class="sectlevel2"> <li><a href="#_titel_und_abschnitte">Titel und Abschnitte</a></li> <li><a href="#_fetter_kursiver_und_monospace_text">Fetter, kursiver und monospace Text</a></li> <li><a href="#_aufzählungslisten_und_nummerierte_listen">Aufzählungslisten und nummerierte Listen</a></li> <li><a href="#_links_und_bilder">Links und Bilder</a></li> <li><a href="#_codeblöcke">Codeblöcke</a></li> <li><a href="#_tabellen">Tabellen</a></li> <li><a href="#_hinweise_und_warnungen">Hinweise und Warnungen</a></li> </ul> </li> <li><a href="#_verwendung_von_attributen_und_variablen">Verwendung von Attributen und Variablen</a></li> <li><a href="#_gängige_anwendungsfälle">Gängige Anwendungsfälle</a></li> <li><a href="#_best_practices">Best Practices</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_weiter_gehen">Weiter gehen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Zielgruppe :</em> Entwickler, technische Redakteure und jede Person, die technische Dokumentation oder reichhaltige Artikel verfassen möchte.</div> <p>AsciiDoc ist eine leichte Auszeichnungssprache, die für das Schreiben strukturierter technischer Dokumente, Artikel, Bücher oder Präsentationen entwickelt wurde. Sie zeichnet sich durch ihre Lesbarkeit, ihren reichen Syntaxumfang und ihre Fähigkeit aus, verschiedene Formate (HTML, PDF, DocBook usw.) zu erzeugen. In diesem Artikel werden wir die wesentliche Syntax von AsciiDoc erkunden und Tipps für einen schnellen Einstieg geben.</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_ist_asciidoc">Was ist AsciiDoc?</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc ist eine Sprache zur Dokumentenbeschreibung, ähnlich wie Markdown, aber leistungsfähiger. Sie ermöglicht eine effiziente Strukturierung von Texten, Überschriften, Listen, Tabellen, Codeblöcken und vielem mehr. Ihre Vielseitigkeit macht sie zu einer beliebten Wahl für die Dokumentation von Open-Source-Projekten, das Verfassen von Büchern und die Web-Publikation.</p> </div> <div class="sect2"> <h3 id="_warum_asciidoc_wählen">Warum AsciiDoc wählen?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Lesbare und intuitive Syntax.</p> </li> <li> <p>Nativer Support für komplexe Strukturen (Tabellen, Anmerkungen, Hinweise, usw.).</p> </li> <li> <p>Mehrformatgenerierung (HTML, PDF, ePub, DocBook…)</p> </li> <li> <p>Einfache Integration mit statischen Site-Generatoren wie JBake oder Antora.</p> </li> <li> <p>Erweiterte Anpassung mit Attributen und Erweiterungen.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_anwendungsfalldiagramm_anwendungsfall">Anwendungsfalldiagramm (Anwendungsfall)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ein Use-Case-Diagramm ermöglicht es, die wichtigsten Interaktionen zwischen den Benutzern und dem System darzustellen. Hier ein einfaches Beispiel für ein Dokumentationssystem:</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="_mind_map_diagramm">Mind-Map-Diagramm</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Mind Map (Mentalmap) ist ideal, um Konzepte im Zusammenhang mit AsciiDoc und deren Beziehungen zu erkunden:</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="_diagramm_von_flow_fluss">Diagramm von Flow (Fluss)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ein Flussdiagramm ermöglicht es, den Prozess der Erstellung eines AsciiDoc-Dokuments zu beschreiben:</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="_grundstruktur_einer_asciidoc_datei">Grundstruktur einer AsciiDoc-Datei</h2> <div class="sectionbody"> <div class="paragraph"> <p>Eine AsciiDoc-Datei beginnt in der Regel mit einem Titel, optionalen Attributen und anschließend dem strukturierten Inhalt. Hier ein minimales Beispiel:</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="_grundlegende_syntax">Grundlegende Syntax</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_titel_und_abschnitte">Titel und Abschnitte</h3> <div class="paragraph"> <p>AsciiDoc unterstützt mehrere Ebenen von Überschriften:</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="_fetter_kursiver_und_monospace_text">Fetter, kursiver und monospace Text</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="_aufzählungslisten_und_nummerierte_listen">Aufzählungslisten und nummerierte Listen</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="_links_und_bilder">Links und Bilder</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="_codeblöcke">Codeblöcke</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("Hallo AsciiDoc!")</p> </div> </div> <div class="sect2"> <h3 id="_tabellen">Tabellen</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="_hinweise_und_warnungen">Hinweise und Warnungen</h3> <div class="paragraph"> <p>AsciiDoc bietet visuelle Informationsblöcke :</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="_verwendung_von_attributen_und_variablen">Verwendung von Attributen und Variablen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Benutzerdefinierte Attribute ermöglichen das Wiederverwenden von Werten oder das Konfigurieren von Verhalten :</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="_gängige_anwendungsfälle">Gängige Anwendungsfälle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Open‑Source‑Projekt‑Dokumentation (README, technische Anleitungen) - Schreiben von Büchern und E-Books - Automatische Generierung von statischen Websites (JBake, Antora) - Technische Präsentationen</p> </div> </div> </div> <div class="sect1"> <h2 id="_best_practices">Best Practices</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Verwenden Sie konsistente Überschriften und ein automatisches Inhaltsverzeichnis (:toc:). - Bevorzugen Sie Admonitionen, um auf wichtige Punkte hinzuweisen. - Strukturieren Sie Ihre Dateien, um die Wartung zu erleichtern. - Nutzen Sie annotierte Codeblöcke, um Beispiele zu veranschaulichen.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc ist ein leistungsfähiges und zugängliches Werkzeug zum Schreiben jeder technischen Dokumentation oder strukturierter Artikel. Seine reichhaltige Syntax kombiniert mit der Multi-Format-Generierung macht es zu einem idealen Verbündeten für anspruchsvolle Entwickler und Redakteure. Probieren Sie AsciiDoc in Ihrem nächsten Projekt aus und entdecken Sie den Unterschied!</p> </div> </div> </div> <div class="sect1"> <h2 id="_weiter_gehen">Weiter gehen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Offizielle Dokumentation: <a href="https://asciidoc.org" class="bare">https://asciidoc.org</a> - Asciidoctor: <a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a> - JBake und 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>Teile deine Erfahrungen und Tipps im Kommentar!</p> </div> </div> </div> Einen lokalen Dienst von Ubuntu aus im Internet verfügbar machen: Leitfaden zum vollständigen Port-Forwarding 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="#_das_problem_nat_und_private_adressen">Das Problem: NAT und private Adressen</a></li> <li><a href="#_schritt_1_identifizieren_sie_ihre_öffentliche_ip_adresse">Schritt 1 : Identifizieren Sie Ihre öffentliche IP-Adresse</a></li> <li><a href="#_schritt_2_kennen_sie_die_lokale_ip_adresse_ihres_ubuntu_rechners">Schritt 2: Kennen Sie die lokale IP-Adresse Ihres Ubuntu-Rechners</a></li> <li><a href="#_schritt_3_portweiterleitung_auf_ihrem_router_konfigurieren">Schritt 3: Portweiterleitung auf Ihrem Router konfigurieren</a> <ul class="sectlevel2"> <li><a href="#_zugriff_auf_die_administrations_oberfläche">Zugriff auf die Administrations-Oberfläche</a></li> <li><a href="#_konfiguration_der_weiterleitung">Konfiguration der Weiterleitung</a></li> </ul> </li> <li><a href="#_schritt_4_konfiguration_des_dienstes_auf_ubuntu">Schritt 4: Konfiguration des Dienstes auf Ubuntu</a></li> <li><a href="#_schritt_5_konfiguration_der_ubuntu_firewall">Schritt 5: Konfiguration der Ubuntu-Firewall</a></li> <li><a href="#_schritt_6_test_und_validierung">Schritt 6 : Test und Validierung</a> <ul class="sectlevel2"> <li><a href="#_test_aus_dem_lokalen_netzwerk">Test aus dem lokalen Netzwerk</a></li> <li><a href="#_test_von_außen">Test von außen</a></li> </ul> </li> <li><a href="#_gute_praktiken_und_sicherheit">Gute Praktiken und Sicherheit</a> <ul class="sectlevel2"> <li><a href="#_basissicherung">Basissicherung</a></li> <li><a href="#_überwachung_der_verbindungen">Überwachung der Verbindungen</a></li> <li><a href="#_verwendung_eines_reverse_proxys">Verwendung eines Reverse Proxys</a></li> </ul> </li> <li><a href="#_alternativen_zum_port_forwarding">Alternativen zum Port forwarding</a> <ul class="sectlevel2"> <li><a href="#_cloud_lösungen">Cloud-Lösungen</a></li> <li><a href="#_vps_und_reverse_proxy">VPS und Reverse-Proxy</a></li> </ul> </li> <li><a href="#_fehlerbehebung">Fehlerbehebung</a> <ul class="sectlevel2"> <li><a href="#_häufige_probleme">Häufige Probleme</a></li> <li><a href="#_netzwerk_debugging">Netzwerk-Debugging</a></li> </ul> </li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="ulist"> <div class="title">Zielgruppe : Mittelstufe</div> <ul> <li> <p><strong>Vorausgesetzte Kenntnisse</strong>: Grundkenntnisse von Ubuntu, dem Terminal und grundlegenden Netzwerkkonzepten</p> </li> <li> <p><strong>Technische Konzepte</strong> : NAT, Portweiterleitung, Firewall, Umkehrproxy</p> </li> <li> <p><strong>Systembefehle</strong>: Verwendung des Terminals, Netzwerkkonfiguration</p> </li> <li> <p><strong>Erweiterte Abschnitte</strong> : Monitoring, Sicherheit, Cloud-Alternativen</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_das_problem_nat_und_private_adressen">Das Problem: NAT und private Adressen</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Problematik: Du entwickelst eine Webanwendung auf deiner Ubuntu‑Maschine und möchtest sie von außerhalb deines Heimnetzwerks zugänglich machen? Du bist genau richtig hier! In diesem Artikel zeigen wir dir, wie du einen lokalen Dienst (z. B. auf Port 8080) im Internet verfügbar machst, indem du das Port‑Forwarding auf deinem Internet‑Router konfigurierst.</div> <p>Standardmäßig verwendet Ihre Internet-Box NAT (Network Address Translation), um eine einzelne öffentliche IP-Adresse zwischen allen Geräten Ihres Heimnetzwerks zu teilen. Ihre lokalen Geräte verwenden private IP-Adressen (192.168.x.x, 10.x.x.x usw.), die im Internet nicht routbar sind.</p> </div> <div class="paragraph"> <p>Wenn Sie einen Dienst auf Ihrer Ubuntu-Maschine starten (z. B. einen Webserver auf Port 8080), ist er nur über Ihr lokales Netzwerk erreichbar. Damit er über das Internet zugänglich ist, müssen wir eine Portweiterleitung konfigurieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_1_identifizieren_sie_ihre_öffentliche_ip_adresse">Schritt 1 : Identifizieren Sie Ihre öffentliche IP-Adresse</h2> <div class="sectionbody"> <div class="paragraph"> <p>Zunächst einmal holen wir die öffentliche IP-Adresse deiner Internetverbindung:</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>Diese IP-Adresse ist die, die die Internetnutzer verwenden werden, um auf Ihren Dienst zuzugreifen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_2_kennen_sie_die_lokale_ip_adresse_ihres_ubuntu_rechners">Schritt 2: Kennen Sie die lokale IP-Adresse Ihres Ubuntu-Rechners</h2> <div class="sectionbody"> <div class="paragraph"> <p>Deine Ubuntu-Maschine hat eine private IP-Adresse in deinem lokalen Netzwerk. Um sie zu erfahren:</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>Notiere diese Adresse (zum Beispiel`192.168.1.100`), wir werden es für die Konfiguration benötigen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_3_portweiterleitung_auf_ihrem_router_konfigurieren">Schritt 3: Portweiterleitung auf Ihrem Router konfigurieren</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Konfiguration variiert je nach Modell Ihrer Box, aber das Prinzip bleibt gleich.</p> </div> <div class="sect2"> <h3 id="_zugriff_auf_die_administrations_oberfläche">Zugriff auf die Administrations-Oberfläche</h3> <div class="paragraph"> <p>Öffnen Sie Ihren Browser und gehen Sie zur Weboberfläche Ihrer Box :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Freebox</strong> : <code>192.168.1.1</code> ou <code>mafreebox.freebox.fr</code></p> </li> <li> <p><strong>Livebox Orange</strong>:`192.168.1.1`</p> </li> <li> <p><strong>SFR-Box</strong> : <code>192.168.1.1</code></p> </li> <li> <p><strong>Bbox Bouygues</strong> : <code>192.168.1.254</code></p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_konfiguration_der_weiterleitung">Konfiguration der Weiterleitung</h3> <div class="paragraph"> <p>Suchen Sie den Abschnitt, der dem Port Forwarding gewidmet ist (die Namen variieren) :</p> </div> <div class="ulist"> <ul> <li> <p>Portweiterleitung</p> </li> <li> <p>NAT/PAT</p> </li> <li> <p>Portweiterleitung</p> </li> <li> <p>Spiele-Server</p> </li> </ul> </div> <div class="paragraph"> <p>Erstellen Sie eine neue Regel mit diesen Parametern :</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">Feld</th> <th class="tableblock halign-left valign-top">Wert</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Name/Description</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ubuntu Web Service" (oder ein anderer expliziter Name)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">externer Port (oder öffentlicher Port)</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">Interne IP-Adresse</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die IP-Adresse Ihres Ubuntu-Rechners (z.B. 192.168.1.100)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Interner Port (oder privater Port)</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">Protokoll</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">Staat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aktiviert</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_4_konfiguration_des_dienstes_auf_ubuntu">Schritt 4: Konfiguration des Dienstes auf Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Stellen Sie sicher, dass Ihr Dienst auf allen Schnittstellen lauscht, nicht nur auf 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>Um zu überprüfen, dass Ihr Dienst korrekt zuhört:</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>Du solltest etwas sehen wie`0.0.0.0:8080`und nein`127.0.0.1:8080`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_schritt_5_konfiguration_der_ubuntu_firewall">Schritt 5: Konfiguration der Ubuntu-Firewall</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ubuntu verwendet standardmäßig UFW (Uncomplicated Firewall). Überprüfen Sie seinen Status und öffnen Sie den Port, falls notwendig :</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="_schritt_6_test_und_validierung">Schritt 6 : Test und Validierung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_test_aus_dem_lokalen_netzwerk">Test aus dem lokalen Netzwerk</h3> <div class="paragraph"> <p>Zuerst testen Sie den Zugriff von einer anderen Maschine in Ihrem lokalen Netzwerk:</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="_test_von_außen">Test von außen</h3> <div class="paragraph"> <p>Jetzt teste über das Internet mit deiner öffentlichen 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>Sie können auch Online-Tools wie :</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="_gute_praktiken_und_sicherheit">Gute Praktiken und Sicherheit</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_basissicherung">Basissicherung</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 &amp;&amp; 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="_überwachung_der_verbindungen">Überwachung der Verbindungen</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="_verwendung_eines_reverse_proxys">Verwendung eines Reverse Proxys</h3> <div class="paragraph"> <p>Für bessere Sicherheit und Flexibilität ziehen Sie die Verwendung eines Reverse-Proxys wie Nginx in Betracht:</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="_alternativen_zum_port_forwarding">Alternativen zum Port forwarding</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_cloud_lösungen">Cloud-Lösungen</h3> <div class="ulist"> <ul> <li> <p><strong>ngrok</strong>: temporär gesicherter Tunnel</p> </li> <li> <p><strong>Cloudflare Tunnel</strong>kostenlose und sichere Lösung</p> </li> <li> <p><strong>serveo.net</strong>: einfacher SSH-Tunnel</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_und_reverse_proxy">VPS und Reverse-Proxy</h3> <div class="paragraph"> <p>Für den professionellen Einsatz sollten Sie die Verwendung eines VPS mit einem Reverse Proxy in Betracht ziehen, der über ein VPN auf Ihre lokale Infrastruktur verweist.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fehlerbehebung">Fehlerbehebung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_häufige_probleme">Häufige Probleme</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">Problem</th> <th class="tableblock halign-left valign-top">Lösung</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Service ist von außen nicht erreichbar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Überprüfen Sie die Port-Weiterleitungskonfiguration und dass der Dienst auf 0.0.0.0 lauscht.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Verbindung abgelehnt</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der Dienst ist nicht gestartet oder er lauscht nur auf 127.0.0.1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Verbindungszeitüberschreitung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Firewall-Problem (Box oder Ubuntu) oder fehlerhaft konfiguriertes Port-Forwarding</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">öffentliche IP ändert sich régulièrement</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konfigurieren Sie ein dynamisches DNS (DynDNS, No-IP, usw.)</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_netzwerk_debugging">Netzwerk-Debugging</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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Exponieren eines lokalen Dienstes im Internet erfordert eine sorgfältige Konfiguration von Portweiterleitung, Sicherheit und Überwachung. Obwohl dieser Ansatz perfekt für die Entwicklung oder persönliche Projekte ist, denken Sie an robustere Alternativen (VPS, CDN, Cloud-Dienste) für den produktiven Einsatz.</p> </div> <div class="paragraph"> <p>Das Wichtigste ist, immer die Sicherheit im Hinterkopf zu behalten: Verwende starke Passwörter, aktualisiere dein System regelmäßig und überwache den Zugriff auf deine offengelegten Dienste.</p> </div> <div class="paragraph"> <p>Zögern Sie nicht, Ihre Erfahrungen und Fragen in den Kommentaren zu teilen!</p> </div> </div> </div> Debugging Mockito: Den Fehler "Wanted but not invoked" in Gradle-Plugintests beheben 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="#_einführung">Einführung</a></li> <li><a href="#_der_kontext_gradle_bakery_plugin">Der Kontext: Gradle Bakery Plugin</a></li> <li><a href="#_problem_1_überprüfe_das_falsche_mock">Problem #1: Überprüfe das falsche Mock</a> <ul class="sectlevel2"> <li><a href="#_die_diagnose">Die Diagnose</a></li> <li><a href="#_die_lösung">Die Lösung</a></li> </ul> </li> <li><a href="#_problem_2_kaskadierendes_unfinishedstubbingexception">Problem #2: kaskadierendes UnfinishedStubbingException</a> <ul class="sectlevel2"> <li><a href="#_die_diagnose_2">Die Diagnose</a></li> <li><a href="#_die_lösung_2">Die Lösung</a></li> </ul> </li> <li><a href="#_problem_3_die_konfigurationsdatei_existiert_nicht">Problem #3: Die Konfigurationsdatei existiert nicht</a> <ul class="sectlevel2"> <li><a href="#_die_diagnose_3">Die Diagnose</a></li> <li><a href="#_die_lösung_3">Die Lösung</a></li> </ul> </li> <li><a href="#_problem_4_afterevaluate_und_nullpointerexception">Problem #4 : afterEvaluate und NullPointerException</a> <ul class="sectlevel2"> <li><a href="#_die_diagnose_4">Die Diagnose</a></li> <li><a href="#_die_lösung_4">Die Lösung</a></li> </ul> </li> <li><a href="#_die_vollständige_lösung">Die vollständige Lösung</a></li> <li><a href="#_gelernte_lektionen">Gelernte Lektionen</a> <ul class="sectlevel2"> <li><a href="#_1_überprüfe_das_richtige_mock">1. Überprüfe das richtige Mock</a></li> <li><a href="#_2_verschachtelte_mocks_vermeiden">2. Verschachtelte Mocks vermeiden</a></li> <li><a href="#_3_die_evaluierungs_callbacks_mocken">3. Die Evaluierungs-Callbacks mocken</a></li> <li><a href="#_4_pfadauflösung_testen">4. Pfadauflösung testen</a></li> </ul> </li> <li><a href="#_finale_testarchitektur">Finale Testarchitektur</a></li> <li><a href="#_conclusion">Conclusion</a></li> <li><a href="#_ressourcen">Ressourcen</a></li> </ul> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bei der Entwicklung des Gradle-Plugins<strong>Bäckerei</strong>für meinen JBake-Blog bin ich auf ein scheinbar einfaches Problem gestoßen: ein Unit-Test, der mit einem Fehler fehlschlug`Wanted but not invoked`. Was wie ein triviales Bug aussah, erwies sich als ein perfektes Lehrbeispiel, um die Feinheiten des Mockens mit Mockito und Kotlin zu verstehen.</p> </div> <div class="paragraph"> <p>In diesem Artikel führe ich dich auf eine methodische Debugging-Reise, bei der jede Lösung ein neues Problem aufzeigt, bis zur endgültigen Lösung.</p> </div> </div> </div> <div class="sect1"> <h2 id="_der_kontext_gradle_bakery_plugin">Der Kontext: Gradle Bakery Plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Das Bakery-Plugin ist ein Wrapper um JBake, der die Veröffentlichung von statischen Websites vereinfacht. Hier ist seine vereinfachte Struktur:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class BakeryPlugin : Plugin&lt;Project&gt; { 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>Der Test, der fehlschlug, war einfach:</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>Der Fehler:</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="_problem_1_überprüfe_das_falsche_mock">Problem #1: Überprüfe das falsche Mock</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_diagnose">Die Diagnose</h3> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-1.svg" alt="mockito problem 1" width="687" height="521"> </div> </div> <div class="paragraph"> <p>Das Problem: Mockito kann die Interaktionen nicht auf`project.plugins`weil es nur ein Getter ist, der das echte Mock zurückgibt`mockPluginContainer`. Die Überprüfung muss direkt auf der Instanz des Mock erfolgen.</p> </div> </div> <div class="sect2"> <h3 id="_die_lösung">Die Lösung</h3> <div class="paragraph"> <p>Ändern`createMockProject()`um die beiden Objekte zurückgeben :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair&lt;Project, PluginContainer&gt; { val mockPluginContainer = mock&lt;PluginContainer&gt;() val mockProject = mock&lt;Project&gt; { on { plugins } doReturn mockPluginContainer } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>Und den Test anpassen:</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="_problem_2_kaskadierendes_unfinishedstubbingexception">Problem #2: kaskadierendes UnfinishedStubbingException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_diagnose_2">Die Diagnose</h3> <div class="paragraph"> <p>Sobald die erste Korrektur angewendet wurde, ist ein neuer Fehler aufgetreten:</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>Der problematische Code verwendete die DSL-Syntax von Mockito-Kotlin</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val mockProject = mock&lt;Project&gt; { on { extensions } doReturn mockExtensionContainer on { plugins } doReturn mockPluginContainer on { logger } doReturn mock() // ❌ PROBLÈME ICI ! }</code></pre> </div> </div> <div class="imageblock"> <div class="content"> <img src="./images/mockito-problem-2.svg" alt="mockito problem 2" width="690" height="316"> </div> </div> </div> <div class="sect2"> <h3 id="_die_lösung_2">Die Lösung</h3> <div class="paragraph"> <p>Erstellen<strong>alle</strong>die Mocks außerhalb eines Stubbing-Blocks und sie dann mit zu konfigurieren`whenever()`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair&lt;Project, PluginContainer&gt; { // 1️⃣ Créer TOUS les mocks d'abord val mockPluginContainer = mock&lt;PluginContainer&gt;() val mockExtensionContainer = mock&lt;ExtensionContainer&gt;() val mockLogger = mock&lt;org.gradle.api.logging.Logger&gt;() val mockProject = mock&lt;Project&gt;() // 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>Goldene Regel</strong>: Nie anrufen`mock()`innerhalb eines Mock-Konfigurationsblocks. Erstelle immer zuerst die Mocks, dann konfiguriere sie.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_problem_3_die_konfigurationsdatei_existiert_nicht">Problem #3: Die Konfigurationsdatei existiert nicht</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_diagnose_3">Die Diagnose</h3> <div class="paragraph"> <p>Selbst mit den richtigen Mocks schlug der Test immer fehl, weil das Plugin die Konfigurationsdatei nicht finden konnte :</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="554" height="373"> </div> </div> </div> <div class="sect2"> <h3 id="_die_lösung_3">Die Lösung</h3> <div class="paragraph"> <p>Mocks konfigurieren, damit die Pfadauflösung funktioniert:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair&lt;Project, PluginContainer&gt; { // ... 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="1770" height="5580"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_problem_4_afterevaluate_und_nullpointerexception">Problem #4 : afterEvaluate und NullPointerException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_diagnose_4">Die Diagnose</h3> <div class="paragraph"> <p>Der Plugin wendet JBake in einem Block an.<code>afterEvaluate</code>, und zugreift auf`buildDirectory.dir()`:</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>Der Mock von`buildDirectory.dir()<code>kehrte zurück`null</code>.</p> </div> </div> <div class="sect2"> <h3 id="_die_lösung_4">Die Lösung</h3> <div class="paragraph"> <p>Spötter`afterEvaluate`damit es sofort ausgeführt wird, und es vollständig konfigurieren`buildDirectory`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair&lt;Project, PluginContainer&gt; { // ... autres mocks ... val mockBuildDirectory = mock&lt;DirectoryProperty&gt;() val buildDir = File(projectDir, "build") // Mocker dir() pour retourner un Provider valide whenever(mockBuildDirectory.dir(any&lt;String&gt;())).doAnswer { invocation -&gt; val path = invocation.arguments[0] as String val mockDirProvider = mock&lt;Provider&lt;Directory&gt;&gt;() val mockDir = mock&lt;Directory&gt;() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // Mocker afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any&lt;Action&lt;Project&gt;&gt;())).doAnswer { invocation -&gt; val action = invocation.arguments[0] as Action&lt;Project&gt; 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="793" height="357"> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_vollständige_lösung">Die vollständige Lösung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hier ist die Funktion`createMockProject()`Finale, die alle Probleme löst:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair&lt;Project, PluginContainer&gt; { // 1️⃣ CRÉER tous les mocks (pas de nested mocks !) val mockPluginContainer = mock&lt;PluginContainer&gt;() val mockExtensionContainer = mock&lt;ExtensionContainer&gt;() val mockLogger = mock&lt;org.gradle.api.logging.Logger&gt;() val mockTaskContainer = mock&lt;TaskContainer&gt;() val mockConfigPathProperty = mock&lt;Property&lt;String&gt;&gt;() val mockBakeryExtension = mock&lt;BakeryExtension&gt;() val mockProjectDirectory = mock&lt;Directory&gt;() val mockBuildDirectory = mock&lt;DirectoryProperty&gt;() val mockProjectLayout = mock&lt;ProjectLayout&gt;() val mockProject = mock&lt;Project&gt;() // 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&lt;String&gt;())).doAnswer { invocation -&gt; val path = invocation.arguments[0] as String val mockDirProvider = mock&lt;Provider&lt;Directory&gt;&gt;() val mockDir = mock&lt;Directory&gt;() 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&lt;Action&lt;Project&gt;&gt;())).doAnswer { invocation -&gt; val action = invocation.arguments[0] as Action&lt;Project&gt; action.execute(mockProject) null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>Und der abschließende Test, der besteht:</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="_gelernte_lektionen">Gelernte Lektionen</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_überprüfe_das_richtige_mock">1. Überprüfe das richtige Mock</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_verschachtelte_mocks_vermeiden">2. Verschachtelte Mocks vermeiden</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ FAUX - UnfinishedStubbingException val mockProject = mock&lt;Project&gt; { on { logger } doReturn mock() // Nested mock creation ! } // ✅ CORRECT - Créer séparément val mockLogger = mock&lt;org.gradle.api.logging.Logger&gt;() val mockProject = mock&lt;Project&gt;() whenever(mockProject.logger).thenReturn(mockLogger)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_3_die_evaluierungs_callbacks_mocken">3. Die Evaluierungs-Callbacks mocken</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 -&gt; val action = invocation.arguments[0] as Action&lt;Project&gt; action.execute(mockProject) null }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_pfadauflösung_testen">4. Pfadauflösung testen</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="_finale_testarchitektur">Finale Testarchitektur</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="./images/test-architecture.svg" alt="test architecture" width="1736" height="5468"> </div> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion">Conclusion</h2> <div class="sectionbody"> <div class="paragraph"> <p>Was zunächst wie ein einfaches Testproblem erschien, stellte sich als ein hervorragendes Fallbeispiel für : heraus</p> </div> <div class="ulist"> <ul> <li> <p>Die Feinheiten von Mockito mit Kotlin</p> </li> <li> <p>Die Bedeutung des Mockens der richtigen Objekte</p> </li> <li> <p>Die Verwaltung asynchroner Callbacks in Tests</p> </li> <li> <p>Die Auflösung von Pfaden in Gradle-Plugins</p> </li> </ul> </div> <div class="paragraph"> <p>Durch methodisches Debuggen und das Verständnis jeder Schicht des Problems gelang es, eine robuste und wartbare Lösung zu finden.</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>Tipp für Ihre Tests</strong>Wenn Sie mit Mockito auf <code>Wanted but not invoked</code> stoßen, fragen Sie sich immer : 1. Überprüfe ich das richtige Mock? 2. Werden alle meine Mocks außerhalb der Konfigurationsblöcke erstellt? 3. Werden meine Callbacks wirklich ausgeführt? 4. Lösen sich meine Pfade korrekt auf?</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ressourcen">Ressourcen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/mockito/mockito-kotlin">Mockito-Kotlin Dokumentation</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 statischer Website-Generator</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p>Haben Sie ähnliche Probleme in Ihren Tests festgestellt? Teilen Sie Ihre Erfahrung in den Kommentaren mit!</p> </div> </div> </div> Kotlin Arrow : Die Navigation in der Either-Monade meistern 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="#_einführung">Einführung</a></li> <li><a href="#_was_ist_die_either_monade">Was ist die Either-Monade?</a> <ul class="sectlevel2"> <li><a href="#_warum_either_verwenden">Warum Either verwenden?</a></li> </ul> </li> <li><a href="#_kontext">Kontext</a></li> <li><a href="#_die_verschiedenen_ansätze">Die verschiedenen Ansätze</a> <ul class="sectlevel2"> <li><a href="#_der_klassische_ansatz_mit_when">Der klassische Ansatz mit `when</a></li> <li><a href="#_verwendung_von_fold_für_einen_präziseren_ansatz">Verwendung von <code>fold</code> für einen präziseren Ansatz</a></li> <li><a href="#_transformation_mit_map_und_mapleft">Transformation mit <code>map</code> und `mapLeft</a></li> <li><a href="#_fehlerbehandlung_mit_getorelse">Fehlerbehandlung mit `getOrElse</a></li> <li><a href="#_seitliche_aktionen_mit_onleft_und_onright">Seitliche Aktionen mit <code>onLeft</code> und `onRight</a></li> <li><a href="#_verkettung_von_operationen_mit_flatmap">Verkettung von Operationen mit `flatMap</a></li> <li><a href="#_bidirektionale_transformation_mit_bimap">Bidirektionale Transformation mit `bimap</a></li> <li><a href="#_umkehrung_der_seiten_mit_swap">Umkehrung der Seiten mit `swap</a></li> <li><a href="#_verwendung_von_tap_und_tapleft">Verwendung von <code>tap</code> und <code>tapLeft</code> :</a></li> <li><a href="#_verwendung_von_recover">Verwendung von <code>recover</code> :</a></li> </ul> </li> <li><a href="#_praktische_anwendungsfälle">Praktische Anwendungsfälle</a></li> <li><a href="#_fazit">Fazit</a></li> <li><a href="#_weitergehen">Weitergehen</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Lesezeit: 12 bis 15 Minuten.</p> </div> </div> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Zielgruppe :</em> Kotlin-Entwickler von mittlerem bis fortgeschrittenem Niveau.</div> <p>In der Welt der funktionalen Programmierung in Kotlin bietet die Arrow-Bibliothek leistungsstarke Werkzeuge zur Behandlung von Fehlern und alternativen Fällen. Unter diesen Werkzeugen ist die Monade`Either`zeichnet sich dadurch aus, dass es zwei mögliche Zustände darstellen kann: Erfolg (Right) oder Fehler (Left). Aber wie kann man effizient zwischen diesen beiden Zuständen navigieren? Das werden wir in diesem Artikel untersuchen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_was_ist_die_either_monade">Was ist die Either-Monade?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Monade`Either`ist eine Datenstruktur, die zwei sich gegenseitig ausschließende Möglichkeiten repräsentiert. In Kotlin mit Arrow wird sie häufig verwendet, um die Erfolgs- und Fehlerfälle einer Operation zu behandeln, wobei sie eine elegante Alternative zu traditionellen Ausnahmen bietet.</p> </div> <div class="sect2"> <h3 id="_warum_either_verwenden">Warum Either verwenden?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Explizite Fehlerbehandlung: Zwingt den Entwickler, Fehlersituationen zu berücksichtigen.</p> </li> <li> <p>Funktionale Komposition: Erleichtert das Verketten von Operationen, die fehlschlagen können.</p> </li> <li> <p>Typsicherheit: Fehler sind typisiert, was hilft, sie präziser zu handhaben.</p> </li> <li> <p>Keine Ausnahmen: Vermeide Nebeneffekte und unerwartete Unterbrechungen des Ausführungsflusses.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kontext">Kontext</h2> <div class="sectionbody"> <div class="paragraph"> <p>Stellen Sie sich vor, Sie entwickeln eine REST-API mithttps://spring.io/projects/spring-boot/[Spring Boot,windows=später-lesen] et <a href="https://kotlinlang.org/">Kotlin</a>, indem die Bibliothek verwendet wirdhttps://arrow-kt.io/[Pfeil,Fenster=read-later]. Sie haben eine Funktion`findOneUserByEmail`der ein zurückgibt`Either&lt;Throwable, User&gt;`. Wie können Sie dieses Ergebnis elegant und funktional behandeln?</p> </div> <div class="paragraph"> <p>Wir haben eine Klasse 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&lt;Role&gt; = mutableSetOf(Role(ANONYMOUS_USER)), @field:Size(min = 2, max = 10) val langKey: String = EMPTY_STRING, @JsonIgnore val version: Long = -1, ) : EntityModel&lt;UUID&gt;() { companion object { @JvmStatic fun main(args: Array&lt;String&gt;) = println(UserDao.Relations.sqlScript) } object UserDao { object Constraints { // Regex for acceptable logins const val LOGIN_REGEX = "^(?&gt;[a-zA-Z0-9!$&amp;*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)|(?&gt;[_.@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&lt;User, ApplicationContext&gt;.toJson: String get() = second.getBean&lt;ObjectMapper&gt;().writeValueAsString(first) suspend fun Pair&lt;User, ApplicationContext&gt;.save(): Either&lt;Throwable, Long&gt; = try { second.getBean&lt;R2dbcEntityTemplate&gt;() .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&lt;Throwable, User&gt; = try { getBean&lt;DatabaseClient&gt;() .sql("SELECT * FROM `user` WHERE LOWER(email) = LOWER(:email)") .bind("email", email) .fetch() .awaitOne() .let { row -&gt; 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&lt;T&gt;( 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 &lt;reified T : EntityModel&lt;ID&gt;, ID&gt; T.withId(id: ID): T { // Use reflection to create a copy with the passed ID return this::class.constructors.first { it.parameters.any { param -&gt; param.name == ID_MEMBER } } .call(id, *this::class.constructors.first().parameters.drop(1).map { param -&gt; this::class.members.first { member -&gt; member.name == param.name }.call(this) }.toTypedArray()) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_verschiedenen_ansätze">Die verschiedenen Ansätze</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_der_klassische_ansatz_mit_when">Der klassische Ansatz mit `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&lt;Throwable, User&gt; = context.findOneUserByEmail(user.email) when (result) { is Either.Left -&gt; { val error = result.value println("Erreur : ${error.message}") } is Either.Right -&gt; { val user = result.value println("Utilisateur trouvé : ${user.login}") } }</code></pre> </div> </div> <div class="paragraph"> <p>Diese Methode, obwohl einfach und lesbar, nutzt die funktionalen Fähigkeiten von Arrow nicht vollständig aus.</p> </div> </div> <div class="sect2"> <h3 id="_verwendung_von_fold_für_einen_präziseren_ansatz">Verwendung von <code>fold</code> für einen präziseren Ansatz</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.fold( { error -&gt; println("Erreur : ${error.message}") }, { user -&gt; println("Utilisateur trouvé : ${user.login}") } )</code></pre> </div> </div> <div class="paragraph"> <p>`fold`ermöglicht es, Aktionen für die beiden Fälle (Left und Right) kurz und elegant zu definieren.</p> </div> </div> <div class="sect2"> <h3 id="_transformation_mit_map_und_mapleft">Transformation mit <code>map</code> und `mapLeft</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val processedResult = result .map { user -&gt; "Utilisateur trouvé : ${user.login}" } .mapLeft { error -&gt; "Erreur : ${error.message}" } println(processedResult.merge())</code></pre> </div> </div> <div class="paragraph"> <p>Dieser Ansatz ermöglicht es, die in Either enthaltenen Werte zu transformieren, während seine Struktur erhalten bleibt, ideal für komplexere Verarbeitungsketten.</p> </div> </div> <div class="sect2"> <h3 id="_fehlerbehandlung_mit_getorelse">Fehlerbehandlung mit `getOrElse</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val user = result.getOrElse { error -&gt; 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`bietet eine elegante Fehlerbehandlung, indem es die Angabe eines Standardwertes erlaubt.</p> </div> </div> <div class="sect2"> <h3 id="_seitliche_aktionen_mit_onleft_und_onright">Seitliche Aktionen mit <code>onLeft</code> und `onRight</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.onLeft { error -&gt; println("Erreur : ${error.message}") } .onRight { user -&gt; println("Utilisateur trouvé : ${user.login}") }</code></pre> </div> </div> <div class="paragraph"> <p>Diese Methoden ermöglichen das Ausführen von Aktionen auf jeder Seite ohne das Either zu ändern, perfekt für das Logging oder leichte Seiteneffekte.</p> </div> </div> <div class="sect2"> <h3 id="_verkettung_von_operationen_mit_flatmap">Verkettung von Operationen mit `flatMap</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun findUser(email: String): Either&lt;Throwable, User&gt; = // ... implémentation fun getUserPermissions(user: User): Either&lt;Throwable, List&lt;String&gt;&gt; = // ... implémentation val userPermissions = findUser("user@example.com") .flatMap { user -&gt; getUserPermissions(user) }</code></pre> </div> </div> <div class="paragraph"> <p><code>flatMap`ist nützlich, um Vorgänge zu verketten, die einige zurückgeben`Either</code>, dadurch vermeidend die`Either`verschachtelt.</p> </div> </div> <div class="sect2"> <h3 id="_bidirektionale_transformation_mit_bimap">Bidirektionale Transformation mit `bimap</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either&lt;Throwable, User&gt; = // ... obtention du résultat val processedResult = result.bimap( { error -&gt; "Erreur: ${error.message}" }, { user -&gt; "Utilisateur: ${user.login}" } )</code></pre> </div> </div> <div class="paragraph"> <p>`bimap`ermöglicht es, sowohl die linke als auch die rechte Seite in einem Vorgang zu transformieren.</p> </div> </div> <div class="sect2"> <h3 id="_umkehrung_der_seiten_mit_swap">Umkehrung der Seiten mit `swap</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result: Either&lt;Throwable, User&gt; = // ... obtention du résultat val swapped = result.swap()</code></pre> </div> </div> <div class="paragraph"> <p><code>swap`ist nützlich, wenn du die Seiten eines umkehren möchtest`Either</code>, zum Beispiel um die Schnittstelle einer Funktion an eine andere anzupassen.</p> </div> </div> <div class="sect2"> <h3 id="_verwendung_von_tap_und_tapleft">Verwendung von <code>tap</code> und <code>tapLeft</code> :</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">result.tap { user -&gt; println("Utilisateur trouvé : ${user.login}") } .tapLeft { error -&gt; println("Erreur : ${error.message}") }</code></pre> </div> </div> <div class="paragraph"> <p>Ähnlich zu`onLeft` et <code>onRight</code>, aber diese Methoden geben das ursprüngliche Either zurück, was nützlich ist, um Operationen zu ketten.</p> </div> </div> <div class="sect2"> <h3 id="_verwendung_von_recover">Verwendung von <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 -&gt; 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>Diese Methode ermöglicht das Umwandeln eines Either.Left in ein Either.Right, indem sie einen Ersatzwert bereitstellt.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_praktische_anwendungsfälle">Praktische Anwendungsfälle</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Benutzen Sie`fold`für einfache Vorgänge, die eine Bearbeitung pro Fall erfordern. - Bevorzugen Sie`map` et <code>mapLeft`für Datenumwandlungen ohne die Struktur des`Either</code>. - Wählen Sie für`flatMap`beim Verketten von Operationen, die fehlschlagen können - Verwenden Sie`recover`um einen Standardwert im Fehlerfall bereitzustellen - Wählen`onLeft` et <code>onRight</code> (ou <code>tap</code> et <code>tapLeft</code>) für Nebenwirkungen wie das Logging. - Verwenden Sie`bimap`um beide Seiten in eine einzige Operation zu verwandeln. - Anwenden`swap`wenn Sie die Schnittstelle einer Funktion an eine andere anpassen müssen.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jede dieser Ansätze hat je nach Nutzungskontext ihre Vorteile. Methoden wie`fold`, <code>map</code>/<code>mapLeft</code>, et `recover`sind besonders nützlich, wenn Sie mehrere Operationen hintereinander ausführen oder Daten funktional transformieren möchten.</p> </div> <div class="paragraph"> <p>Die Monade`Either`Arrow bietet eine bemerkenswerte Flexibilität für die Handhabung von Erfolgs- und Fehlerfällen in Ihren Kotlin-Anwendungen. Wenn Sie diese verschiedenen Ansätze beherrschen, können Sie robuster, lesbarer und funktionaleren Code schreiben.</p> </div> <div class="paragraph"> <p>In Ihrem nächsten Projekt zögern Sie nicht, diese Techniken zu erkunden, um das Beste aus der funktionalen Programmierung mit Kotlin und Arrow herauszuholen!</p> </div> </div> </div> <div class="sect1"> <h2 id="_weitergehen">Weitergehen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Offizielle Dokumentation von Arrow:https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-either/[Pfeil entweder] - Kotlin Coroutines mit Arrow :https://arrow-kt.io/docs/fx/[Arrow Fx Coroutines]</p> </div> <div class="paragraph"> <p>Vergiss nicht, deine Erfahrungen und deine bevorzugten Techniken zum Arbeiten damit zu teilen.`Either`in den Kommentaren unten!</p> </div> </div> </div> Praktischer Leitfaden: Dateien unter Linux suchen 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="#_einleitung">Einleitung</a></li> <li><a href="#_verwendung_des_befehls_find">Verwendung des Befehls `find</a> <ul class="sectlevel2"> <li><a href="#_zusätzliche_optionen_für_find">Zusätzliche Optionen für `find</a></li> </ul> </li> <li><a href="#_verwendung_des_befehls_locate">Verwendung des Befehls `locate</a></li> <li><a href="#_verwendung_des_befehls_grep_zum_suchen_von_text_in_dateien">Verwendung des Befehls <code>grep</code> zum Suchen von Text in Dateien</a></li> <li><a href="#_fazit">Fazit</a></li> </ul> </div> <div class="sect1"> <h2 id="_einleitung">Einleitung</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Die Problematik: Dateien in einem Linux-Betriebssystem über das Terminal suchen.</div> <p>In diesem Artikel werden wir untersuchen, wie man unter Ubuntu mithilfe eines Zsh-Terminals nach einer Datei sucht. Zsh (Z shell) ist ein leistungsfähiger und weit verbreiteter Shell-Interpreter, der aufgrund seiner Flexibilität und seiner erweiterten Funktionen häufig verwendet wird.</p> </div> <div class="paragraph"> <p>Ubuntu, eine beliebte Linux-Distribution, bietet mehrere Kommandozeilen-Tools zum Suchen von Dateien. Wir werden sehen, wie man Befehle wie`find`, <code>locate</code> et `grep`Um Dateien im Terminal schnell und effizient zu finden.</p> </div> </div> </div> <div class="sect1"> <h2 id="_verwendung_des_befehls_find">Verwendung des Befehls `find</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Bestellung`find`ermöglicht das Suchen nach Dateien in einem bestimmten Verzeichnis und seinen Unterverzeichnissen. Die Grundsyntax lautet wie folgt:</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>Hier ist ein praktisches Beispiel, in dem wir nach einer Datei namens suchen.<code>example.txt`im Verzeichnis</code>/home`:</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>Dieser Befehl wird alle Unterverzeichnisse von`/home`und den vollständigen Pfad der Datei anzeigen, wenn sie gefunden wird.</p> </div> <div class="paragraph"> <p><strong>Online-Handbuch des Befehls`find`:https://man.archlinux.org/man/find.1.fr/[man find,windows=read-later]</strong></p> </div> <div class="sect2"> <h3 id="_zusätzliche_optionen_für_find">Zusätzliche Optionen für `find</h3> <div class="paragraph"> <p>Der Befehl`find`ist sehr mächtig und verfügt über viele Optionen. Hier sind einige nützliche Beispiele:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Nach Dateityp suchen</strong>: Um nur nach Dateien zu suchen, verwenden Sie`-type f`, und um Verzeichnisse zu suchen, verwenden`-type d`. - <strong>Nach Größe suchen</strong>: Sie können auch die Dateien nach ihrer Größe filtern, indem Sie die Option verwenden`-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="_verwendung_des_befehls_locate">Verwendung des Befehls `locate</h2> <div class="sectionbody"> <div class="paragraph"> <p>Der Befehl`locate`ist schneller als`find`weil sie eine vorindizierte Datenbank der auf dem System vorhandenen Dateien verwendet. Sie müssen diese Datenbank zunächst mit dem folgenden Befehl aktualisieren:</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>Danach können Sie eine Datei wie folgt suchen:</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>Ich verwendehttps://fr.wikipedia.org/wiki/Z_Shell[zsh]mithttps://github.com/ohmyzsh/ohmyzsh/wiki[oh-my-zsh], es stellt sich heraus, dass die Bestellung`locate`ist nicht zugänglich seit`zsh`aber durchaus möglich seit`bash`, um diesem entgegenzuwirken, das Argument`-c`der Bestellung`bash`ermöglicht das Ausführen eines Befehls`bash`von einem anderen Typ Terminal aus.</p> </div> <div class="paragraph"> <p>hier suche ich die Dateien die mit dem Muster enden`001.pdf`im Benutzerverzeichnis</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>Online-Handbuch des Befehls`locate` : <a href="https://man.archlinux.org/man/locate.1.fr/">man locate</a>*</p> </div> </div> </div> <div class="sect1"> <h2 id="_verwendung_des_befehls_grep_zum_suchen_von_text_in_dateien">Verwendung des Befehls <code>grep</code> zum Suchen von Text in Dateien</h2> <div class="sectionbody"> <div class="paragraph"> <p>Wenn Sie nach einem bestimmten Text innerhalb einer Datei suchen möchten, können Sie verwenden`grep`. Zum Beispiel, um das Vorkommen des Wortes "Ubuntu" in allen Dateien zu suchen`.txt`Aus dem aktuellen Verzeichnis, verwenden Sie :</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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Suche nach Dateien unter Ubuntu mit einem Zsh-Terminal kann mithilfe mehrerer leistungsstarker Tools erfolgen.`find`ist flexibel und bietet eine Vielzahl von Optionen, während`locate`Ermöglicht eine schnelle Suche mithilfe einer vorbereiteten Datenbank. Schließlich,`grep`ermöglicht das Finden von Textvorkommen innerhalb der Dateien.</p> </div> <div class="paragraph"> <p>Diese Befehle bieten dir eine vollständige Palette an Werkzeugen, um deine Dateisuche effizienter und an deine Bedürfnisse angepasst zu machen, und jedes dieser Befehle verfügt über ein Handbuch, das mit dem Befehl sichtbar ist.<code>man</code></p> </div> </div> </div> Linux-Memo 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="#_die_tastatur">Die Tastatur :</a> <ul class="sectlevel2"> <li><a href="#_die_taste_ctrl"><em>die Taste &lt;Ctrl&gt;</em></a></li> </ul> </li> <li><a href="#_erlaubnisautorisierung">Erlaubnis(Autorisierung)</a></li> <li><a href="#_dateisuche">Dateisuche</a></li> </ul> </div> <div class="sect1"> <h2 id="_die_tastatur">Die Tastatur :</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_die_taste_ctrl"><em>die Taste &lt;Ctrl&gt;</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">Link</a><br> <a href="https://blogmotion.fr/systeme/astuces-bash-linux-16175">anderer Link</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_erlaubnisautorisierung">Erlaubnis(Autorisierung)</h2> <div class="sectionbody"> <div class="paragraph"> <p>CHMOD wird verwendet, um die Berechtigungen einer Datei zu ändern.</p> </div> <div class="paragraph"> <p>Erlaubnis Befehl</p> </div> <div class="paragraph"> <p>U G W rwx rwx rwx chmod 777 filename rwx rwx r-x chmod 775 filename rwx r-x r-x chmod 755 filename rw- rw- r-- chmod 664 filename rw- r-- r-- chmod 644 filename</p> </div> <div class="paragraph"> <p>U = User G = Gruppe W = Welt</p> </div> <div class="paragraph"> <p>r = lesbar w = beschreibbar x = ausführbar - = keine Berechtigung</p> </div> <div class="paragraph"> <p>Eine andere Möglichkeit, die Berechtigungen zu sehen:</p> </div> <div class="paragraph"> <p>400 lesbar durch den Eigentümer 040 von der Gruppe gelesen 004 von jemandem gelesen (anderes) 200 geschrieben vom Eigentümer 020 nach Gruppe schreiben 002 von irgendjemand geschrieben 100 vom Eigentümer ausführen Ausführen nach Gruppe von jedem ausführbar</p> </div> <div class="paragraph"> <p>Um eine Kombination zu erhalten, reicht es, sie zu addieren.<br> Zum Beispiel, um vom Eigentümer gelesen, geschrieben, ausgeführt zu werden,<br> gelesen, ausgeführt, von einer Gruppe und ausgeführt von irgendjemand,<br> Sie würden 400+200+100+040+010+001 addieren, um 751 zu erhalten.<br></p> </div> </div> </div> <div class="sect1"> <h2 id="_dateisuche"><a href="/blog/2024/0074_seach_file_linux_post.html">Dateisuche</a></h2> <div class="sectionbody"> </div> </div> Einen Port des Linux-Subsystems für den Windows-Host freigeben 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 Installiere Pandoc 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>Lesezeit : 3 min</em> Pandoc ein universeller Dokumentkonverter</div> <p>Pandoc ist eine Open-Source-Textverarbeitungssoftware, die verwendet werden kann, um Dokumente zwischen verschiedenen Formaten zu konvertieren. Es gibt mehrere Möglichkeiten, Pandoc zu installieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_installation_von_der_download_seite"><strong>Installation von der Download-Seite</strong></h2> <div class="sectionbody"> <div class="paragraph"> <p>Um Pandoc von der Download-Seite zu installieren, gehen Sie wie folgt vor:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Greife auf die Pandoc-Download-Seite zu :https://pandoc.org/installing.html/[<a href="https://pandoc.org/installing.html" class="bare">https://pandoc.org/installing.html</a>]</p> </li> <li> <p>Lade den Paket-Installer für dein Betriebssystem herunter.</p> </li> <li> <p>Führen Sie das Installationsprogramm aus, um Pandoc zu installieren.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Installation aus einer ZIP-Datei</strong></p> </div> <div class="paragraph"> <p>Um Pandoc aus einer Zip-Datei zu installieren, gehen Sie wie folgt vor:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Laden Sie die ZIP-Datei herunter, die die Pandoc-Binaries und die Dokumentation enthält.</p> </li> <li> <p>Entpacken Sie die ZIP-Datei.</p> </li> <li> <p>Verschieben Sie die Binaries in ein Verzeichnis Ihrer Wahl.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Installation mit Chocolatey</strong></p> </div> <div class="paragraph"> <p>Um Pandoc mithilfe von Chocolatey zu installieren, gehen Sie wie folgt vor:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Öffnen Sie eine Eingabeaufforderung.</p> </li> <li> <p>Führen Sie den folgenden Befehl aus:</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>Installation mit winget</strong></p> </div> <div class="paragraph"> <p>Um Pandoc mit winget zu installieren, gehen Sie wie folgt vor:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Öffnen Sie eine Eingabeaufforderung.</p> </li> <li> <p>Führen Sie den folgenden Befehl aus:</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>Empfehlungen</strong></p> </div> <div class="paragraph"> <p>Standardmäßig erstellt Pandoc PDFs mit LaTeX. Es wird empfohlen, LaTeX über MiKTeX zu installieren. Mit der Option`--pdf-engine`, Sie können jedoch andere Programme für diese Aufgabe angeben.</p> </div> <div class="paragraph"> <p><strong>Warnung</strong></p> </div> <div class="paragraph"> <p>Die Verwendung mehrerer Installationsmethoden kann zu zwei unterschiedlichen Installationen von Pandoc führen. Es wird empfohlen, Pandoc ordnungsgemäß zu deinstallieren, bevor Sie zu einer alternativen Installationsmethode wechseln.</p> </div> <div class="paragraph"> <p><strong>Installation unter Linux über WSL</strong></p> </div> <div class="paragraph"> <p>Überprüfen Sie, ob die Version von pandoc in Ihrem Paketmanager nicht veraltet ist. Pandoc befindet sich in den Repositorys von Debian, Ubuntu, Slackware, Arch, Fedora, NixOS, openSUSE, Gentoo und Void.</p> </div> <div class="paragraph"> <p>Um die neueste Version zu erhalten, bieten wir ein binäres Paket für die Architektur amd64 auf der Download-Seite an.</p> </div> <div class="paragraph"> <p>Die ausführbare Datei ist statisch verlinkt und hat weder dynamische Abhängigkeiten noch Abhängigkeiten von externen Datendateien. Hinweis: Aufgrund der statischer Linkierung des Pandoc-Binaries dieses Pakets kann keine Lua-Filter verwendet werden, die externe in C geschriebene Lua-Module erfordern.</p> </div> <div class="paragraph"> <p>Ein Tarball und ein DEB-Installer werden bereitgestellt. Um das deb zu installieren:</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>Beispiel zum Zeitpunkt des Schreibens:</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`ist der Pfad zur heruntergeladenen .deb-Datei. Das wird die ausführbare Datei installieren`pandoc`und die Manpage.</p> </div> <div class="paragraph"> <p>Wenn Sie eine RPM-basierte Distribution verwenden, können Sie vielleicht das DEB-Paket von unserer Download-Seite mit alien installieren.</p> </div> <div class="paragraph"> <p>Auf jeder Distribution können Sie vom Tarball aus installieren`$DEST`(zum Beispiel,<code>/usr/local/</code> ou <code>$HOME/.local</code>) beim Machen:</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`ist der Pfad zum heruntergeladenen gezippte Tarball. Für Pandoc-Versionen vor 2.0, die keinen Tarball bereitstellen, versuchen Sie stattdessen:</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>Sie können auch aus dem Quellcode installieren, indem Sie die nachfolgenden Anweisungen verwenden unter`Compilation à partir de la source`. Bitte beachten Sie, dass die meisten Distributionen die Haskell-Plattform in ihren Paket-Repositories haben. Zum Beispiel können Sie es unter Debian/Ubuntu installieren mit</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>Standardmäßig erstellt Pandoc PDFs mit LaTeX. Wir empfehlen Ihnen, TeX Live über Ihren Paket-Manager zu installieren. (Auf Debian/Ubuntu,<code>apt-get install texlive</code>). Mit der Option`--pdf-engine`, Sie können jedoch andere Programme für diese Aufgabe angeben.</p> </div> </div> </div> Implementierung von kotlin.Triple in JavaScript, TypeScript und Python 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>Lesedauer : 2 min</em> Eine vollständige Implementierung der Klasse kotlin.Triple in JavaScript, TypeScript und Python mittels funktionaler Programmierung erstellen.</div> <p><strong>Hinweis :</strong>Die Typen`Maybe`, <code>Either</code>, `Result`gehören nicht zur Grundsprache von JavaScript oder TypeScript, daher müssen wir sie selbst implementieren.</p> </div> </div> </div> <div class="sect1"> <h2 id="_javascript">JavaScript</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) =&gt; ({ map: (fn) =&gt; (value !== null &amp;&amp; value !== undefined ? Maybe(fn(value)) : Maybe(null)), flatMap: (fn) =&gt; (value !== null &amp;&amp; value !== undefined ? fn(value) : Maybe(null)), getOrElse: (defaultValue) =&gt; (value !== null &amp;&amp; value !== undefined ? value : defaultValue), }); // Either type const Either = { Left: (value) =&gt; ({ map: (fn) =&gt; Either.Left(value), flatMap: (fn) =&gt; Either.Left(value), getOrElse: (defaultValue) =&gt; defaultValue, isLeft: true, isRight: false, }), Right: (value) =&gt; ({ map: (fn) =&gt; Either.Right(fn(value)), flatMap: (fn) =&gt; fn(value), getOrElse: (defaultValue) =&gt; 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) =&gt; Maybe(other) .flatMap((denominator) =&gt; 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) =&gt; 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&lt;T&gt; = { map&lt;U&gt;(fn: (value: T) =&gt; U): Maybe&lt;U&gt;; flatMap&lt;U&gt;(fn: (value: T) =&gt; Maybe&lt;U&gt;): Maybe&lt;U&gt;; getOrElse(defaultValue: T): T; }; const just = &lt;T&gt;(value: T): Maybe&lt;T&gt; =&gt; ({ map: &lt;U&gt;(fn: (value: T) =&gt; U) =&gt; just(fn(value)), flatMap: &lt;U&gt;(fn: (value: T) =&gt; Maybe&lt;U&gt;) =&gt; fn(value), getOrElse: (_: T) =&gt; value, }); const nothing = &lt;T&gt;(): Maybe&lt;T&gt; =&gt; ({ map: &lt;U&gt;(_: (value: T) =&gt; U) =&gt; nothing&lt;U&gt;(), flatMap: &lt;U&gt;(_: (value: T) =&gt; Maybe&lt;U&gt;) =&gt; nothing&lt;U&gt;(), getOrElse: (defaultValue: T) =&gt; defaultValue, }); // Either type type Either&lt;L, R&gt; = { map&lt;U&gt;(fn: (value: R) =&gt; U): Either&lt;L, U&gt;; flatMap&lt;U&gt;(fn: (value: R) =&gt; Either&lt;L, U&gt;): Either&lt;L, U&gt;; getOrElse(defaultValue: R): R; isLeft: boolean; isRight: boolean; }; const left = &lt;L, R&gt;(value: L): Either&lt;L, R&gt; =&gt; ({ map: &lt;U&gt;(_: (value: R) =&gt; U) =&gt; left&lt;L, U&gt;(value), flatMap: &lt;U&gt;(_: (value: R) =&gt; Either&lt;L, U&gt;) =&gt; left&lt;L, U&gt;(value), getOrElse: (defaultValue: R) =&gt; defaultValue, isLeft: true, isRight: false, }); const right = &lt;L, R&gt;(value: R): Either&lt;L, R&gt; =&gt; ({ map: &lt;U&gt;(fn: (value: R) =&gt; U) =&gt; right&lt;L, U&gt;(fn(value)), flatMap: &lt;U&gt;(fn: (value: R) =&gt; Either&lt;L, U&gt;) =&gt; fn(value), getOrElse: (_: R) =&gt; value, isLeft: false, isRight: true, }); // Triple class class Triple&lt;T&gt; { constructor(public a: T, public b: T, public c: T) {} map&lt;U&gt;(fn: (value: T) =&gt; U): Triple&lt;U&gt; { return new Triple&lt;U&gt;(fn(this.a), fn(this.b), fn(this.c)); } static of&lt;T&gt;(a: T, b: T, c: T): Triple&lt;T&gt; { return new Triple&lt;T&gt;(a, b, c); } // Example method using Maybe and Either divideBy(other: T): Either&lt;string, number&gt; { return just(this.b) .flatMap((numerator) =&gt; just(other) .flatMap((denominator) =&gt; 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) =&gt; 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>Um eine Implementierung in Python zu erstellen, indem man`pydantic`pour die Validierung der Typen und`pymonad`für die Monaden:</p> </div> <div class="listingblock"> <div class="title">Abhängigkeiten installieren :</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">In diesem Beispiel:</div> <ul> <li> <p><code>pydantic`um die Klasse zu definieren`Triple`mit typisierten Feldern. Die Methode`divide_by`verwendet die Monade`Either</code> de `pymonad`Um potenzielle Fehler aufgrund der Division durch Null zu behandeln. Personalisierte Validierung, um sicherzustellen, dass der Wert von`b`ist nicht gleich null. Wenn sie gleich null ist, wird eine Ausnahme ausgelöst, und`pymonad`Diese Ausnahme auffangen, um ein Ergebnis zurückzugeben`Left`den Fehler anzeigend.</p> </li> </ul> </div> </div> </div> Einführung in Google Apps Script 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="_inhaltsverzeichnis">Inhaltsverzeichnis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lesedauer: 30 Minuten</p> </div> <div class="ulist"> <ul> <li> <p><a href="#_einführung">Einführung</a></p> </li> <li> <p><a href="#_grundstruktur_in_google_apps_script">Grundstruktur in Google Apps Script</a></p> </li> <li> <p><a href="#_typen_und_variablen_in_google_apps_script">Typen und Variablen in Google Apps Script</a></p> </li> <li> <p><a href="#Konstanten">Variablen und Buchstaben in Google Apps Script</a></p> </li> <li> <p><a href="#_operationen_und_operatoren_in_google_apps_script">Operationen und Operatoren in Google Apps Script</a></p> </li> <li> <p><a href="#Var">Let und Const in Google Apps Script</a></p> </li> <li> <p><a href="#_kontrollstrukturen_in_google_apps_script">Kontrollstrukturen in Google Apps Script</a></p> </li> <li> <p><a href="#_schleifen_in_google_apps_script">Schleifen in Google Apps Script</a></p> </li> <li> <p><a href="#_objekte_in_google_apps_script">Objekte in Google Apps Script</a></p> </li> <li> <p><a href="#_funktionen_in_google_apps_script">Funktionen in Google Apps Script</a></p> </li> <li> <p>Parameter und Scopes in Google Apps Script</p> </li> <li> <p>Rest- und Spread-Operatoren in Google Apps Script</p> </li> <li> <p><a href="#Zuweisung durch zerlegung in Google Apps Script">[Zuweisung durch zerlegung in Google Apps Script]</a></p> </li> <li> <p><a href="#_sammlungen_und_deklarative_programmierung_in_google_apps_script">Sammlungen und deklarative Programmierung in Google Apps Script</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_einführung">Einführung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script (GAS) ist eine Skriptentwicklungsplattform, die mit verschiedenen Google-Diensten wie Google Sheets, Google Docs und Google Forms verknüpft ist. Sie ermöglicht die Automatisierung von Aufgaben, das Hinzufügen von benutzerdefinierten Funktionen und die Integration von Google-Diensten.</p> </div> <div class="paragraph"> <p>In diesem Memorandum werden wir die Hauptkonzepte von Google Apps Script anhand konkreter Beispiele erkunden. Wir werden Konzepte wie Variablen, Schleifen, Funktionen und vieles mehr behandeln, angepasst an den spezifischen Kontext von GAS.</p> </div> </div> </div> <div class="sect1"> <h2 id="_grundstruktur_in_google_apps_script">Grundstruktur in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um zu beginnen, schauen wir uns die Grundstruktur eines Google Apps Scripts an.</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="_typen_und_variablen_in_google_apps_script">Typen und Variablen in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script verwendet JavaScript als Programmiersprache. Die Datentypen und Variablen funktionieren ähnlich wie bei standard 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="_operationen_und_operatoren_in_google_apps_script">Operationen und Operatoren in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Operationen und Operatoren in Google Apps Script sind die gleichen wie in 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_und_const_in_google_apps_script">Var, Let und Const in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>In GAS, die Konzepte von`var`, <code>let</code>, et `const`werden verwendet, um Variablen zu deklarieren. Jedoch ist es wesentlich, ihre Unterschiede und ihre Auswirkungen zu verstehen.</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="_kontrollstrukturen_in_google_apps_script">Kontrollstrukturen in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Kontrollstrukturen wie`if`, <code>else</code>, <code>while</code> et `for`werden verwendet, um den Ausführungsfluss in Google Apps Script zu verwalten.</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 &lt; 5) { Logger.log(compteur); compteur++; } for (var i = 0; i &lt; 3; i++) { Logger.log(i); } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_parameter_und_scopes_in_google_apps_script">Parameter und Scopes in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Parameter und Scopes spielen eine entscheidende Rolle bei der Entwicklung von Skripten in GAS. Verstehen Sie, wie sie funktionieren, um unerwartetes Verhalten zu vermeiden.</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="_konstanten_variablen_und_buchstaben_in_google_apps_script">Konstanten, Variablen und Buchstaben in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Den Unterschied zwischen verstehen`const`, <code>var</code>, et `let`ist essentiell für eine effektive Nutzung von Variablen in 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="_schleifen_in_google_apps_script">Schleifen in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Schleifen, wie`for` et <code>while</code>, sind essentiell, um über Elemente zu iterieren und wiederholende Operationen durchzuführen.</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 &lt; 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="_objekte_in_google_apps_script">Objekte in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Objekte werden verwendet, um Daten zu strukturieren. In GAS erleichtern viele eingebaute Objekte die Interaktion mit den Google-Diensten.</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="_konstanten_variablen_und_buchstaben_in_google_apps_script_2">Konstanten, Variablen und Buchstaben in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Den Unterschied verstehen zwischen`const`, <code>var</code>, et `let`ist essentiell für eine effektive Nutzung von Variablen in 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="_funktionen_in_google_apps_script">Funktionen in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Funktionen sind grundlegende Elemente in der Programmierung. In GAS können sie auf verschiedene Arten deklariert und aufgerufen werden.</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="_rest_und_spread_operatoren_in_google_apps_script">Rest- und Spread-Operatoren in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Rest-Operatoren (<code>&#8230;&#8203;</code>) und Ausbreitung (<code>&#8230;&#8203;</code>) sind nützlich zum Bearbeiten von Arrays und Objekten auf prägnante Weise.</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="_affectation_par_décomposition_en_google_apps_script">Affectation par Décomposition en Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Destrukturierungszuweisung ist eine leistungsfähige Funktion, die es ermöglicht, Werte aus Objekten und Arrays auf kompakte Weise zu extrahieren.</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="_sammlungen_und_deklarative_programmierung_in_google_apps_script">Sammlungen und deklarative Programmierung in Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script unterstützt Datenstrukturen wie Arrays sowie Konzepte der funktionalen Programmierung und deklarativen Iteration (&gt;&lt;imperativ), wie`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="_fazit">Fazit</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieses Memo hat die grundlegenden Konzepte von Google Apps Script anhand konkreter Code-Beispiele illustriert. Verwenden Sie dieses Wissen, um Ihre täglichen Aufgaben zu automatisieren, Ihre Dokumente zu personalisieren und die Funktionalitäten von Google Apps Script voll auszuschöpfen.</p> </div> </div> </div> Express-Schulung zu Google Forms-Skript und Automatisierung 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>Dauer: 30 Minuten</p> </div> </div> </div> <div class="sect1"> <h2 id="_ziele">Ziele</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Die Grundlagen von Google Apps Script in Forms verstehen - Lernen Sie, wie Sie den Skript-Editor öffnen und eine Anweisung beim Auslöser ausführen</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_verzögerung">Verzögerung</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Einführung in das Google Formular-Skript</strong>(5 Min)</p> </li> </ol> </div> <div class="paragraph"> <p>Schneller Überblick über das Google Form Script - Präsentation der Hauptfunktionen</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Erstellung eines Google-Formulars und eines zugehörigen Skripts</strong>(5 min)</p> <div class="ulist"> <ul> <li> <p>Erstellen eines einfachen Formulars mit Google Forms - Einführung in den zugehörigen Skript-Editor</p> </li> </ul> </div> </li> <li> <p><strong>Eine Anweisung ausführen</strong>(10 Min)</p> </li> </ol> </div> <div class="paragraph"> <p>Konfiguration des 'on start'-Triggers - Konfiguration des Auslösers „on submit“ - Schreiben eines Skripts zum Ausführen einer Anweisung - Schnelle Tests zum Überprüfen der ordnungsgemäßen Funktion im Journal</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Analyse der Ergebnisse und Best Practices</strong>(10 min)</p> <div class="ulist"> <ul> <li> <p>Überprüfung der Ergebnisse der Ausführung einer Anweisung - Diskussion über ein Beispiel-Skript und wie die Automatisierung Zeit sparen kann</p> </li> </ul> </div> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_voraussetzungen">Voraussetzungen</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Ein Google-Konto haben und Zugriff auf Google Forms und Google Sheets</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_material">Material</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Computer mit einem Webbrowser und einer Internetverbindung</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_bemerkung">Bemerkung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dieser Expresskurs bietet eine schnelle Einführung in die Automatisierung mit Google Form Script. Für ein tieferes Verständnis werden längere Schulungen empfohlen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_einführung_in_google_form_script">1 - Einführung in Google Form Script</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_slide_1_kurzüberblick_über_das_google_form_skript">Slide 1: Kurzüberblick über das Google Form-Skript</h3> <div class="ulist"> <ul> <li> <p>Google Form Script ist eine integrierte Skriptplattform für Google Forms. - Sie ermöglicht das Hinzufügen benutzerdefinierter Funktionen und das Automatisieren von Aufgaben.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_2_präsentation_der_hauptfunktionen">Slide 2: Präsentation der Hauptfunktionen</h3> <div class="ulist"> <ul> <li> <p>Script Editor : Der integrierte Skripteditor zum Schreiben von Google Apps Script-Skripten. - Trigger: Ereignisse wie "on submit" aktivieren die Ausführung von Skripten.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_3_avantages_de_lutilisation_de_google_form_script">Slide 3: Avantages de l&#8217;utilisation de Google Form Script</h3> <div class="ulist"> <ul> <li> <p>Anpassung: Erstelle maßgeschneiderte Formulare mit einzigartigen Funktionen. - Automatisierung: Automatisieren Sie Aktionen als Antwort auf Formularantworten. Integration: Integrieren Sie Skripte mit anderen Google-Diensten für eine reichhaltigere Erfahrung.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_hinweis_für_den_vortragenden">Hinweis für den Vortragenden:</h3> <div class="paragraph"> <p>Diese Funktionen bieten ein erhebliches Potenzial zur Personalisierung und Automatisierung von Formularen. Der weitere Verlauf dieser Schulung wird die Erstellung von Skripten und spezifischen Automatisierungen genauer untersuchen.</p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/add-ons/editors/forms?hl=de" class="bare">https://developers.google.com/apps-script/add-ons/editors/forms?hl=de</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="_erstellung_eines_google_formulars_und_eines_zugehörigen_skripts_5_min">Erstellung eines Google-Formulars und eines zugehörigen Skripts (5 min)</h2> <div class="sectionbody"> </div> </div> Python-Memo 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="_python_unter_windows_installieren">Python unter Windows installieren</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://ninite.com/pythonx3/">Python auf Windows</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="_python_läuft">Python läuft</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p>Das Problem: Python-Venv</p> </li> </ol> </div> <div class="listingblock"> <div class="title">Referenz :</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="_installationsvoraussetzung">Installationsvoraussetzung</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="_einweihung">Einweihung</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://python.doctor/page-apprendre-programmation-orientee-objet-poo-classes-python-cours-debutants">Python OOP</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_entwurfsmuster_des_gof_in_python">Entwurfsmuster des GoF in Python</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://github.com/whikwon/python-patterns/">Implementierung 1</a></p> </div> <div class="paragraph"> <p><a href="https://github.com/Sean-Bradley/Design-Patterns-In-Python">Implementierung 2</a></p> </div> <div class="paragraph"> <p><a href="https://sbcode.net/python/">vollständiges Buch</a></p> </div> <div class="paragraph"> <p>Die GoF-Designmuster sind ein Satz von 23 Designmustern, die im Buch "Design Patterns: Elements of Reusable Object-Oriented Software" beschrieben wurden.</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Hier ist eine Liste der GoF-Designmuster</caption> <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">Name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Beschreibung</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Fabrikmethode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstelle Objekte, ohne die genaue Klasse anzugeben, die instanziiert werden soll.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Abstrakte Fabrik</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstelle Familien von verwandten oder abhängigen Objekten ohne deren konkrete Klasse anzugeben.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ersteller</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Trennt die Konstruktion eines komplexen Objekts von seiner Darstellung, damit derselbe Konstruktionsprozess unterschiedliche Darstellungen erzeugen kann.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Prototyp</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Erstelle neue Objekte durch Kopieren eines vorhandenen Prototyps.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Singleton</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Beschränkt die Instanziierung einer Klasse auf ein einzelnes Objekt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>anpassen</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konvertiert die Schnittstelle einer Klasse in eine andere Schnittstelle, die der Client erwartet.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Brücke</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Entkoppel eine Abstraktion von ihrer Implementierung, sodass beide unabhängig voneinander variieren können.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Komposit</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Setze Objekte in Baumstrukturen zusammen, um Teil-Ganzes-Hierarchien darzustellen.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Dekorateur</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hänge dynamisch zusätzliche Verantwortlichkeiten an ein Objekt an.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Fassade</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bietet eine einheitliche Schnittstelle zu einer Reihe von Schnittstellen eines Untersystems.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Flyweight</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Verringert die Kosten für die Erstellung und Nutzung leichter Objekte.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Proxy</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stellt einen Ersatz oder einen Platzhalter für ein anderes Objekt bereit, um den Zugriff darauf zu kontrollieren.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kette der Verantwortung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ermöglicht mehreren Objekten, eine Anfrage zu behandeln.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Befehl</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kapselt eine Anfrage in einem Objekt, wodurch Clients mit verschiedenen Anfragen, Warteschlangen oder Protokollen konfiguriert werden können und stornierbare Operationen unterstützt werden.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Dolmetscher</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gib eine Darstellung der Grammatik einer Sprache an und verwende diese Darstellung, um Sätze in dieser Sprache zu interpretieren.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Iterator &lt;/think&gt; Iterator</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Es bietet eine Möglichkeit, die Elemente eines aggregierten Objekts sequentiell zu durchlaufen, ohne seine zugrundeliegende Darstellung offenzulegen.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Vermittler</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ermöglicht, die komplexen Abhängigkeiten zwischen den Objekten zu reduzieren, indem es sie ausschließlich über ein Mediator-Objekt kommunizieren lässt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Erinnerung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bietet die Fähigkeit, ein Objekt in seinen vorherigen Zustand wiederherzustellen (ohne die Kapselung zu verletzen).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Beobachten</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Definiert eine Eins-zu-Viele-Beziehung zwischen den Objekten, sodass bei einer Zustandsänderung eines Objekts alle seine Abhängigen automatisch benachrichtigt und aktualisiert werden.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Zustand</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ermöglicht einem Objekt, sein Verhalten zu ändern, wenn es seinen internen Zustand ändert.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Strategie</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Definiert eine Familie von Algorithmen, kapselt jedes davon ein und macht sie austauschbar.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Vorlagenmethode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Definiert das Skelett eines Algorithmus in einer Methode, wobei bestimmte Schritte an Unterklassen delegiert werden.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Besucher</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ermöglicht es, eine neue Operation zu definieren, die auf einer Objektstruktur ausgeführt werden kann, ohne die Klassen der Objekte zu ändern, auf denen sie ausgeführt wird.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_funktionale_programmierung">Funktionale Programmierung</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">Bibliothek</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">Beschreibung</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 ist eine Implementierung monadischer Datenstrukturen in Python, die auf Programmiersprachen wie Haskell und F# basiert und Implementierungen für die am häufigsten verwendeten Monadentypen in der funktionalen Programmierung bereitstellt.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 ist eine Python-Bibliothek für funktionale Programmierung, die Tools bereitstellt, um mit reinen Funktionen und iterierbaren Objekten zu arbeiten.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Toolz</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 ist eine Python-Bibliothek für funktionale Programmierung, die Werkzeuge bereitstellt, um mit reinen Funktionen und Iterables zu arbeiten.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Fn.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 ist eine Python-Bibliothek für funktionale Programmierung, die Werkzeuge zum Arbeiten mit reinen Funktionen und iterierbaren bereitstellt.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kokosnuss</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">Coconut fügt Python mehrere Funktionen für die funktionale Programmierung hinzu, einschließlich Musterabgleich.https://stackoverflow.com/questions/11909681/are-there-pattern-matching-functions-in-python-like-this[Gespräch sof]</p></td> </tr> </tbody> </table> <div class="sect2"> <h3 id="_nebenwirkungen">Nebenwirkungen</h3> </div> <div class="sect2"> <h3 id="_schleifen">Schleifen</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> Web-Entwicklung 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 Sammelkartenspiele (TCGs) 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 Memo Typescript 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>GitHub-Repository:https://github.com/cheroliv/ts-codebase[ts-codebase, window="_blank]</p> </div> </div> </div> <div class="sect1"> <h2 id="toc_ts"><span class="underline">Intro typescript</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#ts_types">Die Typen in TypeScript</a></p> </li> <li> <p><a href="#Funktionen">Funktionen</a></p> </li> <li> <p><a href="#data_struct">Datenstruktur</a></p> </li> <li> <p><a href="#enums_tuples">Enums und Tuples</a></p> </li> <li> <p><a href="#void_never">Void und Never</a></p> </li> <li> <p><a href="#class_interface">Klassen und Schnittstellen</a></p> </li> <li> <p><a href="#tsconfig">Die Datei tsconfig.json</a></p> </li> <li> <p><a href="#modules">Module</a></p> </li> <li> <p><a href="#Versprechen">Versprechen</a></p> </li> <li> <p><a href="#async-await">async/await</a></p> </li> <li> <p><a href="#generische">[generische]</a></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">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; Intro typescript &lt;script src="01_types.js"&gt;&lt;/script&gt; &lt;script src="02_data_structure.js"&gt;&lt;/script&gt; &lt;script src="03_enums_tuples.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ts_types">Die Typen in TypeScript</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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="Funktionen">Funktionen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Funktionen sind wiederverwendbare Codeblöcke.</p> </div> <div class="paragraph"> <p>Beispiel einer Bewertung:</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 =&gt; a + b;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="data_struct">Datenstruktur</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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="enums_tuples">Enums und Tuples</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_enums_tuples.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) =&gt; { motd.meaning.forEach(day =&gt; 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[] ) =&gt; { 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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="void_never">Void und 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 &gt; 0); } verify_writers_length(); const verify_writers_length_arrow = (): void =&gt; console.assert(writers.length &gt; 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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="class_interface">Klassen und Schnittstellen</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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="tsconfig">Die Datei 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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="modules">Module</h2> <div class="sectionbody"> <div class="paragraph"> <p>Module ermöglichen es, den Code in mehrere Dateien zu organisieren.</p> </div> <div class="paragraph"> <p>Beispiel einer Bewertung :</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 =&gt; 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">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="Versprechen">Versprechen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Versprechen werden verwendet, um asynchrone Operationen durchzuführen.</p> </div> <div class="paragraph"> <p>Beispiel für eine Bewertung:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const promise = new Promise&lt;string&gt;((resolve) =&gt; { // Code asynchrone ici resolve("Succès"); }); promise.then((result) =&gt; { console.log(result); });</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</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 vereinfacht die Handhabung von Versprechen.</p> </div> <div class="paragraph"> <p>Beispiel einer Bewertung:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const fetchData = async (): Promise&lt;void&gt; =&gt; { const result = await someAsyncFunction(); console.log(result); };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Intro typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="generika">Generika</h2> <div class="sectionbody"> <div class="paragraph"> <p>Generics ermöglichen die Erstellung wiederverwendbarer Komponenten mit dynamischen Typen.</p> </div> <div class="paragraph"> <p>Beispiel einer Bewertung:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-typescript" data-lang="typescript">const identity = &lt;T&gt;(arg: T): T =&gt; arg; const output = identity&lt;string&gt;("hello"); console.log(output);</code></pre> </div> </div> </div> </div> Memo CSS 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">Inhaltsverzeichnis</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#good_links">gute Links</a></p> </li> <li> <p><a href="#repo">Repository und Codebeispiel</a></p> </li> <li> <p><a href="#toc_anfang">[toc_anfang]</a></p> </li> </ol> </div> <div class="sect2"> <h3 id="good_links">gute Links</h3> <div class="paragraph"> <p><a href="#toc">Inhaltsverzeichnis</a></p> </div> </div> <div class="sect2"> <h3 id="repo">Repository und Codebeispiel</h3> <div class="paragraph"> <p>GitHub-Repository:https://github.com/cheroliv/css-codebase[css-codebase, Fenster = "_blank]</p> </div> </div> <div class="sect2"> <h3 id="toc_beginn"><span class="underline">Beginn CSS</span></h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Beginn_intro</p> </li> <li> <p><a href="#Beginn_texts">[Beginn_texts]</a></p> </li> <li> <p><a href="#Beginn_Hintergrund">[Beginn_Hintergrund]</a></p> </li> <li> <p><a href="#début_boxes">Die Kästen (boxes)</a></p> </li> <li> <p><a href="#Anfang_flexbox">[Anfang_flexbox]</a></p> </li> <li> <p><a href="#Anfang_grid">[Anfang_grid]</a></p> </li> <li> <p><a href="#Anfang_abs_pos">[Anfang_abs_pos]</a></p> </li> <li> <p><a href="#Anfang_responsive">[Anfang_responsive]</a></p> </li> <li> <p><a href="#Anfang_Schluss">[Anfang_Schluss]</a></p> </li> </ol> </div> <div class="paragraph"> <p><a href="#toc">Inhaltsverzeichnis</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="début_intro">Einführung &amp; Einrichtung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Intro basierend auf diesem Video:</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>GitHub-Repository:https://github.com/cheroliv/css-codebase/début_css/[Beginn CSS, window = "_blank]</p> </div> <div class="paragraph"> <p>Memoquelle:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="grid"&gt; &lt;h2&gt;Grid&lt;/h2&gt; &lt;div class="grid-container"&gt; &lt;img src="./assets/img/css-logo.png" alt="logo css" /&gt; &lt;form action=""&gt; &lt;input type="text" id="firstname" placeholder="Prénom" /&gt; &lt;input type="text" id="surname" placeholder="Nom" /&gt; &lt;textarea cols="30" rows="10" placeholder="Ici votre message" &gt;&lt;/textarea&gt; &lt;input type="submit" value="Valider" id="btn-submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="absolute"&gt; &lt;h2&gt;Absolute&lt;/h2&gt; &lt;span id="circle1"&gt;&lt;/span&gt; &lt;span id="circle2"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p>Die style.css-Datei der HTML-Seite hinzufügen:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;/head&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début">[toc_début]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_texts">Die Texte</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&amp;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_anfang">[toc_anfang]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_background">Hintergrund</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&amp;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_Anfang">[toc_Anfang]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_boxes">Die Kästen (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&amp;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">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début">[toc_début]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_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&amp;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">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_anfang">[toc_anfang]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_grid">Raster</h2> <div class="sectionbody"> <div class="paragraph"> <p>Um Elemente komplexer zu verteilen als mit Flexbox, unter anderem mit einem Grid-System.</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&amp;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">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="grid"&gt; &lt;h2&gt;Grid&lt;/h2&gt; &lt;div class="grid-container"&gt; &lt;img src="./assets/img/css-logo.png" alt="logo css" /&gt; &lt;form action=""&gt; &lt;input type="text" id="firstname" placeholder="Prénom" /&gt; &lt;input type="text" id="surname" placeholder="Nom" /&gt; &lt;textarea cols="30" rows="10" placeholder="Ici votre message"&gt;&lt;/textarea&gt; &lt;input type="submit" value="Valider" id="btn-submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_Anfang">[toc_Anfang]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_abs_pos">Position absolut</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&amp;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; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="grid"&gt; &lt;h2&gt;Grid&lt;/h2&gt; &lt;div class="grid-container"&gt; &lt;img src="./assets/img/css-logo.png" alt="logo css" /&gt; &lt;form action=""&gt; &lt;input type="text" id="firstname" placeholder="Prénom" /&gt; &lt;input type="text" id="surname" placeholder="Nom" /&gt; &lt;textarea cols="30" rows="10" placeholder="Ici votre message"&gt;&lt;/textarea&gt; &lt;input type="submit" value="Valider" id="btn-submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="absolute"&gt; &lt;h2&gt;Absolute&lt;/h2&gt; &lt;span id="circle1"&gt;&lt;/span&gt; &lt;span id="circle2"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_anfang">[toc_anfang]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_responsive">Der responsive</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&amp;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; } }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-html" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;title&gt;Cours CSS&lt;/title&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Les bases de CSS&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;div class="flexbox"&gt; &lt;h2&gt;Flexbox&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;boite 1&lt;/li&gt; &lt;li&gt;boite 2&lt;/li&gt; &lt;li&gt;boite 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="grid"&gt; &lt;h2&gt;Grid&lt;/h2&gt; &lt;div class="grid-container"&gt; &lt;img src="./assets/img/css-logo.png" alt="logo css" /&gt; &lt;form action=""&gt; &lt;input type="text" id="firstname" placeholder="Prénom" /&gt; &lt;input type="text" id="surname" placeholder="Nom" /&gt; &lt;textarea cols="30" rows="10" placeholder="Ici votre message"&gt;&lt;/textarea&gt; &lt;input type="submit" value="Valider" id="btn-submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="absolute"&gt; &lt;h2&gt;Absolute&lt;/h2&gt; &lt;span id="circle1"&gt;&lt;/span&gt; &lt;span id="circle2"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_beginn"><span class="underline">Beginn CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_conclusion">Debug &amp; Schlussfolgerung</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-css" data-lang="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; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_Anfang">[toc_Anfang]</a></p> </div> </div> </div> Mémo HTML 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="#_gute_links">gute Links</a></li> <li><a href="#_repository_und_code_beispiel">Repository und Code-Beispiel</a></li> </ul> </div> <div class="sect1"> <h2 id="_gute_links">gute Links</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">html</div> <ul> <li> <p><a href="https://htmlcheatsheet.com">htmlcheatsheet.com</a>: HTML-Spickzettel</p> </li> </ul> </div> <div class="ulist"> <div class="title">Schrift</div> <ul> <li> <p><a href="https://fontawesome.com" target=""_blank">fontawesome.com</a>Iconbibliothek</p> </li> <li> <p><a href="https://www.toptal.com/designers/htmlarrows/symbols/" target=""_blank">toptal.com/designers/htmlarrows/symbols</a>Natürliche Symbole in HTML</p> </li> </ul> </div> <div class="ulist"> <div class="title">Sonderzeichen und Escapes</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="_repository_und_code_beispiel">Repository und Code-Beispiel</h2> <div class="sectionbody"> <div class="paragraph"> <p>GitHub-Repository:https://github.com/cheroliv/html-codebase[html-codebase, Fenster = "_blank]</p> </div> <div class="paragraph"> <p>Memoquelle:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;!-- Le titre de la page --&gt; &lt;title&gt;Cours HTML&lt;/title&gt; &lt;!-- Icone de l'onglet --&gt; &lt;link rel="shortcut icon" href="html-logo.png" /&gt; &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Texte - Titre H1&lt;/h1&gt; &lt;p&gt; &lt;em&gt;em pour mettre en italique&lt;/em&gt;, &lt;strong&gt;strong pour mettre en gras&lt;/strong&gt; &lt;span&gt;L'élement en span ne revient pas à la ligne&lt;/span&gt;. &lt;/p&gt; &lt;p&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cumque ratione veniam officiis nulla a debitis at facilis sed dignissimos. &lt;/p&gt; &lt;/header&gt; &lt;section&gt; &lt;div&gt; &lt;h2&gt;Photo - Titre H2&lt;/h2&gt; &lt;img src="./img-1.jpg" alt="image-arbre" height="200" /&gt; &lt;/div&gt; &lt;div&gt; &lt;h3&gt;Liste - Titre H3&lt;/h3&gt; &lt;ul&gt; &lt;li&gt;UL = unordered list&lt;/li&gt; &lt;li&gt;UL = unordered list&lt;/li&gt; &lt;li&gt;UL = unordered list&lt;/li&gt; &lt;/ul&gt; &lt;ol&gt; &lt;li&gt;OL = ordered list&lt;/li&gt; &lt;li&gt;OL = ordered list&lt;/li&gt; &lt;li&gt;OL = ordered list&lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; &lt;div&gt; &lt;h4&gt;Tableaux - Titre H4&lt;/h4&gt; &lt;table border="4" cellpadding="10" cellspacing="4" style="text-align: center"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Col 1&lt;/th&gt; &lt;th&gt;Col 2&lt;/th&gt; &lt;th&gt;Col 3&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td rowspan="2"&gt;Row 1 Cell 1&lt;/td&gt; &lt;td&gt;Row 1 Cell 2&lt;/td&gt; &lt;td&gt;Row 1 Cell 3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row 2 Cell 2&lt;/td&gt; &lt;td&gt;Row 2 Cell 3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt;Row 3 Cell 1&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div&gt; &lt;h5&gt;&lt;span&gt;&amp;#9814;&lt;/span&gt; Liens - Titre H5&lt;/h5&gt; &lt;a href="https://htmlcheatsheet.com/" target="_blank"&gt;HTML Cheatsheet&lt;/a&gt; &lt;br /&gt; &lt;a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank"&gt;Icones natifs en HTML&lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;h6&gt;&lt;i class="fas fa-video"&gt;&lt;/i&gt; Vidéo - Titre H6&lt;/h6&gt; &lt;video src="video.mp4" height="150" autoplay loop muted&gt;&lt;/video&gt; &lt;/div&gt; &lt;/section&gt; &lt;br /&gt; &lt;!-- Formulaires en HTML --&gt; &lt;section&gt; &lt;h2&gt;Formulaire&lt;/h2&gt; &lt;form action="/action.php" method="post"&gt; &lt;label for="name"&gt;Nom&lt;/label&gt; &lt;input id="name" type="text" placeholder="Entrez votre nom" /&gt;&lt;br /&gt; &lt;label for="number"&gt;Entrez votre age&lt;/label&gt; &lt;input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value"&gt; &lt;input type="range" id="range-age" min="0" max="100" oninput="document.getElementById('number-age').value=this.value"&gt;&lt;br /&gt; &lt;!-- Input select --&gt; &lt;label for="gender"&gt;Genre&lt;/label&gt; &lt;select id="gender"&gt; &lt;option selected="selected" value="Homme"&gt;Homme&lt;/option&gt; &lt;option value="Femme"&gt;Femme&lt;/option&gt; &lt;/select&gt;&lt;br /&gt; &lt;!-- Input radio --&gt; &lt;div&gt; &lt;input type="radio" name="type" id="human" checked /&gt; &lt;label for="human"&gt;Humain&lt;/label&gt; &lt;input type="radio" name="type" id="dog" /&gt; &lt;label for="dog"&gt;Chien&lt;/label&gt; &lt;input type="radio" name="type" id="cat" /&gt; &lt;label for="cat"&gt;Chat&lt;/label&gt; &lt;/div&gt; &lt;textarea cols="20" rows="5" placeholder="Votre message..."&gt;&lt;/textarea&gt;&lt;br /&gt; &lt;!-- Input Checkbox --&gt; &lt;label&gt;&lt;input type="checkbox" /&gt;Accepter les CGV&lt;/label&gt; &lt;br /&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;/section&gt; &lt;br /&gt; &lt;!-- Mail &amp; envoi de fichiers --&gt; &lt;footer&gt; &lt;a href="mailto:fs@gmail.com"&gt;Ecrivez-moi !&lt;/a&gt; &lt;br /&gt; &lt;a href="notice.txt" download="nom-du-fichier"&gt;Télécharger la notice&lt;/a&gt; &lt;details&gt; &lt;summary&gt;Plus d'infos&lt;/summary&gt; &lt;p&gt; Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, repellendus. &lt;/p&gt; &lt;/details&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">[toc]</a></p> </div> </div> </div> Javascript-Memo 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>GitHub-Repository:https://github.com/cheroliv/js-codebase[js-codebase, window="_blank]</p> </div> </div> </div> <div class="sect1"> <h2 id="toc_js"><span class="underline">Einführung JavaScript</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#start">Variablen, arithmetische Operatoren und Zeichenketten</a> is just a marker; there is no content to translate. So output empty. We&#8217;ll output nothing.</p> </li> </ol> </div> <div class="paragraph"> <p>&lt;/think&gt;</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#arrays">Die Arrays</a></p> </li> <li> <p><a href="#functions">Die Funktionen</a></p> </li> <li> <p><a href="#param_x_scope">Parameter und Scopes</a></p> </li> <li> <p><a href="#objects">Die Objekte</a></p> </li> <li> <p><a href="#Schleifen">[Schleifen]</a></p> </li> <li> <p><a href="#const_var_let">Const, var und let</a></p> </li> <li> <p><a href="#rest_and_spread_operators">Rest und Spread-Operatoren</a></p> </li> <li> <p><a href="#destructuring">Destrukturierung</a></p> </li> <li> <p><a href="#import_export">Import und Export von Modulen</a></p> </li> <li> <p>Klassen</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">&lt;!DOCTYPE html&gt; &lt;html lang="fr"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt; &lt;/head&gt; &lt;body&gt; index &lt;script src="01_start.js"&gt;&lt;/script&gt; &lt;script src="02_arrays.js"&gt;&lt;/script&gt; &lt;script src="03_functions.js"&gt;&lt;/script&gt; &lt;script src="04_param_x_scope.js"&gt;&lt;/script&gt; &lt;script src="05_objects.js"&gt;&lt;/script&gt; &lt;script src="06_loops.js"&gt;&lt;/script&gt; &lt;script src="07_const_var_let.js"&gt;&lt;/script&gt; &lt;script src="08_rest_and_spread_operators.js"&gt;&lt;/script&gt; &lt;script src="09_destructuring.js"&gt;&lt;/script&gt; &lt;script src="10_module_import_export.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="start">Variablen, arithmetische Operatoren und Zeichenketten</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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrays">Die Arrays</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_arrays.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) =&gt; console.log(it)); console.log("---------"); console.log("Iterate with map"); // parcourir avec array.map numbers.map((it) =&gt; 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) =&gt; { var consoleOutput = new String(); numberArray.forEach(number =&gt; consoleOutput += `${number}, `); return consoleOutput = consoleOutput.substring(0, consoleOutput.length - 2); }; //affiche la chaine entre crochets dans la console const displayNumbers = (numbersStr) =&gt; { 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) =&gt; a - b); displayNumbers(ascSort); console.log("---------"); //sort desc console.log("sort desc"); var descSort = numbers.sort((a, b) =&gt; b - a); displayNumbers(descSort); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="functions">Die Funktionen</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 = () =&gt; console.log("Hello world!"); sayHelloWorld(); const sayHello = (firstName, lastName) =&gt; 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) =&gt; authorsArray.forEach(author =&gt; 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) =&gt; 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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="param_x_scope">Parameter und 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 = () =&gt; { //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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="objects">Die Objekte</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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="loops">Die Schleifen</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 &lt; 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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="const_var_let">Const, var und 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 = () =&gt; { 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 = () =&gt; { 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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="rest_and_spread_operators">Rest und Spread-Operatoren</h2> <div class="sectionbody"> <div class="paragraph"> <p>08_rest_und_spread_operatoren.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) =&gt; a + b; * ou avec parametres avec valeur par défaut * const add = (a=0, b=0, ...operandes) =&gt; 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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="destructuring">Destrukturierung</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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="import_export">Import und Export von Modulen</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) =&gt; x + y; // subtraction const minus = (x, y) =&gt; x - y; // multiplication const times = (x, y) =&gt; x * y; // division const div = (x, y) =&gt; x / y; // remainder: reste de la division euclidiene const rem = (x, y) =&gt; x % y; // log sum const sum_log = (x, y) =&gt; console.log(sum(x, y)); // log subtraction const minus_log = (x, y) =&gt; console.log(minus(x, y)); // log multiplication const times_log = (x, y) =&gt; console.log(times(x, y)); // log division const div_log = (x, y) =&gt; console.log(div(x, y)); // log remainder const rem_log = (x, y) =&gt; 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">Einführung JavaScript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="classes">Verwendung der Klassen</h2> <div class="sectionbody"> <div class="paragraph"> <p>11_Klassen.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) =&gt; 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">Einführung JavaScript</span></a></p> </div> </div> </div> Memo Rahmung 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="_einrahmung">Einrahmung</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_werkstatt_1_vision">Werkstatt 1: Vision</h3> <div class="sect3"> <h4 id="_1_das_muster_qqoqcp_wer_was_wo_wann_wie_warum">1. Das Muster „QQOQCP“ – Wer, Was, Wo, Wann, Wie, Warum</h4> </div> <div class="sect3"> <h4 id="_2_das_product_vision_board">2. Das Product Vision Board</h4> <div class="sect4"> <h5 id="_zielgruppe">Zielgruppe</h5> <div class="paragraph"> <p>Wer sind die Benutzer, die das Produkt oder das Angebot nutzen? (direkt, indirekt)</p> </div> </div> <div class="sect4"> <h5 id="_braucht">Braucht</h5> <div class="paragraph"> <p>Was sind die 5 Hauptbedürfnisse der wesentlichen Benutzer der Anwendung ?</p> </div> </div> <div class="sect4"> <h5 id="_produkt">Produkt</h5> <div class="paragraph"> <p>Was ist mein Wertangebot? Welche sind die 5 Hauptfunktionen des Produkts, die es ermöglichen, auf die Bedürfnisse</p> </div> </div> <div class="sect4"> <h5 id="_geschäftsziel">Geschäftsziel</h5> <div class="paragraph"> <p>Welche sind die Erfolgskriterien?</p> </div> </div> <div class="sect4"> <h5 id="_vision">Vision</h5> <div class="paragraph"> <p>Wenn die 4 Spalten vollständig sind, müssen Sie den Vision-Bereich des Product Vision ausfüllen. Board in einem vollständigen Satz.</p> </div> </div> </div> </div> <div class="sect2"> <h3 id="_workshop_2_personasnutzerreisen">Workshop 2: Personas/Nutzerreisen</h3> <div class="ulist"> <div class="title">Definiere für jede Persona einen Nutzerpfad:</div> <ul> <li> <p>Wer wird meinen Service benutzen? (Ziel)</p> </li> <li> <p>Was will er tun? (But)</p> </li> <li> <p>Wie wird er das machen? (Benutzerpfad)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_werkstatt_3_zoning_storyboard_sitemap">Werkstatt 3: Zoning, Storyboard, Sitemap</h3> <div class="sect3"> <h4 id="_1_zonierung">1. Zonierung</h4> </div> <div class="sect3"> <h4 id="_2_storyboard">2. Storyboard</h4> </div> <div class="sect3"> <h4 id="_3_sitemap">3. Sitemap</h4> </div> </div> <div class="sect2"> <h3 id="_workshop_4_wireframemoodboard">Workshop 4: Wireframe/Moodboard</h3> <div class="sect3"> <h4 id="_1_wireframes">1. Wireframes</h4> </div> <div class="sect3"> <h4 id="_2_moodboard">2. Moodboard</h4> </div> </div> <div class="sect2"> <h3 id="_workshop_5_story_mapping_benutzergeschichten">Workshop 5: Story Mapping/ Benutzergeschichten</h3> <div class="sect3"> <h4 id="_story_mapping_priorisierung_der_us">Story Mapping (Priorisierung der US)</h4> </div> <div class="sect3"> <h4 id="_als_benutzertyp_möchte_ich_ein_ziel_damit_ein_grund">Als &lt;Benutzertyp&gt; möchte ich &lt;ein Ziel&gt;, damit &lt;ein Grund&gt;.</h4> </div> </div> <div class="sect2"> <h3 id="_workshop_6_backlog">Workshop 6: Backlog</h3> <div class="paragraph"> <p><a href="https://www.atlassian.com/fr/agile/scrum/backlogs">Backlogs</a></p> </div> </div> <div class="sect2"> <h3 id="_werkstatt_7_technik_und_architektur">Werkstatt 7: Technik und Architektur</h3> </div> </div> </div> Kotlin-Memo 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="sect1"> <h2 id="_gute_links">Gute Links</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://play.kotlinlang.org/">kotlinlang Spielplatz</a>+</p> </div> <div class="paragraph"> <p><a href="https://arrow-kt.io/">arrow.kt</a>+</p> </div> <div class="paragraph"> <p><a href="https://arkivanov.github.io/MVIKotlin/">MVI:Modell Ansicht Absicht</a>+</p> </div> <div class="paragraph"> <p><a href="https://github.com/arkivanov/Essenty">Essenty</a>+</p> </div> <div class="paragraph"> <p><a href="https://arkivanov.github.io/Decompose/">Zerlegen</a>+</p> </div> </div> </div> <div class="sect1"> <h2 id="_verschiedener_codeausschnitt">Verschiedener Codeausschnitt</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_zuordnen_und_reduzieren">Zuordnen und reduzieren</h3> <div class="paragraph"> <p>Eine Liste von Bits in eine Liste von Strings umwandeln und die Liste von Strings zusammenfassen<br> in einem String, der die Konkatenation enthält. Wie man die gesendete Anfrage protokolliert(requestBodyContent:byte[])</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">log.info( requestBodyContent!!.map { it.toInt().toChar().toString() } .reduce { request: String, s: String -&gt; request + s } )</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_enum_und_sealed_classes">enum und sealed classes</h3> <div class="paragraph"> <p>&lt;/think&gt; (There is no French text provided to translate, so the output is empty.)<a href="0038_training_kotlin_enum_sealed_class_post" target=""_blank">Training Kotlin Enum versiegelte Klasse</a></p> </div> </div> <div class="sect2"> <h3 id="_funktionale_schnittstelle_und_methodenreferenz">funktionale Schnittstelle und Methodenreferenz</h3> <div class="paragraph"> <p>Man kann eine Entität in ein Domainmodell von DTO mit einer Referenzmethode (funktionaler Stil - Java 8) umwandeln.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun findAllByLoginNot( pageable:Pageable, login:String) :Page&lt;UserDto&gt; { return userDao.findAllByLoginNot( pageable, login).map(::fromEntity) }</code></pre> </div> </div> <div class="paragraph"> <p>einehttps://stackoverflow.com/a/22245383/837404[gute Erklärung]</p> </div> </div> <div class="sect2"> <h3 id="_die_standardausgabe_erfassen">Die Standardausgabe erfassen</h3> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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: () -&gt; Unit) = (1..this).forEach { _ -&gt; fn() } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_was_ist_der_unterschied_in_kotlin_zwischen_apply_run_let_also_use_und_with">Was ist der Unterschied in Kotlin zwischen apply, run, let, also, use und with?</h3> <div class="paragraph"> <p><strong>Vergleich der Kotlin-Funktionen und Nutzung der Lambda-Formen-Referenz</strong></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_anwenden">anwenden</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Einleitung Die Kotlin-Funktionen`apply`, <code>run</code>, <code>let</code>, <code>also</code>, <code>use</code>, et `with`Sie bieten verschiedene Möglichkeiten, Objekte zu behandeln. Jede hat ihre eigenen Anwendungsfälle und Verhaltensweisen. Darüber hinaus ermöglichen Lambda-Referenzformen, den Code lesbarer und wiederverwendbarer zu machen, indem sie auf vorhandene Lambda-Funktionen verweisen.</div> <p>Die Funktion`apply`wird verwendet, um ein Objekt während seiner Erstellung zu konfigurieren. Sie gibt das Objekt zurück, auf dem sie aufgerufen wird.</p> </div> <div class="paragraph"> <p>Beispiel mit Lambda-Referenz :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val someObject = SomeClass().apply(::configureObject)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit lambda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val someObject = SomeClass().apply { // configuration des propriétés de someObject }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_laufen">laufen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Funktion`run`wird verwendet, um einen Codeblock auf einem Objekt auszuführen und gibt das Ergebnis des Codeblocks zurück.</p> </div> <div class="paragraph"> <p>Beispiel mit lambda reference :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.run(::someFunction)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.run { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_let">let</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Funktion`let`wird verwendet, um einen Codeblock auf einem Objekt auszuführen und das Ergebnis des Codeblocks zurückzugeben.</p> </div> <div class="paragraph"> <p>Beispiel mit Lambda-Referenz :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.let(::processObject)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = someObject.let { // bloc de code à exécuter sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_auch">auch</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Funktion`also`wird verwendet, um eine zusätzliche Aktion an einem Objekt durchzuführen und gibt das Objekt zurück, auf dem sie aufgerufen wird.</p> </div> <div class="paragraph"> <p>Beispiel mit lambda Referenz :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someObject.also(::performAdditionalAction)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit Lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someObject.also { // action additionnelle sur someObject }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_use">use</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Funktion`use`wird verwendet, um mit Ressourcen zu arbeiten, die nach der Verwendung geschlossen werden müssen. Sie ruft automatisch die Funktion auf`close`am Ende des Blocks.</p> </div> <div class="paragraph"> <p>Beispiel mit Lambda-Referenz :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someResource.use(::useResource)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">someResource.use { // travailler avec la ressource }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_avec">avec</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Funktion`with`wird verwendet, um mehrere Methoden auf einem Objekt aufzurufen, ohne dessen Namen zu wiederholen, und gibt das Ergebnis des letzten Ausdrucks zurück.</p> </div> <div class="paragraph"> <p>Beispiel mit Lambda-Referenz :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = with(someObject, ::processWithObject)</code></pre> </div> </div> <div class="paragraph"> <p>Beispiel mit lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">val result = with(someObject) { // appeler des méthodes sur someObject // la dernière expression est renvoyée }</code></pre> </div> </div> <div class="paragraph"> <p>Indem du die lambda reference Formen oder die Blöcke verwendest`{}`, Sie können die Logik in separate Funktionen kapseln, wodurch die Lesbarkeit und Wiederverwendbarkeit des Codes verbessert wird.</p> </div> </div> </div> <div class="sect1"> <h2 id="_let_function_in_kotlin">let Function in Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Gibt let das Objekt mit den darauf ausgeübten Seiteneffekten zurück oder im ursprünglichen Eingabezustand, abhängig von (let) ?</div> <p>Die Funktion`let`Kotlin wird verwendet, um Operationen an einem Objekt durchzuführen und ein anderes Ergebnis zurückzugeben. Es ist jedoch wichtig zu beachten, dass die Funktion`let`Sie ändert den Anfangszustand des Objekts, auf dem sie aufgerufen wird, nicht.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Signatur</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>inline fun &lt;T, R&gt; T.let(block: (T) &#8594; R): R</code></p></td> </tr> </tbody> </table> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Verwendung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Die Funktion`let`wird häufig verwendet, um Transformationen auf ein Objekt anzuwenden und ein Ergebnis basierend auf diesen Transformationen zu erhalten.</p></td> </tr> </tbody> </table> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ergebnis</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Der von der Funktion zurückgegebene Wert`let`ist das Ergebnis des als Argument übergebene Lambda-Ausdrucks, in der Regel das Ergebnis der auf dem Objekt durchgeführten Operationen.</p></td> </tr> </tbody> </table> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 50%;"> <col style="width: 50%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Seiteneffekte</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Obwohl die Funktion`let`kann Nebeneffekte auf das Objekt haben, wenn sie in dem Lambda-Ausdruck verwendet wird, ändert sie jedoch nicht den Anfangszustand des Objekts selbst.</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Daher die Funktion`let`ist eine elegante Möglichkeit, Operationen an einem Objekt durchzuführen, während ein abgeleiteter Ergebnis erzielt wird, während die Integrität des ursprünglichen Objekts gewahrt bleibt.</p> </div> </div> </div> JVM-Memo 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">Inhaltsverzeichnis</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#char">Zeichenketten und Zeichen</a></p> </li> <li> <p><a href="#math">Zahlen und Mathematik</a></p> </li> <li> <p><a href="#date">Datum und Uhrzeit</a></p> </li> <li> <p><a href="#java8date">Datum und Uhrzeit java8</a></p> </li> <li> <p><a href="#arrCol">Arrays und Sammlungen</a></p> </li> <li> <p><a href="#sysProp">System.Eigenschaften</a></p> </li> <li> <p><a href="#threads">Threads</a></p> </li> <li> <p><a href="#regex">Reguläre Ausdrücke</a></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="char">Zeichenketten und Zeichen</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 -&gt; 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 &lt; 0, car s est //alphabétiquement avant "N'est" val r1: Int = s.compareTo("N'est") assertTrue(r1 &lt; 0) //variante ignorant la casse val r1Prime: Int = (s as java.lang.String).compareToIgnoreCase("n'est") assertTrue(r1Prime &lt; 0) //retourne 0 si les chaines sont equivalente val r2: Int = s.compareTo("C'est") assertEquals(0, r2) //retourne une valeur &gt; 0 car s vient apres "B'est" val r3: Int = s.compareTo("B'est") assertTrue(r3 &gt; 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 &lt; text.size) &amp;&amp; (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 &lt; text.size &amp;&amp; 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") &lt; 0) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="math">Zahlen und Mathematik</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 &gt;= 0.0 &amp;&amp; r &lt; 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 &gt;= 0.0) &amp;&amp; (d &lt; 1.0)) //prochaine valeur aléatoire de taille float f = generator.nextFloat() assertTrue((f &gt;= 0.0) &amp;&amp; (f &lt; 1.0)) //prochaine valeur aléatoire de taille long l = generator.nextLong() assertTrue( (Math.abs(l) &lt;= Long.MAX_VALUE) &amp;&amp; (Math.abs(l) &gt;= 0) ) //prochaine valeur aléatoire de taille int i = generator.nextInt() assertTrue( (Math.abs(i) &lt;= java.lang.Integer.MAX_VALUE) &amp;&amp; (Math.abs(i) &gt;= 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 &lt;= Byte.MAX_VALUE &amp;&amp; it &gt;= 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 &lt;= java.lang.Byte.MAX_VALUE &amp;&amp; it &gt;= 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">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="date">Datum und Uhrzeit</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 &gt; 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 &gt; 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 &lt; 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">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="java8date">Datum und Uhrzeit java8</h2> <div class="sectionbody"> <div class="paragraph"> <p>Java 8 führt das neue Paket <strong><em>java.time</em></strong> ein, das die Grundklassen enthält die<br> die meisten Entwickler arbeiten mit. Es enthält ebenfalls vier Unterpakete:<br></p> </div> <div class="paragraph"> <p><strong><em>java.time.chrono</em></strong><br> Alternative Chronologien, die Entwickler, die Kalendersysteme verwenden, die nicht<br> Die Einhaltung der ISO-Norm wird mit interagieren Ein Beispiel wäre ein japanischer Kalender<br> endurendes System.<br> <strong><em>java.time.format</em></strong><br> Enthält den DateTimeFormatter, der zum Konvertieren von Datum- und Zeitobjekten verwendet wird.<br> in einer Zeichenkette und ebenfalls zum Analysieren von Zeichenketten in Datums- und Zeitobjekten<br> <strong><em>java.time.temporal</em></strong><br> Enthält die von den Basisklassen für Datum und Uhrzeit erforderlichen Schnittstellen und außerdem<br> Abstraktionen (wie Abfragen und Justierer) für erweiterte Operationen mit Datumswerten.<br> <strong><em>java.time.zone</em></strong><br> Verwendete Klassen für die zugrundeliegenden Zeitzonenregeln;<br> die meisten Entwickler werden dieses Paket nicht benötigen.<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&lt;String, LocalDate&gt; 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&lt;String&gt; { return birthdays.keys.stream() .filter { p: String -&gt; 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&lt;String&gt; { return birthdays.entries.stream() .filter { (_, value): Map.Entry&lt;String, LocalDate&gt; -&gt; value.getMonth() === month } .map&lt;String&gt; { (key): Map.Entry&lt;String, LocalDate&gt; -&gt; key } .collect(Collectors.toSet()) } val birthdaysInCurrentMonth: Set&lt;String&gt; get() = getBirthdaysIn(LocalDate.now().getMonth()) val totalAgeInYears: Int get() = birthdays.keys.stream() .mapToInt { p: String -&gt; 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 -&gt; LocalDate.from(temporal) .with(TemporalAdjusters.firstDayOfYear()) 2 -&gt; LocalDate.from(temporal) .withMonth(Month.APRIL.value) .with(TemporalAdjusters.firstDayOfMonth()) 3 -&gt; LocalDate.from(temporal) .withMonth(Month.JULY.value) .with(TemporalAdjusters.firstDayOfMonth()) 4 -&gt; LocalDate.from(temporal) .withMonth(Month.OCTOBER.value) .with(TemporalAdjusters.firstDayOfMonth()) else -&gt; null } } } enum class Quarter { FIRST, SECOND, THIRD, FOURTH } //Dans quel trimestre de l'année cette date se situe-t-elle ? class QuarterOfYearQuery : TemporalQuery&lt;Quarter&gt; { 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">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrCol">Arrays und Sammlungen</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) &lt; 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 -&gt; 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&lt;String&gt;() s.add("test") assertTrue(s.contains("test")) assertFalse(s.contains("test2")) s.remove("test") assertFalse(s.contains("test")) val ss = TreeSet&lt;String&gt;() ss.add("b") ss.add("a") ss.iterator().forEach { assertTrue(it == "a" || it == "b") } //liste doublement chainée var dll: List&lt;String&gt; = LinkedList&lt;String&gt;() //plus efficace val l = java.util.ArrayList&lt;String&gt;() 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&lt;String, Integer&gt;() 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&lt;String&gt;() set.add("key_1") set.add("key_2") set.add("key_3") val members = set.toArray() assertEquals(3, members.size) val list = ArrayList&lt;String&gt;() 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&lt;Int&gt;(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 -&gt; it != list2[i] }.isEmpty()) //comparaison de la copy avec map list1.mapIndexed { index: Int, it: Int -&gt; 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 -&gt; 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">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="sysProp">System.Eigenschaften</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/essential/environment/sysprop.html">System.Properties offizielle Dokumentation</a></p> </div> <div class="paragraph"> <p>Hier ist eine Tabelle mit einigen interessanten Eigenschaften<br> Diese Eigenschaften sind interessant, um Informationen zu haben<br> auf dem Hostsystem der 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>Key</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Bedeutung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dateitrennzeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Trennzeichen zwischen Bestandteilen eines Dateipfads. Dies ist "/" unter UNIX und "\" unter Windows.</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">Pfad, der zur Suche nach Verzeichnissen und JAR-Archiven mit Klassendateien verwendet wird. Elemente des Klassenpfads werden durch ein plattformspezifisches Trennzeichen getrennt, das in der Eigenschaft path.separator angegeben ist.</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">Installationsverzeichnis für Java Runtime Environment (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-Anbietername</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Java-Hersteller-URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE-Hersteller-URL</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.version</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE-Versionsnummer</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zeilentrennzeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Folge, die vom Betriebssystem verwendet wird, um Zeilen in Textdateien zu trennen</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">Operating system architecture</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">Betriebssystemname</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Betriebssystemversion</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Betriebssystemversion</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">path.separator</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pfadtrennzeichen verwendet in 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">Arbeitsverzeichnis des Benutzers</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">import sys data = sys.stdin.read() if data.endswith('\n'): data = data[:-1] sys.stdout.write(data)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Benutzer-Home-Verzeichnis</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">Benutzerkontoname</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><a href="#toc">Inhaltsverzeichnis</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&lt;Int&gt; = 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&lt;Int&gt;) : 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">Inhaltsverzeichnis</a></p> </div> </div> </div> <div class="sect1"> <h2 id="regex">Reguläre Ausdrücke</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&lt;String&gt; = Arrays.asList("Cat", "Dog", "Ice-9", "99 Luftballoons") val containDigits: List&lt;String&gt; = 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="_diagramm_regex_metazeichen">Diagramm regex Metazeichen</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">Metazeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Funktionalität</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anmerkungen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Optionales Zeichen—null oder eine Instanz</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">Null oder mehr des vorherigen Zeichens</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">Einer oder mehrere der vorangegangenen Zeichen</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">Zwischen M und N Instanzen des vorherigen Zeichens</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">Eine Ziffer</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">Ein nicht-numerisches Zeichen</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">Ein Wortzeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zahlen, Buchstaben und _</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">Ein Zeichen ohne Wort</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">Leerzeichen</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">Ein Nicht-Leerzeichen-Zeichen</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">Zeilenumbruchzeichen</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">Tabulatorzeichen</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">Ein beliebiges Zeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Enthält nicht den Zeilenumbruch in Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(empty)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jedes Zeichen, das in eckigen Klammern steht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aufgerufene Zeichenklasse</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[^ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jedes Zeichen, das nicht zwischen eckigen Klammern steht</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aufgerufene Klasse umgekehrter Zeichen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">( )</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Eine Gruppe von Musterelementen erstellen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aufgerufene Gruppe (oder Capture-Gruppe)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">|</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alternative Möglichkeiten definieren</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Implementiere das logische ODER</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">^</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anfang der Zeichenkette $ Ende der Zeichenkette</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>ergänzenhttps://www.codeurjava.com/2015/05/les-expressions-regulieres-avec-regex.html[mit]</p> </div> </div> </div> </div> Gradle-Memo 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="#_hilfe_anzeigen">Hilfe anzeigen</a></li> <li><a href="#_setze_die_systemeigenschaft_der_jvm_d_system_prop">Setze die Systemeigenschaft der JVM: `-D, --system-prop</a></li> <li><a href="#_definiere_die_projekteigenschaft_für_das_build_skript_pmypropmyvalue">Definiere die Projekteigenschaft für das Build-Skript : `-Pmyprop=myvalue</a></li> <li><a href="#_gibt_das_startverzeichnis_von_gradle_an_der_standardwert_ist_das_aktuelle_verzeichnis">Gibt das Startverzeichnis von Gradle an. Der Standardwert ist das aktuelle Verzeichnis.</a></li> <li><a href="#_überschreibe_die_property_param_component_über_die_befehlszeile">Überschreibe die Property 'param_component' über die Befehlszeile :</a></li> <li><a href="#_einen_ordner_zu_einem_source_set_in_einem_normalen_projekt_mit_dem_kotlin_dsl_hinzufügen">Einen Ordner zu einem source-set in einem normalen Projekt mit dem Kotlin DSL hinzufügen</a></li> <li><a href="#_fügen_sie_einem_source_set_in_einem_android_projekt_mit_der_groovy_dsl_einen_ordner_hinzu">Fügen Sie einem source-set in einem Android-Projekt mit der Groovy-DSL einen Ordner hinzu</a></li> <li><a href="#_vermeide_das_erstellen_und_testen_eines_untermoduls">Vermeide das Erstellen und Testen eines Untermoduls</a></li> <li><a href="#_tar_ein_verzeichnis">Tar ein Verzeichnis</a></li> <li><a href="#_die_abhängigkeiten_eines_builds_anzeigen">Die Abhängigkeiten eines Builds anzeigen</a></li> <li><a href="#_beispiel_für_die_verwendung_von_reduce_verkettung_einer_liste_zu_einem_string">Beispiel für die Verwendung von reduce: Verkettung einer Liste zu einem String</a></li> <li><a href="#_die_beschreibung_einer_bestimmten_aufgabe_abrufen">Die Beschreibung einer bestimmten Aufgabe abrufen</a></li> <li><a href="#_um_eine_aufgabe_vom_workingdir_root_aus_zu_starten_dann_die_aufgabe_nicht_ein_präfixieren">Um eine Aufgabe vom workingDir-Root aus zu starten, dann die Aufgabe nicht ein `: präfixieren</a></li> <li><a href="#_um_die_fehlgeschlagenen_aufgaben_erneut_auszuführen_verwenden_sie_die_option_rerun_tasks">Um die fehlgeschlagenen Aufgaben erneut auszuführen, verwenden Sie die Option `--rerun-tasks</a></li> <li><a href="#_eine_aufgabe_in_einem_spezifischen_projekt_von_einem_anderen_verzeichnis_aus_starten">Eine Aufgabe in einem spezifischen Projekt von einem anderen Verzeichnis aus starten</a></li> </ul> </div> <div class="sect1"> <h2 id="_hilfe_anzeigen">Hilfe anzeigen</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="_setze_die_systemeigenschaft_der_jvm_d_system_prop">Setze die Systemeigenschaft der 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="_definiere_die_projekteigenschaft_für_das_build_skript_pmypropmyvalue">Definiere die Projekteigenschaft für das Build-Skript : `-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="_gibt_das_startverzeichnis_von_gradle_an_der_standardwert_ist_das_aktuelle_verzeichnis">Gibt das Startverzeichnis von Gradle an. Der Standardwert ist das aktuelle Verzeichnis.</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="_überschreibe_die_property_param_component_über_die_befehlszeile">Überschreibe die Property 'param_component' über die Befehlszeile :</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="_einen_ordner_zu_einem_source_set_in_einem_normalen_projekt_mit_dem_kotlin_dsl_hinzufügen">Einen Ordner zu einem source-set in einem normalen Projekt mit dem Kotlin DSL hinzufügen</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="_fügen_sie_einem_source_set_in_einem_android_projekt_mit_der_groovy_dsl_einen_ordner_hinzu">Fügen Sie einem source-set in einem Android-Projekt mit der Groovy-DSL einen Ordner hinzu</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="_vermeide_das_erstellen_und_testen_eines_untermoduls">Vermeide das Erstellen und Testen eines Untermoduls</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">Verschieben von Dateien</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_ein_verzeichnis">Tar ein Verzeichnis</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">tasks.register&lt;Tar&gt;("tarWebapp") { dependsOn("moveWebappNpm") group = WEBAPP description = "tar webapp" doLast { setOf( "build", "target", "node_modules" ).forEach { dir -&gt; 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="_die_abhängigkeiten_eines_builds_anzeigen">Die Abhängigkeiten eines Builds anzeigen</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&lt;String, Map&lt;String, String&gt;&gt;( "buildDependencies" to buildDependencies, "domainDeps" to domainDeps, "domainTestDeps" to domainTestDeps, ).apply { putAll(appModules) } .forEach { module -&gt; 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="_beispiel_für_die_verwendung_von_reduce_verkettung_einer_liste_zu_einem_string">Beispiel für die Verwendung von reduce: Verkettung einer Liste zu einem String</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 -&gt; "$acc\n\t$s" } .run { println("$WEBAPP_SRC: $this\n") } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_die_beschreibung_einer_bestimmten_aufgabe_abrufen">Die Beschreibung einer bestimmten Aufgabe abrufen</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="_um_eine_aufgabe_vom_workingdir_root_aus_zu_starten_dann_die_aufgabe_nicht_ein_präfixieren">Um eine Aufgabe vom workingDir-Root aus zu starten, dann die Aufgabe nicht ein `: präfixieren</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="_um_die_fehlgeschlagenen_aufgaben_erneut_auszuführen_verwenden_sie_die_option_rerun_tasks">Um die fehlgeschlagenen Aufgaben erneut auszuführen, verwenden Sie die Option `--rerun-tasks</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="_eine_aufgabe_in_einem_spezifischen_projekt_von_einem_anderen_verzeichnis_aus_starten">Eine Aufgabe in einem spezifischen Projekt von einem anderen Verzeichnis aus starten</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Option`-p` (ou <code>--project-dir</code>) ermöglicht es, den Pfad zu einem Gradle-Projekt anzugeben und dort eine Aufgabe auszuführen, selbst wenn das aktuelle Verzeichnis unterschiedlich ist.</p> </div> <div class="paragraph"> <p>Zum Beispiel, um die Aufgabe zu starten`build`des Projekts, das sich in`~/projets/mon-autre-projet`während man sich in einem anderen Verzeichnis befindet:</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>Dies ist besonders nützlich, um Aktionen auf mehreren Projekten von einem zentralen Ort aus zu skripten.</p> </div> <div class="ulist"> <div class="title">Siehe auch:</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">Diskussion</a></p> </li> </ul> </div> </div> </div> Training - kotlin: enum, versiegelte Klassen 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>Die sealed classes, sind keine Aufzählungen(Schlüsselwort:enum).<br> Kommend aus Java könntest du versucht sein, deine Aufzählung von Funktionalitäten zu überladen: // 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>Stattdessen können Sie die sealed Klasse verwenden:</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>Der Vorteil dieses Ansatzes ist, dass wir jetzt Daten mit dem übertragen können Status:</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 -&gt; status.nextStatus() is PizzaBeingMade -&gt; status.nextStatus() is OutForDelivery -&gt; status.nextStatus() is Completed -&gt; status } }</code></pre> </div> </div> <div class="paragraph"> <p>Im Allgemeinen sind sealed classes gut, wenn Sie Daten damit assoziiert haben möchten zu einem Zustand.</p> </div> Training - Kotlin 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="_mindmap">Mindmap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bild:../../diagram/training_kotlin.png[training_kotlin]</p> </div> </div> </div> <div class="sect1"> <h2 id="_funktionale_programmierung">Funktionale Programmierung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Die Übungen werden aus dem Buch entnommen:<br> Funktionale Programmierung in Kotlin anhand von Tutorials<br> Geschrieben von Massimo Carli<br> Repository: <a href="https://github.com/kodecocodes/fpk-materials" class="bare">https://github.com/kodecocodes/fpk-materials</a></p> </div> <div class="sect2"> <h3 id="_syntax">Syntax</h3> <div class="sect3"> <h4 id="_firstprogramtest">FirstProgramTest</h4> <div class="paragraph"> <p>notions: Bildschirmanzeige, Funktion<br> FirstProgramTest:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/FirstProgramTest.kt[Quelle]+</p> </div> </div> <div class="sect3"> <h4 id="_concatfunctiontest">ConcatFunctionTest</h4> <div class="paragraph"> <p>Konzepte: Speicher, Variable, Wert, Objekt, Funktionserweiterung<br> ExampleUnitTest: <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/ConcatFunctionTest.kt">Quelle</a>+</p> </div> </div> <div class="sect3"> <h4 id="_birthdaymessagetestoutput">BirthdayMessageTestOutput</h4> <div class="paragraph"> <p>Begriffe: Mengen, Schleifen<br> <a href="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">Einführung in Kotlin</a><br> BirthdayMessageTestOutput:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/BirthdayMessageTestOutput.kt[Quelle]<br></p> </div> </div> </div> <div class="sect2"> <h3 id="_kotlin_kurs">Kotlin-Kurs</h3> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/YRjY3jRrQYY?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="sect2"> <h3 id="_tutorial_zu_den_collections_in_java">Tutorial zu den Collections in Java</h3> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/collections/index.html" target="_blank" rel="noopener">Sammlungen</a></p> </div> <div class="paragraph"> <p>Das Herz der Sammlungsschnittstellen<br> <span class="image"><img src="../../img/0036_training_kotlin_post/colls-coreInterfaces.gif" alt="Collections"></span><br></p> </div> </div> <div class="sect2"> <h3 id="_funktionelle_grundlagen">Funktionelle Grundlagen</h3> <div class="sect3"> <h4 id="_deklarative_x_imperativer_ansatz">deklarative X imperativer Ansatz</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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&lt;String&gt;): 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&lt;String&gt;) = list .filter(::isValidNumber) .map(String::toInt) .sum() @Test fun `test declarative approach`() { assertEquals(1299, declarativeSum(input).apply { println("Sum $this") }) } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_übung_1_1">Übung 1.1</h4> <div class="paragraph"> <p>Implementiere die Funktion sumInRange, die die Werte in<br> Eine List&lt;String&gt; in einem gegebenen Intervall. Die Signatur ist :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun sumInRange(input: List&lt;String&gt;, range: IntRange): Int</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_1`() { assertEquals(4, sumInRange( listOf("1", "10", "a", "7", "ad2", "3"), 1..5 ).apply { println("sumInRange 1..5: $this") } ) }</code></pre> </div> </div> <div class="paragraph"> <p>Versuchen Sie es und überprüfen Sie Ihre Antwort mit demhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/DeclarativeTests.kt[Lösung, windows="_blank].</p> </div> </div> <div class="sect3"> <h4 id="_funktionen_höherer_ordnung">Funktionen höherer Ordnung</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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: () -&gt; Unit) { for (i in 1..this) { fn() } } fun Int.times2(fn: () -&gt; Unit) { for (i in 1..this) fn() } fun Int.times3(fn: () -&gt; Unit) = (1..this).forEach { fn() } fun Int.times4(fn: () -&gt; Unit) = repeat((1..this).count()) { fn() } fun Int.times(fn: () -&gt; Unit) = (1..this).forEach { _ -&gt; fn() } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_übung_1_2">Übung 1.2</h4> <div class="paragraph"> <p>Implementiere chrono, das eine Funktion vom Typ`() &#8594;`<br> Die Einheit wird als Eingabe übergeben und gibt die für die Ausführung benötigte Zeit zurück. Die Signatur lautet:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun chrono(fn : () -&gt; Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } }</code></pre> </div> </div> <div class="paragraph"> <p>Versuchen Sie es und überprüfen Sie Ihre Antwort mit derhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[Lösung, windows="_blank].</p> </div> </div> <div class="sect3"> <h4 id="_komposition">Komposition</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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 &lt;A, B, C&gt; ((A) -&gt; B).compose(g: (B) -&gt; C) : (A) -&gt; C = { a -&gt; 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)) } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_reine_funktionen_und_testbarkeit">Reine Funktionen und Testbarkeit</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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) } } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_ausnahmebehandlung">Ausnahmebehandlung</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="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&lt;Int&gt; = try { success(str.toInt()) } catch (nfe: NumberFormatException) { failure(nfe) } class ExceptionHandlingTests { @Test fun impure() { assertThrows&lt;NumberFormatException&gt; { 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 ) } }</code></pre> </div> </div> </div> </div> <div class="sect2"> <h3 id="_schlüsselpunkte">Schlüsselpunkte</h3> <div class="ulist"> <ul> <li> <p>Während die objektorientierte Programmierung bedeutet, mit Objekten zu programmieren,</p> </li> </ul> </div> <div class="paragraph"> <p>Funktionale Programmierung bedeutet, mit Funktionen zu programmieren. Du zerlegst ein Problem in mehrere Teilprobleme, die du mit die Funktionen.</p> </div> <div class="ulist"> <ul> <li> <p>Funktionen höherer Ordnung akzeptieren andere Funktionen als Eingabe oder geben andere</p> </li> </ul> </div> <div class="paragraph"> <p>funktionieren wie Rückgabewerte. Die Kategorientheorie ist die Theorie der Komposition, und Sie verwenden sie, um zu verstehen Wie Sie Ihre Funktionen in einem Arbeitsprogramm komponieren. Der Ausgabewert einer reinen Funktion hängt ausschließlich von ihren Eingabeparametern ab, und sie hat keine Nebenwirkungen.</p> </div> <div class="ulist"> <ul> <li> <p>Ein Nebeneffekt ist etwas, was eine Funktion an die Außenwelt ausführt. Dies</p> </li> </ul> </div> <div class="paragraph"> <p>Es kann ein Journal in der Standardausgabe oder die Änderung des Werts einer globalen Variablen sein. Funktionale Programmierung funktioniert für reine Funktionen, aber sie stellt auch die Werkzeuge zum Umwandeln von unreinen Funktionen in reine Funktionen. Sie können eine unreine Funktion rein machen, indem Sie die Effekte verschieben, um sie Teil des Rückgabewerts</p> </div> <div class="ulist"> <ul> <li> <p>Funktionale Programmierung ist eine Frage der Komposition.</p> </li> </ul> </div> <div class="paragraph"> <p>Die Fehlerbehandlung ist ein typischer Fall von Nebenwirkungen, und Kotlin gibt dir die Werkzeuge. um sie funktional zu verwalten.</p> </div> </div> <div class="sect2"> <h3 id="_java8_vertiefen_lambda_ausdrücke_und_funktionale_schnittstellen">Java8 vertiefen: Lambda-Ausdrücke und funktionale Schnittstellen</h3> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/20waNRw6wMA?rel=0&amp;list=PLzzeuFUy_Cng0wZhqbnkvWAW0d2fdVfyQ" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="sect2"> <h3 id="_kategorientheorie">Kategorientheorie</h3> <div class="paragraph"> <p>Die mathematische Kategorientheorie:</p> </div> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/LVHoROSF3KA?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="sect2"> <h3 id="_grundlagen_der_funktionen">Grundlagen der Funktionen</h3> <div class="sect3"> <h4 id="_übung_2_1">Übung 2.1</h4> <div class="paragraph"> <p>Können Sie ein Beispiel für eine Funktion schreiben, die verschiedene Werte abbildet<br> dessen Definitionsbereich nicht verschiedene Werte im Wertebereich annimmt, wie f(b) und f(c) in der untenstehenden Abbildung?<br></p> </div> <div class="paragraph"> <p>Probier es aus, dann schau dir das Challenge-Projekt nach einer Lösung an, um zu sehen, wie du es gemacht hast.<br> Sie werden Ratschläge und eine Erklärung finden, indem Sie dem Link zur <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt">Lösung</a>.<br></p> </div> </div> <div class="sect3"> <h4 id="_übung_2_2">Übung 2.2</h4> <div class="paragraph"> <p>Können Sie die Umkehrfunktion von zwei Mal schreiben?<br> Was sind Definitionsbereich und Wertebereich der inversen Funktion?<br> Schauen Sie sich das Challenge-Projekt und Anhang B für die Lösung an.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">fun chrono(fn : () -&gt; Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-kotlin" data-lang="kotlin">@Test fun `Exercise 1_2`() { val waitOneSec = { sleep(ONE_SECOND) } chrono(waitOneSec).apply { println("chrono: $this") assertEquals(1, sign) } }</code></pre> </div> </div> <div class="paragraph"> <p>Probiere es aus und überprüfe deine Antwort mit derhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[Lösung, windows="_blank].</p> </div> </div> </div> </div> </div> Designsystem-Memo 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="_werkzeuge">Werkzeuge</h2> <div class="sectionbody"> <div class="dlist"> <div class="title"><strong>Illustrationen</strong></div> <dl> <dt class="hdlist1"><a href="https://undraw.co/">undraw.co</a></dt> <dd> <p>Open-Source-Illustrationen für alle Ideen, die du dir vorstellen und erschaffen kannst.</p> </dd> <dt class="hdlist1"><a href="https://absurd.design/">absurd.design</a></dt> <dd> <p>Absurde Illustrationen, die Sinn ergeben.</p> </dd> <dt class="hdlist1"><a href="https://drawkit.com/">drawkit.com</a></dt> <dd> <p>Wunderbare kostenlose Illustrationen. Wöchentliche Updates.</p> </dd> <dt class="hdlist1"><a href="https://icons8.com/">icons8.com</a></dt> <dd> <p>Symbole, Illustrationen, Fotos, Musik und Design-Tools.</p> </dd> <dt class="hdlist1"><a href="https://blush.design/">erröten.design</a></dt> <dd> <p>Symbole, Illustrationen, Fotos, Musik und Design-Tools.</p> </dd> <dt class="hdlist1"><a href="https://www.humaaans.com/">humaaans.com</a></dt> <dd> <p>Kombinieren Sie Illustrationen von Personen mit einer Designbibliothek.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Farben</strong>.</div> <dl> <dt class="hdlist1"><a href="https://coolors.co/">coolors.co</a></dt> <dd> <p>Der ultra-schnelle Farbschemengenerator!</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Trends</strong></div> <dl> <dt class="hdlist1"><a href="https://fr.pinterest.com">pinterest</a></dt> <dd> <p>Visuelle Entdeckung von Ideen: Bilder, Videos, thematische Sammlungen.</p> </dd> <dt class="hdlist1"><a href="https://dribbble.com">dribbeln</a></dt> <dd> <p>Plattform für Designer, die ihre Kreationen teilen und interagieren.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>UX/UI und Design Systems</strong></div> <dl> <dt class="hdlist1"><a href="https://material.io/">Google Material Design</a></dt> <dd> <p>Googles Designsystem für einheitliche und anpassbare Benutzeroberflächen.</p> </dd> <dt class="hdlist1"><a href="https://developer.apple.com/design/human-interface-guidelines/">Apple Human Interface-Richtlinien</a></dt> <dd> <p>Apple-Empfehlungen für die Entwicklung intuitiver iOS- und macOS-Anwendungen.</p> </dd> <dt class="hdlist1"><a href="https://www.uxpin.com/">UXPin</a></dt> <dd> <p>Design- und Kollaborationsplattform zum Erstellen von Prototypen und Design-Systemen.</p> </dd> <dt class="hdlist1"><a href="https://www.frontify.com/">Frontify</a></dt> <dd> <p>Plattform für Markenverwaltung und Design-Systeme zur Sicherstellung der Konsistenz.</p> </dd> <dt class="hdlist1"><a href="https://designsystemsrepo.com/design-systems/">Design-System-Repo</a></dt> <dd> <p>Sammlung von Ressourcen und Beispielen von Design-Systemen zur Inspiration</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Frontend-Entwicklung</strong></div> <dl> <dt class="hdlist1"><a href="https://htmlcheatsheet.com" target=""_blank">htmlcheatsheet.com</a></dt> <dd> <p>HTML-Spickzettel</p> </dd> <dt class="hdlist1"><a href="https://fontawesome.com">fontawesome.com</a></dt> <dd> <p>Iconbibliothek</p> </dd> <dt class="hdlist1"><a href="https://www.toptal.com/designers/htmlarrows/symbols/">toptal.com/designers/htmlarrows/symbols</a></dt> <dd> <p>natürliche Icons in HTML</p> </dd> <dt class="hdlist1"><a href="https://css-tricks.com/">CSS-Tricks</a></dt> <dd> <p>Unverzichtbar für CSS, mit Artikeln, Tutorials und modernen Frontend-Tipps.</p> </dd> <dt class="hdlist1"><a href="https://www.frontendmentor.io/">Frontend Mentor</a></dt> <dd> <p>Frontend-Code-Herausforderungen basierend auf echten Projekten, um Ihre Fähigkeiten zu verbessern.</p> </dd> <dt class="hdlist1"><a href="https://dev.to/">Dev.to</a></dt> <dd> <p>Entwickler-Community zum Teilen von Artikeln, Tutorials und Projekten.</p> </dd> <dt class="hdlist1"><a href="https://codepen.io/">CodePen</a></dt> <dd> <p>Online-Code-Editor und Community zum Teilen von Code-Snippets und Demos.</p> </dd> </dl> </div> <div class="paragraph"> <p><strong>KI-unterstützte Frontend-Entwicklung</strong></p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><a href="https://v0.dev/">v0.dev</a></dt> <dd> <p>v0 konvertiert natürliche Sprachbeschreibungen in Code und eine Benutzeroberfläche.</p> </dd> <dt class="hdlist1"><a href="https://uizard.io/">Uizard</a></dt> <dd> <p>Uizard konzentriert sich auf die Umwandlung von Mockups (Bilder, Skizzen) in HTML-, CSS- und React-Code.</p> </dd> <dt class="hdlist1"><a href="https://www.usegalileo.ai/explore">usegalileo.ai</a></dt> <dd> <p>Galileo AI ermöglicht es Ihnen, die gewünschte Oberfläche in natürlicher Sprache zu beschreiben, und die KI generiert bearbeitbare Figma-Designs.</p> </dd> <dt class="hdlist1"><a href="https://play.teleporthq.io/">TeleportHQ</a></dt> <dd> <p>TeleportHQ ist eine Low-Code-Plattform für die Frontend-Entwicklung, die KI verwendet, um dir beim Erstellen und Bereitstellen von visuellen Websites zu helfen.</p> </dd> </dl> </div> </div> </div> Kubernetes, Microk8s, Docker: erste Schritte 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/">offizielle Dokumentation von microk8s</a>+</p> </div> </div> </div> <div class="sect3"> <h4 id="_installation_des_microk8s_pakets">Installation des microk8s-Pakets:</h4> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"></code></pre> </div> </div> </div> Gradle: Führen Sie einen externen Prozess aus einer Gradle-Aufgabe aus 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> Kotlin: NotImplementedException, NotImplementedError 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, Nutzen für Tests, es ermöglicht zu wissen, wo man steht, und die Ursache des Fehlers.<br> Noch nicht implementiert, ermöglicht es das Auslösen der richtigen Ausnahme.<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> Entpacken 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="_links_interserver_net">Links: <a href="https://www.interserver.net/tips/kb/extract-tar-gz-files-using-linux-command-line/">interserver.net</a></h4> </div> Gradle: Tests erneut ausführen, auch wenn die Tests auf dem neuesten Stand sind 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 Docker, installiert nicht die Anwendung, sondern zieht sie stattdessen. 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> Gherkin auf Französisch : 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 Gradle cli: Parameter überschreiben 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> Git-Notiz 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="_quellen">Quellen:</h4> <div class="paragraph"> <p>*https://xenovation.com/blog/source-control-management/git/how-to-change-remote-git-repository[xenovation] *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="_den_remote_repo_in_git_ändern">den Remote-Repo in Git ändern</h4> <div class="paragraph"> <p>Zeige die URL des aktuellen Remote-Repositorys:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlight"><code class="language-bash" data-lang="bash"></code></pre> </div> </div> </div> Von einer URL saugen 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/ ---- Um ein Zielverzeichnis festzulegen, fügen Sie das Argument -P hinzu und geben Sie dann den Pfad an. ----</code></pre> </div> </div> Erstellen einer bootfähigen Disk 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="_links_etcher">Links: <a href="https://www.balena.io/etcher/">etcher</a></h4> </div> Entpacken über die CLI in einem Zielverzeichnis 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="_links_askubuntu">Links: <a href="https://askubuntu.com/questions/86849/how-to-unzip-a-zip-file-from-the-terminal">askubuntu</a></h4> <div class="paragraph"> <p>Wenn Sie zu einem bestimmten Zielordner extrahieren möchten, können Sie verwenden: <code>` $ unzip datei.zip -d zielordner </code>` Wenn die Quell- und Zielverzeichnisse identisch sind, können Sie einfach: <code>` $ unzip file.zip </code>`</p> </div> </div> Die Summe der Dateigrößen in der Verzeichnisliste anzeigen 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="_links_stackexchange">Links: <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> Einen Branch auf GitHub löschen 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="_einen_branch_auf_github_löschen">Einen Branch auf GitHub löschen</h4> </div> <div class="sect3"> <h4 id="_link_gist">Link: <a href="https://gist.github.com/cheroliv/921a13ed23ae6d4d66af8d43dd536987">gist</a></h4> </div> Asciidoc/Markdown Memo 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">Warum AsciiDoc oder Markdown ? Hier orientiere ich mich zu asciidoc, da ich bereits ein paar Tickets in asciidoc geschrieben habe.<br></div> <p>Asciidoc ist eine Auszeichnungssprache, die es ermöglicht, Inhalte zu erstellen, indem sie ein Layout bereitstellt, das den Text für Menschen lesbar hält.<br> Es ist eine Möglichkeit, die Textverarbeitung für einfache Inhalte zu standardisieren, ohne zusätzliche Software.</p> </div> <div class="ulist"> <div class="title">Links :</div> <ul> <li> <p><a href="https://blog.oxiane.com/2018/06/13/asciidoc-documentation-as-code/" target=""_blank">@jmdoudoux auf 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> Debian: Eine .deb-Datei über die Befehlszeile installieren 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>Um ein Debian-Paket aus einer .deb-Datei über die Befehlszeile zu installieren.<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>siehe hier für diehttps://unix.stackexchange.com/questions/159094/how-to-install-a-deb-file-by-dpkg-i-or-by-apt[Referenz]+</p> </div> Gradle: Ordner resources im IDE sichtbar 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>In einem von Gradle gesteuerten Anwendungsprojekt<br> Es ist angenehmer, den Überblick über alle Ordner zu haben.<br> Teilnehmer an der Entwicklung der Anwendung,<br> wie Ressourcenordner, die nicht<br> in den Pfaden nach Konvention<br> Zum Beispiel möchte ich, dass das Verzeichnis src/jbake,<br> es sei sichtbar als ‘resource folder’,<br> Es ist möglich, dies durch das Betreten der Projektkonfiguration zu tun,<br> in den Wizards der IDE. Allerdings wird diese Option beim nächsten Neuladen nicht gespeichert.<br> des Gradle-Projekts in der IDE. Um diese Konfiguration dauerhaft hinzuzufügen<br> Die Lösung besteht darin, die Konfiguration der Quellpfade zu überschreiben.<br> in der build.gradle-Konfigurationsdatei wie in den Zeilen 18, 19, 20 und 21:<br> build.gradle<br></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> Groovy-Skript, grab und Ivy-Konfiguration 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>Der Gegenstand des Tickets ist die Konfiguration eines Gradle-Build-Skripts.<br> Ich möchte ein Groovy-Skript ohne Verweis verwenden können<br> dem Gradle-Projekt, in das ich es angehängt habe<br> Ich möchte die Möglichkeit haben, dieses Groovy-Skript außerhalb von Gradle auszuführen.<br> ohne dass die Ivy-Annotationen zum Abrufen externer Abhängigkeiten<br> verursachen keine Leistungs- oder Kompilierungsprobleme<br> des Gradle-Build-Skripts.<br> Um die Konfiguration zu veranschaulichen, stütze ich mich auf zwei Skripte:<br> Ein Gradle-Build-Skript und ein Groovy-Skript.<br> Das Groovy-Skript enthält am Anfang in Zeile 2,<br> eine Anweisung zum Abrufen einer externen Abhängigkeit<br> Mit dem Ivy-Abhängigkeitsmanager.<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&lt;File&gt; torrentFiles = FileUtils.listFiles( fromDir, ["torrent"] as String[], false) torrentFiles.addAll(FileUtils.listFiles( fromDlDir, ["torrent", "torrent.added"] as String[], false)) torrentFiles.empty ?: torrentFiles.each { it -&gt; FileUtils.copyFileToDirectory(it, toDir) } println torrentFiles.size()</code></pre> </div> </div> <div class="paragraph"> <p>In der Datei build.gradle schauen wir nun, wie wir in Harmonie bringen.<br> Die beiden Abhängigkeitsmanager, Ivy und Gradle. Die Übereinstimmung zwischen den beiden erfolgt in den Zeilen:<br> 26, 30, 37, 38 et 39<br> Damit kann ich mein Groovy-Skript manuell ausführen,<br> und die Gradle-Kompilierung wird durch @Grab nicht behindert.<br> Die Abhängigkeiten des Groovy-Skripts müssen nicht in Gradle bereitgestellt werden.<br> Allerdings kann ich das Groovy-Skript nicht von Gradle aus starten.<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>Ticket-Referenz aufhttps://stackoverflow.com/a/18174033/837404[stackoverflow]</p> </div> Groovy: ein bisschen Algebra, der ggT und das kgV 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="_der_ppmc">Der PPMC</h3> <div class="paragraph"> <p><a href="https://fr.wikipedia.org/wiki/Plus_petit_commun_multiple">wiki kgV oder kleinstes gemeinsames Vielfaches</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>Ergebnis:</p> </div> <div class="paragraph"> <p>ggT(96, 28) = 4 kgV(790, 990) = 78210</p> </div> </div> Bash : Dateien nach Erweiterung finden und Ausgabe in eine Datei mit find 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>Ich suche Dateien nach Namenskriterien: die Liste der Dateien mit der Erweiterung .h und .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>die Liste der Dateien, die die Erweiterung .h und .cpp haben<br> Das Ergebnis wird in der Datei list_of_txt_files.list gespeichert.</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 &gt; list_of_txt_files.list</code></pre> </div> </div> <div class="paragraph"> <p>Ich suche die Liste der Dateien, deren Erweiterung .chm ist<br> und ich zerstöre diese Liste.<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> Ein digitales Projekt mit Wasserfallmethode verwalten 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="_analysieren_und_erfassen_der_anforderungen">Analysieren und Erfassen der Anforderungen</h3> </div> <div class="sect2"> <h3 id="_projektmanagement_definieren">Projektmanagement definieren</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="_kontextualisiere_das_projekt">Kontextualisiere das Projekt</h3> </div> <div class="sect2"> <h3 id="_analysieren_und_anforderungen_sammeln">Analysieren und Anforderungen sammeln</h3> <div class="sect3"> <h4 id="_die_ziele_und_ergebnisse_formulieren">Die Ziele und Ergebnisse formulieren</h4> </div> </div> <div class="sect2"> <h3 id="_ein_lesegitter_entschlüsseln">Ein Lesegitter entschlüsseln</h3> </div> <div class="sect1"> <h2 id="_rahmen_sie_das_projekt_mit_ihrem_team">Rahmen Sie das Projekt mit Ihrem Team.</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="../../img/conductor.png" alt="chef d&#8217;orchestre"> </div> </div> <div class="sect2"> <h3 id="_die_experten_konsultieren_um_die_lösung_zu_finden">Die Experten konsultieren, um die Lösung zu finden</h3> </div> <div class="sect2"> <h3 id="_eine_projektmanagement_methodik_auswählen">Eine Projektmanagement-Methodik auswählen</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> Die Datenbanken in einer PostgreSQL-Instanz auflisten 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>Ich habe keine Lust zu installieren.https://www.pgadmin.org/[pgAdmin] ou <a href="http://phppgadmin.sourceforge.net/">phppgadmin</a> während alles auf der Befehlszeile vorhanden ist.<br> Dafür müssen wir das Terminal öffnen und uns als postgres-Benutzer anmelden.<br> Der postgres-Benutzer ist der Einzige, der standardmäßig das Recht hat, die Anwendung psql zu starten, die das Kommandozeilen-Client ist. (<a href="https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande">CLI</a>) postgresql,<br> Um mit der Datenbank über die Kommandozeile vom Terminal aus zu kommunizieren.<br> Um sich anzumelden, das Terminal öffnen und dies eingeben:<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>Um eine Verbindung herzustellen und direkt zur PostgreSQL-Eingabeaufforderung zu gelangen, tippe dies:</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>Um die Datenbanken einer PostgreSQL-Instanz aufzulisten, hier ist der Befehl :<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>Ergebnis:</p> </div> <div class="paragraph"> <p>Liste der Datenbanken Name | Besitzer | Kodierung | Sortierung | Zeichentyp | Zugriffsrechte</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 (6 Zeilen)</p> </div> <div class="paragraph"> <p>Drücke q, um die Anzeige der Ergebnisse zu verlassen<br> <br> Um die Schemata einer Postgres-Instanz aufzulisten.</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>Ergebnis</p> </div> <div class="paragraph"> <p>öffentlich information_schema pg_catalog pg_toast_temp_1 pg_temp_1 pg_toast (6 Zeilen)</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>Ergebnis</p> </div> <div class="paragraph"> <p>pg_toast pg_temp_1 pg_toast_temp_1 pg_catalog information_schema öffentlich (6 Zeilen)</p> </div> Groovy: Dateien rekursiv umbenennen 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>Mein Videoplayer auf meinem Fernseher hat seine Art zu vorbeizugehen<br> von einer Datei zur anderen beim fortlaufenden Lesen<br> und sein Wiedergabemodus besteht darin, von 1&#8230;&#8203;..mp4 zu 10&#8230;&#8203;.mp4 zu wechseln,<br> und nicht von 1&#8230;&#8203;mp4 bis 2&#8230;&#8203;.mp4.<br> Das Problem ist, dass es fast 900 Dateien und Ordner gibt.<br> Bingo, ein super Anwendungsfall von Groovy zum Manipulieren<br> Dateien, Umbenennung, Suche nach einem Muster im Dateinamen<br> oder Ordner.<br> Hier ist das Ziel, die Namen zu ändern, die mit<br> eine Zahl und dessen zweites Zeichen des Namens<br> Ist keine Zahl, ich werde diesem Namen eine 0 am Anfang hinzufügen<br></p> </div> <div class="paragraph"> <p>renameFilesToStartWithTwoDigit.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&lt;File&gt; dirList = new ArrayList&lt;&gt;() //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 -&gt; !file.directory ?: dirList.add(file) } //looping through dirList //to rename directories filling criterias for (int i = dirList.size() - 1; i &gt;= 0; i--) { Character[] chars = dirList.get(i).name.chars !(chars[0].digit &amp;&amp; !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 -&gt; Character[] cs = f.name.chars !(cs[0].digit &amp;&amp; !cs[1].digit) ?: rename(f, "0${f.name}") } } }</code></pre> </div> </div> Groovy: Dateien mit Kriterium suchen, Kopie der Auswahl 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>Der Zweck dieses Skripts besteht darin, Dateien zu suchen,<br> Aus einem übergeordneten Verzeichnis; Auswahl abrufen<br> in einer Liste. Schließlich diese Liste von Dateien kopieren<br> in einem Zielverzeichnis dies in 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&lt;String&gt; findFilesContainingMotifs( String path, List&lt;String&gt; motifs) { List&lt;String&gt; filePathResultList = new ArrayList&lt;&gt;() 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&lt;String&gt; files, String to) { File toDirDest = new File(to) files.each { String filepath -&gt; 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&lt;String&gt; 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> Groovy: Dateimanipulation, Suche und Löschung 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>Hier werde ich mich mit dem Laden einer Eigenschaft in einem Build‑Projekt beschäftigen.https://docs.gradle.org/current/userguide/userguide.html[gradle]<br> ohne dass sie im Code verfügbar ist.<br> Die Eigenschaft wird in der Datei gradle.properties im Ordner ~/.gradle/gradle.properties definiert.<br> ~ ist eine Abkürzung der symbolischen Variable HOME_PATH, die den Benutzersitzungsstamm darstellt: derhttps://fr.wikipedia.org/wiki/R%C3%A9pertoire_personnel[persönliches Verzeichnis].<br> Auf die gleiche Weise in einem Build-Projekthttps://maven.apache.org/guides/index.html[maven], mit ~/.m2/settings.xml Der Zweck dieses Skripts ist es, die Dateien zu löschen, die den angegebenen Mustern entsprechen.<br> in der Variablen strCriteria. Dafür werde ich diehttps://fr.wikipedia.org/wiki/Fermeture_(informatique)[Abschlüsse]: jedes, findenAlle, sammeln<br> sowie die Klasse StringTokenizer, die meine Kriterien-Zeichenkette in Stücke zerlegt<br> um eine Liste von Strings abzurufen Wenn eine der Dateien in meinem zu reinigenden Ordner eines der Muster im Namen enthält<br> Dann wird er ein Kandidat für die Zerstörung sein, indem er zur Ergebnis-Liste hinzugefügt wird.<br> Und in der letzten Zeile ein kleines Beispiel vonhttps://en.wikipedia.org/wiki/Elvis_operator[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() &amp;&amp; !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 -&gt; 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() &amp;&amp; vracDir.directory //separer les élèments de ma liste de critère StringTokenizer tokenizer = new StringTokenizer(strCriteria) //la liste de critere List&lt;String&gt; criteriaList = new ArrayList&lt;&gt;() //j'itère sur les tokens et je construit ma liste de token, // mot clef critère de recherche tokenizer.each { String it -&gt; criteriaList.add(it.toLowerCase()) } //je collect tous les noms de fichier dans le dossier List&lt;String&gt; fileNameList = vracDir .listFiles() .collect { File it -&gt; it.directory ?: it.name } // je collect les noms de fichier qui contiendraient un des criteres List&lt;String&gt; resultList = fileNameList.findAll { String name -&gt; criteriaList.findAll { String crit -&gt; name.toLowerCase().contains(crit) } } // je parcours ma liste de résultat pour les effacer resultList.each { String fileName -&gt; 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> Groovy: Eine Zeichenkette in einem String ersetzen und eine Properties aus einer Datei laden 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>Hier ist ein funktionierender Codeausschnitt in Groovy,<br> um alle Vorkommen einer Zeichenfolge in einem String zu ändern<br> &lt;/think&gt;</p> </div> <div class="paragraph"> <p>und lade eine .properties-Datei in ein Properties-Objekt.<br> Einen Befehl in einem String ausführen.<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() &amp;&amp; !propertiesFile.directory Properties gradleProperties = new Properties() propertiesFile.withInputStream { InputStream it -&gt; 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> Groovy: ASCII-Zeichen 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>Hier ist ein funktionierender Groovy-Code, der eine Textdatei erzeugt,<br> avec les 256 premiers caractères lisibles du tableau ASCII<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&lt;Character&gt; chars = new ArrayList&lt;&gt;() int j = 0 Character jumpLine = '\n' 256.times { Integer idx -&gt; if (Character.isAlphabetic(idx) || Character.isDigit(idx)) { if (j % 10 == 0 &amp;&amp; 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() &amp;&amp; !speCharFile.directory) { speCharFile.text = "" } else { speCharFile.createNewFile() } String text = new String() chars.each { Character it -&gt; text = it == jumpLine ? "$text$it" : "$text $it " } speCharFile.setText(text, StandardCharsets.UTF_8.toString())</code></pre> </div> </div> <div class="paragraph"> <p>Ich habe die Datei spe_char.groovy benannt,<br> vom Ordner, in dem die Datei ist<br> ein Terminal öffnen und kopieren und einfügen, um das Skript auszuführen<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>Ergebnis:</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>