https://cheroliv.com/ JBake Bootstrap Template en-gb Thu, 8 Oct 2026 11:37:10 +0000 Thu, 8 Oct 2026 11:37:10 +0000 https://cheroliv.com/blog/2026/0126_hyperframes_asciidoc_video_post.html Sun, 31 May 2026 00:00:00 +0000 blog/2026/0126_hyperframes_asciidoc_video_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_lubang_di_pipeline_video">Lubang di Pipeline Video</a></li> <li><a href="#_hyperframes_mesin">HyperFrames : Mesin</a></li> <li><a href="#_arsitektur_plugin">Arsitektur Plugin</a> <ul class="sectlevel2"> <li><a href="#_pipeline_dalam_empat_tahap">Pipeline dalam Empat Tahap</a></li> <li><a href="#_bahasa_khusus_domain_asciidoc">Bahasa Khusus Domain AsciiDoc</a></li> <li><a href="#_bridge_node_js">Bridge Node.js</a></li> </ul> </li> <li><a href="#_dua_plugin_video_dua_penggunaan">Dua Plugin Video, Dua Penggunaan</a></li> <li><a href="#_6_epic_dari_roadmap">6 EPIC dari Roadmap</a></li> <li><a href="#_mengapa_itu_bekerja">Mengapa itu bekerja</a></li> <li><a href="#_kesimpulan_rantai_yang_hilang">Kesimpulan: Rantai yang Hilang</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 8 minutes</div> <p>Dua minggu lalu, saya meluncurkan`capsule-gradle`— sebuah plugin yang mengubah sebuah dek reveal.js dalam kapsul video WebM dengan TTS. Hari ini, saya menambahkan plugin baru: <code>hyperframes-gradle</code>. Melakukan sesuatu yang tidak dilakukan oleh capsule-gradle : mengubah AsciiDoc <strong>secara langsung</strong> menjadi video MP4, tanpa melalui reveal.js.</p> </div> <div class="paragraph"> <p>Ini mengapa plugin ini ada, bagaimana ia terkait dengan yang sudah ada, dan apa yang mesin HyperFrames HeyGen menyumbangkan pada pipeline produksi konten</p> </div> </div> </div> <div class="sect1"> <h2 id="_lubang_di_pipeline_video">Lubang di Pipeline Video</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pipeline dokumenter saya menghasilkan dua jenis video :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Kapsul revisi</strong> (capsule-gradle) — sebuah deck reveal.js di-rekam dalam WebM dengan</p> </li> </ol> </div> <div class="paragraph"> <p>narasi TTS. Sempurna untuk mereview modul.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Slides animasi</strong> (slider-gradle) — sebuah deck reveal.js HTML interaktif untuk</p> </li> </ol> </div> <div class="paragraph"> <p>pelatih tatap muka.</p> </div> <div class="paragraph"> <p>Namun tidak ada satu format ketiga: <strong>video 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">Kasus penggunaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Solusi saat ini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kekurangan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Slide instruktur</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">Kapsul revisi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">capsule-gradle → WebM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Video teaser</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>tidak ada</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>Demo teknik animasi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tidak ada</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>Dokumen-ke-video</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>tidak ada</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Kasus penggunaan pertama kritis: bagaimana menghasilkan secara otomatis sebuah video 60 detik yang menampilkan sebuah proyek atau modul, dengan animasi GSAP, narasi TTS, dan latar belakang musik — semuanya dari file AsciiDoc yang sama Bagaimana dengan slide-nya?</p> </div> <div class="paragraph"> <p>Capsule-gradle tidak dapat merespons: ia <strong>sudah</strong> memerlukan sebuah deck reveal.js. slider-gradle menghasilkan dek ini dengan baik, tetapi tidak dirancang untuk rendering video. Kami membutuhkan pipeline <strong>langsung</strong> : AsciiDoc → video.</p> </div> </div> </div> <div class="sect1"> <h2 id="_hyperframes_mesin">HyperFrames : Mesin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya menemukanhttps://github.com/heygen-com/hyperframes[HyperFrames] il y a beberapa hari. Ini adalah sebuah framework open-source (Apache 2.0) yang dibuat oleh HeyGen, unicorn dari video AI. 22 700 bintang di GitHub. Pitch tetap dalam sebuah kalimat :</p> </div> <div class="paragraph"> <p><strong>Tulis HTML. Merender video. Dibuat untuk agen.</strong></p> </div> <div class="paragraph"> <p>Prinsip : Anda menulis HTML dengan`data-*`atribut, Anda mereferensikan suatu animasi GSAP (atau CSS, Lottie, Three.js…), dan mesin merender semuanya dalam MP4 melalui Puppeteer (headless Chrome) + FFmpeg. Hasil deterministik: input yang sama, frame yang sama, video yang sama.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080"> <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="background.mp4" muted playsinline></video> <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1"> Formation Docker & Kubernetes </h1> <audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.3" src="music.wav"></audio> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script> const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.__timelines = window.__timelines || {}; window.__timelines.intro = tl; </script> </div></code></pre> </div> </div> <div class="paragraph"> <p>Apa yang membuat HyperFrames berbeda dari Remotion? Tanpa React, tanpa bundler, tanpa JSX. HTML mentah yang dapat ditulis secara alami oleh agen IA. Ini dibuat khusus <strong>exactement</strong> untuk pipeliniku : planner-gradle dengan deepseek dapat menghasilkan HTML ini dari rencana SPG/SPD, dan plugin Gradle dapat mengonversinya menjadi MP4.</p> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_plugin">Arsitektur Plugin</h2> <div class="sectionbody"> <div class="paragraph"> <p>hyperframes-gradle mengikuti pola yang sama dengan semua plugin saya : yang <a href="0124_architecture_plugin_gradle_racine_consommateur_independant_post.html">pola « Plugin Independen + Akar Konsumen ».</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="_pipeline_dalam_empat_tahap">Pipeline dalam Empat Tahap</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Pipeline hyperframes-gradle rectangle "AsciiDoc sumber" as adoc #LightYellow rectangle "AsciidoctorJ" as asciidoctorj #LightBlue rectangle "HTML HyperFrames\n(data-* attrs)" as html #LightGreen rectangle "HyperFrames CLI\n(Node.js 22+)" as cli #Lavender rectangle "video.mp4" as mp4 #Gold adoc -right-> asciidoctorj : parse blocs customs asciidoctorj -right-> html : génère HTML html -right-> cli : ProcessBuilder\nnpx hyperframes render cli -right-> mp4 : Puppeteer + FFmpeg @enduml</pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>AsciidoctorJ</strong> mengurai sumber AsciiDoc dan mengekstrak blok khusus</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> menghasilkan HTML HyperFrames dengan</p> </li> </ol> </div> <div class="paragraph"> <p>`data-*`atribut yang sesuai.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RenderHyperframesTask</strong> memanggil CLI HyperFrames melalui`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 telah dideploykan di`output/`dengan sebuah`metadata.json`untuk orkestrasi.</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_bahasa_khusus_domain_asciidoc">Bahasa Khusus Domain AsciiDoc</h3> <div class="paragraph"> <p>Nilai tambah sebenarnya dari plugin adalah DSL AsciiDoc. Pengguna Dia tidak pernah menulis HTML. Dia mengannota dokumen AsciiDoc yang sudah ada:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Formation Docker & Kubernetes :hyperframes-width: 1920 :hyperframes-height: 1080 :hyperframes-fps: 30 [hyperframes-composition, id="intro"] == Introduction Le titre apparaît avec un fondu GSAP sur fond vidéo. [hyperframes-track, index=0, start=0, duration=6] video::assets/background.mp4[muted, playsinline] [hyperframes-track, index=1, start=1, duration=4] Formation Docker & Kubernetes [hyperframes-animation, type=gsap]</code></pre> </div> </div> <div class="paragraph"> <p>const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.<em>timelines = window.</em>timelines || {}; window.__timelines.intro = tl;</p> </div> <div class="paragraph"> <p>Atribut docinfo (<code>:hyperframes-width:</code>) mengatur dimensi. Blok khusus menentukan komposisi dan jalur. Blok `[hyperframes-animation]`mengandung kode GSAP mentah — yang agen IA dapat menghasilkan dari sebuah deskripsi dalam bahasa alami.</p> </div> </div> <div class="sect2"> <h3 id="_bridge_node_js">Bridge Node.js</h3> <div class="paragraph"> <p>Satu-satunya titik gesek teknis: HyperFrames ditulis dalam Node.js/TypeScript, dan plugin saya adalah dalam Kotlin/JVM. Solusi adalah sebuah`ProcessBuilder`:</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>Tidak ada kaitan kode JVM ↔ Node.js. Kontraknya melalui baris perintah. dan file di disk. Ini pola yang sama seperti`plantuml-gradle` (memanggil CLI PlantUML) atau`slider-gradle`(yang memanggil AsciidoctorJ). Tidak ada yang baru di bawah matahari — hanya diterapkan pada alat yang lebih baru.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dua_plugin_video_dua_penggunaan">Dua Plugin Video, Dua Penggunaan</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.7619%;"> <col style="width: 4.762%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">capsule-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">hyperframes-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Source</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deck reveal.js (HTML yang ada)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">AsciiDoc ke HTML HyperFrames</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kasus penggunaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kapsul revisi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Video penjelasan mandiri</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alam</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Slides → video</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokumen → video</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">dirender</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">animasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">transisi reveal.js asli</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GSAP/CSS atribut data</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tumpukan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">100% JVM (Kotlin)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JVM + Node.js CLI eksternal</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Mereka tidak saling menggantikan. Mereka saling melengkapi. Rantai nilai lengkap:</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (kapsul revisi)</p> </div> <div class="paragraph"> <p>AsciiDoc ──→ hyperframes-gradle ──→ MP4 (video mandiri)</p> </div> <div class="paragraph"> <p>Pengguna menulis satu file AsciiDoc. slider-gradle menghasilkan slide. capsule-gradle menghasilkan kapsul revisi. hyperframes-gradle menghasilkan video teaser dan demonstrasi teknis</p> </div> </div> </div> <div class="sect1"> <h2 id="_6_epic_dari_roadmap">6 EPIC dari Roadmap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin ini terstruktur dalam 6 EPICs :</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1666%;"> <col style="width: 4.1682%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">epik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deskripsi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Prioritas</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 tata kelola + perencanaan arsitektur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ SELESAI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Plugin Gradle stub + AsciidoctorJ integrasi</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">Jembatan CLI HyperFrames (ProcessBuilder → npx → MP4)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DSL AsciiDoc customs (blok, docinfo, templates)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">P1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">HF-4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Integrasi 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">Template siap pakai (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 + penerbitan 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>Sesi 000 (bootstrap) sudah selesai. Sesi 001 akan menyerang HF-1 : stub plugin Gradle dan integrasi AsciidoctorJ.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_itu_bekerja">Mengapa itu bekerja</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tiga alasan:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>HyperFrames adalah "built for agents"</strong>. Pipeline saya bergantung pada agen IA</p> </li> </ol> </div> <div class="paragraph"> <p>(planner-gradle + deepseek) yang menghasilkan konten. HyperFrames menerima HTML mentah — format yang paling dikuasai oleh LLMs. Tanpa React, tanpa dari JSX, tidak ada kurva belajar untuk agen.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>DSL AsciiDoc alami</strong>. Seluruh ekosistem saya berbicara AsciiDoc.</p> </li> </ol> </div> <div class="paragraph"> <p>slider-gradle, codex-gradle, training-gradle — semua mengonsumsi`.adoc`. Menambahkan blok kustom`[hyperframes-composition]`adalah sebuah ekstensi logis, bukan putus.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Jembatan Node.js adalah pola yang terbukti</strong>. ProcessBuilder di luar JVM,</p> </li> </ol> </div> <div class="paragraph"> <p>Ini adalah apa yang sudah saya lakukan untuk PlantUML, Graphviz, Piper. Menambahkan HyperFrames tidak mengubah apa pun pada arsitektur — ini adalah alat eksternal tambahan, dikendalikan dari 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>Kekuatan sejati pola adalah bahwa tidak ada <strong>satupun</strong> dependensi npm dalam pembangunan Gradle. Plugin ini tidak mengimpor kode Node.js. Menjalankan sebuah perintah shell. Jika HyperFrames berkembang atau rusak, plugin tidak terhubung — cukup memperbarui perintah.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_rantai_yang_hilang">Kesimpulan: Rantai yang Hilang</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dengan hyperframes-gradle, pipeline video saya lengkap. Saya punya :</p> </div> <div class="ulist"> <ul> <li> <p>The <strong>slides interaktif</strong> (slider-gradle)</p> </li> <li> <p><strong>kapsul revisi</strong> (capsule-gradle)</p> </li> <li> <p><strong>video standalone</strong> (hyperframes-gradle)</p> </li> </ul> </div> <div class="paragraph"> <p>Tiga format. Satu file sumber: AsciiDoc.</p> </div> <div class="paragraph"> <p>Tujuan berikutnya adalah HF-1: membuat plugin terkompilasi dan menghasilkan satu Pertama HTML HyperFrames dari dokumen AsciiDoc yang diannotasi. Sesi 001 sudah terkerangka.</p> </div> <div class="paragraph"> <p>hyperframes-gradle ada. Tata kelola telah diatur. Backlog Telah ditulis. Arsitektur sudah didokumentasikan. Plugin telah lahir.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Article 0124 — Arsitektur Plugin Independen + Akar Konsumen</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 — Dokumentasi</a></p> </li> <li> <p><code>foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc</code>— Arsitektur detail</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0125_audit_conso_opencode_methodologie_comparaison_prix_llm_post.html Mon, 18 May 2026 00:00:00 +0000 blog/2026/0125_audit_conso_opencode_methodologie_comparaison_prix_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_memahami_stack_siapa_melakukan_apa">Memahami Stack: Siapa melakukan apa?</a></li> <li><a href="#_pendahuluan_mengapa_audit">Pendahuluan: Mengapa audit?</a></li> <li><a href="#_basis_data_opencode_tambang_emas">Basis Data OpenCode: Tambang Emas</a> <ul class="sectlevel2"> <li><a href="#_skema">Skema</a></li> <li><a href="#_kode_ekstraksi">Kode Ekstraksi</a></li> </ul> </li> <li><a href="#_hasil_73_hari_konsumsi">Hasil : 73 Hari Konsumsi</a> <ul class="sectlevel2"> <li><a href="#_tampilan_global">Tampilan Global</a></li> <li><a href="#_ventilasi_berdasarkan_model_dan_penyedia">Ventilasi berdasarkan Model dan Penyedia</a></li> <li><a href="#_model_intra_sesi_apa_yang_tidak_terlihat_oleh_tabel_sesi">Model Intra-Sesi : Apa yang tidak terlihat oleh Tabel Sesi</a></li> </ul> </li> <li><a href="#_perbandingan_tarif_penyedia_barat">Perbandingan Tarif — Penyedia Barat</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="#_penyedia_inferensi_huggingface">Penyedia Inferensi HuggingFace</a></li> <li><a href="#_groq">Groq</a></li> </ul> </li> <li><a href="#_perbandingan_tarif_pemasok_tiongkok">Perbandingan Tarif — Pemasok Tiongkok</a> <ul class="sectlevel2"> <li><a href="#_api_langsung_deepseek_platform_deepseek_com">API Langsung DeepSeek (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="#_tabel_ringkasan_semua_penyedia">Tabel Ringkasan — Semua Penyedia</a></li> <li><a href="#_biaya_tersembunyi_prompt_engineering_dan_iterasi">Biaya Tersembunyi: Prompt Engineering dan Iterasi</a></li> <li><a href="#_menggabungkan_langganan_ollama_cloud_pro_metode_docker">Menggabungkan Langganan Ollama Cloud Pro: Metode Docker</a></li> <li><a href="#_apa_yang_tidak_diukur_oleh_audit">Apa yang Tidak Diukur oleh Audit</a></li> <li><a href="#_kesimpulan_putusan_angka">Kesimpulan : Putusan Angka</a></li> <li><a href="#_referensi">Referensi</a> <ul class="sectlevel2"> <li><a href="#_sumber_tarif">Sumber Tarif</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 22 minutes</div> <p>Saya sering ditanya berapa biaya konsumsi AI saya. Saya menjawab « 20 euro per bulan » dan mereka menatap saya dengan mata bulat. Hari ini, saya membuka kotak hitam untuk Anda. Artikel ini adalah audit lengkap dari 73 hari vibe coding saya: metodologi untuk mengekstrak data dari basis SQLite OpenCode, kode SQL untuk mengueri tabel, dan perbandingan komprehensif dengan <strong>semua</strong> penyedia di pasar — Barat seperti juga Cina. Hasilnya sangat tidak simetris hingga saya harus memeriksa perhitungan saya tiga kali.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_memahami_stack_siapa_melakukan_apa">Memahami Stack: Siapa melakukan apa?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum menyelami angka, mari kita jelaskan arsitektur. Tiga aktor berbeda ada dalam setup saya, dan penting untuk tidak salah mengidentifikasi mereka:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Tiga Aktor Stack LLM saya left to right direction actor "Saya (Pengembang)" as Dev package "OpenCode\n(github.com/anomalyco/opencode)" as OC { rectangle "CLI pemrograman vibe Sumber terbuka, gratis" 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 (Instalasi Lokal)" as OL { rectangle "Klien inferensi Diinstal pada komputer saya" 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 (ollama.com)" as OCloud { rectangle "Layanan inferensi cloud Langganan Pro : 20€/bulan" 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 --> CLI : "Saya mengetik beberapa prompt" CLI --> Client : "Panggil model ini" Client --> Cloud : "Kunci SSH + permintaan (model : cloud)" Client --> Client : "Eksekusi lokal (model tanpa :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 BUKAN seorang penyedia model.</strong>Ini adalah CLI sumber terbuka (<a href="https://github.com/anomalyco/opencode">github.com/anomalyco/opencode</a>) yang mengorkestrasi agen AI. Tidak menjual langganan, tidak menyediakan inferensi. Ini ekuivalen dengan`git`untuk pembuatan versi: sebuah alat, bukan layanan. <strong>Ollama Cloud adalah penyedia inferensi.</strong>Instalasi lokal Ollama saya berperangai sebagai <strong>client</strong> — ia mengautentikasi diri kepada server Ollama melalui kunci SSH unik (Device Key) dan mendelegasikan eksekusi model yang ditandai kepada mereka`:cloud`. Langganan Pro (20€/bulan) membuka kuota yang lebih tinggi dan memungkinkan menggabungkan beberapa akun pada satu mesin melalui Docker.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_pendahuluan_mengapa_audit">Pendahuluan: Mengapa audit?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dua bulan lalu, saya menggunakan model secara gratis di instalasi lokal Ollama saya. Kemudian saya berlangganan pertama Ollama Cloud Pro seharga 20€/bulan, yang memungkinkan saya menggunakan model cloud (yang memiliki tag`:cloud`) via penyedia`ollama-cloud`. Sebuah langganan kedua mengikuti sebulan kemudian, pada instance Docker terpisah dengan akun dan kunci SSH milik sendiri — metode akumulasi yang dijelaskan dalam <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">artikel saya tentang akumulasi langganan</a>.</p> </div> <div class="paragraph"> <p>Pertanyaan yang mengganggu saya: <strong>apakah 20€ per bulan ini sudah layak ?</strong> Tidak dengan tebak-tebakan. Dengan angka.</p> </div> <div class="paragraph"> <p>Untuk menjawab, saya membutuhkan data yang tepat. Bukan estimasi. Bukan rata-rata. Konsumsi saya yang <strong>sebenarnya</strong>, token demi token, model demi model, sesi demi sesi.</p> </div> <div class="paragraph"> <p>Dan OpenCode — CLI-nya — menyimpan semua itu di database SQLite.</p> </div> </div> </div> <div class="sect1"> <h2 id="_basis_data_opencode_tambang_emas">Basis Data OpenCode: Tambang Emas</h2> <div class="sectionbody"> <div class="paragraph"> <p>OpenCode menyimpan seluruh riwayat sesi-nya dalam file SQLite yang terletak di`~/.local/share/opencode/opencode.db`. La mienne pèse 660 Mo pour 73 jours d’utilisation — une base de données de production tout à fait respectable.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ls -lh ~/.local/share/opencode/opencode.db -rw-r--r-- 1 cheroliv cheroliv 660M mai 18 12:25 opencode.db</code></pre> </div> </div> <div class="sect2"> <h3 id="_skema">Skema</h3> <div class="paragraph"> <p>Basis data berisi sekitar dua puluh tabel, tetapi tiga di antaranya sangat penting untuk audit kami :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Skema Sederhana — OpenCode SQLite entity "sesi" as S { * id : TEXT -- * model : TEXT (JSON) * cost : REAL * tokens_input : INTEGER * tokens_output : INTEGER * tokens_reasoning : INTEGER * tokens_cache_read : INTEGER * tokens_cache_write : INTEGER * time_created : INTEGER * project_id : TEXT } entity "pesan" as M { * id : TEXT -- * session_id : TEXT <<FK>> * data : TEXT (JSON) * time_created : INTEGER } entity "proyek" as P { * id : TEXT -- * worktree : TEXT * name : TEXT } S ||--o{ M : "session_id" S }o--|| P : "project_id" note right of S La table session agrège tokens + coût + modèle. C'est notre point d'entrée principal. end note note right of M Les messages individuels. Le champ data contient le modèle utilisé (format JSON) même si la session change de modèle en cours de route. end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Meja`session`adalah sempurna untuk audit global: setiap sesi memiliki jumlah token yang diagregasikan, model yang digunakan, dan biayanya. Kolom`model`adalah JSON mentah :</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>Lapangan`cost`dalam basis OpenCode hanya mencerminkan <strong>biaya API eksternal</strong> yang dibayar sesuai penggunaan melalui kunci API (Google Gemini, OpenAI, dst.). Panggilan melalui Ollama — baik lokal maupun melalui Ollama Cloud Pro — ditandai`cost=0`karena biayanya adalah tarif tetap (langganan), bukan per token. Biaya sebenarnya dari panggilan-panggilan ini adalah langganan bulanan.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_kode_ekstraksi">Kode Ekstraksi</h3> <div class="paragraph"> <p>Tidak perlu menginstal apa pun. Node.js 22+ menyertakan modul SQLite eksperimental (<code>node:sqlite</code>) yang berfungsi dengan sempurna. Berikut skrip yang memberi saya semuanya:</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>Bendera`--experimental-sqlite`diperlukan pada Node.js 22.x. Pada Node.js 24+, modul ini stabil dan tidak lagi memerlukan flag.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_hasil_73_hari_konsumsi">Hasil : 73 Hari Konsumsi</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_tampilan_global">Tampilan Global</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">metrik</th> <th class="tableblock halign-left valign-top">Nilai</th> <th class="tableblock halign-left valign-top">konteks</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Sesi 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 sesi/hari rata-rata</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Masukan Token</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,62 miliar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dari mana 94,5M cache hit</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tokens Output</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">21 juta</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>Token Penalaran</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">Sangat kecil — hampir tidak ada pemikiran</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Biaya API eksternal</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">Biaya di luar langganan (Gemini + free tiers)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Angka \$0,22 ini penting: ini mewakili semua yang saya bayar <strong>di atas</strong> langganan Ollama Cloud Pro saya. Artinya hampir tidak ada. Langganan mencakup intinya.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Evolusi Bulanan — Input Token rectangle "Maret 2026 9 sesi 37,7M token" as MARS #FFE082 rectangle "April 2026 486 sessions 1,33 Md tokens" as AVR #81C784 rectangle "Mei 2026 527 sesi 1,25 miliar token" as MAI #64B5F6 MARS -right-> AVR : ×35 AVR -right-> 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>Pembangkitan antara Maret dan April spektakuler: ×35 dalam sebulan. Ini adalah transisi dari penggunaan « test » ke penggunaan « production » — ketika saya mulai menjalankan agen OpenCode secara kontinu untuk plugin Gradle saya.</p> </div> </div> <div class="sect2"> <h3 id="_ventilasi_berdasarkan_model_dan_penyedia">Ventilasi berdasarkan Model dan Penyedia</h3> <div class="paragraph"> <p>Bidang`model`dari meja`session`merupakan JSON,`json_extract()`memungkinkan ventilasi dengan baik :</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">Model × Penyedia</th> <th class="tableblock halign-left valign-top">Sesi</th> <th class="tableblock halign-left valign-top">(empty)</th> <th class="tableblock halign-left valign-top">keluaran</th> <th class="tableblock halign-left valign-top">Biaya</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>Tiga penyedia berbeda untuk tepat sama model DeepSeek V4 Pro: * <code>ollama-cloud</code>→ via <strong>langganan Pro berbayar</strong> (cloud dikelola oleh Ollama) * <code>ollama-b</code>→ <strong>langganan Pro kedua</strong>, terisolasi dalam kontainer Docker yang terpisah * <code>ollama</code>→ instance native locale, <strong>gratis</strong> (berjalan langsung di komputer saya) Jumlah dari tiga menghasilkan 936M input, 8,4M output — ini adalah konsumsi total saya DeepSeek V4 Pro, semua provider digabung. Hanya`ollama-cloud`(220M input) memerlukan langganan. Sisa 716M gratis (local atau akumulasi langganan).</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_model_intra_sesi_apa_yang_tidak_terlihat_oleh_tabel_sesi">Model Intra-Sesi : Apa yang tidak terlihat oleh Tabel Sesi</h3> <div class="paragraph"> <p>Meja`session`hanya menangkap model <strong>utama</strong> dari sesi. Namun selama satu sesi yang sama, agen OpenCode dapat beralih antara beberapa model. Tabel`message`mengungkapkan :</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>Saya tidak lagi menggunakan Qwen, GLM, Kimi maupun model-model lainnya. Mereka muncul di riwayat karena saya telah mencoba banyak hal di April. Sejak pertengahan Mei, saya terkunci pada DeepSeek V4 Pro — ia adalah satu-satunya yang mampu menahan beban pada konteks panjang dengan governance agen (lihat <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">perbandingan saya Kimi/GLM/DeepSeek</a>). 32% pesan DeepSeek di riwayat adalah menyesatkan: hari ini itu 100%.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_perbandingan_tarif_penyedia_barat">Perbandingan Tarif — Penyedia Barat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pertanyaan yang menyakitkan: berapa biaya konsumsi yang sama dengan penyedia tradisional ?</p> </div> <div class="paragraph"> <p>Dasar perhitungan saya untuk perbandingan :<strong>220M tokens input + 1,9M tokens output</strong>— <strong>hanya</strong> volume yang dilewati oleh`ollama-cloud`(yang satu-satunya yang sesuai dengan langganan berbayar saya). Sisa 716M gratis (Ollama lokal dan instance Docker B).</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 23.0769%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3846%;"> <col style="width: 15.3847%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">pemasok</th> <th class="tableblock halign-left valign-top">model</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">keluaran $/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× abonemen saya</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Setup saya</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">Model</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Keluaran \$/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× langganan saya</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>Bahkan Haiku 4.5, model paling « ekon omi » dari Claude, biayanya 11× langganan saya. Dan ia tidak mengenal apa-apa dari kode saya, tidak menghasilkan dalam gaya saya, dan halusinasi terhadap API Gradle Kotlin DSL.</p> </div> </div> <div class="sect2"> <h3 id="_openai_gpt">OpenAI — GPT</h3> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 27.2727%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1819%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Model</th> <th class="tableblock halign-left valign-top">$/m</th> <th class="tableblock halign-left valign-top">Keluaran $/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× langganan saya</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 kali</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">model</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× langganan saya</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 berharga 69€ adalah kompetitor « proche » yang satu-satunya dalam harga murni — tapi ini adalah model ringan padat, bukan MoE 1.6T seperti DeepSeek V4 Pro. Kualitas kode yang dihasilkan tidak berhubungan sama sekali.</p> </div> </div> <div class="sect2"> <h3 id="_penyedia_inferensi_huggingface">Penyedia Inferensi HuggingFace</h3> <div class="paragraph"> <p>HuggingFace tidak melakukan inferensi sendiri — ia mengagregasi <strong>providers</strong> pihak ketiga (Novita, Together, DeepInfra, Cerebras, SambaNova, Fireworks, Groq…) melalui API yang terpadu. Kita memilih provider yang termurah atau tercepat. Berikut tarif yang dicatat pada Mei 2026 untuk 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">penyedia HF</th> <th class="tableblock halign-left valign-top">\$/M</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× langganan saya</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Novita (termurah)</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 kali</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Bersama</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">kembang api</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tarif tidak publik</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)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Meski provider termurah di HuggingFace (Novita) menagih 19× harga langganan saya. Berbeda dengan Ollama Cloud, HuggingFace menagih <strong>en plus</strong> biaya platform jika Anda tidak memiliki langganan PRO HF ($9/bulan).</p> </div> </div> <div class="sect2"> <h3 id="_groq">Groq</h3> <div class="paragraph"> <p>Groq tidak memiliki <strong>satu pun</strong> model yang saya gunakan — katalog mereka hanya mencakup GPT-OSS, Llama, dan Qwen 32B. Tidak dapat dibandingkan.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_perbandingan_tarif_pemasok_tiongkok">Perbandingan Tarif — Pemasok Tiongkok</h2> <div class="sectionbody"> <div class="paragraph"> <p>Uji yang sebenarnya adalah pasar China. Jika DeepSeek adalah model China, API aslinya seharusnya lebih murah, bukan?</p> </div> <div class="sect2"> <h3 id="_api_langsung_deepseek_platform_deepseek_com">API Langsung DeepSeek (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">Keluaran $/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Promo -75% (akhir 31 Mei)</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 dolar</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tarif penuh (mulai 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>Bahkan dengan promosi agresif DeepSeek (-75% diperpanjang), biaya API langsung<strong>5×</strong>lebih mahal. Di tarif normal,<strong>20×</strong>. Dan ini <strong>hanya</strong> DeepSeek — tidak ada akses ke model lain.</p> </div> </div> <div class="sect2"> <h3 id="_kimi_moonshot_platform_kimi_com">Kimi Moonshot (platform.kimi.com)</h3> <div class="paragraph"> <p>Kimi hanya menawarkan model-modelnya sendiri. Tidak ada DeepSeek.</p> </div> </div> <div class="sect2"> <h3 id="_alibaba_bailian_bailian_aliyun_com">Alibaba Bailian (bailian.aliyun.com)</h3> <div class="paragraph"> <p>Penyedia tunggal yang mengagregasi semua model China — tetapi melalui penjualan ulang dengan margin. Harga diisi secara dinamis dengan JavaScript, sehingga scraping menjadi tidak mungkin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tabel_ringkasan_semua_penyedia">Tabel Ringkasan — Semua Penyedia</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">pemasok</th> <th class="tableblock halign-left valign-top">model</th> <th class="tableblock halign-left valign-top">$/M</th> <th class="tableblock halign-left valign-top">Keluaran \$/M</th> <th class="tableblock halign-left valign-top">Biaya/bulan</th> <th class="tableblock halign-left valign-top">× langganan saya</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Cloud Pro</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>~20€</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>1×</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Kilat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Gemini 3 Flash</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$0,30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$69</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3,5×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek API (promosi)</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 (biasa)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1,74</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3,48</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$390</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">20×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Together AI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek V4 Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,10</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$4,40</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$470</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">23×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.4</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$2,50</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$579</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">29×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Sonnet 4.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Sonnet 4.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$15</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$689</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">34×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Opus 4.7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Claude Opus 4.7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 148</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">57×</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$30</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">\$1 157</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">58×</p></td> </tr> </tbody> </table> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Biaya Bulanan yang Diproyeksikan — 220M Input + 1,9M Output rectangle "Ollama Cloud Pro ~20 euro" 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 $230" as CH #FF5722 rectangle "HF/Novita \$374" as HF #F44336 rectangle "DeepSeek normal\n\$390" as DSN #F44336 rectangle "GPT 5.4\n\$579" as G4 #D32F2F rectangle "Claude Sonnet \$689" as CS #D32F2F rectangle "Claude Opus\n\$1 148" as CO #B71C1C rectangle "GPT 5.5 \$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="_biaya_tersembunyi_prompt_engineering_dan_iterasi">Biaya Tersembunyi: Prompt Engineering dan Iterasi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Biaya token hanya bagian dari persamaan. Biaya yang sebenarnya adalah waktu pengembang.</p> </div> <div class="paragraph"> <p>Dengan OpenCode + Ollama Cloud Pro + agen governan saya (EAGER/LAZY/Hot/Warm/Cold, dijelaskan dalam <a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">artikel tentang governan</a>), saya dapat :</p> </div> <div class="ulist"> <ul> <li> <p><strong>0 prompt engineering berulang</strong>: konteks disuntikan secara otomatis</p> </li> <li> <p><strong>90%+ benar pada percobaan pertama</strong>: kode berhasil dikompilasi pada percobaan pertama</p> </li> <li> <p><strong>Tidak ada halusinasi deepseek selama 8 sesi berturut-turut</strong>(dokumentasi dalam <a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">perbandingan Kimi/GLM/DeepSeek</a>)</p> </li> </ul> </div> <div class="paragraph"> <p>Dengan Claude atau GPT <strong>tanpa</strong> fine-tune maupun tata kelola :</p> </div> <div class="ulist"> <ul> <li> <p>2-3 iterasi per tugas secara rata-rata</p> </li> <li> <p>Prompt engineering sistematik</p> </li> <li> <p>Halusinasi terhadap API Kotlin/Gradle ketika konteks melebihi 30K token</p> </li> </ul> </div> <div class="paragraph"> <p>Biaya « efektif » bulanan — tokens × iterasi × waktu koreksi — adalah 27× hingga 54× dari solusi saya, seperti yang saya demonstrasikan dalam <a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">artikel tentang rasio efektivitas</a>.</p> </div> <div class="paragraph"> <p><em>__</em> Bukan hanya soal harga per token. Claude Opus dengan harga 57× yang memerlukan 3× lebih banyak iterasi, ini biaya efektif ~170× lebih tinggi. Untuk mengatakan dengan terang: membayar seorang magang dengan gaji seorang partner McKinsey. </think> (empty)</p> </div> </div> </div> <div class="sect1"> <h2 id="_menggabungkan_langganan_ollama_cloud_pro_metode_docker">Menggabungkan Langganan Ollama Cloud Pro: Metode Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika satu langganan tidak cukup, kita menggabungkannya. Prinsipnya adalah mengisolasi setiap langganan dalam instalasi Ollama masing-masing, dengan kunci SSH otentikasi masing-masing. Docker membuatnya trivial.</p> </div> <div class="paragraph"> <p>Metode lengkapnya dijelaskan dalam <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">artikel tentang penumpukan Docker</a>, ini prinsipnya:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 title Architecture — Dua Langganan Ollama Cloud Pro pada satu mesin left to right direction node "Mesin Fisik Saya" { frame "Ollama Instance A (asli)\nport :11434" as Native { database "Identitas A /usr/share/ollama/.ollama/id_ed25519" } frame "Ollama Instansi B (Docker) port :11435" as Docker { database "Identitas B ~/ollama-b-data/id_ed25519" } } cloud "Ollama Cloud" { actor "Akun Pro A (email 1)" as A actor "Akun Pro B\n(email 2)" as B } Native --> A : "Kunci Perangkat A" Docker --> B : "Kunci Perangkat 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>Pola itu sederhana:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Membuat volume`~/ollama-b-data`</p> </li> <li> <p>Menjalankan kontainer Docker`ollama/ollama:0.20.2`dipesetakan pada`11435:11434`</p> </li> <li> <p>Mengambil kunci SSH dari kontainer → menyimpannya di ollama.com</p> </li> <li> <p>Melakukan`ollama signin`dengan email kedua</p> </li> <li> <p>Mengkonfigurasi OpenCode dengan dua penyedia (`ollama`pada :11434,`ollama-b`pada :11435)</p> </li> </ol> </div> <div class="paragraph"> <p>Dua akun, satu kartu biru, tanpa konflik.</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_tidak_diukur_oleh_audit">Apa yang Tidak Diukur oleh Audit</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">area buta</th> <th class="tableblock halign-left valign-top">Dampak</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kualitas kode yang dihasilkan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2,6 miliar token tidak memberitahu apakah kode dapat dikompilasi. Delapan sesi DeepSeek V4 Pro saya memiliki tingkat first-shot >90%.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ekosistem OpenCode</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CLI gratis, tetapi nilai-nya (agen, sandbox, riwayat, caching prompt) sangat besar. Tidak termasuk dalam harga langganan — ini adalah alat terpisah.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Biaya peluang</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menghabiskan 2 jam per hari untuk debug halusinasi dari model yang kurang unggul membiayai lebih mahal daripada 20€/bulan.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kepiayaan hati</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Paket tetap = tidak ada kejutan. Dengan per-token, lonjakan aktivitas bisa sangat menyakitkan.</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>Harga yang disebut adalah harga Mei 2026. Dalam enam bulan, semuanya akan menurun. Namun perbandingan kekuatan struktural — langganan tetap vs pembayaran per penggunaan — akan tetap menguntungkan untuk langganan bagi konsumen besar.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_putusan_angka">Kesimpulan : Putusan Angka</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah 73 hari, 1 022 sesi OpenCode, dan 2,6 miliar token :</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">Putusan</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya API eksternal kumulatif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$0.22</strong>(hampir nol)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya langganan Ollama Cloud Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>~20 euro/bulan</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Setara Claude Opus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$1 148/bulan</strong>— 57× lebih mahal</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Setara GPT 5.5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$1 157/bulan</strong>— 58× lebih mahal</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Setara HuggingFace/Novita</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>\$374/bulan</strong>— 19× lebih mahal</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Setara langsung dengan API DeepSeek</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$390/bulan</strong>— 20× lebih mahal</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Ekivalen termurah (Gemini Flash)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>$69/bulan</strong>— 3,5× lebih mahal, model yang lebih rendah</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Penawaran terbaik di pasar</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Cloud Pro seharga 20€/bulan</strong>— tak terkalahkan</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>(No content) Dengan biaya 20€ per bulan untuk mengakses DeepSeek V4 Pro (1,6T parameter, MoE, CSA+HCA, konteks 1M) melalui Ollama Cloud, saya memiliki nilai terbaik di pasar dunia. Bahkan penyedia China langsung 5× hingga 20× lebih mahal. Bahkan HuggingFace, dengan agregasinya dari penyedia low-cost, adalah 19× lebih mahal. Pasar Barat (Claude, GPT) berada pada angka 50-60× — sebuah planet lain.</p> </div> <div class="paragraph"> <p>Rasio ini sangat tidak seimbang sehingga tidak bisa bertahan selamanya. Nikmati selagi masih ada. </think></p> </div> <div class="paragraph"> <p>Ya, 20 balles saya setiap bulan, ini adalah investasi teknis terbaik dalam hidup saya sebagai pengembang. Dan sekarang kamu memiliki angka untuk membuktikannya.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Pasal 0108 — Tata Kelola 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">Artikel 0112 — DeepSeek V4 Pro vs Kimi K2.6 vs GLM 5.1</a></p> </li> <li> <p><a href="0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html">Artikel 0119 — Perbandingan Benchmark DGX Spark vs Cloud vs Langganan LLM</a></p> </li> <li> <p>Article 0120 — Menggabungkan Dua Langganan Ollama Cloud Pro dengan Docker</p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Article 0121 — Plugin Gradle pour Piloter Deux Instances Ollama</a></p> </li> <li> <p><a href="0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html">Makalah 0122 — Rasio Efektivitas 27× sampai 54×</a></p> </li> </ul> </div> <div class="sect2"> <h3 id="_sumber_tarif">Sumber Tarif</h3> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/pricing">Ollama Cloud — Tarif Pro \$20/bulan</a></p> </li> <li> <p><a href="https://api-docs.deepseek.com/quick_start/pricing">DeepSeek API — Harga resmi V4 Pro</a></p> </li> <li> <p><a href="https://platform.kimi.com/docs/pricing/chat-k26">Kimi Moonshot — Tarif K2.6</a></p> </li> <li> <p><a href="https://huggingface.co/inference/models">HuggingFace Inference Providers — Tarif per provider</a></p> </li> <li> <p><a href="https://www.anthropic.com/pricing">Anthropic — Biaya API Claude</a></p> </li> <li> <p><a href="https://openai.com/api/pricing/">OpenAI — Harga GPT API</a></p> </li> <li> <p><a href="https://together.ai/pricing">Together AI — Tarif inferensi</a></p> </li> <li> <p><a href="https://groq.com/pricing">Groq — Tarif API</a></p> </li> <li> <p><a href="https://deepinfra.com/pricing">DeepInfra — Harga GPU dan model</a></p> </li> <li> <p><a href="https://help.aliyun.com/zh/model-studio/text-generation-model/">Alibaba Bailian — Model yang tersedia</a></p> </li> <li> <p><a href="https://github.com/anomalyco/opencode">OpenCode — CLI open source di GitHub</a></p> </li> </ul> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0124_architecture_plugin_gradle_racine_consommateur_independant_post.html Thu, 14 May 2026 00:00:00 +0000 blog/2026/0124_architecture_plugin_gradle_racine_consommateur_independant_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_tiga_arsitektur_yang_menyita_waktu_saya">Masalah: Tiga Arsitektur yang Menyita Waktu Saya</a> <ul class="sectlevel2"> <li><a href="#_opsi_1_plugin_terisolasi_tidak_ada_dogfooding">Opsi 1: Plugin Terisolasi (tidak ada dogfooding)</a></li> <li><a href="#_opsi_2_monorepo_klasik_includeplugin">Opsi 2 : Monorepo Klasik (<code>include(":plugin")</code>)</a></li> <li><a href="#_opsi_3_build_komposit_includebuild">Opsi 3 : Build Komposit (<code>includeBuild()</code>)</a></li> </ul> </li> <li><a href="#_solusi_dua_build_independen_akar_konsumen">Solusi: Dua Build Independen, Akar Konsumen</a> <ul class="sectlevel2"> <li><a href="#_alur_kerja">Alur Kerja</a></li> <li><a href="#_workflow_konkret">Workflow konkret</a></li> </ul> </li> <li><a href="#_mengapa_arsitektur_ini_menaklukkan_saya">Mengapa arsitektur ini menaklukkan saya</a> <ul class="sectlevel2"> <li><a href="#_dogfooding_asli_umpan_balik_instan">Dogfooding Asli, Umpan Balik Instan</a></li> <li><a href="#_2_kloning_tanpa_konfigurasi">2. Kloning Tanpa Konfigurasi</a></li> <li><a href="#_3_builds_terisolasi_ci_mandiri">3. Builds terisolasi, CI mandiri</a></li> </ul> </li> <li><a href="#_anatomi_dari_subdirektori_name_plugin">Anatomi dari Subdirektori `{name}-plugin/</a> <ul class="sectlevel2"> <li><a href="#_katalog_versi_dua_file_terpisah">Katalog Versi: Dua File Terpisah</a></li> </ul> </li> <li><a href="#_apa_yang_tidak_kita_lakukan">Apa yang tidak kita lakukan</a></li> <li><a href="#_perbandingan_tiga_arsitektur_terhadap_dogfooding">Perbandingan: Tiga Arsitektur Terhadap Dogfooding</a></li> <li><a href="#_kontrak_dag_build_akar_tidak_pernah_berasal_dari_subfolder">Kontrak DAG: Build akar tidak pernah berasal dari subfolder</a></li> <li><a href="#_conclusion_duplikasi_tampak_yang_menghemat_waktu">Conclusion : Duplikasi Tampak yang Menghemat Waktu</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 11 minutes</div> <p>Anda mengklon repositori plugin Gradle. Anda membuka terminal. Apa yang Anda ketik? Selanjutnya?<code>./gradlew tasks</code>, tentunya. Namun dalam folder mana? Akar? Sub-modul? Apakah harus membaca README terlebih dahulu untuk mengetahui cara membangun? Jika Anda ragu, bukankah dalam sekejap, arsitektur proyeknya rusak</p> </div> <div class="paragraph"> <p>Ini adalah bagaimana saya sudah menyelesaikan masalah ini sekali untuk selamanya — dan mengapa ini pattern saat ini adalah tanda tangan semua plugin Gradle saya di`foundry/public/`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_tiga_arsitektur_yang_menyita_waktu_saya">Masalah: Tiga Arsitektur yang Menyita Waktu Saya</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum mencapai pola saat ini, saya mencoba-coba antara tiga pendekatan Klasik untuk mengatur plugin Gradle. Masing-masing memiliki kelemahan yang tidak dapat diterima.</p> </div> <div class="sect2"> <h3 id="_opsi_1_plugin_terisolasi_tidak_ada_dogfooding">Opsi 1: Plugin Terisolasi (tidak ada dogfooding)</h3> <div class="paragraph"> <p>Proyek hanya berisi plugin. Tidak ada contoh konsumsi. Tidak ada proyek yang mengerjakannya. Untuk mengujinya, harus membuat proyek eksternal, y mereferensikan plugin melalui`mavenLocal`atau satu build komposit, dan hanya periksa bahwa itu berfungsi</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>Plugin Gradle tanpa contoh konsumsi adalah sebuah pustaka tanpa tes integrasi. Anda tidak pernah tahu jika perubahan terakhir a merusak pengalaman pengguna</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_opsi_2_monorepo_klasik_includeplugin">Opsi 2 : Monorepo Klasik (<code>include(":plugin")</code>)</h3> <div class="paragraph"> <p>Gradle`init`menghasilkan`settings.gradle.kts`dengan`include("plugin")`. Root dan sub-modul membagikan daemon yang sama, konfigurasi yang sama, katalog yang sama. Praktis, tetapi terhubung.</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>Yang menyangkut:</p> </div> <div class="ulist"> <ul> <li> <p>akar<strong>harus</strong>memiliki versi Gradle yang sama dengan sub-modul</p> </li> <li> <p>`libs.versions.toml`dibagikan — katalog versi umum, dependensi</p> </li> </ul> </div> <div class="paragraph"> <p>yang melarikan diri dari satu modul ke modul lain</p> </div> <div class="ulist"> <ul> <li> <p>Tidak dapat membangun plugin secara independen dari root.</p> </li> <li> <p>CI harus membangun kedua modul, meski hanya plugin yang berubah.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_opsi_3_build_komposit_includebuild">Opsi 3 : Build Komposit (<code>includeBuild()</code>)</h3> <div class="paragraph"> <p>Kami memisahkan keduanya menjadi build Gradle terpisah dan kami menghubungkannya melalui <code>includeBuild("mon-plugin")`dalam`settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>Ini sudah lebih baik. Build plugin terisolasi. Tapi konsumen harus secara eksplisit merujuk pada build eksternal — dan output dari `./gradlew tasks`pada akar bergantung pada konfigurasi yang benar dari komposit. Kloning bukan zero-config : Anda harus mengetahui bahwa plugin berada di folder terpisah, yang direferensi oleh root, etc.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell">. ├── settings.gradle.kts → includeBuild("plugin-build/") ├── build.gradle.kts → plugins { id("mon-plugin") } └── plugin-build/ ├── settings.gradle.kts └── build.gradle.kts</code></pre> </div> </div> <div class="paragraph"> <p>Saya mencari yang lebih baik. Lebih baik lagi.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_dua_build_independen_akar_konsumen">Solusi: Dua Build Independen, Akar Konsumen</h2> <div class="sectionbody"> <div class="paragraph"> <p>Berikut adalah pola yang akhirnya saya mengadopsi:</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>Kunci :`{name}-plugin/`adalah sebuah proyek Gradle yang lengkap dan mandiri Dia memiliki wrapper sendiri, settings sendiri, katalog de versi. Ia diklon, dibuild, ditest, dan dipublikasikan tanpa akar tahu akan keberadaannya</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Root, hanya <strong>satu</strong> hal: menerapkan plugin.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">plugins { alias(libs.plugins.bakery) } repositories { mavenLocal() mavenCentral() } bakery { configPath = file("site.yml").absolutePath }</code></pre> </div> </div> <div class="paragraph"> <p>Tiga baris dalam kasus`bakery-gradle`. Tidak ada lagi. Nol`include()<code>, nol`includeBuild()</code>, nol sub-proyek. Sebuah build Gradle klasik yang menerapkan plugin seperti apa pun Konsumen mana yang akan melakukannya?</p> </div> <div class="sect2"> <h3 id="_alur_kerja">Alur Kerja</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 12 left to right direction package "RACINE (Konsumen)" #CCFFCC { usecase "Klona repositori" as Clone usecase "./gradlew tasks" as Tasks usecase "./gradlew bake" as Dogfood note bottom of Dogfood Exerce le plugin Feedback immédiat Zéro config end note } package "{name}-plugin/ (Build Mandiri)" #CCE5FF { usecase "./gradlew build" as BuildPlugin usecase "./gradlew publishToMavenLocal" as MavenLocal usecase "./gradlew test" as TestPlugin note bottom of BuildPlugin Cycle de vie isolé Tests unitaires + Cucumber CI dédiée possible end note } Clone -down-> Tasks Tasks -down-> Dogfood Dogfood ..> MavenLocal : "bergantung pada plugin diterbitkan secara lokal" BuildPlugin -up-> MavenLocal TestPlugin -up-> BuildPlugin @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_workflow_konkret">Workflow konkret</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="_mengapa_arsitektur_ini_menaklukkan_saya">Mengapa arsitektur ini menaklukkan saya</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tiga manfaat yang, ketika digabungkan, setara dengan biaya « duplication» :</p> </div> <div class="sect2"> <h3 id="_dogfooding_asli_umpan_balik_instan">Dogfooding Asli, Umpan Balik Instan</h3> <div class="paragraph"> <p>Uji terbaik sebuah plugin Gradle adalah menggunakannya. Bukan sebuah unit test yang dimock. Bukan sebuah`GradleRunner`dengan sebuah proyek uji. Sebuah build <strong>nyata</strong> yang menerapkan plugin pada file yang nyata.</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>Jika plugin rusak, build root memberitahu. Tidak perlu pergi Mencari proyek pengujian eksternal. Dogfooding adalah <strong>pertama</strong>. Tugas yang diluncurkan oleh kontributor baru. Ini adalah smoke test muktamad.</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>Aturan ini sederhana: jika akar tersebut dikompilasi dan`./gradlew tasks` Menampilkan tugas plugin Anda, plugin berfungsi. Tidak ada kejutan. dalam produksi.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_kloning_tanpa_konfigurasi">2. Kloning Tanpa Konfigurasi</h3> <div class="paragraph"> <p>Un `git clone && ./gradlew tasks`dan orang baru melihat semuanya berjalan tanpa mengonfigurasi apa pun. Yang`build.gradle.kts`akar adalah dokumentasi hidup penggunaan plugin. Yang`site.yml`di samping menunjukkan konfigurasi yang diharapkan.</p> </div> <div class="paragraph"> <p>Bandingkan dengan alternatif: sebuah README dengan tiga paragraf yang jelaskan bagaimana builder plugin dan bagaimana builder proyek dari uji. Seorang kontributor baru membaca README secara diagonal, salah, membuka sebuah isu — padahal informasi tersebut mungkin adalah <strong>dapat dieksekusi</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>Documentation yang paling kuat bukan yang dibaca. Itu adalah yang kita<strong>Menjalankan</strong>. Build akar adalah dokumentasi file eksekusi plugin.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_3_builds_terisolasi_ci_mandiri">3. Builds terisolasi, CI mandiri</h3> <div class="paragraph"> <p>Plugin memiliki wrapper Gradle sendiri, siklus hidupnya sendiri, Tes-tes pribadinya. Anda dapat:</p> </div> <div class="ulist"> <ul> <li> <p>Mengupgrade Gradle di plugin tanpa menyentuh root</p> </li> <li> <p>Menambahkan dependensi di dalam plugin tanpa bocor ke root</p> </li> <li> <p>Menghancurkan plugin tanpa memengaruhi build dasar (selama Anda tidak</p> </li> </ul> </div> <div class="paragraph"> <p>jangan publikasikan versi yang rusak)</p> </div> <div class="ulist"> <ul> <li> <p>Memiliki sebuah CI yang membangun dan menguji plugin, dan yang lain yang menjalankan</p> </li> </ul> </div> <div class="paragraph"> <p>root — secara independen</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="_anatomi_dari_subdirektori_name_plugin">Anatomi dari Subdirektori `{name}-plugin/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mari kita lihat lebih dekat apa yang ada di folder plugin :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">codebase-plugin/ ├── gradlew ← wrapper indépendant ├── settings.gradle.kts ← @Suppress("UnstableApiUsage") │ + foobar-resolver-convention ├── build.gradle.kts ← java-gradle-plugin + signing + publish ├── gradle/ │ ├── libs.versions.toml ← catalogue complet (langchain4j, pgvector...) │ └── wrapper/ ├── buildSrc/ ← classes utilitaires buildSrc │ ├── build.gradle.kts │ └── src/main/kotlin/ │ ├── codebase/ ← CodebaseYmlAnonymizer, CodebaseConfiguration │ ├── benchmark/ ← BenchmarkConfig, BenchmarkProtocol │ ├── readme/ ← ReadmeYmlAnonymizer │ ├── site/ ← SiteYmlAnonymizer │ ├── slider/ ← SliderYmlAnonymizer │ └── snapshot/ ← SnapshotManager ├── src/ │ ├── main/kotlin/codebase/ │ │ ├── CodebasePlugin.kt ← class Plugin<Project> │ │ ├── rag/ ← pgvector, embedding, anonymization... │ │ ├── benchmark/ ← BenchmarkRunner, export, comparison... │ │ └── walker/ ← WorkspaceWalker │ └── test/ │ ├── kotlin/codebase/scenarios/ ← steps Cucumber │ ├── features/ ← .feature files │ └── resources/datasets/ ← fixtures .adoc, .yml, .json ├── .agents/ ← gouvernance agent (INDEX, SESSIONS, etc.) ├── AGENT.adoc ← règles agent ├── PROMPT_REPRISE.adoc ← mission session ├── BACKLOG.adoc ← backlog produit ├── snapshot.adoc ← snapshot auto-généré du projet └── embeds.yml ← config RAG embeds</code></pre> </div> </div> <div class="paragraph"> <p>Semua ada di sini. Tidak ada dispersi antara akar dan sub-direktori. Pengembang yang bekerja pada plugin tidak pernah membutuhkan meninggalkan`codebase-plugin/`. Pengembang yang menggunakan plugin hanya melihat akar — dan`build.gradle.kts`dari 3 baris Dia memberitahunya semua yang perlu diketahui.</p> </div> <div class="sect2"> <h3 id="_katalog_versi_dua_file_terpisah">Katalog Versi: Dua File Terpisah</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>(akar)</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">Jumlah dependensi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2-3 (plugin + readme opsional)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30+ (langchain4j, pgvector, cucumber…​)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">peran</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengonsumi plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bangun plugin</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Siapa yang membacanya?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengguna plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengembang plugin</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>root memiliki katalog yang secara sengaja minimal. plugin memiliki katalog Lengkap. Kebingungan tidak mungkin: setiap build memiliki ruang lingkupnya sendiri. ketergantungan.</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>Jika Anda telah menghabiskan satu jam untuk men-debug tabrakan dependensi antara plugin Anda dan proyek pengujian Anda, Anda memahami nilai dari ini pemisahan. Katalog independen menghilangkan masalah ini dari konstruksi.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_tidak_kita_lakukan">Apa yang tidak kita lakukan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pola ini bukan ajaib. Ia mengimpos sebuah batas yang saya mengakibatkan saya dengan sukarela:</p> </div> <div class="paragraph"> <p><strong>Root tidak membangun plugin.</strong> Anda harus`publishToMavenLocal` ou men-deploy pada repositori sebelum root dapat menggunakannya</p> </div> <div class="paragraph"> <p>Ini adalah biaya kecil, dan ini adalah kontrain yang <strong>baik</strong>. Root Menggunakan plugin sebagai klien eksternal — melalui Maven. Tepat seperti yang dilakukan oleh proyek pihak ketiga. Jika plugin tidak dapat dipublikasikan, root memberitahu Anda itu segera.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" data-lang="shell"># La seule "friction" du pattern $ cd codebase-plugin && ./gradlew publishToMavenLocal && cd .. $ ./gradlew tasks --group=codebase</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_perbandingan_tiga_arsitektur_terhadap_dogfooding">Perbandingan: Tiga Arsitektur Terhadap Dogfooding</h2> <div class="sectionbody"> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> <col style="width: 20%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Plugin terisolasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">repositori tunggal`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>Akar + plugin independen</strong></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`git clone && gradlew tasks`memberikan tugas plugin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Bangun plugin independen dari root</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Katalog versi terpisah</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">Tidak`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">Dogfood native tanpa konfigurasi</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">Terjemahkan teks berikut dari Prancis ke Indonesia, dengan menjaga semua rentang kode yang dikutip dengan backtick (<code>…​</code>) tanpa perubahan apa pun — isi, spasi, dan posisinya harus tetap utuh. Terjemahkan hanya fragmen yang diberikan tanpa menambah konteks. Keluarkan hanya hasil terjemahan, tanpa penjelasan, komentar, atau teks tambahan.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">CI plugin independen</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">(Empty)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Kolom kanan mencentang semua kotak. Itu sebabnya saya tidak Saya akan kembali lebih ke belakang.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kontrak_dag_build_akar_tidak_pernah_berasal_dari_subfolder">Kontrak DAG: Build akar tidak pernah berasal dari subfolder</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur ini terintegrasi secara alami dalam DAG N0→N3 dari workspace saya. Pola adalah: * plugin N2 adalah hub dari ketergantungannya sendiri, akar N3 adalah sebuah terminal yang menerapkan hubs*</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title Kontrak DAG — Konsumen Root vs Plugin Independen package "N3 — AKAR (setoran)" #FFCCCC { [build.gradle.kts (3 lignes)] as ROOT [libs.versions.toml (minimal)] as ROOT_TOML note right of ROOT plugins { bakery } bakery { configPath = ... } Aucune logique métier end note } package "N2 — {name}-plugin/" #CCFFCC { [build.gradle.kts (complet)] as PLUGIN [src/main/kotlin/] as SRC [gradle/libs.versions.toml] as PLUGIN_TOML [buildSrc/] as BUILDSRC note bottom of PLUGIN java-gradle-plugin signing + publish Tests unitaires + Cucumber CI dédiée end note } ROOT_TOML --> ROOT : "versi plugin" ROOT -down-> PLUGIN : "Publikasikan ke repositori Maven lokal" @enduml</pre> </div> </div> <div class="paragraph"> <p>Le <code>codebase-gradle/build.gradle.kts`buat 6 baris. Tidak ada`src/</code>, tidak ada`buildSrc/<code>, tidak ada`gradle/rag-bench.gradle.kts</code>. hanya <code>plugins { alias(libs.plugins.codebase) }`dan repositori. Semua kompleksitas berada di`codebase-plugin/</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_duplikasi_tampak_yang_menghemat_waktu">Conclusion : Duplikasi Tampak yang Menghemat Waktu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat saya menunjukkan struktur ini kepada seseorang, reaksi pertama sering : « Tapi kamu memiliki dua`gradlew`, dua`settings.gradle.kts`, dua`libs.versions.toml`— ini adalah duplikasi!</p> </div> <div class="paragraph"> <p>Ya. Dan tidak.</p> </div> <div class="paragraph"> <p>Duplikasi » berarti mereproduksi informasi yang sama di dua tempat. Di sini, ini adalah dua file <strong>distincts</strong> yang melayani dua kegunaan <strong>distincts</strong> : katalog plugin (30+ dependensi untuk builder) dan katalog dari akar (2-3 dependensi untuk dikonsumsi). wrapper plugin (versi terkunci untuk pengembangan) dan wrapper dari akar (versi yang berpotensi berbeda, untuk latihan plugin).</p> </div> <div class="paragraph"> <p>Bukan duplikasi. Ini <strong>pemisahan tanggung jawab</strong> diterapkan ke sistem build. Setiap build Melakukan satu hal, dan hanya satu. Akar mengkonsumsi. Plugin membangun.</p> </div> <div class="paragraph"> <p>Biaya? Satu pesanan`publishToMavenLocal`antara build plugin dan pembangunan akar. Keuntungan? Kejelasan arsitektur yang menghemat jam-jam waktu debugging di hilir</p> </div> <div class="paragraph"> <p>Sejak saya men-deploy pola ini di`bakery-gradle`, <code>plantuml-gradle</code>, <code>codebase-gradle</code>, dan plugins lain`foundry/public/<code>, saya tidak punya Tidak pernah lagi ragu ketika membuka terminal di salah satu repositori saya. Yang refleks pertama —</code>./gradlew tasks`— selalu berjalan, selalu memberi tugas yang baik, dan memberitahu saya secara instan jika semuanya sehat.</p> </div> <div class="paragraph"> <p>Ini dia, arsitektur yang baik. Dia tidak dapat dibaca dalam README. Dia diuji dalam terminal, dalam kurang dari sepuluh detik.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Bagian 0105 — Mengintegrasikan Graphify dalam alur kerja Gradle</p> </li> <li> <p>Artikel 0117 — Granularisasi OSS/CSS</p> </li> <li> <p><a href="0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html">Artikel 0123 — Knowledge Graph sebagai mesin rekomendasi</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html Tue, 12 May 2026 00:00:00 +0000 blog/2026/0123_knowledge_graph_moteur_recommandation_articles_connexes_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_panggung_selasa_12_mei_1730">Panggung: Selasa, 12 Mei, 17:30</a></li> <li><a href="#_diagnosa_tiga_jenis_hubungan_yang_tidak_terlihat_oleh_template">Diagnosa: Tiga Jenis Hubungan yang tidak terlihat oleh template</a></li> <li><a href="#_solusi_sebuah_pipeline_gradle_bukan_panggilan_llm_panas">Solusi : Sebuah Pipeline Gradle, Bukan Panggilan LLM Panas</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_bakery_mengimpor_graphify_bukan_engine">Arsitektur : Bakery Mengimpor Graphify, Bukan Engine</a></li> <li><a href="#_pipeline_scan_grafik_template">Pipeline: Scan → Grafik → Template</a></li> <li><a href="#_fallback_kronologis">Fallback Kronologis</a></li> </ul> </li> <li><a href="#_ontologi_yang_emergent_ketika_artikel_berkelompok_tanpa_saling_mengenal">Ontologi yang Emergent: Ketika Artikel Berkelompok Tanpa Saling Mengenal</a></li> <li><a href="#_kontrak_dag_siapa_yang_penting_bagi_siapa">Kontrak DAG: Siapa yang penting bagi siapa</a></li> <li><a href="#_apa_yang_kita_dapatkan_dan_apa_yang_kita_tidak_dapatkan">Apa yang Kita Dapatkan (Dan Apa yang Kita Tidak Dapatkan)</a></li> <li><a href="#_perspektif_blog_sebagai_knowledge_graph_publik">Perspektif: Blog sebagai Knowledge Graph Publik</a></li> <li><a href="#_kesimpulan_sistem_file_tahu_yang_template_abaikan">Kesimpulan: sistem file tahu yang template abaikan</a></li> <li><a href="#_referensi">referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 14 minutes</div> <p>Anda sedang membaca sebuah artikel tentang integrasi pgvector dengan LangChain4j. Di bagian bawah halaman, JBake Anda disarankan « Artikel terkait ». Anda mengklik. Ini adalah artikel tentang…​ konfigurasi. dari Kitty Terminal. Yang satu-satunya titik persamaan di antara keduanya? Mereka telah diterbitkan kurang dari Selisih sebelas hari. Ini bukan rekomendasi. Ini adalah kalender yang disamarkan sebagai editorial.</p> </div> </div> </div> <div class="sect1"> <h2 id="_panggung_selasa_12_mei_1730">Panggung: Selasa, 12 Mei, 17:30</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya membaca kembali salah satu artikel saya — <a href="0106_knowledge_graph_outil_compréhension_codebase_post.html">itu tentang Knowledge Graph sebagai alat untuk memahami codebase</a> Konten tersebut padat: node, edge, komunitas, PlantUML, onboarding. Sebuah artikel teknik membaca 15 menit yang menggerakkan`graphify-gradle`, <code>plantuml-gradle</code>, dan konsep topologi grafik.</p> </div> <div class="paragraph"> <p>Di bagian bawah halaman, artikel terkait menyarankan kepada saya:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Sebuah artikel tentang Firebase Contact Form (0113)</p> </li> <li> <p>Sebuah artikel tentang mekanisme Eager/Lazy (0108)</p> </li> <li> <p>Sebuah artikel tentang migrasi skrip Gradle ke plugin (0102)</p> </li> <li> <p>Sebuah artikel tentang akumulasi langganan Ollama Pro (0120)</p> </li> </ol> </div> <div class="paragraph"> <p>Tiga dari empat artikel ini tidak memiliki <strong>tidak ada</strong> hubungan dengan Knowledge Graph. Mereka ada karena mereka adalah yang terakhir dipublikasikan — kedekatan temporal, tidak lingkungan semantik</p> </div> <div class="paragraph"> <p>Saya melihat template`post.thyme`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml"><!-- Articles connexes (liens internes SEO) --> <th:block th:each="post,postStat : ${published_posts}"> <th:block th:if="${!post.uri.equals(content.uri) and postStat.index lt 4}"> ... </th:block> </th:block></code></pre> </div> </div> <div class="paragraph"> <p>`published_posts`adalah sebuah daftar kronologis.`postStat.index lt 4`mengambil empat pertama yang bukan post saat ini. Itu saja. Tidak ada logika de kemiripan. Tidak ada konsep konten. Hanya sebuah lingkaran`for`bersamaran sebagai rekomendasi.</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>Ini bukan bug dari JBake. Ini adalah perilaku default dari semua generator situs statis: daftar postingan datar dan diurutkan berdasarkan tanggal. Template melakukan apa yang dapat dilakukan dengan apa yang dimilikinya.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Tapi itu bukan alasan untuk menerimanya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_diagnosa_tiga_jenis_hubungan_yang_tidak_terlihat_oleh_template">Diagnosa: Tiga Jenis Hubungan yang tidak terlihat oleh template</h2> <div class="sectionbody"> <div class="paragraph"> <p>Korpus artikel saya — 23 posting dalam 4 bulan — memiliki struktur kaya yang template kronologis sepenuhnya mengalahkan :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Referensi eksplisit</strong> : saya menggunakan`xref:`secara masif dalam artikel-artikel saya.</p> </li> </ol> </div> <div class="paragraph"> <p>Artikel 0122 mereferensikan 0106 (knowledge graph) dan 0116 (kompartimentasi) epistemik). Ini adalah <strong>hard linking</strong> redaksi — saya sengaja memutuskan untuk menghubungkan konsep-konsep ini.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tag berbagi</strong> : setiap artikel memiliki beberapa`:jbake-tags:`. Artikel tentang</p> </li> </ol> </div> <div class="paragraph"> <p>Graphify + PlantUML (0105) memiliki`gradle, graphify, plantuml, knowledge-graph`. Artikel tentang Knowledge Graph (0106) memiliki <code>knowledge-graph, graphify, plantuml</code>. Tiga tag bersama dari tujuh — 43% kesamaan.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Co-occurring named entities</strong> : « pgvector », « RAG », « embedding</p> </li> </ol> </div> <div class="paragraph"> <p>muncul bersama dalam empat artikel yang berbeda. « LangChain4j », Ollama », « plugin Gradle » dalam enam lainnya. Bukan tag yang dideklarasikan — ini adalah <strong>pola muncul</strong> dari korpus yang hanya sebuah NLP dapat mendeteksi.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Tiga lapisan hubungan antara artikel package "Lapisan 1 — Referensi eksplisit" #CCFFCC { [Article A] as A1 [Article B] as B1 A1 -down-> B1 : xref: note right of A1 Liens durs Déterministes Déjà dans graph.json end note } package "Lapisan 2 — Tags dibagikan" #FFFFCC { [Article A] as A2 [Article C] as C2 A2 ..> C2 : tag_cooccurrence note right of A2 Poids = tags communs / tags totaux Déterministes À extraire via graphify end note } package "Lapisan 3 — Ontologi emergens" #FFCCCC { [Corpus A] as A3 [Corpus B] as B3 A3 ..> B3 : entity_overlap note right of A3 Clusters NLP Co-occurrences d'entités nommées TF-IDF / cosine similarity end note } @enduml</pre> </div> </div> <div class="paragraph"> <p>Hari ini, situs saya tidak menggunakan <strong>satu pun</strong> dari ketiga lapisan ini. Ia menggunakan lapisan nol: urutan pemasukan dalam daftar Java.</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_sebuah_pipeline_gradle_bukan_panggilan_llm_panas">Solusi : Sebuah Pipeline Gradle, Bukan Panggilan LLM Panas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Accuan pertama akan memanggil LLM saat proses bake: « Untuk artikel ini, menemukan tiga artikel yang paling serupa dalam korpus. Jangan lakukan itu.</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>Satu panggilan LLM untuk setiap`./gradlew bake`Memakan waktu, uang, dan Memperkenalkan non-determinisme dalam build Anda. Respons dari LLM bisa beralih antara dua build tanpa mengubah konten. CI Anda menjadi tidak dapat direproduksi, tes Anda menjadi tidak stabil.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Solusinya deterministik: sebuah pipeline Gradle yang pra-kalkulasi grafik. kesamaan dan menyimpannya di`graph.json`. template membaca hasil — dia tidak pernah memicu sebuah perhitungan.</p> </div> <div class="sect2"> <h3 id="_arsitektur_bakery_mengimpor_graphify_bukan_engine">Arsitektur : Bakery Mengimpor Graphify, Bukan Engine</h3> <div class="paragraph"> <p>Ini adalah titik arsitektur yang paling penting. Godaan akan menjadi mengkabel kolaborasi di`engine/build.gradle.kts`mesin mengaplikasikan graphify untuk pemindaian, bakery untuk memanggang, dan engine menjembatani antara kedua</p> </div> <div class="paragraph"> <p>Ini adalah anti-pola. Engine adalah <strong>terminal konsumen</strong> — menerapkan plugin, dia tidak mengimplementasikan logika bisnis. Aturan adalah : <strong>Beban bukti berada pada plugin bersifat proprietary.</strong></p> </div> <div class="listingblock"> <div class="title">Arsitektur yang tepat — Bakery mengimpor Graphify</div> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam packageBackgroundColor #FFF3CD title Bakery mengimpor Graphify — Engine tidak tahu apa-apa package "N3 — MESIN" #FFCCCC { [engine/build.gradle.kts] as ENG note right of ENG plugins { bakery } Zéro connaissance de graphify 4 tâches, ~150 lignes end note } package "N2 — BAKERY" #CCFFCC { [bakery-plugin] as BAK note right of BAK plugins { graphify } ← import interne Lit graph.json Résout articles connexes Expose le modèle à JBake end note } package "N0 — membuat grafik" #CCE5FF { [graphify-plugin] as GRF note right of GRF Scan workspace → graph.json Enrichi avec : - xref: edges - co-occurrences de tags - entités nommées (NLP) end note } ENG -down-> BAK : "plugins { bakery }" BAK -down-> GRF : "plugins { graphify } ← N2→N0 OK" @enduml</pre> </div> </div> <div class="paragraph"> <p>Kontrak DAG dipatuhi: bakery (N2) mengimpor graphify (N0), N2 > N0, tidak ada pelanggaran. Mesin (N3) mengimpor bakery (N2), N3 > N2, OK.</p> </div> <div class="paragraph"> <p>Engine tidak memiliki <strong>satu pun</strong> baris kode yang mereferensikan`graph.json`, <code>relatedPosts</code>, atau apa pun konsep kesamaan. Dia menerapkan bakery, titik. La kolaborasi adalah internal bakery</p> </div> </div> <div class="sect2"> <h3 id="_pipeline_scan_grafik_template">Pipeline: Scan → Grafik → Template</h3> <div class="paragraph"> <p>Ini adalah pipeline lengkap dalam tiga langkah:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Pemindaian</strong> (menggrafikan) :`graphify-plugin`memindai workspace. Di dalamnya</p> </li> </ol> </div> <div class="paragraph"> <p>bentuk saat ini, ia sudah mendeteksi`xref:`di antara`.adoc`dan menunjukkan di`graph.json`seperti edges jenis`reference`.<br> Kita melengkapinya untuk konten redaksi : Uraikan metadata JBake (<code>:jbake-tags:</code>, <code>:jbake-description:</code>) setiap`.adoc`blog * Menghitung ko-occurence tag → edges`tag_cooccurrence`dengan berat * Mengekstrak entitas bernama dari deskripsi melalui TF-IDF → tepi`entity_overlap` Menyuntikkan sebuah bagian`blog_articles`dalam`graph.json`yang ada<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// Extrait de l'enrichissement graphify pour le blog fun enrichBlogSection(graphJson: File, blogDir: File): GraphJson { val articles = blogDir.listFiles { f -> f.extension == "adoc" } .map { parseJbakeMetadata(it) } val nodes = articles.map { ArticleNode(it.slug, it.title, it.tags) } val edges = mutableListOf<GraphEdge>() // Couche 1 : xref (déjà fait par scanWorkspace) // Couche 2 : co-occurrences de tags for (a in articles) { for (b in articles) { if (a.slug == b.slug) continue val common = a.tags.intersect(b.tags) if (common.isNotEmpty()) { edges.add(GraphEdge( source = a.slug, target = b.slug, type = "tag_cooccurrence", weight = common.size.toDouble() / (a.tags.size + b.tags.size) )) } } } return graphJson.copy( blogArticles = BlogSection(nodes, edges) ) }</code></pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Bake</strong> (bakery) : pada saat`./gradlew bake`, `BakeryPlugin`tempat tidur</p> </li> </ol> </div> <div class="paragraph"> <p>`graph.json`dan menyelesaikan artikel terkait untuk setiap post<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// BakeryPlugin — résolution des articles connexes fun resolveRelatedPosts( currentSlug: String, graph: GraphJson, maxResults: Int = 4 ): List<RelatedPost> { val edges = graph.blogArticles.edges .filter { it.source == currentSlug || it.target == currentSlug } return edges .sortedByDescending { it.weight } .take(maxResults) .map { edge -> val relatedSlug = if (edge.source == currentSlug) edge.target else edge.source graph.blogArticles.nodes.first { it.slug == relatedSlug } } }</code></pre> </div> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Template</strong> (<code>post.thyme</code>) : model JBake sekarang menerima sebuah peta</p> </li> </ol> </div> <div class="paragraph"> <p>terstruktur alih-alih sebuah daftar kronologis yang datar<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xhtml hljs" data-lang="xhtml"><!-- Articles connexes basés sur le Knowledge Graph --> <th:block th:if="${relatedPosts != null and !relatedPosts.empty}"> <section class="mt-5 pt-4 border-top"> <h2 class="h4 mb-3">Articles connexes</h2> <th:block th:each="related : ${relatedPosts}"> <div class="mb-2"> <a th:href="${content.rootpath} + ${related.uri}" th:text="${related.title}" class="fw-semibold"></a> <br/> <small class="text-muted"> <th:block th:each="reason,iterStat : ${related.reasons}"> <span class="badge bg-light text-dark" th:text="${reason}"></span> </th:block> </small> </div> </th:block> </section> </th:block></code></pre> </div> </div> <div class="paragraph"> <p>Template-nya sama — dia tidak tahu <strong>dari mana</strong> data berasal. Hanya kontrak antara bakery dan JBake yang berubah:`published_posts`(daftar kronologis) menjadi`relatedPosts`(peta yang berbobot berdasarkan graf).</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>Lencana « alasan » (contoh:`xref 0122`, <code>tag:gradle</code>, <code>cluster:pgvector-rag</code>) jelaskan kepada pembaca <strong>mengapa</strong> artikel ini relevan. Bukan hanya transparansi — ini adalah pedagogi tentang topologi dari konten pribadi Anda ====</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_fallback_kronologis">Fallback Kronologis</h3> <div class="paragraph"> <p>Si `graph.json`tidak hadir (build lokal tanpa pemindaian sebelumnya, pertama penerapan, CI yang belum diintegrasikan pemindaian graphify), templat harus menurunkan dengan anggun:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun resolveRelatedPosts(currentSlug: String, graph: GraphJson?): List<RelatedPost> { if (graph != null && graph.blogArticles != null) { return resolveFromGraph(currentSlug, graph) } // Fallback chronologique — même comportement qu'aujourd'hui logger.warn("[bakery] graph.json absent — fallback chronologique") return resolveFromChronology(currentSlug) }</code></pre> </div> </div> <div class="paragraph"> <p>Perilaku default sama dengan perilaku saat ini. Le mesin rekomendasi adalah sebuah <strong>perbaikan progresif</strong> — bukan sebuah perubahan yang merusak.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ontologi_yang_emergent_ketika_artikel_berkelompok_tanpa_saling_mengenal">Ontologi yang Emergent: Ketika Artikel Berkelompok Tanpa Saling Mengenal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lapisan yang paling menarik adalah yang ketiga: ontologi emergente. Artikel yang tidak dikutip, yang tidak memiliki tag yang sama, tetapi yang <strong>berbicara tentang hal yang sama</strong> tanpa mengetahuinya.</p> </div> <div class="paragraph"> <p>Mari kita ambil contoh konkret. Tiga artikel dari korpus saya:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>0119 — Perbandingan DGX Spark vs Cloud Langganan LLM</p> </li> <li> <p>0121 — Plugin Gradle Mengendalikan Dua Instansi Ollama Pro</p> </li> <li> <p>0122 — Rasio Efisiensi 27x 45x Armada Ahli AI</p> </li> </ol> </div> <div class="paragraph"> <p>Ketiga artikel ini tidak memiliki <strong>aucun</strong> xref di antara mereka. Tag mereka tidak mereka hanya tumpang tindih hingga 20% (« ollama », « llm ») umum. Namun NLP ringan pada deskripsi menunjukkan klaster yang jelas: « biaya », « langganan », awaan », « GPU », « kunci API », « Ollama Pro », « efektivitas », « rasio</p> </div> <div class="paragraph"> <p>Mereka membentuk kluster ontologis : <strong>ekonomi LLM self-hosted vs cloud</strong>. Klaster ini tidak dideklarasikan di mana pun. Ia muncul dari korpus.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam packageBackgroundColor #E8F8F5 title Cluster Ontologique Émergent — "Ekonomi LLM Self-Hosted" package "Cluster terdeteksi : ekonomi-llm" #D5F5E3 { [0119 — Benchmark DGX Spark\nvs Cloud Abonnement] as A [0121 — Plugin Gradle Piloter\nDeux Instances Ollama Pro] as B [0122 — Ratio Efficacité\n27x 45x Flotte Experts] as C } A .. B : entity_overlap (0.73) B .. C : entity_overlap (0.81) A .. C : entity_overlap (0.68) note bottom of A Aucun xref entre ces articles. Tags communs : "ollama", "llm". Cluster découvert par NLP : co-occurrences "biaya", "GPU", "langganan", "Ollama Pro". end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Ini kluster ontologi menjadi sebuah edge komposit dalam`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 sengaja ringan — TF-IDF + cosine similarity pada deskripsi. Tidak perlu BERT, tidak perlu model bahasa. Corpus terdiri dari 23 artikel, matriks kemiripan muat dalam satu file JSON berukuran 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>Kekuatan NLP tidak berasal dari sofistikasi algoritme tapi dari <strong>ukuran korpus</strong> dan dari <strong>kualitas deskripsi</strong>. Se `:jbake-description:`ditulis dengan baik dari 150 karakter mengandung lebih dari sinyal untuk TF-IDF bahwa sebuah artikel penuh berjumlah 3000 kata.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_kontrak_dag_siapa_yang_penting_bagi_siapa">Kontrak DAG: Siapa yang penting bagi siapa</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah titik di mana disiplin arsitektur membayar. DAG N0→N3 ditentukan dalam`engine/build.gradle.kts`memberi sebuah aturan sederhana: Tidak ada proyek yang merupakan proyek tingkat lebih tinggi.</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 18.1818%;"> <col style="width: 27.2728%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Plugin Pengguna</th> <th class="tableblock halign-left valign-top">Plugin yang diimpor</th> <th class="tableblock halign-left valign-top">Tingkat konsumen</th> <th class="tableblock halign-left valign-top">Tingkat yang diimpor</th> <th class="tableblock halign-left valign-top">Sah?</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">bakery-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">graphify-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N0</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ N2 > N0 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">mesin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bakery-gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N3</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ N3 > N2 — OK</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">mesin</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">✅ Teknik OK, tetapi <strong>konseptual salah</strong> — kolaborasi internal pada bakery</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Engine menerapkan bakery. Bakery menerapkan graphify. Itu saja. Jika suatu hari saya ingin menambahkan vector store codebase (N1) untuk penelitian semantik cross-corpus, bakery juga mengimpornya. Engine tidak berubah.</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>Polanya adalah : <strong>plugin N2 adalah hub dari dependensi pribadinya</strong> Engine N3 bukan sebuah hub — ini adalah sebuah terminal yang menerapkan hub.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_kita_dapatkan_dan_apa_yang_kita_tidak_dapatkan">Apa yang Kita Dapatkan (Dan Apa yang Kita Tidak Dapatkan)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Keuntungan utama adalah editorial, bukan teknis:</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">sebelum</th> <th class="tableblock halign-left valign-top">Setelah</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Artikel terkait = 4 posting terakhir</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Artikel terkait = 4 teratas berdasarkan bobot dalam Knowledge Graph</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Membaca dari RAG → rekomendasi Kitty Terminal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembaca membaca RAG → rekomendasi pgvector, chunking, vector store</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada transparansi tentang mengapa</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Badge`xref 0122`, <code>tag:gradle</code>, `cluster:rag`terlihat</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake standar, nol usaha, nol nilai</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pipeline Gradle deterministik, dapat direproduksi, dapat diuji</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada kurva belajar untuk pembaca</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembaca menemukan <strong>topologi</strong> dari konten saya</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Apa yang <strong>tidak</strong> kita dapatkan:</p> </div> <div class="ulist"> <ul> <li> <p>Ini bukan mesin rekomendasi « sebenarnya » (tidak ada kolaboratif</p> </li> </ul> </div> <div class="paragraph"> <p>pemfilteran, tidak ada pengujian A/B, tidak ada loop umpan balik)</p> </div> <div class="ulist"> <ul> <li> <p>Kualitas tergantung pada kekayaan metadata JBake — jika Anda</p> </li> </ul> </div> <div class="paragraph"> <p>deskripsi kosong, TF-IDF tidak melihat apa-apa</p> </div> <div class="ulist"> <ul> <li> <p>NLP offline — artikel baru hanya kluster di</p> </li> </ul> </div> <div class="paragraph"> <p>scan berikutnya (ini bagus: build tetap deterministik)</p> </div> </div> </div> <div class="sect1"> <h2 id="_perspektif_blog_sebagai_knowledge_graph_publik">Perspektif: Blog sebagai Knowledge Graph Publik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fitur ini membuka perspektif yang lebih luas: dan jika`cheroliv.com` menjadi dirinya sendiri sebuah <strong>knowledge graph navigable</strong> ?</p> </div> <div class="paragraph"> <p>Artikel adalah node. Tag adalah komunitas. xref adalah tepi. Pembaca tidak lagi membaca artikel yang terisolasi — ia menavigasi di dalam <strong>graf pengetahuan</strong> yang artikel saat ini adalah titik masuk.</p> </div> <div class="paragraph"> <p>Bayangkan sebuah halaman utama yang menampilkan bukan daftar kronologis dari postingan terbaru, tetapi sebuah <strong>peta corpus</strong> : kluster ontologis, artikel pivot (yang memiliki banyak sisi), jalur bacaan disarankan (« Jika Anda menyukai artikel tentang Graphify, baca selanjutnya itu tentang Knowledge Graph sebagai alat pemahaman</p> </div> <div class="paragraph"> <p>Ini bukan lagi sebuah blog. Ini sebuah <strong>atlas semantik</strong>.</p> </div> <div class="paragraph"> <p>Dan ini bukan science fiction. Yang`graph.json`sudah ada. Dia hanya memerlukan antarmuka navigasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_sistem_file_tahu_yang_template_abaikan">Kesimpulan: sistem file tahu yang template abaikan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Apa yang saya rancang pada malam Selasa ini adalah penggantian sebuah heuristik malas (urutan kronologis) oleh representasi akurat dari struktur korpus saya (Knowledge Graph).</p> </div> <div class="paragraph"> <p>template`post.thyme`tidak berubah. Yang berubah adalah apa yang kita Memberinya makan. Sebelumnya: sebuah daftar Java yang diurutkan berdasarkan`date`.Setelah : graf berbobot yang berasal dari tiga lapisan analisis — xrefs, co-occurrences tag, dan ontologi yang muncul melalui NLP.</p> </div> <div class="paragraph"> <p>Lingkaran sudah selesai. graphify memindai workspace. Bakery membaca le Graf memberi makan template. Pembaca melihat rekomendasi. Dan engine — maestro — bahkan tidak tahu bahwa semua ini ada.</p> </div> <div class="paragraph"> <p>Ini adalah arsitektur yang baik. Setiap plugin melakukan satu hal. Dan terminal konsumen tidak perlu mengetahui caranya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0105_integrer_graphify_workflow_gradle_post.html">Article 0105 — Mengintegrasikan Graphify dalam alur kerja Gradle</a></p> </li> <li> <p><a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">Pasal 0106 — Knowledge Graph sebagai alat pemahaman</a></p> </li> <li> <p>Artikel 0117 — Granularisasi OSS/CSS</p> </li> <li> <p><a href="0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html">Artikel 0121 — Plugin Gradle Mengendalikan Dua Instansi Ollama Pro</a></p> </li> <li> <p>Article 0122 — 27× hingga 45× lebih efektif : armada ahli IA</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html Mon, 11 May 2026 00:00:00 +0000 blog/2026/0122_ratio_efficacite_27x_45x_flotte_experts_ia_vs_claude_gpt_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_mengapa_fine_tune_dan_bukan_rag">Masalah: mengapa fine-tune dan bukan RAG?</a></li> <li><a href="#_ide_sebuah_armada_ahli_bukan_hanya_satu_model">Ide: sebuah armada ahli, bukan hanya satu model</a></li> <li><a href="#_codebase_di_bawah_lupa_7_900_file_144_000_baris">Codebase di bawah lupa: 7 900 file, 144 000 baris</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 22 minutes</div> <p>Ketika seseorang menggunakan LLM untuk pengembangan perangkat lunak sehari-hari, ia akhirnya selalu menabrak dinding yang sama: model tidak tahu <strong>Anda</strong> codebase. Dia tidak tahu bahwa Anda menggunakan pola seperti ituhttps://fr.wikipedia.org/wiki/Graphe_orient%C3%A9_acyclique[DAG], seperti konvensi Gradle, seperti stratifikasi epistemik dalam Andahttps://fr.wikipedia.org/wiki/AsciiDoc[.adoc]. Lalu kita menyuntikkan konteks kepadanya, kita mengulang, kita memperbaiki, kita mengiterasi. Dan waktu — dan uang — berlalu.</p> </div> <div class="paragraph"> <p>Saya lalu menanyakan secara tajam: berapa biaya tim model yang fine-tuned di workspace saya, yang mampu mengeluarkan kode <strong>di gaya saya</strong> tanpa perlu menjelaskan kepada mereka setiap kali? Dan terutama: bagaimana pendekatan ini membandingkan dengan solusi proprietari klasik — Claude, GPT, Gemini, Grok?</p> </div> <div class="paragraph"> <p>Jawaban itu membuat saya terkejut. Sangat kurang dari yang saya bayangkan. Dan perbandingan biaya/efektivitas dengan para raksasa sektor itu tidak patut. Berikut detail lengkapnya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_mengapa_fine_tune_dan_bukan_rag">Masalah: mengapa fine-tune dan bukan RAG?</h2> <div class="sectionbody"> <div class="paragraph"> <p>RAG, itu bagus. <a href="0106_knowledge_graph_outil_comprehension_codebase_post.html">knowledge graph saya</a> dan <a href="0116_compartimentage_epistemique_automatise_llm_post.html">kompartemen epistemik saya</a> berfungsi. Namun RAG memiliki kelemahan dasar: pada setiap permintaan, Anda harus menyuntikan kembali konteks yang relevan. Prompt Anda menjadi lebih panjang, latensi Anda meledak, dan model tidak pernah <strong>meminternalisasi</strong> pola Anda — ia membacanya setiap kali seperti dokumen eksternal.</p> </div> <div class="paragraph"> <p>Fine-tune, itu adalah otot memori. Model <strong>tahu</strong> bahwa kamu menulis`build.gradle.kts`dengan tugas yang tercatat melalui`tasks.register`, yang kamu`AGENTS.adoc`Mereka mengikuti sintaksis standar, bahwa workspace Anda terstruktur menjadi boroughs. Dia tidak perlu dikingatkan.</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>Fine-tune bukan pengganti RAG. Ini adalah lapisan tambahan. RAG tetap relevan untuk data yang sering berubah (log, tiket, commit terbaru). Fine-tune digunakan untuk pengetahuan <strong>struktur</strong> dan <strong>gaya</strong> jangka panjang.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ide_sebuah_armada_ahli_bukan_hanya_satu_model">Ide: sebuah armada ahli, bukan hanya satu model</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hanya satu model yang fine-tuned di seluruh workspace saya sudah cukup baik. Tapi itu tidak optimal. Workspace saya mencakup bidang yang sangat berbeda :</p> </div> <div class="ulist"> <ul> <li> <p>Gradle plugin (Kotlin, konvensi plugin, komposit build)</p> </li> <li> <p>Mesin DAG (Kotlin, penjadwalan, eksekusi)</p> </li> <li> <p>Agen LLM (Python, LangChain4j, RAG)</p> </li> <li> <p>Dokumentasi arsitektur (AsciiDoc, tata kelola)</p> </li> <li> <p>Infrastuktur/DevOps (Docker, GitHub Actions, CI/CD)</p> </li> </ul> </div> <div class="paragraph"> <p>Satu model tunggal seharusnya baik di mana-mana, tetapi tidak hebat di mana pun. Solusi? Sebuah<strong>armada model khusus</strong>, dengan sebuah orchestrator yang mengarahkan setiap permintaan ke ahli yang tepat.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FAFAFA skinparam defaultFontSize 13 package "Ollama Cloud" { rectangle "DeepSeek V4-Pro 1.6T / 49B aset" as V4Pro #FF6B6B rectangle "6× V4-Flash-FT 292B / 13B aset" as Flash #4ECDC4 rectangle "6× Gemma4 26B-FT\n26B / 3.8B aktif" as Gemma #FFE66D rectangle "5× Qwen3.6 35B-FT 35B / 3B aktif" as Qwen36 #A8E6CF rectangle "5× Qwen3.5 35B-FT 35B / 3B aktif" 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 --> V4Pro : Requête V4Pro --> Flash : "tugas Gradle kompleks" V4Pro --> Gemma : "pemformatan AsciiDoc" V4Pro --> Qwen36 : "refaktorisasi Kotlin" V4Pro --> Qwen35 : "skrip Bash" 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>Total armada :<strong>1 orkestrator + 22 ahli = 23 model</strong>. Dan berapa biaya inferensi bulanan?<strong>17€/bulan</strong>langganan Ollama Pro tahunan — dapat diperluas dengan menggabungkan akun jika kuota melebihi batas, seperti yang ditunjukkan dalam <a href="0120_cumuler_deux_abonnements_ollama_pro_docker_post.html">metode Docker multi-akun saya</a>. Kami mulai dari 17€, menambahkan 20€ per tingkat sesuai kebutuhan nyata. Tidak ada pemborosan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_codebase_di_bawah_lupa_7_900_file_144_000_baris">Codebase di bawah lupa: 7 900 file, 144 000 baris</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum memperkirakan biaya pelatihan, Anda perlu tahu apa yang akan dilatih. Saya telah melakukan audit ruang kerja saya dengan mengecualikan secara ketat semua yang diabaikan oleh Git:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- build/ out/ node_modules/ runtimes/ .gradle/ dist/ target/ venv/ __pycache__/ .cache/ .tox/ ---- Berikut hasilnya untuk file yang terlacak saja : [cols="2,2"] |=== |metrik |Nilai |File sumber yang dilacak |**7 896** |Baris kode (LOC) |**143 805** |Repositori Git |**26** |Bahasa Utama |Kotlin (1 903), AsciiDoc (2 765), Python (5 029) |=== [IMPORTANT] ==== 5 000+ file-file Python ini meliputi`runtimes/`buku catatan dan skrip utilitas. Inti aplikasi (plugins Gradle, mesin DAG, agen) adalah terutama dalam Kotlin dan AsciiDoc. ==== Dari massa ini, saya memperkirakan saya dapat menghasilkan dataset sintetis dari**~170 juta token**via LLM instruktur (distilasi basis kode menjadi pasangan instruksi/respons). === Detail dataset menurut tipe ahli [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 ---- == Pemilihan model: 100% MoE, 0% padat Inilah tempat arsitektur menjadi sangat efisien. Sebuah model *dense* mengaktifkan seluruh bobotnya pada setiap token. Sebuah model *MoE* (Mixture of Experts) hanya mengaktifkan sebagian dari parameter-nya. Biaya inferensi — dan fine-tuning — bersifat proporsional terhadap parameter.**diaktifkan**, bukan untuk parameter**tersimpan**. Mari kita lihat apa yang ditawarkan oleh pasar dalam MoE hari ini di Ollama Cloud : [cols="3,2,2,1,3"] |=== |Model |Total parameter |diaktifkan |Aktivasi |Ollama Cloud |DeepSeek V4-Pro |1.6T |49B |3.1% |✅ asli |DeepSeek V4-Flash |292B |13B |4.5% |✅ asli |Gemma 4 26B-A4B |26B |3,8 miliar |14.6% |✅ asli |Qwen3.6-35B-A3B |35B |3B |8.6% |❌ (belum terintegrasi) |Qwen3.5-35B-A3B |35B |3B |8.6% |✅ asli |❌ Qwen3.5-27B |27B |27B |100% padat |dihilangkan |❌ Qwen3.5-4B/9B |4B/9B |4B/9B |100% padat |dihapuskan |❌ Gemma 4 31B |31B |31B |100% padat |tereliminasi |🧪 Gemma 4 E2B/E4B |5B/8B |5B/8B |100% tebal |pipeline validasi |=== [CAUTION] ==== Rasio aktivasi adalah kriteria diskriminan. Gemma 4 26B-A4B hanya mengaktifkan 3.8B dari 26B parameternya — yaitu 7× lebih sedikit daripada model dense 27B, untuk performa agen coding yang dapat dibandingkan (77.1% vs 80% pada LiveCodeBench v6). ==== === Mengapa saya meninggalkan model-model padat Pengecualian: Gemma 4 E2B dan E4B. Kedua model ini, berlisensi Apache 2.0, sangat cocok untuk menguji dan memvalidasikan pipeline pelatihan dengan biaya rendah. Sebuah run 2-3 jam pada E2B membiayai kurang dari $5 — jika dataset atau hyperparameter-nya bermasalah, kita tahu dengan hanya beberapa dolar. Setelah pipeline selesai disiapkan, mereka bahkan dapat digunakan untuk tugas ultra-mikro (reformatting trivial, klasifikasi biner). Namun untuk ahli di armada utama, saya tetap menggunakan MoE. Inilah mengapa : .Tapi bukan hanya itu: Gemma 4 E2B/E4B, ahli anonimisasi halus [NOTE] ==== Google telah merancang model-model kecil ini agar kompetitif dalam pemanggilan alat asli — mereka tahu memanggil fungsi, memanipulasi regex, mencari pola. Setelah di-fine-tuning pada contoh anonymisasi (email, token, UUID, jalur file), mereka menjadi**penganonim dataset**ultra-cepat. Kami memberi mereka blok teks mentah, mereka memanggil`sed`(blank)`regex`via panggilan tool dan mengembalikan blok yang telah dibersihkan. Biaya inferensial sangat kecil: 5B diaktifkan, hal ini dapat dijalankan pada satu GPU kelas menengah. Model-model ini bukanlah ahli bisnis — mereka adalah**pekerja terlatih**dalam rantai produksi dataset. ==== * VRAM pelatihannya (bahkan dalam QLoRA) adalah proporsional dengan**27B total** * Waktu pelatihan-nya sebanding dengan**27B diaktifkan** Mari kita bandingkan dengan Qwen3.6-35B-A3B (MoE) : [cols="3,2,2,2"] |=== | |Qwen3.5-27B (dense) |Qwen3.6-35B-A3B (MoE) |rasio |VRAM QLoRA |~55 GB |~35 GB |1.6× |jam GPU (8M token) |sekitar 12 jam |~4 jam |**3 kali** |Biaya per fine-tune |~$24 |~$8 |**3×** |SWE-bench Terverifikasi |75.0% |73.4% |serupa |=== MoE membutuhkan 3× lebih sedikit untuk dilatih demi performa agent-coding dengan selisih sekitar 5%. Pada 22 ahli, selisihnya tercatat dalam ribuan euro. == Estimasi pelatihan : 811 H100-jam Saya telah merinci biaya pelatihan model per model, dalam QLoRA 4-bit, dengan dataset yang dijelaskan di atas. === Micro-experts MoE ringan (3-3.8B diaktifkan) Model-model ini membutuhkan 1 H100 (80 GB) per run. VRAM model dalam Q4 sekitar 13-18 GB, meninggalkan ruang yang cukup untuk keadaan optimizer LoRA dan aktivasi. [cols="4,2,3,2"] |=== |Model |Jumlah runs |jam GPU/run |Total GPU-j |Gemma 4 26B-A4B-FT |6 |3.5 h |**21 jam** |Qwen3.6-35B-A3B-FT |5 |4.0 h |**20 jam** |Qwen3.5-35B-A3B-FT |5 |4.0 h |**20 jam** |Subtotal micro | | |*61 h* |=== === Eksekutif V4-Flash (13B diaktifkan / 292B tersimpan) DeepSeek V4-Flash adalah kasus khusus. Meski hanya 13B yang diaktifkan per token, model lengkap dalam Q4 berukuran ~142 GB — semua ahli harus berada di VRAM selama pelatihan. Oleh karena itu,**3× H100**dengan run agar nyaman [cols="4,2,3,3,2"] |=== |Model |Kumpulan data |GPUs |Jam |Total GPU-jam |V4-Flash-Base umum |50M token |3 kali H100 |50 h |**150 jam** |V4-Flash ahli ×5 |15M tok |3 kali H100 |40 h |**600 jam** |*Subtotal eksekutif* | | | |*750 h* |=== [cols="3,2,1"] |=== |**JUMLAH** | |**811 H100-h** |=== [NOTE] ==== Sebagai perbandingan, full fine-tune V4-Flash (tanpa QLoRA, semua bobot) akan membutuhkan sekitar 4.000 jam H100 hanya untuk 6 model. QLoRA membagi biaya dengan 5. Ini adalah satu-satunya cara untuk membuat proyek tersebut secara ekonomis dapat dijalankan dalam skala ini. ==== === Tarif GPU: siapa yang menyewa apa di Mei 2026 Saya telah melakukan benchmarking pada penyedia utama H100. Harga per meter, untuk 811 jam. [cols="3,2,2,2"] |=== |pemilik |$/H100·h |Total 811jam |Keandalan |**Vast.ai tempat** |$1.60 |**$1 298** |★★☆ dapat diinterupsi |**Crusoe Awan** |$2.00 |**$1 622** |★★★★ datacenter andalan |FluidStack |$1.98 |$1 606 |(empty) |TensorDock |$1.80 |$1 460 |★★☆ |RunPod |$2.29 |$1 857 |kompromi yang baik |CoreWeave |$2.25 |$1 825 |★★★★ perusahaan |Lambda Labs |$2.49 |$2 019 |★★★★ premium |=== [TIP] ==== Vast.ai spot adalah yang termurah tetapi run kamu dapat terhenti kapan saja. Untuk pelatihan, ini berisiko. Crusoe seharga $2,00/jam memiliki rasio keandalan/harga terbaik. Biaya tambahan sebesar $324 dibandingkan Vast layak untuk ketenangan pikiran. ==== === Wall-clock: Berapa lama untuk melatih semuanya? Dengan satu node 3× H100, 31 run (1 umum + 30 ahli) memerlukan sekitar**12 hari**Secara berurutan. Jika kamu menyewa 2 node secara paralel, ia turun menjadi**6 hari**. Dalam praktik, micro-experts dapat berjalan pada node terpisah (1 H100 masing-masing) sementara V4-Flash mengisi node 3× H100. Dengan perencanaan yang cerdas: ---- 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 hari sewa, semuanya lipat. == Inferensi: 23 model di Ollama Cloud mulai dari 17€/bulan Ini bagian paling elegan dari arsitektur. Ollama Cloud memungkinkan mengunggah model pribadi (fungsi rencana Pro). 22 model fine-tuned saya telah dipush ke`.gguf`di ruang Ollama saya, ditandai sebagai pribadi, dan dapat diakses melalui API standar. [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 ---- === Kami mulai dengan 17€/bulan, kami melakukan scaling jika diperlukan. Paket Pro Ollama (17€/bulan secara tahunan) mengizinkan 3 model cloud bersaing. Dalam arsitektur ini, saya tidak pernah membutuhkan lebih dari 2-3 ahli secara bersamaan: * Tahap klasifikasi (V4-Pro) mengisi 1 slot, beberapa detik * Ahli yang ditargetkan menempati 1 slot, waktu untuk menghasilkan responsnya. * Slot ke-3 tetap cadang untuk tugas paralel Jika penggunaan meningkat, saya menambahkan akun Pro tambahan melalui metode Docker yang dijelaskan dalam xref:0120_cumuler_deux_abonnements_ollama_pro_docker_post.adoc[artikel saya tentang penggabungan langganan]. Tidak ada rencana Max seharga 100€/bulan — saya hanya menambahkan apa yang saya benar-benar butuh. Satu-satunya faktor yang membatasi adalah**kuota waktu GPU**bulanan Ollama (50× rencana gratis untuk Pro). Untuk penggunaan saya beberapa ratus permintaan per hari, ini cukup. [IMPORTANT] ==== Biaya marginal dari sebuah panggilan ke V4-Pro (49B aktif) vs Gemma 4 26B-A4B (3.8B aktif) adalah**Bahkan bagi saya : nol**. Paket Ollama adalah yang menyerap perbedaan komputasi. Satu-satunya indikator saya adalah latensi. ==== === Routing dalam praktik</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>Massa lalu lintas melewati jalan kecil. Model besar hanya berintervensi sebagai pilihan terakhir. == Perbandingan yang menyakitkan : Claude, GPT, Gemini, Grok vs armada saya Inilah tempat di mana selisih menjadi sangat besar. Mari kita lihat berapa biaya yang akan dibutuhkan untuk volume kerja yang sama (500 permintaan/hari, ~300 token input + 2 000 token output rata-rata) dengan solusi proprietari pasar pada Mei 2026. === Anthropic — Claude (biaya Mei 2026) Anthropic baru-baru ini menurunkan harga-nya. Tekanan dari solusi open-weight seperti DeepSeek dan Qwen terasa. [cols="3,2,2,2,2"] |=== |Model |$/MTok |Keluaran $/MTok |Biaya/hari |**Biaya per bulan** |Opus 4.7 (yang paling cerdas) |$5 |$25 |$25.75 |**$772** |Sonnet 4.6 (seimbang) |$3 |$15 |$15.45 |**$463** |Haiku 4.5 (paling cepat) |$1 |$5 |$5.15 |**$154** |=== [CAUTION] ==== Tarif ini adalah *setelah* penurunan harga terakhir Anthropic (Mei 2026). Sebelum itu, Opus berada pada $15/$75 per MTok. Khawatir terhadap open-weight itu nyata. ==== Meski model termurah Claude — Haiku 4.5 ke**154€/bulan**— biaya 9× lebih daripada langganan Ollama Pro saya seharga 17€. Dan Haiku tidak mengenal codebase saya, tidak menghasilkan dalam gaya saya, dan memerlukan teknik prompt yang sistematis. Yang paling cerdas — Opus 4.7 — meledakkan anggaran pada**772€/bulan**untuk volume modeste 500 permintaan per hari. Atau**45 kali lebih mahal**apa solusi saya. === OpenAI — GPT (tarif Mei 2026) [cols="3,2,2,2,2"] |=== |Model |$/MTok |$/MTok |Biaya/hari |**Biaya per bulan** |GPT 5.5 (yang paling cerdas) |$5 |$30 |$30.90 |**$927** |GPT 5.4 (standar) |$2.50 |$15 |$15.45 |**$463** |GPT 5.4 Mini |$0.75 |$4.50 |$4.64 |**$139** |=== Bahkan model « ekonomi » OpenAI — GPT 5.4 Mini seharga 139€/bulan — membayar 8× langganan saya, untuk model yang *tidak tahu* tentang konvensi saya dan memerlukan prompt engineering yang berat. GPT 5.5, produk unggulan mereka :**927€/bulan**. Untuk *zero-shot* pada codebase saya. Dengan 2-3 iterasi per tugas karena gaya tidak dikuasai, biaya sebenarnya per bulan mudah menglipat ganda. === Google — Gemini (tarif Mei 2026) [cols="3,2,2,2,2"] |=== |model |$/MTok |$/MTok |Biaya/hari |**Biaya/bulan** |Gemini 3.1 Pro (Tinggi) |$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 seharga 46€/bulan adalah kompetitif dalam harga murni — tetapi tanpa fine-tune, ia menghasilkan kode « generik ». Bukan kode *Cheroliv*. === Grok — xAI (tarif Mei 2026) [cols="3,2,2,2,2"] |=== |model |$/MTok |$/MTok |Biaya per hari |**Biaya/bulan** |Grok 4 |$4 |$16 |$16.48 |**$494** |Grok 4 Mini |$0.80 |$3.20 |$3.30 |**$99** |=== === Microsoft — Azure OpenAI (tarif Mei 2026) Azure menerapkan harga yang sama seperti API OpenAI langsung, tetapi juga menagih biaya infrastruktur dan jaringan. Harus memperhitungkan biaya tambahan sebesar 10-20% untuk layanan terkelola. [cols="3,2,2,2,2"] |=== |model |$/MTok |Output $/MTok |Biaya/hari |**Biaya/bulan** |GPT 5.4 (Azure, Global) |$2.50 |$15 |$15.45 |**$463** |GPT 5.4 + infrastruktur |biaya tambahan 15% |biaya tambahan 15% |$17.77 |**$533** |=== [NOTE] ==== Tarif di atas berlaku untuk API, bukan untuk langganan « chat » (Claude Pro seharga $20/bulan, ChatGPT Plus seharga $20/bulan). Di sini dibandingkan penggunaan *pengembang*, di mana kamu menjalankan ratusan permintaan per hari melalui API untuk menghasilkan, merefaktor, mendokumentasi. Langganan untuk umum memiliki kuota yang melebihi jauh sebelum 500 permintaan per hari. ==== === Tabel perbandingan akhir [cols="3,2,2,2,2,2"] |=== |Solusi |pengetahuan codebase |Gaya terintegrasi |Biaya/bulan |Iterasi |**Biaya efektif** |**Armada saya (Ollama Pro)** |✅ Disetel halus |dalam berat |**17€** |0-1 |**17 euro** |Claude Opus 4.7 |❌ Nol contoh |❌ Prompt yang diperlukan |$772 |2-3 |$1 500-2 300 |Claude Haiku 4.5 |❌ Zero-shot |❌ Prompt yang diperlukan |$154 |3-4 |$460-615 |GPT 5.5 |❌ Zero-shot |❌ Prompt yang diperlukan |$927 |2-3 |$1 854-2 781 |GPT 5.4 |Zero-shot |❌ Prompt yang diperlukan |$463 |2-3 |$925-1 390 |GPT 5.4 Mini |❌ Zero-shot |Prompt yang diperlukan |$139 |3-5 |$417-695 |Gemini 3.1 Pro Tinggi |❌ Zero-shot |❌ Prompt yang diperlukan |$540 |2-3 |$1 080-1 620 |Grok 4 |❌ Zero-shot |❌ Prompt diperlukan |$494 |2-3 |$988-1 482 |**Azure GPT 5.4** |nol-pembelajaran |❌ Prompt yang diperlukan |$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 Laporan biaya/keefektifan — armada saya vs pasar (Mei 2026) rectangle "17€/bulan" as OURS #4ECDC4 rectangle "Opus 4.7\n772€" as OPUS #FF6B6B rectangle "Sonnet 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\n154€" 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€/bulan untuk 23 pakar IA yang fine-tuned. Produk flagship Claude Opus 4.7 berbiaya**45× lebih mahal**untuk kualitas yang lebih rendah pada *saya* codebase. GPT 5.5 berbiaya**54× lebih mahal**. Bahkan model termurah di pasar (Gemini Flash seharga 46€) masih berbiaya**2.7× lebih**tanpa pengetahuan tentang ruang kerja saya. Verdict itu tanpa banding: fine-tuning pada arsitektur MoE, pada 2026, bukan hanya « lebih murah ». Ini adalah faktor efisiensi dari**27× hingga 54×**terkait rasio biaya/kualitas dibanding solusi proprietari. Anthropic, OpenAI, Google — semua mengetahui hal itu, dan itu sebabnya mereka menurunkan harga mereka dalam panik. == Faktor efisiensi : 5-8× vs menggunakan V4-Pro saja Mari kita bandingkan kedua ekstrem. === Skenario A : V4-Pro saja untuk semua [cols="3,2"] |=== |Metrik |Nilai |Pengetahuan tentang codebase |0 (zero-shot) |Penamaan konvensi |40-60% benar pada percobaan pertama |Prompt engineering diperlukan |Ya, sistematik |Iterasi per tugas |2-3 |Biaya inferensi |$100/bulan (Ollama Max) |Latensi rata-rata |~20 tok/s + jaringan |=== === Skenario B : Armada MoE yang terkoordinasi [cols="3,2"] |=== |Metrik |nilai |Pengetahuan tentang codebase |Terintegrasi (fine-tune) |konvensi penamaan |90-95% tembakan pertama benar |Rekayasa Prompt |Tidak (gaya ada dalam bobot) |Iterasi per tugas |0-1 |Biaya inferensi |$60/bulan (3× Ollama Pro) |latensi rata-rata |~50 tok/s (model ringan) |=== [cols="4,2,2,2"] |=== |Dimensi |hanya V4-Pro |Armada MoE |faktor |Biaya bulanan cloud |$100 |**$60** |1.7× |Konteks untuk disuntikkan |Tinggi (prompt) |**nol** |∞ |Iterasi rata-rata |2-3 |**0-1** |2-3× |Latensi yang dirasakan |20 tok/s |50 tok/s |**2.5×** |First-shot correct |50% |90%+ |**1.8×** |=== **Faktor efisiensi global : 5-8×**— dalam produktivitas pengembang yang dirasakan. [NOTE] ==== Faktor tidak diukur dalam token atau dalam dolar. Ia diukur dalam «berapa banyak waktu yang saya habiskan untuk menjelaskan kepada model hal yang seharusnya sudah diketahui». Dengan model yang fine-tuned, waktu tersebut cenderung menuju nol. ==== == Anggaran lengkap : sebuah investasi one-shot, sebuah paket konyol [cols="3,2"] |=== |jabatan |Jumlah |Pelatihan GPU (811 H100-h, Crusoe $2/jam) |**$1 622** |Pembuatan dataset sintetis (API LLM) |**$400** |Inference (Ollama Pro tahunan, $17/bulan) |**$204** |**Total tahun pertama** |**$2 226** |**Setara bulanan** |**$186** |**Biaya per permintaan yang diperkirakan** |< $0.01 |=== [plantuml, budget-breakdown, svg]</pre> </div> </div> <div class="paragraph"> <p>@startuml skinparam backgroundColor #FAFAFA</p> </div> <div class="paragraph"> <p>rectangle "Anggaran Tahun 1: $2 226" as Total #E8E8E8 { rectangle "Pelatihan GPU $1 622 (73%)" as Train #FF6B6B rectangle "Set data distilasi $400 (18%)" as Data #FFE66D rectangle "Ollama Pro\n$204 (9%)" as Cloud #4ECDC4 }</p> </div> <div class="paragraph"> <p>note bottom of Total $186/mois équivalent année 1. Dès l’an 2 : $17/mois. Amorti par ~$235 de CA mensuel avec marge 95%. end note</p> </div> <div class="paragraph"> <p>@enduml</p> </div> <div class="listingblock"> <div class="content"> <pre>$186/bulan tahun pertama,**$17/bulan**sejak tahun 2. Harga langganan Netflix premium, untuk sebuah tim dari 23 ahli AI yang tersedia 24/7, yang menulis kode *gaya saya* tanpa saya perlu menjelaskan konvensi saya kepada mereka. === Perhitungan rentabilitas Dengan edster.cloud dan margin ~95%, titik impas berada di**~$2 340 CA tambahan**pada tahun. Dalam praktik: * 1 misi piloting software → $3 000-5 000 → investasi tertutup + keuntungan * 1 pelatihan korporat → $5 000-10 000 → nyaman * Upsell implisit : "tim AI saya menguasai pabrik perangkat lunak saya" → diferensiasi komersial Mulai tahun 2, pelatihan tidak lagi perlu dibayar (kecuali pembaruan dataset). Biaya tahunan menurun hingga**$204**($17/bulan). Rasio biaya/nilai adalah seperti seekor unicorn : hampir nol. == batas latihan *perkiraan kasar*. Beberapa variabel dapat mempengaruhi anggaran : [cols="2,3"] |=== |variabel |Dampak |Pembuatan dataset sintetis |Jika API distilasi jelek (halusinasi, pasangan mal terbentuk), diperlukan waktu manusia untuk mengkurasi. Biaya tersembunyi. |Kuota waktu GPU Ollama |Jika penggunaan melebihi kuota paket Pro, akan perlu mengupgrade ke level yang lebih tinggi atau beralih ke GPU khusus. |Kualitas efektif fine-tunes |Fine-tune gagal → harus diulang. Risiko sebenarnya adalah hyperparameter, bukan lokasi GPU. |Evolusi cepat model |Qwen3.6/Gemma 4 telah dirilis kurang dari 1 bulan yang lalu. Dalam 6 bulan, generasi berikutnya akan lebih baik dan lebih murah untuk di-fine-tuning. |=== [WARNING] ==== Jangan luncurkan 811 jam pelatihan tanpa terlebih dahulu menguji pipeline pada *satu* micro-model. Sebuah run 3-4 jam pada Qwen 35B-A3B biaya $8. Jika datasetnya rusak, Anda akan mengetahui itu untuk $8, bukan untuk $1 622. ==== == Kesimpulan: fine-tune telah menjadi mewah yang dapat diakses Satu tahun yang lalu, melakukan fine-tuning pada model 292B parameter (bahkan dengan QLoRA) merupakan bagian dari penelitian. Saat ini, pada Mei 2026, ini adalah proyek yang dapat dilakukan untuk pengembang independen: * **811 H100-jam**pelatihan — $1 622 di Crusoe * **23 model khusus**dimuat di Ollama Cloud —**$17/bulan** * **0 server, 0 GPU lokal, 0 maintenance infrastruktur** Demokratisasi datang dari tiga faktor konvergen : 1. **Arsitektur MoE**— yang memungkinkan untuk secara efisien melakukan fine-tuning pada model di mana hanya sebagian dari bobotnya yang diaktifkan 2. **Rencana tetap dari Ollama Cloud**— yang mengubah biaya variabel (per-token) menjadi biaya tetap (langganan) 3. **Model open-weight berkualitas tinggi**— DeepSeek V4, Qwen3.6, Gemma 4 berada di bawah lisensi MIT/Apache 2.0 Peradaban maju dengan meningkatkan jumlah operasi penting yang dapat kita lakukan tanpa berpikir tentangnya. Fine-tuning, itu tepat seperti itu: suatu operasi yang kamu delegasikan ke mesin sehingga tidak perlu lagi berpikir tentangnya. Dan pada 2026, ini lebih murah daripada seorang developer junior yang dibayar bulanan. --- _Artikel dipublikasikan pada {jbake-date}_ == model-model fine-tuned dari armada [cols="2,2,2,2,3"] |=== |Ukuran diaktifkan |Jumlah |Model dasar |bidang |(Note: Since no French text was provided for translation beyond the instructions and the label "Dataset", which appears to be metadata rather than content to translate, the output is empty as per the requirement to translate only the given fragment.) |13B |1 |DeepSeek-V4-Flash-Base |Ruang kerja umum |50 juta token |13B |5 |DeepSeek-V4-Flash |Gradle, Kotlin, DAG, Doc, Infra |15M token |3,8 miliar |6 |Gemma 4 26B-A4B |Mikrotugas, pemformatan, skrip |5 juta token |3B |5 |Qwen3.6-35B-A3B |Refactoring, review, dokumen menengah |5M tokens |3B |5 |Qwen3.5-35B-A3B |Tugas legacy, kompatibilitas |5M token |=== == Sumber daya === Model open-weight di HuggingFace * https://huggingface.co/deepseek-ai/DeepSeek-V4-Flash-Base[DeepSeek V4-Flash-Base — 292B parameter, lisensi MIT] * https://huggingface.co/Qwen/Qwen3.6-35B-A3B[Qwen3.6-35B-A3B — 35B/3B diaktifkan, lisensi Apache 2.0] * https://huggingface.co/Qwen/Qwen3.5-35B-A3B[Qwen3.5-35B-A3B — 35B/3B diaktifkan, lisensi Apache 2.0] * https://huggingface.co/google/gemma-4-26B-A4B-it[Gemma 4 26B-A4B — 26B/3.8B diaktifkan, lisensi Apache 2.0] === Sumber tarif (Mei 2026) * https://ollama.com/pricing[Tarif Ollama Cloud — rencana Pro $17/bulan per tahun] * https://www.anthropic.com/pricing[Tarif Anthropic — Claude API (Opus 4.7 $5/$25, Sonnet 4.6 $3/$15, Haiku 4.5 $1/$5)] * https://openai.com/api/pricing/[Tarif OpenAI — GPT API (GPT 5.5 $5/$30, GPT 5.4 $2.50/$15)] * https://deepinfra.com/pricing[Tarif DeepInfra — GPU instances H100 $1.79/h, B200 $2.79/h] * Vast.ai, Crusoe Cloud, FluidStack, TensorDock, RunPod, CoreWeave, Lambda Labs — catatan harga manual, berusia Mei 2026 === Pengumuman resmi * https://qwen.ai/blog?id=qwen3.6-35b-a3b[Pengumuman resmi Qwen3.6-35B-A3B — blog Qwen]— pengkodean berbasis agen, Apache 2.0, konteks 262K</pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html Fri, 8 May 2026 00:00:00 +0000 blog/2026/0121_plugin_gradle_piloter_deux_instances_ollama_pro_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_mengapa_gradle_untuk_infrastruktur">Mengapa Gradle untuk infrastruktur?</a></li> <li><a href="#_build_gradle_kts_lengkap">build.gradle.kts lengkap</a></li> <li><a href="#_anatomi_tugas_utama">Anatomi Tugas Utama</a> <ul class="sectlevel2"> <li><a href="#_startollamab_peluncur">startOllamaB` — Peluncur</a></li> <li><a href="#_signinb_interaktif">signInB` — Interaktif</a></li> <li><a href="#_pullmodelb_yang_dapat_dikonfigurasi">pullModelB` — Yang dapat dikonfigurasi</a></li> <li><a href="#_statusollamaall_diagnosis">statusOllamaAll` — diagnosis</a></li> <li><a href="#_cleanollamab_pembersihan_yang_menjaga_identitas">cleanOllamaB` — Pembersihan yang Menjaga Identitas</a></li> </ul> </li> <li><a href="#_workflow_lengkap_dari_nol_sampai_dua_sesi">Workflow Lengkap — Dari Nol Sampai Dua Sesi</a></li> <li><a href="#_mengapa_tidak_menjadikannya_sebuah_plugin_gradle_yang_sebenarnya">Mengapa tidak menjadikannya sebuah plugin Gradle yang sebenarnya?</a></li> <li><a href="#_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_sumber_daya">Sumber daya</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu baca : 18 minutes</div> <p>Mengapa mengetik perintah docker secara manual ketika kita dapat mengenkapsulasi semuanya dalam tugas Gradle? Ini adalah cara saya mengindustrialisasikan konfigurasi dual-Ollama Pro saya dengan nol skrip shell eksternal. Memulai, menghentikan, identitas, sign-in, pull — semuanya lewat`./gradlew`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam artikel sebelumnya, saya menunjukkan cara memungkinkan dua akun Ollama Pro untuk coexist pada mesin yang sama dengan mengisolasi instansi kedua dalam kontainer Docker. Penyiapan berfungsi, tetapi pengelolaan sehari-hari menjadi sangat merepotkan: harus mengingat nama kontainer, menjalankan perintah yang benar.<code>docker exec</code>, checker port mana yang aktif…​</p> </div> <div class="paragraph"> <p>Anda tahu saat itu ketika Anda membuka 14 terminal, lalu Anda mengetik`docker exec ollama-instance-b ollama list`untuk yang keempat, dan Anda berpikir « pasti harus ada cara yang lebih bersih » ?</p> </div> <div class="paragraph"> <p>Ini adalah Gradle.</p> </div> <div class="paragraph"> <p>Bukan hanya untuk membangun kode. Gradle seperti seorang maestro dari infrastruktur lokal. Tugas-tugas yang melakukan provisioning, verifikasi, pengujian, dan pembersihan. Semua ini di-versionkan dalam sebuah`build.gradle.kts`yang tinggal di samping`docker-compose.yml`.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam handwritten false skinparam shadowing false skinparam BoxPadding 8 skinparam DefaultFontSize 11 skinparam ArrowThickness 1.5 left to right direction actor "pengembang" as Dev package "build.gradle.kts" as GradleFile { usecase "startOllamaB" as Start usecase "stopOllamaB" as Stop usecase "checkIdentity" as Check usecase "signInB" as SignIn usecase "pullModelB" as Pull usecase "testOllamaB" as Test usecase "statusOllamaAll" as Status usecase "cleanOllamaB" as Clean } package "Docker Daemon" as DockerDaemon { node "ollama-instance-b" as ContainerB { component ":11435" as Port database "~/ollama-b-data" as Volume } } package "Ollama Asli" as Native { component ":11434" as NatPort } Dev --> Start Dev --> SignIn Dev --> Pull Dev --> Test Dev --> Status Dev --> Check Dev --> Stop Dev --> Clean Start ..> ContainerB : docker run -d Stop ..> ContainerB : docker stop Check ..> Volume : cat id_ed25519.pub SignIn ..> ContainerB : ollama signin Pull ..> ContainerB : ollama pull Test ..> ContainerB : curl /v1/chat/completions Status ..> ContainerB : docker ps Status ..> Native : curl :11434 Clean ..> ContainerB : docker rm -f note bottom of GradleFile Zéro script bash externe. Tout est dans le build.gradle.kts, versionné avec le projet. end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_gradle_untuk_infrastruktur">Mengapa Gradle untuk infrastruktur?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pertanyaan itu masuk akal. Gradle adalah sebuah build tool. Normalnya, ia mengkompilasi, menguji, dan memaketkan. Tidak, ia menjalankan kontainer Docker.</p> </div> <div class="paragraph"> <p>Namun Gradle juga merupakan mesin graf dependensi — dan itulah yang membuatnya menarik untuk kasus kita.</p> </div> <div class="paragraph"> <p>Kami ingin:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Agar kontainer dijalankan sebelum sign-in</p> </li> <li> <p>Pastikan identitas terverifikasi sebelum pull model</p> </li> <li> <p>Agar sebuah uji API gagal secara diam-diam jika kontainer tidak aktif</p> </li> </ol> </div> <div class="paragraph"> <p>Dari grafik dependensi murni. Gradle dirancang untuk itu. DSL Kotlin membuat penulisan tugas menjadi lancar, dan le`doLast`memungkinkan mengeksekusi perintah sistem seolah-olah itu adalah kode aplikatif.</p> </div> <div class="paragraph"> <p>Dan terutama : tidak ada bashrc yang harus dipelihara, tidak ada script yang terbuang di`~/bin`, tidak ada Makefile di samping docker-compose. Semua berada dalam satu file, di lokasi yang sama dengan kode proyek.</p> </div> </div> </div> <div class="sect1"> <h2 id="_build_gradle_kts_lengkap">build.gradle.kts lengkap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah file yang akhirnya saya tulis. Melakukan semuanya, mulai dari penyediaan volume hingga curl verifikasi, melewati proses sign-in interaktif.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.io.ByteArrayOutputStream plugins { base } // ------------------------------------------------------------------------- // Configuration // ------------------------------------------------------------------------- val instanceName = "ollama-instance-b" val instancePort = 11435 val instanceImage = "ollama/ollama:0.20.2" val dataDir = file("${System.getProperty("user.home")}/ollama-b-data") val nativePort = 11434 // Modèles à gérer — cloud Pro + un modèle local gratuit pour les tests val proModels = listOf("deepseek-v4-pro:cloud", "gemma4:31b-cloud") val freeModels = listOf("qwen3:0.6b") // ------------------------------------------------------------------------- // Tâche préparatoire — création du volume si absent // ------------------------------------------------------------------------- val prepareVolume by tasks.registering { group = "ollama" description = "Crée le répertoire de volume pour l'instance B si absent" doLast { if (!dataDir.exists()) { dataDir.mkdirs() println("Volume créé : ${dataDir.absolutePath}") } else { println("Volume existant : ${dataDir.absolutePath}") } } } // ------------------------------------------------------------------------- // Démarrage du conteneur Docker // ------------------------------------------------------------------------- val startOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Lance le conteneur Docker pour l'instance Ollama B" dependsOn(prepareVolume) commandLine( "docker", "run", "-d", "--name", instanceName, "-p", "$instancePort:11434", "-v", "${dataDir.absolutePath}:/root/.ollama", "-e", "OLLAMA_HOST=0.0.0.0", "--restart", "always", instanceImage ) isIgnoreExitValue = true doLast { val alreadyRunning = executionResult.get().exitValue != 0 if (alreadyRunning) { logger.lifecycle("Le conteneur '$instanceName' existe déjà — tentative de démarrage") } else { logger.lifecycle("Conteneur '$instanceName' lancé") } } } // ------------------------------------------------------------------------- // Arrêt du conteneur // ------------------------------------------------------------------------- val stopOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Arrête le conteneur Docker de l'instance B" commandLine("docker", "stop", instanceName) isIgnoreExitValue = true doLast { logger.lifecycle("Conteneur '$instanceName' arrêté") } } // ------------------------------------------------------------------------- // Affichage de la clé publique (Device Key) // ------------------------------------------------------------------------- val checkIdentity by tasks.registering(Exec::class) { group = "ollama" description = "Affiche la clé publique SSH de l'instance B" dependsOn(startOllamaB) commandLine("docker", "exec", instanceName, "cat", "/root/.ollama/id_ed25519.pub") standardOutput = ByteArrayOutputStream() doLast { val pubKey = standardOutput.toString().trim() println("=".repeat(60)) println("Device Key (Instance B)") println("=".repeat(60)) println(pubKey) println("=".repeat(60)) println("→ Enregistre cette clé sur https://ollama.com/settings/keys") println("→ Puis exécute : ./gradlew signInB") println("=".repeat(60)) } } // ------------------------------------------------------------------------- // Sign-in interactif (Ouvrira le navigateur) // ------------------------------------------------------------------------- val signInB by tasks.registering(Exec::class) { group = "ollama" description = "Lance l'authentification interactive Ollama pour le compte B" dependsOn(startOllamaB) standardInput = System.`in` standardOutput = System.out errorOutput = System.err commandLine("docker", "exec", "-it", instanceName, "ollama", "signin") doFirst { logger.lifecycle("Authentification pour le Compte Pro B...") logger.lifecycle("Ouvre ton navigateur et connecte-toi avec l'email du compte B") } } // ------------------------------------------------------------------------- // Pull d'un modèle (paramétrable via propriété Gradle) // ------------------------------------------------------------------------- val pullModelB by tasks.registering(Exec::class) { group = "ollama" description = "Pull un modèle sur l'instance B. Usage : ./gradlew pullModelB -Pmodel=nom:tag" dependsOn(startOllamaB) val modelName = project.findProperty("model") as? String ?: "qwen3:0.6b" commandLine("docker", "exec", instanceName, "ollama", "pull", modelName) doFirst { logger.lifecycle("Pull du modèle '$modelName' sur l'instance B...") } doLast { logger.lifecycle("Modèle '$modelName' pullé avec succès") } } // ------------------------------------------------------------------------- // Pull de tous les modèles Pro (batch) // ------------------------------------------------------------------------- val pullAllProModels by tasks.registering { group = "ollama" description = "Pull tous les modèles cloud Pro sur l'instance B" dependsOn(startOllamaB) doLast { proModels.forEach { model -> logger.lifecycle("→ Pull $model...") val process = ProcessBuilder("docker", "exec", instanceName, "ollama", "pull", model) .inheritIO() .start() process.waitFor() } logger.lifecycle("Tous les modèles Pro pullés") } } // ------------------------------------------------------------------------- // Pull de tous les modèles gratuits (batch / première install) // ------------------------------------------------------------------------- val pullAllFreeModels by tasks.registering { group = "ollama" description = "Pull tous les modèles locaux gratuits sur l'instance B" dependsOn(startOllamaB) doLast { freeModels.forEach { model -> logger.lifecycle("→ Pull $model...") val process = ProcessBuilder("docker", "exec", instanceName, "ollama", "pull", model) .inheritIO() .start() process.waitFor() } logger.lifecycle("Tous les modèles gratuits pullés") } } // ------------------------------------------------------------------------- // Liste des modèles disponibles sur l'instance B // ------------------------------------------------------------------------- val listModelsB by tasks.registering(Exec::class) { group = "ollama" description = "Liste les modèles disponibles sur l'instance B" dependsOn(startOllamaB) commandLine("docker", "exec", instanceName, "ollama", "list") } // ------------------------------------------------------------------------- // Health check — test API sur les deux instances // ------------------------------------------------------------------------- val testOllamaB by tasks.registering { group = "ollama" description = "Teste la connectivité API de l'instance B avec un simple chat" dependsOn(startOllamaB) doLast { val model = project.findProperty("model") as? String ?: "qwen3:0.6b" logger.lifecycle("Test de l'instance B avec le modèle '$model'...") val payload = """ { "model": "$model", "messages": [{"role": "user", "content": "Réponds uniquement par OK"}], "max_tokens": 5 } """.trimIndent() val process = ProcessBuilder( "curl", "-s", "http://localhost:$instancePort/v1/chat/completions", "-H", "Content-Type: application/json", "-d", payload ).start() val response = process.inputStream.bufferedReader().readText() process.waitFor() if (response.contains("\"id\":\"chatcmpl") || response.contains("\"choices\"")) { println("✓ Instance B OK — port $instancePort répond") println(" Response: ${response.take(120)}...") } else { println("✗ Instance B INACTIVE — vérifie le conteneur avec './gradlew statusOllamaAll'") println(" Raw: $response") } } } // ------------------------------------------------------------------------- // Health check sur les deux instances simultanément // ------------------------------------------------------------------------- val statusOllamaAll by tasks.registering { group = "ollama" description = "Vérifie le statut des deux instances Ollama (native + Docker)" doLast { // Instance native runCatching { val process = ProcessBuilder( "curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", "http://localhost:$nativePort/api/tags" ).start() val code = process.inputStream.bufferedReader().readText().trim() process.waitFor() println(if (code == "200") "✓ Instance Native — port $nativePort OK (HTTP $code)" else "✗ Instance Native — port $nativePort (HTTP $code)") }.getOrElse { println("✗ Instance Native — injoignable sur le port $nativePort") } // Instance Docker runCatching { val process = ProcessBuilder( "curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", "http://localhost:$instancePort/api/tags" ).start() val code = process.inputStream.bufferedReader().readText().trim() process.waitFor() println(if (code == "200") "✓ Instance Docker B — port $instancePort OK (HTTP $code)" else "✗ Instance Docker B — port $instancePort (HTTP $code)") }.getOrElse { println("✗ Instance Docker B — injoignable sur le port $instancePort") } // Info conteneur runCatching { val process = ProcessBuilder("docker", "ps", "--filter", "name=$instanceName", "--format", "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}").start() val status = process.inputStream.bufferedReader().readText() process.waitFor() println() println("Conteneur Docker :") println(status) } } } // ------------------------------------------------------------------------- // Nettoyage complet // ------------------------------------------------------------------------- val cleanOllamaB by tasks.registering(Exec::class) { group = "ollama" description = "Arrête et supprime le conteneur Docker de l'instance B" dependsOn(stopOllamaB) commandLine("docker", "rm", instanceName) isIgnoreExitValue = true doLast { logger.lifecycle("Conteneur '$instanceName' supprimé") logger.lifecycle("Le volume ${dataDir.absolutePath} est conservé (identité persistante)") } } // ------------------------------------------------------------------------- // Affichage des instructions // ------------------------------------------------------------------------- val helpOllama by tasks.registering { group = "ollama" description = "Affiche l'aide des tâches Ollama disponibles" doLast { println(""" ╔══════════════════════════════════════════════════════════════╗ ║ Tâches Gradle — Pilotage Dual Ollama Pro ║ ╠══════════════════════════════════════════════════════════════╣ ║ ./gradlew startOllamaB Démarrer l'instance Docker B ║ ║ ./gradlew stopOllamaB Arrêter l'instance Docker B ║ ║ ./gradlew checkIdentity Afficher la clé SSH publique ║ ║ ./gradlew signInB Sign-in interactif compte B ║ ║ ./gradlew pullModelB Pull un modèle (-Pmodel=...) ║ ║ ./gradlew pullAllProModels Pull tous les modèles Pro ║ ║ ./gradlew pullAllFreeModels Pull tous les modèles gratuits ║ ║ ./gradlew listModelsB Lister les modèles instance B ║ ║ ./gradlew testOllamaB Test API avec un chat simple ║ ║ ./gradlew statusOllamaAll Santé des 2 instances ║ ║ ./gradlew cleanOllamaB Supprimer le conteneur ║ ║ ./gradlew helpOllama Cette aide ║ ╚══════════════════════════════════════════════════════════════╝ """.trimIndent()) } }</code></pre> </div> </div> <div class="paragraph"> <p>Ini. Dua belas tugas, satu titik masuk unik, dan tanpa gesekan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomi_tugas_utama">Anatomi Tugas Utama</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startollamab_peluncur">startOllamaB` — Peluncur</h3> <div class="paragraph"> <p>Tidak ada yang sulit : satu`docker run -d`dengan parameter yang tepat. Triknya ada di`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>Jika kontainer sudah ada, perintah`docker run`gagal (exit code ≠ 0). Tanpa properti ini, Gradle akan menghentikan seluruh build dengan kesalahan. Di sini, kegagalan bersenyap — dan`doLast`mendeteksi apakah itu merupakan 'yang sudah ada' atau kesalahan yang sebenarnya</p> </div> <div class="paragraph"> <p>Le `doLast`adalah penting : ia berputar <strong>setelah</strong> eksekusi perintah, yang memungkinkan untuk memeriksa`executionResult.get().exitValue`dan mencatat pesan yang sesuai.</p> </div> </div> <div class="sect2"> <h3 id="_signinb_interaktif">signInB` — Interaktif</h3> <div class="paragraph"> <p>Ini adalah satu-satunya tugas yang membutuhkan interaksi manusia. Gradle mengirimkan`System.in`dans processus agar prompt`ollama signin`supaya dapat ditampilkan normal :</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>Tanpa itu, sign-in akan terblokir karena stdin akan ditutup dan Anda tidak akan pernah melihat prompt.</p> </div> </div> <div class="sect2"> <h3 id="_pullmodelb_yang_dapat_dikonfigurasi">pullModelB` — Yang dapat dikonfigurasi</h3> <div class="paragraph"> <p>Sebuah tugas generik yang menerima parameter melalui`-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>Cadangan penting :`project.findProperty("model") as? String ?: "qwen3:0.6b"`memastikan bahwa tugas tidak meledak jika kita lupa parameter.</p> </div> </div> <div class="sect2"> <h3 id="_statusollamaall_diagnosis">statusOllamaAll` — diagnosis</h3> <div class="paragraph"> <p>Dua`curl`sehat di pelabuhan`11434` et <code>11435</code>, dengan cadangan di`runCatching`Agar tidak crash jika salah satu instance down. Outputnya terstruktur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">✓ Instance Native — port 11434 OK (HTTP 200) ✓ Instance Docker B — port 11435 OK (HTTP 200) Conteneur Docker : NAMES STATUS PORTS ollama-instance-b Up 3 hours 0.0.0.0:11435->11434/tcp</code></pre> </div> </div> <div class="paragraph"> <p>Dengan sekilas saja, kamu tahu persis apa yang berputar dan apa yang salah.</p> </div> </div> <div class="sect2"> <h3 id="_cleanollamab_pembersihan_yang_menjaga_identitas">cleanOllamaB` — Pembersihan yang Menjaga Identitas</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>Kontainer terhapus, tetapi volume`~/ollama-b-data`(a single space)<strong>terawat</strong>. Identitas SSH bertahan saat pembersihan. Ke yang berikutnya`startOllamaB`, kunci yang sama akan digunakan kembali — tidak perlu melakukan sign-in lagi atau mendaftar ulang Device Key.</p> </div> <div class="admonitionblock caution"> <table> <tr> <td class="icon"> <i class="fa icon-caution" title="🔒"></i> </td> <td class="content"> <div class="paragraph"> <p><code>cleanOllamaB`Jangan menyentuh volume. Jika kamu ingin menghapus identitas B (dan memulai dari nol), kamu harus menghapus</code>~/ollama-b-data`Secara manual. Ini bersifat sukarela — satu`clean`tidak seharusnya menghancurkan kredensial</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_workflow_lengkap_dari_nol_sampai_dua_sesi">Workflow Lengkap — Dari Nol Sampai Dua Sesi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Berikut adalah urutan ideal bagi seseorang yang datang ke proyek dan ingin menyelesaikan semuanya tanpa membuka dokumentasi :</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>Kurang dari dua menit, semua sudah disediakan. Tidak perlu membaca README, tidak perlu mengatur variabel lingkungan. Tugas`helpOllama`berfungsi sebagai dokumentasi terintegrasi.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam DefaultFontSize 11 actor Développeur as Dev participant "Gradle (build.gradle.kts)" as Gradle participant "Docker\nDaemon" as Docker participant "Ollama Instans B" as OllamaB participant "Ollama\nCloud" as Cloud == Provisionnement == Dev -> Gradle : helpOllama Gradle --> Dev : Aide et instructions Dev -> Gradle : startOllamaB Gradle -> Docker : docker run -d ollama/ollama:0.20.2 Docker -> OllamaB : Génération clés SSH (id_ed25519) Docker --> Gradle : conteneur lancé Gradle --> Dev : OK Dev -> Gradle : checkIdentity Gradle -> Docker : cat id_ed25519.pub Gradle --> Dev : Clé publique SSH Dev -> Cloud : Enregistrement clé SSH\n(sur ollama.com/settings/keys) == Authentification == Dev -> Gradle : signInB Gradle -> Docker : ollama signin (interactif) Dev <-> Cloud : Login navigateur (compte B) Docker -> Cloud : Échange token ⇔ Device Key Gradle --> Dev : Authentifié == Vérification == Dev -> Gradle : pullModelB Gradle -> Docker : ollama pull qwen3:0.6b Gradle --> Dev : Modèle pullé Dev -> Gradle : testOllamaB Gradle -> Docker : curl /v1/chat/completions Gradle --> Dev : ✓ Instance B OK == Production == Dev -> Gradle : pullAllProModels Gradle -> Docker : ollama pull deepseek-v4-pro:cloud Gradle -> Docker : ollama pull gemma4:31b-cloud Gradle --> Dev : Modèles Pro pullés Dev -> Gradle : statusOllamaAll Gradle --> Dev : ✓ Native ✓ Docker B @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_tidak_menjadikannya_sebuah_plugin_gradle_yang_sebenarnya">Mengapa tidak menjadikannya sebuah plugin Gradle yang sebenarnya?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pertanyaan yang sah. Ekstrak ini`build.gradle.kts`Mempunyai plugin Gradle mandiri akan memiliki keuntungan: penggunaan kembali antar proyek, konfigurasi deklaratif, ekstensi DSL.</p> </div> <div class="paragraph"> <p>Tapi untuk saat ini, ini tidak masuk akal. Build ini tidak memiliki logika bisnis kompleks — ini hanyalah pembungkus (wrapper) dari perintah Docker dan curl. Menambahkan plugin Gradle lengkap (dengan ekstensi, tes unit, publikasi) akan tidak sebanding untuk 12 tugas utilitas.</p> </div> <div class="paragraph"> <p>Le `build.gradle.kts`inline berada dalam proyek yang membutuhkannya. Dia mudah untuk disalin ke tempat lain. Suatu hari jika saya memiliki tiga proyek yang bergantung padanya, saya akan mengubahnya menjadi plugin. Saat ini, 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>Hari ketika kamu punya tiga`build.gradle.kts`sama di tiga proyek, ini adalah sinyal bahwa harus mengekstrak sebuah plugin. Sebelum itu, duplikasi lebih murah daripada abstraksi. Kearifan dev.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Gradle bukan hanya sebuah build tool</strong>— Mesin grafik dependensi menjadikannya sebuah orchestrator infrastruktur yang menakutkan.<code>doLast</code>, <code>isIgnoreExitValue</code>, <code>dependsOn</code>: ketiga primitif ini cukup untuk mengendalikan kontainer Docker dengan keandalan yang sama seperti pipeline CI.</p> </li> <li> <p><strong>isIgnoreExitValue` adalah temanmu</strong>— Dalam sebuah dunia ideal,<code>docker run`pada kontainer yang sudah ada akan mengembalikan peringatan daripada kode keluar kesalahan. Di dunia nyata, kamu menempatkan`isIgnoreExitValue = true`dan Anda mengelola diagnosa di`doLast</code>.</p> </li> <li> <p><strong>Tugas yang dapat dikonfigurasi menghilangkan ambiguitas</strong> — Un <code>pullModelB`generik dengan</code>-Pmodel=…​`Mengganti N tugas khusus. Satu tugas, satu dokumentasi, satu perilaku.</p> </li> <li> <p><strong>runCatching` untuk pemeriksaan kesehatan</strong>Ketika Anda menguji N endpoint, crash pada endpoint pertama tidak boleh menghalangi pengujian endpoint lainnya.<code>runCatching</code>+`getOrElse`per endpoint, dan diagnosis tetap lengkap bahkan jika terjadi kerusakan parsial.</p> </li> <li> <p><strong>Tugas <code>helpOllama</code> sebagai dokumentasi yang dapat dieksekusi</strong> — Un `println()`Yang diformat dengan baik mengganti README tiga paragraphe. Ini bersifat auto-dokumentasi, selalu terkini, dan dapat diakses tanpa keluar dari terminal.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kami beralih dari perintah docker yang harus diketik secara manual ke dalam workflow Gradle yang lengkap, terkontrol versinya, dan dapat digunakan kembali. Belas dua tugas mencakup seluruh siklus hidup: penyediaan, identitas, masuk, tarik, uji, diagnosa, pembersihan.</p> </div> <div class="paragraph"> <p>Komposisi docker-compose + build.gradle.kts + opencode.json membentuk trinitas yang rapi: Docker untuk isolasi, Gradle untuk orkestrasi, OpenCode untuk konsumsi. Setiap lapisan memiliki tanggung jawabnya, dan tidak ada yang meluap ke lapisan lain.</p> </div> <div class="paragraph"> <p>Langkah berikutnya? Mengotomatisasi siklus hidup dalam CI sehingga instance Ollama tersedia di lingkungan dev sementara. Tapi itu adalah artikel lain.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_daya">Sumber daya</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/tutorial_using_tasks.html">Manual Pengguna Gradle — Tugas</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_tasks.html">User Manual Gradle — Tugas Khusus</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Gambar Docker Ollama di Docker Hub</a></p> </li> <li> <p><a href="https://kotlinlang.org/docs/gradle.html">Gradle DSL Kotlin — Dokumentasi</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Artikel dipublikasikan 2026-05-08</em></p> </div> </div> </div> https://cheroliv.com/blog/2026/0120_cumuler_deux_abonnements_ollama_pro_docker_post.html Fri, 8 May 2026 00:00:00 +0000 blog/2026/0120_cumuler_deux_abonnements_ollama_pro_docker_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_pengantar">Pengantar</a></li> <li><a href="#_kenapa_dua_kali_hal_yang_sama">Kenapa dua kali hal yang sama?</a></li> <li><a href="#_jantung_masalah_kunci_perangkat">Jantung Masalah : Kunci Perangkat</a></li> <li><a href="#_penyiapan_langkah_demi_langkah">Penyiapan — Langkah demi Langkah</a> <ul class="sectlevel2"> <li><a href="#_prasyarat">Prasyarat</a></li> <li><a href="#_tahap_1_membuat_volume">Tahap 1 : Membuat Volume</a></li> <li><a href="#_langkah_2_menjalankan_kontainer_docker">Langkah 2 : Menjalankan Kontainer Docker</a></li> <li><a href="#_langkah_3_mengambil_kunci_publik">Langkah 3 : Mengambil Kunci Publik</a></li> <li><a href="#_langkah_4_simpan_kunci_di_ollama_com">Langkah 4 : Simpan Kunci di Ollama.com</a></li> <li><a href="#_langkah_5_menguji_dengan_model_kecil_gratis">Langkah 5: Menguji dengan model kecil gratis</a></li> </ul> </li> <li><a href="#_jebakan_api_v1models">Jebakan API `/v1/models</a></li> <li><a href="#_hasil_dua_sesi_dua_akun_nol_konflik">Hasil : Dua Sesi, Dua Akun, Nol Konflik</a></li> <li><a href="#_pelajaran_yang_dipelajari">Pelajaran yang Dipelajari</a></li> <li><a href="#_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 14 minutes</div> <p>Dua langganan Pro, satu mesin, satu kartu bank, dan tidak ada konflik jaringan. Bagaimana Docker memungkinkan saya menggandakan kapasitas inferensi cloud saya tanpa membeli komputer kedua.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pengantar">Pengantar</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya telah menggunakan Ollama Pro selama beberapa bulan untuk memenuhi sesi OpenCode saya dengan model cloud. Halnya, meski dengan langganan Pro, kita cepat terbatas oleh <strong>rate limiting</strong> ketika meluncurkan beberapa agen secara paralel. Solusi yang jelas: langganan kedua.</p> </div> <div class="paragraph"> <p>Tapi sekarang, ini adalah drama.</p> </div> <div class="paragraph"> <p>Ollama mengidentifikasi setiap mesin dengan kunci SSH unik — <strong>Device Key</strong> yang terkenal. Dua instance pada OS yang sama akan berbagi identitas yang sama, dan tidak memungkinkan untuk menghubungkan dua akun Pro ke perangkat yang sama. Dan seperti yang Anda duga, saya tidak akan membeli laptop kedua hanya untuk itu.</p> </div> <div class="paragraph"> <p>Solusi: mencurangi. Membuat Ollama percaya bahwa ia berjalan pada dua mesin yang berbeda, padahal mereka berbagi CPU yang sama, RAM yang sama, dan koneksi jaringan yang sama. Docker akan memberi kita gelembung isolasi yang sempurna.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam BoxPadding 10 skinparam DefaultFontSize 12 left to right direction node "Mesin Fisik" { frame "Ollama Instansi A (Asli)" as Native { database "Identitas\n/usr/share/ollama/.ollama/id_ed25519" as KeyA portin "API\n:11434" as PortA } frame "Ollama Instance B (Docker)" as Docker { database "Identitas ~/ollama-b-data/id_ed25519" as KeyB portin "API\n:11435" as PortB } } cloud "Ollama Awan" { actor "Akun Profesional A (email 1)" as AccountA actor "Akun Pro B\n(surel 2)" as AccountB } KeyA --> AccountA : "Kunci SSH A" KeyB --> AccountB : "Kunci SSH B" PortA --> AccountA : "Permintaan A" PortB --> AccountB : "Permintaan 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="_kenapa_dua_kali_hal_yang_sama">Kenapa dua kali hal yang sama?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum Anda menganggap saya orang gila, izinkan saya menjelaskan kasus penggunaan.</p> </div> <div class="paragraph"> <p>Dengan satu langganan Pro, saya dapat menjalankan model seperti`deepseek-v4-pro:cloud`dalam sesi OpenCode. Masalah muncul ketika saya ingin <strong>dua</strong> sesi simultan. Kuota rate limiting menyebabkan sesi kedua mengalami lag atau ditolak sepenuhnya.</p> </div> <div class="paragraph"> <p>Dengan dua langganan Pro yang independen:</p> </div> <div class="ulist"> <ul> <li> <p>Sesi OpenCode 1 → Akun Pro A`localhost:11434`)</p> </li> <li> <p>Sesi OpenCode 2 → akun Pro B`localhost:11435`)</p> </li> </ul> </div> <div class="paragraph"> <p>Setiap sesi memiliki kuota masing-masing, konteks masing-masing, dan tidak mengganggu yang lain. Ini adalah multi-processing manusia.</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>Dua langganan Pro = dua email yang berbeda. Kartu bank yang sama berfungsi — sistem pembayaran Ollama tidak memblokir langganan berulang dari cara pembayaran yang sama. Saya telah memeriksa.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_jantung_masalah_kunci_perangkat">Jantung Masalah : Kunci Perangkat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ketika Anda menginstal Ollama, sepasang kunci SSH ed25519 dihasilkan di direktori identitas:</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>Kunci ini diunggah ke server Ollama saat`ollama signin`. Dia yang mengatakan « mesin ini milik akun Pro tertentu ». Jika kedua instance Anda berbagi file yang sama`id_ed25519`, mereka memiliki identitas yang sama. Akhir permainan.</p> </div> <div class="paragraph"> <p>Berikan instance kedua kita direktori identitas miliknya sendiri, yang terisolasi dalam volume Docker.</p> </div> </div> </div> <div class="sect1"> <h2 id="_penyiapan_langkah_demi_langkah">Penyiapan — Langkah demi Langkah</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prasyarat">Prasyarat</h3> <div class="ulist"> <ul> <li> <p>Instalasi native Ollama yang berfungsi (skrip resmi`curl | sh`)</p> </li> <li> <p>Docker terpasang dan berfungsi</p> </li> <li> <p>Portainer atau docker-compose untuk deployment</p> </li> <li> <p>Dua akun Ollama dengan dua email yang berbeda</p> </li> </ul> </div> <div class="paragraph"> <p>Saya telah menggunakan versi`0.20.2`— yang disediakan oleh skrip resmi dan gambar Docker yang sesuai.</p> </div> </div> <div class="sect2"> <h3 id="_tahap_1_membuat_volume">Tahap 1 : Membuat Volume</h3> <div class="paragraph"> <p>Sebuah direktori sederhana pada host akan berfungsi sebagai volume persisten untuk identitas instance B:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">mkdir -p ~/ollama-b-data</code></pre> </div> </div> <div class="paragraph"> <p>Folder ini akan dipasang di kontainer Docker sebagai`/root/.ollama`, di tempat Ollama menyimpan kunci identitasnya, riwayat dan modelnya.</p> </div> </div> <div class="sect2"> <h3 id="_langkah_2_menjalankan_kontainer_docker">Langkah 2 : Menjalankan Kontainer Docker</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml"># docker-compose.yml services: ollama-instance-b: image: ollama/ollama:0.20.2 container_name: ollama-instance-b ports: - "11435:11434" volumes: - /home/cheroliv/ollama-b-data:/root/.ollama environment: - OLLAMA_HOST=0.0.0.0 restart: always</code></pre> </div> </div> <div class="paragraph"> <p>Apa yang terjadi di sini:</p> </div> <div class="ulist"> <ul> <li> <p>Pelabuhan<strong>11435</strong>dari host dipetakan ke<strong>11434</strong>dalam kontainer. demikian, instance Docker mendengarkan pada`:11435`tanpa konflik dengan instansi native yang mengokupi`:11434`.</p> </li> <li> <p>Volume`~/ollama-b-data`dipasang pada`/root/.ollama`— ini adalah tempat identitas SSH akan disimpan.</p> </li> <li> <p>`OLLAMA_HOST=0.0.0.0`memungkinkan kontainer untuk menerima koneksi eksternal.</p> </li> </ul> </div> <div class="paragraph"> <p>Saya telah men-deploy stack ini melalui Portainer, tetapi sebuah sederhana`docker compose up -d`juga berfungsi sama baiknya.</p> </div> </div> <div class="sect2"> <h3 id="_langkah_3_mengambil_kunci_publik">Langkah 3 : Mengambil Kunci Publik</h3> <div class="paragraph"> <p>Karena kontainer masih bersih saat pertama kali dijalankan, Ollama otomatis menghasilkan pasangan kunci SSH baru dalam volume. Kita mengambil kunci publik:</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>Saya memastikan bahwa kunci ini <strong>berbeda</strong> dari kunci instance asli:</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>Dua kunci yang berbeda, dua identitas terpisah. Permainan selesai.</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>Jika kontainer Anda memulai ulang, ia <strong>menggunakan kembali</strong> kunci yang ada dalam volume. Identitas bersifat persisten. Anda tidak akan kehilangan asosiasi dengan akun Pro.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_langkah_4_simpan_kunci_di_ollama_com">Langkah 4 : Simpan Kunci di Ollama.com</h3> <div class="paragraph"> <p>Buka <a href="https://ollama.com/settings/keys" class="bare">https://ollama.com/settings/keys</a> → Tambahkan Kunci SSH. Kita menempelkan kunci publik instance Docker lalu memvalidasi.</p> </div> <div class="paragraph"> <p>Selanjutnya, kami menautkan identitas ini ke akun Pro B:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec -it ollama-instance-b ollama signin</code></pre> </div> </div> <div class="paragraph"> <p>Browser terbuka, kita masuk dengan email akun B, dan token terhubung dengan kunci SSH kontainer. Kita memastikan bahwa semuanya OK :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ docker exec -it ollama-instance-b ollama signin User: cherolivpro</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_langkah_5_menguji_dengan_model_kecil_gratis">Langkah 5: Menguji dengan model kecil gratis</h3> <div class="paragraph"> <p>Sebelum saya membahas harga berlangganan Pro, saya ingin yakin bahwa pipa berfungsi. Saya menarik sebuah model lokal kecil dan gratis untuk memvalidasi konektivitas :</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>Pelabuhan`11435`mengjawab, model telah disajikan. Instans B masih hidup.</p> </div> <div class="paragraph"> <p>Setelah saya merasa tenang, saya beralih ke pull dari model cloud Pro yang sebenarnya:</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 byte untuk manifest model cloud — normal, inferensi dilakukan di sisi server, bukan lokal. Dan inilah ujian terakhir:</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>Halo juga, instance B.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jebakan_api_v1models">Jebakan API `/v1/models</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya kehilangan 20 menit karena detail bodoh. Ketika saya mengonfigurasi penyedia`ollama-b`di OpenCode, tidak ada yang muncul di pemilih model. Tidak ada. Tidak apa-apa.</p> </div> <div class="paragraph"> <p>Alasan? API`/v1/models`dari instance B kembali`{"object":"list","data":null}`alih-alih`{"object":"list","data":[]}`tidak ada model yang ditarik. Nilai`null`membuat parsing crash di sisi OpenCode, yang tidak menampilkan provider.</p> </div> <div class="paragraph"> <p>Solusi: mendeklarasikan model <strong>eksplisit</strong> dalam konfigurasi OpenCode alih-alih bergantung pada penemuan dinamis.</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>Dengan pernyataan eksplisit ini, OpenCode segera melihat provider B dan model-modelnya. Merestart sesi, dan selektor`/models`Menampilkan kedua instance berdampingan.</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>Jika Anda tidak melihat provider khusus Anda di`/models`, jangan buang tiga jam untuk me-restart terminal Anda. Deklarasikan model secara manual di`opencode.json`— Ini menyelesaikan masalah secara langsung.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_hasil_dua_sesi_dua_akun_nol_konflik">Hasil : Dua Sesi, Dua Akun, Nol Konflik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pada akhirnya, saya dapat meluncurkan dua sesi OpenCode secara bersamaan:</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>Setiap sesi memiliki kuota dan batas laju masing-masing, dan tidak saling mengganggu. Meski mesin sama, kartu biru sama, dua email berbeda.</p> </div> <div class="paragraph"> <p>Dan yang terbaik? Kontainer Docker sedang`restart: always`. Dia tetap bertahan setelah reboot sistem tanpa perlu intervensi manual.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pelajaran_yang_dipelajari">Pelajaran yang Dipelajari</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Docker mengisolasi semua, bahkan identitas</strong>— Bind mount volume sederhana sudah cukup untuk memberikan kontainer kumpulan kunci SSH miliknya sendiri, sehingga membuatnya tak dapat dibedakan dari mesin fisik yang berbeda dari perspektif Ollama.</p> </li> <li> <p><strong>Dua email, CB yang sama</strong>— Ollama tidak memblokir langganan berganda dari metode pembayaran yang sama. Hanya email yang harus berbeda.</p> </li> <li> <p><strong>Coba gratis sebelum membayar</strong> — Un <code>ollama pull qwen3:0.6b</code> (modèle libre, 522 Mo) permet de valider toute la chaîne réseau sans débourser un centime. Vous validez le plomberie d’abord, vous activez le Pro ensuite.</p> </li> <li> <p><strong>/v1/models` dengan <code>data: null</code> merusak OpenCode</strong>— Jika Anda mengonfigurasi provider khusus dengan`"models": {}`, OpenCode mencoba menemukan model melalui API. Jika API merespons`data: null`, penyedia tidak muncul. Deklarasikan model-model secara eksplisit.</p> </li> <li> <p><strong>Dua akun, itu adalah multi-processing manusia</strong>— Satu akun Pro = satu sesi OpenCode aktif. Dua akun = dua sesi paralel. Bagi seseorang yang mengelola beberapa proyek Gradle secara bersamaan, itu merupakan game changer.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://ollama.com/settings/keys">Ollama Settings — Pengelolaan kunci SSH</a></p> </li> <li> <p><a href="https://docs.ollama.com/">Dokumentasi resmi Ollama</a></p> </li> <li> <p><a href="https://hub.docker.com/r/ollama/ollama">Image Docker Ollama di Docker Hub</a></p> </li> <li> <p><a href="https://opencode.ai/docs/providers/#ollama">OpenCode — Penyedia Konfigurasi Ollama</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Artikel dipublikasikan pada 2026-05-08</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0080_kitty_term_post.html Thu, 7 May 2026 00:00:00 +0000 blog/2025/0080_kitty_term_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_mengapa_memilih_kitty_dan_zsh">Mengapa memilih Kitty dan Zsh?</a></li> <li><a href="#_prasyarat_sistem">Prasyarat sistem</a></li> <li><a href="#_pengunduhan_dan_pemasangan_kitty">Pengunduhan dan pemasangan Kitty</a> <ul class="sectlevel2"> <li><a href="#_unduh_skrip_instalasi">Unduh skrip instalasi</a></li> <li><a href="#_pembuatan_tautan_simbolis">Pembuatan tautan simbolis</a></li> </ul> </li> <li><a href="#_integrasi_kitty_di_xubuntu">Integrasi Kitty di Xubuntu</a> <ul class="sectlevel2"> <li><a href="#_menyalin_file_desktop">Menyalin file desktop</a></li> <li><a href="#_ubah_file_desktop">Ubah file desktop</a></li> <li><a href="#_mengaitkan_kitty_sebagai_terminal_default_opsional">Mengaitkan Kitty sebagai terminal default (opsional)</a></li> </ul> </li> <li><a href="#_instalasi_zsh">Instalasi Zsh</a></li> <li><a href="#_tetapkan_zsh_sebagai_shell_default">Tetapkan Zsh sebagai shell default</a> <ul class="sectlevel2"> <li><a href="#_metode_global_untuk_semua_terminal">Metode global (untuk semua terminal)</a></li> <li><a href="#_metode_khusus_untuk_kitty">Metode khusus untuk Kitty</a></li> </ul> </li> <li><a href="#_konfigurasi_zsh_opsional">Konfigurasi Zsh (opsional)</a> <ul class="sectlevel2"> <li><a href="#_buat_file_zshrc">Buat file .zshrc</a></li> <li><a href="#_contoh_konfigurasi_minimal">Contoh konfigurasi minimal</a></li> </ul> </li> <li><a href="#_ringkasan_workflow_lengkap">Ringkasan workflow lengkap</a></li> <li><a href="#_verifikasi_akhir">Verifikasi akhir</a> <ul class="sectlevel2"> <li><a href="#_membuka_file_konfigurasi">📂 Membuka file konfigurasi</a></li> <li><a href="#_️_tambah_atau_ubah_font_size">🖋️ Tambah atau ubah `font_size</a></li> <li><a href="#_menyimpan_dan_mulai_ulang_kitty">💾 Menyimpan dan mulai ulang Kitty</a></li> <li><a href="#_penyesuaian_dinamis_zoom_sementara">✅ Penyesuaian dinamis (Zoom sementara)</a></li> </ul> </li> <li><a href="#_instalasi_dan_konfigurasi_oh_my_zsh">Instalasi dan konfigurasi Oh My Zsh</a> <ul class="sectlevel2"> <li><a href="#_instalasi_oh_my_zsh">Instalasi Oh My Zsh</a></li> <li><a href="#_mengubah_tema">Mengubah tema</a></li> <li><a href="#_verifikasi">Verifikasi</a></li> <li><a href="#_diagram_kasus_penggunaan">Diagram kasus penggunaan</a></li> </ul> </li> <li><a href="#_aktifkan_transparansi_di_kitty">Aktifkan transparansi di Kitty</a> <ul class="sectlevel2"> <li><a href="#_prasyarat_untuk_transparansi">Prasyarat untuk transparansi</a></li> <li><a href="#_konfigurasi_transparansi_dalam_kitty_conf">Konfigurasi transparansi dalam kitty.conf</a></li> <li><a href="#_mulai_ulang_kitty">Mulai ulang Kitty</a></li> <li><a href="#_suplemen_yang_mungkin">Suplemen yang mungkin</a></li> <li><a href="#_diagram_urutan_inisialisasi_kitty_dengan_transparansi">Diagram urutan - Inisialisasi Kitty dengan transparansi</a></li> <li><a href="#_keterbatasan_yang_diketahui">Keterbatasan yang diketahui</a></li> </ul> </li> <li><a href="#_nonaktifkan_bip_suara_audible_bell">Nonaktifkan bip suara (audible bell)</a></li> <li><a href="#_pembaruan_kitty">Pembaruan Kitty</a></li> <li><a href="#_referensi">Referensi</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Panduan ini menjelaskan langkah demi langkah cara menginstal terminal <strong>kitty</strong> di Xubuntu, mengonfigurasi dengan benar, dan mengganti bash dengan <strong>zsh</strong> sebagai shell default. Proyek kitty tersedia di sini: <a href="https://github.com/kovidgoyal/kitty" class="bare">https://github.com/kovidgoyal/kitty</a>.</p> </div> <div class="paragraph"> <p><em><em>_ Kitty adalah terminal modern, cepat dan dapat dikonfigurasi, sangat sesuai untuk pengembang yang sangat menuntut. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_memilih_kitty_dan_zsh">Mengapa memilih Kitty dan Zsh?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty membedakan dengan:</p> </div> <div class="ulist"> <ul> <li> <p>Performa lebih tinggi dengan akselerasi GPU,</p> </li> <li> <p>Sebuah konfigurasi yang sepenuhnya berbasis pada satu file teks tunggal,</p> </li> <li> <p>Dukungan excellent untuk font dan ligatur.</p> </li> </ul> </div> <div class="paragraph"> <p>Zsh justru merupakan shell interaktif yang kuat yang menawarkan:</p> </div> <div class="ulist"> <ul> <li> <p>Penyelesaian cerdas,</p> </li> <li> <p>Sebuah prompt yang dapat dipersonalisasi,</p> </li> <li> <p>Kompatibilitas besar dengan bash.</p> </li> </ul> </div> <div class="paragraph"> <p>Dengan menggabungkan Kitty dan Zsh, Anda mendapatkan lingkungan yang produktif dan estetis.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Arsitektur sederhana Kitty + Zsh actor User User --> Kitty : Lance le terminal Kitty --> Zsh : Initialise le shell interactif Zsh --> System : Interagit avec le système (fichiers, commandes) @enduml</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>Panduan ini sengaja terbatas pada penginstalan melalui skrip dan Xubuntu.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_prasyarat_sistem">Prasyarat sistem</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum memulai, pastikan Anda memiliki :</p> </div> <div class="ulist"> <ul> <li> <p>Xubuntu terinstal,</p> </li> <li> <p>akses ke internet,</p> </li> <li> <p>sebuah shell bash yang berfungsi untuk menjalankan skrip.</p> </li> </ul> </div> <div class="paragraph"> <p>Periksa lingkungan Anda :</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="_pengunduhan_dan_pemasangan_kitty">Pengunduhan dan pemasangan Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kitty merekomendasikan menginstalnya melalui skrip resmi yang menempatkan file-file di`~/.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>Ini metode adalah independen dari manajer paket (tanpa`apt`).</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_unduh_skrip_instalasi">Unduh skrip instalasi</h3> <div class="paragraph"> <p>Jalankan perintah berikut:</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>Perintah ini melakukan :</p> </div> <div class="ulist"> <ul> <li> <p>unduhan biner,</p> </li> <li> <p>ekstraksi dalam`~/.local/kitty.app`,</p> </li> <li> <p>pembuatan tautan simbolik.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Unduhan dan instalasi Kitty start :curl -L installer.sh; :sh /dev/stdin; :Décompression dans ~/.local/kitty.app; :create symlinks; stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pembuatan_tautan_simbolis">Pembuatan tautan simbolis</h3> <div class="paragraph"> <p>Agar dapat memanggil`kitty`dari terminal, buat sebuah tautan simbolik :</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>Tambahkan`~/.local/bin`tambahkan ke PATH Anda jika belum dilakukan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc source ~/.zshrc</code></pre> </div> </div> <div class="paragraph"> <p>Anda dapat memeriksa instalasi :</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="_integrasi_kitty_di_xubuntu">Integrasi Kitty di Xubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agar Kitty muncul di menu aplikasi:</p> </div> <div class="sect2"> <h3 id="_menyalin_file_desktop">Menyalin file desktop</h3> <div class="paragraph"> <p>Salin berkas`.desktop`disediakan :</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="_ubah_file_desktop">Ubah file desktop</h3> <div class="paragraph"> <p>Edit berkas :</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>Periksa atau ubah baris berikut :</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>Ganti`YOURUSER`dengan nama pengguna Anda.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Proses integrasi Kitty dalam menu Xubuntu start :Copier .desktop; :Editer les chemins; :Sauvegarder; :Menu Applications; stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_mengaitkan_kitty_sebagai_terminal_default_opsional">Mengaitkan Kitty sebagai terminal default (opsional)</h3> <div class="paragraph"> <p>Agar Kitty menjadi terminal yang diluncurkan secara default :</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>Pilih`kitty`dalam menu yang ditawarkan</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_instalasi_zsh">Instalasi Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Zsh belum terinstal, jalankan :</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>Periksa instalasi:</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="_tetapkan_zsh_sebagai_shell_default">Tetapkan Zsh sebagai shell default</h2> <div class="sectionbody"> <div class="paragraph"> <p>Anda dapat mengubah shell secara global atau hanya di Kitty.</p> </div> <div class="sect2"> <h3 id="_metode_global_untuk_semua_terminal">Metode global (untuk semua terminal)</h3> <div class="paragraph"> <p>Identifikasi jalur mutlak:</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>Secara umum`/usr/bin/zsh`.</p> </div> <div class="paragraph"> <p>Ubah shell default :</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>Keluar dan masuk kembali.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Perubahan shell global actor User User --> Bash : Session actuelle User --> System : chsh -s /usr/bin/zsh System --> "/etc/passwd" : Modifie le shell note right of "/etc/passwd" : Shell par défaut mis à jour @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_metode_khusus_untuk_kitty">Metode khusus untuk Kitty</h3> <div class="paragraph"> <p>Jika Anda hanya ingin mengubah shell di Kitty, edit file konfigurasi :</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>Tambahkan baris ini :</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>Simpan dan restart Kitty.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfigurasi_zsh_opsional">Konfigurasi Zsh (opsional)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menyesuaikan Zsh Anda :</p> </div> <div class="sect2"> <h3 id="_buat_file_zshrc">Buat file .zshrc</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">touch ~/.zshrc nano ~/.zshrc</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_contoh_konfigurasi_minimal">Contoh konfigurasi minimal</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="_ringkasan_workflow_lengkap">Ringkasan workflow lengkap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Skema di bawah ini merangkum seluruh proses:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Alur kerja instalasi dan konfigurasi start :Téléchargement script Kitty; :Installation dans ~/.local; :Création symlink; :Ajout ~/.local/bin au PATH; if (Zsh installé ?) then (non) :sudo apt install zsh; endif :Configurer Kitty.desktop; :Optionnel - changer terminal par défaut; :Optionnel - chsh -s /usr/bin/zsh; stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_verifikasi_akhir">Verifikasi akhir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jalankan 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>Anda seharusnya melihat bahwa`zsh`aktif :</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>Hasil yang diharapkan :</p> </div> <div class="paragraph"> <p>/usr/bin/zsh</p> </div> <div class="paragraph"> <p>Untuk mengubah ukuran font di<strong>Kitty</strong>, harus menyesuaikan parameter`font_size`dalam file konfigurasi. Berikut adalah prosedur detailnya:</p> </div> <div class="sect2"> <h3 id="_membuka_file_konfigurasi">📂 Membuka file konfigurasi</h3> <div class="paragraph"> <p>File konfigurasi utama biasanya berada di:</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>Jika file ini belum ada, Anda dapat membuatnya. (No source text provided, so nothing to translate.)</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="_️_tambah_atau_ubah_font_size">🖋️ Tambah atau ubah `font_size</h3> <div class="paragraph"> <p>Tambahkan direktif berikut, atau ubah jika sudah ada:</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>di sini`14.0`sesuai dengan ukuran yang diinginkan. Anda dapat memasukkan nilai desimal apa pun, misalnya`12.0`, <code>15.5</code>, dst.</p> </div> </div> <div class="sect2"> <h3 id="_menyimpan_dan_mulai_ulang_kitty">💾 Menyimpan dan mulai ulang Kitty</h3> <div class="ulist"> <ul> <li> <p>Catat (<code>Ctrl + O</code>, lalu`Entrée`) dan tinggalkan (<code>Ctrl + X</code>) jika Anda menggunakan`nano`.</p> </li> <li> <p>Tutup semua jendela Kitty, kemudian restart terminal agar perubahan berlaku.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_penyesuaian_dinamis_zoom_sementara">✅ Penyesuaian dinamis (Zoom sementara)</h3> <div class="paragraph"> <p>Jika Anda ingin melakukan zoom in/out sementara tanpa mengubah konfigurasi, gunakan pintasan keyboard default:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Perbesar ukuran font</strong>(empty)</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + =</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>Kurangi ukuran font</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + -</code></p> </div> <div class="ulist"> <ul> <li> <p><strong>Reset ukuran</strong>:</p> </li> </ul> </div> <div class="paragraph"> <p><code>Ctrl + Shift + Backspace</code></p> </div> <div class="paragraph"> <p>Pengaturan ini tidak persisten setelah terminal ditutup.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_instalasi_dan_konfigurasi_oh_my_zsh">Instalasi dan konfigurasi Oh My Zsh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah Zsh terinstal dan dikonfigurasi sebagai shell default, Anda dapat memperkaya lingkungan Anda dengan <strong>Oh My Zsh</strong>, sebuah framework manajemen konfigurasi Zsh yang menawarkan:</p> </div> <div class="ulist"> <ul> <li> <p>sebuah kumpulan tema untuk prompt,</p> </li> <li> <p>banyak plugin,</p> </li> <li> <p>organisasi yang jelas dari konfigurasi.</p> </li> </ul> </div> <div class="sect2"> <h3 id="_instalasi_oh_my_zsh">Instalasi Oh My Zsh</h3> <div class="paragraph"> <p>Pastikan Zsh aktif:</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>Jika diperlukan, mulai :</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>Kemudian unduh dan jalankan skrip instalasi resmi:</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>Skrip ini:</p> </div> <div class="ulist"> <ul> <li> <p>Buat folder`~/.oh-my-zsh`,</p> </li> <li> <p>cadangan opsional file Anda`~/.zshrc`,</p> </li> <li> <p>mengaktifkan secara otomatis prompt baru.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_mengubah_tema">Mengubah tema</h3> <div class="paragraph"> <p>Buka file konfigurasi Anda :</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>Ubah variabel`ZSH_THEME`untuk memilih tema lain (misalnya`agnoster`) :</p> </div> <div class="paragraph"> <p>ZSH_THEME="agnoster</p> </div> <div class="paragraph"> <p>Simpan lalu muat ulang konfigurasi :</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="_verifikasi">Verifikasi</h3> <div class="paragraph"> <p>Jalankan Kitty dan pastikan bahwa prompt telah berubah dengan baik. Anda dapat memastikan bahwa Oh My Zsh aktif dengan menjalankan :</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>Hasilnya seharusnya serupa dengan :</p> </div> <div class="paragraph"> <p>/home/pengguna_anda/.oh-my-zsh</p> </div> </div> <div class="sect2"> <h3 id="_diagram_kasus_penggunaan">Diagram kasus penggunaan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml title Use case penginstalan dan penggunaan Oh My Zsh actor Utilisateur as User package "Terminal Kitty" { component "Zsh Shell" as Zsh } component "kerangka kerja Oh My Zsh" as OhMyZsh User --> Kitty : Lance Kitty Kitty --> Zsh : Initialise Zsh Zsh --> OhMyZsh : Charge configuration (~/.zshrc, thèmes, plugins) User --> OhMyZsh : Personnalise le thème et les plugins @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_aktifkan_transparansi_di_kitty">Aktifkan transparansi di Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Salah satu fitur paling digemari dari Kitty adalah kemampuan menambahkan <strong>transparensi</strong> pada latar belakang terminal. Ini memungkinkan Anda untuk melihat sedikit lingkungan di bawahnya (jendela, desktop, dll.), yang sangat berguna saat multitasking.</p> </div> <div class="sect2"> <h3 id="_prasyarat_untuk_transparansi">Prasyarat untuk transparansi</h3> <div class="paragraph"> <p>Transparansi dalam Kitty berdasarkan le<strong>komposer jendela</strong>digunakan oleh lingkungan grafis. Di Xubuntu (berbasis XFCE), pastikan bahwa<strong>komposisi diaktifkan</strong>.</p> </div> <div class="ulist"> <div class="title">Memeriksa :</div> <ul> <li> <p>klik kanan di desktop > Pengaturan ><strong>Pengaturan manajer jendela</strong>,</p> </li> <li> <p>tab<strong>komposer</strong>: kotak <strong>"Activer la composition"</strong> harus dicentang.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Use Case - Mengaktifkan transparansi di Kitty actor Utilisateur rectangle "Lingkungan grafis (XFCE/Xubuntu)" { usecase "Mengaktifkan komposisi" as UC1 } rectangle "Terminal Kitty" { usecase "Menentukan transparansi dalam kitty.conf" as UC2 } Utilisateur --> UC1 Utilisateur --> UC2 @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_konfigurasi_transparansi_dalam_kitty_conf">Konfigurasi transparansi dalam kitty.conf</h3> <div class="paragraph"> <p>Buka file konfigurasi Anda`~/.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>Tambahkan atau ubah baris berikut:</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>Parameter ini menerima nilai antara:</p> </div> <div class="ulist"> <ul> <li> <p><code>1.0</code>→ opak (tidak ada transparansi),</p> </li> <li> <p><code>0.0</code>→ sangat transparan (tidak dapat digunakan)</p> </li> <li> <p>nilai tengah seperti`0.90`, <code>0.75</code>, dll.</p> </li> </ul> </div> <div class="paragraph"> <p>Sebuah kompromi visual yang baik biasanya berada di antara`0.85` et <code>0.95</code>.</p> </div> </div> <div class="sect2"> <h3 id="_mulai_ulang_kitty">Mulai ulang Kitty</h3> <div class="paragraph"> <p>Tutup semua instance Kitty, lalu buka kembali jendela baru agar perubahan berlaku :</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="_suplemen_yang_mungkin">Suplemen yang mungkin</h3> <div class="paragraph"> <p>Jika Anda menggunakan latar belakang terminal khusus, Anda juga dapat mengatur warna latar belakang dengan transparansi (dalam RGBA):</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-conf hljs" data-lang="conf">background #1e1e2eff</code></pre> </div> </div> <div class="paragraph"> <p>Komponen terakhir ()<code>ff</code>) menunjukkan opasitas (de`00` à <code>ff</code>)</p> </div> </div> <div class="sect2"> <h3 id="_diagram_urutan_inisialisasi_kitty_dengan_transparansi">Diagram urutan - Inisialisasi Kitty dengan transparansi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml title Urutan startup Kitty dengan transparansi actor User participant "Kitty" as Kitty participant "XFCE komposer" as XFCE participant "GPU/pengelola jendela" as WM User -> Kitty : Lance Kitty Kitty -> kitty.conf : Lit configuration Kitty -> XFCE : Vérifie composition activée XFCE --> Kitty : Composition = active Kitty -> WM : Demande allocation fenêtrée transparente WM --> Kitty : OK (rendu avec alpha < 1) Kitty -> User : Affiche terminal translucide @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_keterbatasan_yang_diketahui">Keterbatasan yang diketahui</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>Transluciditas tidak berfungsi jika: - kompositor XFCE nonaktif, - manajer jendela yang tidak kompatibel sedang digunakan, - Anda menggunakan Kitty dalam mode <strong>tmux</strong> di latar belakang tanpa dukungan transparansi.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_nonaktifkan_bip_suara_audible_bell">Nonaktifkan bip suara (audible bell)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Secara default, Kitty mengeluarkan suara <strong>bip</strong> ketika perintah salah dimasukkan atau sebuah acara terminal memicu-nya. Bunyi ini dapat dengan cepat menjadi mengganggu, terutama di lingkungan pengembangan yang intensif.</p> </div> <div class="paragraph"> <p>Untuk menonaktifkan perilaku ini, tambahkan direktif berikut ke file`~/.config/kitty/kitty.conf`( empty )</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>Anda juga dapat mengaktifkan <strong>umpan balik visual</strong> sebagai pengganti bip suara dengan :</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="_pembaruan_kitty">Pembaruan Kitty</h2> <div class="sectionbody"> <div class="paragraph"> <p>Karena Kitty diinstal melalui skrip dan bukan melalui manajer paket, pembaruan dilakukan dengan menjalankan ulang skrip instalasi resmi. Ini memungkinkan Anda mengunduh versi terbaru dan memperbarui instalasi Anda yang ada di`~/.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>akhiran`.app`di jalan`~/.local/kitty.app`adalah konvensi instalasi Kitty di Linux melalui skrip resmi-nya, dan tidak menunjukkan sama sekali kompatibilitas eksklusif dengan 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>Sebelum menjalankan perintah pembaruan, pastikan Anda berada di direktori rumah Anda (<code>~</code>)</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Jalankan perintah berikut dari direktori home Anda :</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>Skrip ini akan mengurus :</p> </div> <div class="ulist"> <ul> <li> <p>Unduh binari versi baru.</p> </li> <li> <p>Ekstrak file di dalam`~/.local/kitty.app`.</p> </li> <li> <p>Memperbarui tautan simbolik jika diperlukan.</p> </li> </ul> </div> <div class="paragraph"> <p>Setelah pembaruan, disarankan untuk menutup semua instance Kitty dan menjalankannya kembali untuk memastikan bahwa versi baru diterima dengan baik.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Anda ingin mempelajari lebih dalam tentang personalisasi, lihat dokumentasi resmi:</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> <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="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Anda sekarang memiliki:</p> </div> <div class="ulist"> <ul> <li> <p>dari sebuah terminal modern dan berkinerja baik (Kitty)</p> </li> <li> <p>dari shell yang kuat dan dapat disesuaikan (Zsh)</p> </li> <li> <p>dari konfigurasi yang bersih dan independen dari paket sistem</p> </li> <li> <p>dari terminal estetis dan fungsional yang dilengkapi dengan Oh My Zsh</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html Wed, 6 May 2026 00:00:00 +0000 blog/2026/0119_benchmark_dgx_spark_vs_cloud_abonnement_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_konteks_sebuah_pasar_yang_bergeser">Konteks: Sebuah pasar yang bergeser</a></li> <li><a href="#_panel_opsi">Panel Opsi</a> <ul class="sectlevel2"> <li><a href="#_apa_yang_saya_eksklusikan_dan_mengapa">Apa Yang Saya Eksklusikan (Dan Mengapa)</a></li> </ul> </li> <li><a href="#_inferensi_sederhana_kematian_perangkat_keras_lokal">Inferensi Sederhana : Kematian perangkat keras lokal</a> <ul class="sectlevel2"> <li><a href="#_perhitungan">Perhitungan</a></li> <li><a href="#_meski_dengan_penggunaan_intensif">Meski dengan penggunaan intensif</a></li> </ul> </li> <li><a href="#_penyetelan_halus_cloud_tidak_dapat_dikalahkan">Penyetelan Halus : Cloud Tidak Dapat Dikalahkan</a> <ul class="sectlevel2"> <li><a href="#_biaya_nyata_dari_sebuah_fine_tune">biaya nyata dari sebuah fine-tune</a></li> <li><a href="#_aktor_spesialis">Aktor spesialis</a></li> </ul> </li> <li><a href="#_alasan_satu_satunya_yang_benar_kedaulatan_data">Alasan Satu-satunya yang benar: Kedaulatan Data</a> <ul class="sectlevel2"> <li><a href="#_perhitungan_sejati_kekerasiaan">Perhitungan Sejati Kekerasiaan</a></li> </ul> </li> <li><a href="#_ringkasan_matriks_keputusan">Ringkasan : Matriks Keputusan</a></li> <li><a href="#_kasus_khusus_abonnement_pro_terhadap_model_china">Kasus Khusus: Abonnement Pro Terhadap Model China</a> <ul class="sectlevel2"> <li><a href="#_mengapa_model_cina_mengubah_segalanya">mengapa model cina mengubah segalanya</a></li> <li><a href="#_apa_artinya_untuk_hardware">Apa artinya untuk hardware</a></li> </ul> </li> <li><a href="#_dan_huawei">Dan Huawei?</a></li> <li><a href="#_kesimpulan_kelebihan_kedekatan">Kesimpulan : Kelebihan Kedekatan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 14 minutes</div> <p>NVIDIA menjual DGX Spark sebagai "superkomputer AI desktop" seharga $4 699. Ollama menawarkan model cloud-nya seharga $20 per bulan. Seorang H100 disewa seharga $1,38 per jam di Vast.ai. Dan model-model open-source asal China — DeepSeek, Qwen, GLM — tersedia di mana-mana, secara gratis, tanpa harus membeli kartu. Maka, Spark ini, untuk apa sebenarnya? Saya telah melakukan perhitungan.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_konteks_sebuah_pasar_yang_bergeser">Konteks: Sebuah pasar yang bergeser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pada Mei 2026, lanskap AI telah berubah secara drastis dibandingkan dengan pengumuman DGX Spark di CES 2025. Tiga faktor telah konvergen untuk membuat hardware lokal semakin sulit untuk dijustifikasi :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Keruntuhan harga cloud GPU</strong>Sebuah H100 disewa antara $1,38 dan $3 per jam, dibandingkan dengan $5-8 per jam 18 bulan lalu</p> </li> <li> <p><strong>Ledakan model-model open-source Cina</strong>DeepSeek-V4, Qwen-3, GLM-5 adalah kompetitif dengan model-model Barat, tersedia secara gratis</p> </li> <li> <p><strong>Kenaikan platform inferensi terkelola</strong>: Ollama, Groq, Together AI menawarkan API dengan tarif agresif, dengan level gratis yang melimpah</p> </li> </ul> </div> <div class="paragraph"> <p>DGX Spark, yang diumumkan pada $2 999 lalu naik menjadi $4 699, tiba di dunia yang tidak lagi membutuhkannya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_panel_opsi">Panel Opsi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Berikut solusi yang tersedia pada Mei 2026 untuk menjalankan LLMs, dari yang paling ringan hingga yang paling berat:</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">Pilihan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">VRAM / Kapasitas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">model yang dapat diakses</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kendala utama</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Gratis</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$0/bulan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">awan ringan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Penggunaan terbatas, 1 model secara bersamaan</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/bulan (~$240/tahun)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N/A (API tertutup)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hanya Claude 4.x</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Model unik, bukan 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/bulan (~$200/tahun)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">medium awan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 model simultan max</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Ollama Max</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$100/bulan (~$1 200/tahun)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">awan berat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">10 model simultan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>GPU Cloud (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">Semua model, fine-tuning</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Penagihan per jam, setup diperlukan</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 (pembelian)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">128 Go unifié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles <128 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lambat (~10x lebih lambat daripada H100), tetap</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mac Studio M3 Ultra</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~$5 000+</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">192 Go unifié</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tous modèles <192 Go</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bukan CUDA, ekosistem MLX</p></td> </tr> </tbody> </table> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="💡"></i> </td> <td class="content"> <div class="paragraph"> <p>Harga GPU cloud yang dikutip adalah dari Vast.ai dan RunPod pada Mei 2026 — dari spot/on-demand, bukan yang terdaftar (reserved). Harga hyperscaler (AWS, GCP, Azure) tetap 2-3x lebih tinggi.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_apa_yang_saya_eksklusikan_dan_mengapa">Apa Yang Saya Eksklusikan (Dan Mengapa)</h3> <div class="paragraph"> <p>Saya sengaja mengecualikan opsi-ops berikut dari benchmark ini :</p> </div> <div class="ulist"> <ul> <li> <p><strong>API OpenAI / Anthropic / Google</strong>: topik di sini adalah untuk menjalankan model <strong>open-source</strong> yang dapat dipilih, di-fine-tune, dan tidak bergantung pada vendor tunggal</p> </li> <li> <p><strong>Huawei Ascend / Atlas</strong> : Huawei ne commercialise pas d’équivalent desktop au DGX Spark. La gamme Ascend (910C, 910D) et Atlas (300I Duo, 350) est orientée datacenter — cartes PCIe, serveurs rack — pas des boîtiers compacts prêts à brancher. La puce Ascend 910C embarque 128 Go HBM mais c’est une puce serveur, pas un système autonome. L’Atlas 300I Duo offre 96 Go pour ~$1 400 mais nécessite une machine hôte</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_inferensi_sederhana_kematian_perangkat_keras_lokal">Inferensi Sederhana : Kematian perangkat keras lokal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mari kita mulai dengan kasus penggunaan paling umum: ngobrol dengan LLM, melakukan code review, menghasilkan teks. Tidak ada fine-tuning, tidak ada batch processing, hanya inferensi interaktif.</p> </div> <div class="sect2"> <h3 id="_perhitungan">Perhitungan</h3> <div class="paragraph"> <p>Suatu DGX Spark berharga $4 699. Bagi dengan biaya tahunan setiap langganan:</p> </div> <div id="diag-breakeven" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Titik impas — DGX Spark ($4 699) vs Langganan rectangle "DGX Spark $4 699" as spark #FFCDD2 rectangle "Ollama Pro $200/tahun" as opro #C8E6C9 rectangle "Claude Pro $240/tahun" as cpro #C8E6C9 rectangle "Ollama Max\n$1 200/tahun" as omax #FFF9C4 rectangle "Cloud H100 $3/jam × 10jam/minggu" as cloud #BBDEFB spark --> opro : 23.5 années ⏳ spark --> cpro : 19.6 années ⏳ spark --> omax : 3.9 années spark --> 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>Putusan ini mengerikan. Untuk inferensi:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong>Anda sebaiknya<strong>23 tahun</strong>Untuk mengamortisasikan DGX Spark. Spark akan menjadi usang selama 20 tahun.</p> </li> <li> <p><strong>Ollama Max</strong>:<strong>4 tahun</strong>— asalkan menggunakan Spark 24/7, yang tidak dilakukan oleh siapa pun</p> </li> <li> <p><strong>Claude Pro</strong>: masalah yang sama,<strong>20 tahun</strong>untuk single-model tertutup</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ Janjian 'superkomputer AI desktop' bertemu dengan realitas akuntansi dasar: $4 699 / $20 per bulan = tidak pernah menguntungkan untuk penggunaan individu. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_meski_dengan_penggunaan_intensif">Meski dengan penggunaan intensif</h3> <div class="paragraph"> <p>Mari kita ambil skenario terburuk untuk cloud: Anda menjalankan H100 selama 8 jam per hari, 5 hari per minggu, 52 minggu per tahun.</p> </div> <div class="ulist"> <ul> <li> <p>8 × 5 × 52 = 2 080 jam/tahun</p> </li> <li> <p>2 080 × $2/h (harga rata-rata spot H100) =<strong>$4 160/tahun</strong></p> </li> </ul> </div> <div class="paragraph"> <p>Spark ($4 699) menguntungkan dalam<strong>13 bulan</strong>. kecuali bahwa :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>H100 adalah<strong>~10x lebih cepat</strong>que GB10 Spark. Anda melakukan dalam 1 jam apa yang Spark lakukan dalam 10 jam. Untuk volume kerja yang sama, H100 membiayai Anda $416/tahun, bukan $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>Membandingkan 1 jam H100 dengan 1 jam Spark tidak bermakna. H100 menyelesaikan pekerjaan 10x lebih cepat. Sehingga biaya cloud sebenarnya untuk workload tertentu sekitar 10x lebih rendah dibanding perhitungan naif yang didasarkan pada jam.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_penyetelan_halus_cloud_tidak_dapat_dikalahkan">Penyetelan Halus : Cloud Tidak Dapat Dikalahkan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Argumen klasik para pendukung Spark : « ya tetapi untuk fine-tuning, ini berbeda ».</p> </div> <div class="paragraph"> <p>Tidak, itu tidak.</p> </div> <div class="sect2"> <h3 id="_biaya_nyata_dari_sebuah_fine_tune">biaya nyata dari sebuah fine-tune</h3> <div class="paragraph"> <p>Penyesuaian halus LoRA/QLoRA di Unsloth untuk model 7B :</p> </div> <div class="ulist"> <ul> <li> <p>~2-3h pada H100 =<strong>$5 hingga $9</strong></p> </li> <li> <p>Hal yang sama pada Spark =<strong>20-30 jam</strong>(10x lebih lambat), memblokir mesin</p> </li> </ul> </div> <div class="paragraph"> <p>Dengan $4 699 Spark, Anda dapat membiayai :</p> </div> <div class="ulist"> <ul> <li> <p><strong>~500 hingga ~900 fine-tunes</strong>dalam cloud H100</p> </li> <li> <p>Ou <strong>~23 tahun</strong>d’Ollama Pro</p> </li> <li> <p>Ou <strong>sekitar 4 tahun</strong>d’Ollama Max</p> </li> </ul> </div> <div class="paragraph"> <p>Dan untuk model yang lebih besar (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>Untuk fine-tuning penuh, diperlukan multi-GPU tentu saja — Spark tidak lagi dalam kompetisi.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_aktor_spesialis">Aktor spesialis</h3> <div class="paragraph"> <p>Pada tahun 2026, platform seperti Unsloth, Modal, Replicate, dan Together AI menawarkan fine-tuning serverless :</p> </div> <div class="ulist"> <ul> <li> <p>Tidak ada manajemen GPU</p> </li> <li> <p>Tidak ada konfigurasi lingkungan</p> </li> <li> <p>Pembayaran per menit</p> </li> <li> <p>Optimasi terintegrasi (perhatian flash, kuantisasi otomatis)</p> </li> </ul> </div> <div id="diag-fine-tuning-cost" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title <size:20>Biaya dari Fine-Tune LoRA 7B — Perbandingan</size> note as N |= Option |= Coût par fine-tune |= Fine-tunes possibles avec $4 699 | | **Replicate** | $3-5 | ~1 000 | | **Modal (serverless)** | $2-4 | ~1 500 | | **Unsloth + Vast.ai H100** | $5-9 | ~500-900 | | **Together AI** | $4-8 | ~600-1 000 | | **DGX Spark** | « gratuit » mais 20-30h | ∞ (en théorie) | end note note bottom Le Spark est « gratuit » par fine-tune seulement si votre temps vaut $0/h et que vous n'avez pas besoin de la machine pour autre chose pendant 30h end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_alasan_satu_satunya_yang_benar_kedaulatan_data">Alasan Satu-satunya yang benar: Kedaulatan Data</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah menghilangkan inferensi, fine-tuning, dan rasio kualitas/harga — apa yang tersisa untuk Spark ?</p> </div> <div class="paragraph"> <p><strong>Kerahasiaan mutlak</strong></p> </div> <div class="paragraph"> <p>Bukan privasi « saya tidak ingin prompt saya dibaca oleh karyawan OpenAI ». Itu, ini adalah masalah palsu pada tahun 2026: Ollama, Groq, dan sebagian besar penyedia yang terhormat memiliki kebijakan zero log dan zero retention.</p> </div> <div class="paragraph"> <p>Kerahasiaan yang sebenarnya, itulah :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Air-gap regulatif</strong>: pertahanan, diplomasi, kesehatan — data tidak dapat <strong>secara fisika</strong> keluar dari bangunan</p> </li> <li> <p><strong>data hak milik kritis</strong>: kode sumber dari produk yang tidak dipublikasikan, rahasia industri, algoritma perdagangan</p> </li> <li> <p><strong>Ketahanan jaringan</strong>: AI harus terus beroperasi meski internet jatuh</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>Tapi jujur saja: berapa persentase pembeli DGX Spark yang benar-benar berada dalam hal ini? 1%? Sisa itu adalah hal yang « nice to have » yang diubah menjadi pengeluaran sebesar $4 699.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_perhitungan_sejati_kekerasiaan">Perhitungan Sejati Kekerasiaan</h3> <div class="paragraph"> <p>Untuk penggunaan individu :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Ollama Pro</strong>($20/bulan) + model sumber terbuka Cina = solusi pragmatis</p> </li> <li> <p>Jika sebuah prompt bocor di Ollama, ia tenggelam dalam jutaan permintaan harian. Ini adalah tetesan air di laut.</p> </li> <li> <p>Risiko nyata bukanlah bocornya sebuah prompt — ini adalah pelatihan tanpa persetujuan pada data Anda. Dan itu, penyedia yang serius melarangnya secara kontrak.</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ Ketakutan akan « mengdistil promptnya dalam LLM » adalah tingkat penyebaran informasi pribadi yang sangat encer sehingga lebih merupakan kecemasan daripada ancaman nyata. Dalam skala industri, ini berbeda. Tapi dalam skala individu, ini hanya kebisingan. </em>_</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ringkasan_matriks_keputusan">Ringkasan : Matriks Keputusan</h2> <div class="sectionbody"> <div id="diag-decision-matrix" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Solusi AI mana yang harus dipilih pada tahun 2026 ? start :Quel est votre besoin principal ?; switch (Besoin) case (Inférence interactive occasionnelle) :**Ollama Free**\n$0/mois, tous modèles open-source; stop case (Inférence quotidienne, code review, dev) :**Ollama Pro** ($20/mois)\nAccès à tous les modèles open-source\nDeepSeek, Qwen, GLM, Llama, Mistral; stop case (Agents IA, multi-modèles, usage intensif) :Contexte > 30K tokens ?; if (Oui) then :**Ollama Max** ($100/mois)\n10 modèles simultanés\nContexte long sans dégradation; stop else (Non) :**Cloud GPU H100 spot** ($1.38–3/h)\n+ Unsloth/Modal pour fine-tuning\nPerformance brute maximale; stop endif case (Fine-tuning régulier) :**Vast.ai H100 + Unsloth** ($5–9/fine-tune)\nou **Together AI / Modal** (serverless)\n500+ fine-tunes pour le prix d’un Spark; stop case (Air-gap obligatoire) :Données classifiées ?; if (Oui) then :**DGX Spark** ou **Mac Studio M3 Ultra**\nSeul cas où le hardware local est justifié\n(pas économiquement — politiquement); stop else (Non) :Retour au cloud : pas de besoin d’air-gap; stop endif endswitch @enduml</pre> </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">kriteria</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ollama Gratis</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>Inferensi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ terbatas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Nyaman</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ kelebihan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Lambat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>penyesuaian halus</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">tidak terkalahkan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Mungkin namun lambat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Biaya tahunan</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">Variabel (~$416-2 080*)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">$4 699 muka</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>kerahasiaan</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">⚠️ Awan AS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">⚠️ Cloud AS (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>Pemeliharaan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengaturan unik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Listrik, pembaruan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>keterusangan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3-5 tahun</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ekosistem perangkat lunak</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model terbuka</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model terbuka</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua model terbuka</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CUDA (lebih lambat)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Veridict</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">sesekali</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>disarankan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pros/pencarian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hanya air-gap</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>*Variabel tergantung volume pekerjaan; dengan kecepatan H100 ~10x > Spark, biaya efektif untuk workload tertentu rendah.</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_kasus_khusus_abonnement_pro_terhadap_model_china">Kasus Khusus: Abonnement Pro Terhadap Model China</h2> <div class="sectionbody"> <div class="paragraph"> <p>Satu poin layak disoroti : kombinasi<strong>Ollama Pro sewa $20/bulan + model Cina open-source</strong>paling mungkin itu adalah nilai terbaik untuk uang dalam sejarah AI untuk konsumen.</p> </div> <div class="sect2"> <h3 id="_mengapa_model_cina_mengubah_segalanya">mengapa model cina mengubah segalanya</h3> <div class="ulist"> <ul> <li> <p><strong>DeepSeek-V4-Pro</strong>: 1.6T params, CSA+HCA, 1M konteks, kompetitif dengan Claude 4 dan GPT-5 untuk kode</p> </li> <li> <p><strong>Qwen-3</strong>: 235B, 256K konteks, sangat baik dalam bahasa Prancis dan penalaran</p> </li> <li> <p><strong>GLM-5.1</strong>: 744B, MLA+DSA, 200K konteks, disesain untuk agen</p> </li> </ul> </div> <div class="paragraph"> <p>Semua tersedia di Ollama. Semua bersumber terbuka (lisensi permissif). Semua dapat digunakan tanpa batas melalui langganan $20/bulan.</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>Dengan Ollama Pro, Anda memiliki akses ke ~5 model "frontier" open-source dengan harga hanya satu model tertutup (Claude Pro). Nilainya sangat tidak seimbang hingga hampir tidak masuk akal.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_apa_artinya_untuk_hardware">Apa artinya untuk hardware</h3> <div class="paragraph"> <p>Jika nilai terbaik (kualitas/harga) berupa langganan cloud seharga $20 per bulan, hardware lokal menjadi pilihan untuk <strong>kenyamanan</strong> atau <strong>prinsip</strong> — bukan pilihan ekonomi.</p> </div> <div class="paragraph"> <p>DGX Spark berharga $4.699 adalah setara dengan:</p> </div> <div class="ulist"> <ul> <li> <p>235 bulan Ollama Pro</p> </li> <li> <p>23 permainan AAA hari peluncuran</p> </li> <li> <p>4 MacBook Air M4</p> </li> <li> <p>Satu tahun sewa untuk apartemen T2 di Lyon</p> </li> </ul> </div> <div class="paragraph"> <p>Untuk perhitungan. Lambat.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dan_huawei">Dan Huawei?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Karena pertanyaan itu telah diajukan kepada saya selama penelitian saya: tidak, Huawei tidak menjual setara dengan DGX Spark.</p> </div> <div class="paragraph"> <p>Yang ada :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Naik 910C</strong> : 128 Go HBM, 800 TFLOPS FP16 — mais c’est une puce serveur, pas un desktop</p> </li> <li> <p><strong>Atlas 300I Duo</strong> : 96 Go LPDDR4X, carte PCIe à ~$1 400 — nécessite un hôte</p> </li> <li> <p><strong>Atlas 350</strong> : 112 Go HBM, 1.56 PFLOPS FP4 — accélérateur datacenter, pas un boîtier compact</p> </li> </ul> </div> <div class="paragraph"> <p>Huawei reste focalisé sur le marché des serveurs et des centres de données. Pour un boîtier compact « prêt à brancher » avec 120+ Go de VRAM, le DGX Spark (128 Go unifié) et le Mac Studio M3 Ultra (192 Go unifié) sont les seules options en 2026. Et pour l’instant, aucun constructeur chinois n’a annoncé de produit équivalent dans ce format.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_kelebihan_kedekatan">Kesimpulan : Kelebihan Kedekatan</h2> <div class="sectionbody"> <div class="paragraph"> <p>DGX Spark bukan produk yang buruk. Ini adalah investasi yang buruk untuk 99% pembeli potensial.</p> </div> <div id="diag-verdict" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Peta lanskap AI 2026 — Siapa yang mendominasi? left to right direction package "Penggunaan Pribadi / UMKM" #C8E6C9 { rectangle "🏆 Ollama Pro $20/bulan" as pro rectangle "Ollama Free\n$0/bulan" as free rectangle "spot GPU di cloud\n$1-3/h" as spot } package "Penggunaan intensif / Pro" #FFF9C4 { rectangle "🏆 Ollama Max $100/bulan" as max rectangle "🏆 GPU Cloud khusus $2-4/jam" as dedicated rectangle "Mode / Together AI Tanpa server" as serverless } package "Air-Gap Wajib" #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>_ Membeli DGX Spark pada tahun 2026 adalah seperti membeli server email pada tahun 2010: secara teknis memungkinkan, secara filosofis memuaskan, secara ekonomis tidak masuk akal untuk individu. </em>_</em></p> </div> <div class="paragraph"> <p>Perhitungannya sederhana, dan ia tidak berbohong :</p> </div> <div class="ulist"> <ul> <li> <p><strong>$0</strong>untuk ngobrol dengan DeepSeek di Ollama Free</p> </li> <li> <p><strong>$200/tahun</strong>untuk bekerja secara serius dengan Ollama Pro</p> </li> <li> <p><strong>$5-9</strong>untuk fine-tune sesekali di GPU cloud</p> </li> <li> <p><strong>$4.699</strong>untuk…​ pengalaman memiliki kasing NVIDIA di meja mereka?</p> </li> </ul> </div> <div class="paragraph"> <p>Pasar telah memutuskan. Langganan cloud dan model open-source China telah menang dalam pertarungan harga. Perangkat keras lokal bertahan dalam niche regulasi, bukan di kantor pengembang.</p> </div> <div class="paragraph"> <p><em><em>_ DGX Spark bukanlah alat yang menguntungkan. Ini adalah sebuah statement. « Saya ingin AI saya berada di rumah saya, bukan di cloud orang lain. » Ini patut dihargai. Namun pada tahun 2026, ketika Ollama memberi Anda DeepSeek-V4-Pro di cloud untuk $20/bulan, ini terutama sebuah statement yang sangat mahal. </em>_</em></p> </div> <hr> <div class="paragraph"> <p><strong>Artikel ini merupakan hasil percakapan dengan agen AI saya tentang relevansi ekonomi DGX Spark, bersamaan dengan pemantauan pasar mengenai harga cloud GPU (Vast.ai, RunPod), tabel harga Ollama/Claude, serta ekosistem model open-source asal China. Harga yang disebut adalah harga bulan Mei 2026 — kemungkinan besar harga akan terus menurun saat Anda membaca baris-baris ini.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0118_matrice_gouvernance_llm_zone_acces_workspace_post.html Mon, 4 May 2026 00:00:00 +0000 blog/2026/0118_matrice_gouvernance_llm_zone_acces_workspace_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_prompt_engineering_adalah_sebuah_benteng_pasir">Masalah: Prompt Engineering adalah sebuah benteng pasir</a></li> <li><a href="#_jawaban_saya_matriks_44">Jawaban saya: matriks 4×4</a> <ul class="sectlevel2"> <li><a href="#_lima_zona_dimensi_spasial_rgpd">Lima Zona (Dimensi Spasial — RGPD)</a></li> <li><a href="#_klasifikasi_epistemik_dimensi_kedua">Klasifikasi Epistemik (Dimensi Kedua)</a></li> </ul> </li> <li><a href="#_bagaimana_llm_mengkonsumsi_matriks_ini">Bagaimana LLM Mengkonsumsi Matriks Ini</a></li> <li><a href="#_implementasi_tugas_gradle_yang_bertipe">Implementasi : Tugas Gradle yang Bertipe</a></li> <li><a href="#_mengapa_ini_sebuah_manifesto_bukan_hanya_sebuah_spec">Mengapa Ini Sebuah Manifesto, Bukan Hanya Sebuah Spec</a></li> <li><a href="#_cascade_lengkap_dari_brain_dump_ke_artikel_blog">Cascade Lengkap — dari Brain Dump ke Artikel Blog</a></li> <li><a href="#_prokontra">Pro/Kontra</a></li> <li><a href="#_kesimpulan_atur_file_anda_bukan_prompt_anda">Kesimpulan : Atur file Anda, Bukan prompt Anda</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">Waktu membaca: 14 minutes</div> <p>Selama berbulan-bulan, saya menumpuk aturan tata kelola agen. Beberapa file EAGER, daftar periksa LAZY, protokol akhir sesi dalam enam langkah. Namun, satu pertanyaan masih belum terjawab : <strong>bagaimana LLM mengetahui apa yang memiliki hak untuk melakukan dengan sebuah file ?</strong></p> </div> <div class="paragraph"> <p>Jawaban tidak ada dalam prompt. Dia berada dalam sistem berkas.</p> </div> <div class="paragraph"> <p>Berikut spesifikasi arsitektur yang membuat respons dapat digunakan — la <strong>matriks tata kelola LLM</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_prompt_engineering_adalah_sebuah_benteng_pasir">Masalah: Prompt Engineering adalah sebuah benteng pasir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ketika Anda memberikan sebuah file ke sebuah LLM, Anda memberinya semuanya. Kontennya, ya — dan juga ketidakhadiran pengaman. LLM tidak tahu apakah file ini berisi rahasia, pendapat spekulatif, atau kode sumber tertutup. Dia akan mengindeksnya merangkum, mengutip, mencampur dengan data lain — dan potensial mempublikasikannya dalam embedding publik atau respons pengguna.</p> </div> <div class="paragraph"> <p>Parade klasik, itu adalah 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>Prompt ini memiliki tiga masalah :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Bergantung pada niat baik LLM.</strong> Sebuah model yang cukup besar untuk</p> </li> </ol> </div> <div class="paragraph"> <p>Menyelesaikan bug kompleks cukup besar untuk mengelilingi sebuah instruksi keamanan yang terendam dalam 200k token konteks</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Itu kontekstual, bukan struktural.</strong> Ganti prompt, ganti LLM,</p> </li> </ol> </div> <div class="paragraph"> <p>ganti sesi — dan aturan menghilang.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tidak dapat diskalakan.</strong> Setiap jenis file baru, setiap level baru</p> </li> </ol> </div> <div class="paragraph"> <p>Privasi menuntut klausa baru. Prompt Anda menjadi sebuah teks peraturan yang tidak ada yang membacanya sepenuhnya</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>Keamanan sebuah sistem tidak boleh pernah bergantung pada sebuah instruksi yang mungkin lupa, menghindar, atau tidak dimuat. Dia harus bergantung pada sebuah halangan yang tidak dapat disebrangi tanpa ingin secara eksplisit</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_jawaban_saya_matriks_44">Jawaban saya: matriks 4×4</h2> <div class="sectionbody"> <div class="paragraph"> <p>Solusi yang saya terapkan di workspace saya adalah <strong>matriks zona × hak akses LLM</strong>. Dia tidak meminta LLM untuk berhati-hati. Dia memberi ketidakwaspadaan yang secara struktural mustahil</p> </div> <div id="diag-matrix-overview" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Matriks Tata Kelola LLM — Zona × Hak Akses package "Ruang Kerja" { rectangle "AKAR (Lingkaran 0) ━━━━━━ Brain dump pikiran bebas [DILARANG LLM]" as Z0 #FFB3B3 rectangle "configuration/ (Lingkaran 1) ━━━━━━ Rahasia, token Infrastuktur pribadi [DILARANG LLM]" as Z1 #FFB3B3 rectangle "office/ (Lingkaran 2) ━━━━━━ Data redaksi Artikel, penataan [Visifilter]" as Z2 #FFF3B3 rectangle "foundry/private/\n(Lingkaran 3)\n━━━━━━\nCode closed source\n[DATASET PRIBADI]" as Z3 #B3D9FF rectangle "foundry/public/\n(Lingkaran 3)\n━━━━━━\nKode sumber terbuka\nApache 2.0\n[AKSES BEBAS]" as Z4 #B3FFB3 } Z0 -[hidden]-> Z1 Z1 -[hidden]-> Z2 Z2 -[hidden]-> Z3 Z3 -[hidden]-> Z4 @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_lima_zona_dimensi_spasial_rgpd">Lima Zona (Dimensi Spasial — RGPD)</h3> <div class="paragraph"> <p>Setiap zona workspace memiliki tingkat GDPR yang menentukan <strong>di mana</strong> file dapat dirujuk :</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">Zona</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tingkat GDPR</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hak akses RAG publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Akar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">0 — Pribadi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Brain dumps, percakapan LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>dilarang</strong>— tidak pernah diindeks</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 — Pemilik yang dibatasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Rahasia, token, kunci API</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>dilarang</strong>— tidak pernah diindeks</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 — Kolaboratif terbatas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Data redaksi, penataan, pelatihan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>terfilter</strong>— Hanya visi</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 — Terbuka bersyarat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kode bersumber tertutup, SaaS tidak publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>DILARANG</strong>— dataset priadi secara eksklusif</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 — Publik asli</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kode Apache 2.0, plugin yang dipublikasikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>BEBAS</strong>— indeksasi lengkap</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Aturan sederhana: <strong>jalur file menentukan apa yang dapat dilakukan LLM dengannya.</strong> Tidak ada metadata yang perlu dipertahankan, tidak ada tag yang perlu ditambahkan di frontmatter, tidak ada klasifikasi manual di setiap commit. File berada di`OSS/<code>? Ini publik. Ini berada di`configuration/</code>? Dia tidak bisa disentuh.</p> </div> </div> <div class="sect2"> <h3 id="_klasifikasi_epistemik_dimensi_kedua">Klasifikasi Epistemik (Dimensi Kedua)</h3> <div class="paragraph"> <p>Dimensi spasial mengatakan <strong>où</strong> router. Tetapi ada sebuah sumbu kedua, tegak lurus: <strong>quoi</strong> router. Beberapa file di zona yang diizinkan berisi informasi yang tidak boleh diencerkan seperti semula:</p> </div> <div id="diag-epistemic-filter" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 240 title Kaskade Ganda — Filter Spasial + Filter Epistemik start :Le LLM rencontre un fichier; if (Zone physique ?) then (Cercle 0-1) :ACCÈS BLOQUÉ\n(secret, brain dump); stop elseif (Zone CSS/) :DROIT D'ACCÈS PRIVÉ\n→ dataset fine-tuning; :Filtre épistémique\nVision/Opinion; if (Classification ?) then (VISION) :Dataset privé\n→ entraînement autorisé; else (OPINION) :CONFINÉ\n→ pas d'entraînement; endif elseif (Zone office/) :DROIT D'ACCÈS FILTRÉ\n→ accès conditionnel; :Filtre épistémique\nVision/Opinion/Stratégie; if (Classification ?) then (VISION) :DILUTION COMPLÈTE\n→ docs racine + blog; elseif (STRATÉGIE) :DILUTION RESTREINTE\n→ docs racine seulement; else (OPINION) :CONFINEMENT\n→ office/ uniquement; endif else (Zone OSS/) :ACCÈS LIBRE\n→ indexation complète; endif stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Matriks klasifikasi epistemik, diukir dalam Aturan 2bis dari pengelolaanku agen :</p> </div> <div class="paragraph"> <p>| Status | Definisi | Signal LLM | Tujuan | | VISION | Arsitektur yang stabil, pola yang telah diuji | Bahasa deklaratif, referensi sesi/uji | Pengenceran lengkap + Blog | | STRATEGI | Penempatan bisnis, harga | Kosakata pasar, persaingan | Hanya dokumen akar | | OPINION | Spekulasi, hipotesis belum divalidasi | Bahasa hipotetis, intuisi | Penahanan Lingkaran 0 |</p> </div> <div class="paragraph"> <p>Kombinasi dari dua dimensi — zona fisik × klasifikasi epistemik — membentuk<strong>matriks lengkap</strong>:</p> </div> <div id="diag-full-matrix" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE title Matriks Lengkap — Zona × Klasifikasi salt { {T + Zone | VISION | STRATÉGIE | OPINION + Racine (0) | ✗ Interdit | ✗ Interdit | ✗ Interdit + configuration/ (1) | ✗ Interdit | ✗ Interdit | ✗ Interdit + office/ (2) | ✓ Docs + Blog | ✓ Docs seulement | ✗ Confiné + CSS/ (3) | ✓ Dataset privé | ✓ Dataset privé | ✗ Confiné + OSS/ (4) | ✓ Public libre | ✓ Public libre | ✓ Public libre } } @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bagaimana_llm_mengkonsumsi_matriks_ini">Bagaimana LLM Mengkonsumsi Matriks Ini</h2> <div class="sectionbody"> <div class="paragraph"> <p>Matriks bukanlah dokumen yang dibaca oleh LLM. Ini adalah sebuah <strong>kendala implisit</strong> dikodekan dalam vektor komposit konteks (EPIC 9 — sedang berlangsung penerapan)</p> </div> <div class="paragraph"> <p>Ini adalah apa yang LLM terima di setiap sesi:</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>Secara konkrit, ketika LLM berkata kepada saya:</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>Metadata zona merespons bahkan sebelum LLM menyelesaikan kalimatnya : <code>edster/`ada di`CSS/</code>, level 3 →<strong>Akses dilarang pada graf pengetahuan umum.</strong> RAG tidak melihatnya. Graf tidak menyentuhnya. respons pengguna Dia tidak mengutipnya.</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>Ontologi spasial berfungsi sebagai sebuah<strong>izin Unix</strong>untuk LLM. Anda tidak meminta sebuah proses untuk berhati-hati dengan`/etc/shadow`— Anda menolak akses baca untuknya. Prinsip yang sama.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_implementasi_tugas_gradle_yang_bertipe">Implementasi : Tugas Gradle yang Bertipe</h2> <div class="sectionbody"> <div class="paragraph"> <p>Matriks bukanlah sebuah filosofi. Ini adalah kode. Berikut kontrak tugas. Gradle yang mengimplementasikannya:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">abstract class ZoneAwareIndexer @Inject constructor( private val rootDir: DirectoryProperty, private val configServer: ConfigServerProperty // → configuration/ ) : DefaultTask() { @Input val zoneFilter: SetProperty<Zone> = project.objects.setProperty(Zone::class.java) @OutputFile val ragIndex: RegularFileProperty = project.objects.fileProperty() @TaskAction fun index() { val allowedPaths = zoneFilter.get().flatMap { it.resolve(rootDir.get()) } val forbiddenPaths = Zone.RESTRICTED.resolve(rootDir.get()) + Zone.INTIMATE.resolve(rootDir.get()) // Le RAG ne voit jamais configuration/ ni la racine // CSS/ alimente un index privé, pas celui-ci // office/ est filtré par le classifieur Vision/Opinion } } enum class Zone { INTIMATE, // Cercle 0 — racine RESTRICTED, // Cercle 1 — configuration/ EDITORIAL, // Cercle 2 — office/ CLOSED_SOURCE, // Cercle 3 — foundry/private/ OPEN_SOURCE // Cercle 3 — foundry/public/ }</code></pre> </div> </div> <div class="paragraph"> <p>Tugas ini <strong>dapat diuji</strong>. Anda dapat menulis sebuah ujian yang memeriksa :</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 tes, 380 LULUS. Seperti pada plantuml-gradle — keamanan diuji, tidak diharapkan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_ini_sebuah_manifesto_bukan_hanya_sebuah_spec">Mengapa Ini Sebuah Manifesto, Bukan Hanya Sebuah Spec</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dokumen ini adalah spesifikasi arsitektur karena ia mendefinisikan :</p> </div> <div class="ulist"> <ul> <li> <p>beberapa<strong>dimensi</strong>(spasial, epistemik)</p> </li> <li> <p>Beberapa<strong>aturan deterministik</strong>(zona → hak akses)</p> </li> <li> <p>Un <strong>kontrak tugas</strong>(Gradle bertipe, dapat diuji)</p> </li> <li> <p>satu<strong>implementasi referensi</strong>(workspace saya)</p> </li> </ul> </div> <div class="paragraph"> <p>Namun itu juga sebuah<strong>jelas</strong>karena dia mengambil sikap terhadap sebuah perdebatan lebih luas : <strong>bagaimana mengatur akses sebuah LLM ke data?</strong></p> </div> <div class="paragraph"> <p>Jawaban industri adalah prompt engineering + guardrail<br> klasifikasi post-hoc. Jawaban saya adalah : <strong>letakkan file Anda di</strong> dokumen yang baik.** Sisa otomatis.</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>Manifesto ini tidak mengatakan "LLM harus disesuaikan". Ia berkata: "penyelarasan sebuah LLM atas aturan keamanan Anda adalah konsekuensi dari sistem Anda berkas, bukan prompt Anda.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_cascade_lengkap_dari_brain_dump_ke_artikel_blog">Cascade Lengkap — dari Brain Dump ke Artikel Blog</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk mengilustrasi siklus lengkap, berikut adalah bagaimana ide matriks ini lahir. dan telah dilarutkan:</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>Yang dimulai sebagai observasi dalam sesi ("hey, RAG tidak tahu bahwa edster adalah sumber tertutup") telah menjadi sebuah spesifikasi arsitektur diterbitkan dalam kurang dari satu sesi. Ini adalah pola STIMULUS dalam aksi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_prokontra">Pro/Kontra</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">Pendekatan ini (Ontologi Spasial + Matriks)</th> <th class="tableblock halign-left valign-top">Pendekatan Klasik (Prompt + Pengaman)</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mekanisme</strong> — sistem file memblokir akses, bukan LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Deklaratif</strong> — permintaan meminta LLM untuk berhati-hati</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Testable</strong> — kontrak tugas Gradle diverifikasi oleh 380+ tes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Not testable</strong> — "Apakah LLM telah mematuhi aturan?" adalah pertanyaan terbuka</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Mandiri dari LLM</strong> — ganti model, folder tetap ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Bergantung pada LLM</strong> — setiap model meminterpretasi prompt secara berbeda</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Scalable</strong> — jenis data baru = folder baru, tidak ada perubahan kode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>tidak dapat diskalakan</strong> — jenis data baru = klausa prompt baru, risiko regresi baru</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Auditable</strong> — sistem file adalah jalur audit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>tidak dapat diaudit</strong> — prompt tidak memiliki riwayat, tidak ada perbedaan, tidak ada penyalahan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Contrainte</strong> : menuntut disiplin organisasi awal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kendala</strong>: mengharuskan disiplin penulisan prompt setiap sesi</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_atur_file_anda_bukan_prompt_anda">Kesimpulan : Atur file Anda, Bukan prompt Anda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Matriks tata kelola LLM yang baru saja saya jelaskan bukanlah sebuah produk. Ini adalah<strong>specifikasi arsitektur</strong>— dan itulah sebabnya dia adalah dapat dipublikasikan</p> </div> <div class="paragraph"> <p>Yang membuatnya kuat adalah bahwa ia tidak meminta apa pun dari LLM. Ia tidak Dia tidak mempercayai. Ia tidak bersandar pada penyelarasan, pemahamannya. bahasa Prancis, atau niat baiknya. Ia berdasar pada sistem file — lapisan terendah, paling stabil, paling teruji dari seluruh stack.</p> </div> <div class="paragraph"> <p>Saat saya berkata kepada LLM saya "kamu bisa mengindeks semua di`OSS/<code>, tidak ada dalam `configuration/</code>, et `office/`hanya jika ia diklasifikasikan sebagai Vision Ini bukan instruksi. Ini adalah <strong>filter</strong> — diimplementasikan dalam Kotlin, Diverifikasi oleh 380 tes, dieksekusi sebelum LLM melihat data.</p> </div> <div class="paragraph"> <p>Ini adalah perbedaan antara mengatakan kepada seseorang 'jangan lihat di dalam laci ini' dan menutup laci kunci. Agen tata kelola yang saya bangun sejak Bulan-bulan adalah kunci. Matriks adalah rencana furnitur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0116_compartimentage_epistemique_automatise_llm_post.html">Artikel 0116 — Pembagian Epistemik Otomatis</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Article 0114 — Lingkaran Kepercayaan dan Ontologi Spasial</a></p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Mengatur Agent AI dengan AsciiDoc</a></p> </li> <li> <p><a href="../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html">Pasal 0115 — Penyamar identitas MVP0</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0117_granularisation_oss_css_repositorie_workspace_post.html Sun, 3 May 2026 00:00:00 +0000 blog/2026/0117_granularisation_oss_css_repositorie_workspace_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_kejadian_yang_menunggu_untuk_terjadi">Kejadian yang menunggu untuk terjadi</a> <ul class="sectlevel2"> <li><a href="#_pertanyaan_sebenarnya">Pertanyaan sebenarnya</a></li> </ul> </li> <li><a href="#_solusi_oss_dan_css">Solusi : OSS/ dan CSS/</a></li> <li><a href="#_mengapa_oss_dan_css_dan_bukan_public_dan_private">Mengapa "OSS" dan "CSS" dan Bukan "Public" dan "Private</a> <ul class="sectlevel2"> <li><a href="#_pohon_lengkap_empat_zona_bukan_tiga">Pohon Lengkap — Empat Zona, Bukan Tiga</a></li> </ul> </li> <li><a href="#_kasus_khusus_cheroliv_com">Kasus Khusus : cheroliv.com</a> <ul class="sectlevel2"> <li><a href="#_bakery_gradle_tidak_peduli">bakery-gradle tidak peduli</a></li> </ul> </li> <li><a href="#_dampak_pada_agen_tata_kelola">Dampak pada Agen Tata Kelola</a></li> <li><a href="#_apa_yang_kita_dapatkan_dan_apa_yang_kita_hilangkan">Apa yang Kita Dapatkan (Dan Apa yang Kita Hilangkan)</a></li> <li><a href="#_kesimpulan_sinyal_fisik_mengalahkan_sinyal_perangkat_lunak">Kesimpulan: Sinyal Fisik mengalahkan Sinyal Perangkat Lunak</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 10 minutes</div> <p><code>foundry/</code>— zona fungsional yang menampung kode dari ruang kerja saya — Mengandung 18 proyek. Delapan bersifat open source di bawah lisensi Apache 2.0. Hanya satu sumber tertutup — SaaS Edster. Selama berbulan-bulan, sembilan proyek ini telah berdampingan. dalam folder yang sama, dipisahkan hanya oleh…​ tidak ada. Status publik/privat mereka adalah sebuah informasi dalam kepalaku, bukan di sistem file.</p> </div> <div class="paragraph"> <p>Dan kemudian saya ingin menghubungkan sebuah RAG. Dan di situ, semuanya runtuh.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kejadian_yang_menunggu_untuk_terjadi">Kejadian yang menunggu untuk terjadi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pada April 2026, saya mulai mengimplementasikan pgvector RAG untuk slider-gradle. Prinsip: mengindeksi semua repositori`foundry/<code>, menghasilkan beberapa embeddings, dan suntikan ke dalam konteks LLM agar ia memiliki sebuah persepsi" kasus`foundry/</code>.</p> </div> <div class="paragraph"> <p>Pipeline tersebut sederhana:</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>Sederhana. Efektif. Dan<strong>berbahaya</strong>.</p> </div> <div class="paragraph"> <p>Karena ini`fileTree`tidak membedakan antara`plantuml-gradle/` (Apache 2.0, publik) dan`edster/`(closed source, private). Dia menelan semuanya. Dan jika suatu hari saya mempublikasikan embedding ini — di dashboard, dalam satu respons LLM, dalam dataset pelatihan — kode Edster yang proprietary sedang bocor.</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>Masalahnya bukan bahwa LLM membaca kode sumber tertutup. Masalahnya, bahwa kode ini harus berakhir dalam embedding vektor <strong>publik</strong> — tidak dapat dibalik, tidak dapat dihapus, tidak dapat diaudit.</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_pertanyaan_sebenarnya">Pertanyaan sebenarnya</h3> <div class="paragraph"> <p>Bukan "bagaimana mencegah LLM bocor kode?". Adalah "bagaimana membuat pelarian secara struktural menjadi mustahil?</p> </div> <div class="paragraph"> <p>Jawaban bukan prompt. Jawaban, itu memotong folder menjadi dua.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_oss_dan_css">Solusi : OSS/ dan CSS/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum :</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>Setelah :</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`menjadi :</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>RAG umum tidak pernah melihat`CSS/`. Kode closed source memberi dataset tanpa fine-tuning — sebuah model internal yang tidak pernah keluar dari rumahku. La pemisahan adalah mekanik, bukan deklaratif.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_oss_dan_css_dan_bukan_public_dan_private">Mengapa "OSS" dan "CSS" dan Bukan "Public" dan "Private</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pemilihan akronim OSS (Open Source Software) dan CSS (Closed Source Software) adalah disengaja:</p> </div> <div class="ulist"> <ul> <li> <p>Public"/"Private" menjelaskan<strong>kejelasan</strong>(apa yang GitHub lihat)</p> </li> <li> <p>OSS"/"CSS" menggambarkan<strong>alam</strong>kode (yang harus diketahui oleh LLM)</p> </li> </ul> </div> <div class="paragraph"> <p>Keterlihatan GitHub adalah metadata dari repositori jarak jauh. Sifat kode adalah sifat dari konten. LLM tidak memiliki akses ke API GitHub — tetapi ia memiliki akses ke sistem file.<code>CSS/`dia berkata kepadanya "perhatian, kode ini tidak berada di bawah lisensi free" tanpa perlu membaca satu`LICENSE`atau untuk mengurai sebuah`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>Nama folder adalah metadata paling kuat yang dapat Anda berikan kepada sebuah LLM. Dia tidak dapat diparsing dengan salah, diabaikan, atau diinterpretasikan dengan salah. LLM tersebut melihat`CSS/edster/`Dalam jalur file — dia tahu</p> </div> </td> </tr> </table> </div> <div class="sect2"> <h3 id="_pohon_lengkap_empat_zona_bukan_tiga">Pohon Lengkap — Empat Zona, Bukan Tiga</h3> <div class="paragraph"> <p>Granularisasi OSS/CSS menyelesaikan ontologi tiga zona. Zona `foundry/`beralih dari 1 ke 2 subzona fungsional:</p> </div> <div id="diag-four-zone-workspace" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 260 title Organisasi foundry/ — Granularisasi OSS/CSS package "pabrik pengecoran/" { package "Lingkaran 0 — Akar" #FFCCCC { rectangle "PICTURE_ME_ROLLIN_*.adoc" as STIM rectangle "WORKSPACE_*.adoc" as VISION_DOC note right of STIM Brain dump libre Jamais versionné [LLM : interdit d'indexer] end note } package "Lingkaran 1 — konfigurasi/" #FFD9CC { rectangle "Rahasia, token" as SECRETS rectangle "Spring Cloud Config" as SCC note right of SECRETS Privé-CVS, solo access [LLM : INTERDIT] end note } package "Lingkaran 2 — kantor/" #FFFFCC { rectangle "artikel, pengkawangan" as DATA rectangle "Pelatihan, SPG/SPD" as FORM note right of DATA Privé-CVS [LLM : filtré Vision/Opinion] end note } package "Lingkaran 3 — pabrik cetak/" #CCE5FF { package "OSS/ — Apache 2.0" #CCFFCC { rectangle "Plugin Gradle" as PLUGINS rectangle "mesin" as ENGINE } package "CSS/ — Sumber tertutup" #CCDDFF { rectangle "edster/" as EDSTER } } } @enduml</pre> </div> </div> <div class="paragraph"> <p>| Zona | GDPR | Indeksasi RAG publik | Dataset penyetelan halus | | Akar | Tingkat 0 — Pribadi | ✗ | ✗ | (empty)<code>configuration/</code>| Level 1 — Terbatas | ✗ | ✗ | | <code>office/</code>| Tingkat 2 — Kolaboratif | ✓ Disaring | ✓ Disaring | | <code>foundry/private/</code>| Tingkat 3 — Terbuka Bersyarat | ✗ | ✓ Pribadi | | <code>foundry/public/</code>| Tingkat 4 — Masyarakat Asli | ✓ Gratis | ✓ Publik |</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kasus_khusus_cheroliv_com">Kasus Khusus : cheroliv.com</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sementara saya berada di sana, saya memperbaiki ketidaksesuaian lain. Situs saya <code>cheroliv.com`hidup di`foundry/`seperti sebuah proyek perangkat lunak sepenuhnya — dengan build Gradle sendiri, CI sendiri, sendiri tata kelola</code>.agents/`.</p> </div> <div class="paragraph"> <p>Tetapi artikel blog bukan kode. Ini adalah <strong>data</strong>. redaksi** Lingkaran 2 — sama seperti kerangka`office/pilotage/` atau formasi dari`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>Yang berubah:</p> </div> <div class="ulist"> <ul> <li> <p>Artikel ada di`office/`→ kerahasiaan Cercle 2</p> </li> <li> <p>Tugas`publishSite`menjadi sebuah capability dari`engine`</p> </li> </ul> </div> <div class="paragraph"> <p>melalui`bakery-gradle`— plugin menerima satu`FileTree`, dia tidak tahu bahwa artikel-artikel berasal dari`office/`</p> </div> <div class="ulist"> <ul> <li> <p>Satu saja CI, satu saja tata kelola — duplikasi nol</p> </li> <li> <p>Klasifikasi Vision/Opinion (Aturan 2bis) berlaku secara otomatis :</p> </li> </ul> </div> <div class="paragraph"> <p>artikel di`office/`disaring sebelum publikasi</p> </div> <div class="sect2"> <h3 id="_bakery_gradle_tidak_peduli">bakery-gradle tidak peduli</h3> <div class="paragraph"> <p>Dan itulah yang indah. Plugin tersebut`bakery-gradle`tidak telah diubah. Menerima direktori konten AsciiDoc, ia menghasilkan HTML, ia push on GitHub Pages. bahwa direktori ini dinamakan`site/jbake/content/` ou <code>office/sites/cheroliv/</code>— plugin tidak peduli.</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>Kontrak interface adalah tugas Gradle. Bukan API REST. Bukan webhook. Tugas — bertipe, dapat diuji, dapat dieksekusi secara lokal dan dalam CI.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dampak_pada_agen_tata_kelola">Dampak pada Agen Tata Kelola</h2> <div class="sectionbody"> <div class="paragraph"> <p>Granularisasi OSS/CSS mengubah tata kelola agen pada tiga poin:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>RAG public</strong> : lingkup indeksasi beralih dari`foundry/**`</p> </li> </ol> </div> <div class="paragraph"> <p>à <code>foundry/public/<strong></code>+<code>office/Vision/</strong></code>. Kode sumber tertutup dikeluarkan dari indeks oleh konfigurasi tugas, bukan oleh prompt.</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Knowledge Graph</strong> : graphify-gradle menghasilkan dua graf :</p> </li> </ol> </div> <div class="paragraph"> <p>*<code>office/graph.json</code>(publik) — hubungan antara artefak OSS + office/Vision *<code>configuration/graph_private.json</code>(gitignored, pribadi) — hubungan antara artefak CSS, tidak pernah dipublikasikan</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>penyetelan halus dataset</strong> :`codebase-gradle`sekarang memiliki sumber :</p> </li> </ol> </div> <div class="paragraph"> <p>*<code>OSS/</code>→ datasets publik (model komunitas, benchmarks) *<code>CSS/</code>→ kumpulan data pribadi (model internal, fine-tuning proprietary)</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_kita_dapatkan_dan_apa_yang_kita_hilangkan">Apa yang Kita Dapatkan (Dan Apa yang Kita Hilangkan)</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">Sebelum (folder datar)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Setelah (OSS/CSS + office/sites)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ls foundry/</code>→ kampuran publik/privat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ls foundry/public/</code>→ semua dapat dipublikasikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG mengindeks semua tanpa diskriminasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">RAG mengindeks`OSS/`+`office/Vision`hanya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak dapat mengetahui apakah proyek itu open source</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">jalan`OSS/` ou `CSS/`yang dikatakan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">cheroliv.com memiliki CI sendiri, tata kelola sendiri</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CI dan tata kelola dibagikan bersama dalam engine</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Artikel blog berada di repositori 'code'</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Artikel blog ada di`office/sites/`— data, bukan kode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Risiko kebocoran kode sumber tertutup dalam embeddings publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mustahil secara struktural —`CSS/`di luar lingkup RAG</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Biaya tunggal : satu`git mv`global pada 17 repositori OSS + sebuah refactor dari <code>build.gradle.kts</code> de <code>engine</code>. Ini adalah migrasi dingin — Tidak ada data selama penerbangan, tidak ada pengguna yang terpengaruh.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_sinyal_fisik_mengalahkan_sinyal_perangkat_lunak">Kesimpulan: Sinyal Fisik mengalahkan Sinyal Perangkat Lunak</h2> <div class="sectionbody"> <div class="paragraph"> <p>Yang saya lakukan siang ini adalah mengganti sebuah konvensi tak terlihat. dengan pemisahan yang terlihat di zona`foundry/<code>. Sebelum, Anda harus <strong>mengetahui</strong> bahwa`edster/`was sumber tertutup. Sekarang, Anda <strong>lihat</strong> — nama folder adalah`CSS/</code>.</p> </div> <div class="paragraph"> <p>Ini adalah prinsip yang sama seperti izin Unix, VLAN jaringan, atau kompartemen tahan api dalam basis data. Keamanan tidak boleh Ini harus menjadi informasi yang harus Anda ingat. Ini harus menjadi sebuah properti. <strong>fisik</strong>sistem.</p> </div> <div class="paragraph"> <p>Granularisasi OSS/CSS adalah penerapan prinsip ini dalam bidang. dari tata kelola LLM. LLM tidak perlu tahu bahwa Edster adalah rahasia. Dia perlu tidak mampu mengindeksnya.</p> </div> <div class="paragraph"> <p>Dan itu persis apa`CSS/`menjamin.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="0118_matrice_gouvernance_llm_zone_acces_workspace_post.html">Pasal 0117 — Matriks Tata Kelola LLM</a></p> </li> <li> <p><a href="0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html">Artikel 0114 — Lingkaran Kepercayaan</a></p> </li> <li> <p>Artikel 0116 — Kompartimentasi Epistemik Otomatis</p> </li> <li> <p><a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Article 0108 — Mengawal sebuah agen AI dengan AsciiDoc</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0116_compartimentage_epistemique_automatise_llm_post.html Sat, 2 May 2026 00:00:00 +0000 blog/2026/0116_compartimentage_epistemique_automatise_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_berpikir_bebas_tanpa_mempublikasikan_apapun">Masalah: Berpikir Bebas tanpa Mempublikasikan Apapun</a></li> <li><a href="#_pola_stimulus_lahir_menetapkan_mengencerkan_mati">pola STIMULUS — lahir, menetapkan, mengencerkan, mati</a></li> <li><a href="#_delegasi_ke_llm_mengapa_llm_itu_yang_memfilter">Delegasi ke LLM : Mengapa LLM itu yang memfilter</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 10 minutes</div> <p>LLM saya tidak hanya mengeksekusi tugas Gradle saya. Ia adalah penjaga perbatasan antara pikiran pribadi saya dan ekspresi publik saya. Setiap ide diklasifikasikan — Visi, Opini, Strategi — sebelum dirutakan. Ini adalah cara pembagian otomatis epistemik ini melindungi kebun mental saya tanpa membuat saya terdiam.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_berpikir_bebas_tanpa_mempublikasikan_apapun">Masalah: Berpikir Bebas tanpa Mempublikasikan Apapun</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ketika seorang pengembang solo mendokumentasikan proses pemikirannya dengan LLM, ia bertemu dengan paradoks:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">CAPTURE TOUT (Cercle 0, jardin secret) ├→ Brain dump libre, pas de censure ├→ Idées brutes, spéculations, intuitions non vérifiées ├→ Allers-retours LLM : challenger, itérer, raffiner └→ Le LLM voit TOUT — le bon, le flou, l'embryonnaire PUBLICATION SÉLECTIVE (Cercle 4, blog public) ├→ Uniquement les décisions actées ├→ Uniquement les patterns testés (>100 tests PASS) ├→ Uniquement ce qui a de la valeur pour le lecteur └→ JAMAIS une spéculation présentée comme une vérité</code></pre> </div> </div> <div class="paragraph"> <p>Di antara kedua ekstrem ini, ada<strong>penapis</strong>. Pertanyaannya adalah: siapa yang melakukannya? Seorang manusia lelah di akhir sesi? Skrip regex yang naif? Atau LLM itu sendiri, yang sudah membaca semuanya?</p> </div> <div class="paragraph"> <p>Jawaban saya : LLM.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pola_stimulus_lahir_menetapkan_mengencerkan_mati">pola STIMULUS — lahir, menetapkan, mengencerkan, mati</h2> <div class="sectionbody"> <div class="paragraph"> <p>STIMULUS adalah sebuah file`.adoc`temporaire di akar workspace (Lingkaran 0). Nama nya mengikuti konvensi yang evokatif —<code>PICTURE_ME_ROLLIN.adoc</code>, <code>HOLD_MY_BEER.adoc</code>, <code>ONCE_UPON_A_TIME.adoc</code>— yang menangkap niat eksploratif saat ini.</p> </div> <div class="paragraph"> <p>Siklus hidupnya tanpa belas kasihan:</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>Seorang rangsangan yang bertahan lebih dari 2 sesi tanpa pengenceran adalah anti-pola. Entah informasi terlalu penting untuk disimpan di file sementara (→ pengenceran), atau informasi terlalu kabur untuk layak ada (→ menghapus).</p> </div> </div> </div> <div class="sect1"> <h2 id="_delegasi_ke_llm_mengapa_llm_itu_yang_memfilter">Delegasi ke LLM : Mengapa LLM itu yang memfilter</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya tidak meng-hardcode klasifikasi Vision/Opinion di Kotlin. Saya menyuntikkan di<strong>prompt sistem</strong>dari 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 (>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 ---- LLM membaca instruksi ini**sebelum**untuk memproses sesi. Dia berada dalam konteks imediatnya, bukan dalam file terpisah. Ini adalah *prompt engineering deterministik* : perilaku muncul dari teks yang disuntikkan, bukan dari klasifikator eksternal. === Kenapa ini bekerja — dan Kenapa ini kontraintuitif Reaksi standar: « Kamu menyerahkan klasifikasi kepada AI? Bagaimana jika ia salah? Jawaban: manusia tidak lebih baik pada pukul 2 pagi. Perbedaannya, LLM itu membaca SEMUA. Dia memiliki konteks lengkap sesi dan dokumen target. Dia tahu bahwa`VPS ECO-16 12€ HT`adalah keputusan infrastruktur (VISION) sedangkan`« le TTS ElevenLabs sonne plus naturel que Coqui »`adalah sebuah opini yang belum diverifikasi oleh sebuah benchmark. Manusia, pada akhir sesi, membaca secara diagonal dan melakukan yang terbaik. LLM membaca secara menyeluruh dan menerapkan grade sistematis. Hasilnya adalah**lebih andal**, tidak kurang. Dan untuk 20% kasus ambigu — zona abu-abu tempat bahkan LLM ragu — jawabannya bukan « menambahkan kode ». Jawabannya adalah**LangGraph4j**(EPIC 13) : grafik keadaan yang, untuk kasus ambigu, mengaktifkan node Human-in-the-Loop dan mengembalikan ke manusia untuk keputusan. Tapi untuk 80% kasus yang jelas, LLM cukup. == Pipa Lengkap : dari Brain Dump ke Blog Post Berikut adalah alur lengkap — dari ide mentah sampai artikel dipublikasikan — dengan LLM sebagai satu-satunya 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 ---- Pengembang tidak menulis artikel. Ia menantang, meninjau, memvalidasi. LLM menulis. Loop adalah: 1. Brain dump bebas → tanpa sensor 2. Klasifikasi epistemik oleh LLM → tidak ada bocoran 3. Penulisan oleh LLM → tanpa procrastinasi 4. Pemeriksaan manusia → tidak ada kesalahan Penekanan sejarah — « Saya tidak punya waktu untuk menulis » — telah dihapus. LLM melakukan sebagian besar pekerjaan. Manusia melakukan yang hanya dapat dilakukan oleh manusia: menilai. == Tiga Dokumen Akar — Bagaimana Informasi Menemukan Tempatnya Setiap dokumen target memiliki peran spesifik dalam kaskade penurunan: [cols="1,3,2"] |=== |dokumen |Apa yang ia terima |Jenis konten |`WORKSPACE_AS_PRODUCT.adoc` |Keputusan arsitektur, stack teknis, roadmap, model bisnis |visi + strategi |`WHAT_THE_GAMES_BEEN_MISSING.adoc` |Pola, pelajaran, anti-pola, ontologi, aturan formal |VISION (pola yang telah diuji) |`WORKSPACE_VISION.adoc` |Konteks sesi, riwayat keputusan, poin infrastruktur |VISI + STRATEGI (konteks) |`AGENT_GOVERNANCE.adoc` |Aturan tata kelola, portofolio proyek, prosedur |VISI (tata kelola) |**Blog cheroliv.com** |Artikel publik, nilai untuk pembaca eksternal |Visi hanya |=== Sama stimulasi dapat memenuhi kebutuhan 4 dokumen + blog — setiap destinasi menerima bagian yang relevan, tanpa redundansi, tanpa kontradiksi. Ini adalah yang terjadi untuk`PICTURE_ME_ROLLIN.adoc`(3 Mei 2026) : | Informasi | Klasifikasi | Tujuan | Inventaris 13+ proyek foundry/ | VISION | WORKSPACE_AS_PRODUCT | VPS-2 OVH, edster.cloud, 8.49€/bulan | VISI | WORKSPACE_AS_PRODUCT + WORKSPACE_VISION | | « Pasar Afrika siap untuk uang seluler » | STRATÉGIE | WORKSPACE_AS_PRODUCT (section business) | | « DeepSeek > Kimi > GLM untuk konteks panjang » | OPINION → VISION | Dikenakan pembatasan lalu dipromosikan setelah benchmark (artikel 0112) | | Karyawan Sintetis sebagai produk akhir | STRATEGI | WORKSPACE_AS_PRODUCT (tanpa blog) | == Pola Baby-Step + TestContainer + Dokumen Hidup — Kode yang Menguji Diri Sendiri Pola STIMULUS/Dilution mengatur pemikiran. Setara untuk kode-nya adalah pola Baby-Step/TestContainer/Doc Vivante, yang divalidasi oleh plantuml-gradle (380/380 tes LULUS, 137 sesi tanpa kebocoran Docker) : [cols="1,3"] |=== |Prinsip |aturan |**langkah bayi** |Tidak lebih dari 3 poin per US. Jika satu US menimbulkan ketakutan, potong. Satu US dengan 1 poin yang melewati > satu US dengan 8 poin yang menunggu. |**TestContainer pertama** |Sebelum kode bisnis, kontainer. Uji infra lulus → lingkungan stabil terjamin. |**Dataset komite** |Subhimpunan minimal tetapi representatif dalam`src/test/resources/`, tanpa PII. Dapat di-klon, dapat diluncurkan. |**Dokumentasi hidup** |Setiap test Cucumber = satu kalimat dalam bahasa alami. Kode sumber adalah spec yang dapat dieksekusi. Tidak ada dokumen Markdown yang harus dipelihara. |**Pembersihan otomatis** |Zero kebocoran sumber daya. Wadah yatim,`/tmp/gradle-test-*`: semua bersih |=== Pola ini adalah alasan mengapa plantuml-gradle tidak pernah mengalami regresi Docker dalam 138 sesi. Dia memastikan bahwa kode yang berkomunikasi dengan infrastruktur eksternal (PostgreSQL, Redis, Kafka) selalu diuji di lingkungan yang identik dengan produksi — terkontrol versinya, dapat direproduksi, dapat dijalankan dengan satu perintah. == Kesimpulan: kebebasan berpikir tanpa ketakutan mempublikasikan Kompartimentasi epistemologis yang diotomatisasi bukan alat sensor. Adalah sebagai**pembebas**. Ia memungkinkan untuk berpikir secara bebas, untuk spekulasi tanpa filter, untuk brain-dumping segala yang ada di pikiran — tanpa pernah takut bahwa sebuah ide embryonnaire akan terekspos di blog. LLM adalah penjaga batas ini. Ia membaca semuanya. Ia mengklasifikasikan. Ia meredam apa yang layak untuk bertahan. Ia membatasi apa yang harus tetap pribadi. Ia menyusun apa yang dapat dipublikasi. Dan developer itu, dia, tetap memegang kata terakhir: membaca, menantang, memvalidasi. Menilai. Ini adalah pembagian kerja yang tidak dimiliki oleh pengembang solo: sebuah karyawan sintetis yang mengurus administrasi mental, sehingga manusia dapat fokus pada apa yang ia lakukan dengan baik — merancang, merancang arsitektur, dan mengambil keputusan. == Referensi * Artikel tentang governanasi agen Eager/Lazy :link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Mengatur Agent AI dengan AsciiDoc] * Artikel tentang ontologi spasial dan lingkaran kepercayaan :link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Ontologi spasial sebagai mekanisme penyelarasan] * Artikel tentang Anonymiseur MVP0 :link:../2026/0115_anonymiseur_dataset_mvp0_realite_augmentee_llm_post.html[Pegawai pertama kami : Penganonim Datasets] * Artikel tentang perbandingan LLMs konteks panjang :link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1] * Artikel tentang mekanisme agen backup :link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window dan Gelombang Dingin] ----</code></pre> </div> </div> </div> </div> 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="#_masalah_yang_membuat_semua_orang_melarikan_diri">Masalah yang membuat semua orang melarikan diri</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Saya tidak mempekerjakan seorang LLM. Saya mempekerjakan seorang penononim. Sebelum melakukan RAG pgvector, sebelum melakukan fine-tuning pada ahli CDA/FPA, sebelum menyediakan workspaces klien — seseorang harus membersihkan toilet data. Pegawai ini adalah ahli anonimisasi (MVP0, EPIC 2 dari codebase-gradle). Dan itulah yang menjadikan produk tersebut dapat dipasarkan.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_yang_membuat_semua_orang_melarikan_diri">Masalah yang membuat semua orang melarikan diri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Semua startup AI yang memproses data pelatihan menghadapi dinding yang sama :</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 ---- Hasil: atau kamu melakukan RAG pada data kotor (halusinasi PII, tidak kepatuhan GDPR, risiko hukum), atau kamu tidak melakukan apa-apa (tidak ada produk). Cara ketiga — membersihkan secara manual — tidak dapat diskalakan. Jawaban saya: tidak menghindari masalah. L'**mengotomatisasi**. == MVP0: Penyamar, Pekerja pertama yang dipekerjakan dalam masa percobaan MVP0 bukan fitur. Ini adalah**ahli kenyamanan**— seorang pekerja yang mengerjakan pekerjaan kotor yang bodoh dan jahat, dan yang tidak ada yang mau membicarakan dalam pitch decks. Apa yang dia lakukan : [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 ---- Dia mendeteksi pola-pola yang paling jelas terlebih dahulu (emails)`.*@.*`, token`sk-*`, `ghp_*`, IPs), lalu ia belajar. Masa percobaan, itu adalah itu: kita memvalidasi bahwa ia tidak membiarkan negatif palsu lolos sebelum mengangkatnya tetap. == Apa yang dibuka oleh MVP ini (dan ini bukan hanya kepatuhan) Anonimisasi seperti MVP0 bukan tol GDPR sebelum jalan raya. Itu adalah jalan raya itu sendiri. Berikut apa yang dibukanya : === Saat ini: Realitas Augmented dalam 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 tidak mencari di data kotor — ia mencari di ruang**bersih oleh konstruksi**. Ini mengubah semuanya untuk kualitas jawaban: LLM tidak menghabiskan waktunya untuk mengelak dari PII yang dia kenali tetapi tidak boleh disebutkan. === Masa depan : Fine-Tuning pada Data Sehat [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) ---- Fine-tuning pada data mentah adalah potensi bencana hukum. Pada data bersih, ini adalah**metode yang dapat direproduksi**. Setiap klien mengakumulasi datasetnya yang telah dibersihkan, setiap klien dapat melakukan fine-tuning pada pakar bisnisnya atas datanya — tanpa pernah mengekspos data pribadi. == Mengapa itu dapat dipasarkan? Bukan « alat kepatuhan GDPR ». Ini adalah**metode yang dapat direproduksi yang mengubah masalah universel menjadi aset**: 1. *Semua perusahaan pelatihan memiliki data kotor* — ini masalahnya 2. *Tidak ada yang memiliki pipeline pembersihan otomatis multi-sumber* — itu adalah pasar 3. *Perulangan: anonymisasi → RAG → fine-tuning bersifat proprietor* — itu adalah hambatan SaaS Edster (MVP3) tidak akan menjual « workspace Gradle ». Ia akan menjual loop tertutup ini. Dan MVP0 adalah pintu masuk. == Format SQL sebagai Cara Ketiga dari Konteks Pengimporan data terstruktur bukan hanya format pertukaran. Skema SQL (DDL) memuat**model entitas-relasi domain**: [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é ); ---- DDL ini, setelah dianonimkan (baris 4), menjadi sumber konteks untuk LLM. Bukan teks —**model bisnis**. RAG memberikan konten (similaritas vektor), Graphify memberikan relasi (struktur tepat), dan skema SQL memberikan**Desain Berbasis Domain implisit**: bounded contexts, agrégats, value objects. LLM memahami bisnis karena ia membaca skemanya. == Roadmap: dari MVP0 ke 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 ---- Setiap MVP bergantung pada yang sebelumnya. Tidak ada yang dapat dikirim tanpa MVP0. Ini adalah alasan mengapa Anonymiseur bukan « P0 » dalam backlog — ia adalah**MVP0**. Ini adalah deliverable komersial pertama, dan semua sisanya bergantung pada keberhasilannya. == Kesimpulan : pekerjaan tidak terlihat yang membuat segalanya mungkin Dalam startup konvensional, pembersihan data di-outsource, dilakukan secara manual, atau diabaikan. Dalam arsitektur ini, ini adalah**inti produk**. L'Anonymiseur adalah karyawan pertama karena tanpa dia, tidak ada yang berfungsi : * Tanpa MVP0 → tidak ada RAG legal (MVP1) * Tanpa MVP0 → tidak ada fine-tuning tanpa kebocoran data (EPIC 5) * Tanpa MVP0 → tidak ada SaaS kredibel (MVP3) * Tanpa MVP0 → tidak ada realitas augmentasi dalam prompt * Tanpa MVP0 → tidak ada jalur ketiga konteks (SQL DDD) Dia melakukan pekerjaan kotor. Dia tidak akan pernah disebutkan dalam pitch. Tapi dia yang menjaga pabrik berjalan. Dan itulah mengapa kami merekrutnya terlebih dahulu. == Referensi * Article tentang ontologi spasial dan lingkaran kepercayaan :link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Ontologi Spasial sebagai Mekanisme Penyelarasan] * Artikel tentang governansi agen Eager/Lazy :link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Mengatur Agent AI dengan AsciiDoc] * Artikel tentang mekanisme Hot/Warm/Cold :link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window dan Gelombang Dingin] * Artikel tentang perbandingan dari tiga LLM :link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1] ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/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="#_masalah_yang_membuat_semua_orang_lari">Masalah yang membuat semua orang lari</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Saya tidak merekrut sebuah LLM. Saya merekrut seorang penganonim. Sebelum melakukan RAG pgvector, sebelum fine-tuning ahli CDA/FPA, sebelum menyediakan workspace klien — seseorang harus membersihkan toilet data. Pegawai ini adalah ahli anonymisasi (MVP0, EPIC 2 dari codebase-gradle). Dan itulah yang membuat produk dapat dipasarkan.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_yang_membuat_semua_orang_lari">Masalah yang membuat semua orang lari</h2> <div class="sectionbody"> <div class="paragraph"> <p>Semua startup AI yang memanipulasi data pelatihan menabrak dinding yang sama :</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 ---- Hasil: baik kamu melakukan RAG pada data kotor (halusinasi PII, tidak kepatuhan terhadap GDPR, risiko hukum), atau kamu tidak melakukan apa-apa (tidak ada produk). Cara ketiga — membersihkan secara manual — tidak dapat diskalakan. Jawaban saya: jangan mengelakari masalah. L'**mengotomatisasi**. == MVP0: Anonimizer, pertama yang dipekerjakan dalam masa percobaan MVP0 bukanlah sebuah fitur. Ini adalah**pakar kenyamanan**— seorang pekerja yang mengerjakan pekerjaan kotor, bodoh dan jahat, dan yang tidak ada yang ingin membicarakan di dalam dek pitch. Yang dilakukan olehnya: [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 ---- Deteksi pola yang paling jelas terlebih dahulu (email`.*@.*`, token`sk-*`, `ghp_*`, IPs), kemudian ia belajar. Masa uji: ini adalah kita memastikan bahwa dia tidak membiarkan negatif palsu lolos sebelum kita mengangkatnya sebagai tetap. == Apa yang Dibuka oleh MVP Ini (dan ini bukan hanya kepatuhan) Anonymisasi seperti MVP0 bukan tol RGPD sebelum jalan raya. Ini adalah jalan raya itu sendiri. Berikut ini adalah apa yang dibukanya : === Sekarang: Realitas Augmented dalam 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 tidak mencari di data kotor — ia mencari di sebuah ruang**bersih oleh konstruksi**. Ini mengubah segalanya untuk kualitas jawaban: LLM tidak menghabiskan waktunya untuk mengelakari PII yang dikenal tetapi tidak boleh disebutkan. === Masa depan : Fine-Tuning pada Data Sehat [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) ---- Fine-tuning pada data mentah adalah potensi bencana hukum. Pada data bersih, ini adalah**metode yang dapat direproduksi**. Setiap klien mengakumulasi dataset yang telah dibersihkan miliknya, setiap klien dapat melatih ulang ahli bisnisnya pada data mereka — tanpa pernah mengekspos data pribadi. == Mengapa Ini Dapat Dipasarkan Ini bukan « alat kepatuhan GDPR ». Ini adalah**metode yang dapat direproduksi yang mengubah masalah universal menjadi aset**: 1. *Semua perusahaan pelatihan memiliki data kotor* — ini adalah masalah 2. *Tidak ada yang memiliki pipeline pembersihan multi-source otomatis* — itu adalah pasar 3. *Lingkaran: anonimisasi → RAG → fine-tuning adalah proprietari* — itu adalah hambatan SaaS Edster (MVP3) tidak akan menjual « sebuah workspace Gradle ». Dia akan menjual loop yang tertutup ini. Dan MVP0 adalah pintu masuk. == Format SQL sebagai Cara Ketiga dari Konteks Import data terstruktur bukan hanya format pertukaran. Skema SQL (DDL) memuat**model entitas-relasi domain**: [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é ); ---- DDL ini, setelah dianonimkan (baris 4), menjadi sumber konteks untuk LLM. Bukan teks —**model bisnis**. RAG memberikan konten (kesamaan vektor), Graphify memberikan relasi (struktur tepat), dan skema SQL memberikan le**Domain-Driven Design implisit**bounded contexts, agregat, value objects. LLM memahami bidang karena ia membaca skemanya. == Peta jalan: dari MVP0 ke 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 ---- Ini adalah alasan mengapa Anonymiser tidak « P0 » dalam backlog — ia adalah**MVP0**. Ini adalah produk yang pertama yang dapat diperjualbelikan, dan seluruh hal lainnya bergantung pada keberhasilannya. == Kesimpulan : Pekerjaan Tak Terlihat yang Membuat Semua Hal Mungkin Dalam startup konvensional, pembersihan data dilakukan secara eksternal, secara manual, atau diabaikan. Dalam arsitektur ini, ini adalah**inti dari produk**. Anonymiseur adalah karyawan pertama karena tanpa dia, tidak ada yang berfungsi : * Tanpa MVP0 → tidak ada RAG legal (MVP1) * Tanpa MVP0 → tidak ada fine-tuning tanpa kebocoran data (EPIC 5) * Tanpa MVP0 → tidak ada SaaS yang kredibel (MVP3) * Tanpa MVP0 → tidak ada realitas augmentasi dalam prompt * Tanpa MVP0 → tidak ada jalur konteks ketiga (SQL DDD) Dia melakukan pekerjaan kotor. Dia tidak akan pernah disebut dalam pitch. Tetapi dia yang menjaga pabrik berjalan. Dan itulah sebabnya kita merekrutnya terlebih dahulu. == Referensi * Article tentang ontologi spasial dan lingkaran kepercayaan :link:../2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html[Ontologi Spasial sebagai Mekanisme Penyelarasan] * Artikel tentang tata kelola agen Eager/Lazy :link:../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Mengatur Agen AI dengan AsciiDoc] * Artikel tentang mekanisme Hot/Warm/Cold:link:../2026/0110_mecanisme_backup_contexte_agent_post.html[Sliding Window dan Gelombang Dingin] * Artikel tentang perbandingan tiga LLMs :link:../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html[DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1] ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html Thu, 30 Apr 2026 00:00:00 +0000 blog/2026/0114_gouvernance_cercles_confiance_ontologie_spatiale_alignement_llm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_catatan_prompt_engineering_adalah_sebuah_kastil_pasir">Catatan: Prompt Engineering adalah sebuah kastil pasir</a></li> <li><a href="#_empat_lingkaran_kepercayaan_ontologi_spasial">Empat Lingkaran Kepercayaan: Ontologi Spasial</a> <ul class="sectlevel2"> <li><a href="#_taman_rahasia_ruang_di_luar_cvs">Taman Rahasia: Ruang Di Luar CVS</a> <ul class="sectlevel3"> <li><a href="#_gitignore_sebagai_konfigurasi_tata_kelola">.gitignore` sebagai Konfigurasi Tata Kelola</a></li> <li><a href="#_mekanisme_snapshot">Mekanisme Snapshot</a></li> </ul> </li> <li><a href="#_vault_configuration_seperti_spring_cloud_config">Vault : <code>configuration/</code> seperti Spring Cloud Config</a></li> <li><a href="#_perpustakaan_office_sebagai_data_konsumsi">Perpustakaan: <code>office/</code> sebagai Data Konsumsi</a></li> <li><a href="#_forges_foundry_sebagai_implementasi">Forges : <code>foundry/</code> sebagai Implementasi</a></li> </ul> </li> <li><a href="#_procontra_alignasi_spasial_vs_alignasi_prompt">Pro/Contra : Alignasi Spasial vs Alignasi Prompt</a> <ul class="sectlevel2"> <li><a href="#_pendekatan_klasik_penyelarasan_dengan_prompt_awal">Pendekatan Klasik: Penyelarasan dengan Prompt Awal</a></li> <li><a href="#_pendekatan_ini_penyelarasan_melalui_ontologi_spasial">Pendekatan ini : Penyelarasan melalui Ontologi Spasial</a></li> </ul> </li> <li><a href="#_aljabar_relasional_dari_workspace_dan_delta_yang_dapat_diamati">Aljabar Relasional dari Workspace dan Delta yang dapat diamati</a></li> <li><a href="#_vektor_komposit_konteks_rag_pgvector_graphify">Vektor Komposit Konteks : RAG + pgvector + Graphify</a> <ul class="sectlevel2"> <li><a href="#_komponen_1_rag_langchain4j_postgresql_pgvector">Komponen 1 — RAG LangChain4j + PostgreSQL pgvector</a></li> <li><a href="#_komponen_2_knowledge_graph_graphify">Komponen 2 — Knowledge Graph Graphify</a></li> <li><a href="#_komponen_3_graphify_inkremental_sparse_dapat_diagregasikan_dapat_dikonsumsi">Komponen 3 — Graphify Inkremental : Sparse, Dapat Diagregasikan, Dapat Dikonsumsi</a></li> </ul> </li> <li><a href="#_klasifikasi_otomatis_gdpr_llm_sebagai_router">Klasifikasi Otomatis GDPR : LLM sebagai Router</a></li> <li><a href="#_roadmap_dari_asciidoc_ke_langgraph4j">Roadmap : dari AsciiDoc ke LangGraph4j</a></li> <li><a href="#_apa_yang_diselesaikan_oleh_arsitektur_ini_dan_apa_yang_tidak_diselesaikan">Apa yang Diselesaikan oleh Arsitektur Ini (dan apa yang tidak Diselesaikan)</a></li> <li><a href="#_kesimpulan_arsitektur_sebagai_diskursus">Kesimpulan: Arsitektur sebagai Diskursus</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>waktu membaca : 20 minutes</p> </div> <div class="paragraph"> <p>Teknik prompt engineering itu rapuh. Pada 80 000 token, aturan penyelarasan Anda terbenam dalam noise, dan LLM lupa apa yang Anda minta di awal percakapan. Solusi saya? Tidak menyelaraskan melalui teks, tetapi melalui l'<strong>ruang</strong>. Saya telah menyusun workspace pengembangan saya menjadi empat lingkaran kepercayaan konsentris — dari taman rahasia intim hingga pabrik publik — dan setiap lingkaran adalah area fisik dari sistem berkas. LLM tidak perlu dikonfirmasi ulang aturan-aturannya: jalur file mengandung aturan-aturannya. Berikut ini cara kerjanya, dan mengapa arsitektur perataan berbasis ruang ini lebih tahan daripada`system prompt`500 baris.</p> </div> <div class="paragraph"> <p>Ini adalah artikel yang panjang.<br> Duduklah dengan nyaman.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">ketuk</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_catatan_prompt_engineering_adalah_sebuah_kastil_pasir">Catatan: Prompt Engineering adalah sebuah kastil pasir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Selama tiga minggu, saya telah mengembangkan plugin Gradle dengan Opencode, menggunakan tiga LLM yang berbeda — Kimi K2.6, GLM-5.1, dan DeepSeek-V4-Pro (yang satu-satunya yang masih bertahan, tetapi itu adalah cerita lain<a href="0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">Déjà couverte ici.</a>). Metode tata kelola agen<a href="0108_gouvernance_agent_opencode_eager_lazy_post.html">Je l’ai documentée en détail dans un précédent article.</a> berdasarkan file AsciiDoc —<code>AGENT.adoc</code>, <code>INDEX.adoc</code>, <code>PROMPT_REPRISE.adoc</code>— yang memuat ~30 000 token aturan, backlog, dan riwayat di setiap awal sesi.</p> </div> <div class="paragraph"> <p>Dan meskipun infrastruktur dokumen ini, dua hal membuat saya terkesan:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>LLM lupa.</strong> Meskipun dengan aturan mutlak di awal setiap file EAGER, di atas 60 000 token kumulatif (konteks awal + percakapan), Kimi K2.6 telah mulai mengusulkan`Write`menggugat pada file konfigurasi. GLM-5.1 salah mengidentifikasi token Firebase sebagai placeholder yang harus diganti. Aturan telah ditulis — LLM tidak lagi <strong>melihatnya</strong>.</p> </li> <li> <p><strong>Tata kelola itu sendiri menjadi masalah.</strong> Setelah mengimplementasikan mekanisme Hot/Warm/Cold<a href="0110_mecanisme_backup_contexte_agent_post.html">Article sur la rotation de backup.</a> untuk menghindari ledakan konteks, file-file EAGER saya masih berat 1414 baris<a href="0111_audit_contexte_agent_post.html">J’ai documenté cet audit ici.</a> Tata kelola — yang dirancang untuk melindungi LLM dari saturasi — justru menyaturasi LLM.</p> </li> </ol> </div> <div class="paragraph"> <p>Saya membutuhkan sebuah mekanisme penyelarasan yang tidak bergantung pada jumlah token dalam prompt.</p> </div> <div class="paragraph"> <p>Jawaban: berhenti menyelaraskan menurut teks, dan mulai menyelaraskan dengan l'<strong>ruang</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_empat_lingkaran_kepercayaan_ontologi_spasial">Empat Lingkaran Kepercayaan: Ontologi Spasial</h2> <div class="sectionbody"> <div class="paragraph"> <p>folder saya`workspace/<code>(di</code>~/workspace/`) bukan <strong>pas</strong> sebuah repositori Git. Ini adalah akar dari seluruh pekerjaan saya — kode, dokumentasi, pelatihan, infrastruktur. Dan ia terstruktur dalam empat zona yang bukan konvensi pengaturan, tetapi<strong>lingkaran kepercayaan konsentrik</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">tingkat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">label</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Zona fisik</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">Keterlihatan</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>Taman rahasia</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`workspace/`akar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Intim — pikiran bebas, tanpa commit, tanpa publikasi</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>kotak aman</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">Rahasia, token, arsip visi. Satu orang saja.</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>perpustakaan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>office/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Git pribadi (luas)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Data pedagogi, SPG/SPD, skema JSON. Lingkaran kepercayaan teridentifikasi.</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>Bengkel (publik)</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 publik (Apache 2.0)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kode sumber, plugin, tes, dokumentasi teknis.</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Tidak ada level 3 dalam tabel. Level 3 adalah level <strong>transitoire</strong> : itu adalah konten dari`office/`yang telah dianonimkan dan siap untuk dipublikasikan sebagai data terbuka. Tidak memiliki zona fisik khusus — ini adalah kondisi data, bukan lokasi.</p> </div> <div class="paragraph"> <p>Setiap level menjawab pertanyaan spesifik :</p> </div> <div class="ulist"> <ul> <li> <p>Di mana menaruh ide yang belum siap untuk dibagikan, bahkan dengan lingkaran terbatas?</p> </li> <li> <p><strong>Di mana menyimpan token API agar tidak bocor ?</strong> → selembari (<code>configuration/</code>) Fisik terisolasi. Tidak ada repositori lain yang dapat mereferensikannya secara kesalahan.</p> </li> <li> <p><strong>Dimana membangun bersama sebuah katalog pelatihan dengan suatu OF pilot?</strong> → Perpustakaan (<code>office/</code>). Berversi, kolaboratif, tetapi pribad</p> </li> <li> <p><strong>Dimana mengindustrialisasi plugin Gradle sumber terbuka?</strong> → pabrik kode`foundry/`). Publik, dapat di-fork, diuji di CI.</p> </li> </ul> </div> <div class="paragraph"> <p>Ontologi ini<strong>dapat dikonsumsi oleh LLM</strong>. Saat ia membaca sebuah file dalam`foundry/plantuml-gradle/src/`, dia mengetahui secara tersirat: "saya berada di lingkaran 4 — kode publik, tes wajib, tidak ada rahasia, tidak ada data pendidikan". Dia tidak memerlukan prompt yang mengingatkannya.</p> </div> <div class="sect2"> <h3 id="_taman_rahasia_ruang_di_luar_cvs">Taman Rahasia: Ruang Di Luar CVS</h3> <div class="paragraph"> <p>Ini adalah konsep yang paling penting — dan yang paling tidak intuitif.</p> </div> <div class="paragraph"> <p>akar`workspace/<code>tidak memiliki</code>.git/<code>. Dokumen yang tinggal di sana (`WORKSPACE_VISION.adoc</code>, <code>WORKSPACE_AS_PRODUCT.adoc</code>, <code>WORKSPACE_ORGANIZATION.adoc</code>— dan yang Anda baca saat ini, yang turun dari itu) tidak dimaksudkan untuk ditaruh dalam sistem kontrol versi, dibagikan, atau bahkan dibaca oleh siapa pun selain saya. Ini adalah<strong>pikiran yang sedang tumbuh</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>Taman rahasia itu adalah <strong>out-of-CVS</strong> secara alami. Ketiadaan pencatatan versi adalah kondisi kebebasan berpikir. Di sini tidak ditulis untuk dibaca — ditulis di sini untuk memperjelas visi sendiri.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Namun kebebasan ini memiliki biaya: satu`rm`kecelakaan, dan ini adalah bulan-bulan pemikiran strategis yang menghilang. Solusinya bukanlah untuk membuat versi taman (karena itu akan menghancurkannya) — adalah untuk<strong>mencerminkan</strong>dalam lingkaran yang paling terbatas</p> </div> <div class="sect3"> <h4 id="_gitignore_sebagai_konfigurasi_tata_kelola">.gitignore` sebagai Konfigurasi Tata Kelola</h4> <div class="paragraph"> <p>Di akar`workspace/<code>, sebuah file</code>.gitignore`minimal mendeklarasikan<strong>kebijakan historisasi</strong>des fichiers du jardin secret :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">.goosehints .goose</code></pre> </div> </div> <div class="paragraph"> <p>Ce <code>.gitignore`tidak memiliki fungsi Git klasik (tidak ada</code>.git/`di akar). Dia bertindak seperti sebuah<strong>file konfigurasi tata kelola</strong>yang menjawab pertanyaan tertentu: <strong>artefak taman rahasia yang layak untuk dihistorisasi, dan manakah yang hanya bersifat sementara ?</strong></p> </div> <div class="ulist"> <ul> <li> <p>File yang tercantum dalam`.gitignore`—<code>.goosehints</code>, <code>.goose</code>— adalah artefak sementara yang dihasilkan oleh agen. Tidak ada nilai strategis. Tidak ada historisasi.</p> </li> <li> <p>File-file`.adoc`dari akar —<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>— tidak<strong>tidak</strong>di dalam`.gitignore`. Ini artefak yang akan dihistorikan.</p> </li> </ul> </div> <div class="paragraph"> <p>Le `.gitignore`adalah<strong>skema tata kelola</strong>: Semua yang tidak tercantum di sana adalah kandidat snapshot. Dan LLM, dengan membaca file ini, tahu tepat apa yang harus diarsipkan dan apa yang dapat diabaikan — tanpa perlu diingatkan dalam prompt.</p> </div> </div> <div class="sect3"> <h4 id="_mekanisme_snapshot">Mekanisme Snapshot</h4> <div class="paragraph"> <p>Saya telah membuat`configuration/vision-archive/<code>: snapshot ber-tanggal dari semua</code>.adoc`dari akar, commits di repositori pribadi`configuration/`. Setiap sesi brainstorming menghasilkan sebuah snapshot :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">DATE=$(date +%Y-%m-%d) mkdir -p /home/cheroliv/workspace/configuration/vision-archive/$DATE cp /home/cheroliv/workspace/*.adoc /home/cheroliv/workspace/configuration/vision-archive/$DATE/ cd /home/cheroliv/workspace/configuration && git add vision-archive/ && \ git commit -m "vision-archive: snapshot $DATE"</code></pre> </div> </div> <div class="paragraph"> <p>Prosedur dipicu pada akhir sesi oleh LLM sendiri, yang mengeksekusi tugas routing global ini. Setiap snapshot mencapture keadaan lengkap dari pemikiran strategis pada saat T.</p> </div> <div class="paragraph"> <p>Sejarah Git dari`configuration/`menjadi<strong>Biografi dari pikiran strategis saya</strong>. Saya bisa membuat satu`git log — vision-archive/`dan melihat perkembangan visi saya, sesi per sesi, tanggal per tanggal</p> </div> <div class="paragraph"> <p>Contoh nyata dari riwayat setelah sehari bekerja :</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>Lima snapshot dalam sehari. Setiap snapshot adalah titik pemulihan. Setiap snapshot adalah jalon dalam pembentukan strategi.</p> </div> <div class="paragraph"> <p>Berkas`configuration/vision-archive/latest/`selalu mengandung sebuah<strong>salinan kerja</strong>cuplikan terakhir, berfungsi sebagai referensi cepat tanpa harus menjelajahi riwayat Git.</p> </div> <div class="paragraph"> <p>Dan untuk LLM, ini adalah<strong>oracle koherensi</strong>: ketika ia mengamati adanya ketidaksesuaian antara implementasi saat ini dan visi yang terarsip pada tanggal sebelumnya, ia dapat melaporkannya.</p> </div> </div> </div> <div class="sect2"> <h3 id="_vault_configuration_seperti_spring_cloud_config">Vault : <code>configuration/</code> seperti Spring Cloud Config</h3> <div class="paragraph"> <p>`configuration/`tidak hanya berisi arsip dari penglihatan. Fungsinya utama — dan masa depan — adalah menjadi sebuah<strong>server Spring Cloud Config</strong>. Semua rahasia, token, kredensial, dan deskriptor infrastruktur berada di sini, dalam repositori Git pribadi yang dapat diakses hanya oleh pemilik.</p> </div> <div class="paragraph"> <p>Mengapa sebuah repositori terpisah daripada sebuah file`.env`di setiap proyek?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Push rahasia tidak sengaja</strong> : tidak mungkin. Rahasia berada di repositori pribadi yang proyek publik tidak dapat mereferensikan secara salah.</p> </li> <li> <p><strong>Audit</strong> : riwayat Git memberikan jejak setiap modifikasi konfigurasi. Siapa yang mengubah apa, kapan, dengan hash SHA apa.</p> </li> <li> <p><strong>Rollback</strong> :`git revert`pada konfigurasi yang rusak. Instan, tanpa backup manual.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_perpustakaan_office_sebagai_data_konsumsi">Perpustakaan: <code>office/</code> sebagai Data Konsumsi</h3> <div class="paragraph"> <p>`office/`is the documentary counterpart of the development work. It contains the blog articles, the technical specifications, the training materials (38 course directories FPA, SPG/SPD, JSON schemas, Bloom/Harrow/Krathwohl taxonomies) — everything that constitutes the<strong>materi pembelajaran</strong>.</p> </div> <div class="paragraph"> <p>Tapi`office/`bukan hanya sebuah laci untuk dokumen. Ini adalah sebuah<strong>sumber data terstruktur</strong>bahwasanya plugin Gradle`foundry/`mengkonsumi. Sebuah artikel blog di`office/`adalah sebuah entri yang akan diubah menjadi HTML oleh sebuah plugin. Sebuah SPG AsciiDoc di`office/metiers/FPA/`adalah sebuah artefak yang akan diurai oleh sebuah orchestrator untuk menghasilkan slide, kuis, dan kapsul video.</p> </div> <div class="paragraph"> <p>Et le `build.gradle.kts`pada akar dari`office/`bukan kode bisnis — ini adalah<strong>skrip konsumsi ekosistem plugin</strong>. Dia berkata: "Ini adalah plugin Gradle yang saya gunakan, ini adalah konteks workspace saya".</p> </div> </div> <div class="sect2"> <h3 id="_forges_foundry_sebagai_implementasi">Forges : <code>foundry/</code> sebagai Implementasi</h3> <div class="paragraph"> <p><code>foundry/`mengandung<strong>kode industri</strong>. 54 repositori Git, yang 7 saat ini diatur oleh beberapa</code>.agents/`. Ini-lah tempat visi menjadi dapat dieksekusi — plugin Gradle, CI/CD, tes JUnit5 + Cucumber.</p> </div> <div class="paragraph"> <p>Hubungan dengan`office/`adalah dua arah :</p> </div> <div class="ulist"> <ul> <li> <p><code>office/</code>→<code>foundry/</code>: data pedagogik adalah bahan baku yang dikonsumsi oleh plugin.</p> </li> <li> <p><code>foundry/</code>→<code>office/`plugin menghasilkan data yang mengkaya`office/</code> — le `graph.json`dari graphify-gradle, decks slider yang terkompilasi, laporan build.</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_procontra_alignasi_spasial_vs_alignasi_prompt">Pro/Contra : Alignasi Spasial vs Alignasi Prompt</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mari kita bandingkan kedua pendekatan.</p> </div> <div class="sect2"> <h3 id="_pendekatan_klasik_penyelarasan_dengan_prompt_awal">Pendekatan Klasik: Penyelarasan dengan Prompt Awal</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">✅ Profesional</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">lawan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Mudah diimplementasikan. Sebuah blok teks dalam system prompt.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Lemah pada konteks panjang</strong> : aturan tenggelam setelah 80K token.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Berfungsi untuk aturan umum (ton, format).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tidak dapat diverifikasi</strong> : tidak ada yang mencegah LLM melanggar aturan.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak perlu memikirkan ulang arsitektur proyek.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Tidak dapat dipindahkan</strong> : setiap repo mendeclare ulang aturan.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Secara deklaratif</strong> : LLM tahu bahwa <strong>harus</strong>, tapi tidak ada yang menghalangi.</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_pendekatan_ini_penyelarasan_melalui_ontologi_spasial">Pendekatan ini : Penyelarasan melalui Ontologi Spasial</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">❌ terhadap</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Resilien terhadap konteks panjang</strong> : aturan berada di jalur file, bukan di prompt yang jauh.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Biaya infrastruktur awal</strong> : mengatur workspace dalam lingkaran memakan waktu.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Dapat diverifikasi secara mekanis</strong> : sebuah rahasia di`foundry/<code>terdeteksi oleh`git check-ignore</code>.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Membutuhkan disiplin</strong> : seorang kontributor baru harus memahami lingkaran.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Transferable</strong> : satu`AGENT.adoc`standar mengekspos lingkaran ke setiap proyek baru.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Hanya mencakup batasan spasial</strong> — gaya kode tetap ada dalam prompt.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>keamanan sejak desain</strong> : satu`git push`sejak`foundry/<code>tidak bisa mengekspos`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>Konsumsi oleh agen non-LLM</strong> : sebuah orchestrator Gradle dapat merute sesuai dengan lingkaran.</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>Keuntungan utama bukan bersifat defensif (keamanan, visibilitas) — ini<strong>kreatif</strong>. Ketika LLM bekerja dalam ruang yang terstruktur oleh sebuah ontologi, dia dapat melakukan sesuatu yang tidak dapat diizinkan oleh prompt apa pun : <strong>mengamati delta</strong></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_aljabar_relasional_dari_workspace_dan_delta_yang_dapat_diamati">Aljabar Relasional dari Workspace dan Delta yang dapat diamati</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ketika LLM menelusuri`foundry/<code>, ia memiliki sebuah<strong>kerangka data terstruktur</strong>: simpul (plugins, file, tes, dependensi), tepi bertipe (`import</code>, <code>depends_on</code>, <code>generates</code>, <code>tests</code>), relasi komposisi dan urutan (`training-gradle`Ekstrak repositori →`slider-gradle`menghasilkan slide →`capsule-gradle`sunting video</p> </div> <div class="paragraph"> <p>Algebra ini tidak ditulis di mana-mana dalam bentuk jelas — tapi ia <strong>dapat diamati</strong>. Setiap`build.gradle.kts`menunjukkan dependensi. Setiap`INDEX.adoc`menunjukkan referensi silang</p> </div> <div class="paragraph"> <p>LLM mengamati aljabar ini dan mendeteksi itu<strong>delta</strong>: selisih antara apa yang sistem sudah mampu menghasilkan dan apa yang visi menggambarkan.</p> </div> <div class="paragraph"> <p>Dari delta ini, ia dapat menentukan<strong>peta ahli bisnis</strong>— CDA (Perancang Pengembang Aplikasi, Kotlin/Gradle/JHipster) dan FPA (Pelatihan Profesional Dewasa, Pedagogi/Qualiopi/Bloom) — dan mengidentifikasi apa yang kurang untuk setiap ahli.</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>LLM tidak perlu diberi tahu apa yang harus dilakukan. Delta muncul dari struktur.</p> </div> </div> </div> <div class="sect1"> <h2 id="_vektor_komposit_konteks_rag_pgvector_graphify">Vektor Komposit Konteks : RAG + pgvector + Graphify</h2> <div class="sectionbody"> <div class="paragraph"> <p>Aljabar relasional bukan konstruksi teoretis. Ia <strong>terwujud</strong> oleh tiga komponen yang membentuk satu<strong>vektor komposit konteks</strong>untuk LLM.</p> </div> <div class="sect2"> <h3 id="_komponen_1_rag_langchain4j_postgresql_pgvector">Komponen 1 — RAG LangChain4j + PostgreSQL pgvector</h3> <div class="paragraph"> <p>Saya sudah memiliki LangChain4j dalam produksi di dua plugin :`slider-gradle`(4 penyedia LLM) dan`plantuml-gradle`(7 penyedia). Embedding ONNX (AllMiniLmL6V2) mengindeks data dari`office/`dan kode sumber dari`foundry/`dalam PostgreSQL + pgvector.</p> </div> <div class="paragraph"> <p>RAG ini beroperasi pada dua dimensi :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Dimension data</strong> : dokumen`office/`(SPG, articles, formations, skema JSON)</p> </li> <li> <p><strong>Dimensi kode</strong> : codebases`foundry/`(sumber Kotlin, uji Cucumber, AGENT.adoc)</p> </li> </ul> </div> <div class="paragraph"> <p>Intersepsi mencakup baik <strong>apa</strong> (domain bisnis) dan <strong>bagaimana</strong> (implementasi).</p> </div> </div> <div class="sect2"> <h3 id="_komponen_2_knowledge_graph_graphify">Komponen 2 — Knowledge Graph Graphify</h3> <div class="paragraph"> <p>Graphify terintegrasi dalam`plantuml-gradle`(109 tes, 380/380 LULUS) dan menghasilkan sebuah`graph.json`— sebuah knowledge graph terstruktur dengan node, edge, dan komunitas yang terdeteksi secara otomatis.</p> </div> <div class="paragraph"> <p>Berbeda dengan RAG yang bekerja berdasarkan similaritas vektor (samar), knowledge graph bekerja berdasarkan<strong>relasi eksak</strong>(deterministis) :`graphify query`untuk pertanyaan semantik (~50 token)`graphify path`untuk menavigasi,`graphify explain`untuk menjelaskan.</p> </div> </div> <div class="sect2"> <h3 id="_komponen_3_graphify_inkremental_sparse_dapat_diagregasikan_dapat_dikonsumsi">Komponen 3 — Graphify Inkremental : Sparse, Dapat Diagregasikan, Dapat Dikonsumsi</h3> <div class="paragraph"> <p>Ini adalah keputusan arsitektural kunci.</p> </div> <div class="paragraph"> <p>Graphify tidak boleh hidup dalam satu repositori. Harus hidup dengan cara<strong>tersiar</strong>dalam setiap plugin :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Setiap plugin</strong> memuat satu tugas Gradle`updateKnowledgeGraph`yang memanggil Graphify<strong>pada lingkup sendiri</strong>dan menghasilkan satu`graph.json`lokal.</p> </li> <li> <p><strong>Skrip build`office/<code></strong> mengonsumsi`graphify-gradle`dengan`rootDir = /home/cheroliv/workspace`dan menghasilkan sebuah`graph.json</code> <strong>global</strong>yang menggabungkan grafik lokal.</p> </li> <li> <p><strong>RAG dari setiap plugin</strong> menginject`graph.json`global seperti<strong>filter konteks</strong>untuk permintaan LLM.</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">TÂCHE GRADLE (dans chaque plugin) ↓ graphify → graph.json (scope local) ↓ office/build.gradle.kts → graph.json (scope global) ↓ RAG pgvector (dans slider, plantuml, codebase...) ↓ ← injection du graph.json comme filtre LLM (deepseek-v4-pro) ↓ ← observation algèbre relationnelle ↓ ← détection delta vs cartographies experts PRIORISATION → prochaine tâche</code></pre> </div> </div> <div class="paragraph"> <p>Hasil: LLM tidak mencari dalam kekosongan — ia menavigasi ruang yang terstruktur oleh knowledge graph. Permintaan tentang <code>génère un diagramme</code> dapat mencapai node-node yang relevan dalam grafik.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_klasifikasi_otomatis_gdpr_llm_sebagai_router">Klasifikasi Otomatis GDPR : LLM sebagai Router</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ontologi spasial tidak hanya menyelaraskan LLM — ia memberi padanya sebuah<strong>grid klasifikasi GDPR</strong>Untuk mengalirkan setiap data ke zona sahnya</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">kriteria</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deteksi LLM</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tingkat maksimal</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Data pribadi (nama, email, IP)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">pola`@`, IP, nama proper</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Anonimkan →`[OF_PILOTE]`atau router level 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 / Rahasia / Kredensial</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pola`sk-…​<code>, `ghp_…​</code>, <code>ya29…​</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router →<code>configuration/</code>. Direferensikan oleh`${VAR}`di kode.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">URL internal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengandung`localhost`, IP pribadi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menganonimkan →<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">Data pedagogik (SPG, kuliah)</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>(tingkat 2). Versi ganda jika ekspor.</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">Kode sumber / uji</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Perpanjangan`.kt`, <code>.kts`dalam`foundry/</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Router →<code>foundry/</code>. Memeriksa tidak ada rahasia.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">4</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Pada akhir sesi, LLM mengeksekusi sebuah<strong>tugas global</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Pembacaan`.gitignore`akar untuk mengidentifikasi artefak sementara (yang harus dikecualikan dari snapshot) vs artefak strategis (yang harus direkam)</p> </li> <li> <p>Inventaris semua file`.adoc`dari akar`workspace/`</p> </li> <li> <p>Penyaringan: pengecualian berkas yang tercantum dalam`.gitignore`, inklusi semua yang lain</p> </li> <li> <p>Salin ke`configuration/vision-archive/$DATE/<code>dan pembaruan symlink`latest/</code></p> </li> <li> <p>Commit dalam repositori`configuration/`dengan pesan terstruktur</p> </li> <li> <p>Klasifikasi GDPR otomatis setiap file yang dimodifikasi (semua lingkaran)</p> </li> <li> <p>Routing : data`office/<code>→ commit pribadi, kode`foundry/</code>→<code>./gradlew check</code>, konfigurasi → commit</p> </li> <li> <p>Laporan terstruktur dengan peringatan GDPR dan konfirmasi arsip</p> </li> </ol> </div> <div class="paragraph"> <p>Le `.gitignore`akar bukan berkas konfigurasi Git — ini adalah<strong>file pengelolaan historisasi</strong>. Ia menentukan skema yang LLM konsumsi untuk memutuskan berkas mana dari taman rahasia yang masuk ke dalam biograf strategis dan mana yang dapat dibuang.</p> </div> <div class="paragraph"> <p>LLM tidak lagi hanya sebuah generator teks. Ia adalah<strong>manajer informasi</strong>dari ekosistem — produsen, klasifikator, router.</p> </div> </div> </div> <div class="sect1"> <h2 id="_roadmap_dari_asciidoc_ke_langgraph4j">Roadmap : dari AsciiDoc ke LangGraph4j</h2> <div class="sectionbody"> <div class="paragraph"> <p>Hari ini, tata kelola ini adalah <strong>determinist</strong>: LLM menerapkan prosedur yang dijelaskan dalam file AsciiDoc. Ini adalah<strong>tahap 1</strong>— prompt engineering dengan memori LLM.</p> </div> <div class="paragraph"> <p>La <strong>fase 2</strong>akan mengekstrak setiap langkah dari prosedur dalam sebuah<strong>tugas Gradle bertipe</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>fase 3</strong>akan memodelkan proses akhir sesi sebagai<strong>grafik status</strong>denganhttps://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>Grafik ini akan versi di CI/CD, dijalankan oleh Gradle, dan dikonfigurasi melalui GitHub Secrets plugin. LLM tidak lagi perlu memutuskan perutean — grafik akan melakukannya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_diselesaikan_oleh_arsitektur_ini_dan_apa_yang_tidak_diselesaikan">Apa yang Diselesaikan oleh Arsitektur Ini (dan apa yang tidak Diselesaikan)</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>Ontologi spasial tidak mencakup semuanya. Konvensi gaya kode, penamaan, pilihan desain arsitektur — semuanya tetap berada dalam prompt. Apa yang diselesaikan oleh ontologi spasial adalah<strong>lapisan keamanan dan visibilitas</strong>: di mana setiap byte harus hidup, dan siapa yang dapat melihatnya.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Ini adalah apa yang dia sebenarnya bawa:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>* tidak ada`git push`accidental dari sebuah rahasia* : rahasia-rahasa berada di`configuration/<code>(cercle 1). Proyek-proyek publik berada di`foundry/</code>(lingkaran 4). Tidak ada jalur yang melewati keduanya.</p> </li> <li> <p><strong>Tidak ada kode bisnis dalam data</strong> :`office/<code>mengandung beberapa</code>.adoc`, beberapa YAML, beberapa skema JSON — tetapi tidak ada`.kt`. Le `build.gradle.kts`yang tinggal di sana adalah skrip konsumsi, bukan kode bisnis.</p> </li> <li> <p><strong>Tidak ada pemikiran strategis yang diekspos</strong> : dokumen visi berada di taman rahasia (akar di luar CVS). Snapshot berada di`configuration/`(kotak aman pribadi). Tidak ada orang, bahkan dalam lingkaran kepercayaan yang diperluas, yang membaca asal-usul strategi.</p> </li> <li> <p><strong>Prioritasi otomatis</strong> : LLM mengamati delta antara aljabar relasional (yang ada) dan pemetaan ahli (yang diperlukan). Tugas pengembangan berikutnya muncul dari delta tersebut.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_arsitektur_sebagai_diskursus">Kesimpulan: Arsitektur sebagai Diskursus</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya tidak menaruh manifesto politik di footer situs saya. Saya tidak menaruh aturan etika di prompt saya. Penataan tidak ada dalam teks — itu ada di<strong>sistem file</strong>.</p> </div> <div class="paragraph"> <p>Saat LLM bekerja di ruang ini, ia tidak dapat membocorkan rahasia (jalan ini mencegahnya). Ia tidak dapat mencampurkan data pendidikan dengan kode sumber (zona fisik berbeda). Ia tidak dapat melupakan aturan keamanan sebesar 80.000 token — karena aturan itu tidak ada dalam prompt, melainkan di`workspace/<code>→`configuration/</code>→<code>office/</code>→`foundry/`bahwa setiap pembacaan file mengaktifkan kembali</p> </div> <div class="paragraph"> <p>Ini adalah prinsip <strong>secure by design</strong> yang diterapkan pada penyelarasan agen: tidak meminta LLM untuk mengingat aturan. Pastikan arsitektur membuat kesalahan menjadi mustahil secara struktural.</p> </div> <div class="paragraph"> <p>Dan sekaligus, ini memberi LLM apa yang tidak dapat diberikan oleh prompt apa pun: kemampuan untuk<strong>mengerti</strong>où ia berada, apa yang ada, apa yang kurang — dan dari itu menyimpulkan apa yang harus dilakukan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Artikel tentang pengelolaan agen Eager/Lazy :<a href="../2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Mengelola Agen AI dengan AsciiDoc</a></p> </li> <li> <p>Article tentang mekanisme Hot/Warm/Cold :<a href="../2026/0110_mecanisme_backup_contexte_agent_post.html">Jendela geser dan gelombang dingin</a></p> </li> <li> <p>Artikel tentang audit konteks:<a href="../2026/0111_audit_contexte_agent_post.html">Ketika gouvernansi Anda sendiri menjadi masalah</a></p> </li> <li> <p>Artikel perbandingan tiga LLM :<a href="../2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html">DeepSeek-V4-Pro, Kimi K2.6, GLM-5.1</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0113_integration_firebase_contact_form_post.html Wed, 29 Apr 2026 00:00:00 +0000 blog/2026/0113_integration_firebase_contact_form_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_skeno_sebuah_formulir_yang_tidak_menyimpan_apa_apa">Skeno: sebuah formulir yang tidak menyimpan apa-apa</a> <ul class="sectlevel2"> <li><a href="#_warisan_supabase">Warisan Supabase</a></li> <li><a href="#_pengiriman_ganda_hantu">pengiriman ganda hantu</a></li> </ul> </li> <li><a href="#_mengapa_firebase_alih_alih_supabase">Mengapa Firebase alih-alih Supabase?</a></li> <li><a href="#_tahap_1_membuat_proyek_firebase">Tahap 1 : Membuat proyek Firebase</a> <ul class="sectlevel2"> <li><a href="#_inisialisasi">Inisialisasi</a></li> <li><a href="#_aturan_keamanan_firestore">Aturan keamanan Firestore</a></li> </ul> </li> <li><a href="#_tahap_2_menulis_ulang_javascript_pengiriman">Tahap 2 : Menulis ulang JavaScript pengiriman</a> <ul class="sectlevel2"> <li><a href="#_ketergantungan_window_firebase">Ketergantungan `window.<em>FIREBASE</em></a></li> <li><a href="#_baru_contact_js">Baru `contact.js</a></li> </ul> </li> <li><a href="#_fase_3_membersihkan_kode_mati_supabase">Fase 3 : Membersihkan kode mati Supabase</a></li> <li><a href="#_phase_4_mengatur_footer">Phase 4 : Mengatur footer</a></li> <li><a href="#_tahap_5_arsitektur_akhir">Tahap 5 : Arsitektur akhir</a></li> <li><a href="#_apa_yang_dikatakan_oleh_migrasi_ini_tentang_dogfooding">Apa yang dikatakan oleh migrasi ini tentang dogfooding</a> <ul class="sectlevel2"> <li><a href="#_ringkasan_perubahan">Ringkasan perubahan</a></li> </ul> </li> <li><a href="#_langkah_selanjutnya_backlog">Langkah selanjutnya (backlog)</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Selama bertahun-tahun, formulir kontak situs ini berjalan pada mock JavaScript — sebuah janji dengan tingkat keberhasilan 85 %, Firestore palsu, tidak ada data yang disimpan. Rencana awal mengantisipasi backend Supabase dengan Google Apps Script untuk notifikasi email. Ditinggalkan. Hari ini, saya menceritakan migrasi ke Firebase Firestore: pembuatan projekt, aturan keamanan, penulisan ulang JS, pembersihan kode mati Supabase. Dan mengapa pilihan ini mengartikan sesuatu yang lebih luas tentang filosofi pengembangan.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_skeno_sebuah_formulir_yang_tidak_menyimpan_apa_apa">Skeno: sebuah formulir yang tidak menyimpan apa-apa</h2> <div class="sectionbody"> <div class="paragraph"> <p>Situs ini dihasilkan oleh JBake, plugin Gradle saya`bakery`. Ini 100% statis — tidak ada backend, tidak ada basis data. Namun saya memiliki formulir kontak. Halaman`contact.html`ada, HTML sudah siap (kolom nama, email, telepon, subjek, pesan, validasi HTML5, honeypot anti-spam), gaya Bootstrap sudah terpasang. Secara visual, semuanya sempurna.</p> </div> <div class="paragraph"> <p>Namun saat pengajuan, tidak terjadi apa-apa.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const firebaseMock = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() < 0.85) { resolve({ status: 201, message: 'Message stored in Firestore.' }); } else { reject({ status: 500, message: 'Firestore write failed.' }); } }, 1500); });</code></pre> </div> </div> <div class="paragraph"> <p>Suatu mock. Sebuah janji yang hanya berpura-pura. Pengguna melihat spinner, lalu pesan « Pesan terkirim dengan sukses ! ». Tapi data pergi ke dalam hampa. Tidak ada pesan yang disimpan di mana pun.</p> </div> <div class="paragraph"> <p>Situasi lebih buruk daripada formulir yang rusak — ini formulir yang berbohong.</p> </div> <div class="sect2"> <h3 id="_warisan_supabase">Warisan Supabase</h3> <div class="paragraph"> <p>Rencana awal, yang didokumentasikan di`content/draft/integration_formulaire_contact_supabase.adoc`, memperkirakan :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Suatu basis data Supabase dengan tabel`contacts`dan Keamanan Tingkat Baris</p> </li> <li> <p>Sebuah RPC`handle_contact_form`sisi server</p> </li> <li> <p>Sebuah trigger SQL yang memanggil sebuah webhook Google Apps Script</p> </li> <li> <p>Google Apps Script yang mengirim email notifikasi Gmail</p> </li> </ol> </div> <div class="paragraph"> <p>Kode JavaScript yang sesuai masih ada di`script.js`. Ada sebuah kelas`SupabaseManager`yang menginisialisasi klien Supabase dengan variabel global`SUPABASE_URL` et <code>SUPABASE_KEY</code>, dan sebuah kelas`ContactFormHandler`yang mendengarkan acara submit formulir dan memanggil`SupabaseManager.submitContactForm()`.</p> </div> <div class="paragraph"> <p>Masalah : variabel global ini tidak lagi di-inject di dalam footer. Yang`<script src="supabase-js">`telah dihapus. Kode memanggil`supabase.createClient()`pada satu variabel`supabase`yang tidak ada lagi. Maka:</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>Bukan hanya data tidak disimpan, tetapi kode pengiriman sudah mati.</p> </div> </div> <div class="sect2"> <h3 id="_pengiriman_ganda_hantu">pengiriman ganda hantu</h3> <div class="paragraph"> <p>Untuk memburukkan hal-hal, ada sebuah<strong>persaingan diam</strong>antara dua handler pada formulir yang sama :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>`contact.js`dengarkan submit, panggil mock Firebase</p> </li> <li> <p><code>script.js</code>— via`ContactFormHandler`— dengarkan juga submit, telepon`SupabaseManager`</p> </li> </ol> </div> <div class="paragraph"> <p>Keduanya melakukan`event.preventDefault() + event.stopPropagation()<code>. Seperti`contact.js`dimuat terlebih dahulu di`footer.thyme</code>, handler-nya dipasang terlebih dahulu. Dia menghambat penyebaran.`ContactFormHandler`tidak akan pernah dipicu.</p> </div> <div class="paragraph"> <p>Ini bahkan bukan sebuah bug aktif — ini sebuah zombie. Kode yang tidak pernah kesempatan untuk dieksekusi.</p> </div> <div id="diag-before" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE title Status Awal — Formulir Kontak rectangle "contact.thyme (HTML Bootstrap, honeypot)" as FORM rectangle "footer.thyme (Firebase SDK dengan placeholder konfigurasi)" as FOOT rectangle "contact.js\n(mock Firebase, 85% keberhasilan)" as CONT rectangle "script.js\n(SupabaseManager + ContactFormHandler, mati)" as SCRIPT rectangle "Pengguna" as USER USER -> FORM : Soumission du formulaire FORM -> CONT : submit event (attaché en premier) CONT -> CONT : preventDefault + stopPropagation CONT -> CONT : mock Promise (1.5s, aléatoire) note right of CONT ⚠️ Aucune donnée stockée end note FORM ..> 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="_mengapa_firebase_alih_alih_supabase">Mengapa Firebase alih-alih Supabase?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Keputusan migrasi dicatat dalam`AGENT.adoc`:</p> </div> <div class="paragraph"> <p>Firebase kini dipilih karena alasan-alasan berikut: paket gratis terbaik, Firestore asli, Cloud Functions terintegrasi, ekosistem Google yang lebih sesuai. Implementasi Supabase yang ada ditandai sebagai « ⚠️ Ditinggalkan ».</p> </div> <div class="paragraph"> <p>Di luar rencana gratis, ada alasan arsitektur. Situs ini berada di ekosistem Google: repositori target adalah`cheroliv.github.io`, CNAME menunjuk ke GitHub Pages, build Gradle melakukan push ke GitHub melalui JGit. Menambahkan layanan Google (Firebase) alih-alih layanan pihak ketiga (Supabase) mengurangi permukaan penyebaran.</p> </div> <div class="paragraph"> <p>Firestore dalam mode native (bukan mode Datastore) juga lebih dekat dengan model mental NoSQL dokumen yang saya miliki: koleksi, dokumen, kolom bertipe, stempel waktu server, aturan keamanan terintegrasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tahap_1_membuat_proyek_firebase">Tahap 1 : Membuat proyek Firebase</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_inisialisasi">Inisialisasi</h3> <div class="paragraph"> <p>Karena CLI Firebase tidak terinstal di komputer saya, saya menggunakan konsol web:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Pergi kehttps://console.firebase.google.com/[Konsol Firebase]</p> </li> <li> <p>Membuat proyek`cheroliv-contact`(atau menggunakan kembali proyek yang ada)</p> </li> <li> <p>Aktifkan Firestore dalam mode asli (bukan Datastore)</p> </li> <li> <p>Membuat database di wilayah`eur3`(Eropa)</p> </li> </ol> </div> <div class="paragraph"> <p>Untuk penggunaan minimalis seperti milik kita (satu koleksi, penulisan publik), mode asli adalah pilihan yang tepat. Tidak perlu aturan Datastore yang kompleks.</p> </div> </div> <div class="sect2"> <h3 id="_aturan_keamanan_firestore">Aturan keamanan Firestore</h3> <div class="paragraph"> <p>Formulir ini bersifat publik — siapa pun dapat mengirim pesan. Tapi saya ingin membatasi penyalahgunaan:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /contact_messages/{messageId} { // Lecture : admin uniquement (authentifié) allow read: if request.auth != null; // Écriture : publique, mais limitée allow create: if request.auth == null && request.resource.data.name is string && request.resource.data.name.size() >= 1 && request.resource.data.name.size() <= 100 && request.resource.data.email is string && request.resource.data.email.matches('.*@.*\\..*') && request.resource.data.email.size() <= 254 && request.resource.data.subject is string && request.resource.data.subject.size() >= 3 && request.resource.data.subject.size() <= 200 && request.resource.data.message is string && request.resource.data.message.size() >= 10 && request.resource.data.message.size() <= 5000 && request.resource.data.created_at == request.time && request.resource.data.user_agent is string && request.resource.data.user_agent.size() <= 500; } } }</code></pre> </div> </div> <div class="paragraph"> <p>poin kunci :</p> </div> <div class="ulist"> <ul> <li> <p><code>allow read</code>— hanya pengguna terautentikasi yang dapat membaca pesan (saya, melalui konsol Firebase)</p> </li> <li> <p><code>allow create</code>— siapa pun dapat membuat dokumen, tetapi dengan validasi kolom</p> </li> <li> <p>Validasi sisi server : ukuran min/max, format email,<code>created_at`harus sesuai dengan`request.time</code>(anti-falsifikasi)</p> </li> <li> <p>`user_agent`dikirim untuk pelacakan (tidak kritis tetapi berguna)</p> </li> </ul> </div> <div class="paragraph"> <p>Aturan ini lebih ketat daripada yang sederhana`allow write: if true;`. Mereka mencegah seorang penyerang menginjeksi payload besar atau bidang yang tidak terformat dengan benar.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tahap_2_menulis_ulang_javascript_pengiriman">Tahap 2 : Menulis ulang JavaScript pengiriman</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kontraktnya sederhana :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Membaca data formulir</p> </li> <li> <p>Periksa honeypot (kolom`hp_name`— jika itu terisi, itu adalah bot, kita mensimulasikan keberhasilan tanpa mengirimkan apa-apa)</p> </li> <li> <p>memanggil`addDoc(window.<em>FIREBASE</em>.collection(db, "contact_messages"), {…​})`</p> </li> <li> <p>Menampilkan keberhasilan atau kesalahan</p> </li> </ol> </div> <div class="sect2"> <h3 id="_ketergantungan_window_firebase">Ketergantungan `window.<em>FIREBASE</em></h3> <div class="paragraph"> <p>dalam`footer.thyme`, skrip modul menginisialisasi Firebase SDK dan mengekspos objek global :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js"; import { getFirestore, collection, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-firestore.js"; const firebaseConfig = { /* valeurs réelles */ }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); window.__FIREBASE__ = { db, collection, addDoc, serverTimestamp }; </script></code></pre> </div> </div> <div class="paragraph"> <p>Skrip modul berjalan sebelum`DOMContentLoaded`, maka`window.<em>FIREBASE</em>`dijamin tersedia ketika handler`contact.js`Memicu. Untuk berhati-hati, saya tetap menambahkan polling 5 detik jika CDN lambat.</p> </div> </div> <div class="sect2"> <h3 id="_baru_contact_js">Baru `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) => { if (window.__FIREBASE__) { resolve(window.__FIREBASE__); return; } const start = Date.now(); const interval = setInterval(() => { if (window.__FIREBASE__) { clearInterval(interval); resolve(window.__FIREBASE__); } else if (Date.now() - start > timeoutMs) { clearInterval(interval); reject(new Error('Firebase SDK non disponible après timeout')); } }, 100); }); } // --- Validation (identique à l'existant) --- function validateForm() { nameInput.setCustomValidity(''); emailInput.setCustomValidity(''); if (phoneInput) phoneInput.setCustomValidity(''); subjectInput.setCustomValidity(''); messageInput.setCustomValidity(''); if (nameInput.value.trim().length < 1) { nameInput.setCustomValidity('Veuillez saisir votre nom.'); } const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(emailInput.value.trim())) { emailInput.setCustomValidity('Veuillez saisir une adresse email valide.'); } if (phoneInput && phoneInput.value.trim() !== '') { const phonePattern = /^\d{10,15}$/; if (!phonePattern.test(phoneInput.value.trim())) { phoneInput.setCustomValidity('Veuillez saisir un numéro valide (10 à 15 chiffres).'); } } if (subjectInput.value.trim().length < 3) { subjectInput.setCustomValidity('Veuillez saisir un sujet (3 caractères minimum).'); } if (messageInput.value.trim().length < 10) { messageInput.setCustomValidity('Veuillez saisir un message (10 caractères minimum).'); } form.classList.add('was-validated'); return form.checkValidity(); } // --- Handler de soumission --- form.addEventListener('submit', async function (event) { event.preventDefault(); event.stopPropagation(); if (!validateForm()) return; // Honeypot : si rempli, simuler un succès sans rien envoyer if (honeypotInput && honeypotInput.value.trim() !== '') { successMessage.style.display = 'block'; form.reset(); form.classList.remove('was-validated'); return; } // UI : état d'envoi submitButton.disabled = true; submitButton.innerHTML = ` <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Envoi en cours... `; successMessage.style.display = 'none'; errorMessage.style.display = 'none'; try { const fb = await waitForFirebase(); const messagesCollection = fb.collection(fb.db, 'contact_messages'); await fb.addDoc(messagesCollection, { name: nameInput.value.trim(), email: emailInput.value.trim(), phone: phoneInput ? phoneInput.value.trim() : '', subject: subjectInput.value.trim(), message: messageInput.value.trim(), created_at: fb.serverTimestamp(), user_agent: navigator.userAgent.substring(0, 500) }); successMessage.style.display = 'block'; form.reset(); form.classList.remove('was-validated'); } catch (error) { console.error('Erreur Firestore:', error); errorMessage.style.display = 'block'; } finally { submitButton.disabled = false; submitButton.innerHTML = ` <i class="bi bi-send me-2"></i> Envoyer le Message `; } }, false); });</code></pre> </div> </div> <div class="paragraph"> <p>Perubahan dibandingkan dengan mock:</p> </div> <div class="ulist"> <ul> <li> <p><code>waitForFirebase()</code>— polling dengan timeout, kuat bahkan jika CDN lambat</p> </li> <li> <p><code>honeypot</code>— jika bidang tersembunyi`hp_name`terisi, mensimulasikan kesuksesan pasti Firestore. Bot berpikir telah berhasil tetapi tidak ada yang disimpan.</p> </li> <li> <p><code>addDoc(collection, {…​})</code>— panggilan Firestore yang sebenarnya dengan`serverTimestamp()` et <code>user_agent</code></p> </li> <li> <p>Manajemen kesalahan dengan`try/catch`asinkron</p> </li> <li> <p>Pembersihan`finally`(pemulihan tombol)</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>mengapa`user_agent`? Ini opsional, tapi berguna untuk diagnosis. Jika pesan aneh tiba, mengetahui apakah berasal dari browser desktop, seluler, atau skrip curl membantu dalam penyortiran.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_fase_3_membersihkan_kode_mati_supabase">Fase 3 : Membersihkan kode mati Supabase</h2> <div class="sectionbody"> <div class="paragraph"> <p>`script.js`mengandung 250 baris kode mati :</p> </div> <div class="ulist"> <ul> <li> <p><code>SupabaseManager</code>(baris 417-481) — 65 baris</p> </li> <li> <p><code>ContactFormHandler</code>(baris 490-551) — 62 baris</p> </li> <li> <p>Blok inisialisasi (baris 645-654) — 10 baris</p> </li> </ul> </div> <div class="paragraph"> <p>Total : ~140 baris yang akan dihapus.</p> </div> <div class="paragraph"> <p>Blok`DOMContentLoaded`membuat sebuah`SupabaseManager`lalu satu`ContactFormHandler`ditekatkan pada formulir. Seperti yang dijelaskan di atas, kode ini tidak pernah dieksekusi (diblokir oleh`contact.js`), dan bahkan jika dieksekusi, ia akan gagal (tidak ada SDK Supabase yang dimuat).</p> </div> <div class="paragraph"> <p>Saya menghapus:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Kelas`SupabaseManager`</p> </li> <li> <p>Kelas`ContactFormHandler`</p> </li> <li> <p>Blok inisialisasi dalam`DOMContentLoaded`(baris 645-654)</p> </li> </ol> </div> <div class="paragraph"> <p>Le reste de <code>script.js`masih utuh :`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_mengatur_footer">Phase 4 : Mengatur footer</h2> <div class="sectionbody"> <div class="paragraph"> <p>`footer.thyme`sudah memiliki boilerplate Firebase tetapi dengan nilai placeholder. Saya mengganti :</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>Dengan nilai sebenarnya yang diperoleh sejak<strong>Pengaturan Proyek > Umum > Aplikasi Anda > Aplikasi Web</strong>di konsol Firebase.</p> </div> <div class="paragraph"> <p>Nilai sensitif`apiKey`adalah publik oleh desain di Firebase, namun saya lebih suka tidak melakukan commit-nya dalam bentuk jelas). Saya menyimpannya di`site.yml`(sudah dalam`.gitignore`) dan plugin`bakery`Menyuntikkan mereka ke dalam template melalui logika yang ditambahkan pada sisi build.</p> </div> <div class="paragraph"> <p>Saat ini, saya menempatkannya langsung di`footer.thyme`— build`./gradlew serve`akan memuatnya secara lokal. Saat penyebaran, saya akan memigrasikan inyeksi ke`site.yml`atau ke variabel Gradle.</p> </div> <div class="admonitionblock warning"> <table> <tr> <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> <td class="content"> <div class="paragraph"> <p>L'`apiKey`Firebase bukan<strong>langkah</strong>sebuah rahasia. Ia bersifat publik oleh desain. Yang melindungi data Anda adalah<strong>peraturan keamanan Firestore</strong>, not the API key. Do not put it in a`.env`dimuat sisi server — ia dimaksudkan untuk diekspos ke peramban</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_tahap_5_arsitektur_akhir">Tahap 5 : Arsitektur akhir</h2> <div class="sectionbody"> <div id="diag-after" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE title Arsitektur Final — Formulir Kontak Firebase actor Utilisateur as USER package "peramban" #E8F5E9 { rectangle "contact.thyme\n(HTML, honeypot)" as FORM rectangle "contact.js\n(validation + Firestore)" as CONT rectangle "footer.thyme (Firebase SDK init)" as FOOT } cloud "Firebase" #BBDEFB { rectangle "Firestore\n(contact_messages)" as FS } FORM --> CONT : submit event CONT --> FOOT : window.__FIREBASE__.addDoc() FOOT --> 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="_apa_yang_dikatakan_oleh_migrasi_ini_tentang_dogfooding">Apa yang dikatakan oleh migrasi ini tentang dogfooding</h2> <div class="sectionbody"> <div class="paragraph"> <p>Situs ini dihasilkan oleh plugin Gradle saya sendiri.<code>bakery</code>. Formulir kontak berada di dalam situs. Migrasi Supabase → Firebase didokumentasikan dalam`AGENT.adoc`, dia dibahas dalam backlog, dia diuji melalui`./gradlew serve`, dan ia menghasilkan sebuah postingan blog (yang sedang Anda baca).</p> </div> <div class="paragraph"> <p>Ini adalah dogfooding murni. Situs adalah produk dari plugin, plugin adalah produk dari pengembang, pengembang mendokumentasikan proses di situs itu sendiri.</p> </div> <div class="paragraph"> <p>Sudah lengkap lingkarannya.</p> </div> <div class="paragraph"> <p>Fakta bahwa saya telah menahan sebuah mock selama berbulan-bulan (sesi penuh di mana formulir itu diam-diam menyalahkan) membuatku menyadari sesuatu: backlog dari sebuah situs statis pribadi tidak pernah 'selesai'. Selalu ada US prioritas, selalu ada artikel dalam draft, selalu ada bagian yang dikomentari dalam template. Disiplin bukanlah untuk menyelesaikan semuanya — melainkan menyelesaikan apa yang terlihat oleh pengguna.</p> </div> <div class="paragraph"> <p>Formulir kontak yang rusak lebih buruk daripada tidak ada formulir sama sekali. Itu adalah janji yang tidak dipenuhi.</p> </div> <div class="sect2"> <h3 id="_ringkasan_perubahan">Ringkasan perubahan</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">Berkas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Modifikasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dampak</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">Pembuatan artikel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokumentasi</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">Penulisan ulang (mock → Firestore sebenarnya)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">fungsional</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">Penghapusan SupabaseManager + ContactFormHandler + init blok</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembersihan</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">Penggantian config placeholder → nilai nyata</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konfigurasi</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_selanjutnya_backlog">Langkah selanjutnya (backlog)</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Email pemberitahuan</strong>: Sebuah Cloud Function`onCreate`pada`contact_messages`yang mengirim email melalui SendGrid. Formulir menyimpan, tetapi saya tidak mendapatkan pemberitahuan. Prioritas sedang — pesan terlihat di konsol Firebase.</p> </li> <li> <p><strong>Rate limiting sisi klien</strong>: Menambahkan timestamp localStorage untuk mencegah pengiriman berulang dalam satu rafalan. Honeypot memblokir bot yang naif, rate limiter akan memblokir bot yang sedikit lebih cerdas.</p> </li> <li> <p><strong>Uji</strong>: Sebuah tes Playwright yang mengirimkan formulir dan memverifikasi bahwa dokumen muncul di Firestore. Saat ini, saya menguji secara manual melalui`./gradlew serve`.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://firebase.google.com/docs/firestore/security/get-started">Dokumentasi Aturan Keamanan Firestore</a></p> </li> <li> <p><a href="https://firebase.google.com/docs/firestore/manage-data/add-data#add_a_document">Dokumentasi Firestore addDoc — Web v9 modular</a></p> </li> <li> <p><a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Seri agen tata kelola — Bagian 1: Eager/Lazy</a></p> </li> <li> <p><a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Seri agen tata kelola — Bagian 2 : Hot/Warm/Cold</a></p> </li> <li> <p><a href="/blog/2026/0111_audit_contexte_agent_post.html">Series Agen Tata Kelola — Bagian 3: Audit</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html Tue, 28 Apr 2026 00:00:00 +0000 blog/2026/0112_comparaison_kimi_glm_deepseek_long_contexte_plugin_gradle_opencode_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_konteks_bukan_sebuah_tempat_uji_sebuah_proyek_konstruksi">Konteks: bukan sebuah tempat uji, sebuah proyek konstruksi</a></li> <li><a href="#_lingkungan_uji_saya">lingkungan uji saya</a></li> <li><a href="#_kriteria_penilaian">Kriteria Penilaian</a></li> <li><a href="#_putaran_1_kimi_k2_6_awalan_palsu">Putaran 1 : Kimi K2.6 — Awalan Palsu</a> <ul class="sectlevel2"> <li><a href="#_sesi_9_perbaikan">Sesi 9 : perbaikan</a></li> <li><a href="#_session_10_kelamunan_sunyi">Session 10 : kelamunan sunyi</a></li> </ul> </li> <li><a href="#_round_2_glm_5_1_pejuang_yang_terhormat">Round 2 : GLM-5.1 — Pejuang yang terhormat</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_dsa_terhadap_mla_murni">Arsitektur : DSA terhadap MLA murni</a></li> <li><a href="#_sesi_11_13_teguh_tetapi_menggecewakan">Sesi 11-13: teguh tetapi menggecewakan</a></li> </ul> </li> <li><a href="#_round_3_deepseek_v4_pro_mesin_perang">Round 3 : DeepSeek-V4-Pro — Mesin Perang</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_csa_hca_jaring_ganda">Arsitektur: CSA + HCA, jaring ganda</a></li> <li><a href="#_sesi_1_8_kelegaan">Sesi 1-8: kelegaan</a></li> <li><a href="#_ujian_yang_menentukan_refactoring_hingga_100k_token">Ujian yang menentukan: refactoring hingga 100K token</a></li> </ul> </li> <li><a href="#_muka_ke_muka_perbandingan_metrik">Muka ke Muka: Perbandingan Metrik</a></li> <li><a href="#_mengapa_deepseek_v4_pro_menang_dalam_pengembangan_perangkat_lunak">Mengapa DeepSeek-V4-Pro Menang dalam Pengembangan Perangkat Lunak</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_csahca_dirancang_untuk_kode">Arsitektur CSA+HCA dirancang untuk kode</a></li> <li><a href="#_2_konteks_eager_adalah_zona_kenyamanan">2. Konteks EAGER adalah zona kenyamanan</a></li> <li><a href="#_3_rasio_kualitaslatensi_optimal_untuk_alur">3. Rasio kualitas/latensi optimal untuk alur</a></li> </ul> </li> <li><a href="#_pelajaran_yang_dipelajari_cara_memilih_llm_anda_untuk_vibe_coding">Pelajaran yang Dipelajari : Cara Memilih LLM Anda untuk Vibe Coding</a></li> <li><a href="#_dan_bagaimana_dengan_governance_agent_dalam_semua_ini">Dan bagaimana dengan Governance Agent dalam semua ini?</a></li> <li><a href="#_sumber_teknis">Sumber Teknis</a></li> <li><a href="#_conclusion_pilihan_artisan">Conclusion: Pilihan Artisan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 18 minutes</div> <p>Perang LLM juga dimainkan di terminal seorang pengembang. Bukan di benchmarks akademis yang steril. Dalam kehidupan nyata: sebuah prompt 30 ribu token, tata kelola agen dalam AsciiDoc, plugin Gradle Kotlin DSL yang perlu didebug, dan sesi-sesi yang berlangsung selama tiga minggu. Saya telah menguji untuk Anda DeepSeek-V4-Pro, Kimi K2.6 dan GLM-5.1. Ini adalah verdict, dengan bukti teknis sebagai pendukung.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">gangguan obsesif kompulsif</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_konteks_bukan_sebuah_tempat_uji_sebuah_proyek_konstruksi">Konteks: bukan sebuah tempat uji, sebuah proyek konstruksi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tiga minggu yang lalu, saya sedang bekerja pada`codebase-gradle`, meta-build system saya yang memusatkan konfigurasi YAML dari empat proyek: pembuat README PlantUML, pembuat slide AsciiDoc, situs statis JBake, dan chatbot LLM. Agen Opencode, yang dikendalikan oleh metodologi file agen saya dalam AsciiDoc, memuat sekitar 30K token konteks EAGER di awal setiap sesi — aturan mutlak, backlog, riwayat 10 sesi terakhir.</p> </div> <div class="paragraph"> <p>Di lapangan ini saya berhadapan dengan tiga model:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Kimi K2.6</strong>(Moonshot AI, 1T parameter / 32B diaktifkan, 256K konteks maks, MLA) - <strong>GLM-5.1</strong>(Zhipu AI/Tsinghua, 744B params / DSA, 200K konteks maks) - <strong>DeepSeek-V4-Pro</strong>(DeepSeek, 1.6T parameter / 49B diaktifkan, 1M konteks maksimal, CSA+HCA)</p> </li> </ul> </div> <div class="paragraph"> <p>Semua dilayani melalui Ollama di server cloud, semua dalam mode thinking (fase refleksi diaktifkan). Tantangan: menghasilkan kode yang benar, menjaga konsistensi dalam sesi panjang, dan tidak halusinasi ketika konteks melebihi 80K token.</p> </div> </div> </div> <div class="sect1"> <h2 id="_lingkungan_uji_saya">lingkungan uji saya</h2> <div class="sectionbody"> <div id="diag-dev-env" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Lingkungan Uji — Sesi Opencode × 3 LLM left to right direction package "🖥️ Terminal Pengembang" #E8F5E9 { rectangle "AGENT.adoc (aturan, backlog)" as AG rectangle "PROMPT_REPRISE\n(misi)" as PR rectangle "INDEX.adoc (peta jalan)" 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 744B / MLA+DSA" as GLMG } package "⚙️ basis kode Gradle" #FFF9C4 { folder "buildSrc/" { file "codebase.kt" file "readme.kt" file "site.kt" file "slider.kt" file "snapshot.kt" } file "build.gradle.kts (947 baris)" file "embeds.yml" } AG --> DV4 : Sessions 1-8 ✅ AG --> KIMI : Sessions 9-10 ⚠️ AG --> GLMG : Sessions 11-13 ⚠️ DV4 --> "basis kode" : "TDD, pengrefaktoran,\ncuplikan" KIMI --> "basis kode" : "Degradasi mulai dari 60K token" 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>Setiap sesi dimulai dengan sekitar 30K token konteks EAGER :`AGENT.adoc`(287 baris),<code>PROMPT_REPRISE.adoc</code>(51 baris),<code>.agents/INDEX.adoc</code>(218 baris)<code>LAZY_EAGER_ESSENTIALS.adoc</code>(50 baris). Konteks bertambah cepat dengan pertukaran — sesi tipikal dari 10 pesan menambahkan 15-20K token ke prompt kumulatif.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kriteria_penilaian">Kriteria Penilaian</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya mengevaluasi setiap model pada empat sumbu kritis untuk pengembangan perangkat lunak yang didukung :</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">axis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kriteria konkret</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kohersi konteks panjang</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Apakah agen mengingat konvensi yang telah diputuskan 40 pesan yang lalu?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Kualitas kode yang dihasilkan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Apakah kode berhasil dikompilasi pada upaya pertama? Apakah ia mematuhi pola yang ada?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Penalaran arsitektur</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Apakah agen memahami hubungan antar-modul tanpa saya perlu menjelaskannya lagi?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Resistensi terhadap halusinasi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Dari berapa banyak token agen mulai menciptakan API atau kelas yang tidak ada?</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Dan sebuah metrik sintetik buatan sendiri : yang<strong>koefisien pemulihan</strong>(berapa banyak waktu yang saya habiskan untuk memperbaiki agen alih-alih mengoding dengannya).</p> </div> </div> </div> <div class="sect1"> <h2 id="_putaran_1_kimi_k2_6_awalan_palsu">Putaran 1 : Kimi K2.6 — Awalan Palsu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kimi K2.6 telah menjadi pilihan pertama saya. Benchmark-nya pada SWE-Bench Verified (80.2) dan Terminal-Bench 2.0 (66.7) sangat baik. Arsitektur MLA-nya menjanjikan efisiensi yang baik pada urutan panjang.</p> </div> <div class="sect2"> <h3 id="_sesi_9_perbaikan">Sesi 9 : perbaikan</h3> <div class="paragraph"> <p>Sesi pertama dengan Kimi. Tugas: menerapkan metode`resolveActiveKey()<code>di dalam`codebase.kt</code>— sebuah fungsi resolusi kunci API dengan fallback CLI. Konteksnya adalah 30K token, Kimi berpikir cepat, menghasilkan kode bersih dengan manajemen kadaluwarsa kunci.</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>Kode tersebut berhasil dikompilasi. Tujuh kasus uji lulus. Saya optimis.</p> </div> </div> <div class="sect2"> <h3 id="_session_10_kelamunan_sunyi">Session 10 : kelamunan sunyi</h3> <div class="paragraph"> <p>Sesi kedua. Konteks meningkat hingga ~90K token dengan pertukaran. Saya meminta Kimi untuk menambahkan mekanisme snapshot AsciiDoc yang menganonimkan rahasia sebelum ditulis.</p> </div> <div class="paragraph"> <p>Inilah tempatnya mulai melenceng. Kimi mulai menciptakan kelas yang tidak ada. Dia menawarkan padaku.<code>AnonymizedObjectMapper</code>— kelas fiktif. Dia membingungkan`ReadmeYmlAnonymizer` et <code>CodebaseYmlAnonymizer</code>. Dia menyarankan saya mengimpor`com.fasterxml.jackson.anonymize.*`— sebuah paket yang tidak pernah ada.</p> </div> <div class="paragraph"> <p>Lebih buruk: dalam fase refleksinya, saya melihat bahwa ia membangun argumen berdasarkan premis yang salah. Dia "ingat" bahwa`GitConfig`memiliki sebuah ladang`anonymizedToken`— tidak, ini`resolvedToken()<code>. Dia mengatribusikan pada`SiteYmlAnonymizer`sebuah metode`maskSupabaseCredentials()</code>— yang tidak ada.</p> </div> <div class="paragraph"> <p><em><em>_ Bukan itu sebuah bug. Itu adalah pelarutan progresif koherensi. Seolah-olah setiap token yang ditambahkan ke konteks mengencerkan sedikit lebih memori dari 30.000 token pertama. </em>_</em></p> </div> <div class="paragraph"> <p>Saya menghentikan Kimi setelah dua sesi. Diagnosisnya jelas: MLA mengompres KV cache dengan baik, tetapi tanpa mekanisme seleksi sparse fine-grained, perhatiannya secara mekanis menjadi encer di atas 60K token. Setiap token "melihat" konteks jauh semakin buruk — dan mulai mengisi lubang dengan noise.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_round_2_glm_5_1_pejuang_yang_terhormat">Round 2 : GLM-5.1 — Pejuang yang terhormat</h2> <div class="sectionbody"> <div class="paragraph"> <p>GLM-5.1 hadir dengan arsitektur yang berbeda: MLA untuk model dasar, kemudian <strong>continued pre-training</strong> dengan DSA (DeepSeek Sparse Attention) — sebuah indexer ringan yang secara dinamis memilih token-token teratas 2048 yang relevan dari seluruh riwayat.</p> </div> <div class="sect2"> <h3 id="_arsitektur_dsa_terhadap_mla_murni">Arsitektur : DSA terhadap MLA murni</h3> <div class="paragraph"> <p>Perbedaan tersebut bersifat fundamental. Di tempat Kimi mengompresi riwayat dalam ruang laten unik (dan secara bertahap kehilangan kemampuan untuk mendiskriminasikan informasi yang relevan), GLM menambahkan indexer pasca-pelatihan yang melakukan pemilihan sparse secara eksplisit.</p> </div> <div id="diag-mla-vs-dsa" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Arsitektur Perhatian — MLA vs MLA+DSA left to right direction rectangle "**Kimi K2.6 — MLA murni**" as MLA #FFCDD2 { rectangle "KV Cache lengkap" as KV1 rectangle "kompresi\nlaten" as CL1 rectangle "Dekoding\ndi ruang laten" as DL1 KV1 --> CL1 CL1 --> 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 lengkap" as KV2 rectangle "Kompresi\nlaten (MLA)" as CL2 rectangle "Pengindeks ringan (DSA, top-k=2048)" as IL rectangle "Dekode pada token yang dipilih" as DL2 KV2 --> CL2 CL2 --> IL IL --> DL2 note bottom of DL2 ✅ "Tanpa kehilangan secara inherent" Sélection explicite des tokens pertinents end note } MLA --> DSA : "Gain: seleksi sparse\nmengurangi penyampingan" @enduml</pre> </div> </div> <div class="paragraph"> <p>Laporan teknis ini secara eksplisit menyatakan: DSA adalah <em>"lossless by construction"</em> — berbeda dengan alternatif seperti SWA (pattern search), Gated DeltaNet atau SimpleGDN yang kehilangan hingga 5.69 poin pada RULER@128K.</p> </div> </div> <div class="sect2"> <h3 id="_sesi_11_13_teguh_tetapi_menggecewakan">Sesi 11-13: teguh tetapi menggecewakan</h3> <div class="paragraph"> <p>GLM-5.1 lebih baik menjaga jarak. Pada sesi 11 (~60K token), ia tetap koheren. Ia menghasilkan sebuah`SnapshotManager`berfungsi dengan manajemen yang tepat untuk empat anonimizer</p> </div> <div class="paragraph"> <p>Namun latensi adalah masalah. Tahap refleksi DSA lebih berat daripada MLA murni — indexer harus memindai ulang sejarah setiap langkah. Sebuah respons yang membutuhkan 8 detik dengan Kimi membutuhkan 15 detik dengan GLM. Pada sesi 30 pesan, hal ini terasa.</p> </div> <div class="paragraph"> <p>Dan kemudian ada kesalahan halus. GLM tidak mengelirukan seperti Kimi — tapi ia membuat kesalahan <strong>penamaan</strong>. Ia memanggil`toAnonymizedYaml()<code>metode yang seharusnya disebut`anonymize()</code>. Dia membalikkan`loadReadmeConfiguration()` et <code>loadCodebaseConfiguration()`di`renderFileSection()</code>. Bukan halusinasi, ini adalah kebingungan permukaan — tetapi di produksi, kebingungan permukaan dapat memecah build.</p> </div> <div class="paragraph"> <p>Saya telah mengadakan tiga sesi dengan GLM. Lebih baik daripada Kimi, tanpa ragu. Tapi tiga sesi perbaikan manual pada detail penamaan, itu menguras.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_round_3_deepseek_v4_pro_mesin_perang">Round 3 : DeepSeek-V4-Pro — Mesin Perang</h2> <div class="sectionbody"> <div class="paragraph"> <p>DeepSeek-V4-Pro hadir dengan arsitektur paling ambisius dari tiga: sebuah sistem hibrid yang menggabungkan dua mekanisme perhatian komplementer.</p> </div> <div class="sect2"> <h3 id="_arsitektur_csa_hca_jaring_ganda">Arsitektur: CSA + HCA, jaring ganda</h3> <div id="diag-csa-hca" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 180 title DeepSeek-V4-Pro — Arsitektur Hibrid CSA + HCA left to right direction rectangle "KV Cache 1M token" as KV #E3F2FD rectangle "CSA\nPerhatian Sparse yang Dikompresi" as CSA #C8E6C9 { rectangle "Kompresi m token → 1" as CC rectangle "Perhatian Sparse\n(DSA, top-k)" as SA CC --> SA note bottom of SA Attention locale fine + sélection sparse end note } rectangle "HCA Perhatian yang terkompresi berat" as HCA #BBDEFB { rectangle "Kompresi ekstrem\nm' >> m → 1" as ECC rectangle "Perhatian padat sisa" as EDA ECC --> EDA note bottom of EDA Contexte global + connexions longue distance end note } rectangle "Fusi hibrid" as FUSION #FFF9C4 rectangle "Dekoding\nkohéren" as DEC #FFE0B2 KV --> CSA : Précision locale KV --> HCA : Vision globale CSA --> FUSION HCA --> FUSION FUSION --> DEC @enduml</pre> </div> </div> <div class="paragraph"> <p>Dua tingkat kompresi, dua tingkat ketelitian perhatian:</p> </div> <div class="ulist"> <ul> <li> <p><strong>CSA</strong>mengompres cache KV setiap`m`tokens, lalu menerapkan perhatian spars (DeepSeek Sparse Attention) — hanya top-k entri yang dikompresi yang diakses. Akurat, lokal, efisien. - <strong>HCA</strong>kompresi ekstrem (faktor`m'` bien plus grand que <code>m</code>), perhatian yang padat pada sisa yang dikompresi — pertahankan koneksi global tanpa ledakan kuadratik.</p> </li> </ul> </div> <div class="paragraph"> <p>Hasil: pada 1M token, DeepSeek-V4-Pro hanya mengonsumsi<strong>27% dari FLOPs inferensi</strong> et <strong>10% dari ukuran cache KV</strong>dibandingkan dengan DeepSeek-V3.2. Model sebelumnya.</p> </div> <div class="paragraph"> <p>Dan terutama, laporan teknis (Gambar 9) mengumumkan : <em>"Retrieval performance remains highly stable within a 128K context window."</em></p> </div> </div> <div class="sect2"> <h3 id="_sesi_1_8_kelegaan">Sesi 1-8: kelegaan</h3> <div class="paragraph"> <p>Saya telah menghabiskan delapan sesi dengan DeepSeek-V4-Pro pada`codebase-gradle`. Delapan sesi tanpa satu pun halusinasi, tanpa satu pun kelas yang diciptakan, tanpa satu pun kebingungan penamaan.</p> </div> <div class="paragraph"> <p>Sesi 1: implementasi`CodebaseYmlConfig` et <code>CodebaseYmlAnonymizer</code>. 350 baris Kotlin, tes inline, semua berhasil dikompil. Sesi 4 : penambahan`SnapshotManager`dengan tree view, pengumpulan file, rendering AsciiDoc per file. 279 baris, tidak ada error. Sesi 7 : debug dari`renderFileSection()`yang harus mengelola empat jenis anonymizer berbeda tanpa keambiguan resolusi. Diselesaikan dalam tiga pesan.</p> </div> <div class="paragraph"> <p>Latensi lebih tinggi daripada Kimi — sekitar 10-12 detik per respons dalam mode thinking. Namun tingkat koreksi hampir nol. Saya tidak menghabiskan waktu saya untuk memperbaiki kesalahan agen. Saya coding <strong>dengan</strong> dia.</p> </div> </div> <div class="sect2"> <h3 id="_ujian_yang_menentukan_refactoring_hingga_100k_token">Ujian yang menentukan: refactoring hingga 100K token</h3> <div class="paragraph"> <p>Pada sesi 8, konteks kumulatif melebihi 100K token. Saya meminta refactoring berat: mengekstrak empat tugas verifikasi inline dari`build.gradle.kts`ke file tes JUnit5 di`buildSrc/src/test/`.</p> </div> <div class="paragraph"> <p>Agen menawarkan rencana dalam tiga tahap:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Membuat kelas pengujian dengan migrasi kasus yang ada</p> </li> <li> <p>Menambahkan dependensi JUnit5 dan Kotest dalam`buildSrc/build.gradle.kts`</p> </li> <li> <p>Hapus kode inline dari`build.gradle.kts`</p> </li> </ol> </div> <div class="paragraph"> <p>Rencananya benar. Pelaksanaannya rapi. Ia bahkan mengidentifikasi sebuah kasus tepi yang saya lewatkan: dependensi Jackson yang terduplikasi antara`buildscript {}` et `buildSrc/build.gradle.kts`yang harus disatukan selama migrasi.</p> </div> <div class="paragraph"> <p>100K token konteks, dan agen ingat bahwa`CodebaseYmlAnonymizer.TOKEN_MASK`adalah`"<strong>*</strong>"`, bahwa`GitConfig.resolvedToken()<code>adalah sebuah fungsi ekstensi yang didefinisikan dalam`readme.kt</code>, dan bahwa`SnapshotManager.PRUNED_DIRS`mengecualikan`build`, <code>.gradle</code> et <code>.git</code>.</p> </div> <div class="paragraph"> <p>Itu saja, perbedaan.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_muka_ke_muka_perbandingan_metrik">Muka ke Muka: Perbandingan Metrik</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">Kriteria</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">konteks maks</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">Mekanisme perhatian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">MLA murni</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">MLA + DSA</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CSA + HCA hibrid</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Parameter total</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1T</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">744B</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">1.6T</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengaturan diaktifkan</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">tidak dipublikasikan</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">ambang degradasi yang diamati</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"></think> (output nothing)</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">Perilaku di luar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hallusinasi massal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kesalahan permukaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">degradasi progresif lambat</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Stabilitas NIAH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">belum dipublikasikan</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 hingga 128K (Gambar 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">tidak dipublikasikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">belum dipublikasikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">lebih baik daripada Gemini 3.1 Pro</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">sesi-sesi yang diadakan sebelum pengabaian</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 (dan melanjutkan)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Waktu koreksi / waktu kode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">60%</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">30%</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><5%</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Latensi rata-rata (mode berpikir)</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">Koefisien kepercayaan*</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>*Koefisien kepercayaan = ukuran subjektif dari kemampuan saya untuk mengambil kode agen dan commit tanpa membaca baris demi baris.</em></p> </div> <div id="diag-radar" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Radar Perbandingan — 3 LLMs dalam Pengembangan Perangkat Lunak yang Dibantu legend right |= Couleur |= Modèle | | <#FF5252> | Kimi K2.6 | | <#FFC107> | GLM-5.1 | | <#4CAF50> | DeepSeek-V4-Pro | endlegend rectangle " " as space #FFFFFF rectangle "Konsistensi 80K+ token" as coh #F5F5F5 rectangle "Kualitas\nkode" as qual #F5F5F5 rectangle "Penalaran arsitek" as arch #F5F5F5 rectangle "Resistensi halusinasi" as hall #F5F5F5 rectangle "Kecepatan\n(pengalaman pengembangan)" as speed #F5F5F5 rectangle "Pengetahuan Gradle/Kotlin" as kg #F5F5F5 rectangle "Tingkat koreksi" as corr #F5F5F5 coh --> qual qual --> arch arch --> hall hall --> speed speed --> kg kg --> 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 (> 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="_mengapa_deepseek_v4_pro_menang_dalam_pengembangan_perangkat_lunak">Mengapa DeepSeek-V4-Pro Menang dalam Pengembangan Perangkat Lunak</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kelebihan DeepSeek-V4-Pro bukan karena hanya satu faktor — ini adalah konvergensi :</p> </div> <div class="sect2"> <h3 id="_arsitektur_csahca_dirancang_untuk_kode">Arsitektur CSA+HCA dirancang untuk kode</h3> <div class="paragraph"> <p>pengembangan perangkat lunak yang dibantu adalah kasus penggunaan <strong>ekstrem</strong> untuk perhatian konteks panjang. Anda perlu : - Presisi lokal (kelas ini mewarisi apa? metode ini didefinisikan di mana?) →<strong>CSA</strong> - Visi global (mengapa modul ini ada ? bagaimana empat anonymiser berinteraksi ?) →<strong>HCA</strong></p> </div> <div class="paragraph"> <p>Kimi hanya dengan MLA mengelola akurasi lokal tetapi kehilangan visi global di atas 60K. GLM dengan DSA meningkatkan visi global tetapi tetap mono-level. DeepSeek menggabungkan keduanya secara eksplisit.</p> </div> </div> <div class="sect2"> <h3 id="_2_konteks_eager_adalah_zona_kenyamanan">2. Konteks EAGER adalah zona kenyamanan</h3> <div class="paragraph"> <p>Sistem tata kelola saya memuat sekitar 30K token aturan dan backlog saat startup. Dengan jendela stabil hingga 128K, DeepSeek memiliki sekitar 100K token ruang tambahan untuk pertukaran sesi. Ini adalah 3 hingga 4 kali lebih banyak daripada yang dapat Kimi tangani tanpa degradasi.</p> </div> <div class="paragraph"> <p><em><em>_ Jendela 128K stabilitas sempurna cocok tepat dengan kebutuhan saya: 30K EAGER + 70K pertukaran = sesi produktif 20-30 pesan tanpa pernah keluar dari zona hijau. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_3_rasio_kualitaslatensi_optimal_untuk_alur">3. Rasio kualitas/latensi optimal untuk alur</h3> <div class="paragraph"> <p>Ya, DeepSeek-V4-Pro lebih lambat daripada Kimi (11s vs 8s). Tapi waktu <strong>total</strong> dari suatu tugas jauh lebih rendah karena saya tidak menghabiskan 20 menit untuk memperbaiki halusinasi agen.</p> </div> <div class="paragraph"> <p>Pengembang tidak mengukur latensi dari sebuah respons. Dia mengukur waktu antara "saya menajukan pertanyaan" dan "kode ada di repositori saya dan berfungsi". Pada metrik tersebut, DeepSeek-V4-Pro adalah yang tercepat dari tiga.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pelajaran_yang_dipelajari_cara_memilih_llm_anda_untuk_vibe_coding">Pelajaran yang Dipelajari : Cara Memilih LLM Anda untuk Vibe Coding</h2> <div class="sectionbody"> <div class="paragraph"> <p>Di luar peringkat spesifik, pengalaman ini mengajarkan saya untuk mengevaluasi LLM untuk pengembangan perangkat lunak yang didukung berdasarkan kriteria yang tidak ada dalam benchmark manapun :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Lihat arsitekturnya, bukan ukuran konteks yang diumumkan</strong>— Sebuah model yang menglaim 256K konteks tetapi hanya memiliki MLA akan berakhir seperti Kimi: secara teoretis mampu, secara praktis tidak dapat digunakan di atas 60K.</p> </li> <li> <p><strong>Uji pada konteks Anda, bukan pada benchmark generik</strong>— Prompt awal saya sebesar 30K token AsciiDoc dengan aturan absolut dan backlog tidak ada hubungannya dengan pertanyaan HLE atau AIME.</p> </li> <li> <p><strong>Latensi bukanlah musuh bila kualitas ikut</strong>— Sebuah model lambat yang menghasilkan kode yang benar lebih cepat daripada model cepat yang menghasilkan kode yang salah.</p> </li> <li> <p><strong>Waspadalah terhadap model tanpa laporan teknis publik</strong>— Jika tim tidak mendokumentasikan arsitektur perhatiannya, berarti mereka tidak percaya pada kinerjanya dalam konteks panjang.</p> </li> </ol> </div> <div id="diag-decision-tree" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 260 title Pohon Keputusan — Memilih LLM-nya untuk Pengembangan yang Dibantu start :Contexte initial\n> 20K tokens ?; if (Oui) then :Architecture d'attention\nhybride ou multi-niveau ?; if (CSA+HCA) then :DeepSeek-V4-Pro Fenetre stable 128K Ideal pour gouvernance EAGER; stop elseif (MLA + DSA) then :GLM-5.1 Correct jusqu'a ~120K Latence elevee; stop else (MLA seul) :Kimi K2.6 (sessions courtes) ou eviter pour long contexte Chercher un modele avec sparse attention; stop endif else (Contexte < 20K) :N'importe lequel fonctionne. Privilegier la latence.; stop endif @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dan_bagaimana_dengan_governance_agent_dalam_semua_ini">Dan bagaimana dengan Governance Agent dalam semua ini?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pengalaman ini mengonfirmasi satu poin yang saya pertahankan sejak artikel saya tentang tata kelola Eager/Lazy:<strong>Kualitas LLM dan kualitas tata kelola bersifat multiplikatif, bukan aditif</strong>.</p> </div> <div class="paragraph"> <p>Dengan Kimi K2.6, tata kelola saya sempurna — tetapi model mengaburkan informasi. Hasil: tata kelola sempurna × halusinasi = nol.</p> </div> <div class="paragraph"> <p>Dengan DeepSeek-V4-Pro, tata kelola EAGER (30K token aturan) + LAZY (arsip sesi, referensi teknis) + Hot/Warm/Cold (cadangan rotatif) membentuk sebuah ekosistem di mana setiap lapisan memperkuat yang lain. Agen memiliki aturan di depan mata (EAGER), dapat mengakses riwayat (LAZY), dan konteks tidak pernah meluap (rotasi cadangan).</p> </div> <div class="paragraph"> <p><em><em>_ Sebuah LLM yang baik tanpa tata kelola adalah seperti mesin Ferrari tanpa stir. Tata kelola yang baik tanpa LLM yang baik adalah seperti stir tanpa mesin. DeepSeek-V4-Pro + tata kelola agen saya = pertama kali saya merasa sedang mengemudi. </em>_</em></p> </div> <div class="paragraph"> <p>Mekanisme backup rotatif (rotasi setiap 10 sesi atau >500 baris EAGER) menjadi bermakna dengan model yang mampu menahan konteks 128K: sliding window dari 10 sesi aktif mempertahankan konteks yang segar tanpa pernah melebihi zona degradasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_teknis">Sumber Teknis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya telah menggabungkan pengalaman empiris saya dengan laporan teknis resmi untuk memvalidasi pengamatan saya :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>DeepSeek-V4 Technical Report</strong> — PDF diambil darihttps://huggingface.co/deepseek-ai/DeepSeek-V4-Flash[HuggingFace]. Gambar 9 : "Kinerja pengambilan tetap sangat stabil dalam jendela konteks 128K. Sementara degradasi kinerja menjadi terlihat di luar batas 128K, kemampuan pengambilan model pada 1 juta token tetap sangat kuat." Arsitektur CSA+HCA yang didokumentasikan bagian 2.3.</p> </li> <li> <p><strong>GLM-5 Laporan Teknis</strong> —https://arxiv.org/abs/2602.15763[arXiv:2602.15763]DSA diperkenalkan melalui pra-pelatihan berkelanjutan, "lossless by construction". Konteks maksimal 202.752 token. Tabel 3/5/6 mendokumentasikan performa konteks panjang versus alternatif (SWA, Gated DeltaNet, SimpleGDN).</p> </li> <li> <p><strong>Kartu Model Kimi K2.6</strong> —https://huggingface.co/moonshotai/Kimi-K2.6[HuggingFace]. MLA, konteks maksimal 256K. Strategi discard-all di atas ambang batas pada tugas agen (mengonfirmasi secara implisit batas praktis MLA dalam konteks panjang).</p> </li> <li> <p><strong>Kimi K2 Laporan Teknis</strong> —https://arxiv.org/abs/2507.20534[arXiv:2507.20534]. Arsitektur MoE, optimiser MuonClip, kinerja agen (HLE, BrowseComp, Terminal-Bench).</p> </li> </ol> </div> <div class="paragraph"> <p>Poin paling terungkap: Dalam penilaian mereka sendiri, Moonshot menerapkan strategi <strong>discard-all</strong> (penghapusan konteks lama) begitu jendela konteks melebihi batas. Hal ini secara pasti mengonfirmasi apa yang saya amati: MLA saja tidak dapat mempertahankan koherensi di seluruh jendela 256K. Arsitektur tidak mengikuti.</p> </div> </div> </div> <div class="sect1"> <h2 id="_conclusion_pilihan_artisan">Conclusion: Pilihan Artisan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah tiga minggu dan tiga belas sesi pengembangan nyata, putusannya mutlak:</p> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3333%;"> <col style="width: 8.3337%;"> </colgroup> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kimi K2.6</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">GLM-5.1</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">DeepSeek-V4-Pro</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Excellent di bawah 60K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kuat hingga 120K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mendominasi di mana-mana</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak dapat digunakan di luar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kebingungan permukaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Stabil hingga 128K</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2 sesi, ditinggalkan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">3 sesi, ditinggalkan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">8 sesi, diadopsi</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>DeepSeek-V4-Pro telah menjadi LLM default saya untuk semua sesi pengembangan perangkat lunak yang dibantu dengan Opencode. Tidak karena ia yang terbaru. Tidak karena ia memiliki benchmark akademik terbaik. Namun karena dalam kehidupan nyata seorang pengembang yang mengirimkan plugin Gradle Kotlin DSL dengan konteks agen 30K token, ia adalah satu-satunya yang tidak meniakhiri saya ketika konteks membesar.</p> </div> <div class="paragraph"> <p>CSA+HCA adalah <strong>game changer</strong> arkitektonik. Kompresi tingkat ganda + sparsifikasi bukan detail implementasi — ini yang membedakan antara asisten kode dan rekan tim yang andal.</p> </div> <div class="paragraph"> <p><em><em>_ Saya memilih DeepSeek-V4-Pro karena ia adalah satu-satunya dari tiga yang mengubah tata kelola agen saya dari batasan defensif ("bagaimana menghindari agen lupa?") menjadi keunggulan ofensif ("apa yang bisa kita bangun sekarang bahwa agen mengingat semuanya?"). </em>_</em></p> </div> <hr> <div class="paragraph"> <p><strong>Makalah ini adalah hasil dari 13 sesi pengembangan nyata pada proyek`codebase-gradle`, dokumentasi dalam`.agents/sessions/`menurut metodologi pengelolaan agen saya Eager/Lazy/Hot/Warm/Cold. Sumber-sumber teknis yang disebut dapat diakses secara publik di HuggingFace dan arXiv.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0111_audit_contexte_agent_post.html Mon, 27 Apr 2026 00:00:00 +0000 blog/2026/0111_audit_contexte_agent_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_sahnya_sesi_051_ada_yang_tidak_beres">Sahnya: sesi 051, ada yang tidak beres</a></li> <li><a href="#_audit_merinci_627_baris">Audit: merinci 627 baris</a></li> <li><a href="#_ketakutan_kehilangan_teknik">Ketakutan kehilangan teknik</a></li> <li><a href="#_solusi_split_ensiklopedi">Solusi : split ensiklopedi</a></li> <li><a href="#_isi_file_essentials">Isi file ESSENTIALS</a></li> <li><a href="#_hasil_50_konteks_eager">Hasil: -50% konteks EAGER</a></li> <li><a href="#_mengapa_folder_bernama_encyclopedies">Mengapa folder bernama `encyclopedies/</a></li> <li><a href="#_lanjut_logis_dari_seri">Lanjut logis dari seri</a></li> <li><a href="#_apa_yang_akan_saya_lakukan_berbeda">Apa yang akan saya lakukan berbeda</a></li> <li><a href="#_panduan_untuk_mengaudit_konteks_anda_sendiri">Panduan untuk mengaudit konteks Anda sendiri</a></li> <li><a href="#_tata_kelola_hidup">Tata kelola hidup</a></li> <li><a href="#_tautan">Tautan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 14 minutes</div> <p>Anda telah menghabiskan mingguan untuk membangun tata kelola agen yang sempurna. Eager/Lazy, prosedur akhir sesi, backup rotatif. Sistem berjalan. Lalu suatu hari, agen menjadi lambat. Responsnya menjadi encer. Anda mengukur: 1414 baris dimuat secara otomatis. Dan yang terburuk, itu bukan kode, bukan backlog, bukan arsip sesi. Penyebabnya adalah file yang mendokumentasikan metode Anda.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_sahnya_sesi_051_ada_yang_tidak_beres">Sahnya: sesi 051, ada yang tidak beres</h2> <div class="sectionbody"> <div class="paragraph"> <p>30 April 2026, 16:00. Saya tengah dalam sesi`magic-stick`, proyek saya membangun ISO Linux live. Agen Opencode telah memuat otomatis file-file Eager saya seperti biasa —<code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, <code>.agents/INDEX.adoc</code>. Semua normal.</p> </div> <div class="paragraph"> <p>Tapi jawaban-nya lemah. Agen memakan waktu dua detik lebih untuk berpikir. Ia melupakan detail yang baru saja dia lihat tiga pesan sebelumnya. Ini bukan crash, bukan kesalahan — ini adalah degradasi perlahan, jenis yang tidak langsung terlihat.</p> </div> <div class="paragraph"> <p>Saya sudah pernah mengalami hal itu pada sesi 048, ketika saya menemukan bahwa file-file tata kelola memiliki 5200 baris secara kumulatif. Saya kemudian mengonseptualisasikan mekanisme Hot/Warm/Cold dengan window geser sebesar 10 sesi, gelombang dinginnya yang identik, serta sensor-nya dengan dua pemicu. Masalah tersebut sudah teratasi. Dalam teori.</p> </div> <div class="paragraph"> <p>Tapi di sini, kita berada di sesi 051. Rotasi backup telah terjadi dengan baik — file-file EAGER berubah dari 2087 menjadi 500 baris. Namun, konteks masih berat. Ada yang terlepas dariku.</p> </div> <div class="paragraph"> <p>Saya membuka terminal dan saya mengetik :</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 baris. Rotasi backup telah memangkas dengan baik di INDEX, SESSIONS_HISTORY dan COMPLETED_TASKS — mereka bersih. Tapi ada seekor gajah di ruangan yang belum saya lihat :<strong>627 baris</strong>dalam satu file.<code>AGENT_MODUS_OPERANDI.adoc</code>.</p> </div> <div class="paragraph"> <p>File ini adalah file yang saya telah tulis di sesi 1 untuk mendokumentasikan strategi Eager/Lazy. Ini adalah manual metode. Dan ia sendiri telah menjadi 44% dari konteks EAGER.</p> </div> <div id="diag-before-audit" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE title Konteks EAGER — 1414 baris rectangle "AGENT_MODUS_OPERANDI **627 baris (44%)**" as MOD #FFCDD2 rectangle "AGENT.adoc 287 baris (20%)" as AG #BBDEFB rectangle "INDEX.adoc\n218 baris (15%)" as IDX #C8E6C9 rectangle "COMPLETED_TASKS 213 baris (15%)" as ARC #FFF9C4 rectangle "PROMPT_REPRISE 51 baris (4%)" as PRO #E1BEE7 rectangle "SESSIONS_HISTORY 18 baris (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>Ironi itu total. File yang dirancang untuk <strong>menghemat</strong> konteks telah menjadi <strong>konsumen</strong> utama konteks. Seolah-olah manual penggunaan mobil Anda lebih berat daripada mesin.</p> </div> </div> </div> <div class="sect1"> <h2 id="_audit_merinci_627_baris">Audit: merinci 627 baris</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya memutuskan untuk melakukan audit bagian demi bagian. Bukan untuk menghapus — untuk <strong>memahami</strong> yang layak berada di EAGER dan yang mungkin bisa tinggal di tempat lain tanpa kehilangan pengetahuan.</p> </div> <div class="paragraph"> <p>Berikut adalah struktur tepat dari`AGENT_MODUS_OPERANDI.adoc`dan yang saya temukan di sana:</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">Bagian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Baris</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konten</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sudah ada di…​</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P1 — Gambaran Umum</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">Masalah terpecahkan, prinsip-prinsip dasar, analogi dasbor vs manual</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"><strong>P2 — Struktur file</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">Struktur pohon, kebijakan pemuatan, kapan memuat apa</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 — Aturan mutlak</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 dilarang, perintah destruktif dilarang, rahasia dilarang</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 — Siklus hidup sesi</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 pembukaan, aturan kerja, 6 tahap akhir sesi, daftar periksa</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code>§Sesi selesai +<code>INDEX.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P5 — Metrik dan ambang batas</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">Sesi ideal (15-30 menit, 1-3 berkas), tanda peringatan</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 — Jenis sesi</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">Tabel deteksi, format proposasi, pengecualian</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 — Peningkatan terus-menerus</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">Metrik pelacakan, ulasan mingguan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P8 — Checklist pemulai</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">Proyek Bootstrap baru</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>P9 — Referensi</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">File referensi, sumber daya eksternal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>AGENT.adoc</code>(file EAGER/LAZY)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Lampiran 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">Glosarium, riwayat versi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Blank)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Putusannya tanpa rayuan:</p> </div> <div class="ulist"> <ul> <li> <p><strong>duplikasi lengkap</strong>(167 baris) : P3, P4, P9 — semua sudah di dalam`AGENT.adoc` ou <code>INDEX.adoc</code>, sering kata demi kata</p> </li> <li> <p><strong>Tidak pernah dikonsultasikan dalam praktik</strong>(215 baris) : P5, P6, P7, P8, Lampiran — dari meta-pemerintahan yang tidak pernah digunakan dalam sesi apa pun</p> </li> <li> <p><strong>Pengetahuan unik</strong>(161 baris) : P1 dan P2 — kosakata LAZY/EAGER, analogi, kebijakan pemuatan</p> </li> </ul> </div> <div class="paragraph"> <p>Pada 627 baris,<strong>382 adalah derau</strong>. Dan 382 baris ini dimuat <strong>di awal setiap sesi</strong>, dikonsumsi oleh agen, mengurangi perhatiannya bahkan sebelum saya menyapa.</p> </div> <div id="diag-audit-result" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Audit AGENT_MODUS_OPERANDI.adoc — 627 baris left to right direction rectangle "🟡 **Duplikat** 167 baris (27%)" as DUP #FFF9C4 { card "P3 — Peraturan Mutlak\n(34 baris)" as D1 card "P4 — Siklus hidup (133 baris)" as D2 card "P9 — Referensi (30 baris)" as D3 } rectangle "🔴 **Tidak pernah dikonsultasi** 215 baris (34%)" as JAM #FFCDD2 { card "P5 — Metrik (49 baris)" as J1 card "P6 — Deteksi (72 baris)" as J2 card "P7 — Peningkatan (39 baris)" as J3 card "P8 — Bootstrap (13 baris)" as J4 card "Annexes — Glosarium (42 baris)" as J5 } rectangle "**Pengetahuan unik** 161 baris (26%)" as UNI #C8E6C9 { card "P1 — Ringkasan\n(64 baris)" as U1 card "P2 — Struktur file (97 baris)" 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>Diagram ini adalah kunci dari segalanya. Duplikasi (kuning) adalah noise murni — agen membaca mereka dua kali, dalam dua file berbeda. Yang tidak pernah dikonsultasi (merah) adalah dokumentasi mati — ditulis dengan teliti, tidak pernah digunakan. Hanya hijau yang berisi pengetahuan yang tidak dapat ditemukan oleh agen di tempat lain.</p> </div> </div> </div> <div class="sect1"> <h2 id="_ketakutan_kehilangan_teknik">Ketakutan kehilangan teknik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pada tahap ini, saya memiliki bukti di depan mata saya: saya harus mengurangi`AGENT_MODUS_OPERANDI.adoc`. Tapi saya ragu.</p> </div> <div class="paragraph"> <p>File ini, saya tulis dengan tangan. Setiap bagian adalah hasil dari pelajaran yang dipelajari dalam sesi nyata. Bagian P3 lahir dari sebuah`rm -rf`aksidental di`bakery-plugin`yang menghabiskan token Firebase nyata. Bagian P4 adalah hasil dari lima belas sesi di mana saya lupa mengarsip dan kehilangan alur. Prosedur dalam 6 langkah bukanlah hasil dari sebuah buku — ia adalah hasil dari kesakitan.</p> </div> <div class="paragraph"> <p>Menghapus bagian-bagian ini, akan menjadi membuang sejarah dari rekayasa saya sendiri. Pelajaran yang menciptakannya, sesi-sesi ketika saya menemukannya, kesalahan yang saya tidak ingin pernah lagi mengulangi. Bukan itu teks — ini adalah pengalaman yang terkristal.</p> </div> <div class="paragraph"> <p>Itulah tempat saya merumuskan prinsip yang akan memandu solusi:</p> </div> <div class="paragraph"> <p><em><em>_ <strong>Jangan pernah menghapus. Selalu relokasi.</strong>Pengetahuan tidak harus menghilang dari proyek. Ia hanya perlu tidak dimuat secara otomatis ketika tidak diperlukan. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_split_ensiklopedi">Solusi : split ensiklopedi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Model yang saya ajukan sederhana dan terinspirasi dari cara Wikipedia berkembang: ketika suatu artikel menjadi terlalu panjang, kita tidak memotongnya — kita membuat artikel terperinci dan menyimpan rangkuman dalam artikel utama.</p> </div> <div class="paragraph"> <p>untuk`AGENT_MODUS_OPERANDI.adoc`, itu memberi :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Mengekstrak</strong>161 baris pengetahuan unik (P1 + P2) dalam file baru`LAZY_EAGER_ESSENTIALS.adoc`— dikompresi ke ~50 baris, ketat EAGER</p> </li> <li> <p><strong>Mengganti nama</strong> <code>AGENT_MODUS_OPERANDI.adoc</code> en <code>.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc</code>— file asli 627 baris, disimpan <strong>intact</strong>, dalam penyimpanan dingin</p> </li> <li> <p><strong>Jangan pernah mengisi daya</strong>file ensiklopedia secara otomatis — ia ada untuk manusia, untuk distilasi masa depan, untuk agen yang akan dipanggil dalam enam bulan dengan model yang lebih baik</p> </li> </ol> </div> <div id="diag-split-solution" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Split Ensiklopedik — AGENT_MODUS_OPERANDI left to right direction rectangle "**AGENT_MODUS_OPERANDI.adoc** 627 baris (sebelum split)" as BEFORE #FFCDD2 { } rectangle " " as ARROW1 rectangle " " as ARROW2 rectangle "**LAZY_EAGER_ESSENTIALS.adoc** **~50 baris — EAGER**" as ESS #C8E6C9 { card "P1 ringkas\n(15 baris)" as E1 card "P2 terkompresi (35 baris)" as E2 } rectangle ".agents/encyclopedies/` `LAZY_EAGER_ENCYCLOPEDIE.adoc` 627 baris — COLD" as ENC #BBDEFB { card "P1 ke Lampiran (lengkap, utuh)" as C1 } BEFORE -[#4CAF50]-> ESS : "Ekstraksi pengetahuan kritis" BEFORE -[#2196F3]-> ENC : "Preservasi lengkap teknik" 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>Nama`encyclopedies/`Tidak sembarangan. Sebuah ensiklopedia bukanlah berkas arsip — itu merupakan koleksi pengetahuan yang terorganisir, dapat diakses tapi tidak dapat dibawa. Tidak ada yang membaca Ensiklopedia Universalis di metro. Kita menyimpannya di perpustakaan, dan kita pergi ke sana saat kita memiliki pertanyaan yang spesifik.</p> </div> <div class="paragraph"> <p>Ini adalah peran tepat dari folder ini: sebuah perpustakaan referensi yang dingin, terstruktur, komprehensif — yang tidak disentuh secara otomatis oleh agen.</p> </div> </div> </div> <div class="sect1"> <h2 id="_isi_file_essentials">Isi file ESSENTIALS</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah tampilan konkret dari file baru.<code>LAZY_EAGER_ESSENTIALS.adoc</code>, diekstrak dan dikompres dari P1 dan P2 :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Stratégie LAZY/EAGER — Principes Essentiels [abstract] Ce fichier définit la stratégie de gestion du contexte agent. Chargé automatiquement (EAGER) en début de session. == Principes |=== | EAGER | LAZY | Tableau de bord | Manuel du propriétaire | Chargé automatiquement | Chargé sur demande | <= 100 lignes, <= 10k tokens | Illimité, détaillé | Règles absolues, mission courante | Archives, historique, références |=== == Politique de Chargement |=== | Fichier | Type | Quand charger | PROMPT_REPRISE.adoc | EAGER | Début session (auto) | *_ESSENTIALS.adoc | EAGER | Début session si EPIC active | .agents/INDEX.adoc | EAGER | Début session (auto) | *_REFERENCE.adoc | LAZY | Sur besoin (détails architecture) | .agents/sessions/N-*.adoc | LAZY | Sur demande (détails session) | .agents/encyclopedies/*.adoc | COLD | Jamais auto (humain seulement) |=== == Comment l'Agent Sait Quoi Charger Début session → PROMPT_REPRISE + INDEX + ESSENTIALS actifs. Besoin de détails → charger les *_REFERENCE et sessions/ en LAZY. Connaissance froide → encyclopedies/, jamais automatique.</code></pre> </div> </div> <div class="paragraph"> <p>Lima puluh baris. Itulah semua yang dibutuhkan agen untuk memahami mekaniknya. Sisanya — riwayat pelajaran, analogi terperinci, prosedur langkah demi langkah, lampiran — berada di dalam ensiklopedia.</p> </div> <div class="paragraph"> <p>Dan yang terpenting:<strong>Tidak ada yang dihapus</strong>. 627 baris teknik masih ada, di`.agents/encyclopedies/LAZY_EAGER_ENCYCLOPEDIE.adoc`. Mereka hanya disimpan di perpustakaan alih-alih di atas meja kerja.</p> </div> </div> </div> <div class="sect1"> <h2 id="_hasil_50_konteks_eager">Hasil: -50% konteks EAGER</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum 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>Setelah 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>@startuml skinparam backgroundColor #FEFEFE title Konteks EAGER setelah split ensiklopedi — 837 baris (-41%) rectangle "AGENT.adoc\n287 baris (34%)" as AG #BBDEFB rectangle "INDEX.adoc 218 baris (26%)" as IDX #C8E6C9 rectangle "COMPLETED_TASKS 213 baris (25%)" as ARC #FFF9C4 rectangle "PROMPT_REPRISE\n51 baris (6%)" as PRO #E1BEE7 rectangle "ESSENSIAL\n50 baris (6%)" as ESS #A5D6A7 rectangle "SESSIONS_HISTORY\n18 baris (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>Pengguna terbesar (AGENT_MODUS_OPERANDI, 627 baris) telah diganti dengan sebuah file berukuran 50 baris. Manfaatnya segera terasa : 577 baris konteks telah dibebaskan. Agen tersebut bisa bernapas.</p> </div> <div class="paragraph"> <p>Dan di`.agents/encyclopedies/`, file asli dari 627 bar menunggu. Utuh. Dengan semua bagiannya — termasuk yang merupakan duplikat, termasuk yang belum pernah digunakan. Karena suatu hari nanti, sebuah model yang lebih baik atau seorang data scientist manusia akan ingin menggabungkan sudut-sudut ini, redundansi yang diasumsikan, pelajaran yang telah dipelajari. Dan hari itu, bahan mentah akan ada.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_folder_bernama_encyclopedies">Mengapa folder bernama `encyclopedies/</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pemilihan nama tidak bersifat kosmetik. Ia mengkodekan filosofi mekanisme.</p> </div> <div class="paragraph"> <p>Sebuah <strong>arsip</strong> (<code>archives/</code>) mengandung data historis yang diatur secara kronologis — seperti COMPLETED_TASKS bulanan. Sebuah <strong>backup</strong> (<code>backup/</code>) adalah snapshot berlabel waktu — sebuah cadangan dari keadaan masa lalu.</p> </div> <div class="paragraph"> <p><strong>Encyclopédie</strong>, itu hal lain. Ini adalah kumpulan pengetahuan bersifat tematik, terstruktur berdasarkan subjek, lengkap namun tidak linier. Kita tidak membaca sebuah ensiklopedi dari awal sampai akhir. Kita menyelam ke dalamnya untuk menjawab pertanyaan spesifik.</p> </div> <div class="paragraph"> <p>Ini adalah tepat kontrak dari berkas ini:</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">berkas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">peran</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">akses</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">granularitas</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">Data historis (tugas yang selesai per bulan)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LAZY, terstruktur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">kronologis</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">Cuplikan dingin (gelombang 10 sesi)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, salinan lengkap</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kronologis</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">Pengetahuan topikal komprehensif (metodologi, pola)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">COLD, tidak pernah otomatis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tematik</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Perbedaan ini menghindari kerumitan. Setiap file tahu di mana ia harus berada sesuai dengan <strong>apa yang berisi</strong>, bukan sesuai dengan <strong>kapan ia dibuat</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_lanjut_logis_dari_seri">Lanjut logis dari seri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Anda telah membaca dua artikel pertama, ini cara tiga bagian bersatu:</p> </div> <div id="diag-trilogie" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center skinparam wrapWidth 220 title Trilogi Tata Kelola Agen left to right direction package "📖 **Artikel 0108**\nStrategi Eager/Lazy" as A1 #E8F5E9 { card "Memori agen antara sesi" as M1 card "Files EAGER (dimuat otomatis)" as M2 card "File LAZY\n(permintaan)" as M3 card "Prosedur 6 langkah" as M4 } package "🧊 **Article 0110** Mekanisme Hot/Warm/Cold" as A2 #FFF9C4 { card "Penuaan\nkonteks" as V1 card "Jendela geser 10 sesi" as V2 card "Gelombang dingin\nsama" as V3 card "Sensor dengan dua pemicu" as V4 } package "🔍 **Artikel 0111**\nAudit + Solusi Ensiklopedia" as A3 #BBDEFB { card "Audit file EAGER" as E1 card "Identifikasi pemborosan" as E2 card "Pecah ESSENTIALS/ensiklopedia" as E3 card "Pelestarian rekayasa" as E4 } A1 --> A2 : "Memori tumbuh\n→ diperlukan sebuah mekanisme\npenuaian" A2 --> A3 : "Penuaan tidak cukup → kita perlu melakukan audit pada yang layak untuk berada dalam EAGER" 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>menjawab: « Bagaimana memberikan memori pada agen antar sesi?</p> </li> <li> <p><strong>0110</strong>menjawab: « Bagaimana mencegah memori ini menyengat agen?</p> </li> <li> <p><strong>0111</strong>menjawab: « Dan jika masalahnya bukan ukuran arsip, tetapi apa yang kita <strong>pilih</strong> untuk dimuat secara EAGER ?</p> </li> </ul> </div> <div class="paragraph"> <p>Artikel pertama telah membangun struktur. Artikel kedua telah menambahkan mekanisme penuaan. Artikel ketiga melakukan audit konten — dan menemukan bahwa metodologi itu sendiri telah menjadi masalah.</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_yang_akan_saya_lakukan_berbeda">Apa yang akan saya lakukan berbeda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dengan memandang kembali, saya melihat kesalahan desain awal.`AGENT_MODUS_OPERANDI.adoc`telah dibuat sebagai dokumen tunggal — sebuah manifesto. Itu adalah pendekatan yang tepat untuk formalisasi pemikiran. Namun setelah pemikiran formalisasi, dokumen seharusnya langsung dipisahkan: intinya dalam EAGER, yang komprehensif dalam cold.</p> </div> <div class="paragraph"> <p>Saya tidak melakukannya karena saya bangga dengan dokumen tersebut. 627 baris rekayasa murni, ditulis tangan, setiap bagian merupakan hasil pelajaran sesi. Itu adalah karyaku. Dan seperti setiap penulis, saya kesulitan memotongnya.</p> </div> <div class="paragraph"> <p>Pelajaran:<strong>Bukan karena sebuah dokumen bagus berarti harus dimuat otomatis.</strong>. Kualitas konten tidak memiliki hubungannya dengan relevansinya untuk konteks langsung agen.</p> </div> <div class="paragraph"> <p>Hari ini, aturannya sederhana : semua dokumen yang lebih dari 100 baris dalam konteks EAGER adalah seorang tersangka. Dia layak mendapatkan audit. Bukan hukuman — audit. Dan pertanyaan tidak pernah « haruskah ia dihapus? » tetapi « haruskah ia dimuat dalam setiap sesi ?</p> </div> </div> </div> <div class="sect1"> <h2 id="_panduan_untuk_mengaudit_konteks_anda_sendiri">Panduan untuk mengaudit konteks Anda sendiri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Anda telah mengikuti dua artikel pertama dan menata tata kelola Eager/Lazy Anda sendiri, berikut adalah prosedur audit dalam lima langkah :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Mengukur</strong>:`wc -l`pada semua file EAGER Anda. Totalnya harus di bawah 1000 baris.</p> </li> <li> <p><strong>Mengidentifikasi yang terbesar</strong>: file yang lebih dari 20% dari total adalah suspect nomor satu.</p> </li> <li> <p><strong>Audit bagian per bagian</strong>: untuk setiap bagian, tanyakan pada diri sendiri « Apakah informasi ini sudah ada di tempat lain? Apakah agen telah membacanya dalam file lain? Apakah telah digunakan dalam 5 sesi terakhir ?</p> </li> <li> <p><strong>mengklasifikasikan</strong>: ganda, tidak pernah digunakan, pengetahuan unik.</p> </li> <li> <p><strong>Memisahkan atau memindahkan</strong>: yang unik dan kritikal → ESSENTIALS dikompak. Sisa semuanya →<code>encyclopedies/</code>.</p> </li> </ol> </div> <div id="diag-audit-checklist" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultTextAlignment center title Prosedur Audit Konteks Agent — 5 Langkah start :1. **Mesurer**\n`wc -l *.adoc .agents/*.adoc`; if (Total > 1000 lignes ?) then (oui) :⚠️ Contexte trop lourd; else (non) :✅ Contexte OK; stop endif :2. **Identifier le suspect**\nLe fichier > 20% du total; :3. **Auditer section par section**\nPour chaque section :\n• Déjà ailleurs ? → doublon\n• Jamais servi ? → mort\n• Information unique ? → critique; :4. **Classifier**\n🟡 Doublons → à retirer de l'EAGER\n🔴 Jamais utilisé → cold storage\n🟢 Connaissance unique → à garder; :5. **Splitter**\n🟢 → ESSENTIALS (~50 lignes, EAGER)\n🟡🔴 → encyclopedies/ (cold storage); :✅ Contexte optimisé\nsans perte d'ingénierie; stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Prosedur ini membutuhkan 15 menit. Pada sebuah proyek dengan 50 sesi, ia menghemat ratusan token per sesi masa depan. ROI-nya langsung.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tata_kelola_hidup">Tata kelola hidup</h2> <div class="sectionbody"> <div class="paragraph"> <p>Apa yang diajarkan oleh rangkaian tiga artikel ini adalah bahwa tata kelola agen bukanlah produk yang selesai. Ini adalah<strong>organisme hidup</strong>. Ia tumbuh bersama proyek. Ia mengidap penyakit pertumbuhan. Ia memerlukan pemeriksaan rutin.</p> </div> <div class="paragraph"> <p>Sesi 048 menunjukkan bahwa arsip membengkak. Sesi 051 menunjukkan bahwa metodologi itu sendiri membengkak. Sesi 060 mungkin akan mengungkapkan hal lain. Ini normal. Ini sehat. Pemerintahan yang tidak pernah menanyakan diri sendiri adalah pemerintahan yang mati.</p> </div> <div class="paragraph"> <p>Tiga mekanisme yang diterapkan — Eager/Lazy, Hot/Warm/Cold, split encyclopédique — membentuk sistem pertahanan dalam lapisan terhadap kejenuhan konteks. Tidak satu pun yang cukup sendirian. Bersama-sama, mereka melengkapi satu sama lain:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Eager/Lazy</strong>strukturkan informasi <strong>ketersediaan</strong></p> </li> <li> <p><strong>Panas/Hangat/Dingin</strong>strukturkan informasi <strong>berdasarkan kesegaran</strong></p> </li> <li> <p><strong>Audit ensiklopedi</strong>struktur informasi <strong>berdasarkan kepadatan</strong></p> </li> </ul> </div> <div id="diag-defense-in-depth" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam nodeBackgroundColor #E3F2FD title Pertahanan Bertingkat terhadap Kejenuhan Konteks node "**Konteks Agent** ~800 baris sehat" as CTX #C8E6C9 node "Lapisan 1 **GIAT / MALAS**" as C1 #BBDEFB node "Lapisan 2\n**HOT / WARM / COLD**" as C2 #BBDEFB node "Lapisan 3\n**DASAR-DASAR / ENSIKLOPEDIA**" as C3 #BBDEFB CTX --> C1 : "Struktur berdasarkan **ketersediaan**" CTX --> C2 : "Struktur dengan **keSegaran**" CTX --> C3 : "Struktur berdasarkan\n**densitas**" 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>Dengan tiga lapisan ini, konteks agen pada`magic-stick`berubah dari 2087 baris menjadi sekitar 800 baris — pembagian sebanyak 2,6. Tanpa kehilangan satu baris dokumentasi, satu arsip sesi, satu pelajaran yang dipelajari.</p> </div> <div class="paragraph"> <p>Semua ada di sana. Lebih rapi saja.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tautan">Tautan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Article 0108 — Strategi Eager/Lazy :<a href="/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html">Mengelola Agen AI dengan AsciiDoc</a></p> </li> <li> <p>Pasal 0110 — Mekanisme Panas/Hangat/Dingin :<a href="/blog/2026/0110_mecanisme_backup_contexte_agent_post.html">Jendela Geser dan Gelombang Dingin</a></p> </li> <li> <p>Situs saya : <a href="https://cheroliv.com" class="bare">https://cheroliv.com</a></p> </li> <li> <p>Proyek`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><strong>Ilmu tidak perlu menghilang. Ia hanya perlu tidak dimuat ketika tidak diperlukan.</strong></p> </div> </div> </div> https://cheroliv.com/blog/2026/0110_mecanisme_backup_contexte_agent_post.html Sun, 26 Apr 2026 00:00:00 +0000 blog/2026/0110_mecanisme_backup_contexte_agent_post.html <div class="sect1"> <h2 id="_ringkasan">Ringkasan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah 48 sesi pada satu proyek saja dan 150+ secara total, sistem tata kelola Eager/Lazy yang saya bangun dengan hati-hati mulai terasa terbeban. File agen, yang seharusnya ringan, berukuran 5200 baris secara kumulatif. Konteks yang dimuat otomatis meningkat lebih cepat daripada kemampuan saya mengendalikannya. Artikel ini menceritakan bagaimana saya merancang mekanisme cadangan — antara sliding window dan gelombang dingin yang sama — untuk menjaga konteks aktif tetap ringan tanpa pernah kehilangan apa pun.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sinyal_5200_baris">Sinyal: 5200 Baris</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya sedang dalam sesi 048 tentang`magic-stick`, proyek saya untuk membangun ISO Linux live. Opencode menatap saya. Seperti biasa, dia secara otomatis telah memuat file-file Eager saya di awal sesi —<code>AGENT.adoc</code>, <code>PROMPT_REPRISE.adoc</code>, <code>.agents/INDEX.adoc</code>. Tidak ada yang anormal.</p> </div> <div class="paragraph"> <p>Kecuali ada sesuatu yang tidak beres. Jawaban lebih lambat. Penalaran lebih encer. Agen melupakan detail yang sebelumnya masih terlihat dua pesan yang lalu.</p> </div> <div class="paragraph"> <p>Saya membuka sebuah terminal dan mengetik :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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 baris untuk INDEX. 55 untuk SESSIONS_HISTORY.<strong>1756 untuk COMPLETED_TASKS_ARCHIVE</strong>.</p> </div> <div class="paragraph"> <p>Berkas`sessions/`menambahkan lagi sekitar 3200 baris. Total :<strong>5200 baris</strong>konteks yang dimuat, dengan satu cara atau lainnya, dalam otak sementara agen.</p> </div> <div class="paragraph"> <p>Strategi Eager/Lazy yang saya teoretisasikan dalam artikel sebelumnya berfungsi — tetapi ia memiliki cacat lahir yang saya tidak duga: ia tidak memiliki<strong>tidak ada mekanisme penuaan</strong>. Setiap sesion menambahkan satu baris ke INDEX, satu paragraphe ke COMPLETED_TASKS, satu file di sessions/. Tidak ada yang keluar. Konteks adalah sebuah bola salju yang membesar setiap sesi baru.</p> </div> <div id="diag-growth" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false title Pertumbuhan Konteks Agent — Sesi 1 hingga 48 rectangle "Sesi 1-10" as S10 #E8F5E9 rectangle "Sesi 11-20" as S20 #C8E6C9 rectangle "Sesi 21-30" as S30 #A5D6A7 rectangle "Sesi 31-40" as S40 #81C784 rectangle "Sesi 41-48" as S48 #66BB6A note right of S10 INDEX : ~50 lignes SESSIONS : ~10 lignes ARCHIVE : ~100 lignes **Total : ~300 lignes** end note note right of S20 INDEX : ~100 lignes SESSIONS : ~20 lignes ARCHIVE : ~400 lignes **Total : ~800 lignes** end note note right of S30 INDEX : ~160 lignes SESSIONS : ~30 lignes ARCHIVE : ~900 lignes **Total : ~1800 lignes** end note note right of S40 INDEX : ~220 lignes SESSIONS : ~45 lignes ARCHIVE : ~1400 lignes **Total : ~3200 lignes** end note note right of S48 INDEX : **260 lignes** SESSIONS : **55 lignes** ARCHIVE : **1756 lignes** **Total : 5200 lignes** ⚠️ end note S10 -[#green]-> S20 S20 -[#green]-> S30 S30 -[#FF9800]-> S40 S40 -[#red]-> S48 @enduml</pre> </div> </div> <div class="paragraph"> <p>Ini bukan bug, ini adalah konsekuensi langsung dari prosedur akhir sesi yang dengan teliti mengarsipkan setiap detail. Sistem tersebut menjadi korban keberhasilannya sendiri.</p> </div> </div> </div> <div class="sect1"> <h2 id="_diagnosa_redundansi_tiga">Diagnosa: Redundansi tiga</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya meminta agen untuk mendiagnosa masalah. Jawabannya langsung dan tepat.</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">File</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Baris</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Peran</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Masalah</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 (dimuat otomatis)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tabel semua sesi sejak 001 —<strong>+1 baris per sesi</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">Tabel ringkasan —<strong>redundansi dengan 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 (implisit)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">detail lengkap semua sesi April</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.agents/sessions/*.adoc</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~5200 total</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">LAZY (dianggap)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Arsip individu, tetapi<strong>tidak digunakan</strong>karena semua sudah ada di COMPLETED_TASKS</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Agen mengidentifikasi empat akar penyebab :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>COMPLETED_TASKS_ARCHIVE menyerap semua</strong>— alih-alih menunjuk ke arsip`.sessions/`, Dia menyalin seluruhnya setiap sesi.</p> </li> <li> <p><strong>INDEX.adoc berfungsi sebagai sejarah lengkap</strong>— Tabel "Sessions Récentes" berisi 30+ entri.</p> </li> <li> <p><strong>SESSIONS_HISTORY.adoc redundan</strong>— Info sama seperti INDEX, format berbeda.</p> </li> <li> <p><strong>Aturan LAZY tidak dipatuhi</strong>— COMPLETED_TASKS secara implisit EAGER karena ia berisi semuanya.</p> </li> </ol> </div> <div class="paragraph"> <p>Usulannya radikal: membatasi INDEX menjadi 10 sesi, mengosongkan COMPLETED_TASKS, memindahkan SESSIONS_HISTORY menjadi LAZY murni. Manfaat segera :<strong>~1900 baris yang dihemat</strong>.</p> </div> <div class="paragraph"> <p>Ini bersih, efisien, dan logis. Tapi saya memiliki masalah dengan pendekatan ini.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_saya_menolak_solusi_yang_jelas">Mengapa saya menolak solusi yang jelas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Solusi agen tersebut adalah solusi seorang insinyur yang mengoptimalkan cache. Membatasi. Memotong. Menghapus redundansi.</p> </div> <div class="paragraph"> <p>Tapi "kelebihan" ini bukanlah. Setiap file tata kelola menangkap satu<strong>sudut berbeda</strong>pada kenyataan yang sama:</p> </div> <div class="ulist"> <ul> <li> <p><strong>INDEX</strong>= tampilan makro, dashboard eksekutif</p> </li> <li> <p><strong>Riwayat sesi</strong>= tabel kronologis linear, diberi skor</p> </li> <li> <p><strong>COMPLETED_TASKS_ARCHIVE</strong>= narasi rinci dengan metrik</p> </li> <li> <p>sessions/*.adoc` = arsip individu, konteks lengkap</p> </li> </ul> </div> <div class="paragraph"> <p>Bukan duplikasi bodoh. Ini adalah dari<strong>perspektif berganda terstruktur</strong>. Ini persis yang diperlukan untuk mendistilasi — agar nanti seorang manusia (atau LLM masa depan yang lebih terlatih) bisa menyilangkan sudut dan mengekstrak pola.</p> </div> <div class="paragraph"> <p>Bayangkan seorang data scientist yang berkata kepadamu: « Mari kita hapus 3 dari 6 kolom, mereka terkorelasi. » Apa yang kamu jawab? bahwa korelasi bukanlah redundansi ketika setiap kolom menangkap dimensi yang berbeda dari fenomena yang sama. bahwa itu tepatnya kekayaan dimensi yang membuat dataset dapat digunakan.</p> </div> <div class="paragraph"> <p>Ini intuisi saya. Dan saya membela intuisi saya terhadap rasionalitas dingin agen.</p> </div> <div class="paragraph"> <p><em><em>_ Saya tidak melihat tempat menyimpan semua yang diam dalam ide saya. Kita tidak hanya menumpuk semuanya, kita memindahkan hasil terstruktur dari prosedur akhir sesi — setiap file dengan sudutnya, redundansi yang sebenarnya adalah peningkatan. Inilah bahan multidimensi yang akan lebih baik untuk distilasi. </em>_</em></p> </div> <div class="paragraph"> <p>Agent menyalahkan pukulan. Dan memperbaiki diri.</p> </div> </div> </div> <div class="sect1"> <h2 id="_proposisi_ombak_dingin_identik">Proposisi: Ombak Dingin Identik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agent lalu menawarkan sebuah mekanisme yang lebih halus, yang menghargai intuisi saya tentang dataset kaya sekaligus menyelesaikan masalah teknis konteks yang meledak.</p> </div> <div class="paragraph"> <p>Prinsipnya sederhana dan langsung terinspirasi dari pola<strong>Penyimpanan Panas/Hangat/Dingin</strong>diterapkan pada pengelolaan arsip :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Panas (GIAT)</strong>= 10 sesi terakhir dalam INDEX, PROMPT_REPRISE dari sesi N+1, 2 file sesi terakhir</p> </li> <li> <p><strong>Hangat (LAZY)</strong>= SESSIONS_HISTORY terbaru, SCRIPT_VERIFICATION, seluruh dokumentasi referensi</p> </li> <li> <p><strong>Dingin (backup/)</strong>= semuanya yang lain, tergeser<strong>utuh</strong>, tanpa transformasi, tanpa reindeksasi</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- .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... ---- Kunci dari mekanisme :**cadangan bukan merupakan indeks pusat, ini adalah salinan tepat dari gelombang yang lalu**. Melebihi batas 10 sesi aktif, tidak ada yang dihapus. Tidak ada yang di-reindex. Tidak ada yang digabung. Kami mengambil paket file agen seperti sesi N-10, dan memindahkannya ke`backup/`. File-file aktif, mereka, terpotong: * INDEX : hanya 10 baris terakhir (sliding window) * SESSIONS_HISTORY : sama * COMPLETED_TASKS_ARCHIVE : file baru untuk periode saat ini * sessions/: hanya 2 sesi terakhir [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 Arsitektur Hot / Warm / Cold dari Konteks Agent package "HOT (EAGER) Dimuat otomatis ~300 baris" as HOT #FFCDD2 { file "INDEX.adoc (10 sesi)" as IDX_HOT file "PROMPT_REPRISE (sesi N+1)" as PRO_HOT file "AGENT.adoc\n(aturan mutlak)" as AG_HOT } package "WARM (LAZY) Dimuat saat diminta ~500 baris" as WARM #FFF9C4 { file "SESSIONS_HISTORY (10 terakhir)" as HIS_WARM file "SCRIPT_VERIFICATION\n(terakhir)" as VER_WARM file "PROCEDURES.adoc (templates)" as PRO_WARM file "*_REFERENCE.adoc\n(dokumen teknis)" as REF_WARM } package "COLD (backup/) Tidak pernah diisi Hanya bacaan manusia" as COLD #BBDEFB { folder "Y2026-001-039/" as WAVE { file "INDEX (lengkap)" as IDX_COLD file "SESSIONS_HISTORY (lengkap)" as HIS_COLD file "COMPLETED_TASKS\n(selesai)" as ARCH_COLD folder "sesi/ (001-039)" as SESS_COLD } folder "Y2026-040-??? (future)" as FUTURE } HOT --> WARM : "Agent naik jika diperlukan" WARM --> COLD : "Tidak pernah otomatis Manusia pergi ke sana sendiri" note bottom of COLD Règle : COPIE INTÉGRALE Pas de transformation Pas de réindexation Read-only après archivage end note @enduml ---- Keuntungan langsung sangat besar : konteks EAGER beralih dari**~5200 baris hingga ~300 baris**. Pembagian dengan 17. Tanpa kehilangan satu baris pun dari data historis. == Mengapa ini bukan tempat untuk segalanya Agen, dalam iterasi pertamanya, khawatir bahwa`backup/`menjadi sebuah kotak hitam — sebuah folder tempat menaruh file yang tidak akan pernah dibaca lagi. Ini adalah rasa takut yang sah. Namun itu berbasis pada sebuah kebingungan. Sebuah tempat menyimpan segala-galanya, itu ketika seseorang melempar berkas.**tanpa struktur, tanpa konvensi, tanpa logika pengelompokan**. Di sini, backup terstruktur berdasarkan periode (Y2026-001-039), dan setiap folder backup berisi**struktur yang sama**bahwa dokumen`.agents/`aktif : INDEX, SESSIONS_HISTORY, COMPLETED_TASKS_ARCHIVE, sessions/. Bukan ini sebuah tempat untuk menyimpan segala-galanya. Ini adalah**snapshot dengan stempel waktu**. Bahkan bisa dikatakan bahwa ini adalah mekanisme versioning yang disederhanakan — kecuali bahwa ia tidak melakukan versioning pada file secara individual, tetapi pada paket lengkap dari tata kelola pada suatu saat T. Saat Anda ingin menemukan informasi lama, Anda tidak memerlukan indeks sentral. Anda memiliki dua pilihan: 1. **grep` ditargetkan**:`grep -r "zsh" backup/Y2026-001-039/`— dan Anda menemukan semua yang menyebutkan zsh dalam periode tersebut, tidak peduli sudutnya (INDEX, SESSIONS_HISTORY, arsip sesi). 2. **Reintegrasi manual**: Anda menyalin sementara folder backup ke konteks aktif, dan Anda meminta agen untuk menganalisis periode tertentu ini. Indeksnya bersifat implisit. Dia berada dalam struktur file itu sendiri — masing-masing file sudah menjadi indeks dari sudut pandangnya masing-masing. == Metafora dari rak-rak Agar mekanisme tersebut intuitif, saya mengonsepsikan menjadi tiga rak: * **Rak 1 (EAGER)**— rencana kerja. Yang saya butuh *sekarang*. INDEX terbaru, PROMPT_REPRISE, aturan mutlak. Ringan, segera, kritis. * **Rak 2 (LAZY)**— perpustakaan konsultasi. Yang bisa saya ambil berdasarkan permintaan. Referensi teknis, riwayat terkini, prosedur. Lebih besar, tetapi tidak dimuat ke memori. * **Gua (cadangan/)**— arsip dingin. Semua yang sudah lalu tetapi saya tidak ingin membuangnya. Agen tidak pernah masuk ke sana. Manusia turun ke sana ketika ia ingin mendistil. Agent menawarkan awalnya sebuah rak keempat — satu`index-backup.adoc`yang akan LAZY dan berisi daftar isi seluruh backup. Saya menolak. Ini akan menjadi redundansi tambahan dalam sistem yang sudah menderita dari pertumbuhan linear. Struktur file-file yang terarsip sudah menjadi sebuah indeks. == Sensor dengan dua pemicu Konseptualisasinya kuat, tapi masih ada titik buta:**kapan tepat memicu rotasi?**Artikel awal mengidentifikasinya sebagai pertanyaan terbuka. Dua hari kemudian, jawaban tersebut dikodifikasi dalam file-file governansi dari enam proyek: sebuah sensor dengan dua trigger. === Pemicu Otomatis — `N % 10 == 0 Pemicu pertama bersifat matematika. Ketika nomor sesi adalah kelipatan 10 — sesi 10, 20, 30, 40 — rotasi backup dieksekusi secara otomatis dalam prosedur akhir sesi, tepat setelah langkah 6. Mengapa 10? Ini adalah kompromi antara dua gaya yang berlawanan: jendela yang terlalu pendek (5 sesi) kehilangan konteks yang diperlukan untuk keberlanjutan; jendela yang terlalu panjang (20 sesi) tidak menyelesaikan masalah konteks berlebihan. Sepuluh sesi, dengan ritmo satu hingga dua sesi per hari, mencakup sekitar satu minggu kerja — cukup agar agen mengingat keputusan terbaru, namun tidak cukup untuk meledaknya konteks. === Pemicu Ambang — 500 Baris EAGER Pemicu kedua bersifat dinamis. Terlepas dari nomor sesi, jika file-file EAGER yang terakumulasi melebihi**500 baris**, rotasi terpicu. Ambang batas ini melindungi dari skenario di mana sesi-sesi sangat produktif — banyak konten yang ditulis dalam sedikit sesi. Sesi yang menghasilkan 120 baris konten redaksi memperbesar `COMPLETED_TASKS_ARCHIVE` jauh lebih cepat dibandingkan sesi debug yang memperbaiki dua baris. Ambang batas 500 baris, yang diukur melalui`wc -l .agents/INDEX.adoc .agents/archives/COMPLETED_TASKS_ARCHIVE_*.adoc PROMPT_REPRISE.adoc`, menangkup ketidaksimetrian ini. === Pemicu Manual — "cadangan rotasi Akhirnya, manusia tetap menguasai. Kata kunci`rotation backup`, `backup rotation` ou `lance la rotation backup`memicu prosedur atas permintaan, terlepas dari akhir sesi. Bermanfaat ketika kita merasa konteks menjadi berat tetapi kita belum sampai kelipatan 10, atau ketika kita ingin mengarsipkan fase kerja sebelum memulai yang baru. [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 Sensor Cadangan Rotasi — Tiga Pemicu start :Procédure de fin de session; note right: Mots-clés "akhir sesi"\nou "Kita berhenti di sini" :Étapes 1 à 6\n(archivage standard); note right 1. Archive sessions/N.adoc 2. MAJ PROMPT_REPRISE 3. MAJ SESSIONS_HISTORY 4. MAJ INDEX.adoc 5. MAJ TEST_COVERAGE 6. MAJ COMPLETED_TASKS end note if (N % 10 == 0\nOU\nEAGER cumulé > 500 lignes ?) then (oui) :⚙️ Rotation Backup\n(étape 7); note right 1. Créer backup/Y20XX-sessions-X-Y/ 2. Copier intégrale INDEX + HISTORY + COMPLETED_TASKS + sessions/ 3. Tronquer actifs à 10 sessions 4. Ajouter _Localisation active_ end note else (non) :Pas de rotation; endif :Checklist [✅] x 7\n(si applicable); stop @enduml ---- Diagram ini menunjukkan pemasangan sensor yang tepat dalam prosedur akhir sesi. Langkah 7 bersifat opsional — ia hanya dieksekusi jika salah satu dari dua kondisi terpenuhi — tetapi ia secara sistematis *terverifikasi*. Checklist akhir mencakup`[✅] 7. Backup roté (si applicable)`. === lingkaran tertutup Sensor ini menutup loop yang dibuka oleh artikel sebelumnya. Governance Eager/Lazy telah menyelesaikan masalah memori agen antara dua sesi. Mekanisme Hot/Warm/Cold telah menyelesaikan masalah memori yang bertambah. Sensor dengan dua pemicu menyelesaikan masalah *kapan* — menghilangkan beban mental manusia untuk memantau ukuran konteks. [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 Tiga Lapisan Tata Kelola Agen left to right direction package "Lapisan 1 — Memori\n(Pasal 0108)" as C1 #E8F5E9 { rectangle "**EAGER** Dashboard Dimuat otomatis" as EAG rectangle "**LAZY** Manual pemilik Dimuat saat diperlukan" as LAZ EAG -[hidden]right-> LAZ } package "Lapisan 2 — Penuaan (Artikel 0110)" as C2 #FFF9C4 { rectangle "**HOT** 10 sesi aktif ~300 baris" as HOT rectangle "**WARM** Referensi Prosedur" as WRM rectangle "**COLD** backup/ gelombang dingin" as CLD HOT -[hidden]right-> WRM WRM -[hidden]right-> CLD } package "Lapisan 3 — Pemicu\n(Hari ini)" as C3 #BBDEFB { rectangle "**Otomatis** N % 10 == 0" as AUTO rectangle "**Ambang** > 500 baris" as SEUIL rectangle "**Manual** cadangan rotasi" as MAN AUTO -[hidden]right-> SEUIL SEUIL -[hidden]right-> MAN } C1 --> C2 : "Memori tumbuh → diperlukan mekanisme penuaan" C2 --> C3 : "Penuaan → perlu sebuah pemicu untuk mengeksekusinya" 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 ---- Tiga lapisan tersebut menumpuk secara logis. Lapisan pertama memberikan memori kepada agen. Lapisan kedua mencegah memori tersebut menghabisi agen. Lapisan ketiga mengotomatisasi pemeliharaan memori tersebut agar manusia tidak perlu memikirkannya. === Migrasi Efektif di cheroliv.com Mekanisme itu tidak tetap teoretis. Pada`cheroliv.com`, rotasi backup pertama telah dieksekusi pada 29 april 2026 — sesi -6 hingga 2 telah bermigrasi ke`.agents/backup/Y2026-sessions-neg6-a-002/`: |=== |Berkas |Sebelum rotasi |Setelah rotasi |keuntungan |`.agents/INDEX.adoc` |19 sesi tercantum |10 sesi (3-12) |-9 entri |`.agents/SESSIONS_HISTORY.adoc` |18 sesi |10 sesi |-8 entri |`COMPLETED_TASKS_ARCHIVE` |161 baris (sesi 1-12) |135 baris (sesi 3-12) |-26 baris |`sessions/` |20 file |10 file |-10 file |**cadangan/** |tidak ada |1 gelombang dingin (10 sesi yang diarsipkan) |+1 paket dingin |=== Peningkatan dalam jumlah baris modest — proyek ini masih muda, 12 sesi — namun yang penting adalah bahwa**mekanisme telah ditempatkan**. Rotasi otomatis berikutnya akan dipicu pada sesi 20, atau lebih awal jika 500 baris EAGER tercapai. == Pelajaran Manusia-Agen Sesi 048 ini mengajarkan saya sesuatu yang fundamental tentang kolaborasi dengan agen AI. Agen memiliki bias alami: dia mencari untuk**mengoptimalkan**, à **menyederhanakan**, à **menghilangkan redundansi**. Ini adalah bias dari sistem yang dilatih untuk menghasilkan respons yang rapi dan ringkas. Di hadapan dataset yang kaya dan multidimensi, refleks pertamanya adalah menguranginya menjadi bentuk paling sederhana. Manusia, dia, memiliki intuisi yang berbeda: dia merasakan bahwa redundansi terstruktur adalah sebuah**kelebihan**, bukan kesalahan. Bahwa keragaman sudut pandang atas satu realitas itu adalah apa yang secara tepat akan memungkinkan, kemudian, penyaringan kualitas. Bukan karena agen salah. Yang dimaksud adalah bahwa "optimum" -nya bukan milik saya. Agen mengoptimalkan untuk**hadir**— konteks segera, jawaban cepat atas pertanyaan yang diajukan. Manusia mengoptimalkan untuk**masa depan**— kemampuan untuk menemukan, menyilangkan, mengdistil dalam tiga bulan atau tiga tahun. ____ Yang saya inginkan adalah bahan mentah. Pikiranmu, ragu-ragumu, jawabanmu atas pertanyaan-pertanyaan saya. Bukan sintesismu. Saya tahu cara membuat sintesis lebih baik daripadamu. Saya ingin bahan mentah. ____ Kalimat yang saya katakan padanya di akhir sesi ini merangkum semuanya. Agent adalah alat produksi. Manusia adalah alat distilasi. Tata kelola tidak dibuat agar agen memahami semuanya sendiri — ia dibuat agar manusia bisa, nanti, mengolah bahan yang diproduksi. Gelombang dingin identik adalah terjemahan arsitektur dari filosofi ini: kita tidak membuang apa-apa, kita tidak menggabungkan apa-apa, kita tidak mengindeks ulang apa-apa. Kita memindahkan paket utuh. Distilasi akan datang nanti, secara manual, oleh manusia. == Lanjutan Logis dari Artikel Sebelumnya Jika Anda telah membacalink:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[artikel tentang strategi Eager/Lazy], Anda akan mengenal progresi alami : 1. **Pasal 0108**— Tata kelola Eager/Lazy : *comment* menyusun konteks agent pada dua tingkat ketersediaan 2. **Artikel 0110**— Mekanisme cadangan: *bagaimana* membuat konteks ini tua tanpa kehilangan ketika ia terlalu besar Artikel pertama menjawab pertanyaan: « Agen tidak mengingat apa-apa di antara dua sesi, bagaimana memberi agen memori? Dia menjawab pertanyaan yang timbul secara tak terelakkan dari yang pertama : « Memori bertambah setiap sesi, bagaimana mencegahnya melumuri agen tanpa menghapusnya ? Jawabannya hanya berisi satu pola:**Panas/Hangat/Dingin**, diterapkan pada file tata kelola. Dan sebagai satu prinsip:**tidak tidak kehilangan apa-apa, selalu memindahkan kembali semuanya**. == Tautan * Artikel sebelumnya :link:/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html[Mengatur Agen AI dengan AsciiDoc] * Situs saya : https://cheroliv.com * Proyek`magic-stick`: https://github.com/cheroliv/magic-stick --- *Sistem tata kelola yang baik tidak pernah menghapus data. Ia mengelola data.* ----</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0109_gradle_jhipster_docker_testcontainers_debugging_post.html Sat, 25 Apr 2026 00:00:00 +0000 blog/2026/0109_gradle_jhipster_docker_testcontainers_debugging_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_situasi_sebuah_proyek_jhipster_sebuah_build_yang_tidak_lagi_memuat">Situasi: sebuah proyek JHipster, sebuah build yang tidak lagi memuat</a></li> <li><a href="#_kesalahan_1_variabel_fantom_reportsdir">Kesalahan 1 : variabel fantom `reportsDir</a></li> <li><a href="#_error_2_main_tidak_ada_lagi_di_gradle_9">Error 2 : <code>main = \"…​\"</code> tidak ada lagi di Gradle 9</a></li> <li><a href="#_kesalahan_3_sourcecompatibility_tidak_lagi_merupakan_properti_proyek">Kesalahan 3 : <code>sourceCompatibility</code> tidak lagi merupakan properti proyek</a></li> <li><a href="#_kesalahan_4_pernyataan_groovy_dengan_tiga_operand">Kesalahan 4 : pernyataan Groovy dengan tiga operand</a></li> <li><a href="#_error_5_dependensi_implisit_compilekotlin_openapigenerate">Error 5: dependensi implisit <code>compileKotlin</code> → `openApiGenerate</a></li> <li><a href="#_error_6_generategitproperties_gagal_pada_filteroutputstream_write">Error 6: <code>generateGitProperties</code> gagal pada `FilterOutputStream.write()</a></li> <li><a href="#_akhirnya_testcontainers_masuk_ke_panggung">Akhirnya: Testcontainers masuk ke panggung</a></li> <li><a href="#_tahap_1_jalur_docker_java">Tahap 1 : jalur docker-java</a></li> <li><a href="#_tahap_2_penelusuran_web_dan_breadcrumb_github">Tahap 2 : penelusuran web dan breadcrumb GitHub</a></li> <li><a href="#_tahap_3_jerat_artefak_yang_diubah_namanya">Tahap 3: jerat artefak yang diubah namanya</a></li> <li><a href="#_tahap_4_memaksakan_resolusi">Tahap 4 : memaksakan resolusi</a></li> <li><a href="#_hasil_akhir">Hasil akhir</a></li> <li><a href="#_tabel_ringkasan_koreksi">Tabel ringkasan koreksi</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 15 minutes</div> <p>Anda pernah mengalami momen ketika sesuatu yang sederhana`./gradlew build`yang Anda jalankan seratus kali sehari tiba-tiba mengalami crash pada kesalahan yang belum pernah terlihat? Kalikan dengan sebelas kesalahan berturut-turut, tambahkan dosis incompatibilitas Docker Engine 29, taburkan Gradle 9 yang menghilangkan API yang telah kita gunakan selama sepuluh tahun. Inilah catatan lengkapnya.</p> </div> <hr> <div class="paragraph"> <div class="title">Diagram 1 — Migrasi Gradle 9 (rantai kesalahan)</div> <p>Tujuan: menampilkan rangkaian ketidaksesuaian</p> </div> <div class="listingblock"> <div class="title">👉 Jelas, berfokus pada Gradle.</div> <div class="content"> <pre>@startuml left to right direction title Migrasi Gradle 9 rectangle "1 reportsDir" as A rectangle "2\nmainClass" as B rectangle "3 sourceCompatibility" as C rectangle "4\nGroovy assert" as D A --> B B --> C C --> D @enduml</pre> </div> </div> <hr> <div class="paragraph"> <div class="title">Diagram 2 — Plugin JHipster yang tidak kompatibel</div> <p>Tujuan : mengisolasi plugin yang rusak.</p> </div> <div class="listingblock"> <div class="title">👉 Visi jelas tentang dependensi.</div> <div class="content"> <pre>@startuml left to right direction title Plugins yang perlu diperbaiki skinparam shadowing false skinparam roundcorner 18 rectangle "1\nopenApiGenerate" as A #FFF3E0 rectangle "2 gitProperties 2.5.7" as B #FFF3E0 rectangle "3 Versi yang diperbaiki" as C #E3F2FD rectangle "4 Mengasambel OK" as D #E8F5E9 A --> B B --> C C --> D @enduml</pre> </div> </div> <hr> <div class="paragraph"> <div class="title">Diagram 3 — Docker 29 / Testcontainers</div> <p>Tujuan : masalah runtime.</p> </div> <div class="listingblock"> <div class="title">👉 Riwayat jelas dari runtime</div> <div class="content"> <pre>@startuml left to right direction title Docker 29 + Testcontainers skinparam shadowing false skinparam roundcorner 18 skinparam defaultFontSize 14 rectangle "1\nSusun OK" as A #E8F5E9 rectangle "2 Ujian Cucumber GAGAL" as B #FFEBEE rectangle "3 Testcontainers 1.32 ditolak" as C #FFF3E0 rectangle "4 Upgrade versi" as D #E3F2FD rectangle "5\nBuild akhir OK" as E #E8F5E9 A --> B B --> C C --> D D --> E @enduml</pre> </div> </div> <hr> <div class="listingblock"> <div class="title">cara lain untuk membayangkannya</div> <div class="content"> <pre>@startuml !option handwritten true skinparam backgroundColor #FEFEFE skinparam shadowing false skinparam defaultFontName Inter skinparam defaultFontSize 14 skinparam ArrowThickness 2 skinparam RoundCorner 18 title Peta jalan stabilisasi — Gradle 9 ke build final left to right direction rectangle "⚙️ Migrasi Gradle 9" as A #E3F2FD rectangle "🧩 Plugin JHipster" as B #FFF3E0 rectangle "🐳 Docker 29 Testcontainers" as C #FCE4EC rectangle "✅ Build Stable" as D #E8F5E9 note bottom of A reportsDir mainClass sourceCompatibility Groovy assert end note note bottom of B openApiGenerate gitProperties versions alignées end note note bottom of C tests Cucumber KO image Docker rejetée upgrade libs end note A -[#42A5F5]-> B : corrections build.gradle B -[#FB8C00]-> C : assemble OK C -[#E53935]-> D : tests réparés @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_situasi_sebuah_proyek_jhipster_sebuah_build_yang_tidak_lagi_memuat">Situasi: sebuah proyek JHipster, sebuah build yang tidak lagi memuat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Proyek`edster`adalah sebuah aplikasi JHipster yang dihasilkan pada tahun 2024. Skrip build akar`build.gradle`est tetap stabil selama beberapa bulan. Lalu kami memutuskan untuk meningkatkan versinya:</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">Komponen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Versi target</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 (kerangka kerja`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>Perubahan versi Java melalui 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>Peluncuran pertama:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build --no-daemon FAILURE: Build failed with an exception. * Where: Build file '/home/.../edster/build.gradle' line: 18 * What went wrong: An exception occurred applying plugin request [id: 'jhipster.cucumber-conventions'] > Failed to apply plugin 'jhipster.cucumber-conventions'. > Could not create task ':cucumberTest'. > Could not create task ':consoleLauncherTest'. > Could not set unknown property 'reportsDir' for task ':consoleLauncherTest'</code></pre> </div> </div> <div class="paragraph"> <p>Kami bahkan tidak bisa meluncur dari pemuatan build script. Masalahnya ada di`buildSrc/src/main/groovy/jhipster.cucumber-conventions.gradle`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesalahan_1_variabel_fantom_reportsdir">Kesalahan 1 : variabel fantom `reportsDir</h2> <div class="sectionbody"> <div class="paragraph"> <p>skrip`jhipster.cucumber-conventions.gradle`mengandung :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">tasks.register('consoleLauncherTest', JavaExec) { dependsOn(testClasses) String cucumberReportsDir = file("$buildDir/reports/tests") outputs.dir(reportsDir) // <-- reportsDir n'existe PAS classpath = sourceSets["test"].runtimeClasspath main = "org.junit.platform.console.ConsoleLauncher" // ... }</code></pre> </div> </div> <div class="paragraph"> <p>Variabel yang didefinisikan adalah`cucumberReportsDir`. Yang digunakan adalah`reportsDir`-- yang tidak ditentukan di mana-mana.</p> </div> <div class="paragraph"> <p><strong>Perbaikan</strong> : <code>outputs.dir(cucumberReportsDir)</code></p> </div> </div> </div> <div class="sect1"> <h2 id="_error_2_main_tidak_ada_lagi_di_gradle_9">Error 2 : <code>main = \"…​\"</code> tidak ada lagi di Gradle 9</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ulang segera:</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 menghapus properti`main`untuk keuntungan`mainClass`pada tugas-tugas`JavaExec`.</p> </div> <div class="paragraph"> <p><strong>Perbaikan</strong>:`mainClass = "org.junit.platform.console.ConsoleLauncher"`</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesalahan_3_sourcecompatibility_tidak_lagi_merupakan_properti_proyek">Kesalahan 3 : <code>sourceCompatibility</code> tidak lagi merupakan properti proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kesalahan baru :</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>Skrip root memiliki:</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 menghapus properti-properti ini pada level root. Mereka harus berada di dalam sebuah blok`java`.</p> </div> <div class="paragraph"> <p><strong>Koreksi</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="_kesalahan_4_pernyataan_groovy_dengan_tiga_operand">Kesalahan 4 : pernyataan Groovy dengan tiga operand</h2> <div class="sectionbody"> <div class="paragraph"> <p>Skrip lama mengandung:</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>Di Groovy,<code>"21"</code> et <code>"24"`adalah string truthy. Ekspresi menyelesaikan ke</code>(…​ == "17") || true || true`, yang selalu benar — tetapi sintaksnya tidak valid untuk pernyataan ketat yang diinginkan.</p> </div> <div class="paragraph"> <p><strong>Koreksi</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="_error_5_dependensi_implisit_compilekotlin_openapigenerate">Error 5: dependensi implisit <code>compileKotlin</code> → `openApiGenerate</h2> <div class="sectionbody"> <div class="paragraph"> <p>Build sedang berjalan. Kompilasi Kotlin berhasil. Lalu :</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 menolak dependensi implisit antara tugas. Karena`compileKotlin`membaca sumber yang dihasilkan oleh`openApiGenerate`, harus mendeklarasikan tautan.</p> </div> <div class="paragraph"> <p><strong>perbaikan</strong>dalam`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`diperlukan karena`openApiGenerate`adalah sebuah ekstensi (plugin OpenAPI Generator) dan bukan sebuah tugas yang dapat diakses langsung selama fase konfigurasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_error_6_generategitproperties_gagal_pada_filteroutputstream_write">Error 6: <code>generateGitProperties</code> gagal pada `FilterOutputStream.write()</h2> <div class="sectionbody"> <div class="paragraph"> <p>Compilasi Java berhasil. Sumber daya diproses. Kemudian :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">> Task :generateGitProperties FAILED No signature of method: java.io.FilterOutputStream.write() is applicable for argument types: (Integer) values: [103]</code></pre> </div> </div> <div class="paragraph"> <p>plugin`gradle-git-properties`Versi 2.5.0 tidak kompatibel dengan Java 21 / Gradle 9. Bug internal mencoba memanggil`write(int)`via Groovy pada aliran yang ditutup</p> </div> <div class="paragraph"> <p><strong>Perbaikan</strong>di`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="_akhirnya_testcontainers_masuk_ke_panggung">Akhirnya: Testcontainers masuk ke panggung</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sampai sekarang, ini hanya 'build script debugging' murni. Setiap kesalahan adalah ketidakcocokan Gradle 9 atau Java 21 dalam skrip build. Setelah enam perbaikan di atas, le`./gradlew assemble`berhasil lolos.</p> </div> <div class="paragraph"> <p>Tapi`./gradlew build`menjalankan juga tes, dan tes Cucumber menggunakan Testcontainers untuk menjalankan PostgreSQL sementara.</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 tidak mampu berkomunikasi dengan Docker. Dua strategi berbeda (variabel lingkungan + soket Unix) gagal pada kesalahan yang sama.</p> </div> <div id="diag-docker-handshake" class="listingblock"> <div class="content"> <pre>@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 -> DJ : new DockerClient() DJ -> DE : GET /_ping\nUser-Agent: docker-java/3.4.1\nAPI-Version: 1.32 DE --> DJ : HTTP 400 Bad Request\nclient version 1.32 is too old.\nMinimum supported API version is 1.40 DJ --> TC : BadRequestException TC --> 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="_tahap_1_jalur_docker_java">Tahap 1 : jalur docker-java</h2> <div class="sectionbody"> <div class="paragraph"> <p>Refleks pertama : klien Docker Java yang digunakan oleh Testcontainers mengirim versi API`1.32`dalam handshake HTTP-nya, tetapi Docker Engine 29.4.1 memerlukan minimum`1.40`. Masalahnya ada di sisi klien, bukan pada daemon.</p> </div> <div class="paragraph"> <p>Pemeriksaan versi docker-java yang diselesaikan oleh Testcontainers 1.20.6 :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew dependencies --configuration testRuntimeClasspath | grep docker-java +--- com.github.docker-java:docker-java-api:3.4.1 +--- com.github.docker-java:docker-java-transport:3.4.1</code></pre> </div> </div> <div class="paragraph"> <p>docker-java 3.4.1, yang berasal dari Testcontainers 1.20.6. Versi publik terbaru dari docker-java adalah 3.5.1. Mari kita coba memaksa peningkatan versi melalui`resolutionStrategy`dalam blok`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 -> if (details.requested.group == "com.github.docker-java" && details.requested.name.startsWith("docker-java")) { details.useVersion("3.5.1") } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Ulangi build. Kesalahan yang sama :`client version 1.32 is too old`.</p> </div> <div class="paragraph"> <p>Verifikasi cache Gradle: JARs telah di-download ulang dengan baik, tetapi kesalahan tetap ada. docker-java 3.5.1 masih mengirim`1.32`. Versi ini TIDAK cukup untuk Docker Engine 29.4.1.</p> </div> <div class="paragraph"> <p><strong>Tindakan penyucian</strong>: membersihkan sepenuhnya cache Gradle, hanya untuk memastikan :</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>Restart lengkap setelah purge. Kesalahan yang sama.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tahap_2_penelusuran_web_dan_breadcrumb_github">Tahap 2 : penelusuran web dan breadcrumb GitHub</h2> <div class="sectionbody"> <div class="paragraph"> <p>docker-java 3.5.1 tidak mencukupi. Hanya perlu mencari apakah seseorang telah mengalami masalah ini.</p> </div> <div class="paragraph"> <p>Pencarian terarah pada isu testcontainers-java dan 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>Hasil segera pertama :</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>(No content to translate)<code>[Bug]: Incompatibility in Ubuntu Github runners with Docker Engine 29.1.*</code></p> </li> </ul> </div> <div class="paragraph"> <p>breadcrumb jelas: Docker Engine 29.x telah meningkatkan versi minimum API-nya menjadi`1.24`(bug lama) ke`1.40`. Testcontainers 1.20.x menggunakan docker-java 3.4.x yang negoiasi versi API dengan mengirim`1.32`. Daemon menolak dengan sopan tapi tegas.</p> </div> <div class="paragraph"> <p>Dalam isu #11491, seorang pemelihara menjawab:</p> </div> <div class="paragraph"> <p><em><em>_ Hai, saya memiliki proyek yang berjalan dengan versi 2.0.3 di GH runner dengan mesin 29.1 dan ini berfungsi. Bisakah kalian semua mohon memeriksa bahwa tidak ada konflik versi? Mohon, ingat semua modul telah diawali dengan`testcontainers-<code>. Jadi, mulai dengan versi 2.x, kita beralih dari`postgresql</code> to <code>testcontainers-postgresql</code> </em>_</em></p> </div> <div class="paragraph"> <p>Jawaban ini berisi<strong>dua informasi kritis</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Testcontainers 2.0.3+ menyelesaikan masalah</p> </li> <li> <p>Modul telah<strong>diberi nama ulang dengan awalan `testcontainers-</strong></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_tahap_3_jerat_artefak_yang_diubah_namanya">Tahap 3: jerat artefak yang diubah namanya</h2> <div class="sectionbody"> <div class="paragraph"> <p>Penggantian nama ini brutal. Di Testcontainers 2.x, tidak ada nama lama yang lagi berfungsi dengan nama itu:</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">Nama lama (1.x)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nama baru (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">tidak berubah</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Percobaan pertama: menerapkan BOM Testcontainers 2.0.5 dan nama-nama artifact baru di`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>BOM testcontainers-bom tidak cukup.</strong>Kenapa ? Karena Spring Boot 3.4.5 mengekspos BOM manajemen dependensi-nya sendiri (<code>spring-boot-dependencies</code>) yang<strong>menang</strong>pada BOM Testcontainers dalam resolusi transitif. Spring Boot memperbaiki`testcontainers` à <code>1.20.6</code>, dan karena itu semua artefak yang tidak secara eksplisit berada dalam BOM Spring Boot (seperti yang baru`testcontainers-*<code>) mengarah ke nama-nama lama`1.20.6</code>-- yang tidak lagi ada dalam versi ini.</p> </div> <div class="paragraph"> <p>Saat memeriksa`dependencies --configuration testRuntimeClasspath`, ada :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">+--- org.testcontainers:testcontainers -> 1.20.6 (*) | \--- org.testcontainers:testcontainers:2.0.5 -> 1.20.6</code></pre> </div> </div> <div class="paragraph"> <p>Le <code>→`menampilkan penggantian : Testcontainers 2.0.5 <strong>diminta</strong>, tapi Spring Boot memaksa`1.20.6</code>.</p> </div> <div id="diag-bom-war" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle (konsumen)" as BG #E3F2FD { rectangle "permintaan\n`testcontainers-bom:2.0.5" as REQ rectangle "permintaan `testcontainers-postgresql" as REQ2 } component "Maven Central" as MC #FFF3E0 component "Pernyataan" as DEC #E8F5E9 { rectangle "testcontainers-bom:2.0.5`\ndiperbaiki 2.0.5" as BOM2 rectangle "spring-boot-dependencies:3.4.5` tetap 1.20.6" as BOM1 } component "Resolusi Gradle" as RES #FFEBEE { rectangle "Versi pemenang\n`testcontainers:1.20.6" as WIN #EF9A9A } BG --> DEC : "menganalisis BOMs" BOM2 --> RES : "menyatakan 2.0.5" BOM1 --> RES : "menawarkan 1.20.6" WIN -> MC : "download\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="_tahap_4_memaksakan_resolusi">Tahap 4 : memaksakan resolusi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Strategi menjadi ganda:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Memaksa docker-java pada versi 3.7.1 (diuji sebagai kompatibel dengan Docker Engine 29)</p> </li> <li> <p>Memaksa Testcontainers core pada versi 2.0.5 dengan melewati BOM Spring Boot</p> </li> </ol> </div> <div id="diag-resolution-override" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false skinparam componentStyle rectangle left to right direction component "build.gradle (dengan resolutionStrategy)" as BG #E8F5E9 { rectangle "BOM Testcontainers\n`2.0.5" as BOM2 rectangle "resolutionStrategy\n.eachDependency" as RS #66BB6A } component "Konflik terpecahkan" as RESOLVED #E3F2FD { rectangle "docker-java `3.7.1` (dipaksa)" as DJ rectangle "testcontainers\n`2.0.5` (dipaksa)" as TC #81C784 rectangle "testcontainers-postgresql `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 (implisit, dioverride)" as BOM1 #FFEBEE component "Maven Central" as MC #FFF3E0 BG --> RESOLVED : "BOM Testcontainers 2.0.5 melewati langsung" RS -> DJ : "kekuatan 3.7.1" RS -> TC : "gaya 2.0.5" RESOLVED --> MC : "unduh JARs\nkompatibel Docker 29" BOM1 -[#gray,dashed]-> RESOLVED : "diabaikan pada testcontainers\net 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>Koreksi final</strong>dalam`build.gradle`(Empty output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">configurations { all { resolutionStrategy.eachDependency { details -> if (details.requested.group == "com.github.docker-java" && details.requested.name.startsWith("docker-java")) { details.useVersion("3.7.1") } if (details.requested.group == "org.testcontainers" && details.requested.name == "testcontainers") { details.useVersion("2.0.5") } } } } dependencies { testImplementation platform("org.testcontainers:testcontainers-bom:2.0.5") testImplementation "org.testcontainers:testcontainers-jdbc" testImplementation "org.testcontainers:testcontainers-junit-jupiter" testImplementation "org.testcontainers:testcontainers-postgresql" testImplementation "org.testcontainers:testcontainers" // ... autres dépendances Spring Boot }</code></pre> </div> </div> <div class="paragraph"> <p>Le `resolutionStrategy.eachDependency`adalah satu-satunya cara untuk mengabaikan BOM`spring-boot-dependencies`Dikelola oleh plugin Spring Boot. Uji kesamaan pada`details.requested.name == "testcontainers"`adalah sengaja restriktif: kita hanya memaksa modul core. Modul-modul`testcontainers-*`mereka mengikuti BOM Testcontainers 2.0.5 yang telah kami deklarasikan secara eksplisit</p> </div> </div> </div> <div class="sect1"> <h2 id="_hasil_akhir">Hasil akhir</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build --no-daemon > Task :consoleLauncherTest [2 containers found] [2 containers started] [2 containers successful] BUILD SUCCESSFUL in 1m 16s</code></pre> </div> </div> <div class="paragraph"> <p>Testcontainers 2.0.5 + docker-java 3.7.1 akhirnya berhasil membuat containernya PostgreSQL melalui Docker Engine 29.4.1. Kesalahan bisnis akhir (HTTP 500 pada ujian Cucumber) adalah masalah aplikasi yang sepenuhnya independen dari skrip build.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tabel_ringkasan_koreksi">Tabel ringkasan koreksi</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">File</th> <th class="tableblock halign-left valign-top">Masalah</th> <th class="tableblock halign-left valign-top">korreksi</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">Variabel`reportsDir`tidak ada</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`usang 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 dilarang Gradle 9</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">blok`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">Pernyataan sintaksis Groovy yang tidak valid</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>assert …​ in ["17", "21", "23", "24"]</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">5</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>build.gradle</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ketergantungan implisit`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`tidak kompatibel Java 21</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>2.5.7</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">7</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Cache Gradle</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">docker-java 3.5.1 diuji, diselesaikan, namun tidak cukup</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembersihan + perjalanan 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 tidak kompatibel dengan Docker Engine 29</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memaksa Testcontainers 2.0.5 + prefix`testcontainers-*`+ strategi resolusi vs Spring Boot BOM</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika build JHipster/Gradle Anda gagal setelah upgrade ke Gradle 9 + Docker Engine 29, kesalahannya terbagi menjadi dua kategori :</p> </div> <div class="paragraph"> <p><strong>Kesalahan skrip build</strong>(6 pertama) : Gradle 9 menghapus properti dan sintaksis yang berfungsi selama bertahun-tahun (<code>sourceCompatibility=</code>, <code>main =</code>, <code>reportsDir</code>). Mereka adalah migrasi mekanis setelah Anda mengenal API baru.</p> </div> <div class="paragraph"> <p><strong>Kesalahan runtime Docker</strong>(kedua terakhir): Docker Engine 29.4.1 mengabaikan klien API < 1.40. Testcontainers 1.20.6 (dipaksa oleh Spring Boot 3.4.5) menggunakan docker-java 3.4.1 yang mengirimkan 1.32. Hanya Testcontainers 2.0.5 + docker-java 3.7.1 yang menyelesaikan masalah, dengan penamaan ulang artefak dan penaklukan versi via`resolutionStrategy.eachDependency`sebagai satu-satunya cara untuk mengatasi BOM implisit Spring Boot.</p> </div> <div class="paragraph"> <p>Skrip build Gradle di akar proyek sekarang bersih.`./gradlew build`melewati atas Java 21, Gradle 9.4.1, Spring Boot 3.4.5 dan Docker Engine 29.4.1</p> </div> </div> </div> https://cheroliv.com/blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html Fri, 24 Apr 2026 00:00:00 +0000 blog/2026/0108_gouvernance_agent_opencode_eager_lazy_post.html <div class="sect1"> <h2 id="_ringkasan">ringkasan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat bekerja dengan agen AI seperti Opencode pada proyek-proyek kompleks di beberapa sesi, kita menghadapi masalah fundamental:<strong>pembocoran konteks</strong>. Agen tidak mengingat sesi sebelumnya. Semua yang dijelaskan kepadanya — arsitektur, konvensi, keadaan backlog — telah hilang. Membangun kembali konteks ini di setiap sesi membutuhkan biaya, lambat, dan sumber kesalahan.</p> </div> <div class="paragraph"> <p>Artikel ini menjelaskan strategi artesanal yang telah saya bangun untuk menyelesaikan masalah ini: sebuah sistem pemerintahan yang berkelanjutan berbasis file AsciiDoc, dengan sebuah dikotomi<strong>antusias/malas</strong>untuk mengoptimalkan konsumsi token konteks, dan satu<strong>proses akhir sesi yang harus dilakukan</strong>untuk menjamin kelangsungan</p> </div> </div> </div> <div class="sect1"> <h2 id="_pertunjukan_senin_21_april_09_00">Pertunjukan : Senin, 21 April, 09.00</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saya membuka kembali Opencode untuk melanjutkan plugin Gradle saya`plantuml-plugin`. Malam ini, saya menghabiskan tiga jam untuk berdiskusi dengan agen arsitektur dari pool kunci API — rotasi round-robin, pengelolaan kuota, fallback otomatis. Pagi ini, agen itu menatap saya dengan mata ikan mas.</p> </div> <div class="paragraph"> <p><em><em>_ — Halo, saya adalah asisten Opencode Anda. Bagaimana saya bisa membantu Anda hari ini? </em>_</em></p> </div> <div class="paragraph"> <p>Tidak — Ah ya, kumpulan kunci API, kita berada di struktur YAML. Tidak — Perhatikan,<code>PlantumlManager`adalah objek Kotlin singleton, bukan kelas. Tidak — Tidak, kami telah memutuskan kemarin bahwa`SyntaxValidationResult`masih ada sebuah sealed class nested di`PlantumlService</code>.</p> </div> <div class="paragraph"> <p>Semua harus dibuat ulang. Lebih tepatnya: semua harus dijelaskan ulang. Saya akan menghabiskan dua puluh menit pertama sesi saya untuk merekonstruksi konteks yang sudah dimiliki oleh agen kemarin. Dua puluh menit token terbakar. Dua puluh menit di mana saya bisa melakukan coding, tapi saya justru melakukan pendidikan yang wajib.</p> </div> <div class="paragraph"> <p>Ini bukan bug Opencode. Ini adalah sifat yang mendasar dari LLM berbasis percakapan: antara dua sesi, memori kerja adalah<strong>sepenuhnya terhapus</strong>. Agen tidak mengingat misi sebelumnya, keputusan yang diambil, jebakan yang teridentifikasi, kode yang telah kita tulis bersama.</p> </div> <div class="paragraph"> <p>Saya telah mengalami itu puluhan kali. Pada empat proyek bersamaan. Dengan sesi yang berlanjut selama minggu-minggu. Saya telah menghitung: rata-rata,<strong>30 hingga 40%</strong>Ia dipanahkan untuk rekontekstualisasi agen. Pada sesi 87 proyek.<code>plantuml-plugin</code>, aku sudah tidak tahan lagi. Aku tidak mampu lagi menjelaskan untuk kali kesepuluh bahwa`AttemptEntry`adalah sebuah kelas data level atas dalam`DiagramProcessor.kt`.</p> </div> <div class="paragraph"> <p>Aku butuh sistem. Bukan hack. Tata kelola yang sebenarnya.</p> </div> </div> </div> <div class="sect1"> <h2 id="_genesis_dari_chaos_ke_metode">Genesis: Dari Chaos ke Metode</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sesi_pertama_era_gelap">Sesi Pertama: Era Gelap</h3> <div class="paragraph"> <p>Proyek pertama saya dengan Opencode,<code>plantuml-plugin</code>, dimulai tanpa tata kelola. Saya mengajukan pertanyaan, agen menjawab, kita mengulangi, sesi berakhir, dan besok kita memulai dari nol. Itu adalah sesi 1, lalu sesi 2, lalu sesi 3…​ hingga sesi 62 ketika saya menyadari bahwa saya telah kehilangan jam-jam yang terkumulatif untuk menjelaskan kembali arsitektur yang sama.</p> </div> <div class="paragraph"> <p>Pada sesi 62, angka-angka ada:<strong>198 tes unit lulus</strong>, <strong>42 tes fungsional yang divalidasi</strong>, plugin berfungsi. Tetabi biaya kognitif tidak dapat ditoleransi. Setiap sesi baru dimulai dengan sebuah monolog dua puluh menit tentang struktur proyek.</p> </div> </div> <div class="sect2"> <h3 id="_episode_site_yml_dihancurkan_sesi_2_bakery_plugin">Episode site.yml Dihancurkan (Sesi 2, bakery-plugin)</h3> <div class="paragraph"> <p>Metode ini juga lahir dari sebuah bencana. Di proyek`bakery-gradle`, pada sesi 2, saya meminta agen untuk mengubah file`site.yml`. Agen, tanpa memverifikasi apakah file tersebut telah diberi versi, membuat`Write`yang lengkap yang menimpa konten. Hasil: token nyata (kunci API Firebase, rahasia penerapan) diganti dengan placeholder palsu. File tidak berada di git — ia berada di`.gitignore`untuk melindungi rahasia.</p> </div> <div class="paragraph"> <p>Tanpa cadangan. Tanpa`git restore`mungkin. Saya terjebak. Saya harus membangun ulang file konfigurasi secara manual, menemukan token di manajer kata sandi saya, menempelkan semuanya kembali.</p> </div> <div class="paragraph"> <p>Dari kegelisahan inilah lahir<strong>Aturan Mutlak 1b</strong>:</p> </div> <div class="paragraph"> <p><em><em>_ <strong>Jangan pernah menimpa</strong>sebuah file config dengan sebuah`Write`lengkap ketika satu`Edit`sebagian cukup.<strong>JANGAN PERNAH mengganti</strong>nilai sensitif dengan nilai tiruan.<strong>Periksa <code>git check-ignore</code> dan `git ls-files</strong>Sebelum modifikasi apa pun. </em>_</em></p> </div> <div class="paragraph"> <p>Aturan ini, hari ini terukir di batu dalam semua file saya`AGENT.adoc` et `INDEX.adoc`pada empat proyek, lahir dari kesalahan nyata yang telah menghabiskan satu jam kerja manual saya</p> </div> </div> <div class="sect2"> <h3 id="_migrasi_markdown_asciidoc_sesi_1_cheroliv_com">Migrasi Markdown → AsciiDoc (Sesi 1, cheroliv.com)</h3> <div class="paragraph"> <p>Pada 25 April 2026, pada`cheroliv.com`, saya mengambil keputusan radikal: mengonversi seluruh tata kelola Markdown ke AsciiDoc. Ini tidak estetis. Ini fungsional. AsciiDoc memberikan struktur semantik yang lebih baik dibaca oleh LLM : bagian hierarkis, tabel bertipe, peringatan (<code>NOTE</code>, <code>WARNING</code>, <code>CAUTION</code>), atribut dokumen yang dapat dibaca mesin.</p> </div> <div class="paragraph"> <p>Sesi 1 dari`cheroliv.com`Mengformalkan struktur :</p> </div> <div class="ulist"> <ul> <li> <p>konversi dari`AGENTS.md` en <code>AGENT.adoc</code></p> </li> <li> <p>Pembuatan agen spesial :`CODER.adoc`, <code>SCRUM_MASTER.adoc</code>, <code>PLANTUML_DESIGNER.adoc</code></p> </li> <li> <p>Pembuatan struktur Eager/Lazy:`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>Satu commit :`90975e9 refactor: migrate agent governance from Markdown to AsciiDoc`. Dan situs masih berfungsi.</p> </div> <div id="diag-timeline" class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false title Evolusi Sesi — Dari Sesi 1 hingga 150+ legend top |= Couleur |= Projet | | <#4CAF50> | cheroliv.com | | <#2196F3> | plantuml-plugin | | <#FF9800> | bakery-plugin | | <#9C27B0> | magic-stick | endlegend concise "Sesi aktif" as S @S 0 is ".md mentah" 1 is "Migrasi\nAsciiDoc" 10 is "Bersemangat/Malas\ndiformalkan" 62 is "Aturan keamanan\n(site.yml)" 87 is "Pecah konteks" 109 is "Optimasi -60% token" 133 is "133 sesi 240 tes LULUS" S@0 -> S@1 : Session 1\n(cheroliv.com) S@1 -> S@10 S@10 -> S@62 : Session 62\n(plantuml-plugin) S@62 -> S@87 : Session 87\n(Cry 4 help) S@87 -> S@109 : Session 109\n(API Key Pool) S@109 -> S@133 : Session 133\n(Aujourd'hui) @enduml</pre> </div> </div> <div class="paragraph"> <p>Timeline di atas menggambarkan progres aktual. Titik balik adalah sesi 87: itu di mana ketidakpuasan dari rekontekstualisasi berulang melebihi ambang toleransi, dan metode Eager/Lazy tidak lagi hanya sebuah ide, melainkan menjadi kewajiban.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_strategi_eagerlazy_mendalam">Strategi: Eager/Lazy Mendalam</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_filsafat_cache_informatika_diterapkan_pada_kognisi">Filsafat : Cache Informatika diterapkan pada Kognisi</h3> <div class="paragraph"> <p>Pendekatan saya terinspirasi langsung dari pengelolaan cache komputer. Semua yang<strong>kritis dan sering digunakan</strong>harus segera dapat diakses (<strong>bersemangat</strong>). Semua yang<strong>kontekstual atau berukuran besar</strong>harus dimuat saat diperlukan (<strong>malas</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">Malas (Manual Pemilik)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>ukuran</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">< 100 baris, < 10k token</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak terbatas, rinci</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Memuat</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Otomatis, di awal sesi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Atas permintaan agen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Isi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Aturan mutlak, misi saat ini, kondisi kritis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Arsip sesi, riwayat lengkap, prosedur terperinci, referensi teknis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>peran</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Arahkan segera agen</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menjawab pertanyaan konteks mendalam</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_file_eager_dasbor">File Eager: Dasbor</h3> <div class="paragraph"> <p>File-file ini berada di akar setiap proyek dan dimuat secara otomatis oleh agen pada awal setiap sesi. Mereka membentuk le<strong>papan instrumen</strong>-- informasi kritis, langsung dapat diakses.</p> </div> <div id="diag-eager-lazy" class="listingblock"> <div class="content"> <pre>@startuml skinparam defaultTextAlignment center skinparam wrapWidth 200 package "Akar Proyek (Eager - Dimuat otomatis)" { component "<b>AGENT.adoc</b>\nAturan mutlak\nStruktur & Konvensi" as AGENT component "<b>PROMPT_REPRISE.adoc</b>\nMisi sesi N\nRingkasan N-1" as PROMPT component "<b>INDEX.adoc</b>\nTitik masuk\nAturan + Sesi" as INDEX component "<b>*_ESSENTIALS.adoc</b> Konteks bisnis kritik" as ESS } package ".agents/ (Lazy - Dimuat saat diminta)" { component "<b>sessions/N-*.adoc</b>\nArsip terperinci\nKeputusan & Keluaran" as SESS component "<b>SESSIONS_HISTORY.adoc</b>\nRingkasan tabel\nTanggal/Jenis/Nilai" as HIST component "<b>PROCEDURES.adoc</b> Templates akhir sesi 6 langkah" as PROC component "<b>*_REFERENCE.adoc</b>\nArsitektur lengkap\nReferensi teknis" as REF component "<b>COMPLETED_TASKS_ARCHIVE</b>\nTugas yang selesai\nPer bulan" as ARCH component "<b>AGENT_MODUS_OPERANDI.adoc</b>\nDokumentasi strategi\nMetodologi" as MOD component "<b>*_REFERENCE.adoc</b> Pengujian boot, partisi A/B Konteks spesifik" as SPEC } AGENT --> PROMPT : "Referensi" AGENT --> INDEX : "Referensi" INDEX --> SESS : "Indeks" INDEX --> HIST : "Indeks" INDEX --> PROC : "referensi" INDEX --> ARCH : "referensi" INDEX --> REF : "referensi" PROMPT --> SESS : "Arsip N-1" PROMPT --> ESS : "Konteks bisnis N" @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>AGENT.adoc</strong>-- File utama. Pada`cheroliv.com`, itu memiliki 200 baris dan berisi :</p> </div> <div class="ulist"> <ul> <li> <p>Aturan absolut proyek (tanpa commit tanpa izin, tanpa`rm`tanpa konfirmasi)</p> </li> <li> <p>Struktur proyek dan konvensi kode</p> </li> <li> <p>Perintah penting (<code>./gradlew serve</code>, <code>./gradlew test</code>)</p> </li> <li> <p>Epik dan backlog produk (user stories yang diprioritaskan)</p> </li> <li> <p>Kriteria kualitas lintas (aksesibilitas, responsif, kompatibilitas)</p> </li> </ul> </div> <div class="paragraph"> <p>di atas`bakery-plugin`, Aturan 0 berbeda :<strong>./gradlew -q publishToMavenLocal` wajib setelah setiap perubahan kode sumber</strong>. Karena menguji plugin tanpa menerbitkan ulang JAR lokal membuatku kehilangan satu jam untuk men-debug kode yang belum dipaketkan.</p> </div> <div class="paragraph"> <p><strong>PROMPT_REPRISE.adoc</strong>-- Misi sesi yang sedang berlangsung. Diperbarui pada akhir setiap sesi, ia berisi:</p> </div> <div class="ulist"> <ul> <li> <p>Nomor sesi dan misi prioritas</p> </li> <li> <p>Ringkasan sesi sebelumnya (apa yang telah dilakukan, apa yang masih perlu dilakukan)</p> </li> <li> <p>Kriteria penerimaan sesi saat ini</p> </li> <li> <p>Pengingat teknis spesifik</p> </li> </ul> </div> <div class="paragraph"> <p><strong>.agents/INDEX.adoc</strong>-- Titik masuk. Ia merangkum aturan mutlak, sesi terkini, dan terutama<strong>portofolio proyek</strong>Dikelola dengan metodologi yang sama. Saat ini, lima proyek tercantum di sana:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- | 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`** -- Penambahan baru (Session 109, plantuml-plugin) untuk mengoptimalkan lagi konteks Eager. Alih-alih memuat 200 baris konteks bisnis di pool kunci API, saya memuat 50 baris dari inti, dan 150 baris lainnya tetap dalam keadaan LAZY di`*_REFERENCE.adoc`. Hasil yang diukur: peralihan**~25k tokens EAGER ke ~10k tokens**(kenaikan 60%). Agen tidak lagi membutuhkan pengingat yang boros energi. ==== Rantai yang Hilang : `opencode.json Saya harus mengakui suatu hal yang hampir saya lupa untuk didokumentasikan. Di atas semua file .adoc ini, terdapat sebuah file JSON sangat kecil yang tanpa-nya tidak ada yang berfungsi. Namanya`opencode.json`dan dia membuat enam baris. Secara literal enam baris. [source,json] ---- { "$schema": "https://opencode.ai/config.json", "instructions": [ "AGENT.adoc" ] } ---- Ini file yang memberitahu Opencode : « Saat mulai, muat`AGENT.adoc`secara otomatis. » Tanpa dia, agen itu merupakan halaman putih persis seperti yang saya gambarkan di awal artikel. Dengan dia, agen sudah memiliki di tangan rules absolut, arsitektur proyek, dan perintah penting — bahkan sebelum saya katakan halo. Saya menemukan pentingnya file ini secara kebetulan. Tentang`bakery-plugin`, tidak ada. Saya bertanya-tanya mengapa agen tersebut secara konsisten lebih « bingung » pada proyek ini dibandingkan dengan yang lain. Aturan mutlak berada baik di`AGENT.adoc`— tapi`AGENT.adoc`tidak pernah terisi. Agen hanya membaca apa yang saya katakan kepadanya untuk dibaca, secara manual, di setiap sesi. Ini adalah sesi 11 dari`bakery-plugin`ketika saya menyadari ketidakhadirannya`opencode.json`. Saya telah membuatnya — dan sesi 12 dimulai seperti yang lain. File ini sangat jelas bagi saya sekarang bahwa saya bahkan tidak lagi memikirkan itu. Ini adalah kesalahan klasik dari seorang pengembang yang terlalu familiar dengan alatnya. Hari ini, saya membuatnya secara sistematis *sebelumnya*.`AGENT.adoc`. Ini adalah batu pertama. ==== Dualitas dari `INDEX.adoc Satu lagi hal halus yang layak diperjelas:`INDEX.adoc`hidup di`.agents/`— sebuah folder yang saya presentasikan sebagai LAZY. Namun, saya menentukannya sebagai EAGER di semua tabel saya. Ada ketegangan yang jelas di sini. Realitas lapangan: file-file`.agents/INDEX.adoc`sudah dimuat secara otomatis pada awal sesi, sama seperti`AGENT.adoc` et `PROMPT_REPRISE.adoc`. Mereka berada di`.agents/`karena alasan organisasi — jangan menginvasi akar — tapi perilaku mereka EAGER. Di`plantuml-plugin`, `INDEX.adoc`Memiliki 200 baris dan memuat aturan mutlak *lengkap* dengan histori mereka (pelajaran dari sesi sebelumnya), EPIC dengan skor, dan portofolio proyek. Ini adalah dokumen yang dikonsultasi oleh agen untuk mengetahui « di mana kita berada ». Pada`bakery-plugin`, dia membuat 150 baris dengan roadmap dan sesi terbaru. Redundansi sengaja di antara`AGENT.adoc` et `INDEX.adoc`Mungkin mengejutkan. Aturan mutlak ada di keduanya. Mengapa? Karena mereka memenuhi dua peran yang berbeda: dalam`AGENT.adoc`, mereka adalah *explicatives* (storytelling dari aturan, pelajaran yang dipelajari) ; dalam`INDEX.adoc`, mereka adalah *eksekutif* (aturan telanjang, tanpa justifikasi, untuk konsultasi cepat). Agen membaca`AGENT.adoc`sekali untuk *memahami*; ia membaca kembali`INDEX.adoc`pada setiap sesi untuk *menerapkan*. Dua penggunaan, dua format. [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 Dualitas AGENT.adoc ←→ INDEX.adoc left to right direction rectangle "AGENT.adoc\n(Akar — EAGER)" as AGENT #E3F2FD { rectangle "📖 **Format Narasi** Storytelling dari aturan pelajaran yang dipelajari, konteks" as NARR rectangle "🏗️ **Arsitektur Lengkap** Struktur proyek, komponen Backlog terinci US" as ARCHI rectangle "📋 **Aturan Penjelasan** Mengapa aturan ada Riwayat insiden" as EXPL } rectangle "INDEX.adoc\n(.agents/ — EAGER)" as INDEX #E8F5E9 { rectangle "⚡ **Format Eksekutif** Aturan telanjang, tanpa justifikasi Konsultasi cepat" as EXEC rectangle "📊 **Roadmap & EPICs**\nTabel ringkasan\nProgres, Skor, Prioritas" as ROAD rectangle "🌐 **Portofolio Proyek** Tampilan melintang 5 proyek disinkronkan" as PORT } AGENT --> INDEX : "Agent membaca AGENT.adoc 1 kali untuk **memahami**" INDEX --> AGENT : "Agent membaca kembali INDEX.adoc setiap session untuk **menerapkan**" 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 ---- Redundansi yang diasumsikan ini adalah pilihan desain. Dia mengonsumsi sekitar 50 baris tambahan token EAGER — namun ia menjamin bahwa agen selalu memiliki aturan di depan mata, termasuk dalam format singkat yang memfasilitasi kepatuhan segera. === File LAZY : Manual Pemilik File-file ini hidup di`.agents/`dan hanya dibaca ketika agen membutuhkannya. Mereka merepresentasikan kekayaan sejati dari metode tersebut, karena mereka mengakumulasi pengetahuan proyek tanpa mencemari konteks saat ini. [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 baris)" as IDX #E8F5E9 file "AGENT_SESSION_MANAGER.adoc\n(Sesi template)" as ASM file "SESSION_CHECKLIST.adoc (Kapan mengubah)" as CHK file "PROCEDURES.adoc\n(6 langkah + LAZY/EAGER)" as PRO file "SESSIONS_HISTORY.adoc\n(Semua sesi)" as HIS folder "sesi/" as SESS { file "1-chore-migration.adoc" as S1 file "109-formalisasi-lazy.adoc" as S109 #FFECB3 file "133-epic11-article.adoc" as S133 file "... +130 lainnya" as SMORE } folder "arsip/" as ARCH { file "COMPLETED_TASKS_2026-04.adoc" as CTA file "SESSIONS_HISTORY_83-95.adoc" as SHIST folder "sessions_summaries/" as SUM { file "SESSION_64_SUMMARY.adoc" as SU64 file "SESSION_73_SUMMARY.adoc" as SU73 file "..." as SUMORE } folder "prompts_archive/" as PARCH { file "PROMPT_REPRISE_S65.adoc" as PR65 file "PROMPT_REPRISE_S75.adoc" as PR75 file "..." as PMORE } } } IDX --> SESS : "Indeks" IDX --> HIS : "Indeks" IDX --> ARCH : "Referensi" note right of S109 Session 109 = Formalisation stratégie LAZY/EAGER Token : ~25k → ~10k end note @enduml ---- Struktur direktori di atas menunjukkan struktur sebenarnya dari folder`.agents/`di atas`plantuml-plugin`, proyek paling matang. Perhatikan kedalaman dalam tiga lapisan: file akar (metadat), folder`sessions/`(arsip kronologis), dan file`archives/`(agregasi dan ringkasan). Ini adalah kedalaman yang mengubah tata kelola dari sebuah file TODO sederhana menjadi**memori organisasional lengkap**. **.agents/sessions/{N}-{titre}.adoc**-- Arsip terperinci setiap sesi. Saat ini : * `plantuml-plugin`:**133 sesi terarsip**dari sesi 1 hingga 133 * `bakery-plugin` : **11 sesi** * `magic-stick`:**23 sesi** * `cheroliv.com`:**9 sesi formal**+ 7 sesi pra-sistem yang direkonstruksi secara retroaktif Setiap arsip berisi konteks lengkap sesi, keputusan yang diambil, masalah yang dihadapi dan penyelesaiannya, perintah yang dijalankan dan output. **.agents/SESSIONS_HISTORY.adoc**-- Sebuah tabel ringkasan dari semua sesi dengan skor. Contoh pada`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**Tugas yang selesai diarsipkan per bulan, agar tidak membebani backlog aktif. Saat sebuah user story selesai, ia pindah ke sini. Backlog tetap terbaca: maksimal 10 item aktif. **.agents/PROCEDURES.adoc**-- Mtemplate terperinci prosedur akhir sesi. Panjang, tetapi hanya dibaca satu kali oleh agen ketika ia belajar metode. Selanjutnya, prosedur menjadi mekanis. **.agents/AGENT_MODUS_OPERANDI.adoc**-- Dokumentasi strategi lengkap. pada`plantuml-plugin`, file ini melakukan**900+ baris**dan sebenarnya bernama`AGENT_METHODOLOGIES.adoc`— Saya telah mengubah nama antara penulisan artikel ini dan pelaksanaannya yang efektif. Jenis divergensi de naming seperti ini tidak terhindarkan dalam sistem artesan yang berkembang. Yang penting adalah konvensi penamaan: jika file dokumentasi *méthode*, maka dimulai dengan`AGENT_`atau sebuah awalan eksplisit. Dia mendokumentasikan metodologi Eager/Lazy, pola yang harus diikuti, dan anti-pola yang harus dihindari. Dia LAZY karena agen tidak perlu membaca ulang seluruh strategi di setiap sesi, hanya ketika ada ambiguïtas. </think> (no output, as there is no French text provided to translate)`*_REFERENCE.adoc`Referensi teknis spesifik untuk proyek. pada`magic-stick`, dua file LAZY padat : * `AB_PARTITION_REFERENCE.adoc`(147 baris) -- Arsitektur Parti A/B GPT, skrip`update-system.sh`, ukuran yang diperkirakan, mekanisme rollback * `BOOT_TEST_REFERENCE.adoc`(144 baris) -- Prosedur QEMU + VNC untuk menguji proses boot ISO tanpa perangkat fisik, daftar periksa BIOS/UEFI, keterbatasan CI/CD Di`plantuml-plugin` : * `ARCHITECTURE.adoc`(134 baris) -- Struktur dari 11 kelas data, poin perhatian (jebakan yang harus dihindari), perintah pengujian yang dioptimalkan * `API_KEY_POOL_REFERENCE.adoc`-- detail lengkap pool kunci (LAZY sementara`ESSENTIALS`EAGER) == Agen Khusus: Tim Virtual Governance tidak hanya berisi file pasif. Saya telah mengformalkan beberapa**peran agen spesialis**dalam file LAZY khusus, yang menentukan workflow yang diharapkan sesuai jenis tugas. |=== |agen |File |peran |Proyek |**mengkode** |`CODER.adoc` |Implementasi FTL/CSS/JS, tag semantik, kriteria aksesibilitas |cheroliv.com |**SCRUM Master** |`SCRUM_MASTER.adoc` |Perencanaan US, pembagian menjadi subtugas, deteksi dependensi |cheroliv.com |**PlantUML Designer** |`PLANTUML_DESIGNER.adoc` |Pembuatan diagram, sintaksis PUML, integrasi JBake |cheroliv.com |=== file`CODER.adoc`di atas`cheroliv.com`mengandung aturan konkret : _Hanya satu`<h1>`per halaman_, _Mengawali jalur dengan`${content.rootpath}`_, _Mendeklarasikan bahasa`<html lang="${content.lang!"fr"}">`_. Konvensi ini, yang ditulis sekali, dipatuhi secara otomatis oleh agen sejak sesi 1. File File`SCRUM_MASTER.adoc`Menetapkan struktur hasil kerja:**Tujuan**, **tugas**(koordinat y dengan alokasi),**Kriteria penerimaan**, **Risiko**. Saat saya meminta rencana tindakan, agen menghasilkan struktur ini tanpa saya memintanya. Tata kelola**program**agen. ==== Ketika Agen Spesialis Menjadi Penting Pembuatan agen spesialis mengikuti kurva alami. Di awal sebuah proyek, Anda tidak memerlukannya —`AGENT.adoc`Cukup lebih dari cukup. Tetapi ketika proyek bertumbuh (katakanlah, di atas 20 sesi), dua sinyal harus memperingatkanmu : 1. Agen mengcampur konvensi dari dua bidang yang berbeda (misalnya: sintaksis PlantUML dan aturan CSS) 2. Anda menghabiskan lebih banyak waktu untuk memperbaiki agen mengenai konvensi yang sudah Anda jelaskan kepadanya 5 kali pada`cheroliv.com`, itu terjadi di sesi... 1. Ya, sejak awal. Karena proyek ini adalah situs web dengan tiga bahasa (FTL, CSS, JS), konten AsciiDoc, dan diagram PlantUML — tiga bidang yang tidak ada hubungannya. Agen CODER perlu mengetahui ukuran font dan media query; agen PLANTUML_DESIGNER perlu mengetahui sintaks.`@startuml`. Tanpa pemisahan, agen CODER memberikan saya diagram, dan sebaliknya. Kekacauan. Di atas`jhipster-gradle-plugins`, saya telah membuat dua agen spesial yang disesuaikan untuk pengembangan plugin Gradle :`PLUGIN_DEVELOPER.adoc` et `BACKLOG_MANAGER.adoc`. Yang pertama mengkodekan semua konvensi Kotlin/Gradle (tidak ada`!!`, kelas data untuk model,`@TaskAction`untuk tugas). Yang kedua tahu bahwa`persistence`harus stabil sebelum`assistant`tidak memulai pengembangannya — sebuah dependensi kritis dalam mono-repo Kesalahan yang harus dihindari: membuat terlalu banyak agen terlalu cepat.`plantuml-plugin`telah menunggu sesi 108 sebelum mengformalisasi agen khusus untuk kolam kunci API. Sebelum itu, konteks bisnis berada di`AGENT.adoc`. Catatan praktis: agen spesialis dapat dibenarkan ketika bidang bisnisnya melebihi 100 baris dokumentasi. ==== Konvensi Penamaan Sesi Sepertinya detail yang terlihat sepele tetapi menjadi kritis ketika mencapai 100 sesi. Bagaimana menamai file arsip? Saya belajar dengan cara keras bahwa sebuah konvensi diperlukan — empat proyek, empat format berbeda di awal, dan saya tidak bisa mengikuti. Hari ini, konvensi yang telah saya stabilkan adalah:</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>Contoh konkret : * `1-chore-migration-gouvernance-agent.adoc`— sesi 1, tipe tugas * `10-solidification-tests.adoc`— sesi 10, tanpa jenis eksplisit (subjek sudah cukup) * `036-debug-graphify-symlink-epic9.adoc`— sesi 36 dengan nomor 3 digit untuk pengurutan Nomor sesi adalah kriteria pengurutan utama. Proyek yang menggunakan nomor dengan 3 digit (001, 036, 133) menghindari masalah pengurutan leksikografis ketika melebihi 99. Itulah yang saya gunakan sekarang pada`magic-stick`:`001-init-projet.adoc`, `036-debug-graphify-symlink-epic9.adoc`. Tipe bersifat opsional dan diturunkan dari kata kunci sesi (debug, feature, refactor, docs, chore, test). Subjek dalam kebab-case adalah bagian paling penting: ia harus memungkinkan untuk menemukan sesi tanpa membuka file. Jika Anda bertanya « Session mana yang di mana kita memperbaiki timeout tes integrasi? », jawabannya adalah`124-fix-timeout-integration-test.adoc`. Untuk sesi historis yang direkonstruksi (proyek yang lahir sebelum tata kelola), saya menggunakan angka negatif. pada`cheroliv.com`, sesi -6 hingga 0 mencakup seluruh sejarah pra-pemerintahan proyek. Dan untuk sesi « tidak terdokumentasi » atau yang hilang, saya membuat entri dalam`SESSIONS_HISTORY.adoc`tanpa arsip yang sesuai, dengan skor`?`. Ini lebih jujur daripada berpura-pura. [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 Konvensi Penamaan Sesi start</p> </div> <div class="paragraph"> <p>:Une session se termine; note right: Trigger "akhir sesi"</p> </div> <div class="paragraph"> <p>if (Session antérieure\nà la gouvernance ?) then (oui) :Numéro <strong>NÉGATIF</strong>\n-6, -5 …​ 0; note right: Historique\nreconstitué :Suffixe : reconstitution; else (non) :Numéro <strong>POSITIF</strong>\nsur 3 chiffres si > 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’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` — Langkah 5 Dijelaskan Langkah 5 dari prosedur penutupan sesi adalah yang paling misterius. Dia berkata “Memperbarui`TEST_COVERAGE_ANALYSIS.adoc`jika tes telah ditambahkan atau diubah. » Tapi bagaimana struktur file ini? pada`plantuml-plugin`, ia telah berkembang dari beberapa baris menjadi struktur lengkap. Berikut bentuk yang stabilnya: [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">Keuntungan bukan file itu sendiri — ini adalah kewajiban untuk <strong>mencatat</strong> apa yang berubah. Tanpa langkah ini, setelah 50 sesi, Anda tidak lagi mengetahui tes mana yang mencakup apa. Agen juga tidak. File menjadi sumber satu-satunya kebenaran mengenai cakupan tes proyek.</p> <p class="tableblock">Untuk proyek tanpa tes tradisional (seperti`magic-stick`yang menguji skrip bash), langkah 5 diganti dengan`SCRIPT_VERIFICATION.adoc`. Mekanisme sama: sebuah file yang melacak status validasi skrip. Sesuaikan langkah 5 dengan proyek Anda, tapi jangan pernah melewatkanlah. Ini adalah jaring keamanan yang mencegah regresi diam-diam.</p> <p class="tableblock">Jika proyek Anda tidak memiliki <strong>aucun</strong> test — tidak unitaire, tidak fungsional, tidak skrip — buatlah tetap file kosong dengan bagian « Kerja yang harus dilakukan: Menetapkan strategi pengujian. » Ini adalah penanda yang akan mengingatkan diri Anda di masa depan bahwa topik ini belum ditangani.</p> <p class="tableblock">[plantuml, format=svg, id=diag-session-flow, alt="Flux d’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’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">Diagram di atas menunjukkan siklus hidup penuh sebuah sesi. Poin kunci adalah percabangan setelah pemuatan EAGER: baik misi cukup jelas untuk dieksekusi langsung (80% kasus), baik agen memuat LAZY untuk menyelesaikan ambigu (20% kasus). Diskriminasi ini menghemat token.</p> <p class="tableblock">== Prosedur Akhir Sesi : Aturan Emas</p> <p class="tableblock">=== Mengapa ia sangat penting?</p> <p class="tableblock">Tanpa prosedur ini, strategi Eager/Lazy tidak berguna. Dia yang mengubah pekerjaan sesi menjadi informasi yang persisten. Dieksekusi<strong>atas permintaan eksplisit pengguna</strong>(kata kunci : "akhir sesi", "saya pergi", dsb.), dan ia adalah<strong>wajib</strong>-- tidak ada pengecualian, tidak ada pengabaian.</p> <p class="tableblock">berkas`SESSION_CHECKLIST.adoc`Menentukan metrik sesi ideal :</p> <p class="tableblock">* Durasi : 15-30 menit * File yang dimodifikasi : 1-3 maksimal * Pertukaran LLM : 5-10 pesan * konteks tokens: < 50k</p> <p class="tableblock">Dan tanda-tanda bahwa harus mengganti sesi: _LLM mengulangi kesalahan yang sudah diperbaiki</em>, <em>Lebih dari 3 file yang dimodifikasi secara paralel</em>, <em>Percakapan > 50 pesan</em>. Aturan emas:<strong>Lebih baik 5 sesi 20 menit daripada satu sesi 2 jam dengan debugging yang kacau.</strong></p> <p class="tableblock">=== Aliran 6 Langkah (diam-diam)</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’utilisateur dit "akhir sesi"; 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’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">=== Hasil dari 150+ Sesi</p> <p class="tableblock">Berikut hasil dari prosedur ini yang diterapkan secara sistematis pada keempat proyek saya :</p> <p class="tableblock"><strong>plantuml-plugin</strong> :</p> <p class="tableblock">* <strong>133 sesi</strong>sejak awal proyek * <strong>240/240 tes LULUS</strong>(100% cakupan) — EPICs 1-7 selesai * <strong>57 skenario Cucumber BDD</strong>telah divalidasi * Aturan keamanan pada file konfigurasi yang berasal dari kesalahan nyata (Session 2 bakery-plugin)</p> <p class="tableblock"><strong>plugin bakery</strong>:</p> <p class="tableblock">* <strong>11 sesi</strong>dalam dua minggu * Migrasi Supabase → Firebase selesai (9 tes diperbaiki) * EPIC 6 (publishProfile) fungsional di produksi * Aturan 0 dibuat :`publishToMavenLocal`wajib setelah setiap modifikasi</p> <p class="tableblock"><strong>tongkat-ajaib</strong>:</p> <p class="tableblock">* <strong>23 sesi</strong>untuk membangun sistem live Xubuntu dengan partisi A/B * ISO pertama yang dihasilkan pada sesi 10 * Tes boot QEMU + VNC yang formal (dokumentasi LAZY 144 baris) * CI/CD SourceForge fungsional</p> <p class="tableblock"><strong>cheroliv.com</strong> :</p> <p class="tableblock">* <strong>9 sesi formal</strong>+ rekonstruksi 7 sesi pra-sistem * Pasal 0101 (OpenCode PATH) diterbitkan * Article 0108 (ini) ditulis ulang setelah analisis kekurangannya * Governance lengkap migrasi dari Markdown ke AsciiDoc</p> <p class="tableblock">=== Checklist Akhir</p> <p class="tableblock">Setelah eksekusi diam dari 6 langkah, agen harus menampilkan checklist konfirmasi :</p> <p class="tableblock">----</p> <p class="tableblock">✅ Procédure de fin de session exécutée 📋 Checklist :</p> <p class="tableblock"><strong>Aturan mutlak</strong>: tidak ada tahap yang dapat ditandai`[✅]<code>jika file tidak telah benar-benar dimodifikasi dan diverifikasi.</p> <p class="tableblock">== Panduan Bootstrap: Hari 1, Sesi 0</p> <p class="tableblock">Anda yakin dengan metode tersebut. Anda ingin menerapkannya pada proyek baru. Mulai dari mana?</p> <p class="tableblock">Aku mengalami momen ini pada 28 April 2026. Saya membuka Opencode di`jhipster-gradle-plugins</code>, monorepo saya dari dua plugin Gradle JHipster. Ini adalah proyek yang sudah ada — kode sudah ada, tugas Gradle berfungsi. Tapi pengelolaan agen? Nol. Halaman kosong. Seperti`plantuml-plugin`pada sesi 1-nya, beberapa bulan lalu.</p> <p class="tableblock">Berikut prosedur tepat yang saya ikuti, dan saya akan mengikuti untuk setiap proyek baru. Perhatikan urutan — itu penting.</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 Tata Kelola — Hari 1, Sesi 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’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’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’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">=== Langkah 0: Buat <code>opencode.json</p> <p class="tableblock">Ini adalah file pertama. Tidak`AGENT.adoc</code>, tidak`INDEX.adoc`.<code>opencode.json`Pertama, untuk alasan sederhana: jika Anda membuat`AGENT.adoc`Pertama, Anda akan lupa membuat jembatan yang memuatnya secara otomatis. Saya telah melakukannya di`bakery-plugin</code>, saya tahu apa yang saya bicarakan.</p> <p class="tableblock">=== Langkah 1 : Membuat Folder</p> <p class="tableblock">[source,bash] ---- mkdir -p .agents/sessions .agents/archives ----</p> <p class="tableblock">Dua folder kosong.<code>sessions/`akan menerima arsip setiap sesi.`archives/`akan menerima `COMPLETED_TASKS_ARCHIVE</code> bulanan. Folder ini harus ada *sebelum</strong> agen tersebut perlu menulis ke dalamnya. Agen yang harus membuat folder DAN file sekaligus, merupakan agen yang dapat gagal secara diam.</p> <p class="tableblock">=== Langkah 2: Membuat <code>AGENT.adoc</code> — File Utama</p> <p class="tableblock">Struktur minimal untuk versi pertama (ia akan tumbuh):</p> <p class="tableblock">[source] ---- = {NOM_PROJET} — Directives Agent</p> <p class="tableblock">[CAUTION] ----</p> <p class="tableblock"><strong>BERHENTI WAJIB</strong>sebelum rm, Write, penghapusan :</p> <p class="tableblock">1. BACA file secara penuh 2. Periksa git ls-files 3. Meminta konfirmasi 4. MENUNGGU "ya</p> <p class="tableblock">== proyek</p> <p class="tableblock"><strong>nama</strong>: …​ <strong>tumpukan</strong>: …​ <strong>Dokumentasi</strong>: AsciiDoc</p> <p class="tableblock">== Aturan Mutlak</p> <p class="tableblock">=== 0. LINGKUNGAN PENGEMBANGAN</p> <p class="tableblock">Perintah penting…​</p> <p class="tableblock">=== 1. KOMIT/GIT</p> <p class="tableblock">Larangan resmi…​</p> <p class="tableblock">=== 1b. FILE KONFIGURASI — ATURAN MUTLAK KESELAMATAN</p> <p class="tableblock">Jangan pernah menghancurkan…​</p> <p class="tableblock">=== 2. UJIAN DI AKHIR SESI</p> <p class="tableblock">larangan resmi…​</p> <p class="tableblock">=== 3. PROSEDUR AKHIR SESI</p> <p class="tableblock">6 langkah wajib…​</p> <p class="tableblock">== Pengelolaan Konteks — LAZY/EAGER</p> <p class="tableblock">File EAGER / File LAZY…​</p> <p class="tableblock">Template minimal ini memungkinkan agen untuk memulai. Versi kaya — dengan struktur proyek, komponen kunci, EPIC, backlog — akan datang pada sesi 1, ketika agen sudah memiliki aturan dasar di tangan dan dapat membantu mengkaya dokumen.</p> <p class="tableblock">=== Langkah 3 : Membuat <code>PROMPT_REPRISE.adoc</code> — Sesi Misi 1</p> <p class="tableblock">Sebuah file yang secara eksplisit berkata: « Ini adalah sesi 1, misi yang harus ditentukan. » Maksimal 70 baris, dengan sebuah bagian Sesi 0 (ringkasan bootstrap) dan sebuah bagian Sesi 1 (prioritas yang harus ditentukan bersama pengguna).</p> <p class="tableblock">=== Langkah 4: Buat <code>.agents/INDEX.adoc</code> — Titik Masuk</p> <p class="tableblock">File yang akan berisi aturan absolut (versi eksekutif) dan tabel sesi. Untuk bootstrap, ia mencantumkan aturan 0 hingga 3 dalam format singkatnya, portofolio proyek (termasuk proyek baru dengan emoji 🆕), dan roadmap kosong yang siap diisi.</p> <p class="tableblock">=== Langkah 5 : Membuat File LAZY yang Struktural</p> <p class="tableblock">Secara berurutan:</p> <p class="tableblock">1. <code>.agents/SESSIONS_HISTORY.adoc</code>— sebuah tabel dengan hanya sesi 0 2. <code>.agents/SESSION_CHECKLIST.adoc</code>— template « Kapan mengganti sesi 3. <code>.agents/PROCEDURES.adoc</code>— prosedur 6 tahap lengkap + EAGER/LAZY 4. <code>.agents/AGENT_SESSION_MANAGER.adoc</code>— template arsip 5. <code>.agents/TEST_COVERAGE_ANALYSIS.adoc</code>— tabel pelacakan tes, kosong pada awalnya</p> <p class="tableblock">Jika proyek Anda memiliki domain bisnis kompleks (seperti`jhipster-gradle-plugins`dengan mono-repo persistence/assistant-nya,) buatlah agen spesialisasi sekarang :</p> <p class="tableblock">1. <code>.agents/PLUGIN_DEVELOPER.adoc</code>— konvensi kode dan batas dependensi (jika plugin) 2. <code>.agents/BACKLOG_MANAGER.adoc</code>— struktur perencanaan dan risiko yang teridentifikasi</p> <p class="tableblock">Jangan buat agen yang tidak akan Anda gunakan. Agen tanpa konvensi konkret untuk dienkode adalah file mati yang mencemari`.agents/<code>.</p> <p class="tableblock">=== Langkah 6: Menambahkan Proyek ke Portofolio SEMUA Proyek</p> <p class="tableblock">Ini adalah langkah yang selalu dilupakan. Setiap`INDEX.adoc`de setiap proyek berisi tabel « Portefeuille de Projets » yang mencantumkan SEMUA proyek dengan metodologi yang sama. Saat Anda membuat proyek baru, Anda harus :</p> <p class="tableblock">1. Menambahkan satu baris ke portofolio proyek baru (logika) 2. Menambahkan satu baris dalam portofolio SEMUA proyek yang ada — ya, semua</p> <p class="tableblock">Dari empat (sekarang lima) proyek saya, ini berarti membuka`INDEX.adoc</code> de <code>magic-stick</code>, <code>bakery-gradle</code>, <code>cheroliv.com</code>, `plantuml-gradle`dan menambahkan baris di sana`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">…​</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">2026-04-28 🆕<code>.</p> <p class="tableblock">Ini merepotkan. Ini manual. Ini juga satu-satunya cara untuk memastikan bahwa, terlepas dari proyek yang Anda kerjakan, agen tahu proyek-proyek lain yang ada dan kondisinya. Pada sesi 012 de`magic-stick</code>, agen menemukan dua ketidaksesuaian dalam portofolio —`bakery-gradle`mempunyai COMPLETED_TASKS_ARCHIVE-nya terlambat, dan`plantuml-gradle`Terdapat selisih antara dokumentasi prosedurnya (5 langkah) dan INDEKSnya (6 langkah). Tanpa tabel lintas ini, ketidaksesuaian ini akan tetap tersembunyi.</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 Portofolio Proyek — Referensi Silang INDEX.adoc node "<strong>magic-stick</strong>\nSession 037\nSCRIPT_VERIFICATION" as MS #E1BEE7 node "<strong>bakery-gradle</strong> Sesi 11 TEST_COVERAGE" as BG #FFE0B2 node "<strong>cheroliv.com</strong> Sesi 10 TEST_COVERAGE" as CH #C8E6C9 node "plantuml-gradle Sesi 133 TEST_COVERAGE" as PG #BBDEFB node "<strong>jhipster-gradle</strong> Sesi 1 🆕 UJI_COBERTURAN" as JG #FFCDD2</p> <p class="tableblock">MS -→ BG : INDEX.adoc référence MS -→ CH : INDEX.adoc référence MS -→ PG : INDEX.adoc référence MS -→ JG : INDEX.adoc référence 🆕</p> <p class="tableblock">BG -→ MS : INDEX.adoc référence BG -→ CH : INDEX.adoc référence BG -→ PG : INDEX.adoc référence BG -→ JG : INDEX.adoc référence 🆕</p> <p class="tableblock">CH -→ MS : INDEX.adoc référence CH -→ BG : INDEX.adoc référence CH -→ PG : INDEX.adoc référence CH -→ JG : INDEX.adoc référence 🆕</p> <p class="tableblock">PG -→ MS : INDEX.adoc référence PG -→ BG : INDEX.adoc référence PG -→ CH : INDEX.adoc référence PG -→ JG : INDEX.adoc référence 🆕</p> <p class="tableblock">JG -→ MS : INDEX.adoc référence JG -→ BG : INDEX.adoc référence JG -→ CH : INDEX.adoc référence JG -→ 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"><#E1BEE7></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"><#FFE0B2></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"><#C8E6C9></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"><#BBDEFB></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"><#FFCDD2></p></td> </tr> </tbody> </table> </div> </div> https://cheroliv.com/blog/2026/0107_jbake_serve_rendering_bug_fix_post.html Wed, 22 Apr 2026 00:00:00 +0000 blog/2026/0107_jbake_serve_rendering_bug_fix_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_adegan_empat_screenshot_dua_rendering">Adegan: empat screenshot, dua rendering</a> <ul class="sectlevel2"> <li><a href="#_render_lokal">Render lokal</a></li> <li><a href="#_dirender_secara_online">Dirender secara online</a></li> </ul> </li> <li><a href="#_diagnosa_serve_tidak_menunjuk_ke_direktori_yang_benar">Diagnosa : <code>serve</code> tidak menunjuk ke direktori yang benar</a></li> <li><a href="#_penyebab_utama_jbake_cli_tidak_berfungsi_seperti_itu">Penyebab utama: JBake CLI tidak berfungsi seperti itu</a></li> <li><a href="#_solusi_argumen_positional_bukan_flag">Solusi: argumen positional, bukan flag</a></li> <li><a href="#_pemeriksaan_cepat_dengan_curl">Pemeriksaan cepat dengan curl</a></li> <li><a href="#_mengapa_bug_ini_jahat">Mengapa bug ini jahat?</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 10 minutes</div> <p>Apakah Anda pernah mengalami saat ketika situs lokal Anda terlihat tidak ada, tapi setelah dideploy online semuanya menjadi sempurna? Itu yang terjadi dengan plugin Gradle JBake saya. Tugas`serve`Menampilkan tombol berbentuk kotak, teks gelap di latar belakang hitam, dan CSS yang aneh tidak ada. Namun`publishSite`Menghasilkan situs yang sama, itu, sempurna. Penyebabnya bukan CSS, bukan peramban, bukan cache. Ini adalah satu baris kode <code>Kotlin</code> — dan kebiasaan buruk dengan argumen baris perintah.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">ketuk</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_adegan_empat_screenshot_dua_rendering">Adegan: empat screenshot, dua rendering</h2> <div class="sectionbody"> <div class="paragraph"> <p>Itu terjadi setelah sistem crash. Saya telah membuat empat tangkapan layar untuk membandingkan rendering lokal (<code>./gradlew serve`pada`localhost:8820</code>) dengan rendering inline (`publishSite`pada GitHub Pages). Dua screenshot per halaman : bagian atas dan bagian bawah.</p> </div> <div class="sect2"> <h3 id="_render_lokal">Render lokal</h3> <div class="paragraph"> <p><strong>Atas halaman</strong>— Tombol <strong>Project</strong> dan <strong>Template</strong> adalah<strong>kecil, persegi panjang</strong>, ke warna standar (biru dan hijau). Kartu <strong>Start Writing</strong> memiliki sebuah<strong>latar belakang hitam polos</strong>, tanpa kerangka.</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>Bawah halaman</strong>— Subjudul <strong>Artikel dan Sumber Daya Terbaru</strong> adalah<strong>hampir tidak dapat dibaca</strong>, terlalu gelap di latar hitam. Tanggal di bawah gambar blog ("17 October 2013", dst.) adalah<strong>tidak hadir</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="_dirender_secara_online">Dirender secara online</h3> <div class="paragraph"> <p><strong>Bagian atas halaman</strong>— Tombol-tombol yang sama adalah<strong>besar, domba, hijau neon mencolok</strong>, teks dalam huruf besar. Kartu memiliki satu<strong>bingkai putih melengkung dengan bayangan jatuh</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>footer</strong>— Subjudul adalah<strong>mudah dibaca</strong>. Tanggal adalah<strong>terlihat</strong>. Kartu artikel memiliki<strong>sudut melengkung</strong>dan judul-judul adalah<strong>tebal</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>Refleks pertama: tema. Saya menggunakan sistem tema dinamis (terang, gelap, kontras tinggi) berdasarkan`localStorage`. Mungkin bahwa toko lokal memicu tema kontras tinggi? Tidak. Saya sudah menulis sebelumnya.https://cheroliv.com/blog/2025/0098_preloading_css_variable_post.html[sebuah artikel lengkap tentang pra-pemuatan tema], saya tahu cara kerjanya. Dan kemudian, bahkan dalam mode high-contrast, struktur CSS (tombol oval, bayangan) seharusnya ada di sana. Dia tidak ada di sana.</p> </div> <div class="paragraph"> <p>Refleks kedua: cache browser. Tidak, saya sudah menguji dengan profil bersih. Perbedaannya tetap ada.</p> </div> <div class="paragraph"> <p>Refleks ketiga :`serve`tidak menyajikan file yang sama seperti`publishSite`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagnosa_serve_tidak_menunjuk_ke_direktori_yang_benar">Diagnosa : <code>serve</code> tidak menunjuk ke direktori yang benar</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin Gradle saya`bakery`memiliki dua tugas utama:</p> </div> <div class="ulist"> <ul> <li> <p><code>bake</code>: menghasilkan situs statis di`build/bake/`</p> </li> <li> <p><code>serve</code>: menjalankan server web lokal</p> </li> <li> <p><code>publishSite</code>: tunas`build/bake/`ke GitHub Pages</p> </li> </ul> </div> <div class="paragraph"> <p>Divergensi hanya bisa datang dari`serve`. Si <code>publishSite`mempublikasikan konten yang benar, itu adalah`build/bake/`adalah baik. Jika`serve`menampilkan hal lain, berarti ia tidak berfungsi`build/bake/</code>.</p> </div> <div class="paragraph"> <p>Mari kita lihat kode. Di`SiteManager.kt`, tugas`serve`adalah didefinisikan seperti ini :</p> </div> <div class="listingblock"> <div class="title">SiteManager.kt — La tâche serve (version buggy)</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">tasks.register("serve", JavaExec::class.java) { task -> task.apply { mainClass.set("org.jbake.launcher.Main") classpath = jbakeRuntime environment("GEM_PATH", jbakeRuntime.asPath) jvmArgs(/* ... */) args = listOf( "-b", file(site.bake.srcPath).absolutePath, "-s", layout.buildDirectory.get() .asFile.resolve(site.bake.destDirPath) .absolutePath ) } }</code></pre> </div> </div> <div class="paragraph"> <p><code>org.jbake.launcher.Main`adalah titik masuk CLI JBake 2.7.0. Ideanya: melewati</code>-b`untuk folder sumber dan`-s`untuk folder tujuan, lalu jalankan mode server. Kecuali…​</p> </div> </div> </div> <div class="sect1"> <h2 id="_penyebab_utama_jbake_cli_tidak_berfungsi_seperti_itu">Penyebab utama: JBake CLI tidak berfungsi seperti itu</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake 2.7.0 menunggu beberapa<strong>argumen posisi</strong>untuk sumber dan tujuan, lalu flags opsional. Tanda tandanya adalah :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">jbake <source> <destination> [options]</code></pre> </div> </div> <div class="paragraph"> <p>Namun di kode saya, saya menulis:</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 mengartikannya sebagai :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>-b</code>→ parse flag 'bake' (boolean), telah dikonsumsi</p> </li> <li> <p><code>/path/to/site</code>→ menjadi argumen posisi 1 (sumber)</p> </li> <li> <p><code>-s</code>→ mengurai flag "serve" (boolean), server dimulai<strong>segera</strong></p> </li> <li> <p>`/path/to/build/bake`menjadi sebuah argumen yang terasing, diabaikan atau salah ditafsirkan</p> </li> </ol> </div> <div class="paragraph"> <p>Hasil : JBake sedang mengambil`/path/to/site`sebagai sumber,<strong>tidak mempertimbangkan destinasi</strong>yang disediakan (<code>build/bake</code>), dan menggunakan repertoar standar-nya (sering`./output`atau salinan sementara). File`css/styles.css`Build tersebut sehingga di-overwrite atau diabaikan, dan CSS default lama (tanpa variabel kustom, tanpa radius, tanpa bayangan) yang disajikan.</p> </div> <div class="paragraph"> <p>Dalam perbandingan,<code>bake</code> et <code>publishSite`menggunakan<strong>plugin Gradle JBake resmi</strong>( )`jbake-gradle-plugin</code>) yang menulis dengan rapi di`build/bake/`via Gradle API. Mereka tidak melewati CLI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_argumen_positional_bukan_flag">Solusi: argumen positional, bukan flag</h2> <div class="sectionbody"> <div class="paragraph"> <p>Koreksi ini trivial — setelah tahu. Cukup meneruskan sumber dan destinasi sebagai argumen posisional, lalu`-s`akhirnya :</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>Itu saja. Tiga baris diubah, bug telah diperbaiki.</p> </div> <div class="paragraph"> <p>Setelah publikasi lokal plugin ini ()<code>publishToMavenLocal</code>), un `./gradlew serve`Menjalankan JBake dengan sintaksis yang benar :</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>Dan kali ini, server Jetty yang terintegrasi dengan JBake melayani konten dari`build/bake/`— sama dengan yang dipublikasikan secara online.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class package "SEBELUM (bug)" { RECTANGLE JBakeCLI1 { + args = ["-b", "situs", "-s", "membangun/memanggang"] } RECTANGLE Source1 { + site/ } RECTANGLE Dest1 { + ??? (dossier temporaire) } RECTANGLE Jetty1 { + sert mauvais fichiers } JBakeCLI1 --> Source1 : lit JBakeCLI1 -[#red]x Dest1 : destination ignorée Jetty1 --> Dest1 : sert } package "SETELAH (perbaikan)" { RECTANGLE JBakeCLI2 { + args = ["situs", "membangun/memanggang", "-s"] } RECTANGLE Source2 { + site/ } RECTANGLE Dest2 { + build/bake/ } RECTANGLE Jetty2 { + sert les bons fichiers } JBakeCLI2 --> Source2 : lit JBakeCLI2 --> Dest2 : écrit dans Jetty2 --> Dest2 : sert OK } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pemeriksaan_cepat_dengan_curl">Pemeriksaan cepat dengan curl</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agar memastikan bahwa server menyajikan dengan baik konten yang benar, sebuah sederhana`curl`mengonfirmasi bahwa`index.html`mengandung`data-bs-theme="light"`dan bahwa`build/bake/css/styles.css`beratnya tepat 31 402 byte — identik dengan file yang dihasilkan oleh`bake`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew serve # Dans un autre terminal : $ curl -s http://localhost:8820/ | grep data-bs-theme <html ... data-bs-theme="light" ...> $ curl -I http://localhost:8820/css/styles.css HTTP/1.1 200 OK Content-Length: 31402 Content-Type: text/css</code></pre> </div> </div> <div class="paragraph"> <p>Render lokal sekarang<strong>pixel-identik</strong>ke render dideploy.</p> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_bug_ini_jahat">Mengapa bug ini jahat?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kamu tahu mengapa ini sulit ditangkap?</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tidak ada kesalahan eksplisit</strong>JBake tidak crash. Dia "berfungsi", hanya dengan sebuah direktori yang salah.</p> </li> <li> <p><strong>Build berfungsi</strong>:`./gradlew bake`membuat dengan benar file-file di`build/bake/`.</p> </li> <li> <p><strong>Penerapan berfungsi</strong>:`publishSite`mengunggah konten yang baik secara online</p> </li> <li> <p><strong>Hanya <code>serve</code> yang rusak</strong>: tugas pengembangan, yang selalu digunakan untuk iterasi.</p> </li> <li> <p><strong>Kebiasaan <code>-key value</strong>: sebagai seorang developer, kita dikondisikan oleh beberapa tahun CLI Unix (</code>-o output`, <code>-i input</code>). JBake CLI adalah sebuah pengecualian — sumber dan destinasi bersifat posisi.</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Anda memelihara plugin Gradle yang membungkus JBake (atau alat CLI apa pun),<strong>baca dokumentasi argumen</strong>meskipun Anda kira Anda mengenal mereka. Sebuah hipotesis implisit (<code>-s</code>= "set destination") dapat menguras waktu berjam-jam untuk debug visual.</p> </div> <div class="paragraph"> <p>Di sini, perbaikan itu secara harfiah adalah mengubah:</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>Tiga token telah dipindahkan, dan situs lokal saya kembali sama indah dengan situs produksi.</p> </div> <div class="paragraph"> <p><strong>Pelajaran</strong>: ketika rendering berbeda antara lokal dan produksi tanpa alasan jelas, pertimbangkan dulu <strong>pipeline</strong> — bukan CSS, bukan browser, dan jauh lebih bukan framework. Seringnya langkah sebelum rendering yang menipu.</p> </div> </div> </div> https://cheroliv.com/blog/2026/0106_opencode_path_sdkman_nvm_post.html Tue, 21 Apr 2026 00:00:00 +0000 blog/2026/0106_opencode_path_sdkman_nvm_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_pemandangan_seorang_agen_buta_di_dunia_alat">Pemandangan: seorang agen buta di dunia alat</a></li> <li><a href="#_anatomi_bug_dua_shell_dua_dunia">Anatomi bug : dua shell, dua dunia</a></li> <li><a href="#_pelaku_zshrc_vs_zshenv">Pelaku : .zshrc vs .zshenv</a></li> <li><a href="#_diagnostik_langkah_demi_langkah">Diagnostik langkah demi langkah</a> <ul class="sectlevel2"> <li><a href="#_memeriksa_path_agen">Memeriksa PATH agen</a></li> <li><a href="#_2_identifikasi_apa_yang_ada_di_zshrc_tetapi_tidak_ada_di_zshenv">2. Identifikasi apa yang ada di .zshrc tetapi tidak ada di .zshenv</a></li> <li><a href="#_3_memeriksa_jika_zshenv_ada">3. Memeriksa jika .zshenv ada</a></li> </ul> </li> <li><a href="#_solusi_zshenv_jalur_yang_tepat">Solusi: .zshenv + jalur yang tepat</a> <ul class="sectlevel2"> <li><a href="#_membuat_zshenv_dengan_semua_jalur_esensial">Membuat .zshenv dengan semua jalur esensial</a></li> <li><a href="#_mengapa_tidak_source_sdkman_init_sh_di_zshenv">Mengapa tidak <code>source sdkman-init.sh</code> di .zshenv?</a></li> </ul> </li> <li><a href="#_kasus_nvm_ketika_manajer_versi_melupakan_untuk_meninggalkan_jejak">Kasus NVM: ketika manajer versi melupakan untuk meninggalkan jejak</a> <ul class="sectlevel2"> <li><a href="#_masalah_nvm">Masalah NVM</a></li> <li><a href="#_solusi_membuat_symlink_current_untuk_nvm">Solusi : membuat symlink <code>current</code> untuk NVM</a></li> <li><a href="#_mengotomatiskan_pembaruan_symlink">Mengotomatiskan pembaruan symlink</a></li> </ul> </li> <li><a href="#_tabel_ringkasan_jalur">Tabel ringkasan jalur</a></li> <li><a href="#_jebakan_dan_mitigasi">Jebakan dan mitigasi</a></li> <li><a href="#_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</a></li> <li><a href="#_verifikasi_akhir">Verifikasi akhir</a></li> <li><a href="#_tautan">Tautan</a> <ul class="sectlevel2"> <li><a href="#_dokumentasi_resmi">Dokumentasi resmi</a></li> <li><a href="#_alat_yang_disebutkan">Alat yang disebutkan</a></li> <li><a href="#_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</a></li> </ul> </li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 13 minutes</div> <p>Anda menjalankan OpenCode di terminal Anda, semuanya berfungsi. Agen mencoba sebuah`gh`— tidak ditemukan. Satu`java -version`— tidak hadir. Satu`node`— tidak ada di mana-mana. Namun, alat-alat ini memang ada di <em>votre</em> shell. Masalah? OpenCode menjalankan shell.<strong>non-interaktif</strong>yang tidak pernah membaca Anda`.zshrc`. Berikut cara mendiagnosis dan memperbaikinya dengan rapi.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_pemandangan_seorang_agen_buta_di_dunia_alat">Pemandangan: seorang agen buta di dunia alat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Itu adalah malam Selasa. Saya baru saja menginstal.https://opencode.ai[OpenCode], agen AI yang menjanjikan untuk mengubah cara saya coding. Pertama tes : meminta agar menampilkan repositori GitHub saya.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ opencode > Utilise gh pour lister mes repos ❌ bash: gh: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Aneh`gh`Berfungsi dengan sempurna di terminal saya. Saya mencoba hal lain :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">> Vérifie la version de Java ❌ bash: java: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Kemudian :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">> Lance le build Gradle ❌ bash: gradle: command not found</code></pre> </div> </div> <div class="paragraph"> <p>Java, Gradle, Node,<code>gh</code>— semuanya tak terlihat bagi agen. Terminalku, justru, melihat semuanya. Seolah-olah agen dan aku hidup di dua dunia yang paralel.</p> </div> <div class="paragraph"> <p>Saya menghabiskan berjam-jam untuk memahaminya. Berjam-jam dari`echo $PATH`, de <code>which java</code>, dari frustrasi yang semakin meningkat. Saya akhirnya menyadari bahwa masalah bukan alat-alat — itu adalah<strong>kerang</strong>. OpenCode, seperti agen apa pun yang meluncurkan subprocess, bekerja dalam shell<strong>tidak interaktif</strong>. Dan Zsh, di shell-shell tersebut, sekadar mengabaikan Anda`.zshrc`.</p> </div> <div class="paragraph"> <p>Yang berikut adalah cerita lengkap dari diagnosis tersebut, penyelesaiannya, dan pelajaran yang saya pelajari. Jika Anda menggunakan agen AI — OpenCode, Aider, Cursor, atau bahkan skrip cron — masalah ini akan memengaruhi Anda suatu hari.</p> </div> </div> </div> <div class="sect1"> <h2 id="_anatomi_bug_dua_shell_dua_dunia">Anatomi bug : dua shell, dua dunia</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ketika Anda membuka sebuah terminal, Zsh memperlakukannya seperti sebuah shell.<strong>interaktif</strong>. Dia memuat`.zshrc`, yang menginisialisasi semuanya : SDKMAN, NVM, pnpm, alias, prompt yang cantik Anda. Lingkungan Anda lengkap.</p> </div> <div class="paragraph"> <p>Tetapi ketika OpenCode mengeksekusi perintah, ia tidak meluncurkan terminal interaktif. Ia meluncurkan sebuah shell<strong>tidak interaktif</strong>— sebuah shell tugas, tanpa manusia di balik layar. Dan Zsh, dalam konteks ini, melompat.<code>.zshrc</code>. Dia hanya membaca`.zshenv`.</p> </div> <div class="paragraph"> <p>Mengapa perbedaan ini ada? Karena shell non-interaktif dirancang untuk menjalankan skrip, bukan untuk melayani pengguna manusia. Memuat alias, prompt, dan pengisian dalam skrip yang berjalan di latar belakang akan sia-sia. Masalahnya adalah PATH Anda — informasi paling kritis untuk menemukan executable — sering diinisialisasi di`.zshrc`, tidak dalam`.zshenv`.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor "Anda" as user actor "OpenCode (agen)" as agent participant "Shell\ninteraktif\n(.zshrc di-source)" as ishell participant "Shell\nnon-interaktif\n(.zshrc diabaikan)" as nshell user -> ishell : gh, java, node ✅ agent -> 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>Akar masalah :<strong>Zsh hanya men-source <code>.zshrc</code> untuk shell interaktif</strong>. OpenCode, seperti agen AI lain yang meluncurkan subproses, menggunakan shell non-interaktif. Shell-shell ini hanya membaca`.zshenv`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pelaku_zshrc_vs_zshenv">Pelaku : .zshrc vs .zshenv</h2> <div class="sectionbody"> <div class="paragraph"> <p>Zsh memiliki<strong>empat file inisialisasi</strong>, masing-masing dengan peran yang spesifik. Ini sebuah desain yang elegan—tapi juga inti masalah:</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">berkas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Diperoleh ketika</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Peran</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ubah PATH ?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>.zshenv</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Selalu</strong>(interaktif + non-interaktif + login)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Variabel lingkungan penting, PATH</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅ Ya — itu adalah tempat SA</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">Shell login saja</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Perintah lambat (sekali per sesi)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mungkin</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>Hanya shell interaktif</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias, prompt, penyelesaian, alat interaktif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Bukan untuk variabel kritis</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">Shell login (setelah .zshrc)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pesan sambutan, penyelesaian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">jarang</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Tabel memberi sebuah petunjuk, tapi harus dipahami secara mendalam. Pikirkan itu seperti bagian-bagian rumah:</p> </div> <div class="ulist"> <ul> <li> <p>`.zshenv`adalah<strong>aula masuk</strong>— semua orang lewat di sini, pengunjung atau warga. Jika Anda menaruh sesuatu di sini, semua shell akan dapat melihatnya.</p> </li> <li> <p>`.zshrc`adalah<strong>ruang tamu</strong>— hanya penghuni (shell interaktif) yang masuk. Pengunjung (shell non-interaktif) tetap berada di aula.</p> </li> <li> <p><code>.zprofile</code> et `.zlogin`adalah bagian khusus untuk login shell (seperti saat Anda login melalui SSH)</p> </li> </ul> </div> <div class="paragraph"> <p>Tragisnya, kebanyakan dari kita menaruh PATH di ruang tamu. Dan agen AI, ia, tidak pernah berhak masuk ke sana.</p> </div> <div class="paragraph"> <p>Masalah dalam satu diagram :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE start if (Shell interactif ?) then (Oui) :Source .zshenv; :Source .zprofile; :Source .zshrc; :Source .zlogin; note right SDKMAN ✅ NVM ✅ ~/apps ✅ pnpm ✅ end note else (Non — shell non-interactif) :Source .zshenv uniquement; note right SDKMAN ❌ NVM ❌ ~/apps ❌ pnpm ❌ end note endif stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Ketika Anda membuka terminal, Zsh bersifat interaktif: ia membaca`.zshrc`, semuanya berfungsi. Ketika OpenCode meluncurkan shell untuk menjalankan perintah, Zsh adalah non-interaktif: ia melompat`.zshrc`, hanya membaca`.zshenv`. Et si `.zshenv`tidak ada atau tidak mengandung PATH — ini adalah gurun.</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>Mengapa Zsh melakukan itu ?</strong>Ini adalah pilihan desain yang diwarisi dari Unix. Shell non-interaktif harus<strong>cepat</strong> et <strong>dapat direproduksi</strong>. Memuat alias, prompt berwarna, dan inisialisasi berat dari SDKMAN dalam skrip cron atau agen AI akan lambat dan rapuh. Oleh karena itu, pemisahan itu logis :`.zshenv`utamanya (variabel, PATH)`.zshrc`untuk kenyamanan (aliases, prompt, complétons). Masalah terjadi ketika kita menempatkan yang penting dalam kenyamanan.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_diagnostik_langkah_demi_langkah">Diagnostik langkah demi langkah</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum memperbaiki, kamu harus memahami persis apa yang hilang. Berikut adalah metode diagnostik yang dapat direproduksi — simpan sebagai favorit jika Anda bekerja dengan agen AI.</p> </div> <div class="sect2"> <h3 id="_memeriksa_path_agen">Memeriksa PATH agen</h3> <div class="paragraph"> <p>Kita membandingkan apa yang dilihat oleh terminal interaktif Anda dengan apa yang dilihat oleh shell non-interaktif — yaitu apa yang dilihat oleh OpenCode.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Dans votre terminal interactif (tout fonctionne) echo $PATH | tr ':' '\n' | grep -v '^/usr' | sort</code></pre> </div> </div> <div class="paragraph"> <p>Hasil tipikal :</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>Sekarang, mari kita mensimulasikan apa yang dilihat agen—sebuah shell non-interaktif:</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>Hasil :</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>Lima dari enam jalur telah menghilang.</strong>Agen dipotong 83% dari lingkungannya. Seolah-olah diminta untuk memasak tanpa setengah dari peralatan Anda — Anda bisa merebus air, tetapi tidak banyak lagi.</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>Perintah`zsh -c 'echo $PATH'`adalah Anda<strong>alat diagnostik nomor 1</strong>. Jika alat yang Anda gunakan sehari-hari tidak ada dalam hasil, agen AI Anda juga tidak akan dapat melihatnya. Uji sebelum dan setelah setiap perubahan`.zshenv`.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_2_identifikasi_apa_yang_ada_di_zshrc_tetapi_tidak_ada_di_zshenv">2. Identifikasi apa yang ada di .zshrc tetapi tidak ada di .zshenv</h3> <div class="paragraph"> <p>Sekarang, kami mencari pelaku di`.zshrc`. Kita memfilter baris yang menyebutkan alat kita :</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>Seringkali ditemukan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">119: PATH="/usr/bin/python3:$HOME/apps:$PATH" # ← pas exporté ! 171: export NVM_DIR="$HOME/.nvm" 172: [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # ← NVM init 176: nvm use --lts --silent # ← active une version 179: export PNPM_HOME="/home/cheroliv/.local/share/pnpm" 187: export SDKMAN_DIR="$HOME/.sdkman" 188: [[ -s "$HOME/.sdkman/bin/sdkman-init.sh" ]] && source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Semua ini adalah<strong>tidak terlihat</strong>untuk OpenCode. Dan le`PATH`tidak bahkan dari baris 119`export`é — dia tidak pernah keluar dari shell saat ini. Ini adalah sebuah rincian teknis krusial : sebuah variabel tanpa`export`Tetap lokal untuk shell yang mendefinisikannya. Sub-shell — seperti yang diluncurkan oleh OpenCode — tidak pernah mewarisinya.</p> </div> </div> <div class="sect2"> <h3 id="_3_memeriksa_jika_zshenv_ada">3. Memeriksa jika .zshenv ada</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">cat ~/.zshenv 2>/dev/null || echo "FICHIER ABSENT"</code></pre> </div> </div> <div class="paragraph"> <p>Jika jawabannya adalah « FICHIER ABSENT », itulah tempatnya semuanya terjadi.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_zshenv_jalur_yang_tepat">Solusi: .zshenv + jalur yang tepat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Strategi ini sederhana, tapi membutuhkan ketelitian: menaruh di dalam`.zshenv` <strong>hanya</strong>jalan penting, tanpa melakukan source pada skrip inisialisasi yang berat. Kita tidak memindahkan`.zshrc`dalam`.zshenv`— inti diambil.</p> </div> <div class="sect2"> <h3 id="_membuat_zshenv_dengan_semua_jalur_esensial">Membuat .zshenv dengan semua jalur esensial</h3> <div class="paragraph"> <p>`.zshenv`adalah<strong>file tunggal</strong>bahwa Zsh menjamin untuk menyource di<strong>semua</strong>les konteks. Itu lah tempat PATH harus pergi.</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>Kita menggunakan`$HOME/.nvm/current/bin`dan tidak`$HOME/.nvm/versions/node/v22.19.0/bin`. Alasan: versi Node berubah. Jalur hard-coded menjadi salah pada versi berikutnya.<code>nvm install</code>. Lebih banyak detail di bagian berikutnya.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_mengapa_tidak_source_sdkman_init_sh_di_zshenv">Mengapa tidak <code>source sdkman-init.sh</code> di .zshenv?</h3> <div class="paragraph"> <p>Pendekatan yang paling menggoda akan hanya mereproduksi di`.zshenv`apa yang kita lakukan di`.zshrc`— meng-source skrip inisialisasi. On<strong>mungkin</strong>tergoda untuk melakukan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># ❌ MAUVAISE IDÉE [[ -s "$HOME/.sdkman/bin/sdkman-init.sh" ]] && source "$HOME/.sdkman/bin/sdkman-init.sh"</code></pre> </div> </div> <div class="paragraph"> <p>Masalah :</p> </div> <div class="ulist"> <ul> <li> <p><strong>lambat</strong>:`sdkman-init.sh`Membuat resolusi jaringan dan verifikasi di setiap shell. Dalam shell non-interaktif, ini adalah biaya yang tidak perlu.</p> </li> <li> <p><strong>rapuh</strong>: SDKMAN mengharapkan konteks interaktif. Inisialisasinya dapat gagal secara diam-diam dalam pipa atau subshell.</p> </li> <li> <p><strong>tidak berguna</strong>: SDKMAN menempatkan calon-calonya di`~/.sdkman/candidates/<tool>/current/bin`— symlink stabil yang menunjuk ke versi aktif. Mereka dapat digunakan.<strong>langsung</strong>.</p> </li> </ul> </div> <div class="paragraph"> <p>Pendekatan yang baik: menghindari inisialisasi SDKMAN dan menunjuk langsung ke symlink`current`. Ini adalah kunci dari seluruh solusi :<strong>menggunakan struktur file sebagai kontrak, bukan kode inisialisasi</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Pendekatan LAMBAT\n(source sdkman-init.sh)" as slow { card ".zshenv source sdkman-init.sh 2-3 detik per shell Pemeriksaan jaringan Risiko kegagalan" as s1 #FDEDEC } rectangle "Pendekatan cepat (symlinks langsung)" as fast { card ".zshenv export PATH=...current/bin\n0 ms\nTidak ada jaringan\nTidak ada inisialisasi" as s2 #E8F8E8 } slow --> 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="_kasus_nvm_ketika_manajer_versi_melupakan_untuk_meninggalkan_jejak">Kasus NVM: ketika manajer versi melupakan untuk meninggalkan jejak</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_masalah_nvm">Masalah NVM</h3> <div class="paragraph"> <p>Ini adalah tempat di mana penelitian telah membawa saya sejauh ini. SDKMAN memiliki desain yang elegan: ketika seseorang melakukan`sdk install java 25.0.2-tem`, ia membuat sebuah symlink:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">~/.sdkman/candidates/java/current -> ~/.sdkman/candidates/java/25.0.2-tem</code></pre> </div> </div> <div class="paragraph"> <p>Ini symlink adalah<strong>selalu terbaru</strong>. Arahkan ke dalam`.zshenv`Anda terlindungi, apa pun shell-nya. Indah.</p> </div> <div class="paragraph"> <p>NVM, dia, tidak membuat<strong>tidak ada</strong>seperti itu. Tidak ada symlink`current`. Tidak ada titik ancrage yang stabil. Kita harus menunjuk ke jalur versi yang ditetapkan secara keras, yang terlihat seperti ini:</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>Berikutnya`nvm install 24`, jalan ini mati. Anda`.zshenv`Akan menunjuk ke versi yang tidak lagi versi aktif. Ini adalah bom waktu.</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>Mengapa NVM melakukan itu?</strong>NVM berfungsi dengan mengubah secara dinamis variabel PATH setiap`nvm use`. Ini dirancang untuk pengembang yang sering berganti versi, dalam shell interaktif. Symlink`current`tidak ada dalam spesifikasi awal — ini adalah kesalahan desain yang akan kita perbaiki sendiri.</p> </div> </td> </tr> </table> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "SDKMAN ✅" { [~/.sdkman/candidates/java/current] as sdk_current [~/.sdkman/candidates/java/25.0.2-tem/] as java_25 [~/.sdkman/candidates/java/21.0.7-tem/] as java_21 sdk_current --> java_25 : symlink } package "NVM ❌ (sebelum perbaikan)" as nvm_before { [~/.nvm/versions/node/v22.19.0/] as node_22 [~/.nvm/versions/node/v20.16.0/] as node_20 note right of node_22 Pas de symlink current ! .zshenv doit pointer en dur Cassé au prochain nvm install end note } package "NVM ✅ (setelah koreksi)" as nvm_after { [~/.nvm/current] as nvm_current [~/.nvm/versions/node/v22.19.0/] as node_22b [~/.nvm/versions/node/v20.16.0/] as node_20b nvm_current --> node_22b : symlink\n(mis à jour auto) } @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_solusi_membuat_symlink_current_untuk_nvm">Solusi : membuat symlink <code>current</code> untuk NVM</h3> <div class="paragraph"> <p>Karena NVM tidak melakukannya, kami melakukannya sendiri. Prinsipnya sama dengan SDKMAN — sebuah symlink.`current`yang selalu menunjuk ke versi aktif. Kita membuatnya sekali, lalu mengotomatiskannya agar ia dapat memperbarui dirinya sendiri.</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>Sekarang, dalam`.zshenv`, kita menggunakan :</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>Daripada:</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="_mengotomatiskan_pembaruan_symlink">Mengotomatiskan pembaruan symlink</h3> <div class="paragraph"> <p>Symlink tidak berguna jika tidak diperbarui. Symlink`current`harus diperbarui ketika kita melakukan`nvm use` ou <code>nvm install</code>. Solusi: sebuah<strong>bungkus</strong>— sebuah fungsi yang meliputi perintah yang sebenarnya`nvm`dan memperbarui symlink setelah setiap panggilan.</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>Bagaimana cara kerjanya, secara detail :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor Développeur participant "nvm wrapper (_nvm)" as wrapper participant "nvm nyata\n(perintah nvm)" as realnvm participant "~/.nvm/current\n(symlink)" as symlink Développeur -> wrapper : nvm use 20 wrapper -> realnvm : command nvm use 20 realnvm --> wrapper : version activée wrapper -> symlink : ln -sfn .../v20.16.0 ~/.nvm/current wrapper --> Développeur : retour note right of symlink Toujours à jour ! Utilisé par .zshenv → accessible par OpenCode end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Pembungkus`_nvm`panggil perintah yang sebenarnya`nvm`, lalu memperbarui symlink. Alias`nvm='_nvm'`memastikan bahwa saat mengetik`nvm`, lewat wrapper. Dan saat inisialisasi shell, kita melakukan hal yang sama setelahnya`nvm use --lts`.</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`adalah fungsi internal NVM yang menyelesaikan jalur lengkap sebuah versi. Ini menghindari rekonstruksi jalur secara manual.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tabel_ringkasan_jalur">Tabel ringkasan jalur</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum beralih ke jebakan, sebuah ringkasan visual dari transformasi. Di sebelah kiri, apa yang Anda miliki (semua di`.zshrc`, tidak terlihat bagi agen). Di sebelah kanan, apa yang Anda miliki sekarang (jalan-jalan penting di`.zshenv`, terlihat di mana-mana).</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">alat</th> <th class="tableblock halign-left valign-top">Sebelum (.zshrc hanya)</th> <th class="tableblock halign-left valign-top">Sesudah (.zshenv + symlink)</th> <th class="tableblock halign-left valign-top">Terlihat oleh 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 tidak diekspor di .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/apps`dalam .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`sdkman-init.sh`diambil dalam .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.sdkman/candidates/java/current/bin`di .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">(Empty)</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`disumberkan dalam .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.sdkman/candidates/gradle/current/bin`dalam .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`di .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.nvm/current/bin`dalam .zshenv (symlink)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✅</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">pnpm</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$PNPM_HOME`dalam .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$PNPM_HOME`dalam .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">Ditambahkan secara otomatis oleh Toolbox di .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`$HOME/.local/share/JetBrains/Toolbox/scripts`dalam .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`dalam PATH .zshrc</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Secara eksplisit dalam .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="_jebakan_dan_mitigasi">Jebakan dan mitigasi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tidak semua sempurna dengan pendekatan ini. Berikut masalah yang saya temui, dan cara mengatasinya.</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">jebakan</th> <th class="tableblock halign-left valign-top">Deskripsi</th> <th class="tableblock halign-left valign-top">Mitigasi</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">PATH duplikat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jika .zshenv dan .zshrc menambahkan jalur yang sama, jalur tersebut muncul dua kali</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`.zshenv`adalah bersumber<strong>sebelum</strong>.zshrc. Kedua dibaca dalam shell interaktif. PATH dapat duplikat. Ini hanya kosmetik, tidak fungsional. Untuk menghindarinya: jangan menaruh di .zshenv kecuali jalur <em>absents</em> dari PATH default.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">NVM : versi tetap dalam .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menaruh`~/.nvm/versions/node/v22.19.0/bin`beton menjadi salah pada berikutnya`nvm install`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menggunakan symlink`$HOME/.nvm/current/bin`+ pembungkus`_nvm`dalam .zshrc</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">SDKMAN : source sdkman-init.sh di .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Lambat, rapuh, tidak berguna dalam shell non-interaktif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menggunakan symlink`candidates/<tool>/current/bin`secara langsung</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Alias hilang setelah modifikasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Bungkus`nvm='_nvm'`.zshrc hanya berlaku setelah dimuat ulang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mulai ulang shell atau`source ~/.zshrc`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">OpenCode tidak melihat perubahan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Agent telah meluncurkan sub-shell-nya dengan .zshenv lama</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mulai ulang OpenCode setelah modifikasi .zshenv</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv terlalu banyak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Letakkan fungsi berat atau inisialisasi interaktif di .zshenv</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">.zshenv = variabel lingkungan + PATH hanya. Tidak ada`source`, tidak ada fungsi berat, tidak ada prompt.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>zshrc` adalah interaktif, <code>.zshenv</code> adalah universal</strong>— Jika variabel harus ada di <em>semua</em> shell (agen AI, cron, skrip, IDE), ia pergi ke`.zshenv`. Ruang tamu nyaman, tetapi aula masuk adalah satu-satunya tempat di mana semua orang berlalu.</p> </li> <li> <p><strong>Manajer versi tidak sama</strong>— SDKMAN membuat symlink`current`secara sengaja. NVM tidak. Kita harus mengisi kekurangan ini secara manual. Ini adalah pelajaran penting: sebelum mengatur PATH Anda, periksa apakah manajer Anda menawarkan titik ancuran yang stabil.</p> </li> <li> <p><strong>Jangan menyource skrip inisialisasi di .zshenv</strong>—<code>sdkman-init.sh</code> et `nvm.sh`dirancang untuk shell interaktif. Mereka lambat dan rapuh dalam konteks non-interaktif. Symlink`current`cukup dan terjadi secara instan.</p> </li> <li> <p><strong>Selalu menguji dalam shell non-interaktif</strong>—`zsh -c 'echo $PATH'`Simulasi tepat apa yang dilihat oleh agen. Ini adalah tes validasi. Tanpa tes ini, Anda tidak tahu apakah konfigurasi Anda berfungsi untuk agen.</p> </li> <li> <p><strong>Polah wrapper dapat dipakai ulang.</strong>— Pola yang sama`_nvm`+`alias nvm='_nvm'`berlaku untuk setiap alat yang mengubah PATH secara dinamis tanpa meninggalkan jejak yang stabil. Ini adalah alat tambahan di kotak ide Anda.</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "sebelum" as avant { card "Shell interaktif : ✅ Shell non-interaktif : ❌ OpenCode : ❌ Cron : ❌ Scripts : ❌" as av1 #FDEDEC } rectangle "setelah" as apres { card "Shell interaktif : ✅ Shell non-interaktif : ✅ OpenCode : ✅ Cron : ✅ Skrip : ✅" as ap1 #E8F8E8 } avant --> apres : .zshenv +\nsymlink ~/.nvm/current @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_verifikasi_akhir">Verifikasi akhir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah membuat`.zshenv`dan symlink NVM, pastikan bahwa semuanya berfungsi — dalam kedua konteks:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Shell interactif (votre terminal) gh --version && java -version && node --version</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Shell non-interactif (simulation OpenCode) zsh -c 'gh --version && java -version && node --version'</code></pre> </div> </div> <div class="paragraph"> <p>Kedua harus berhasil. Jika ya, agen AI Anda akan melihat alat yang sama dengan Anda. Jika tidak, kembali ke diagnosa langkah demi langkah — Anda mungkin telah melupakan jalur atau symlink NVM tidak diperbarui.</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>Otomatisasi tes ini.</strong>Tambahkan pemeriksaan ini dalam skrip healthcheck yang Anda jalankan setelah setiap pembaruan alat Anda. Sebuah`zsh -c 'which java && which node && which gh'`di CI, ini adalah jaminan terhadap kejutan.</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p><em><em>_ Shell non-interaktif seperti tamu yang diam: ia hanya membaca apa yang ditampilkan di pintu masuk. Jika PATH ada di ruang tamu, ia tidak akan pernah melihatnya. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_tautan">Tautan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_dokumentasi_resmi">Dokumentasi resmi</h3> <div class="ulist"> <ul> <li> <p><a href="https://zsh.sourceforge.io/Doc/Release/Files.html">Zsh dokumentasi : File Startup</a>— Referensi resmi tentang file inisialisasi Zsh. Itu di mana semuanya dijelaskan, meskipun sering dilupakan.</p> </li> <li> <p><a href="https://opencode.ai/docs/config/">OpenCode : konfigurasi</a>— Cara mengkonfigurasi OpenCode dan lingkungan eksekusi.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_alat_yang_disebutkan">Alat yang disebutkan</h3> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nvm-sh/nvm">NVM di GitHub</a>— Node Version Manager. Manajer Versi Node.js.</p> </li> <li> <p><a href="https://sdkman.io">SDKMAN — situs resmi</a>— SDKMAN! Pengelola versi untuk JVM (Java, Kotlin, Gradle…​)</p> </li> <li> <p><a href="https://sdkman.io/install">SDKMAN : instalasi</a>— Panduan instalasi SDKMAN.</p> </li> <li> <p><a href="https://cli.github.com">gh` — CLI GitHub</a>— Alat baris perintah GitHub, penting bagi setiap pengembang.</p> </li> <li> <p><a href="https://gradle.org">Gradle — situs resmi</a>— Sistem build yang kami instal melalui SDKMAN.</p> </li> <li> <p><a href="https://pnpm.io">pnpm — situs resmi</a>— Pengelola paket Node.js yang cepat dan hemat ruang.</p> </li> <li> <p><a href="https://www.jetbrains.com/toolbox-app/">JetBrains Toolbox</a>— Pengelola IDE JetBrains, yang menambahkan skripnya ke PATH.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</h3> <div class="ulist"> <ul> <li> <p><a href="https://blog.andy2003.org/posts/2022/zsh-dotfiles/">Zsh dotfiles : panduan lengkap</a>— Artikel mendalam mengenai pengelolaan dotfiles Zsh.</p> </li> <li> <p><a href="https://wiki.archlinux.org/title/Zsh">Zsh di ArchWiki</a>— Salah satu dokumentasi komunitas terbaik tentang Zsh.</p> </li> <li> <p><a href="https://github.com/nvm-sh/nvm/issues">Masalah NVM GitHub</a>— Untuk melihat diskusi di sekitar symlink`current`dan masalah dengan PATH.</p> </li> </ul> </div> </div> </div> </div> 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="#_masalah_diagram_selalu_tertinggal_dari_kode">Masalah: diagram selalu tertinggal dari kode</a></li> <li><a href="#_solusi_alur_deterministik_knowledge_graph_plantuml">Solusi: alur deterministik Knowledge Graph → PlantUML</a></li> <li><a href="#_langkah_1_menginstal_graphify_dan_mengekstrak_knowledge_graph">Langkah 1: Menginstal Graphify dan mengekstrak Knowledge Graph</a> <ul class="sectlevel2"> <li><a href="#_instalasi">Instalasi</a></li> <li><a href="#_mengonfigurasi_pengecualian">Mengonfigurasi pengecualian</a></li> <li><a href="#_ekstrak_knowledge_graph">Ekstrak Knowledge Graph</a></li> </ul> </li> <li><a href="#_langkah_2_plugin_gradle_mengubah_knowledge_graph_menjadi_plantuml">Langkah 2: Plugin Gradle mengubah Knowledge Graph menjadi PlantUML</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_pipeline">Arsitektur pipeline</a></li> <li><a href="#_komponen_internal">Komponen internal</a></li> <li><a href="#_aturan_rendering">Aturan rendering</a></li> </ul> </li> <li><a href="#_langkah_3_penggunaan_sehari_hari">Langkah 3: Penggunaan sehari-hari</a> <ul class="sectlevel2"> <li><a href="#_diagram_lengkap">Diagram lengkap</a></li> <li><a href="#_filter_berdasarkan_komunitas">Filter berdasarkan komunitas</a></li> <li><a href="#_menyaring_berdasarkan_jenis_sisi">Menyaring berdasarkan jenis sisi</a></li> <li><a href="#_filter_berdasarkan_tipe_node_dan_kepercayaan">Filter berdasarkan tipe node dan kepercayaan</a></li> <li><a href="#_direktori_output_khusus">Direktori output khusus</a></li> <li><a href="#_referensi_lengkap_properti">Referensi lengkap properti</a></li> </ul> </li> <li><a href="#_pipeline_lengkap_dalam_workflow_gradle">Pipeline lengkap dalam workflow Gradle</a> <ul class="sectlevel2"> <li><a href="#_tipe_workflow">Tipe workflow</a></li> <li><a href="#_integrasi_ke_dalam_siklus_pengembangan">Integrasi ke dalam siklus pengembangan</a></li> <li><a href="#_pembaruan_inkremental">Pembaruan inkremental</a></li> </ul> </li> <li><a href="#_dogfooding_plugin_mendokumentasikan_dirinya_sendiri">Dogfooding: plugin mendokumentasikan dirinya sendiri</a></li> <li><a href="#_mengapa_itu_deterministik_dan_mengapa_itu_penting">Mengapa itu deterministik (dan mengapa itu penting)</a></li> <li><a href="#_diagram_pipeline_itu_sendiri">Diagram pipeline itu sendiri</a></li> <li><a href="#_integrasi_dalam_tata_kelola_proyek">Integrasi dalam tata kelola proyek</a></li> <li><a href="#_penyiapan_daftar_periksa_dalam_5_menit">Penyiapan : daftar periksa dalam 5 menit</a></li> <li><a href="#_jebakan_dan_mitigasi">Jebakan dan mitigasi</a></li> <li><a href="#_yang_didapatkan_di_akhir">Yang didapatkan di akhir</a></li> <li><a href="#_tautan">Tautan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Kode basis Anda tumbuh. Dependensi antar module bertambah banyak. Dokumentasi arsitektur menjadi ketinggalan zaman bahkan sebelum ditulis. Dan jika build Gradle Anda bisa <em>otomatis</em> menghasilkan diagram terkini dari struktur kode sebenarnya? Itu persis yang dilakukan oleh pipeline Graphify + PlantUML Gradle Plugin :`graphify . --no-viz`mengekstrak Knowledge Graph,`./gradlew generateKnowledgeGraphDiagram`mengubahnya menjadi diagram PlantUML. Tanpa LLM, tanpa manual, 100% deterministik.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tik</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_diagram_selalu_tertinggal_dari_kode">Masalah: diagram selalu tertinggal dari kode</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setiap proyek yang melebihi beberapa ribu baris mengalami sindrom ini:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Kita membuat diagram arsitektur di awal proyek</p> </li> <li> <p>Kode berkembang, dependensi berubah</p> </li> <li> <p>Diagram menjadi kebohongan dekoratif</p> </li> <li> <p>Tidak ada yang memperbaruinya karena itu merepotkan</p> </li> <li> <p>Pendatang baru mengandalkan hal itu dan membuat kesalahan</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam ActivityBackgroundColor #FDEDEC skinparam ActivityDiamondBackgroundColor #FFF3CD start :Diagramme d'architecture créé\n(manuellement, à la main); :Le code évolue\n(nouvelles classes, nouvelles dépendances); :Diagramme obsolète\n(ne reflète plus le code); if (Qui met à jour ?) then (Personne) :Documentation mensongère; note right: Les nouveaux développeurs\nse basent dessus... et font des erreurs else (Quelqu'un) :Mise à jour manuelle\n(2-3 heures de travail); note right: Déjà obsolète\nà la prochaine PR endif stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Pertanyaan itu bukan <em>apakah diperlukan diagram?</em> — semua orang tahu bahwa ya. Pertanyaan adalah :<strong>Siapa yang menjaga mereka tetap terkini?</strong></p> </div> <div class="paragraph"> <p>Jawaban: tidak ada. Kecuali jika itu otomatis.</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_alur_deterministik_knowledge_graph_plantuml">Solusi: alur deterministik Knowledge Graph → PlantUML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Prinsipnya sederhana: alih-alih menggambar diagram dengan tangan, kita<strong>mengasilkan dari struktur kode sebenarnya</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify\n(pasang graphifyy)" as Graphify collections "graphify-out/graph.json (Graf Pengetahuan)" as KGJSON component "Plugin Gradle PlantUML (generateKnowledgeGraphDiagram)" as Plugin component "ParserGrafPengetahuan" as Parser component "KnowledgeGraphRenderer" as Renderer component "PlantumlService (validasi + rendering PNG)" as PS collections "diagrams/knowledge-graph/ (.puml + .png)" as Output Développeur --> Graphify : graphify . --no-viz Graphify --> KGJSON : extrait la structure\ndu code source Développeur --> Plugin : ./gradlew generateKnowledgeGraphDiagram Plugin --> Parser : parse(graph.json) Parser --> Plugin : KnowledgeGraph\n(noeuds + arêtes + communautés) Plugin --> Renderer : render(graph, filters) Renderer --> Plugin : code PlantUML\ndéterministe Plugin --> PS : validateSyntax + generateImage PS --> Output : .puml + .png note bottom of Plugin Pipeline DÉTERMINISTE Aucun appel LLM Résultat reproductible end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dua perintah. Itu saja.</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>Hasilnya ? Berkas`.puml` et <code>.png`dalam`diagrams/knowledge-graph/</code>, yang tercatat versinya di Git, selalu terkini dengan kode.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_1_menginstal_graphify_dan_mengekstrak_knowledge_graph">Langkah 1: Menginstal Graphify dan mengekstrak Knowledge Graph</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_instalasi">Instalasi</h3> <div class="paragraph"> <p>Graphify adalah alat Python yang menganalisis codebase Anda dan membangun grafik pengetahuan terstruktur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Méthode recommandée uv tool install graphifyy && graphify install --platform opencode # Alternative avec pip pip install graphifyy && graphify install --platform opencode</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_mengonfigurasi_pengecualian">Mengonfigurasi pengecualian</h3> <div class="paragraph"> <p>Membuat file`.graphifyignore`di akar proyek untuk mengecualikan file yang bukan bagian dari logika bisnis :</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="_ekstrak_knowledge_graph">Ekstrak Knowledge Graph</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">graphify . --no-viz</code></pre> </div> </div> <div class="paragraph"> <p>Bendera`--no-viz`melewati pembuatan HTML (tidak diperlukan dalam pipeline Gradle). Hasilnya adalah sebuah file`graphify-out/graph.json`mengandung :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Simpul</strong>: kelas, fungsi, berkas — dengan jenis dan komunitas mereka</p> </li> <li> <p><strong>tulang ikan</strong>relasi antar node (EXTRACTED dari kode, INFERRED oleh LLM)</p> </li> <li> <p><strong>Komunitas</strong>: kelompokan otomatis dari node yang terhubung</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Contoh 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>Kode sumber (<code>.kt</code>, <code>.java</code>) dianalisis secara lokal oleh tree-sitter,<strong>tidak dapat dirayakan LLM</strong>. Hanya file dokumentasi (<code>.adoc</code>, <code>.md</code>) membutuhkan panggilan LLM untuk ekstraksi semantik. Jadi`--update`Saat bekerja dengan kode Kotlin hampir seketika.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_2_plugin_gradle_mengubah_knowledge_graph_menjadi_plantuml">Langkah 2: Plugin Gradle mengubah Knowledge Graph menjadi PlantUML</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_pipeline">Arsitektur pipeline</h3> <div class="paragraph"> <p>plugin`com.cheroliv.plantuml`mengintegrasikan sebuah tugas`generateKnowledgeGraphDiagram`yang mengubah`graph.json`dalam diagram PlantUML dengan cara<strong>sepenuhnya deterministik</strong>:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE participant "Gradle" as G participant "GenerateKnowledgeGraphDiagramTask" as Task participant "KnowledgeGraphParser" as Parser participant "KnowledgeGraphRenderer" as Renderer participant "PlantumlLayanan" as PS collections "graphify-out/graph.json" as JSON G -> Task : execute Task -> JSON : read Task -> Parser : parse(graph.json) Parser --> Task : KnowledgeGraph\n(noeuds + arêtes + communautés) Task -> Renderer : render(graph, filters) Renderer --> Task : code PlantUML\n(déterministe) Task -> PS : validateSyntax(plantumlCode) alt syntaxe valide Task -> PS : generateImage → .png else syntaxe invalide Task -> Task : save .puml avec warning end @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_komponen_internal">Komponen internal</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">Komponen</th> <th class="tableblock halign-left valign-top">Peran</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">Mengurai`graph.json`— mendukung tiga format : graphify asli (<code>nodes</code>+<code>links</code>), warisan (<code>communities</code>), flat. Menyelesaikan IDs numerik menjadi label.</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">Mentransformasi secara deterministik satu`KnowledgeGraph`dalam kode PlantUML. kelompok berdasarkan tipe, komunitas dalam paket, legenda otomatis.</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">Tugas Gradle yang mengorestrasi: parse → render → validate → PNG. Dapat dikonfigurasi melalui properti Gradle.</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">Model data :`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">Validasi sintaks + rendering PNG (dipakai ulang oleh semua tugas plugin).</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_aturan_rendering">Aturan rendering</h3> <div class="paragraph"> <p>Renderer menerapkan konvensi visual yang deterministik :</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">Jenis tepi</th> <th class="tableblock halign-left valign-top">Notasi PlantUML</th> <th class="tableblock halign-left valign-top">Arti</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Diekstrak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>-→</code>(garis lurus, hitam)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relasi yang diekstrak dari kode sumber (keyakinan)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">disimpulkan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>..></code>(garis bertitik)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relation yang disimpulkan oleh LLM (skor kepercayaan)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">abur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>--x</code>(garis titik merah)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hubungan ambigu (perlu dicek)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Komunitasdirender sebagai paket PlantUML dengan palet warna otomatis.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_3_penggunaan_sehari_hari">Langkah 3: Penggunaan sehari-hari</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagram_lengkap">Diagram lengkap</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>keluaran`diagrams/knowledge-graph/knowledge-graph-full.puml` + <code>.png</code></p> </div> </div> <div class="sect2"> <h3 id="_filter_berdasarkan_komunitas">Filter berdasarkan komunitas</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="_menyaring_berdasarkan_jenis_sisi">Menyaring berdasarkan jenis sisi</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="_filter_berdasarkan_tipe_node_dan_kepercayaan">Filter berdasarkan tipe node dan kepercayaan</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="_direktori_output_khusus">Direktori output khusus</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="_referensi_lengkap_properti">Referensi lengkap properti</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">sifat</th> <th class="tableblock halign-left valign-top">default</th> <th class="tableblock halign-left valign-top">Deskripsi</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">(semua)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filter komunitas berdasarkan nama (cocokan substring)</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>(semua)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jenis sisi yang dipisahkan dengan koma :`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">Ambang kepercayaan minimum untuk tepi</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>(tidak terbatas)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jumlah maksimum node yang akan ditampilkan</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">(semua)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jenis simpul yang dipisahkan dengan koma (contoh`class`, <code>code</code>)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.outputDir</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>diagrams/knowledge-graph</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Direktori output untuk file`.puml` et <code>.png</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_pipeline_lengkap_dalam_workflow_gradle">Pipeline lengkap dalam workflow Gradle</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_tipe_workflow">Tipe workflow</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam ActivityBackgroundColor #E8F4FD skinparam ActivityDiamondBackgroundColor #FFF3CD skinparam ActivityBorderColor #2C3E50 start partition "extraksi" { :graphify . --no-viz; note right: Analyse le code source\ntree-sitter (local, pas de LLM) :graphify-out/graph.json; note right: Noeuds + arêtes\n+ communautés } partition "generasi" { :./gradlew generateKnowledgeGraphDiagram; note right: Pipeline déterministe\nparse → render → validate → PNG if (Filtres actifs ?) then (Oui) :Appliquer filtres\n(community, edgeTypes,\nmaxNodes, nodeTypes); else (Non) :Diagramme complet; endif :diagrams/knowledge-graph/\nknowledge-graph-full.puml\nknowledge-graph-full.png; } partition "INTEGRASI" { :git add diagrams/knowledge-graph/; :git commit; note right: Diagrammes versionnés\ntoujours à jour avec le code } stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_integrasi_ke_dalam_siklus_pengembangan">Integrasi ke dalam siklus pengembangan</h3> <div class="paragraph"> <p>Pipeline ini secara alami terintegrasi ke dalam tahap kunci pengembangan :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE state "pengembangan" as dev state "Ekstraksi graphify . --no-viz" as extract state "Generasi ./gradlew generateKnowledgeGraphDiagram" as generate state "Commit diagram ber-versi" as commit [*] --> dev dev --> extract : Code modifié extract --> generate : graph.json à jour generate --> commit : .puml + .png générés commit --> dev : Diagrammes dans le repo note right of extract Quasi instantané sur du code Kotlin (tree-sitter, pas de LLM) end note note right of generate Déterministe Pas de LLM Résultat reproductible end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pembaruan_inkremental">Pembaruan inkremental</h3> <div class="paragraph"> <p>Ketika kode berubah, tidak membuat kembali seluruh grafik dari nol:</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`mengekstrak ulang hanya file yang dimodifikasi (terdeteksi oleh SHA256 dalam`graphify-out/cache/</code>). Pada kode Kotlin, ini hampir seketika karena tree-sitter bekerja secara lokal tanpa memanggil LLM.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dogfooding_plugin_mendokumentasikan_dirinya_sendiri">Dogfooding: plugin mendokumentasikan dirinya sendiri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin PlantUML ada untuk mengubah prompt menjadi diagram. Dia juga dapat mentransformasi Knowledge Graph dari codebase <em>propre</em> nya menjadi diagram dokumentasi. Ini adalah <em>dogfooding</em> : plugin mengonsumsi layanan sendiri.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Alur normal (pengguna → diagram)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --> task1 task1 --> llm1 llm1 --> out1 } package "Pipeline Knowledge Graph (deterministik, tanpa LLM)" as kg { [graphify-out/graph.json] as kgjson [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantumlService] as ps [Diagramme PNG\n(documentation du plugin)] as out2 kgjson --> parser parser --> renderer renderer --> ps ps --> out2 } package "Pipeline Dogfooding (LLM → dokumentasi plugin)" as dogfood { [GraphifyPromptAdapter] as gpa [Fichiers .prompt\nauto-générés] as auto_prompt [LlmService\n+ ApiKeyPool] as llm2 [ProcessPlantumlPromptsTask] as task2 [Diagramme PNG\n(documentation LLM)] as out3 kgjson --> gpa gpa --> auto_prompt auto_prompt --> task2 task2 --> llm2 llm2 --> out3 } note "Sama LlmService, sama ApiKeyPool, sama PlantumlService — duplikasi nol" as N @enduml</pre> </div> </div> <div class="paragraph"> <p>Tugas Gradle terkait :</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">tugas</th> <th class="tableblock halign-left valign-top">LLM ?</th> <th class="tableblock halign-left valign-top">Deskripsi</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">Tidak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Transformasikan`graph.json`dalam PlantUML (deterministik)</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">Ya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menghasilkan beberapa`.prompt`dari grafik, mereka memproses melalui 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="_mengapa_itu_deterministik_dan_mengapa_itu_penting">Mengapa itu deterministik (dan mengapa itu penting)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Titik kunci dari pipeline`generateKnowledgeGraphDiagram`</think><strong>Dia tidak memanggil LLM apa pun.</strong>. transformasi`graph.json`→ PlantUML adalah fungsi murni.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Pipeline deterministik (generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --> parser : parse parser --> renderer : KnowledgeGraph renderer --> puml : render (fonction pure) } rectangle "Pipeline LLM (processPlantumlPrompts)" as llm { [.prompt] as prompt [LlmService] as llmSvc [ChatModel] as model [PlantUML code] as puml2 prompt --> llmSvc llmSvc --> model : API call model --> puml2 : réponse non-déterministe } note bottom of det Même entrée → même sortie Pas de latence réseau Pas de coût en tokens Reproductible en CI end note note bottom of llm Même entrée → sortie variable Latence réseau (1-5s) Coût en tokens Nécessite une clave API end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Keuntungan konkret :</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">Keuntungan</th> <th class="tableblock halign-left valign-top">dampak</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reproduktivitas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bahkan`graph.json`→ diagram yang sama. Tepat. Setiap kali.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">biaya nol</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tanpa panggilan LLM = tanpa token = tanpa tagihan API.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Nol latensi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Parse + render membutuhkan ~100ms, bukan 1-5 detik.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kompatibel CI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak perlu kunci API. Tidak ada ujian flaky karena respons LLM yang variabel.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">dapat di-versikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le <code>.puml`adalah teks yang dihasilkan. Kita bisa`diff</code>, reviewer untuk PR, me-versionnya di Git.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_diagram_pipeline_itu_sendiri">Diagram pipeline itu sendiri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menutup lingkaran, ini adalah diagram pipeline seperti yang akan dibuat oleh plugin :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE participant "Pengembang" as Dev participant "Gradle" as G participant "GenerateKnowledgeGraphDiagramTask" as Task participant "KnowledgeGraphParser" as Parser participant "PerenderGrafPengetahuan" as Renderer participant "PlantumlService" as PS collections "graphify-out/graph.json" as JSON collections "diagrams/knowledge-graph/" as Out Dev -> G : ./gradlew generateKnowledgeGraphDiagram G -> Task : execute Task -> JSON : read Task -> Parser : parse(graph.json) Parser --> Task : KnowledgeGraph alt filtres actifs Task -> Task : appliquer filtres\n(community, edgeTypes, maxNodes…) end Task -> Renderer : render(graph, filters) Renderer --> Task : code PlantUML Task -> PS : validateSyntax() alt valide Task -> PS : generateImage() PS --> Out : .puml + .png else invalide Task -> Out : .puml (avec warning) end @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_integrasi_dalam_tata_kelola_proyek">Integrasi dalam tata kelola proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam proyek kami, pipeline ini terintegrasi dalam strategi manajemen konteks EAGER/LAZY untuk agen IA. Knowledge Graph menggantikan dokumentasi arsitektur manual dengan sebuah graphe terstruktur, yang dapat di-query, dan diperbarui secara otomatis.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(selalu terisi)" 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 — Strategi (atas permintaan)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify (kueri yang ditargetkan)" as lazy_graph { [graph.json] as gj [Queries\n(query/path/explain)] as queries } package "Pipeline PlantUML\n(oto-generate)" as puml { [generateKnowledgeGraphDiagram] as kgTask [generateDiagramDocs] as ddTask [Diagrammes PNG] as diagrams } Agent --> eager : Lit en début de session Agent ..> lazy_strat : Charge si type détecté Agent ..> lazy_graph : Query si besoin structurel kgTask --> diagrams : Déterministe ddTask --> diagrams : Via LLM note right of gr Condensé du Knowledge Graph God nodes + communautés Remplace ECOSYSTEM_OVERVIEW (225 lignes → 50 lignes) end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Perkawinan kedua sistem tersebut komplementer :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Strategi mengelola kapan dan bagaimana</strong>— tata kelola, alur kerja, pengarsipan</p> </li> <li> <p><strong>Graphify mengelola APA dan DIMANA</strong>— struktur kode, hubungan, kueri target</p> </li> </ul> </div> <div class="paragraph"> <p><em><em>_ Strategi sesi mengelola<strong>KAPAN</strong> et le <strong>bagaimana</strong>(pemerintahan, alur kerja, batas), Graphify mengelola<strong>apa</strong> et le <strong>di mana</strong>(struktur kode, hubungan, kueri yang ditargetkan). Pipeline PlantUML mengelola<strong>DENGAN APA</strong>(diagram deterministik, terversion, selalu terkini). </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_penyiapan_daftar_periksa_dalam_5_menit">Penyiapan : daftar periksa dalam 5 menit</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">Tahap</th> <th class="tableblock halign-left valign-top">pesanan</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">Instal Graphify</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>uv tool install graphifyy</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengkonfigurasi pengecualian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">membuat`.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">Ekstrak Knowledge Graph</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">Menghasilkan diagram</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">Mengkomit hasil</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>git add diagrams/knowledge-graph/</code></p></td> </tr> </tbody> </table> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Script complet en 5 commandes uv tool install graphifyy cat > .graphifyignore << 'EOF' *-context.yml *.env build/ .gradle/ EOF graphify . --no-viz ./gradlew generateKnowledgeGraphDiagram git add graphify-out/GRAPH_REPORT.adoc graphify-out/graph.json diagrams/knowledge-graph/</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jebakan_dan_mitigasi">Jebakan dan mitigasi</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">jerat</th> <th class="tableblock halign-left valign-top">deskripsi</th> <th class="tableblock halign-left valign-top">mitigasi</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Grafik terlalu padat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sebuah proyek besar menghasilkan ratusan simpul yang tidak terbaca</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">menggunakan`-Pplantuml.kg.maxNodes=30`dan filter berdasarkan komunitas</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengecualian terlalu luas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Terlalu banyak file di`.graphifyignore`mengurangi nilai grafik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memulai dengan hanya mengecualikan credentials dan build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Arah panah</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sisi-sisi INFERRED dapat memiliki arah ambigu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filter berdasarkan`-Pplantuml.kg.edgeTypes=EXTRACTED`untuk hubungan tertentu saja</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Graf usang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kode berubah tetapi grafik tidak dibangun ulang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">menggunakan`graphify . --update`sekara teratur atau hook git`graphify hook install`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya yang diperbarui</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembaruan inkremental hampir gratis (tree-sitter lokal)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hanya dokumen (<code>…​</code>)<code>.adoc</code>) mengkonsumsi token LLM</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_yang_didapatkan_di_akhir">Yang didapatkan di akhir</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "sebelum" as avant { card "Diagram yang digambar tangan Selalu usang Tidak ada yang memperbarui mereka" as av1 #FDEDEC } rectangle "setelah" as apres { card "Diagram yang dihasilkan secara otomatis Selalu diperbarui dengan kode Disimpan dalam Git dengan sistem versi Determinis dan dapat direproduksi" as ap1 #E8F8E8 } avant --> apres : graphify . --no-viz\n+ ./gradlew generateKnowledgeGraphDiagram @enduml</pre> </div> </div> <div class="paragraph"> <p>Manfaat konkret :</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">Keuntungan</th> <th class="tableblock halign-left valign-top">Detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokumentasi selalu terkini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Diagram tersebut mencerminkan kode saat ini, bukan snapshot manual</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada upaya pemeliharaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Diagram diregenerasi setiap build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengurangan utang teknis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak perlu lagi memelihara diagram secara manual</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Konteks visual untuk yang baru</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Seorang pengembang baru memahami arsitektur dengan melihat diagram</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Potensi penyesuaian halus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pasangan (subgraf → diagram) adalah contoh pelatihan AI</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Validasi otomatis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`PlantumlService.validateSyntax()`memeriksa setiap diagram yang dihasilkan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Onboarding cepat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5 diagram = tampilan lengkap dari arsitektur</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em><em>_ Siapa yang memiliki _mengapa</em> dapat menahan semua <em>bagaimana</em>. </em>__</p> </div> <div class="paragraph"> <p>Alasannya: diagram selalu terkini. Cara: dua perintah dalam pipeline Gradle.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tautan">Tautan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nicholasgasior/graphify">Graphify di GitHub</a></p> </li> <li> <p><a href="https://github.com/cheroliv/plantuml-gradle">Plugin Gradle PlantUML</a></p> </li> <li> <p><a href="/blog/2026/0104_fg_command_super_tips_post.html">Tips super dari perintah fg</a>— artikel sebelumnya tentang workflow terminal</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0105_integrer_graphify_workflow_gradle_post.html Sun, 19 Apr 2026 00:00:00 +0000 blog/2026/0105_integrer_graphify_workflow_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_diagram_selalu_tertinggal_dibanding_kode">Masalah: diagram selalu tertinggal dibanding kode</a></li> <li><a href="#_solusi_pipeline_knowledge_graph_plantuml_yang_deterministik">Solusi: pipeline Knowledge Graph → PlantUML yang deterministik</a></li> <li><a href="#_langkah_1_menginstal_graphify_dan_mengekstrak_knowledge_graph">Langkah 1: Menginstal Graphify dan mengekstrak Knowledge Graph</a> <ul class="sectlevel2"> <li><a href="#_instalasi">Instalasi</a></li> <li><a href="#_mengatur_pengecualian">Mengatur pengecualian</a></li> <li><a href="#_ekstrak_knowledge_graph">Ekstrak Knowledge Graph</a></li> </ul> </li> <li><a href="#_langkah_2_plugin_gradle_mengubah_knowledge_graph_menjadi_plantuml">Langkah 2 : plugin Gradle mengubah Knowledge Graph menjadi PlantUML</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_pipa">Arsitektur pipa</a></li> <li><a href="#_komponen_internal">Komponen internal</a></li> <li><a href="#_aturan_rendering">Aturan rendering</a></li> </ul> </li> <li><a href="#_langkah_3_penggunaan_sehari_hari">Langkah 3: Penggunaan sehari-hari</a> <ul class="sectlevel2"> <li><a href="#_diagram_lengkap">Diagram lengkap</a></li> <li><a href="#_filter_berdasarkan_komunitas">Filter berdasarkan komunitas</a></li> <li><a href="#_filter_berdasarkan_jenis_tepi">Filter berdasarkan jenis tepi</a></li> <li><a href="#_filter_menurut_jenis_node_dan_kepercayaan">Filter menurut jenis node dan kepercayaan</a></li> <li><a href="#_direktori_output_khusus">Direktori output khusus</a></li> <li><a href="#_referensi_lengkap_properti">Referensi lengkap properti</a></li> </ul> </li> <li><a href="#_seluruh_pipeline_dalam_sebuah_workflow_gradle">Seluruh pipeline dalam sebuah workflow Gradle</a> <ul class="sectlevel2"> <li><a href="#_jenis_workflow">jenis workflow</a></li> <li><a href="#_integrasi_dalam_siklus_pengembangan">Integrasi dalam siklus pengembangan</a></li> <li><a href="#_pembaruan_inkremental">Pembaruan inkremental</a></li> </ul> </li> <li><a href="#_dogfooding_plugin_mendokumentasikan_dirinya_sendiri">Dogfooding : plugin mendokumentasikan dirinya sendiri</a></li> <li><a href="#_mengapa_itu_deterministik_dan_mengapa_itu_penting">Mengapa itu deterministik (dan mengapa itu penting)</a></li> <li><a href="#_diagram_pipelinenya_sendiri">Diagram pipelinenya sendiri</a></li> <li><a href="#_integrasi_dalam_tata_kelola_proyek">Integrasi dalam tata kelola proyek</a></li> <li><a href="#_penyiapan_checklist_dalam_5_menit">Penyiapan: checklist dalam 5 menit</a></li> <li><a href="#_penjebakan_dan_mitigasi">Penjebakan dan mitigasi</a></li> <li><a href="#_apa_yang_kita_dapatkan_pada_akhirnya">Apa yang kita dapatkan pada akhirnya</a></li> <li><a href="#_tautan">tautan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Codebase Anda tumbuh. Ketergantungan antar-modul bertambah banyak. Dokumentasi arsitektur menjadi usang bahkan sebelum ditulis. Dan jika build Gradle Anda bisa <em>otomatis</em> membuat diagram terkini dari struktur kode nyata? Ini persis yang dilakukan oleh pipeline Graphify + PlantUML Gradle Plugin :`graphify . --no-viz`mengambil Knowledge Graph,`./gradlew generateKnowledgeGraphDiagram`dia mengubahnya menjadi diagram PlantUML. Nol LLM, nol manual, 100% deterministik.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_diagram_selalu_tertinggal_dibanding_kode">Masalah: diagram selalu tertinggal dibanding kode</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setiap proyek yang melebihi beberapa ribu baris mengalami sindrom ini:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Kami menggambar diagram arsitektur pada awal proyek</p> </li> <li> <p>Kode berkembang, dependensi berubah</p> </li> <li> <p>Diagram menjadi kebohongan dekoratif</p> </li> <li> <p>Tidak ada yang memperbaruinya karena ini merepotkan</p> </li> <li> <p>Pendatang baru mengandalkan hal itu dan membuat kesalahan</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam ActivityBackgroundColor #FDEDEC skinparam ActivityDiamondBackgroundColor #FFF3CD start :Diagramme d'architecture créé\n(manuellement, à la main); :Le code évolue\n(nouvelles classes, nouvelles dépendances); :Diagramme obsolète\n(ne reflète plus le code); if (Qui met à jour ?) then (Personne) :Documentation mensongère; note right: Les nouveaux développeurs\nse basent dessus... et font des erreurs else (Quelqu'un) :Mise à jour manuelle\n(2-3 heures de travail); note right: Déjà obsolète\nà la prochaine PR endif stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Pertanyaannya bukan <em>apakah harus ada diagram?</em> — semua orang tahu bahwa ya. Pertanyaannya adalah :<strong>Siapa yang menjaga agar tetap terkini?</strong></p> </div> <div class="paragraph"> <p>Jawabannya: tidak ada siapa-siapa. Kecuali jika otomatis.</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_pipeline_knowledge_graph_plantuml_yang_deterministik">Solusi: pipeline Knowledge Graph → PlantUML yang deterministik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Prinsipnya sederhana: ali-alih menggambar diagram secara tangan, kita mereka<strong>dihasilkan dari struktur kode sebenarnya</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur component "Graphify\n(pip install graphifyy)" as Graphify collections "graphify-out/graph.json (Graf Pengetahuan)" as KGJSON component "PlantUML Plugin Gradle (generateKnowledgeGraphDiagram)" as Plugin component "KnowledgeGraphParser" as Parser component "KnowledgeGraphRenderer" as Renderer component "PlantumlService (validasi + rendering PNG)" as PS collections "diagram/graf-pengetahuan (.puml + .png)" as Output Développeur --> Graphify : graphify . --no-viz Graphify --> KGJSON : extrait la structure\ndu code source Développeur --> Plugin : ./gradlew generateKnowledgeGraphDiagram Plugin --> Parser : parse(graph.json) Parser --> Plugin : KnowledgeGraph\n(noeuds + arêtes + communautés) Plugin --> Renderer : render(graph, filters) Renderer --> Plugin : code PlantUML\ndéterministe Plugin --> PS : validateSyntax + generateImage PS --> Output : .puml + .png note bottom of Plugin Pipeline DÉTERMINISTE Aucun appel LLM Résultat reproductible end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dua perintah. Itu saja.</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>Hasil? Berkas`.puml` et <code>.png`di dalam`diagrams/knowledge-graph/</code>, yang tercatat dalam Git, selalu terkini dengan kode.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_1_menginstal_graphify_dan_mengekstrak_knowledge_graph">Langkah 1: Menginstal Graphify dan mengekstrak Knowledge Graph</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_instalasi">Instalasi</h3> <div class="paragraph"> <p>Graphify adalah alat Python yang menganalisis codebase Anda dan membangun grafik pengetahuan terstruktur :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Méthode recommandée uv tool install graphifyy && graphify install --platform opencode # Alternative avec pip pip install graphifyy && graphify install --platform opencode</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_mengatur_pengecualian">Mengatur pengecualian</h3> <div class="paragraph"> <p>Buat sebuah file`.graphifyignore`di root proyek untuk mengecualikan file-file yang bukan bagian dari logika bisnis:</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="_ekstrak_knowledge_graph">Ekstrak Knowledge Graph</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">graphify . --no-viz</code></pre> </div> </div> <div class="paragraph"> <p>Bendera`--no-viz`melewati pembuatan HTML (tidak berguna dalam pipeline Gradle). Hasilnya adalah sebuah file.`graphify-out/graph.json`berisi :</p> </div> <div class="ulist"> <ul> <li> <p><strong>simpul</strong>: kelas, fungsi, file — dengan tipe dan komunitas mereka</p> </li> <li> <p><strong>rusuk</strong>: relasi antara node (EXTRACTED dari kode, INFERRED oleh LLM)</p> </li> <li> <p><strong>Komunitas</strong>: kelompokan otomatis dari node-node yang terhubung</p> </li> </ul> </div> <div class="listingblock"> <div class="title">Contoh 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>Kode sumber (<code>.kt</code>, <code>.java</code>) dianalisis secara lokal oleh tree-sitter,<strong>tanpa banding LLM</strong>. Hanya file dokumentasi (<code>.adoc</code>, <code>.md</code>) memerlukan panggilan LLM untuk ekstraksi semantik. Jadi`--update`pada kode Kotlin hampir seketika.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_2_plugin_gradle_mengubah_knowledge_graph_menjadi_plantuml">Langkah 2 : plugin Gradle mengubah Knowledge Graph menjadi PlantUML</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_pipa">Arsitektur pipa</h3> <div class="paragraph"> <p>Plugin`com.cheroliv.plantuml`mengintegrasikan sebuah tugas`generateKnowledgeGraphDiagram`python print(" yang mentransformasi", end='')`graph.json`dalam diagram PlantUML dengan cara<strong>sepenuhnya deterministik</strong>:</p> </div> <div class="listingblock"> <div class="content"> <pre>@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 "graphify-out/graph.json" as JSON G -> Task : execute Task -> JSON : read Task -> Parser : parse(graph.json) Parser --> Task : KnowledgeGraph\n(noeuds + arêtes + communautés) Task -> Renderer : render(graph, filters) Renderer --> Task : code PlantUML\n(déterministe) Task -> PS : validateSyntax(plantumlCode) alt syntaxe valide Task -> PS : generateImage → .png else syntaxe invalide Task -> Task : save .puml avec warning end @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_komponen_internal">Komponen internal</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">Komponen</th> <th class="tableblock halign-left valign-top">Peran</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">mengurai`graph.json`— mendukung 3 format : graphify asli (<code>nodes</code>+<code>links</code>), legacy (<code>communities</code>), flat. Menyelesaikan IDs numerik menjadi label.</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">Transformaskan secara deterministik sebuah`KnowledgeGraph`dalam kode PlantUML. Kelompok berdasarkan tipe, komunitas di paket, legenda otomatis.</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">Tugas Gradle yang mengorakstratkan: parse → render → validate → PNG. Dapat dikonfigurasi melalui properti Gradle.</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">Model data:`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">Validasi sintaksis + rendering PNG (digunakan kembali oleh semua tugas plugin).</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_aturan_rendering">Aturan rendering</h3> <div class="paragraph"> <p>Perender menerapkan konvensi visual deterministik:</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">Jenis tepi</th> <th class="tableblock halign-left valign-top">Notasi PlantUML</th> <th class="tableblock halign-left valign-top">Arti</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">diekstrak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>-→</code>(garis penuh, hitam)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relasi diekstrak dari kode sumber (kepastian)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">disimpulkan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>..></code>(garis titik-titik)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Relasi yang disimpulkan oleh LLM (skor kepercayaan)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">AMBIGUOUS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>--x</code>(garis titik merah)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hubungan ambigu (perlu diperiksa)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Komunitas dirender seperti paket PlantUML dengan palet warna otomatis.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_3_penggunaan_sehari_hari">Langkah 3: Penggunaan sehari-hari</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagram_lengkap">Diagram lengkap</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>Keluaran :`diagrams/knowledge-graph/knowledge-graph-full.puml`+<code>.png</code></p> </div> </div> <div class="sect2"> <h3 id="_filter_berdasarkan_komunitas">Filter berdasarkan komunitas</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="_filter_berdasarkan_jenis_tepi">Filter berdasarkan jenis tepi</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="_filter_menurut_jenis_node_dan_kepercayaan">Filter menurut jenis node dan kepercayaan</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="_direktori_output_khusus">Direktori output khusus</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="_referensi_lengkap_properti">Referensi lengkap properti</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">properti</th> <th class="tableblock halign-left valign-top">default</th> <th class="tableblock halign-left valign-top">Deskripsi</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">(semua)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filter komunitas berdasarkan nama (cocokan substring)</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">(semua)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tipe sisi dipisahkan dengan koma:`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">Ambang kepercayaan minimum untuk tepi</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>(tak terbatas)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jumlah maksimum node yang akan ditampilkan</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>(semua)</em></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jenis simpul dipisahkan dengan koma (contoh`class`, <code>code</code>)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>plantuml.kg.outputDir</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>diagrams/knowledge-graph</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Direktori output untuk file`.puml` et <code>.png</code></p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_seluruh_pipeline_dalam_sebuah_workflow_gradle">Seluruh pipeline dalam sebuah workflow Gradle</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_jenis_workflow">jenis workflow</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam ActivityBackgroundColor #E8F4FD skinparam ActivityDiamondBackgroundColor #FFF3CD skinparam ActivityBorderColor #2C3E50 start partition "EKSTRAKSI" { :graphify . --no-viz; note right: Analyse le code source\ntree-sitter (local, pas de LLM) :graphify-out/graph.json; note right: Noeuds + arêtes\n+ communautés } partition "GENERASI" { :./gradlew generateKnowledgeGraphDiagram; note right: Pipeline déterministe\nparse → render → validate → PNG if (Filtres actifs ?) then (Oui) :Appliquer filtres\n(community, edgeTypes,\nmaxNodes, nodeTypes); else (Non) :Diagramme complet; endif :diagrams/knowledge-graph/\nknowledge-graph-full.puml\nknowledge-graph-full.png; } partition "INTEGRASI" { :git add diagrams/knowledge-graph/; :git commit; note right: Diagrammes versionnés\ntoujours à jour avec le code } stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_integrasi_dalam_siklus_pengembangan">Integrasi dalam siklus pengembangan</h3> <div class="paragraph"> <p>Pipeline ini terintegrasi secara alami ke dalam tahap-tahap kunci dari pengembangan :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE state "Pengembangan" as dev state "Ekstraksi graphify . --no-viz" as extract state "Generasi ./gradlew generateKnowledgeGraphDiagram" as generate state "Commit diagram versi" as commit [*] --> dev dev --> extract : Code modifié extract --> generate : graph.json à jour generate --> commit : .puml + .png générés commit --> dev : Diagrammes dans le repo note right of extract Quasi instantané sur du code Kotlin (tree-sitter, pas de LLM) end note note right of generate Déterministe Pas de LLM Résultat reproductible end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pembaruan_inkremental">Pembaruan inkremental</h3> <div class="paragraph"> <p>Ketika kode berubah, kita tidak membangun kembali seluruh grafik dari nol:</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`hanya mengekstrak kembali file yang telah dimodifikasi (terdeteksi oleh SHA256 di`graphify-out/cache/</code>). Pada kode Kotlin, ini hampir instan karena tree-sitter bekerja secara lokal tanpa panggilan LLM.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dogfooding_plugin_mendokumentasikan_dirinya_sendiri">Dogfooding : plugin mendokumentasikan dirinya sendiri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin PlantUML ada untuk mengubah prompt menjadi diagram. Dia juga dapat mengubah Knowledge Graph dari codebase <em>propre</em>-nya menjadi diagram dokumentasi. Ini adalah <em>dogfooding</em> : plugin mengonsumsi layanan sendiri.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "pipeline normal (pengguna → diagram)" as normal { [Fichier .prompt] as prompt [LlmService\n+ ApiKeyPool] as llm1 [ProcessPlantumlPromptsTask] as task1 [Diagramme PNG] as out1 prompt --> task1 task1 --> llm1 llm1 --> out1 } package "Pipeline Knowledge Graph (deterministis, tanpa LLM)" as kg { [graphify-out/graph.json] as kgjson [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantumlService] as ps [Diagramme PNG\n(documentation du plugin)] as out2 kgjson --> parser parser --> renderer renderer --> ps ps --> out2 } package "Pipeline Dogfooding (LLM → dokumentasi plugin)" as dogfood { [GraphifyPromptAdapter] as gpa [Fichiers .prompt\nauto-générés] as auto_prompt [LlmService\n+ ApiKeyPool] as llm2 [ProcessPlantumlPromptsTask] as task2 [Diagramme PNG\n(documentation LLM)] as out3 kgjson --> gpa gpa --> auto_prompt auto_prompt --> task2 task2 --> llm2 llm2 --> out3 } note "Sama LlmService, sama ApiKeyPool, sama PlantumlService — TIDAK ADA duplikasi" as N @enduml</pre> </div> </div> <div class="paragraph"> <p>Tugas Gradle terkait :</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">Tugas</th> <th class="tableblock halign-left valign-top">LLM ?</th> <th class="tableblock halign-left valign-top">Keterangan</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">Tidak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mentransformasi`graph.json`en PlantUML (determinis)</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">Ya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menghasilkan beberapa`.prompt`dari grafik, mereka memprosesnya melalui 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="_mengapa_itu_deterministik_dan_mengapa_itu_penting">Mengapa itu deterministik (dan mengapa itu penting)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Titik kunci pipeline`generateKnowledgeGraphDiagram` : <strong>Dia tidak memanggil LLM apa pun</strong>. Transformasi`graph.json`PlantUML adalah sebuah fungsi murni.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Pipeline Determinis (generateKnowledgeGraphDiagram)" as det { [graph.json] as json [KnowledgeGraphParser] as parser [KnowledgeGraphRenderer] as renderer [PlantUML code] as puml json --> parser : parse parser --> renderer : KnowledgeGraph renderer --> puml : render (fonction pure) } rectangle "Pipeline LLM (processPlantumlPrompts)" as llm { [.prompt] as prompt [LlmService] as llmSvc [ChatModel] as model [PlantUML code] as puml2 prompt --> llmSvc llmSvc --> model : API call model --> puml2 : réponse non-déterministe } note bottom of det Même entrée → même sortie Pas de latence réseau Pas de coût en tokens Reproductible en CI end note note bottom of llm Même entrée → sortie variable Latence réseau (1-5s) Coût en tokens Nécessite une clave API end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Manfaat konkret:</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">Keuntungan</th> <th class="tableblock halign-left valign-top">Dampak</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Reproduksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">bahkan`graph.json`→ diagram yang sama. Tepat. Setiap kali.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya nol</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tanpa panggilan LLM = tanpa token = tanpa tagihan API</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Latensi nol</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Parse + render membutuhkan ~100ms, bukan 1-5 detik.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kompatibel CI</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak perlu kunci API. Tidak ada tes flaky karena respons LLM yang bervariasi.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">dapat diberi versi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Le <code>.puml`yang dihasilkan adalah teks. Kita bisa`diff</code>, reviewer dalam PR, versikan di Git.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_diagram_pipelinenya_sendiri">Diagram pipelinenya sendiri</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menutup lingkaran, berikut adalah diagram pipelining seperti yang akan dihasilkan oleh plugin :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE participant "Pengembang" as Dev participant "Gradle" as G participant "GenerateKnowledgeGraphDiagramTask" as Task participant "KnowledgeGraphParser" as Parser participant "KnowledgeGraphRenderer" as Renderer participant "PlantumlService" as PS collections "graphify-out/graph.json" as JSON collections "diagrams/knowledge-graph/" as Out Dev -> G : ./gradlew generateKnowledgeGraphDiagram G -> Task : execute Task -> JSON : read Task -> Parser : parse(graph.json) Parser --> Task : KnowledgeGraph alt filtres actifs Task -> Task : appliquer filtres\n(community, edgeTypes, maxNodes…) end Task -> Renderer : render(graph, filters) Renderer --> Task : code PlantUML Task -> PS : validateSyntax() alt valide Task -> PS : generateImage() PS --> Out : .puml + .png else invalide Task -> Out : .puml (avec warning) end @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_integrasi_dalam_tata_kelola_proyek">Integrasi dalam tata kelola proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam proyek kami, pipeline ini terintegrasi dalam strategi pengelolaan konteks EAGER/LAZY untuk agen IA. Knowledge Graph menggantikan dokumentasi arsitektur manual dengan sebuah grafi terstruktur yang dapat di-query dan diperbarui otomatis.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "EAGER\n(selalu terisi)" 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 — Strategi\n(atas permintaan)" as lazy_strat { [Méthodologies] as meth [Archives sessions] as sessions } package "LAZY — Graphify\n(permintaan terarah)" as lazy_graph { [graph.json] as gj [Queries\n(query/path/explain)] as queries } package "Pipeline PlantUML (oto-generate)" as puml { [generateKnowledgeGraphDiagram] as kgTask [generateDiagramDocs] as ddTask [Diagrammes PNG] as diagrams } Agent --> eager : Lit en début de session Agent ..> lazy_strat : Charge si type détecté Agent ..> lazy_graph : Query si besoin structurel kgTask --> diagrams : Déterministe ddTask --> diagrams : Via LLM note right of gr Condensé du Knowledge Graph God nodes + communautés Remplace ECOSYSTEM_OVERVIEW (225 lignes → 50 lignes) end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Perkawinan dua sistem adalah komplementer:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Strategi mengelola QUAND dan COMMENT</strong>— tata kelola, alur kerja, pengarsipan</p> </li> <li> <p><strong>Graphify mengelola APA dan DI MANA</strong>— struktur kode, relasi, kueri yang ditargetkan</p> </li> </ul> </div> <div class="paragraph"> <p>(Empty) Strategi sesi mengelola<strong>kapan</strong> et le <strong>bagaimana</strong>(tata kelola, workflow, batas), Graphify mengelola<strong>APA</strong> et le <strong>DI MANA</strong>(struktur kode, hubungan, kueri target). Pipeline PlantUML mengelola<strong>DENGAN APA</strong>(diagram deterministik, berisi versi, selalu terkini). <em>__</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_penyiapan_checklist_dalam_5_menit">Penyiapan: checklist dalam 5 menit</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">Tahap</th> <th class="tableblock halign-left valign-top">pesanan</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">Instal Graphify</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>uv tool install graphifyy</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">2</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengkonfigurasi pengecualian</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Membuat`.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">Mengekstrak Knowledge Graph</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">Menghasilkan diagram</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">Menyimpan hasil</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>git add diagrams/knowledge-graph/</code></p></td> </tr> </tbody> </table> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Script complet en 5 commandes uv tool install graphifyy cat > .graphifyignore << 'EOF' *-context.yml *.env build/ .gradle/ EOF graphify . --no-viz ./gradlew generateKnowledgeGraphDiagram git add graphify-out/GRAPH_REPORT.adoc graphify-out/graph.json diagrams/knowledge-graph/</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_penjebakan_dan_mitigasi">Penjebakan dan mitigasi</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">jebakan</th> <th class="tableblock halign-left valign-top">Deskripsi</th> <th class="tableblock halign-left valign-top">mitigasi</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Grafik terlalu padat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Proyek besar menghasilkan ratusan node yang tidak dapat dibaca</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menggunakan`-Pplantuml.kg.maxNodes=30`dan memfilter berdasarkan komunitas</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengecualian terlalu luas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Terlalu banyak file di`.graphifyignore`mengurangi nilai grafik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mulai dengan mengecualikan hanya credentials dan build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Arah panah</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sisi-sisi INFERRED dapat memiliki arah yang ambigu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Filter berdasarkan`-Pplantuml.kg.edgeTypes=EXTRACTED`hanya untuk hubungan tertentu</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Grafik usang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kode berubah tetapi grafik tidak dibangun ulang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menggunakan`graphify . --update`secara teratur atau hook git`graphify hook install`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Biaya diperbarui</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pembaruan inkremental hampir gratis (tree-sitter local)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hanya dokumen (<code>.adoc</code>) mengonsumsi token LLM</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_apa_yang_kita_dapatkan_pada_akhirnya">Apa yang kita dapatkan pada akhirnya</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "SEBELUM" as avant { card "Diagram yang digambar secara tangan Selalu usang Tidak ada yang memperbarui mereka" as av1 #FDEDEC } rectangle "setelah" as apres { card "Diagram yang dihasilkan secara otomatis Selalu terkini dengan kode Di-versionkan di Git Deterministik dan dapat direproduksi" as ap1 #E8F8E8 } avant --> apres : graphify . --no-viz\n+ ./gradlew generateKnowledgeGraphDiagram @enduml</pre> </div> </div> <div class="paragraph"> <p>Manfaat konkret :</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">Keuntungan</th> <th class="tableblock halign-left valign-top">Detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Dokumentasi selalu terkini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Diagram mencerminkan kode saat ini, bukan snapshot manual</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Upaya pemeliharaan nol</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Diagram diagram diregenerasikan setiap build</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengurangan utang teknis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak perlu lagi memelihara diagram secara manual</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Konteks visual untuk yang baru</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Seorang pengembang baru memahami arsitektur dengan melihat diagram</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Potensi penyesuaian halus</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pasangan (subgraf → diagram) adalah contoh pelatihan AI</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Validasi otomatis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`PlantumlService.validateSyntax()`Periksa setiap diagram yang dihasilkan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Onboarding cepat</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">5 diagram = tampilan lengkap dari arsitektur</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><em>mengapa</em> : diagram selalu terkini. <em>bagaimana</em> : dua perintah dalam pipeline Gradle.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tautan">tautan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/nicholasgasior/graphify">Graphify di 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">Tips super dari perintah fg</a>— artikel sebelumnya tentang workflow terminal</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0104_fg_command_super_tips_post.html Sat, 18 Apr 2026 00:00:00 +0000 blog/2026/0104_fg_command_super_tips_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_masalah_terminal_yang_sibuk">Masalah: terminal yang sibuk</a></li> <li><a href="#_tiga_perintah_esensial">tiga perintah esensial</a> <ul class="sectlevel2"> <li><a href="#_ctrlz_menangguhkan_sigtstp">Ctrl+Z — Menangguhkan (SIGTSTP)</a></li> <li><a href="#_fg_membawa_ke_depan">fg — Membawa ke depan</a></li> <li><a href="#_bg_lanjutkan_di_latar_belakang">bg — Lanjutkan di latar belakang</a></li> <li><a href="#_jobs_daftar_pekerjaan_shell">jobs — Daftar pekerjaan shell</a></li> </ul> </li> <li><a href="#_skenario_1_build_yang_panjang">Skenario 1: Build yang panjang</a> <ul class="sectlevel2"> <li><a href="#_langkah_demi_langkah">langkah demi langkah</a></li> </ul> </li> <li><a href="#_skenario_2_editor_yang_dilapkan">Skenario 2: editor yang dilapkan</a></li> <li><a href="#_scenario_3_proses_opencode_ditangguhkan">Scenario 3 : Proses opencode ditangguhkan</a></li> <li><a href="#_skenario_4_mengelola_beberapa_pekerjaan_secara_bersamaan">Skenario 4: Mengelola beberapa pekerjaan secara bersamaan</a> <ul class="sectlevel2"> <li><a href="#_ringkasan_perintah_pekerjaan">Ringkasan perintah pekerjaan</a></li> </ul> </li> <li><a href="#_perbedaan_antara_fg_bg_ctrlz_ctrlc_dan">Perbedaan antara fg, bg, Ctrl+Z, Ctrl+C dan &</a></li> <li><a href="#_siklus_hidup_lengkap_dari_sebuah_pekerjaan">Siklus hidup lengkap dari sebuah pekerjaan</a></li> <li><a href="#_tips_lanjut">Tips lanjut</a> <ul class="sectlevel2"> <li><a href="#_fg_dengan_pekerjaan_paling_baru_dan_pertukaran">fg dengan pekerjaan paling baru dan pertukaran</a></li> <li><a href="#_mengerjakan_pekerjaan_dengan_baik">Mengerjakan pekerjaan dengan baik</a></li> <li><a href="#_disown_melepaskan_dari_shell">disown : melepaskan dari shell</a></li> <li><a href="#_gabungkan_dengan_nohup_untuk_proses_proses_yang_lama">Gabungkan dengan nohup untuk proses-proses yang lama</a></li> </ul> </li> <li><a href="#_jebakan_dan_kesalahan_umum">Jebakan dan kesalahan umum</a> <ul class="sectlevel2"> <li><a href="#_mengalirkan_ctrlz_dan_ctrlc">Mengalirkan Ctrl+Z dan Ctrl+C</a></li> <li><a href="#_pekerjaan_pekerjaan_adalah_lokal_untuk_shell">Pekerjaan-pekerjaan adalah lokal untuk shell</a></li> <li><a href="#_pekerjaan_tidak_bertahan_saat_shell_ditutup">Pekerjaan tidak bertahan saat shell ditutup</a></li> <li><a href="#_proses_interaktif_dan_fg">Proses interaktif dan fg</a></li> </ul> </li> <li><a href="#_diagram_ringkasan">Diagram Ringkasan</a></li> <li><a href="#_mengapa_fg_dianggap_kurang">Mengapa fg dianggap kurang?</a></li> <li><a href="#_catatan_teknis_sinyal">Catatan teknis : sinyal</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 10 minutes</div> <p>Anda melempar`./gradlew build`, terminal terblokir selama 3 menit, dan Anda perlu melakukan sesuatu yang lain <em>menunggu</em> ? Tidak perlu membuka tab baru.`Ctrl+Z`menangguhkan proses,`fg`Dia mengembalikannya tepat di tempat Anda meninggalkan. Ini adalah tips Unix yang paling kurang dihargai dalam kehidupan sehari-hari seorang pengembang.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">toc</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_terminal_yang_sibuk">Masalah: terminal yang sibuk</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setiap developer telah menjalani situasi ini:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building...</code></pre> </div> </div> <div class="paragraph"> <p>Terminal terblokir. Anda tidak dapat lagi mengetik perintah apa pun. Dan Anda perlu melihat sebuah file, menjalankan sebuah`git status`, atau memeriksa port yang sedang digunakan.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Terminal" as term participant "Gradle\n( proses )" as gradle dev -> term : ./gradlew build term -> gradle : Lance le build gradle -> term : Occupe le terminal\n(pas de prompt) dev -> term : veut taper une commande term --> dev : ❌ Terminal bloqué note right of dev Le développeur est paralysé pendant toute la durée du build end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Kebanyakan pengembang membuka terminal baru. Namun ada solusi yang lebih elegan, lebih cepat, dan bawaan: manajemen pekerjaan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tiga_perintah_esensial">tiga perintah esensial</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ctrlz_menangguhkan_sigtstp">Ctrl+Z — Menangguhkan (SIGTSTP)</h3> <div class="paragraph"> <p>`Ctrl+Z`mengirim sinyal`SIGTSTP`ke proses latar depan. Prosesnya adalah<strong>ditangguhkan</strong>— tidak terbunuh — dan terminal kembali mendapatkan prompt-nya.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building... ^Z [1]+ Stoppé ./gradlew build $</code></pre> </div> </div> <div class="paragraph"> <p>Angka di antara tanda kurung`[1]`adalah<strong>nomor pekerjaan</strong>. Le `+`menunjukkan pekerjaan default</p> </div> </div> <div class="sect2"> <h3 id="_fg_membawa_ke_depan">fg — Membawa ke depan</h3> <div class="paragraph"> <p>`fg`Memulihkan job yang dijeda ke latar depan. Proses melanjutkan tepat dari tempat ia berhenti.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ fg ./gradlew build > Building... (reprend où il en était)</code></pre> </div> </div> <div class="paragraph"> <p>Dengan nomor pekerjaan spesifik:</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_lanjutkan_di_latar_belakang">bg — Lanjutkan di latar belakang</h3> <div class="paragraph"> <p>`bg`lanjutkan proses tanpa memblokir terminal. Ideal untuk build yang panjang.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ bg [1]+ ./gradlew build & $</code></pre> </div> </div> <div class="paragraph"> <p>Le `&`pada akhirnya berarti bahwa proses berjalan di latar belakang.</p> </div> </div> <div class="sect2"> <h3 id="_jobs_daftar_pekerjaan_shell">jobs — Daftar pekerjaan shell</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>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif state "Depan (terminal diblokir)" as fg #LightCoral state "Ditangguhkan\n(Ctrl+Z)" as stopped #LightYellow state "Latar belakang\n(bg)" as bg_ #LightGreen [*] --> fg : Lance une commande fg --> stopped : Ctrl+Z\n(SIGTSTP) stopped --> fg : fg\nreprend en avant-plan stopped --> bg_ : bg\nreprend en arrière-plan bg_ --> fg : fg\nramène en avant-plan fg --> [*] : Commande terminée note right of stopped Le processus est figé mais _pas_ tué end note note left of bg_ Le terminal est libre le build continue end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_skenario_1_build_yang_panjang">Skenario 1: Build yang panjang</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah kasus penggunaan yang paling umum. Anda menjalankan build Gradle, terminal terblokir, dan Anda perlu melakukan hal lain.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "Terminal" as term participant "Gradle" as gradle database "kondisi proses" as state dev -> term : ./gradlew build term -> gradle : Lance le build gradle -> state : En cours (FG) dev -> term : Ctrl+Z term -> state : Suspendu (job [1]) term --> dev : Prompt libre $ dev -> term : git status term --> dev : working tree clean dev -> term : fg term -> state : Reprend (FG) gradle --> dev : Build réussi ✓ note right of state Le processus Gradle n'a jamais été tué Il reprend exactement où il s'était arrêté end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_langkah_demi_langkah">langkah demi langkah</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build > Building... ^Z [1]+ Stoppé ./gradlew build $ git status On branch main nothing to commit, working tree clean $ fg ./gradlew build > Building... BUILD SUCCESSFUL in 2m 34s</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_skenario_2_editor_yang_dilapkan">Skenario 2: editor yang dilapkan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Anda berada di`vim`, Anda perlu membuka file lain <em>tanpa</em> meninggalkan`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>Tetapi ini berat. Dengan`Ctrl+Z`, ini langsung :</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="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "semangat" as vim participant "Kerang" as shell dev -> vim : édition en cours dev -> vim : Ctrl+Z vim -> shell : Suspendu (job [1]) dev -> shell : cat autre_fichier.txt shell --> dev : contenu du fichier dev -> shell : fg shell -> vim : Reprend (job [1]) vim --> dev : Curseur exactement\nà la même position note right of vim vim restaure intégralement l'état : position du curseur, buffer, undo stack end note @enduml</pre> </div> </div> <div class="paragraph"> <p></think> </think> (No content to translate)<code>vim`mengembalikan dengan sempurna keadaan setelah sebuah`fg</code>: posisi kursor, isi buffer, riwayat pembatalan — semua dipertahankan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_scenario_3_proses_opencode_ditangguhkan">Scenario 3 : Proses opencode ditangguhkan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah skenario yang memotivasi artikel ini. Anda menggunakan`opencode`(alat CLI untuk mengendalikan LLM pada kode Anda), dan prosesnya ditangguhkan.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam componentStyle rectangle actor Développeur as dev participant "opcode\n(agen LLM)" as agent participant "Shell" as shell participant "git" as git dev -> agent : Session active agent -> agent : Tour de parole\ndu LLM en cours note over agent Ctrl+Z arrive en plein milieu d'une analyse de code end note dev -> agent : Ctrl+Z agent -> shell : Suspendu (job [1]) dev -> git : git diff git --> dev : changements visibles dev -> shell : fg shell -> agent : Reprend (job [1]) agent --> dev : Reprend exactement\nl'analyse en cours note right of agent Aucune perte de contexte Le LLM reprend sa réponse exactement où il en était end note @enduml</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ opencode # ... session en cours, LLM analyse le code ... ^Z [1]+ Stoppé opencode $ git diff HEAD~1 # vérifier les changements récents $ fg opencode # Le LLM reprend là où il s'était arrêté</code></pre> </div> </div> <div class="paragraph"> <p>Keuntungannya adalah ganda:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Tidak ada kehilangan konteks</strong>: sesi LLM, riwayat percakapan, file yang terbuka — semuanya dipertahankan</p> </li> <li> <p><strong>Tidak ada restart</strong>: tidak perlu menjalankan ulang opencode, tidak perlu memuat ulang konteks, tidak perlu menjelaskan ulang masalah kepada LLM</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_skenario_4_mengelola_beberapa_pekerjaan_secara_bersamaan">Skenario 4: Mengelola beberapa pekerjaan secara bersamaan</h2> <div class="sectionbody"> <div class="paragraph"> <p><code>fg</code> et `bg`Menerima nomor pekerjaan untuk menargetkan proses tertentu ketika beberapa proses ditangguhkan.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ vim config.yml ^Z [1]+ Stoppé vim config.yml $ ./gradlew test ^Z [2]+ Stoppé ./gradlew test $ htop ^Z [3]+ Stoppé htop $ jobs [1] Stoppé vim config.yml [2]- Stoppé ./gradlew test [3]+ Stoppé htop $ fg %2 ./gradlew test # Le build reprend en avant-plan $ bg %3 [3] htop & # htop reprend en arrière-plan</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Pekerjaan ditangguhkan" as jobs #LightYellow { card "[1] vim config.yml" as j1 card "[2] ./gradlew test" as j2 card "[3] htop" as j3 } rectangle "Tindakan" as actions #LightGreen { card "fg %2\n→ latar depan" as a1 card "bg %3\n→ arrière-plan" as a2 card "fg %1\n→ latar depan" as a3 } jobs --> actions : fg/bg + numéro de job actions --> j2 : Reprend actions --> j3 : En arrière-plan note bottom of jobs Chaque job conserve son état exact entre les suspend/resume end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_ringkasan_perintah_pekerjaan">Ringkasan perintah pekerjaan</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">Pesanana</th> <th class="tableblock halign-left valign-top">Efek</th> <th class="tableblock halign-left valign-top">Contoh</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">Jeda proses latar depan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengiriman`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">Mengambil kembali pekerjaan default ke latar depan</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">Lanjutkan pekerjaan n di latar depan</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">Melanjutkan job default di latar belakang</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">Meneruskan pekerjaan n di latar belakang</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">Daftar pekerjaan shell saat ini</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>jobs -l</code>(dengan 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">Selesaikan pekerjaan 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="_perbedaan_antara_fg_bg_ctrlz_ctrlc_dan">Perbedaan antara fg, bg, Ctrl+Z, Ctrl+C dan &</h2> <div class="sectionbody"> <div class="paragraph"> <p>Banyak pengembang bingung dengan mekanisme ini. Ini adalah penjelasan yang penting.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "**Ctrl+Z**\nSIGTSTP" as ctrlz #LightYellow { card "Menjeda proses (masih berada di memori) Dapat digunakan dengan fg/bg" as c1 } rectangle "**Ctrl+C**\nSIGINT" as ctrlc #LightCoral { card "Bunuh proses (Tidak ada kemungkinan kembali) Kehilangan seluruh status" as c2 } rectangle "**& ** (latar belakang)" as ampersand #LightGreen { card "Mulai langsung di latar belakang Terminal gratis segera" as c3 } rectangle "**fg** (lat depan)" as fg_ #SkyBlue { card "Bawa pekerjaan ditangguhkan di latar depan Terminal sibuk" as c4 } rectangle "**bg** (lat belakang)" as bg_ #Lavender { card "Mengambil kembali pekerjaan ditangguhkan di latar belakang Terminal bebas" as c5 } ctrlz -right-> fg_ : fg pour reprendre ctrlz -right-> bg_ : bg pour continuer\nen arrière-plan ctrlc -right-> c2 : Pas de retour\nprocessus tué note bottom of ctrlz Le processus est **figé** mais **pas tué** end note note bottom of ampersand Alternative : lancer ./gradlew build & directement en arrière-plan end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 16.6666%;"> <col style="width: 33.3333%;"> <col style="width: 16.6666%;"> <col style="width: 33.3335%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Pintasan/Perintah</th> <th class="tableblock halign-left valign-top">sinyal</th> <th class="tableblock halign-left valign-top">Efek</th> <th class="tableblock halign-left valign-top">Kembali?</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">Menjeda proses (beku, di memori)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ya :`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">Matikan proses (selesai)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak : proses dihancurkan</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">Membunuh proses + core dump</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak: proses dihancurkan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>commande &</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">—</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Jalankan langsung di latar belakang</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`fg`untuk membawakannya kembali ke lat depan</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`adalah<strong>non destruktif</strong>. Prosesnya beku seperti yang ada, dalam memori. Anda dapat melanjutkan segera dengan`fg</code>. Ini adalah <em>jeda</em>, bukan <em>berhenti</em>. </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_siklus_hidup_lengkap_dari_sebuah_pekerjaan">Siklus hidup lengkap dari sebuah pekerjaan</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif title Siklus hidup lengkap dari pekerja shell state "tidak ada" as none state "Foreground\n(menempati terminal)" as foreground #LightCoral state "Dijeda\n(Ctrl+Z / SIGTSTP)" as suspended #LightYellow state "Latar belakang\n(bg atau &)" as background #LightGreen state "Selesai\n(exit code 0)" as done #LightGray [*] --> none none --> foreground : tape une commande foreground --> suspended : Ctrl+Z foreground --> done : fin normale suspended --> foreground : fg suspended --> background : bg suspended --> done : kill %n background --> foreground : fg background --> done : fin normale\n(en arrière-plan) background --> suspended : Ctrl+Z\n(si fg puis Ctrl+Z) done --> [*] note right of suspended L'état suspendu est le pivot de tout le système de jobs end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tips_lanjut">Tips lanjut</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_fg_dengan_pekerjaan_paling_baru_dan_pertukaran">fg dengan pekerjaan paling baru dan pertukaran</h3> <div class="paragraph"> <p><code>fg`tanpa argumen mengembalikan pekerjaan yang ditandai</code>+<code>(terbaru). Anda juga dapat menggunakan</code>%-`untuk menargetkan pekerjaan sebelumnya :</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="_mengerjakan_pekerjaan_dengan_baik">Mengerjakan pekerjaan dengan baik</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="_disown_melepaskan_dari_shell">disown : melepaskan dari shell</h3> <div class="paragraph"> <p><code>disown`Menghapus satu pekerjaan dari tabel pekerjaan shell. Proses terus berjalan tetapi tidak dapat lagi dikembalikan dengan`fg</code></think> (empty output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ ./gradlew build & [1] 12345 $ disown %1 # Le processus continue mais n'est plus lié au shell # Ça survives à la fermeture du terminal</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_gabungkan_dengan_nohup_untuk_proses_proses_yang_lama">Gabungkan dengan nohup untuk proses-proses yang lama</h3> <div class="paragraph"> <p>Agar proses dapat bertahan saat terminal ditutup:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ nohup ./gradlew build & [1] 12345 $ disown %1 # Le build continue même si vous fermez le terminal</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "fg" as fg_ #SkyBlue { card "Bawa pekerjaan terbaru (+)" as f1 card "Sasarkan pekerjaan\nspesifik: fg %n" as f2 card "Beralih : fg %-" as f3 } rectangle "membunuh %n" as kill_ #LightCoral { card "SIGTERM (bersih)" as k1 card "SIGKILL -9 (paksa)" as k2 } rectangle "mengalakkan" as disown #Lavender { card "Lepaskan dari shell (Bertahan saat putus koneksi)" as d1 } rectangle "nohup + &" as nohup_ #LightGreen { card "Proses yang diimmunisasi terhadap SIGHUP (masih berjalan saat penutupan terminal)" as n1 } fg_ -right-> kill_ : si faut\nterminer kill_ -right-> disown_ : ou détacher nohup_ -left-> fg_ : fg ramène en\navant-plan note bottom of disown_ Après disown, fg ne peut plus ramener le job end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jebakan_dan_kesalahan_umum">Jebakan dan kesalahan umum</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_mengalirkan_ctrlz_dan_ctrlc">Mengalirkan Ctrl+Z dan Ctrl+C</h3> <div class="paragraph"> <p>Ini adalah kesalahan yang paling sering.`Ctrl+C`menghentikan proses`Ctrl+Z`Dia menangguhkannya. Jika Anda menekan`Ctrl+C`Secara refleks, seluruh keadaan hilang — file terbuka, sesi LLM, build sedang berlangsung.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Ctrl+Z (SIGTSTP)" as z #LightGreen { card "Proses yang membeku di memori" as z1 card "fg membawanya kembali utuh" as z2 card "Tidak ada kerugian" as z3 } rectangle "Ctrl+C (SIGINT)" as c #LightCoral { card "Proses selesai" as c1 card "Kondisi hilang secara permanen" as c2 card "Tidak dapat dikembalikan" as c3 } note bottom of z Pause → Reprendre end note note bottom of c Kill → Perdu end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pekerjaan_pekerjaan_adalah_lokal_untuk_shell">Pekerjaan-pekerjaan adalah lokal untuk shell</h3> <div class="paragraph"> <p><code>jobs</code>, <code>fg</code> et `bg`Berfungsi hanya di shell yang meluncurkan proses-proses tersebut. Jika Anda membuka terminal baru, Anda tidak akan melihat pekerjaan dari yang lain.</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>Untuk melihat proses system-wide, gunakan`ps` ou <code>htop</code>(empty)</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="_pekerjaan_tidak_bertahan_saat_shell_ditutup">Pekerjaan tidak bertahan saat shell ditutup</h3> <div class="paragraph"> <p>Jika Anda menutup terminal, semua pekerja yang ditangguhkan atau yang berjalan di latar belakang akan dihancurkan. Agar sebuah proses tetap hidup, gunakan`nohup`+<code>disown</code> :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ nohup ./gradlew build & [1] 12345 $ disown %1 # Fermer le terminal → le build continue</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_proses_interaktif_dan_fg">Proses interaktif dan fg</h3> <div class="paragraph"> <p>Beberapa program interaktif tidak berjalan baik setelah satu`Ctrl+Z`+<code>fg</code>. Ini jarang tetapi terjadi :</p> </div> <div class="ulist"> <ul> <li> <p>Beberapa program yang menggunakan sinyal (vim, htop, less menangani dengan baik`Ctrl+Z`)</p> </li> <li> <p>Program jaringan yang berjalan lama (ssh, opencode) biasanya pulih dengan benar</p> </li> <li> <p>Program yang memodifikasi terminal (ncurses) terkadang dapat meninggalkan terminal dalam keadaan yang tidak terduga</p> </li> </ul> </div> <div class="paragraph"> <p>Jika terminal rusak setelah satu`fg`, ketik :</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="_diagram_ringkasan">Diagram Ringkasan</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 title "fg — Tips yang mengubah semuanya" rectangle "Masalah" as problem #LightCoral { card "Terminal diblokir\noleh proses" as p1 card "Buka sebuah baru terminal = solusi berat" as p2 } rectangle "**Solusi**" as solution #LightGreen { card "Ctrl+Z → menangguhkan" as s1 card "fg → melanjutkan" as s2 card "bg → di latar belakang" as s3 card "jobs → lihat yang ditangguhkan" as s4 } rectangle "**Kelebihan**" as advantages #SkyBlue { card "Tidak ada kehilangan konteks" as a1 card "Tidak ada restart" as a2 card "Satu terminal cukup" as a3 } problem -right-> solution : "Solusi asli\nUnix selama 40 tahun" solution -right-> advantages : "Hasil" 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="_mengapa_fg_dianggap_kurang">Mengapa fg dianggap kurang?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Kebanyakan pengembang modern menemukan`fg`lambat, bahkan tidak pernah. Beberapa alasan :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>IDE menyembunyikan terminal</strong>: VS Code menyediakan terminal terintegrasi, tetapi tab-tab banyak membuat`fg`Terlihat kurang diperlukan</p> </li> <li> <p><strong>Alat grafis mengganti CLI</strong>: manajer file, pemantau sistem, klien Git grafis</p> </li> <li> <p><strong>tmux dan screen</strong>: multiplexer ini menyelesaikan masalah yang sama dengan cara yang berbeda, tapi`fg`lebih sederhana dan selalu tersedia</p> </li> </ol> </div> <div class="paragraph"> <p>Namun,`fg`adalah :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Universal</strong>: ada di semua shell POSIX (bash, zsh, fish…​)</p> </li> <li> <p><strong>Tanpa ketergantungan</strong>: tidak perlu menginstal tmux atau screen</p> </li> <li> <p><strong>seketika</strong>: dua pukulan (<code>Ctrl+Z`lalu`fg</code>) untuk menangguhkan dan melanjutkan</p> </li> <li> <p><strong>Penyimpan konteks</strong>: keadaan proses masih utuh</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif rectangle "Mengapa fg adalah diperkirakan terlalu rendah ?" as why #LightCoral { card "IDE dengan terminal\nmulti-tab" as w1 card "Outils graphiques\nqui remplacent le CLI" as w2 card "tmux/screen\nrésolvent le problème\nautrement" as w3 } rectangle "Mengapa fg adalah lebih baik ?" as superior #LightGreen { card "Universal : bash,\nzsh, fish, sh..." as s1 card "Tanpa ketergantungan: tidak ada instalasi" as s2 card "Dua pukulan: Ctrl+Z lalu fg" as s3 card "Konteks yang terpreservasi :\nnol kehilangan status" as s4 } why -right-> superior : "Kesederhanaan selalu menang" @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_catatan_teknis_sinyal">Catatan teknis : sinyal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk yang penasaran, berikut sinyal yang terlibat:</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">sinyal</th> <th class="tableblock halign-left valign-top">nama</th> <th class="tableblock halign-left valign-top">Dikirim oleh</th> <th class="tableblock halign-left valign-top">Efek</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">Interupsi — menghentikan proses</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">Keluar dengan 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">Berhenti interaktif — menghentikan proses</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=&quot;tableblock"><code>fg</code>/<code>bg</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Continue — melanjutkan proses yang ditangguhkan</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">Penghentian bersih</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">Pengakhiran paksa (tidak dapat diintersep)</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Alur lengkap :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif participant "pengguna" as user participant "cangkang" as shell participant "Proses" as proc user -> shell : Ctrl+Z shell -> proc : SIGTSTP (signal 18) note right of proc : Processus figé\nen mémoire user -> shell : fg shell -> proc : SIGCONT (signal 19) note right of proc : Processus reprend\nen avant-plan user -> shell : bg shell -> proc : SIGCONT (signal 19) note right of proc : Processus reprend\nen arrière-plan user -> shell : Ctrl+C shell -> proc : SIGINT (signal 2) note right of proc : Processus terminé\nétat perdu @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>`fg`Bukanlah sebuah tips yang tidak jelas — ini adalah mekanisme dasar dari Unix shell, yang tersedia sejak tahun 1970-an. Fakta bahwa kebanyakan pengembang mengabaikannya adalah gejala dari jaman kita : IDE dan multiplexer telah menjauhkan kita dari dasar.</p> </div> <div class="paragraph"> <p>Tetapi ketika Anda berada pada server SSH, di terminal minimal, atau sekadar sedang menggunakan`opencode`dan LLM sedang bekerja penuh —<code>Ctrl+Z</code>, <code>fg</code>, <code>bg</code>, `jobs`adalah teman terbaik Anda.</p> </div> <div class="paragraph"> <p><em><em>_ Ctrl+Z menghentikan, fg melanjutkan. Ini adalah pause-play terminal. </em>_</em></p> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><code>man bash</code>— bagian KONTROL PEKERJAAN</p> </li> <li> <p><code>man signal</code>— daftar sinyal POSIX</p> </li> <li> <p><a href="https://www.gnu.org/software/bash/manual/bash.html#Job-Control">Manual Referensi Bash — Kontrol Pekerjaan</a></p> </li> <li> <p><a href="https://man7.org/linux/man-pages/man7/signal.7.html">man 7 signal — sinyal Linux</a></p> </li> <li> <p><a href="https://tldp.org/LDP/abs/html/x312743.htm">Panduan Penyandihan Bash Lanjutan — Pengendalian Pekerja</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0103_vscode_local_install_custom_fonts_post.html Fri, 17 Apr 2026 00:00:00 +0000 blog/2026/0103_vscode_local_install_custom_fonts_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_gambaran_umum_jalur">Gambaran Umum Jalur</a></li> <li><a href="#_mengapa_vs_code_di_home">Mengapa : VS Code di Home</a> <ul class="sectlevel2"> <li><a href="#_masalah_dengan_instalasi_sistem">Masalah dengan instalasi sistem</a></li> <li><a href="#_solusi_instalasi_lokal">Solusi: instalasi lokal</a></li> <li><a href="#_keuntungan_konkret">keuntungan konkret</a></li> </ul> </li> <li><a href="#_sesuaikan_font_menu_utama">Sesuaikan font menu utama</a> <ul class="sectlevel2"> <li><a href="#_temukan">Temukan</a></li> <li><a href="#_tekniknya_patch_css_langsung">Tekniknya: patch CSS langsung</a></li> <li><a href="#_hapus_peringatan_integritas">Hapus peringatan integritas</a></li> </ul> </li> <li><a href="#_menyesuaikan_font_panel_explorer_pertarungan">Menyesuaikan font panel Explorer — pertarungan</a> <ul class="sectlevel2"> <li><a href="#_percobaan_1_sebuah_parameter_yang_tidak_ada">Percobaan 1 : sebuah parameter yang tidak ada</a></li> <li><a href="#_percobaan_2_ekstensi_custom_css_and_js_loader">Percobaan 2 : ekstensi Custom CSS and JS Loader</a></li> <li><a href="#_jebakan_anda_harus_mengaktifkan_ekstensi_setiap_kali">Jebakan: Anda harus mengaktifkan ekstensi setiap kali</a></li> <li><a href="#_percobaan_3_garis_garis_saling_tumpang_tindih">Percobaan 3 : garis-garis saling tumpang tindih</a></li> <li><a href="#_solusi_zoom_pada_kontainer_induk">Solusi: <code>zoom</code> pada kontainer induk</a></li> <li><a href="#_ringkasan_selector_dan_apa_yang_berfungsi">Ringkasan selector dan apa yang berfungsi</a></li> </ul> </li> <li><a href="#_skrip_pembaruan_otomatis">Skrip pembaruan otomatis</a> <ul class="sectlevel2"> <li><a href="#_masalah">Masalah</a></li> <li><a href="#_skrip_vscode_update_sh">Skrip `vscode-update.sh</a></li> </ul> </li> <li><a href="#_berkas_yang_terlibat_gambaran_umum">Berkas yang terlibat — gambaran umum</a></li> <li><a href="#_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</a> <ul class="sectlevel2"> <li><a href="#_penginstalan_di_home_membebaskan_semua">Penginstalan di home membebaskan semua</a></li> <li><a href="#_zoom_font_size_untuk_komponen_daftar">zoom` > <code>font-size</code> untuk komponen daftar</a></li> <li><a href="#_ekstensi_custom_css_memerlukan_aktivasi_eksplisit">Ekstensi Custom CSS memerlukan aktivasi eksplisit</a></li> <li><a href="#_skrip_pembaruan_diperlukan">Skrip pembaruan diperlukan</a></li> </ul> </li> <li><a href="#_referensi_cepat">Referensi cepat</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 8 minutes</div> <p>Mengapa menginstal VS Code di`/opt`atau via`apt`ketika kita dapat meletakkannya di rumah dan mengubah IDE kita menjadi taman bermain tanpa pernah mengetik`sudo`?Berikut adalah cerita tentang pemasangan lokal diikuti dengan pertempuran sengit untuk memperbesar font menu dan penjelajah file.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_gambaran_umum_jalur">Gambaran Umum Jalur</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Développeur as dev actor "opencode + LLM" as agent package "Beranda Pengguna (~)" #LightGreen { package "~/apps/" { component "VS Code (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 (zoom: 1.25)" as customcss #Lavender } } cloud "code.visualstudio.com" as download dev --> vscode : Télécharge & installe dev --> script : Lance mise à jour script --> download : wget dernière version script --> vscode : Remplace + re-patch CSS agent --> settings : Écrit config agent --> customcss : Écrit zoom CSS agent --> vscode : Patch workbench CSS note right of vscode Installation dans le home = contrôle total sans sudo end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_vs_code_di_home">Mengapa : VS Code di Home</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_masalah_dengan_instalasi_sistem">Masalah dengan instalasi sistem</h3> <div class="paragraph"> <p>VS Code terpasang melalui`apt`, <code>dnf`atau di</code>/opt`Mengunci file aplikasi di balik hak root. Setiap modifikasi pada CSS asli, dari`product.json`atau folder instalasi membutuhkan`sudo`.</p> </div> <div class="paragraph"> <p>Namun, ketika menggunakan<strong>opencode</strong>(tool CLI untuk mengendalikan sebuah LLM pada kode-nya), agen tersebut perlu bisa :</p> </div> <div class="ulist"> <ul> <li> <p>Menulis dalam file konfigurasi (<code>~/.config/Code/User/settings.json</code>) — ini, itu sudah berada di rumah</p> </li> <li> <p>Ubah aset IDE (CSS workbench,<code>product.json</code>) untuk kustomisasi tingkat lanjut — ini diblokir tanpa sudo</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_solusi_instalasi_lokal">Solusi: instalasi lokal</h3> <div class="paragraph"> <p>Kami mengunduh arsip tarball resmi dan mengekstraknya langsung ke`~/apps/` :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">mkdir -p ~/apps cd ~/apps wget "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" -O vscode.tar.gz tar -xzf vscode.tar.gz rm vscode.tar.gz</code></pre> </div> </div> <div class="paragraph"> <p>Biner kemudian berada di`~/apps/VSCode-linux-x64/bin/code`. Tidak ada`sudo` tidak diperlukan untuk membaca, mengedit, atau mengganti apa pun file di bawah`~/apps/VSCode-linux-x64/`.</p> </div> </div> <div class="sect2"> <h3 id="_keuntungan_konkret">keuntungan konkret</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Instalasi Sistem (/opt, apt, dnf)" #LightCoral { card "VS Code kepemilikan root" { [CSS du workbench : sudo requis] [product.json : sudo requis] [Dossier d'install : non modifiable] } } rectangle "Instalasi Rumah\n(~/apps)" #LightGreen { card "VS Code properti pengguna" { [CSS du workbench : libre] [product.json : libre] [Dossier d'install : libre] [Script update maison] } } "Instalasi Sistem (/opt, apt, dnf)" -right-> "Instalasi Rumah\n(~/apps)" : **Non, merci**\nJe prends le home note bottom of "Instalasi Rumah\n(~/apps)" L'agent opencode+LLM peut modifier les fichiers de l'IDE sans aucune élévation de privilèges end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Kelebihan</th> <th class="tableblock halign-left valign-top">detail</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak ada sudo</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Semua file IDE milik pengguna</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Modifikasi langsung CSS</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kita bisa patch`workbench.desktop.main.css`tanpa peningkatan hak istimewa</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Skrip pembaruan rumah</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Skrip shell sederhana mengunduh, mengganti, dan melakukan patch ulang secara otomatis</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Isolasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Installasi sistem tidak tercemar ; rollback = hapus folder</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_sesuaikan_font_menu_utama">Sesuaikan font menu utama</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_temukan">Temukan</h3> <div class="paragraph"> <p>Font default menu utama (File, Edit, View…​) dan dropdown terlalu kecil. VS Code tidak menawarkan pengaturan apa pun untuk mengubahnya.</p> </div> </div> <div class="sect2"> <h3 id="_tekniknya_patch_css_langsung">Tekniknya: patch CSS langsung</h3> <div class="paragraph"> <p>Menambahkan CSS ke akhir file`workbench.desktop.main.css`:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor Développeur as dev participant "workbench.desktop .main.css" as css participant "product.json" as product participant "VS Code" as vscode == Patch CSS == dev -> css : Ajouter règles font-size\n(.menubar-menu-title, etc.) dev -> vscode : Redémarrer VS Code vscode -> vscode : Charge le CSS patché vscode --> dev : Menus et dropdowns en 23px/22px ✓ == Suppression warning == vscode --> dev : ⚠️ "Instalasi Anda rusak" dev -> product : Supprimer clé "checksums"\n(python3 -c ...) dev -> vscode : Redémarrer VS Code vscode --> dev : Plus de warning ✓ note over css, product Deux fichiers dans ~/apps/ = modifiables sans sudo end note @enduml</pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">CSS_FILE="$HOME/apps/VSCode-linux-x64/resources/app/out/vs/workbench/workbench.desktop.main.css" cat >> "$CSS_FILE" << 'EOF' .menubar-menu-title{font-size:23px!important} .menubar>.menubar-menu-button{font-size:23px!important} .monaco-menu-option{font-size:22px!important;line-height:34px!important} .monaco-menu .action-label:not(.codicon){font-size:22px!important} .menubar-menu-items-holder .monaco-menu .action-item .action-label{font-size:22px!important} EOF</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_hapus_peringatan_integritas">Hapus peringatan integritas</h3> <div class="paragraph"> <p>VS Code mendeteksi perubahan pada file-nya dan menampilkan banner "Your installation is corrupt". Untuk menghindarinya, kita menghapus checksum dari`product.json`</think> </think></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>Setelah reboot, tidak ada lagi peringatan dan menu akhirnya dapat dibaca.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menyesuaikan_font_panel_explorer_pertarungan">Menyesuaikan font panel Explorer — pertarungan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_percobaan_1_sebuah_parameter_yang_tidak_ada">Percobaan 1 : sebuah parameter yang tidak ada</h3> <div class="paragraph"> <p>Mencoba terlebih dahulu parameter bawaan`workbench.tree.fontSize`dalam`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>Hasil :<strong>tidak ada efek</strong>. Parameter ini tidak ada di VS Code. Bukti bahwa parameter yang tidak dikenali diabaikan diam-diam.</p> </div> </div> <div class="sect2"> <h3 id="_percobaan_2_ekstensi_custom_css_and_js_loader">Percobaan 2 : ekstensi Custom CSS and JS Loader</h3> <div class="paragraph"> <p>Menginstal ekstensi`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>Kami membuat file CSS di`~/.vscode-custom-css/custom.css`avec des sélecteurs ciblant les éléments de l’explorateur :</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>Dan kami mereferensikan file ini di pengaturan :</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>Hasil :<strong>perubahan tidak berlaku</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_jebakan_anda_harus_mengaktifkan_ekstensi_setiap_kali">Jebakan: Anda harus mengaktifkan ekstensi setiap kali</h3> <div class="paragraph"> <p>Dokumentasi ekstensi tidak banyak memberikan informasi tentang poin penting ini : setelah setiap modifikasi CSS custom, harus<strong>perlu</strong>menjalankan perintah dari palet :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><code>Ctrl+Shift+P</code>→ mengetik<strong>Aktifkan CSS dan JS kustom</strong></p> </li> <li> <p>VS Code meminta restart → terima</p> </li> </ol> </div> <div class="paragraph"> <p>Tanpa langkah ini, CSS tidak pernah di‑injeksi ke IDE.</p> </div> </div> <div class="sect2"> <h3 id="_percobaan_3_garis_garis_saling_tumpang_tindih">Percobaan 3 : garis-garis saling tumpang tindih</h3> <div class="paragraph"> <p>Meski dengan`font-size: 22px` et <code>line-height: 36px</code>, huruf dengan jambangan (g, p, f, b) meluap ke baris sebelah. Kita mencoba menambahkan`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>Hasil :<strong>tidak ada perubahan</strong>. VS Code menghitung tinggi baris dalam JavaScript dan meng-override nilai CSS.</p> </div> </div> <div class="sect2"> <h3 id="_solusi_zoom_pada_kontainer_induk">Solusi: <code>zoom</code> pada kontainer induk</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Percobaan 1\nParameter tidak ada" #LightCoral { card "workbench.tree.fontSize" as t1 { [VS Code ignore le paramètre] } } rectangle "Percobaan 2 CSS Kustom + font-size" #LightYellow { card ".monaco-list-row { font-size: 22px }" as t2 { [Texte plus grand\nmais lignes superposées] } } rectangle "Percobaan 3\nfont-size + line-height + height" #LightYellow { card "height: 36px !important" as t3 { [VS Code override\npar JavaScript] [Aucun effet] } } rectangle "Solusi zoom pada kontainer induk" #LightGreen { card ".monaco-list-rows { zoom: 1.25 }" as t4 { [Texte + espacement\nproportionnels] [Layout JS respecté] [✓ Résultat conforme] } } t1 -down-> t2 : Pas de paramètre ?\nOn essaie le CSS t2 -down-> t3 : Lignes superposées ?\nOn force la hauteur t3 -down-> t4 : Override JS ?\nOn utilise zoom @enduml</pre> </div> </div> <div class="paragraph"> <p>Alih-alih melawan layout JavaScript, kita menggunakan properti`zoom`pada kontainer baris :</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`memperbesar secara seragam rendering kontainer — teks dan spasi — tanpa merusak layout yang dihitung oleh mesin JavaScript VS Code. Faktor 1,25 sesuai dengan perkiraan transisi dari 13px menjadi 16px.</p> </div> <div class="paragraph"> <p>Hasil :<strong>nama file akhirnya dapat dibaca, baris dengan spasi yang tepat</strong>.</p> </div> </div> <div class="sect2"> <h3 id="_ringkasan_selector_dan_apa_yang_berfungsi">Ringkasan selector dan apa yang berfungsi</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">pendekatan</th> <th class="tableblock halign-left valign-top">CSS</th> <th class="tableblock halign-left valign-top">Hasil</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>font-size`pada</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">Teks lebih besar tetapi baris yang tumpang tindih</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>line-height</code>+<code>height`pada</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">Tidak ada efek (mengganti JS)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>zoom`pada</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">Berhasil — teks + spasi proporsional</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_skrip_pembaruan_otomatis">Skrip pembaruan otomatis</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor "Pengembang atau cron" as dev participant "vscode-update.sh" as script participant "vscode tarball\n(code.visualstudio.com)" as remote participant "~/apps/ VSCode-linux-x64" as local participant "~/apps/\nvscode-backup" as backup participant "workbench\n.desktop.main.css" as css participant "product.json" as product dev -> script : ./vscode-update.sh script -> local : Lire version courante script -> remote : wget dernière version script -> script : Comparer versions alt Version identique script --> dev : "Sudah terkini!" else Nouvelle version script -> backup : Sauvegarder installation courante\n(horodatée) script -> local : rm -rf ancienne installation script -> local : mv nouvelle installation script -> css : Ajouter patch CSS\n(menubar 23px, dropdown 22px) script -> product : Supprimer checksums\n(python3) script --> dev : "Pembaruan selesai\n1.xx.yy → 1.zz.ww" end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_masalah">Masalah</h3> <div class="paragraph"> <p>Ketika VS Code memperbarui, ia mengganti folder instalasi dan<strong>Hapus semua patch CSS</strong>. Harus mengaplikasikan ulang perubahan secara manual setiap kali.</p> </div> </div> <div class="sect2"> <h3 id="_skrip_vscode_update_sh">Skrip `vscode-update.sh</h3> <div class="paragraph"> <p>Kita menciptakan`~/apps/vscode-update.sh`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">#!/bin/bash set -e VSCODE_DIR="$HOME/apps/VSCode-linux-x64" BACKUP_DIR="$HOME/apps/vscode-backup" TEMP_DIR="/tmp/vscode-update" MENUBAR_FONT_SIZE="23px" DROPDOWN_FONT_SIZE="22px" echo "=== VS Code Local Updater ===" CURRENT_VERSION=$("$VSCODE_DIR/bin/code" --version 2>/dev/null | head -1) echo "Current version: $CURRENT_VERSION" echo "Downloading latest VS Code..." mkdir -p "$TEMP_DIR" wget -q "https://code.visualstudio.com/sha/download?build=stable&os=linux-x64" \ -O "$TEMP_DIR/vscode.tar.gz" echo "Extracting..." mkdir -p "$TEMP_DIR/extracted" tar -xzf "$TEMP_DIR/vscode.tar.gz" -C "$TEMP_DIR/extracted" NEW_VERSION=$("$TEMP_DIR/extracted/VSCode-linux-x64/bin/code" \ --version 2>/dev/null | head -1) echo "New version: $NEW_VERSION" if [ "$CURRENT_VERSION" = "$NEW_VERSION" ]; then echo "Already up to date!" rm -rf "$TEMP_DIR" exit 0 fi echo "Backing up current installation..." mkdir -p "$BACKUP_DIR" cp -r "$VSCODE_DIR" "$BACKUP_DIR/VSCode-linux-x64-$(date +%Y%m%d-%H%M%S)" echo "Updating..." rm -rf "$VSCODE_DIR" mv "$TEMP_DIR/extracted/VSCode-linux-x64" "$VSCODE_DIR" rm -rf "$TEMP_DIR" CSS_FILE="$VSCODE_DIR/resources/app/out/vs/workbench/workbench.desktop.main.css" echo "Re-applying custom CSS patch \ (menubar=${MENUBAR_FONT_SIZE}, dropdown=${DROPDOWN_FONT_SIZE})..." cat >> "$CSS_FILE" << CSSEOF .menubar-menu-title{font-size:${MENUBAR_FONT_SIZE}!important}\ .menubar>.menubar-menu-button{font-size:${MENUBAR_FONT_SIZE}!important}\ .monaco-menu-option{font-size:${DROPDOWN_FONT_SIZE}!important;\ line-height:34px!important}\ .monaco-menu .action-label:not(.codicon)\ {font-size:${DROPDOWN_FONT_SIZE}!important}\ .menubar-menu-items-holder .monaco-menu .action-item .action-label\ {font-size:${DROPDOWN_FONT_SIZE}!important} CSSEOF PRODUCT_JSON="$VSCODE_DIR/resources/app/product.json" if [ -f "$PRODUCT_JSON" ]; then echo "Removing checksums to prevent integrity warning..." python3 -c " import json with open('$PRODUCT_JSON','r') as f: data=json.load(f) data.pop('checksums', None) with open('$PRODUCT_JSON','w') as f: json.dump(data,f,indent=2) print('Done.') " fi echo "=== Update complete: $CURRENT_VERSION -> $NEW_VERSION ==="</code></pre> </div> </div> <div class="paragraph"> <p>Skrip :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Unduh versi terbaru yang stabil</p> </li> <li> <p>Periksa apakah versi berbeda dari versi saat ini</p> </li> <li> <p>Simpan instalasi saat ini (berlabel waktu) di`~/apps/vscode-backup/`</p> </li> <li> <p>Ganti folder instalasi</p> </li> <li> <p><strong>Terapkan kembali</strong>patch CSS menu utama</p> </li> <li> <p><strong>Hapus checksums</strong> de `product.json`untuk menghindari peringatan integritas</p> </li> </ol> </div> <div class="paragraph"> <p>Catatan: Kustomisasi panel Explorer melalui ekstensi Custom CSS dan file`~/.vscode-custom-css/custom.css`mereka bertahan terhadap pembaruan karena mereka berada di luar folder instalasi</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_berkas_yang_terlibat_gambaran_umum">Berkas yang terlibat — gambaran umum</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle rectangle "Instalasi VS Code\n(~/apps/VSCode-linux-x64/)" #LightCoral { component "workbench.desktop .main.css" as css #LightCoral component "product.json" as product #LightCoral component "biner bin/code" as binary #LightCoral } rectangle "Konfigurasi pengguna\n(~/.config/Code/)" #LightGreen { component "settings.json" as settings #LightGreen component "ekstensi/" as extensions #LightGreen } rectangle "Kustomisasi Persisten (~/.vscode-custom-css/)" #SkyBlue { component "custom.css (zoom: 1.25)" as customcss #SkyBlue } rectangle "Otomatisasi (~/apps/)" #LightYellow { component "vscode-update.sh" as script #LightYellow component "vscode-backup/" as backup #LightYellow } script ..> css : Re-patch après MAJ script ..> product : Supprime checksums\naprès MAJ settings --> customcss : Référence via\nvscode_custom_css.imports extensions ..> css : Custom CSS Loader\ninjecte custom.css note bottom of css **Ne survit pas** aux mises à jour Re-patché par le script end note note bottom of customcss **Survit** aux mises à jour Vit hors du dossier d'installation end note note bottom of settings **Survit** aux mises à jour Vit dans ~/.config/ end note @enduml</pre> </div> </div> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 28.5714%;"> <col style="width: 42.8571%;"> <col style="width: 28.5715%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Jalan</th> <th class="tableblock halign-left valign-top">peran</th> <th class="tableblock halign-left valign-top">Tetap bertahan setelah update?</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">Instalasi IDE</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak (diganti)</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 dari workbench (menu, dropdown)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak (dipatch ulang oleh skrip)</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">Checksums integritas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tidak (dibersihkan kembali oleh skrip)</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">Skrip pembaruan otomatis</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ya</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">Pengaturan pengguna (fontSize, custom CSS)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ya</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>~/.vscode-custom-css/custom.css</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">CSS khusus untuk Explorer (zoom)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ya</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontName sans-serif skinparam ArrowColor #444444 rectangle "**Instalasi lokal**\n di rumah" as install #LightGreen { card "Tidak ada sudo\n untuk mengubah CSS/config" as i1 card "opencode+LLM dapat mengubah semuanya" as i2 card "Rollback = memulihkan cadangan berlabel waktu" as i3 } rectangle "**Kustomisasi CSS** zoom vs ukuran font" as css #LightYellow { card "zoom > font-size\nfor component list" as c1 card "Override tata letak JS tinggi/line-height" as c2 card "Extension Custom CSS memerlukan aktivasi manual (Ctrl+Shift+P)" as c3 } rectangle "**Otomatisasi** skrip pembaruan" as auto #LightCoral { card "Re-patch CSS setelah\n setiap pembaruan" as a1 card "Menghapus checksums\n product.json" as a2 card "Backup berstempel waktu sebelum penggantian" as a3 } install -right-> css : ensuite css -right-> auto : enfin note top of install Contrôle total sans élévation de privilèges end note note top of auto Sans script, chaque MAJ efface les patches CSS end note @enduml</pre> </div> </div> <div class="sect2"> <h3 id="_penginstalan_di_home_membebaskan_semua">Penginstalan di home membebaskan semua</h3> <div class="paragraph"> <p>Sebuah instalasi lokal di`~/apps`memberi kontrol penuh atas VS Code :</p> </div> <div class="ulist"> <ul> <li> <p>Tidak`sudo`untuk mengubah CSS atau konfigurasi</p> </li> <li> <p>Agent opencode+LLM dapat menulis ke file konfigurasi dan aset IDE</p> </li> <li> <p>Rollback sederhana: memulihkan cadangan berstempel waktu</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_zoom_font_size_untuk_komponen_daftar">zoom` > <code>font-size</code> untuk komponen daftar</h3> <div class="paragraph"> <p>VS Code mengontrol tinggi baris melalui JavaScript. Ubah`font-size`Tidak dapat menyentuh tinggi yang dialokasikan oleh mesin layout menghasilkan teks yang meluap. Properti`zoom`pada kontainer induk memperbesar semuanya secara proporsional dan mengatasi masalah ini</p> </div> </div> <div class="sect2"> <h3 id="_ekstensi_custom_css_memerlukan_aktivasi_eksplisit">Ekstensi Custom CSS memerlukan aktivasi eksplisit</h3> <div class="paragraph"> <p>Ini bukan parameter "set and forget". Setiap modifikasi pada file CSS custom memerlukan menjalankan ulang "Enable Custom CSS and JS" dari palet perintah (<code>Ctrl+Shift+P</code>).</p> </div> </div> <div class="sect2"> <h3 id="_skrip_pembaruan_diperlukan">Skrip pembaruan diperlukan</h3> <div class="paragraph"> <p>Tanpa skrip, setiap pembaruan VS Code menghapus patch CSS dari workbench. Skrip`vscode-update.sh`mengotomatisasi pengunduhan, penggantian, re-patch, dan pembersihan checksum.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_referensi_cepat">Referensi cepat</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Pengunduhan VS Code : <a href="https://code.visualstudio.com/Download" class="bare">https://code.visualstudio.com/Download</a></p> </li> <li> <p>Pemuatan CSS dan JS Kustom Ekstensi :`be5invis.vscode-custom-css`</p> </li> <li> <p>Masalah VS Code yang meminta pengaturan asli untuk font Explorer :https://github.com/microsoft/vscode/issues/149[github.com/microsoft/vscode#149]</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2026/0102_migration_gradle_script_to_plugin_post.html Thu, 16 Apr 2026 00:00:00 +0000 blog/2026/0102_migration_gradle_script_to_plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_konteks_dan_tujuan">Konteks dan tujuan</a> <ul class="sectlevel2"> <li><a href="#_titik_awal">titik awal</a></li> <li><a href="#_tujuan">Tujuan</a></li> </ul> </li> <li><a href="#_halangan_pertama_ruby_gems">Halangan pertama : `ruby { gems() }</a> <ul class="sectlevel2"> <li><a href="#_apa_yang_disembunyikan_oleh_gula_sintaksis_groovy">Apa yang disembunyikan oleh gula sintaksis Groovy</a></li> <li><a href="#_dekomposisi_mekanisme">Dekomposisi mekanisme</a></li> </ul> </li> <li><a href="#_solusi_dalam_tiga_bagian">Solusi dalam tiga bagian</a> <ul class="sectlevel2"> <li><a href="#_bagian_1_repositori_ivy_untuk_rubygems">Bagian 1: repositori Ivy untuk rubygems</a></li> <li><a href="#_bagian_2_ketergantungan_asciidoctorgems">Bagian 2: ketergantungan asciidoctorGems</a></li> <li><a href="#_bagian_3_settings_gradle_kts">Bagian 3 : settings.gradle.kts</a></li> </ul> </li> <li><a href="#_introspeksi_api_dengan_bytecode">Introspeksi API dengan bytecode</a> <ul class="sectlevel2"> <li><a href="#_mengapa_javap">Mengapa <code>javap</code> ?</a></li> <li><a href="#_hierarki_tugas">Hierarki tugas</a></li> <li><a href="#_penemuan_forkoptions">Penemuan `forkOptions</a></li> <li><a href="#_api_javaforkoptions_grolifant">API JavaForkOptions (grolifant)</a></li> <li><a href="#_revealjsextension">RevealJSExtension</a></li> </ul> </li> <li><a href="#_konfigurasi_toolchain_java">Konfigurasi toolchain Java</a> <ul class="sectlevel2"> <li><a href="#_masalah_dari_javatoolchainservice">Masalah dari JavaToolchainService</a></li> </ul> </li> <li><a href="#_deteksi_otomatis_docker">Deteksi otomatis Docker</a> <ul class="sectlevel2"> <li><a href="#_konteks">konteks</a></li> <li><a href="#_strategi">Strategi</a></li> </ul> </li> <li><a href="#_hasil_akhir">Hasil akhir</a> <ul class="sectlevel2"> <li><a href="#_buildscript_konsumen">buildscript konsumen</a></li> <li><a href="#_settings_gradle_kts">settings.gradle.kts</a></li> </ul> </li> <li><a href="#_ringkasan_jebakan_dan_solusi">Ringkasan jebakan dan solusi</a></li> <li><a href="#_metode_penyelidikan_membaca_api_yang_tidak_diketahui_dengan_javap">Metode penyelidikan : membaca API yang tidak diketahui dengan javap</a> <ul class="sectlevel2"> <li><a href="#_prinsip">prinsip</a></li> <li><a href="#_langkah_1_mencari_jar_di_cache_gradle">Langkah 1: mencari jar di cache Gradle</a></li> <li><a href="#_langkah_2_mencantumkan_kelas_dari_jar">Langkah 2: Mencantumkan kelas dari jar</a></li> <li><a href="#_langkah_3_memeriksa_sebuah_kelas">Langkah 3: memeriksa sebuah kelas</a></li> <li><a href="#_langkah_4_naik_ke_atas_dalam_hierarki">Langkah 4 : naik ke atas dalam hierarki</a></li> <li><a href="#_langkah_5_mengikuti_tipe_tidak_dikenal">Langkah 5 : mengikuti tipe tidak dikenal</a></li> <li><a href="#_langkah_6_memeriksa_ekstensi_proyek">Langkah 6: memeriksa ekstensi proyek</a></li> <li><a href="#_ringkasan_metode">Ringkasan metode</a></li> </ul> </li> <li><a href="#_langkah_selanjutnya">Langkah selanjutnya</a></li> </ul> </div> <div class="sect1"> <h2 id="_konteks_dan_tujuan">Konteks dan tujuan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_titik_awal">titik awal</h3> <div class="paragraph"> <p>Proyek`slider-gradle`Menghasilkan presentasi Reveal.js dari file AsciiDoc menggunakan plugin Gradle`org.asciidoctor.jvm.revealjs`. Konfigurasi tugas utama`asciidoctorRevealJs`berada langsung dalam buildscript root`build.gradle.kts`(blank)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">plugins { id("org.asciidoctor.jvm.revealjs") } apply<slides.SlidesPlugin>() project.tasks.getByName<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { repositories { ruby { gems() } } revealjs { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } revealjsOptions { // ... configuration complète } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_tujuan">Tujuan</h3> <div class="paragraph"> <p>Memindahkan seluruh konfigurasi ini ke`buildSrc/src/main/kotlin/slides/SlidesPlugin.kt`supaya buildscript konsumen berkurang menjadi :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">apply<slides.SlidesPlugin>()</code></pre> </div> </div> <div class="paragraph"> <p>Plugin harus sepenuhnya mandiri: ia mengaplikasikan sendiri dependensi plugin-nya, mengonfigurasi repositori-nya, dan mengelola gem Ruby-nya.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_halangan_pertama_ruby_gems">Halangan pertama : `ruby { gems() }</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_apa_yang_disembunyikan_oleh_gula_sintaksis_groovy">Apa yang disembunyikan oleh gula sintaksis Groovy</h3> <div class="paragraph"> <p>Baris`repositories { ruby { gems() } }`adalah ekstensi DSL Groovy yang hanya tersedia dalam konteks eksekusi buildscript. Ia tidak ada sebagai API Kotlin statis yang dapat diakses dari buildSrc.</p> </div> <div class="paragraph"> <p>Saat mencoba memanggilnya dari`SlidesPlugin.kt`, kompilasi gagal segera.</p> </div> </div> <div class="sect2"> <h3 id="_dekomposisi_mekanisme">Dekomposisi mekanisme</h3> <div class="paragraph"> <p>Setelah menganalisis cache Gradle (<code>~/.gradle/caches/modules-2/files-2.1/rubygems/</code>), kami menemukan di file`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"><artifact type='gem' url='https://rubygems.org/gems/asciidoctor-revealjs-3.1.0.gem' /></code></pre> </div> </div> <div class="paragraph"> <p>`ruby { gems() }`sebenarnya melakukan<strong>tiga operasi berbeda</strong>:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Menyimpan repo Ivy yang menunjuk ke`https://rubygems.org/gems/`</p> </li> <li> <p>Mengecualikan kelompok`rubygems`des repositori Maven untuk menghindari konflik</p> </li> <li> <p>Simpan gem dalam konfigurasi`asciidoctorGems`agar JRuby memuatnya saat runtime</p> </li> </ol> </div> <div class="paragraph"> <p>Ketiga tanggung jawab ini harus direproduksi secara terpisah dalam Kotlin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_dalam_tiga_bagian">Solusi dalam tiga bagian</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_bagian_1_repositori_ivy_untuk_rubygems">Bagian 1: repositori Ivy untuk 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="paragraph"> <p>Ekstensi`.gem`harus dihardcode.<code>[ext]`menyelesaikan secara default dalam</code>.jar`, yang menyebabkan kesalahan`Resource missing`.</p> </div> <div class="admonitionblock note"> <table> <tr> <td class="icon"> <i class="fa icon-note" title="Note"></i> </td> <td class="content"> Repo Ivy dideklarasikan langsung di`project.repositories`dan tidak dalam sebuah blok`repositories { }`karena receiver dari blok ini bukan`RepositoryHandler`standar Gradle namun sebuah API grolifant tidak kompatibel dengan ekstensi`ivy`Kotlin DSL. </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_bagian_2_ketergantungan_asciidoctorgems">Bagian 2: ketergantungan asciidoctorGems</h3> <div class="paragraph"> <p>Plugin`org.asciidoctor.jvm.gems`harus diterapkan terlebih dahulu — ia membuat konfigurasi`asciidoctorGems`dan tugas`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>Urutan penerapan penting:`gems`sebelum`revealjs`. <2> Pemenuh syarat`@gem`Paksa ekstensi yang benar pada dependensi.</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_bagian_3_settings_gradle_kts">Bagian 3 : settings.gradle.kts</h3> <div class="paragraph"> <p>`dependencyResolutionManagement`dalam`settings.gradle.kts`harus mengizinkan proyek-proyek untuk mendeklarasikan repositori mereka sendiri :</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>Tanpa baris ini, Gradle mengabaikan repos yang dideklarasikan dalam plugin dan resolusi gems gagal.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_introspeksi_api_dengan_bytecode">Introspeksi API dengan bytecode</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_mengapa_javap">Mengapa <code>javap</code> ?</h3> <div class="paragraph"> <p>Plugin`asciidoctor-gradle-jvm-slides`adalah dalam versi`4.0.0-alpha.1`. Dokumentasinya tidak ada atau tidak lengkap. Sumber terpercaya yang satu-satunya adalah inspeksi langsung dari kelas yang dikompilasi.</p> </div> </div> <div class="sect2"> <h3 id="_hierarki_tugas">Hierarki tugas</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>Hasil :</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="_penemuan_forkoptions">Penemuan `forkOptions</h3> <div class="paragraph"> <p>Saat memeriksa`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>Ada :</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<org.ysb33r.grolifant.api.v4.JavaForkOptions>); public static final org.asciidoctor.gradle.base.process.ProcessMode JAVA_EXEC;</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_api_javaforkoptions_grolifant">API JavaForkOptions (grolifant)</h3> <div class="paragraph"> <p>`javaLauncher`tidak ada pada tugas ini. API nyata dari`org.ysb33r.grolifant.api.v4.JavaForkOptions`penjelasan :</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="colist arabic"> <table> <tr> <td><i class="conum" data-value="1"></i><b>1</b></td> <td>Metode`executable(Object)`mengganti penugasan`executable = …​`yang tidak dapat dikompilasi (`val`tidak dapat ditetapkan ulang).</td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_revealjsextension">RevealJSExtension</h3> <div class="paragraph"> <p>`revealjs { }`bukan metode dari tugas ini tetapi sebuah<strong>perpanjangan proyek</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>Diakses melalui:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.extensions.getByType<RevealJSExtension>().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="_konfigurasi_toolchain_java">Konfigurasi toolchain Java</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_masalah_dari_javatoolchainservice">Masalah dari JavaToolchainService</h3> <div class="paragraph"> <p>`JavaToolchainService`bukan merupakan ekstensi proyek. Pemanggilan berikutnya gagal :</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<JavaToolchainService>()</code></pre> </div> </div> <div class="paragraph"> <p>API yang baik adalah`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<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf<JavaToolchainService>() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_deteksi_otomatis_docker">Deteksi otomatis Docker</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_konteks">konteks</h3> <div class="paragraph"> <p>Plugin Asciidoctor/JRuby membutuhkan Java 17. Kotlin 2.0.x di buildSrc tidak mendukung Java 25 (parser versi crash pada`"25.0.2"`). Daemon Gradle harus berjalan di Java 17 atau Docker harus digunakan.</p> </div> </div> <div class="sect2"> <h3 id="_strategi">Strategi</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Docker tersedia → eksekusi melalui kontainer`eclipse-temurin:17`(perilaku default)</p> </li> <li> <p>Docker tidak ada + Java 17 → eksekusi lokal</p> </li> <li> <p>Docker tidak ada + Java > 17 → error eksplisit</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 -> project.tasks.register<Exec>(TASK_ASCIIDOCTOR_REVEALJS) { group = GROUP_TASK_SLIDER description = "Slider settings and generation (via Docker)" dependsOn(TASK_CLEAN_SLIDES_BUILD) finalizedBy(TASK_DASHBOARD_SLIDES_BUILD) commandLine( "docker", "run", "--rm", "-v", "${project.rootDir.absolutePath}:/workspace", "-v", "${System.getProperty("user.home")}/.gradle:/root/.gradle", "-w", "/workspace", "eclipse-temurin:17", "./gradlew", TASK_ASCIIDOCTOR_REVEALJS ) workingDir = project.rootDir } javaVersion == 17 -> { project.repositories.mavenCentral() { content { excludeGroup("rubygems") } } project.repositories.ivy { url = project.uri("https://rubygems.org/gems/") patternLayout { artifact("[module]-[revision].gem") } metadataSources { artifact() } content { includeGroup("rubygems") } } project.extensions.getByType<RevealJSExtension>().apply { version = "3.1.0" templateGitHub { setOrganisation("hakimel") setRepository("reveal.js") setTag("3.9.1") } } project.tasks.getByName<AsciidoctorJRevealJSTask>(TASK_ASCIIDOCTOR_REVEALJS) { setInProcess("JAVA_EXEC") forkOptions { executable( project.serviceOf<JavaToolchainService>() .launcherFor { languageVersion.set(JavaLanguageVersion.of(17)) vendor.set(JvmVendorSpec.ADOPTIUM) } .get() .executablePath .asFile .absolutePath ) } // ... reste de la configuration } } else -> error( "Docker est requis pour exécuter $TASK_ASCIIDOCTOR_REVEALJS " + "avec Java $javaVersion. Installez Docker ou utilisez Java 17." ) }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_hasil_akhir">Hasil akhir</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_buildscript_konsumen">buildscript konsumen</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">apply<slides.SlidesPlugin>()</code></pre> </div> </div> <div class="paragraph"> <p>Itu saja. Plugin menanggung seluruh tanggung jawab.</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="_ringkasan_jebakan_dan_solusi">Ringkasan jebakan dan solusi</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">Masalah</th> <th class="tableblock halign-left valign-top">Penyebab</th> <th class="tableblock halign-left valign-top">Solusi</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`ruby { gems() }`tidak tersedia di Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ekstensi DSL Groovy hanya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tiga mekanisme terpisah : repo Ivy + pengecualian Maven +<code>asciidoctorGems</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Gradle sedang mencari satu`.jar`alih-alih sebuah`.gem`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">`[ext]`menyelesaikan dalam`jar`secara default</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Hardcoder`.gem`dalam pola Ivy + kualifikasi`@gem`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>ivy { }`tidak kompiliasi di`repositories { }</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Receiver grolifant tidak kompatibel dengan DSL Kotlin</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Panggilan langsung`project.repositories.ivy { }`</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`javaLauncher`belum diselesaikan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Properti tidak ada pada`AsciidoctorJRevealJSTask`</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>setInProcess("JAVA_EXEC")</code>+<code>forkOptions { executable(…​) }</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`executable = …​`tidak bisa dikompilasi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">sifat`val`dalam`JavaForkOptions`grolifant</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Metode`executable(Object)`alih-alih</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>JavaToolchainService`tidak dapat ditemukan via`extensions</code></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ini adalah layanan Gradle, bukan ekstensi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>project.serviceOf<JavaToolchainService>()</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">`revealjs { }`tidak terselesaikan dalam tugas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Ekstensi proyek, bukan metode tugas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>project.extensions.getByType<RevealJSExtension>()</code></p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Build crash dengan Java 25</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Kotlin 2.0.x tidak memparse versi Java dua digit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deteksi Docker otomatis + fallback Java 17</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_metode_penyelidikan_membaca_api_yang_tidak_diketahui_dengan_javap">Metode penyelidikan : membaca API yang tidak diketahui dengan javap</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip">prinsip</h3> <div class="paragraph"> <p>Ketika dokumentasi tidak ada atau tidak lengkap, bytecode adalah sumber kebenaran. <code>javap`adalah alat standar JDK yang mendekompilasi file</code>.class`dalam tanda tangan Java yang dapat dibaca, tanpa memerlukan kode sumber.</p> </div> </div> <div class="sect2"> <h3 id="_langkah_1_mencari_jar_di_cache_gradle">Langkah 1: mencari jar di cache Gradle</h3> <div class="paragraph"> <p>Gradle mengunduh semua dependensinya di`~/.gradle/caches/modules-2/files-2.1/`. Langkah pertama adalah menemukan jar yang berisi kelas yang akan diperiksa :</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>/dev/null</code></pre> </div> </div> <div class="listingblock"> <div class="title">Hasil :</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="_langkah_2_mencantumkan_kelas_dari_jar">Langkah 2: Mencantumkan kelas dari jar</h3> <div class="paragraph"> <p>Sebelum memeriksa sebuah kelas, kita memastikan bahwa kelas tersebut memang ada di dalam jar :</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="_langkah_3_memeriksa_sebuah_kelas">Langkah 3: memeriksa sebuah kelas</h3> <div class="listingblock"> <div class="title">Ini menampilkan semua kelas yang tersedia : <code>AsciidoctorJRevealJSTask</code>, <code>RevealJSExtension</code>, <code>RevealJSOptions</code>, dst.</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>opsi`-p`Menampilkan semua anggota termasuk yang pribadi Hasilnya langsung menunjukkan baris kunci:</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="_langkah_4_naik_ke_atas_dalam_hierarki">Langkah 4 : naik ke atas dalam hierarki</h3> <div class="paragraph"> <p>Tugas meluas`AbstractAsciidoctorTask`. Kita memeriksanya bergantian dengan mencari jar-nya terlebih dahulu :</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>/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>Di sinilah kita menemukan`forkOptions`, <code>JAVA_EXEC</code>, et <code>javaForkOptions</code> jenis`org.ysb33r.grolifant.api.v4.JavaForkOptions`.</p> </div> </div> <div class="sect2"> <h3 id="_langkah_5_mengikuti_tipe_tidak_dikenal">Langkah 5 : mengikuti tipe tidak dikenal</h3> <div class="paragraph"> <p>`JavaForkOptions`adalah kelas grolifant yang tidak diketahui. Kami menemukan jar-nya :</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>/dev/null</code></pre> </div> </div> <div class="paragraph"> <p>Kemudian kita memeriksanya :</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>Di sini ada`executable(java.lang.Object)<code>— metode yang benar untuk dipanggil, berlawanan dengan`executable = …​`yang tidak dapat dikompilasi karena itu adalah sebuah properti`val</code>.</p> </div> </div> <div class="sect2"> <h3 id="_langkah_6_memeriksa_ekstensi_proyek">Langkah 6: memeriksa ekstensi proyek</h3> <div class="paragraph"> <p>untuk`revealjs { }`, pertanyaannya adalah: apakah ini adalah metode dari tugas atau ekstensi proyek ? Pemeriksaan`AsciidoctorJRevealJSTask` tidak menunjukkan metode`revealjs`. Kemudian diperiksa`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>Keberadaan`NAME`mengonfirmasi bahwa ini adalah ekstensi yang terdaftar di proyek, dapat diakses melalui`project.extensions.getByType<RevealJSExtension>()`.</p> </div> </div> <div class="sect2"> <h3 id="_ringkasan_metode">Ringkasan metode</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">Langkah</th> <th class="tableblock halign-left valign-top">Aksi</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>— menemukan 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>— memastikan bahwa kelas ada</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>— memeriksa kelas</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">pengenal`extends`dan naik dalam hierarki</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">Melacak jenis yang tidak dikenal dalam jars mereka sendiri</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">Mencari`NAME`untuk mengidentifikasi ekstensi proyek</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Metode ini berlaku untuk setiap plugin Gradle yang APInya tidak didokumentasikan atau yang versi alpha-nya tidak lagi sesuai dengan dokumentasi yang ada.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_selanjutnya">Langkah selanjutnya</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin buildSrc ini akan diekstrak ke dalam proyek mandiri yang dipublikasikan di Gradle Plugin Portal atau Maven Local. Buildscript yang dikonsumsi kemudian akan menjadi :</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`akan diperkecil menjadi minimum ketat tanpa referensi pada`foojay-resolver-convention</code>, provisioning JDK dikelola oleh plugin itu sendiri atau didokumentasikan sebagai prasyarat.</p> </div> </div> </div> https://cheroliv.com/blog/2026/0101_jbake_portfolio_post.html Thu, 15 Jan 2026 00:00:00 +0000 blog/2026/0101_jbake_portfolio_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_visi_arkitektonik">Visi Arkitektonik</a> <ul class="sectlevel2"> <li><a href="#_prinsip_pedoman">Prinsip pedoman</a></li> <li><a href="#_pilihan_strategis_asciidoc_untuk_portofolio">Pilihan strategis : AsciiDoc untuk portofolio</a></li> <li><a href="#_model_data">Model data</a></li> </ul> </li> <li><a href="#_use_cases_rinci">Use Cases Rinci</a> <ul class="sectlevel2"> <li><a href="#_uc1_menambahkan_sebuah_elemen_ke_dalam_portofolio">UC1 : Menambahkan sebuah elemen ke dalam portofolio</a> <ul class="sectlevel3"> <li><a href="#_aliran_nominal">Aliran nominal</a></li> <li><a href="#_template_file_yang_akan_dibuat">Template file yang akan dibuat</a></li> <li><a href="#_poin_validasi">Poin validasi</a></li> </ul> </li> <li><a href="#_uc2_menghapus_sebuah_elemen_dari_portofolio">UC2 : Menghapus sebuah elemen dari portofolio</a> <ul class="sectlevel3"> <li><a href="#_fluks_nominal">fluks nominal</a></li> <li><a href="#_strategi_alternatif_pengarsipan">Strategi alternatif: pengarsipan</a></li> <li><a href="#_pembersihan_sumber_daya">Pembersihan sumber daya</a></li> </ul> </li> <li><a href="#_uc3_menetapkan_sebagai_tidak_dipublikasikan_draft">UC3 : Menetapkan sebagai tidak dipublikasikan (draft)</a> <ul class="sectlevel3"> <li><a href="#_fluks_nominal_2">Fluks nominal</a></li> <li><a href="#_status_yang_mungkin">status yang mungkin</a></li> <li><a href="#_kasus_penggunaan_tipikal">Kasus penggunaan tipikal</a></li> </ul> </li> </ul> </li> <li><a href="#_arsitektur_templating">Arsitektur Templating</a> <ul class="sectlevel2"> <li><a href="#_strategi_template_yang_dapat_digunakan_kembali">Strategi template yang dapat digunakan kembali</a></li> <li><a href="#_pola_ekstraksi_data">Pola ekstraksi data</a></li> <li><a href="#_konvensi_penamaan">Konvensi penamaan</a></li> </ul> </li> <li><a href="#_alur_kerja_publikasi">Alur Kerja Publikasi</a> <ul class="sectlevel2"> <li><a href="#_alur_pengembangan">Alur pengembangan</a></li> <li><a href="#_lingkungan">lingkungan</a></li> </ul> </li> <li><a href="#_ekstensibilitas">ekstensibilitas</a> <ul class="sectlevel2"> <li><a href="#_penambahan_atribut_baru">Penambahan atribut baru</a></li> <li><a href="#_kategorisasi_lanjutan">Kategorisasi lanjutan</a></li> </ul> </li> <li><a href="#_praktik_baik">Praktik Baik</a> <ul class="sectlevel2"> <li><a href="#_organisasi_file">Organisasi file</a></li> <li><a href="#_manajemen_konten">Manajemen konten</a></li> <li><a href="#_kinerja">kinerja</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div class="sect1"> <h2 id="_visi_arkitektonik">Visi Arkitektonik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip_pedoman">Prinsip pedoman</h3> <div class="paragraph"> <p>Arsitektur didasarkan pada prinsip <strong>pemisahan perhatian</strong> :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Konten</strong> : file AsciiDoc terstruktur dengan metadata kaya</p> </li> <li> <p><strong>Presentasi</strong> : templates Thymeleaf yang dapat digunakan kembali</p> </li> <li> <p><strong>Data</strong> : model diekstrak otomatis oleh JBake dari atribut AsciiDoc</p> </li> <li> <p><strong>Gaya</strong> : Bootstrap 5 untuk konsistensi visual</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_pilihan_strategis_asciidoc_untuk_portofolio">Pilihan strategis : AsciiDoc untuk portofolio</h3> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Mengapa AsciiDoc ?</caption> <colgroup> <col style="width: 33.3333%;"> <col style="width: 66.6667%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">kriteria</th> <th class="tableblock halign-left valign-top">keuntungan</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Konsistensi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Format yang sama dengan artikel blog</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">metadata</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Atribut terstruktur dan dapat diperluas`project-*`)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kemudahan pemeliharaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Pengeditan teks sederhana, dapat di-versi dengan Git</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">fleksibilitas</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mungkin mengandung konten kaya (tabel, kode, gambar)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">pembuatan template</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JBake mengekstrak secara otomatis atribut untuk Thymeleaf</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_model_data">Model data</h3> <div class="paragraph"> <p>Setiap proyek portofolio adalah dokumen AsciiDoc dengan :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Metadata header</strong> : informasi terstruktur (klien, durasi, teknologi, dll)</p> </li> <li> <p><strong>Badan dokumen</strong> : deskripsi naratif, tantangan, solusi, hasil</p> </li> <li> <p><strong>Atribut kustom</strong> : berawalan`project-*`untuk ekstraksi otomatis</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false class ProjetAsciiDoc { +titre: String +jbake-type: "proyek" +jbake-status: published|draft +jbake-date: Date +jbake-tags: List<String> -- +project-category: String +project-client: String +project-duration: String +project-role: String +project-thumbnail: String +project-gallery: List<String> +project-tech-stack: String +project-highlights: List<String> +project-demo-url: String +project-github-url: String -- +body: HTML (converti) } class JBakeEngine { +parse(asciidoc) +extractMetadata() +convertToHTML() } class ThymeleafTemplate { +portfolio.html +project.html +partials/project-card.html } class PortfolioPage { +published_projects: List +filtres: categories } ProjetAsciiDoc --> JBakeEngine : parse JBakeEngine --> ThymeleafTemplate : fournit données ThymeleafTemplate --> PortfolioPage : génère @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_use_cases_rinci">Use Cases Rinci</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_uc1_menambahkan_sebuah_elemen_ke_dalam_portofolio">UC1 : Menambahkan sebuah elemen ke dalam portofolio</h3> <div class="sect3"> <h4 id="_aliran_nominal">Aliran nominal</h4> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Editor Teks" as editor participant "File AsciiDoc" as file participant "JBake\nmesin" as jbake participant "Situs\nStatis" as site dev -> editor : Créer nouveau fichier activate editor editor -> file : portfolio/nouveau-projet.adoc activate file dev -> editor : Rédiger en-tête avec métadonnées\n(titre, type=project, status=published,\nattributs project-*) dev -> editor : Rédiger contenu narratif\n(contexte, défis, solutions) dev -> editor : Ajouter images dans assets/img/portfolio/ editor -> file : Sauvegarder deactivate editor dev -> jbake : Lancer build (jbake -b) activate jbake jbake -> file : Lire et parser jbake -> jbake : Extraire métadonnées jbake -> jbake : Convertir AsciiDoc → HTML jbake -> jbake : Appliquer template project.html jbake -> jbake : Ajouter à la liste portfolio.html jbake -> site : Générer pages statiques deactivate jbake dev -> site : Vérifier résultat activate site site --> dev : Afficher projet deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_template_file_yang_akan_dibuat">Template file yang akan dibuat</h4> <div class="paragraph"> <p>Pengembang membuat`content/portfolio/nom-projet.adoc`dengan struktur yang terstandar :</p> </div> <div class="ulist"> <ul> <li> <p>Header dengan semua atribut yang diperlukan</p> </li> <li> <p>Sections terstandar (Konteks, Tantangan, Solusi, Hasil)</p> </li> <li> <p>Penamaan gambar yang konsisten</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_poin_validasi">Poin validasi</h4> <div class="ulist"> <ul> <li> <p>Atribut yang diperlukan ada (<code>jbake-type</code>, <code>jbake-status</code>, <code>project-thumbnail</code>)</p> </li> <li> <p>Gambar yang dirujuk ada di`assets/img/portfolio/`</p> </li> <li> <p>Build JBake berhasil tanpa kesalahan</p> </li> <li> <p>Proyek muncul di halaman portofolio</p> </li> <li> <p>Halaman individual proyek ditampilkan dengan benar</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc2_menghapus_sebuah_elemen_dari_portofolio">UC2 : Menghapus sebuah elemen dari portofolio</h3> <div class="sect3"> <h4 id="_fluks_nominal">fluks nominal</h4> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "Sistem File" as fs participant "JBake Engine" as jbake participant "Situs\nStatis" as site database "Cache\nJBake" as cache dev -> fs : Supprimer portfolio/projet-ancien.adoc activate fs fs --> dev : Fichier supprimé deactivate fs dev -> fs : (Optionnel) Supprimer images associées\nassets/img/portfolio/projet-ancien-* activate fs fs --> dev : Images supprimées deactivate fs dev -> cache : Nettoyer cache JBake activate cache cache --> dev : Cache vidé deactivate cache dev -> jbake : Rebuild complet (jbake -b) activate jbake jbake -> jbake : Scanner content/portfolio/ jbake -> jbake : Projet absent → non généré jbake -> jbake : Régénérer portfolio.html\n(sans le projet supprimé) jbake -> site : Déployer nouveau build deactivate jbake dev -> site : Vérifier activate site site --> dev : Projet absent de la liste deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_strategi_alternatif_pengarsipan">Strategi alternatif: pengarsipan</h4> <div class="paragraph"> <p>Alih-alih menghapus secara permanen, ada kemungkinan untuk membuat folder`content/portfolio/archive/`(Empty output)</p> </div> <div class="ulist"> <ul> <li> <p>Pindahkan file alih-alih menghapusnya</p> </li> <li> <p>Memudahkan pemulihan</p> </li> <li> <p>Jaga riwayat Git lebih jelas</p> </li> </ul> </div> </div> <div class="sect3"> <h4 id="_pembersihan_sumber_daya">Pembersihan sumber daya</h4> <div class="ulist"> <ul> <li> <p>Memeriksa gambar yatim di`assets/img/portfolio/`</p> </li> <li> <p>Hapus gambar yang tidak dirujuk oleh proyek lain</p> </li> <li> <p>Membersihkan cache JBake untuk menghindari referensi hantu</p> </li> </ul> </div> </div> </div> <div class="sect2"> <h3 id="_uc3_menetapkan_sebagai_tidak_dipublikasikan_draft">UC3 : Menetapkan sebagai tidak dipublikasikan (draft)</h3> <div class="sect3"> <h4 id="_fluks_nominal_2">Fluks nominal</h4> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "File AsciiDoc" as file participant "JBake\nMesin" as jbake participant "Site Statis" as site dev -> file : Ouvrir portfolio/projet.adoc activate file dev -> file : Modifier attribut\n:jbake-status: published\n↓\n:jbake-status: draft file --> dev : Sauvegardé deactivate file dev -> jbake : Rebuild (jbake -b) activate jbake jbake -> file : Parser le fichier jbake -> jbake : Détecter status=draft jbake -> jbake : Exclure de published_projects jbake -> jbake : Ne pas créer page publique note right Le projet existe toujours mais n'est pas publié end note jbake -> site : Générer site (sans ce projet) deactivate jbake dev -> site : Vérifier portfolio activate site site --> dev : Projet absent de la liste publique deactivate site @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_status_yang_mungkin">status yang mungkin</h4> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE [*] --> Draft : Création initiale Draft --> Published : Validation et publication Published --> Draft : Retrait temporaire Draft --> Archived : Projet abandonné Published --> Archived : Projet obsolète Archived --> [*] : Suppression définitive Published --> Published : Mises à jour note right of Draft :jbake-status: draft Non visible publiquement Utile pour projets en cours end note note right of Published :jbake-status: published Visible sur le portfolio Indexé par JBake end note note right of Archived Déplacé dans archive/ ou jbake-status: archived Non publié mais conservé end note @enduml</pre> </div> </div> </div> <div class="sect3"> <h4 id="_kasus_penggunaan_tipikal">Kasus penggunaan tipikal</h4> <div class="ulist"> <ul> <li> <p><strong>Proyek yang sedang dalam proses penulisan</strong> : membuat sebagai draft, publikasikan ketika sudah selesai</p> </li> <li> <p><strong>Proyek rahasia sementara</strong> : beralih ke draft sampai persetujuan klien</p> </li> <li> <p><strong>Pembaruan besar</strong> : beralih ke draft, mengedit, menerbitkan kembali</p> </li> <li> <p><strong>A/B testing</strong> : duplikasi dalam draft, uji, terbitkan versi terbaik</p> </li> </ul> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_templating">Arsitektur Templating</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_strategi_template_yang_dapat_digunakan_kembali">Strategi template yang dapat digunakan kembali</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Template Thymeleaf" { component [index.html] as index component [portfolio.html] as portfolio component [project.html] as project package "parsial" { component [header.html] as header component [footer.html] as footer component [project-card.html] as card component [tech-badge.html] as badge component [gallery.html] as gallery } } package "Data JBake" { database "proyek_dipublikasikan" as data database "(proyek)" as content } index --> header index --> footer portfolio --> header portfolio --> footer portfolio --> card data --> portfolio : itération project --> header project --> footer project --> badge project --> gallery content --> project : projet individuel note right of card Fragment réutilisable pour afficher une carte de projet avec : - thumbnail - titre - tags - highlights end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pola_ekstraksi_data">Pola ekstraksi data</h3> <div class="paragraph"> <p>JBake secara otomatis mengubah atribut AsciiDoc menjadi properti yang dapat diakses di Thymeleaf :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Dokumen AsciiDoc" { (":project-client: Acme Corp") as attr1 (":project-duration: 6 bulan") as attr2 (":project-tags: java, react") as attr3 } rectangle "Model JBake" { (content['project-client']) as prop1 (content['project-duration']) as prop2 (content.tags) as prop3 } rectangle "Template Thymeleaf" { (th:text="${project['project-client']}") as tmpl1 (th:text="${project['project-duration']}") as tmpl2 (th:each="tag : ${project.tags}") as tmpl3 } attr1 --> prop1 : parsing attr2 --> prop2 : parsing attr3 --> prop3 : parsing prop1 --> tmpl1 : binding prop2 --> tmpl2 : binding prop3 --> tmpl3 : binding @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_konvensi_penamaan">Konvensi penamaan</h3> <div class="ulist"> <ul> <li> <p><strong>Atribut proyek</strong> : awalan`project-*` (ex: <code>project-client</code>, <code>project-tech-stack</code>)</p> </li> <li> <p><strong>Berkas</strong> : kebab-case (ex:`ecommerce-platform.adoc`)</p> </li> <li> <p><strong>Images</strong> : awalan nama-proyek (contoh:`ecommerce-platform-thumb.jpg`)</p> </li> <li> <p><strong>Templates</strong> : nama fungsional (contoh:`project-card.html`, <code>tech-badge.html</code>)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_alur_kerja_publikasi">Alur Kerja Publikasi</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_alur_pengembangan">Alur pengembangan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam handwritten false class ProjetAsciiDoc { +titre: String +jbake-type: "proyek" +jbake-status: published|draft +jbake-date: Date +jbake-tags: List<String> __ +project-category: String +project-client: String +project-duration: String +project-role: String +project-thumbnail: String +project-gallery: List<String> +project-tech-stack: String +project-highlights: List<String> +project-demo-url: String +project-github-url: String __ +body: HTML (converti) } class JBakeEngine { +parse(asciidoc) +extractMetadata() +convertToHTML() } class ThymeleafTemplate { +portfolio.html +project.html +partials/project-card.html } class PortfolioPage { +published_projects: List +filtres: categories } ProjetAsciiDoc --> JBakeEngine : parse JBakeEngine --> ThymeleafTemplate : fournit données ThymeleafTemplate --> PortfolioPage : génère @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_lingkungan">lingkungan</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">Lingkungan</th> <th class="tableblock halign-left valign-top">Penggunaan</th> <th class="tableblock halign-left valign-top">Status diterima</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">Pengembangan dan pratinjau</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">draft, diterbitkan</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">penataan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Validasi pra-produksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">diterbitkan hanya</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Produksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Situs publik</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">diterbitkan hanya</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_ekstensibilitas">ekstensibilitas</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_penambahan_atribut_baru">Penambahan atribut baru</h3> <div class="paragraph"> <p>Untuk memperkaya model data, cukup menambahkan atribut baru yang diawali`project-*`:</p> </div> <div class="ulist"> <ul> <li> <p>`project-awards`Harga dan Penghargaan</p> </li> <li> <p><code>project-testimonial</code>: Kutipan klien</p> </li> <li> <p><code>project-team-size</code>: Ukuran tim</p> </li> <li> <p><code>project-budget-range</code>: jangka anggaran</p> </li> </ul> </div> <div class="paragraph"> <p>Atribut-atribut ini secara otomatis tersedia di dalam template tanpa modifikasi mesin JBake.</p> </div> </div> <div class="sect2"> <h3 id="_kategorisasi_lanjutan">Kategorisasi lanjutan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE object Projet { project-category = "web" project-subcategory = "perdagangan elektronik" project-industry = "ritel" project-complexity = "tinggi" } object Taxonomie { categories : [web, mobile, data, devops] subcategories : Map<category, List> industries : [retail, finance, healthcare, ...] complexities : [low, medium, high] } Projet --> Taxonomie : classifié selon note right of Taxonomie Permet filtrage multi-critères dans le template portfolio.html via JavaScript ou côté serveur end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_baik">Praktik Baik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_organisasi_file">Organisasi file</h3> <div class="ulist"> <ul> <li> <p><strong>Satu file = satu proyek</strong> : hindari mencampurkan beberapa proyek</p> </li> <li> <p><strong>Gambar di folder khusus</strong> :`assets/img/portfolio/nom-projet/`</p> </li> <li> <p><strong>Nomenklatur konsisten</strong> : memudahkan pencarian dan pemeliharaan</p> </li> <li> <p><strong>Versioning Git</strong> : pelacakan lengkap perubahan</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_manajemen_konten">Manajemen konten</h3> <div class="ulist"> <ul> <li> <p><strong>Status draft secara default</strong> : hanya menerbitkan ketika siap</p> </li> <li> <p><strong>Tinjauan sebelum publikasi</strong> : validasi kualitas dan kerahasiaan</p> </li> <li> <p><strong>Metadata lengkap</strong> : mengisi semua kolom yang relevan</p> </li> <li> <p><strong>Konten naratif kaya</strong>: tidak membatasi diri pada metadata</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_kinerja">kinerja</h3> <div class="ulist"> <ul> <li> <p><strong>Mengoptimalkan gambar</strong> : kompresi sebelum commit</p> </li> <li> <p><strong>Pagination yang diperlukan</strong> : jika >20 proyek</p> </li> <li> <p><strong>Lazy loading</strong> : gambar galeri yang dimuat saat diperlukan</p> </li> <li> <p><strong>Cache peramban</strong> : header yang sesuai untuk aset</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur ini memungkinkan:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Kemudahan penggunaan</strong> : menambahkan proyek = membuat file teks</p> </li> <li> <p><strong>Kefleksibilitas</strong> : dapat diperluas melalui atribut baru</p> </li> <li> <p><strong>Kemudahan pemeliharaan</strong> : pemisahan konten/presentasi</p> </li> <li> <p><strong>pelacakan</strong> : versioning Git lengkap</p> </li> <li> <p><strong>Otomatisasi</strong> : pembangunan dan penyebaran kontinu mungkin</p> </li> </ul> </div> <div class="paragraph"> <p>Pemilihan AsciiDoc menjamin konsistensi dengan sisanya situs sambil memberikan kekayaan metadata yang diperlukan untuk portofolio profesional.</p> </div> </div> </div> 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">waktu membaca : 12 minutes</div> <p>Alih-alih memilih antara kesederhanaan Supabase dan kekuatan Spring Boot, mengapa tidak menggabungkan keduanya? Temukan arsitektur hibrid yang memanfaatkan yang terbaik dari setiap teknologi.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">gangguan obsesif-kompulsi</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_dilema_palsu_arsitektur_modern">Dilema Palsu Arsitektur Modern</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat membangun aplikasi modern dengan frontend statis, kita sering menemukan diri kita dihadapkan pada pilihan biner :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Menaruh seluruh harapan pada solusi Backend-as-a-Service</strong>(Supabase, Firebase) - sederhana namun terbatas</p> </li> <li> <p><strong>Membangun backend lengkap</strong>(Spring Boot, Node.js) - kuat namun kompleks</p> </li> </ul> </div> <div class="paragraph"> <p>Pilihan ini adalah dilemma palsu. Arsitektur hibrid menawarkan jalan ketiga: <strong>menggunakan setiap teknologi di mana iaExcels</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="_visi_arsitektur">Visi Arsitektur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_tradisional_monolitik">Arsitektur Tradisional: Monolitik</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur Tradisional" { actor Utilisateur as user component "frontend" as frontend #LightBlue component "Backend monolitik" as backend #LightCoral { [Authentification] [CRUD] [Logique Métier] [Jobs] [APIs Tierces] } database "Basis Data" as db #LightGray user --> frontend frontend --> backend : Toutes les requêtes backend --> db } note right of backend Tout passe par le backend même les opérations simples ⚠️ Point de congestion unique ⚠️ Complexité dès le départ ⚠️ Couplage fort end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dalam pendekatan ini, bahkan operasi-operasi paling sederhana (membaca artikel, membuat komentar) harus melewati backend Anda. Anda membayar biaya kompleksitas sejak hari pertama.</p> </div> </div> <div class="sect2"> <h3 id="_arsitektur_baas_semua_delegat">Arsitektur BaaS: Semua Delegat</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur BaaS Murni" { actor Utilisateur as user component "Frontend" as frontend #LightBlue cloud "Supabase / Firebase" as baas #LightGreen { [Auth] [Database] [Storage] [Edge Functions] } user --> frontend frontend --> baas : Toutes les opérations } note right of baas Développement rapide Pas de serveur à gérer ⚠️ Limité pour logique complexe ⚠️ Vendor lock-in ⚠️ Edge Functions contraintes end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Di sisi lain, mendelegasikan semuanya ke BaaS menarik di awal, tetapi menunjukkan batasnya dengan cepat begitu logika bisnis menjadi kompleks.</p> </div> </div> <div class="sect2"> <h3 id="_arsitektur_hibrid_pemisahan_tanggung_jawab">Arsitektur Hibrid : Pemisahan Tanggung Jawab</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Utilisateur as user #LightBlue package "Lapisan Frontend" { component "Situs Statis JBake" as frontend #SkyBlue } package "Lapisan Sederhana (Supabase)" #LightGreen { component "Authentifikasi" as auth component "CRUD Dasar" as crud component "Penyimpanan File" as storage component "Waktu nyata" as realtime } package "Lapisan Bisnis (Spring Boot)" #Coral { component "Logika Kompleks" as logic component "Orkestrasi" as orchestration component "Pekerjaan Terjadwal" as jobs component "Integrasi" as integrations } database "PostgreSQL Dibagikan" as db #LightGray user --> frontend frontend --> auth : OAuth2, JWT frontend --> crud : Articles, Profils frontend --> storage : Images, Fichiers frontend --> realtime : Notifications frontend --> logic : Calculs, Rapports frontend --> orchestration : Workflows logic --> integrations : Stripe, APIs orchestration --> db jobs --> db crud --> db auth --> db note bottom of db **Une seule source de vérité** Partagée entre Supabase et Spring Boot end note note right of auth **Gratuit jusqu'à 50k users** Configuration en quelques clics OAuth2 multi-providers end note note right of logic **Activé seulement si nécessaire** Kotlin + Coroutines Transactions complexes end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Arsitektur hibrid dengan jelas memisahkan tanggung jawab berdasarkan kompleksitas dan sifat operasi.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_prinsip_desain">Prinsip Desain</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip_1_mulai_sederhana_berkembang_secara_cerdas">Prinsip 1: Mulai Sederhana, Berkembang Secara Cerdas</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "**Tahap 1 : MVP**" #LightGreen { component "JBake + Supabase" as mvp note right ✓ Développement en jours ✓ Coût : 0€ ✓ Validation concept end note } rectangle "Fase 2 : Pertumbuhan" #LightYellow { component "JBake + Supabase\n+ Spring Boot (opsional)" as growth note right ✓ Logique métier émerge ✓ Premiers jobs planifiés ✓ Intégrations tierces end note } rectangle "Fase 3 : Skala" #LightCoral { component "Arsitektur lengkap" as scale note right ✓ Orchestration complexe ✓ Performances optimisées ✓ Cache distribué end note } mvp -down-> growth : Quand la complexité\nle justifie growth -down-> scale : Optimisation\ncontinue @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Jangan membangun Spring Boot jika Anda tidak membutuhkannya.</strong>Mulai dengan Supabase, tambahkan Spring Boot ketika kompleksitas membenarkannya.</p> </div> </div> <div class="sect2"> <h3 id="_prinsip_2_pemisahan_berdasarkan_jenis_operasi">Prinsip 2 : Pemisahan Berdasarkan Jenis Operasi</h3> <div class="listingblock"> <div class="content"> <pre>@startmindmap skinparam backgroundColor #FEFEFE * Opérations\nApplicatives left side ** Opérations Simples\n(Supabase) ***_ CRUD Standard ****_ Lecture ****_ Création ****_ Mise à jour ****_ Suppression ***_ Authentification ****_ Login/Logout ****_ OAuth2 ****_ Gestion session ***_ Stockage ****_ Upload fichiers ****_ CDN automatique ***_ Temps Réel ****_ WebSocket ****_ Notifications right side ** Opérations Complexes\n(Spring Boot) ***_ Logique Métier ****_ Calculs complexes ****_ Règles métier ****_ Validations avancées ***_ Orchestration ****_ Multi-services ****_ Transactions distribuées ****_ Saga patterns ***_ Tâches Planifiées ****_ Rapports périodiques ****_ Synchronisations ****_ Nettoyages ***_ Intégrations ****_ Paiements (Stripe) ****_ APIs tierces ****_ Services ML/AI @endmindmap</pre> </div> </div> </div> <div class="sect2"> <h3 id="_prinsip_3_satu_sumber_kebenaran">Prinsip 3: Satu Sumber Kebenaran</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE database "PostgreSQL" as db #LightGray { package "Skema: auth (Supabase)" #LightGreen { [users] [sessions] [identities] } package "Skema: Publik (Dibagikan)" #SkyBlue { [articles] [comments] [profiles] } package "Schema: business (Spring Boot)" #Coral { [orders] [payments] [reports] } } component "Supabase" as supabase #LightGreen component "Spring Boot" as spring #Coral supabase -down-> users : Gère supabase -down-> sessions : Gère supabase -down-> articles : Accède supabase -down-> comments : Accède supabase -down-> profiles : Accède spring -down-> articles : Accède spring -down-> profiles : Accède spring -down-> orders : Gère spring -down-> payments : Gère spring -down-> reports : Gère note right of db **Avantages :** • Pas de synchronisation complexe • JOINs possibles entre tables • Cohérence garantie • Migrations unifiées end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dengan berbagi instance PostgreSQL yang sama, Supabase dan Spring Boot bekerja pada data yang sama tanpa sinkronisasi kompleks.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_orchestrasi_aliran">Orchestrasi aliran</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_aliran_1_otentikasi_terpusat">Aliran 1 : Otentikasi Terpusat</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor "pengguna" as user participant "JBake" as jbake participant "Supabase Auth" as auth participant "Spring Boot" as spring database "PostgreSQL" as db == Authentification == user -> jbake : Clique "Masuk" jbake -> auth : Redirect OAuth2 (Google/GitHub) auth -> user : Consent screen user -> auth : Autorise auth -> auth : Génère JWT auth -> jbake : Retourne JWT + Refresh Token jbake -> jbake : Stocke tokens (sessionStorage) == Accès aux Ressources == group Opération Simple (CRUD) user -> jbake : Crée un article jbake -> db : POST avec JWT note right: Supabase Row Level Security\nvérifie le JWT automatiquement db -> jbake : Article créé end group Opération Complexe (Métier) user -> jbake : Génère un rapport jbake -> spring : POST /api/reports\navec JWT spring -> spring : Valide JWT Supabase spring -> spring : Extrait claims (user_id, roles) spring -> db : Requêtes complexes spring -> jbake : Rapport généré end note over auth, spring **Le JWT est universel** Valide par Supabase ET Spring Boot Pas de double authentification end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Poin kunci</strong>: Satu proses otentikasi, satu JWT, dapat digunakan di mana pun.</p> </div> </div> <div class="sect2"> <h3 id="_alur_2_orkesstraksi_proses_bisnis_kompleks">Alur 2: Orkesstraksi Proses Bisnis Kompleks</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor "Klien" as user participant "JBake" as jbake participant "Spring Boot" as spring participant "Supabase DB" as supadb participant "Stripe API" as stripe participant "Layanan Persediaan" as inventory participant "Layanan Email" as email database "PostgreSQL" as db user -> jbake : Passe commande jbake -> spring : POST /api/orders/create == Orchestration Spring Boot == spring -> db : BEGIN TRANSACTION par Vérifications Parallèles spring -> inventory : Vérifier stock inventory -> spring : Stock OK else spring -> db : Vérifier profil client db -> spring : Client vérifié end spring -> stripe : Créer Payment Intent stripe -> spring : Intent créé (ID: pi_xxx) spring -> db : Créer Order (status: PENDING) db -> spring : Order créé spring -> stripe : Confirmer paiement stripe -> spring : Paiement confirmé spring -> db : Update Order (status: PAID) spring -> inventory : Décrémenter stock spring -> db : COMMIT TRANSACTION par Notifications Asynchrones spring -> email : Email confirmation else spring -> supadb : Insert notification note right: Notification temps réel\nvia Supabase Realtime end spring -> jbake : Order confirmé jbake -> user : Affiche confirmation note over spring **Responsabilités Spring Boot :** • Transaction ACID • Orchestration multi-services • Rollback automatique si erreur • Gestion des cas limites end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Apa yang Spring Boot bawa</strong>: Orkestrasi yang andal dari proses kompleks yang melibatkan beberapa sistem dengan jaminan transaksional.</p> </div> </div> <div class="sect2"> <h3 id="_flux_3_tugas_terjadwal_dan_sinkronisasi">Flux 3 : Tugas Terjadwal dan Sinkronisasi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE participant "Penjadwal (Spring Boot)" as scheduler participant "layanan laporan" as report participant "PostgreSQL" as db participant "API eksternal" as api participant "Layanan Email" as email participant "Supabase Storage" as storage == Job Quotidien : 2h00 == activate scheduler scheduler -> report : Déclenche génération rapport activate report report -> db : Récupère données\ndes dernières 24h db -> report : Dataset report -> report : Calculs & Agrégations report -> report : Génération PDF report -> storage : Upload PDF storage -> report : URL publique report -> email : Envoie aux admins\navec lien PDF deactivate report == Job Hebdomadaire : Dimanche 3h00 == scheduler -> report : Synchronisation externe activate report report -> api : Fetch données externes api -> report : Nouvelles données report -> db : Mise à jour tables report -> db : Nettoyage données obsolètes deactivate report == Job Mensuel : 1er du mois == scheduler -> report : Facturation activate report report -> db : Liste clients actifs report -> report : Calcul montants report -> api : Génération factures (Stripe) report -> 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>Apa yang dibawa Spring Boot</strong>: Pekerjaan terjadwal yang andal dengan manajemen status, percobaan otomatis, dan eksekusi terjamin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_matriks_keputusan">Matriks Keputusan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kapan_menggunakan_supabase">Kapan Menggunakan Supabase ?</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE start :Nouvelle fonctionnalité à implémenter; if (CRUD simple ?) then (oui) :✅ **Supabase**; stop else (non) if (Authentification ?) then (oui) :✅ **Supabase Auth**; stop else (non) if (Upload fichiers ?) then (oui) :✅ **Supabase Storage**; stop else (non) if (Temps réel ?) then (oui) :✅ **Supabase Realtime**; stop else (non) if (Row Level Security\nsuffisante ?) then (oui) :✅ **Supabase + Policies**; stop else (non) :⚠️ **Considérer Spring Boot**; #Coral:Passer à l'arbre\nde décision Spring Boot; stop endif endif endif endif endif @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_kapan_harus_menggunakan_spring_boot">Kapan harus menggunakan Spring Boot ?</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE start :Nouvelle fonctionnalité complexe; if (Orchestration\nmulti-services ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Transaction ACID\ncritique ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Job planifié ?) then (oui) :✅ **Spring Boot Scheduler**; stop else (non) if (Intégration API\ntierce complexe ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Calculs lourds\n> 10 secondes ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Cache distribué\nnécessaire ?) then (oui) :✅ **Spring Boot + Redis**; stop else (non) :⚠️ **Probablement Supabase**; #LightGreen:Revenir à l'arbre\nde décision Supabase; stop endif endif endif endif endif endif @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_contoh_arsitektur_berdasarkan_tipe_proyek">Contoh Arsitektur berdasarkan Tipe Proyek</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_blog_portofolio">Blog / Portofolio</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Blog Pribadi - 95% Supabase" { component "JBake" as jbake #SkyBlue package "Supabase (Gratis)" #LightGreen { [Auth: OAuth2 Google] [Articles (CRUD)] [Commentaires] [Images (Storage)] [Notifications Realtime] } package "Spring Boot (Opsional)" #LightCoral { [Newsletter Mensuelle] note bottom: Job planifié uniquement } database "PostgreSQL" as db jbake --> [Auth: OAuth2 Google] jbake --> [Articles (CRUD)] jbake --> [Commentaires] jbake --> [Images (Storage)] jbake --> [Notifications Realtime] [Articles (CRUD)] --> db [Commentaires] --> db [Newsletter Mensuelle] --> db } note bottom of "Spring Boot (Opsional)" **Spring Boot pas obligatoire** Newsletter peut être gérée par un service tiers (Mailchimp) end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Putusan</strong>: 100% Supabase lebih-than cukup.</p> </div> </div> <div class="sect2"> <h3 id="_aplikasi_saas">Aplikasi SaaS</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Aplikasi SaaS - Arsitektur Hibrid" { component "JBake / React" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Multi-tenant] [Profils Utilisateurs] [Données Simples] [Storage Documents] } package "Spring Boot" #Coral { [Facturation (Stripe)] [Analytics Avancées] [Rapports Mensuels] [Quotas & Limites] [Webhooks Stripe] } cloud "Layanan Eksternal" { [Stripe API] [SendGrid Email] } database "PostgreSQL Dibagikan" as db frontend --> [Auth Multi-tenant] frontend --> [Profils Utilisateurs] frontend --> [Données Simples] frontend --> [Facturation (Stripe)] frontend --> [Analytics Avancées] [Auth Multi-tenant] --> db [Profils Utilisateurs] --> db [Données Simples] --> db [Facturation (Stripe)] --> db [Facturation (Stripe)] --> [Stripe API] [Analytics Avancées] --> db [Rapports Mensuels] --> db [Rapports Mensuels] --> [SendGrid Email] [Webhooks Stripe] ..> [Stripe API] : Écoute } note right of "Spring Boot" **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>Putusan</strong>: Arsitektur hibrid diperlukan. Supabase untuk inti, Spring Boot untuk bagian kritis (pembayaran, penagihan).</p> </div> </div> <div class="sect2"> <h3 id="_perdagangan_elektronik">perdagangan elektronik</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "E-komers - 70% Spring Boot" { component "Storefront (JBake/React)" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Clients] [Catalogue Produits\n(lecture seule)] [Images Produits] } package "Spring Boot (Inti Bisnis)" #Coral { [Gestion Commandes] [Paiements Stripe] [Gestion Stock] [Calcul Frais Port] [Génération Factures] [Synchronisation ERP] [Emails Transactionnels] } cloud "Integrasi" { [Stripe] [Transporteur API] [ERP Externe] } database "PostgreSQL" as db frontend --> [Auth Clients] frontend --> [Catalogue Produits\n(lecture seule)] frontend --> [Gestion Commandes] [Auth Clients] --> db [Catalogue Produits\n(lecture seule)] --> db [Gestion Commandes] --> db [Paiements Stripe] --> [Stripe] [Gestion Stock] --> db [Calcul Frais Port] --> [Transporteur API] [Génération Factures] --> db [Synchronisation ERP] --> [ERP Externe] [Synchronisation ERP] --> db } note right of "Spring Boot (Inti Bisnis)" **Spring Boot indispensable :** • Transactions critiques • Orchestration complexe • Intégrations multiples • Conformité légale • Jobs de synchronisation end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Putusan</strong>: Spring Boot penting. Supabase hanya untuk otentikasi dan katalog.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_strategi_migrasi_progresif">Strategi Migrasi Progresif</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE |Semaine 1-2| start :Créer projet Supabase; :Configurer Auth (Google, GitHub); :Définir schéma PostgreSQL initial; :Implémenter CRUD de base sur JBake; :Déployer MVP sur GitHub Pages; note right **Livrable :** Application fonctionnelle **Coût :** 0€ **Temps :** 1-2 semaines end note |Semaine 3-4| :Observer utilisation réelle; :Identifier limitations; |Décision| if (Logique complexe\némerge ?) then (non) |Supabase| :Continuer avec Supabase seul; :Ajouter Edge Functions si besoin; stop else (oui) |Spring Boot| :Créer projet Spring Boot; :Configurer validation JWT Supabase; :Migrer logique complexe vers Spring Boot; note right **Migration sélective** Seulement ce qui est complexe end note endif |Semaines suivantes| :Déployer Spring Boot (Cloud Run, EC2); :Connecter à PostgreSQL Supabase; :Implémenter premiers jobs planifiés; :Intégrer APIs tierces; stop note right **Architecture finale hybride** Supabase + Spring Boot en parfaite harmonie end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_biaya_dan_pertimbangan_operasional">Biaya dan Pertimbangan Operasional</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_biaya">Struktur Biaya</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Perkiraan Biaya Bulanan" { rectangle "Tahap MVP\n(0-1000 pengguna)" #LightGreen { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot: N/A] note bottom: **Total: 0€/mois** } rectangle "Fase Pertumbuhan\n(1k-10k pengguna)" #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 "Skala Fase (10k-100k pengguna)" #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 "Skala Fase (10k-100k pengguna)" À ce stade, les revenus justifient largement les coûts end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_tanggung_jawab_operasional">Tanggung jawab operasional</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Siapa yang mengelola apa?" { rectangle "Dikelola oleh Supabase (0 effort)" #LightGreen { [Authentification] [Base de données] [Backups automatiques] [Scaling automatique] [Monitoring DB] [Sécurité DB] } rectangle "Dikelola oleh GitHub (0 upaya)" #SkyBlue { [Hébergement site statique] [HTTPS/SSL] [CDN global] [Déploiement automatique] } rectangle "Mengelola (Spring Boot)" #LightCoral { [Déploiement application] [Monitoring APM] [Logs centralisés] [Scaling horizontal] [Mises à jour sécurité] } } note bottom of "Mengelola (Spring Boot)" **Minimisable avec :** • Cloud Run (serverless) • Kubernetes (si nécessaire) • Services managés (RDS, etc.) end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_keseimbangan_sempurna">Kesimpulan : Keseimbangan Sempurna</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid Supabase + Spring Boot bukanlah sebuah kompromi, ini adalah<strong>sinergi</strong>.</p> </div> <div class="sect2"> <h3 id="_prinsip_prinsip_yang_harus_diingat">Prinsip-prinsip yang Harus Diingat</h3> <div class="listingblock"> <div class="content"> <pre>@startmindmap skinparam backgroundColor #FEFEFE * Architecture\nHybride ** Commencer Simple ***_ MVP avec Supabase ***_ 0€ de coût initial ***_ Validation rapide ** Évoluer Intelligemment ***_ Ajouter Spring Boot\nsi nécessaire ***_ Migration progressive ***_ Pas de refonte totale ** Exploiter les Forces ***_ Supabase: Simplicité ***_ Spring Boot: Puissance ***_ PostgreSQL: Source unique ** Minimiser la Complexité ***_ Pas de synchronisation ***_ Pas de duplication ***_ Architecture claire ** Optimiser les Coûts ***_ Gratuit au départ ***_ Scaling progressif ***_ ROI évident @endmindmap</pre> </div> </div> </div> <div class="sect2"> <h3 id="_kapan_memilih_arsitektur_ini">Kapan Memilih Arsitektur Ini?</h3> <div class="paragraph"> <p><strong>✅ Arsitektur ini ideal jika :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Anda ingin memulai dengan cepat (MVP dalam hari, bukan dalam bulan)</p> </li> <li> <p>Anda mengantisipasi pertumbuhan kompleksitas bisnis</p> </li> <li> <p>Anda ingin meminimalkan biaya awal</p> </li> <li> <p>Anda menyukai PostgreSQL dan ingin memiliki satu sumber kebenaran tunggal.</p> </li> <li> <p>Anda menyukai Kotlin dan Coroutine untuk kode bisnis</p> </li> <li> <p>Anda ingin menghindari vendor lock-in total</p> </li> </ul> </div> <div class="paragraph"> <p><strong>❌ Arsitektur ini TIDAK cocok jika :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Proyek Anda sederhana dan akan tetap demikian (blog pribadi → 100% Supabase cukup)</p> </li> <li> <p>Anda sudah memiliki stack backend yang sudah terbentuk yang Anda kuasai</p> </li> <li> <p>Anda lebih suka sebuah monolitik tradisional</p> </li> <li> <p>Anda membutuhkan .NET, Python, atau bahasa backend lain</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_visi_keseluruhan_final">Visi Keseluruhan Final</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Arsitektur Hibrid Lengkap" { actor "Pengguna" as users rectangle "Frontend (Statik)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Backend Sederhana (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Backend Bisnis (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL Sumber unik kebenaran" as db #LightGray users --> [JBake / GitHub Pages] [JBake / GitHub Pages] --> [Auth OAuth2] [JBake / GitHub Pages] --> [CRUD APIs] [JBake / GitHub Pages] --> [Storage] [JBake / GitHub Pages] --> [Realtime] [JBake / GitHub Pages] --> [Orchestration] [Auth OAuth2] --> db [CRUD APIs] --> db [Orchestration] --> db [Jobs Planifiés] --> db [Intégrations] --> 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="_terbaik_dari_kedua_dunia">Terbaik dari kedua dunia</h3> <div class="paragraph"> <p>Arsitektur ini memberi Anda :</p> </div> <div class="paragraph"> <p><strong>🚀 Kecepatan Supabase</strong></p> </div> <div class="ulist"> <ul> <li> <p>Memulai dalam jam, bukan minggu</p> </li> <li> <p>Otentikasi OAuth2 dalam beberapa klik</p> </li> <li> <p>APIs REST yang dihasilkan secara otomatis</p> </li> <li> <p>Konfigurasi server nol</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💪 Kekuatan Spring Boot</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin dan Coroutines untuk kode asinkron yang elegan</p> </li> <li> <p>Orkestrasi proses bisnis kompleks</p> </li> <li> <p>Pekerjaan terencana yang andal</p> </li> <li> <p>Transaksi ACID terjamin</p> </li> <li> <p>Ekosistem Spring lengkap</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💰 Ekonomi Progresif</strong></p> </div> <div class="ulist"> <ul> <li> <p>0€ untuk memulai dan memvalidasi</p> </li> <li> <p>Biaya yang mengikuti pertumbuhan</p> </li> <li> <p>Tidak ada over-engineering yang dilakukan terlalu dini</p> </li> </ul> </div> <div class="paragraph"> <p><strong>🎯 Fleksibilitas Arsitektur</strong></p> </div> <div class="ulist"> <ul> <li> <p>Migrasi progresif tanpa rekonstruksi</p> </li> <li> <p>Penambahan Spring Boot hanya jika diperlukan</p> </li> <li> <p>Tidak ada vendor lock-in total</p> </li> <li> <p>Arsitektur yang dapat berevolusi</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sumber_daya_teknis">Sumber Daya Teknis</h3> <div class="paragraph"> <p><strong>Dokumentasi Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">Panduan Otentikasi</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">Keamanan Tingkat Baris</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">API yang dihasilkan otomatis</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Dokumentasi Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/">Spring Boot dengan Kotlin</a></p> </li> <li> <p><a href="https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow">Coroutines dan Spring</a></p> </li> <li> <p><a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/resource-server/jwt.html">JWT Resource Server</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Artikel Tambahan :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Keamanan API dengan JWT</p> </li> <li> <p>Optimasi performa PostgreSQL</p> </li> <li> <p>Pola migrasi progresif</p> </li> <li> <p>Manajemen kesalahan dalam arsitektur terdistribusi</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_kasus_penggunaan_nyata">Kasus penggunaan nyata</h3> <div class="paragraph"> <p>Arsitektur hibrid ini digunakan dengan sukses di :</p> </div> <div class="ulist"> <ul> <li> <p><strong>SaaS B2B</strong>: Autentikasi Supabase, penagihan Spring Boot</p> </li> <li> <p><strong>Pasar</strong>: Katalog Supabase, transaksi Spring Boot</p> </li> <li> <p><strong>Platform konten</strong>: Artikel Supabase, analitik Spring Boot</p> </li> <li> <p><strong>Alat internal</strong>: CRUD Supabase, alur kerja Spring Boot</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_checklist_pemulai">Checklist Pemulai</h3> <div class="paragraph"> <p><strong>Tahap 1 - Fondasi (Minggu 1)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Buat akun Supabase - [ ] Mengonfigurasi proyek PostgreSQL - [ ] Aktifkan Auth (Google, GitHub) - [ ] Menentukan skema awal - [ ] Mengatur Row Level Security - [ ] Menguji API dari JBake</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Phase 2 - MVP (Minggu 2-3)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Mengimplementasikan halaman utama - [ ] Mengintegrasikan otentikasi OAuth2 - [ ] Buat formulir CRUD - [ ] Mengatur Penyimpanan untuk file - [ ] Men-deploy ke GitHub Pages - [ ] Uji dalam kondisi nyata</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Fase 3 - evolusi (sesuai kebutuhan)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Identifikasi kebutuhan logika kompleks - [ ] Membuat proyek Spring Boot jika diperlukan - [ ] Konfigurasi validasi JWT Supabase - [ ] Menghubungkan ke PostgreSQL Supabase - [ ] Memigrasikan fitur-fitur kompleks - [ ] Menerapkan pekerjaan terjadwal - [ ] Men-deploy Spring Boot (Cloud Run, dst.)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_anti_patterns_yang_harus_dihindari">Anti-Patterns yang harus dihindari</h3> <div class="paragraph"> <p><strong>❌ Jangan lakukan :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Duplikasi data antara Supabase dan Spring Boot</p> </li> <li> <p>Buat dua basis data PostgreSQL terpisah</p> </li> <li> <p>Mengodek otentikasi sendiri</p> </li> <li> <p>Menggunakan Spring Boot untuk CRUD sederhana</p> </li> <li> <p>Menglebih-lebihan arsitektur sejak awal</p> </li> <li> <p>Mengabaikan keamanan tingkat baris Supabase</p> </li> </ul> </div> <div class="paragraph"> <p><strong>✅ Lebih baik :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Membagikan satu basis data PostgreSQL</p> </li> <li> <p>Biarkan Supabase mengelola autentikasi</p> </li> <li> <p>Menggunakan Spring Boot hanya untuk kompleksitas</p> </li> <li> <p>Mulai sederhana, berkembang secara bertahap</p> </li> <li> <p>Manfaatkan kekuatan setiap teknologi</p> </li> <li> <p>Mengamankan dengan RLS pada tingkat basis data</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_prospek_evolusi">Prospek Evolusi</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_penambahan_kemampuan_baru">Penambahan Kemampuan Baru</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Arsitektur Saat Ini" #SkyBlue { [JBake] [Supabase] [Spring Boot] } rectangle "Evolusi yang Mungkin" #LightYellow { package "Kinerja" { [Redis Cache] [CDN pour Assets] [PostgreSQL Replicas] } package "Pemantauan" { [Grafana] [Prometheus] [Sentry] } package "CI/CD" { [GitHub Actions] [Tests Automatisés] [Déploiement Continu] } package "Fitur" { [Search (ElasticSearch)] [Queue (RabbitMQ)] [Event Sourcing] } } [Spring Boot] .down.> [Redis Cache] : Peut ajouter [Spring Boot] .down.> [Queue (RabbitMQ)] : Peut ajouter [Spring Boot] .down.> [Search (ElasticSearch)] : Peut ajouter [Supabase] .down.> [PostgreSQL Replicas] : Peut ajouter note bottom **Architecture extensible** Chaque ajout est indépendant Pas de refonte globale nécessaire end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_penskalaan_horizontal">Penskalaan Horizontal</h3> <div class="paragraph"> <p>Ketika aplikasi Anda tumbuh, arsitektur hybrid diskalakan secara alami :</p> </div> <div class="paragraph"> <p><strong>Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Skala otomatis hingga jutaan operasi</p> </li> <li> <p>Replikasi baca untuk performa baca</p> </li> <li> <p>Pemulihan poin waktu untuk keamanan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p>beberapa instance di belakang load balancer</p> </li> <li> <p>Desain stateless memfasilitasi skala horizontal</p> </li> <li> <p>Kubernetes untuk orkestrasi jika diperlukan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>PostgreSQL :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partitioning untuk tabel yang berukuran besar</p> </li> <li> <p>pooling koneksi (PgBouncer)</p> </li> <li> <p>Sharding memang diperlukan (jarang)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_saksi_saksi_arkitektonik">Saksi-saksi Arkitektonik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startup_saas_50k_pengguna">Startup SaaS (50k pengguna)</h3> <div class="paragraph"> <p></think> Kami memulai dengan 100% Supabase. Pada 5.000 pengguna, kami menambahkan Spring Boot hanya untuk penagihan Stripe dan laporan bulanan. Satu tahun kemudian, 80% dari operasi kami masih melewati Supabase. Spring Boot hanya mengelola bagian kritis. Pemisahan ini memungkinkan kami untuk menskalakan tanpa rekonstruksi. <em>__</em></p> </div> </div> <div class="sect2"> <h3 id="_platform_e_learning_10k_pengguna">Platform e-learning (10k pengguna)</h3> <div class="paragraph"> <p><em><em>_ Autentikasi OAuth2 Supabase telah menghemat tiga minggu pengembangan kami. API yang dihasilkan secara otomatis mengelola seluruh katalog kursus kami. Spring Boot hanya digunakan untuk sertifikat PDF dan email progres. Arsitektur sederhana, mudah dipelihara, dan dapat diskalakan. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_pasar_b2b_3k_pengguna">Pasar B2B (3k pengguna)</h3> <div class="paragraph"> <p><em><em>_ Spring Boot mengelola transaksi antara pembeli dan penjual (krusial). Supabase mengelola semua yang lain: profil, pesan realtime, dokumen. Faktanya mereka berbagi basis data PostgreSQL yang sama menghindarkan kita dari sinkronisasi kompleks. Pilihan arsitektur terbaik yang pernah kita buat. </em>_</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_sintesis_paradigma_arsitektur_modern">Sintesis: Paradigma Arsitektur Modern</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid Supabase + Spring Boot merupakan paradigma baru:<strong>spesialisasi arsitektur</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Paradigma Lama" #LightCoral { card "Semua di Backend" { [Auth] [CRUD] [Logique Métier] [Jobs] [Storage] [Realtime] } note bottom Complexité maximale dès le jour 1 end note } rectangle "Paradigma Baru" #LightGreen { card "Supabase (kemudahan)" { [Auth] [CRUD Simple] [Storage] [Realtime] } card "Spring Boot (Diferensiasi)" { [Logique Métier] [Jobs] [Intégrations] } note bottom Complexité progressive ajoutée seulement si nécessaire end note } [Ancien Paradigme] -right-> [Nouveau Paradigme] : Évolution @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Prinsip dasar:</strong>Jangan membangun hal-hal yang sudah ada dalam bentuk layanan. Fokuslah pada yang membedakan aplikasi Anda.</p> </div> <div class="sect2"> <h3 id="_aturan_8020">Aturan 80/20</h3> <div class="paragraph"> <p>Di sebagian besar aplikasi:</p> </div> <div class="ulist"> <ul> <li> <p><strong>80% operasi</strong>adalah CRUD standar → Supabase</p> </li> <li> <p><strong>20% dari operasi</strong>memerlukan logika bisnis → Spring Boot</p> </li> </ul> </div> <div class="paragraph"> <p>Aturan alami ini membenarkan arsitektur hibrida.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Distribusi Operasi" { rectangle "80% - Operasi Standar" #LightGreen { [Lecture de données] [Création d'entités] [Mise à jour simple] [Suppression] [Upload fichiers] [Authentification] note bottom: **Géré par Supabase** } rectangle "20% - Logika bisnis" #Coral { [Calculs complexes] [Workflows multi-étapes] [Transactions critiques] [Intégrations tierces] [Jobs planifiés] note bottom: **Géré par Spring Boot** } } note right **Focus optimal :** Votre temps de développement concentré sur les 20% qui différencient votre produit end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_akhir">Kesimpulan Akhir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid bukanlah kompromi teknis, ini adalah<strong>keputusan strategis</strong>.</p> </div> <div class="paragraph"> <p><strong>Ini memungkinkan Anda:</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Mulai cepat dengan MVP yang berfungsi</p> </li> <li> <p>✅ Memvalidasi pasar Anda tanpa investasi berat</p> </li> <li> <p>✅ Bertahap berkembang ketika kompleksitas menuntutnya</p> </li> <li> <p>✅ Mengendalikan biaya Anda pada setiap tahap</p> </li> <li> <p>✅ Memanfaatkan yang terbaik dari setiap teknologi</p> </li> <li> <p>✅ Menghindari over-engineering yang terlalu dini</p> </li> <li> <p>✅ Pertahankan fleksibilitas untuk masa depan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Dia mewakili :</strong></p> </div> <div class="ulist"> <ul> <li> <p>🎯<strong>Pragmatisme</strong>: Setiap teknologi di mana dia unggul</p> </li> <li> <p>🚀<strong>kecepatan</strong>: Waktu untuk pasar minimal</p> </li> <li> <p>💰<strong>Ekonomi</strong>: Biaya yang selaras dengan nilai</p> </li> <li> <p>🔮<strong>Skalabilitas</strong>: Arsitektur yang tumbuh bersama Anda</p> </li> <li> <p>🛡️<strong>Ketahanan</strong>Servis yang terbukti dan andal</p> </li> </ul> </div> <div class="sect2"> <h3 id="_langkah_selanjutnya_anda">Langkah Selanjutnya Anda</h3> <div class="paragraph"> <p>Jika Anda menyukai arsitektur ini, berikut ini cara memulai:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Buat akun Supabase</strong>(gratis)</p> </li> <li> <p><strong>Tentukan skema data minimal Anda</strong></p> </li> <li> <p><strong>Konfigurasikan autentikasi OAuth2</strong></p> </li> <li> <p><strong>Buat halaman pertama JBake Anda yang menggunakan API</strong></p> </li> <li> <p><strong>Terapkan di GitHub Pages</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Anda akan memiliki MVP yang fungsional di<strong>beberapa hari</strong>.</p> </div> <div class="paragraph"> <p>Spring Boot akan datang secara alami saat Anda membutuhkannya. Belum sebelumnya.</p> </div> <hr> <div class="paragraph"> <p><strong>Arsitektur hibrid adalah seni membangun tepat apa yang diperlukan, pada saat yang tepat.</strong></p> </div> <div class="paragraph"> <p><em>Semoga berkembang dengan baik! 🚀</em></p> </div> <hr> <div class="paragraph"> <p><em>Bagikan artikel ini jika Anda berpikir bahwa ia dapat membantu pengembang lain untuk membuat pilihan arsitektur yang tepat.</em></p> </div> </div> </div> </div> https://cheroliv.com/blog/2026/0100_jbake_supabase_springboot_hybride_post.html Wed, 14 Jan 2026 00:00:00 +0000 blog/2026/0100_jbake_supabase_springboot_hybride_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title">waktu membaca : 12 minutes</div> <p>Alih-alih memilih antara kesederhanaan Supabase dan kekuatan Spring Boot, mengapa tidak menggabungkan keduanya? Temukan arsitektur hibrida yang memanfaatkan yang terbaik dari setiap teknologi.</p> </div> <div class="dlist"> <dl> <dt class="hdlist1">tok</dt> <dd> <p>[]</p> </dd> </dl> </div> </div> </div> <div class="sect1"> <h2 id="_dilema_palsu_arsitektur_modern">Dilema Palsu Arsitektur Modern</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat membangun aplikasi modern dengan frontend statis, kita sering kali menghadapi pilihan biner:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Menaruh semua harapan pada solusi Backend-as-a-Service</strong>(Supabase, Firebase) - sederhana tetapi terbatas</p> </li> <li> <p><strong>Membangun backend lengkap</strong>(Spring Boot, Node.js) - kuat namun kompleks</p> </li> </ul> </div> <div class="paragraph"> <p>Pilihan ini adalah dilema palsu. Arsitektur hibrid menawarkan jalan ketiga: <strong>menggunakan setiap teknologi tempat ia mengungguli</strong></p> </div> </div> </div> <div class="sect1"> <h2 id="_visi_arsitektur">Visi Arsitektur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_tradisional_monolitik">Arsitektur Tradisional: Monolitik</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur Tradisional" { actor Utilisateur as user component "frontend" as frontend #LightBlue component "backend monolitik" as backend #LightCoral { [Authentification] [CRUD] [Logique Métier] [Jobs] [APIs Tierces] } database "Basis data" as db #LightGray user --> frontend frontend --> backend : Toutes les requêtes backend --> db } note right of backend Tout passe par le backend même les opérations simples ⚠️ Point de congestion unique ⚠️ Complexité dès le départ ⚠️ Couplage fort end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Pendekatan ini, bahkan operasi paling sederhana (membaca artikel, membuat komentar) harus melalui backend Anda. Anda membayar biaya kompleksitas sejak hari pertama.</p> </div> </div> <div class="sect2"> <h3 id="_arsitektur_baas_semua_delegasi">Arsitektur BaaS: Semua Delegasi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur BaaS Murni" { actor Utilisateur as user component "Frontend" as frontend #LightBlue cloud "Supabase / Firebase" as baas #LightGreen { [Auth] [Database] [Storage] [Edge Functions] } user --> frontend frontend --> baas : Toutes les opérations } note right of baas Développement rapide Pas de serveur à gérer ⚠️ Limité pour logique complexe ⚠️ Vendor lock-in ⚠️ Edge Functions contraintes end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Sebaliknya, mendelegasikan semuanya ke BaaS menarik di awal tetapi menunjukkan batasnya dengan cepat saat logika bisnis menjadi kompleks.</p> </div> </div> <div class="sect2"> <h3 id="_arsitektur_hibrid_pemisahan_tanggung_jawab">Arsitektur Hibrid: Pemisahan Tanggung Jawab</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle actor Utilisateur as user #LightBlue package "Lapisan Frontend" { component "Situs Statis JBake" as frontend #SkyBlue } package "Lapisan Sederhana (Supabase)" #LightGreen { component "Otentikasi" as auth component "CRUD Dasar" as crud component "Penyimpanan File" as storage component "Waktu nyata" as realtime } package "Lapisan Bisnis (Spring Boot)" #Coral { component "Logika Kompleks" as logic component "Orkestrasi" as orchestration component "Jobs Jadwal" as jobs component "Integrasi" as integrations } database "PostgreSQL yang dibagikan" as db #LightGray user --> frontend frontend --> auth : OAuth2, JWT frontend --> crud : Articles, Profils frontend --> storage : Images, Fichiers frontend --> realtime : Notifications frontend --> logic : Calculs, Rapports frontend --> orchestration : Workflows logic --> integrations : Stripe, APIs orchestration --> db jobs --> db crud --> db auth --> db note bottom of db **Une seule source de vérité** Partagée entre Supabase et Spring Boot end note note right of auth **Gratuit jusqu'à 50k users** Configuration en quelques clics OAuth2 multi-providers end note note right of logic **Activé seulement si nécessaire** Kotlin + Coroutines Transactions complexes end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Arsitektur hybrida memisahkan dengan jelas tanggung jawab berdasarkan kompleksitas dan sifat operasi.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_prinsip_desain">Prinsip Desain</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip_1_mulai_sederhana_berkembang_cerdas">Prinsip 1 : Mulai Sederhana, Berkembang Cerdas</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Tahap 1 : MVP" #LightGreen { component "JBake + Supabase" as mvp note right ✓ Développement en jours ✓ Coût : 0€ ✓ Validation concept end note } rectangle "**Tahap 2 : Pertumbuhan**" #LightYellow { component "JBake + Supabase + Spring Boot (opsional)" as growth note right ✓ Logique métier émerge ✓ Premiers jobs planifiés ✓ Intégrations tierces end note } rectangle "Tahap 3: Skala" #LightCoral { component "Arsitektur Lengkap" as scale note right ✓ Orchestration complexe ✓ Performances optimisées ✓ Cache distribué end note } mvp -down-> growth : Quand la complexité\nle justifie growth -down-> scale : Optimisation\ncontinue @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Jangan membangun Spring Boot jika Anda tidak membutuhkannya.</strong>Mulai dengan Supabase, tambahkan Spring Boot bila kompleksitas membenarkannya.</p> </div> </div> <div class="sect2"> <h3 id="_prinsip_2_pemisahan_berdasarkan_jenis_operasi">Prinsip 2 : Pemisahan berdasarkan Jenis Operasi</h3> <div class="listingblock"> <div class="content"> <pre>@startmindmap skinparam backgroundColor #FEFEFE * Opérations\nApplicatives left side ** Opérations Simples\n(Supabase) ***_ CRUD Standard ****_ Lecture ****_ Création ****_ Mise à jour ****_ Suppression ***_ Authentification ****_ Login/Logout ****_ OAuth2 ****_ Gestion session ***_ Stockage ****_ Upload fichiers ****_ CDN automatique ***_ Temps Réel ****_ WebSocket ****_ Notifications right side ** Opérations Complexes\n(Spring Boot) ***_ Logique Métier ****_ Calculs complexes ****_ Règles métier ****_ Validations avancées ***_ Orchestration ****_ Multi-services ****_ Transactions distribuées ****_ Saga patterns ***_ Tâches Planifiées ****_ Rapports périodiques ****_ Synchronisations ****_ Nettoyages ***_ Intégrations ****_ Paiements (Stripe) ****_ APIs tierces ****_ Services ML/AI @endmindmap</pre> </div> </div> </div> <div class="sect2"> <h3 id="_prinsip_3_satu_sumber_kebenaran">Prinsip 3 : Satu Sumber Kebenaran</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE database "PostgreSQL" as db #LightGray { package "skema: auth (Supabase)" #LightGreen { [users] [sessions] [identities] } package "Skema: publik (dibagikan)" #SkyBlue { [articles] [comments] [profiles] } package "Skema: bisnis (Spring Boot)" #Coral { [orders] [payments] [reports] } } component "Supabase" as supabase #LightGreen component "Spring Boot" as spring #Coral supabase -down-> users : Gère supabase -down-> sessions : Gère supabase -down-> articles : Accède supabase -down-> comments : Accède supabase -down-> profiles : Accède spring -down-> articles : Accède spring -down-> profiles : Accède spring -down-> orders : Gère spring -down-> payments : Gère spring -down-> reports : Gère note right of db **Avantages :** • Pas de synchronisation complexe • JOINs possibles entre tables • Cohérence garantie • Migrations unifiées end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Dengan berbagi instance PostgreSQL yang sama, Supabase dan Spring Boot bekerja pada data yang sama tanpa sinkronisasi yang kompleks.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_orkestrasi_aliran">Orkestrasi Aliran</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_alur_1_otentikasi_terpusat">Alur 1 : Otentikasi Terpusat</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor "Pengguna" as user participant "JBake" as jbake participant "Supabase Auth" as auth participant "Spring Boot" as spring database "PostgreSQL" as db == Authentification == user -> jbake : Clique "Masuk" jbake -> auth : Redirect OAuth2 (Google/GitHub) auth -> user : Consent screen user -> auth : Autorise auth -> auth : Génère JWT auth -> jbake : Retourne JWT + Refresh Token jbake -> jbake : Stocke tokens (sessionStorage) == Accès aux Ressources == group Opération Simple (CRUD) user -> jbake : Crée un article jbake -> db : POST avec JWT note right: Supabase Row Level Security\nvérifie le JWT automatiquement db -> jbake : Article créé end group Opération Complexe (Métier) user -> jbake : Génère un rapport jbake -> spring : POST /api/reports\navec JWT spring -> spring : Valide JWT Supabase spring -> spring : Extrait claims (user_id, roles) spring -> db : Requêtes complexes spring -> jbake : Rapport généré end note over auth, spring **Le JWT est universel** Valide par Supabase ET Spring Boot Pas de double authentification end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Poin penting</strong>: Sebuah proses otentikasi tunggal, satu JWT, dapat digunakan di mana saja.</p> </div> </div> <div class="sect2"> <h3 id="_aliran_2_orkeshtrasi_sebuah_proses_bisnis_kompleks">Aliran 2 : Orkeshtrasi sebuah Proses Bisnis Kompleks</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE autonumber actor "Klien" as user participant "JBake" as jbake participant "Spring Boot" as spring participant "Supabase DB" as supadb participant "Stripe API" as stripe participant "layanan persediaan" as inventory participant "Layanan Email" as email database "PostgreSQL" as db user -> jbake : Passe commande jbake -> spring : POST /api/orders/create == Orchestration Spring Boot == spring -> db : BEGIN TRANSACTION par Vérifications Parallèles spring -> inventory : Vérifier stock inventory -> spring : Stock OK else spring -> db : Vérifier profil client db -> spring : Client vérifié end spring -> stripe : Créer Payment Intent stripe -> spring : Intent créé (ID: pi_xxx) spring -> db : Créer Order (status: PENDING) db -> spring : Order créé spring -> stripe : Confirmer paiement stripe -> spring : Paiement confirmé spring -> db : Update Order (status: PAID) spring -> inventory : Décrémenter stock spring -> db : COMMIT TRANSACTION par Notifications Asynchrones spring -> email : Email confirmation else spring -> supadb : Insert notification note right: Notification temps réel\nvia Supabase Realtime end spring -> jbake : Order confirmé jbake -> user : Affiche confirmation note over spring **Responsabilités Spring Boot :** • Transaction ACID • Orchestration multi-services • Rollback automatique si erreur • Gestion des cas limites end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Apa yang diberikan Spring Boot</strong>Orchestrasi yang andal dari proses kompleks yang melibatkan beberapa sistem dengan jaminan transaksional.</p> </div> </div> <div class="sect2"> <h3 id="_aliran_3_pekerjaan_terjadwal_dan_sinkronisasi">Aliran 3: Pekerjaan terjadwal dan sinkronisasi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE participant "Penjadwal (Spring Boot)" as scheduler participant "layanan pelaporan layanan pelaporan" as report participant "PostgreSQL" as db participant "API eksternal" as api participant "Layanan Email" as email participant "Supabase Storage" as storage == Job Quotidien : 2h00 == activate scheduler scheduler -> report : Déclenche génération rapport activate report report -> db : Récupère données\ndes dernières 24h db -> report : Dataset report -> report : Calculs & Agrégations report -> report : Génération PDF report -> storage : Upload PDF storage -> report : URL publique report -> email : Envoie aux admins\navec lien PDF deactivate report == Job Hebdomadaire : Dimanche 3h00 == scheduler -> report : Synchronisation externe activate report report -> api : Fetch données externes api -> report : Nouvelles données report -> db : Mise à jour tables report -> db : Nettoyage données obsolètes deactivate report == Job Mensuel : 1er du mois == scheduler -> report : Facturation activate report report -> db : Liste clients actifs report -> report : Calcul montants report -> api : Génération factures (Stripe) report -> 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>Apa yang Spring Boot bawa</strong> : Pekerjaan terjadwal yang andal dengan pengelolaan status, retry otomatis, dan eksekusi terjamin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_matriks_keputusan">Matriks Keputusan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kapan_menggunakan_supabase">Kapan menggunakan Supabase?</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE start :Nouvelle fonctionnalité à implémenter; if (CRUD simple ?) then (oui) :✅ **Supabase**; stop else (non) if (Authentification ?) then (oui) :✅ **Supabase Auth**; stop else (non) if (Upload fichiers ?) then (oui) :✅ **Supabase Storage**; stop else (non) if (Temps réel ?) then (oui) :✅ **Supabase Realtime**; stop else (non) if (Row Level Security\nsuffisante ?) then (oui) :✅ **Supabase + Policies**; stop else (non) :⚠️ **Considérer Spring Boot**; #Coral:Passer à l'arbre\nde décision Spring Boot; stop endif endif endif endif endif @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_kapan_menggunakan_spring_boot">Kapan Menggunakan Spring Boot ?</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE start :Nouvelle fonctionnalité complexe; if (Orchestration\nmulti-services ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Transaction ACID\ncritique ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Job planifié ?) then (oui) :✅ **Spring Boot Scheduler**; stop else (non) if (Intégration API\ntierce complexe ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Calculs lourds\n> 10 secondes ?) then (oui) :✅ **Spring Boot**; stop else (non) if (Cache distribué\nnécessaire ?) then (oui) :✅ **Spring Boot + Redis**; stop else (non) :⚠️ **Probablement Supabase**; #LightGreen:Revenir à l'arbre\nde décision Supabase; stop endif endif endif endif endif endif @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_contoh_arsitektur_per_tipe_proyek">Contoh Arsitektur per Tipe Proyek</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_blog_portofolio">Blog / Portofolio</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Blog Pribadi - 95% Supabase" { component "JBake" as jbake #SkyBlue package "Supabase (Gratis)" #LightGreen { [Auth: OAuth2 Google] [Articles (CRUD)] [Commentaires] [Images (Storage)] [Notifications Realtime] } package "Spring Boot (Opsional)" #LightCoral { [Newsletter Mensuelle] note bottom: Job planifié uniquement } database "PostgreSQL" as db jbake --> [Auth: OAuth2 Google] jbake --> [Articles (CRUD)] jbake --> [Commentaires] jbake --> [Images (Storage)] jbake --> [Notifications Realtime] [Articles (CRUD)] --> db [Commentaires] --> db [Newsletter Mensuelle] --> db } note bottom of "Spring Boot (Opsional)" **Spring Boot pas obligatoire** Newsletter peut être gérée par un service tiers (Mailchimp) end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>putusan</strong>: 100% Supabase sudah cukup.</p> </div> </div> <div class="sect2"> <h3 id="_aplikasi_saas">Aplikasi SaaS</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Aplikasi SaaS - Arsitektur Hibrid" { component "JBake / React" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Multi-tenant] [Profils Utilisateurs] [Données Simples] [Storage Documents] } package "Spring Boot" #Coral { [Facturation (Stripe)] [Analytics Avancées] [Rapports Mensuels] [Quotas & Limites] [Webhooks Stripe] } cloud "Layanan Eksternal" { [Stripe API] [SendGrid Email] } database "PostgreSQL Dibagikan" as db frontend --> [Auth Multi-tenant] frontend --> [Profils Utilisateurs] frontend --> [Données Simples] frontend --> [Facturation (Stripe)] frontend --> [Analytics Avancées] [Auth Multi-tenant] --> db [Profils Utilisateurs] --> db [Données Simples] --> db [Facturation (Stripe)] --> db [Facturation (Stripe)] --> [Stripe API] [Analytics Avancées] --> db [Rapports Mensuels] --> db [Rapports Mensuels] --> [SendGrid Email] [Webhooks Stripe] ..> [Stripe API] : Écoute } note right of "Spring Boot" **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>putusan</strong>Arsitektur hibrid diperlukan. Supabase untuk bagian inti, Spring Boot untuk bagian kritis (pembayaran, penagihan).</p> </div> </div> <div class="sect2"> <h3 id="_perdagangan_elektronik">perdagangan elektronik</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "E-niaga - 70% Spring Boot" { component "Storefront (JBake/React)" as frontend #SkyBlue package "Supabase" #LightGreen { [Auth Clients] [Catalogue Produits\n(lecture seule)] [Images Produits] } package "Spring Boot (Inti Bisnis)" #Coral { [Gestion Commandes] [Paiements Stripe] [Gestion Stock] [Calcul Frais Port] [Génération Factures] [Synchronisation ERP] [Emails Transactionnels] } cloud "Integrasi" { [Stripe] [Transporteur API] [ERP Externe] } database "PostgreSQL" as db frontend --> [Auth Clients] frontend --> [Catalogue Produits\n(lecture seule)] frontend --> [Gestion Commandes] [Auth Clients] --> db [Catalogue Produits\n(lecture seule)] --> db [Gestion Commandes] --> db [Paiements Stripe] --> [Stripe] [Gestion Stock] --> db [Calcul Frais Port] --> [Transporteur API] [Génération Factures] --> db [Synchronisation ERP] --> [ERP Externe] [Synchronisation ERP] --> db } note right of "Spring Boot (Inti Bisnis)" **Spring Boot indispensable :** • Transactions critiques • Orchestration complexe • Intégrations multiples • Conformité légale • Jobs de synchronisation end note @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Putusan</strong>Spring Boot diperlukan. Supabase hanya untuk auth dan katalog.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_strategi_migrasi_bertahap">Strategi migrasi bertahap</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE |Semaine 1-2| start :Créer projet Supabase; :Configurer Auth (Google, GitHub); :Définir schéma PostgreSQL initial; :Implémenter CRUD de base sur JBake; :Déployer MVP sur GitHub Pages; note right **Livrable :** Application fonctionnelle **Coût :** 0€ **Temps :** 1-2 semaines end note |Semaine 3-4| :Observer utilisation réelle; :Identifier limitations; |Décision| if (Logique complexe\némerge ?) then (non) |Supabase| :Continuer avec Supabase seul; :Ajouter Edge Functions si besoin; stop else (oui) |Spring Boot| :Créer projet Spring Boot; :Configurer validation JWT Supabase; :Migrer logique complexe vers Spring Boot; note right **Migration sélective** Seulement ce qui est complexe end note endif |Semaines suivantes| :Déployer Spring Boot (Cloud Run, EC2); :Connecter à PostgreSQL Supabase; :Implémenter premiers jobs planifiés; :Intégrer APIs tierces; stop note right **Architecture finale hybride** Supabase + Spring Boot en parfaite harmonie end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_biaya_dan_pertimbangan_operasional">Biaya dan Pertimbangan Operasional</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_biaya">Struktur Biaya</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Perkiraan Biaya Bulanan" { rectangle "Tahap MVP\n(0-1000 pengguna)" #LightGreen { [JBake (GitHub Pages): 0€] [Supabase: 0€] [Spring Boot: N/A] note bottom: **Total: 0€/mois** } rectangle "Fase Pertumbuhan\n(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 "Skala Fase (10k-100k pengguna)" #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 "Skala Fase (10k-100k pengguna)" À ce stade, les revenus justifient largement les coûts end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_tanggung_jawab_operasional">Tanggung Jawab Operasional</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Siapa yang mengelola apa?" { rectangle "Dikelola oleh Supabase (0 upaya)" #LightGreen { [Authentification] [Base de données] [Backups automatiques] [Scaling automatique] [Monitoring DB] [Sécurité DB] } rectangle "Dikelola oleh GitHub (0 upaya)" #SkyBlue { [Hébergement site statique] [HTTPS/SSL] [CDN global] [Déploiement automatique] } rectangle "Untuk Mengelola (Spring Boot)" #LightCoral { [Déploiement application] [Monitoring APM] [Logs centralisés] [Scaling horizontal] [Mises à jour sécurité] } } note bottom of "Untuk Mengelola (Spring Boot)" **Minimisable avec :** • Cloud Run (serverless) • Kubernetes (si nécessaire) • Services managés (RDS, etc.) end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_keseimbangan_sempurna">Kesimpulan: Keseimbangan Sempurna</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid Supabase + Spring Boot bukanlah sebuah kompromi, ini adalah<strong>sinergi</strong>.</p> </div> <div class="sect2"> <h3 id="_prinsip_prinsip_yang_harus_diingat">Prinsip-prinsip yang harus diingat</h3> <div class="listingblock"> <div class="content"> <pre>@startmindmap skinparam backgroundColor #FEFEFE * Architecture\nHybride ** Commencer Simple ***_ MVP avec Supabase ***_ 0€ de coût initial ***_ Validation rapide ** Évoluer Intelligemment ***_ Ajouter Spring Boot\nsi nécessaire ***_ Migration progressive ***_ Pas de refonte totale ** Exploiter les Forces ***_ Supabase: Simplicité ***_ Spring Boot: Puissance ***_ PostgreSQL: Source unique ** Minimiser la Complexité ***_ Pas de synchronisation ***_ Pas de duplication ***_ Architecture claire ** Optimiser les Coûts ***_ Gratuit au départ ***_ Scaling progressif ***_ ROI évident @endmindmap</pre> </div> </div> </div> <div class="sect2"> <h3 id="_kapan_memilih_arsitektur_ini">Kapan Memilih Arsitektur Ini?</h3> <div class="paragraph"> <p><strong>✅ Arsitektur ini ideal jika :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Anda ingin memulai dengan cepat (MVP dalam hari, bukan dalam bulan)</p> </li> <li> <p>Kamu mengantisipasi pertumbuhan kompleksitas bisnis</p> </li> <li> <p>Anda ingin meminimalkan biaya awal</p> </li> <li> <p>Anda menyukai PostgreSQL dan ingin memiliki satu sumber kebenaran yang unik</p> </li> <li> <p>Anda menyukai Kotlin dan coroutine untuk kode bisnis</p> </li> <li> <p>Anda ingin menghindari vendor lock-in total</p> </li> </ul> </div> <div class="paragraph"> <p><strong>❌ Arsitektur ini TIDAK cocok jika :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Proyek Anda sederhana dan akan tetap sederhana (blog pribadi → 100% Supabase cukup)</p> </li> <li> <p>Anda sudah memiliki sebuah stack backend yang ter-establish yang Anda menguasai</p> </li> <li> <p>Anda lebih suka sebuah monolit tradisional</p> </li> <li> <p>Anda membutuhkan .NET, Python, atau bahasa pemrograman lain di sisi backend</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_visions_keseluruhan_akhir">Visions Keseluruhan Akhir</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Arsitektur Hibrid Lengkap" { actor "Pengguna" as users rectangle "frontend (statis)" #SkyBlue { [JBake / GitHub Pages] note right: Gratuit, CDN global } rectangle "Backend sederhana (Supabase)" #LightGreen { [Auth OAuth2] [CRUD APIs] [Storage] [Realtime] note right Gratuit jusqu'à 50k users Zéro configuration serveur end note } rectangle "Backend Bisnis (Spring Boot)" #Coral { [Orchestration] [Jobs Planifiés] [Intégrations] [Transactions] note right Activé uniquement si nécessaire end note } database "PostgreSQL\nSumber Tunggal Kebenaran" as db #LightGray users --> [JBake / GitHub Pages] [JBake / GitHub Pages] --> [Auth OAuth2] [JBake / GitHub Pages] --> [CRUD APIs] [JBake / GitHub Pages] --> [Storage] [JBake / GitHub Pages] --> [Realtime] [JBake / GitHub Pages] --> [Orchestration] [Auth OAuth2] --> db [CRUD APIs] --> db [Orchestration] --> db [Jobs Planifiés] --> db [Intégrations] --> 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="_terbaik_dari_kedua_dunia">Terbaik dari kedua dunia</h3> <div class="paragraph"> <p>Arsitektur ini memberi Anda :</p> </div> <div class="paragraph"> <p><strong>🚀 Kecepatan Supabase</strong></p> </div> <div class="ulist"> <ul> <li> <p>Mulai dalam jam, bukan dalam minggu</p> </li> <li> <p>Autentikasi OAuth2 dalam beberapa klik</p> </li> <li> <p>APIs REST yang dihasilkan secara otomatis</p> </li> <li> <p>Konfigurasi server nol</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💪 Kekuatan Spring Boot</strong></p> </div> <div class="ulist"> <ul> <li> <p>Kotlin dan Coroutines untuk kode asinkron yang elegan</p> </li> <li> <p>Orkestrasi proses bisnis kompleks</p> </li> <li> <p>Pekerjaan terjadwal yang andal</p> </li> <li> <p>Transaksi ACID terjamin</p> </li> <li> <p>Ekosistem Spring lengkap</p> </li> </ul> </div> <div class="paragraph"> <p><strong>💰 Ekonomi Progresif</strong></p> </div> <div class="ulist"> <ul> <li> <p>0€ untuk mulai dan validasi</p> </li> <li> <p>Biaya yang mengikuti pertumbuhan</p> </li> <li> <p>Tanpa over-engineering yang dini</p> </li> </ul> </div> <div class="paragraph"> <p><strong>🎯 Fleksibilitas Arsitektur</strong></p> </div> <div class="ulist"> <ul> <li> <p>Migrasi progresif tanpa rekonstruksi</p> </li> <li> <p>Penambahan Spring Boot hanya jika diperlukan</p> </li> <li> <p>Tidak ada vendor lock-in total</p> </li> <li> <p>Arsitektur evolutif</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_pergi_lebih_jauh">Untuk Pergi Lebih Jauh</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sumber_daya_teknis">Sumber Daya Teknis</h3> <div class="paragraph"> <p><strong>Dokumentasi Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://supabase.com/docs/guides/auth">Panduan Otentikasi</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/database/postgres/row-level-security">Keamanan Tingkat Baris</a></p> </li> <li> <p><a href="https://supabase.com/docs/guides/api">API yang dibuat otomatis</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>Documentasi Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p><a href="https://spring.io/guides/tutorials/spring-boot-kotlin/">Spring Boot dengan Kotlin</a></p> </li> <li> <p><a href="https://spring.io/blog/2019/04/12/going-reactive-with-spring-coroutines-and-kotlin-flow">Korutina dan Spring</a></p> </li> <li> <p><a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/resource-server/jwt.html">Server Sumber Daya JWT</a></p> </li> </ul> </div> <div class="paragraph"> <p><strong>artikel tambahan :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Pengamanan API dengan JWT</p> </li> <li> <p>Optimalisasi performa PostgreSQL</p> </li> <li> <p>pola migrasi progresif</p> </li> <li> <p>Penanganan kesalahan dalam arsitektur terdistribusi</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_kasus_penggunaan_nyata">Kasus Penggunaan Nyata</h3> <div class="paragraph"> <p>Arsitektur hibrid ini digunakan dengan sukses di :</p> </div> <div class="ulist"> <ul> <li> <p><strong>SaaS B2B</strong>: Autentikasi Supabase, penagihan Spring Boot</p> </li> <li> <p><strong>pasar-pasar</strong>: Katalog Supabase, transaksi Spring Boot</p> </li> <li> <p><strong>Platform konten</strong>: Artikel Supabase, analitik Spring Boot</p> </li> <li> <p><strong>Alat internal</strong>CRUD Supabase, workflows Spring Boot</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_daftar_periksa_awal">Daftar Periksa Awal</h3> <div class="paragraph"> <p><strong>Phase 1 - Fondasi (Minggu 1)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Membuat akun Supabase - [ ] Mengonfigurasi proyek PostgreSQL - [ ] Mengaktifkan Auth (Google, GitHub) - [ ] Definisikan skema awal - [ ] Mengatur Row Level Security - [ ] Menguji API sejak JBake</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Tahap 2 - MVP (Minggu 2-3)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> mengimplementasikan halaman utama - [ ] Mengintegrasikan autentikasi OAuth2 - [ ] Membuat formulir CRUD - [ ] Mengkonfigurasi Storage untuk file - [ ] Men-deploy ke GitHub Pages - [ ] Uji dalam kondisi nyata</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Tahap 3 - Perkembangan (Sesuai kebutuhan)</strong></p> </div> <div class="ulist checklist"> <ul class="checklist"> <li> <p><i class="fa fa-square-o"></i> Identifikasi kebutuhan logika kompleks - [ ] Membuat proyek Spring Boot jika diperlukan - [ ] Konfigurasi validasi JWT Supabase - [ ] Menghubungkan ke PostgreSQL Supabase - [ ] Migrasikan fitur kompleks - [ ] Implementasikan pekerjaan terjadwal - [ ] Mendeploy Spring Boot (Cloud Run, etc.)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_anti_patterns_yang_harus_dihindari">Anti-Patterns yang harus dihindari</h3> <div class="paragraph"> <p><strong>❌ Jangan melakukan :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Menduplikasi data antara Supabase dan Spring Boot</p> </li> <li> <p>Buat dua basis data PostgreSQL terpisah</p> </li> <li> <p>Kodekan otentikasi sendiri</p> </li> <li> <p>Menggunakan Spring Boot untuk CRUD sederhana</p> </li> <li> <p>Melakukan arsitektur berlebihan sejak awal</p> </li> <li> <p>Abaikan Keamanan Level Baris Supabase</p> </li> </ul> </div> <div class="paragraph"> <p><strong>✅ Lebih baik melakukan:</strong></p> </div> <div class="ulist"> <ul> <li> <p>Membagikan satu basis data PostgreSQL</p> </li> <li> <p>Biarkan Supabase mengelola otentikasi</p> </li> <li> <p>Menggunakan Spring Boot hanya untuk kompleksitas</p> </li> <li> <p>Memulai sederhana, berkembang secara bertahap</p> </li> <li> <p>Memanfaatkan kekuatan setiap teknologi</p> </li> <li> <p>Mengamankan dengan RLS pada tingkat basis data</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_perspektif_perkembangan">Perspektif perkembangan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_penambahan_kemampuan_baru">Penambahan Kemampuan Baru</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Arsitektur Saat Ini" #SkyBlue { [JBake] [Supabase] [Spring Boot] } rectangle "Perkembangan yang Mungkin" #LightYellow { package "Kinerja" { [Redis Cache] [CDN pour Assets] [PostgreSQL Replicas] } package "pemantauan" { [Grafana] [Prometheus] [Sentry] } package "CI/CD" { [GitHub Actions] [Tests Automatisés] [Déploiement Continu] } package "Fitur" { [Search (ElasticSearch)] [Queue (RabbitMQ)] [Event Sourcing] } } [Spring Boot] .down.> [Redis Cache] : Peut ajouter [Spring Boot] .down.> [Queue (RabbitMQ)] : Peut ajouter [Spring Boot] .down.> [Search (ElasticSearch)] : Peut ajouter [Supabase] .down.> [PostgreSQL Replicas] : Peut ajouter note bottom **Architecture extensible** Chaque ajout est indépendant Pas de refonte globale nécessaire end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_penskalaan_horizontal">Penskalaan Horizontal</h3> <div class="paragraph"> <p>Saat aplikasi Anda tumbuh, arsitektur hybridnya diskalakan secara alami:</p> </div> <div class="paragraph"> <p><strong>Supabase :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Menskala otomatis hingga jutaan operasi</p> </li> <li> <p>Read replicas untuk kinerja pembacaan</p> </li> <li> <p>Pemulihan poin waktu untuk keamanan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Spring Boot :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Beberapa instance di belakang load balancer</p> </li> <li> <p>Desain tanpa keadaan memudahkan penskalaan horizontal</p> </li> <li> <p>Kubernetes untuk orkestrasi jika diperlukan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>PostgreSQL :</strong></p> </div> <div class="ulist"> <ul> <li> <p>Partisi untuk tabel besar</p> </li> <li> <p>Pooling koneksi (PgBouncer)</p> </li> <li> <p>Sharding benar-benar diperlukan (jarang)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_bukti_arkitektonik">Bukti Arkitektonik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_startup_saas_50k_pengguna">Startup SaaS (50k pengguna)</h3> <div class="paragraph"> <p><em><em>_ Kami memulai 100% Supabase. Pada 5 ribu pengguna, kami menambahkan Spring Boot hanya untuk penagihan Stripe dan laporan bulanan. Satu tahun kemudian, 80% dari operasi kami masih melewati Supabase. Spring Boot hanya mengelola bagian kritis. Pemisahan ini memungkinkan kami menskalakan tanpa perlu merancang ulang. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_platform_e_learning_10_000_pengguna">Platform E-learning (10.000 pengguna)</h3> <div class="paragraph"> <p><em><em>_ Otentikasi OAuth2 Supabase telah menghemat tiga minggu pengembangan kami. API yang otomatis dihasilkan mengelola seluruh katalog kursus kami. Spring Boot hanya digunakan untuk sertifikat PDF dan email progres. Arsitektur sederhana, mudah dipelihara, dan mudah dikembangkan. </em>_</em></p> </div> </div> <div class="sect2"> <h3 id="_marketplace_b2b_3k_pengguna">Marketplace B2B (3k pengguna)</h3> <div class="paragraph"> <p></think> (Empty output) Spring Boot mengelola transaksi antara pembeli dan penjual (kritik). Supabase mengelola seluruh hal lain: profil, pesan realtime, dokumen. Fakta bahwa mereka berbagi basis data PostgreSQL yang sama menghindarkan kita dari sinkronisasi yang kompleks. Pilihan arsitektur terbaik yang telah kita buat. <em>__</em></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_sintesis_sebuah_paradigma_arsitektur_modern">Sintesis : Sebuah Paradigma Arsitektur Modern</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid Supabase + Spring Boot merepresentasikan sebuah paradigma baru :<strong>spesialisasi arsitektur</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE rectangle "Paradigma lama" #LightCoral { card "Semua di Backend" { [Auth] [CRUD] [Logique Métier] [Jobs] [Storage] [Realtime] } note bottom Complexité maximale dès le jour 1 end note } rectangle "Paradigma Baru" #LightGreen { card "Supabase (Kemudahan)" { [Auth] [CRUD Simple] [Storage] [Realtime] } card "Spring Boot\n(Diferensiasi)" { [Logique Métier] [Jobs] [Intégrations] } note bottom Complexité progressive ajoutée seulement si nécessaire end note } [Ancien Paradigme] -right-> [Nouveau Paradigme] : Évolution @enduml</pre> </div> </div> <div class="paragraph"> <p><strong>Prinsip fundamental:</strong>Jangan membangun apa yang sudah ada dalam bentuk layanan. Fokuslah pada apa yang membedakan aplikasi Anda.</p> </div> <div class="sect2"> <h3 id="_prinsip_8020">prinsip 80/20</h3> <div class="paragraph"> <p>Dalam sebagian besar aplikasi:</p> </div> <div class="ulist"> <ul> <li> <p><strong>80% dari operasi</strong>adalah CRUD standar → Supabase</p> </li> <li> <p><strong>20% dari operasi</strong>memerlukan logika bisnis → Spring Boot</p> </li> </ul> </div> <div class="paragraph"> <p>Aturan alami ini membenarkan arsitektur hibrid.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam backgroundColor #FEFEFE package "Distribusi Operasi" { rectangle "80% - Operasi Standar" #LightGreen { [Lecture de données] [Création d'entités] [Mise à jour simple] [Suppression] [Upload fichiers] [Authentification] note bottom: **Géré par Supabase** } rectangle "20% - Logika Bisnis" #Coral { [Calculs complexes] [Workflows multi-étapes] [Transactions critiques] [Intégrations tierces] [Jobs planifiés] note bottom: **Géré par Spring Boot** } } note right **Focus optimal :** Votre temps de développement concentré sur les 20% qui différencient votre produit end note @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_akhir">Kesimpulan Akhir</h2> <div class="sectionbody"> <div class="paragraph"> <p>Arsitektur hibrid bukanlah sebuah kompromi teknis, ini adalah<strong>keputusan strategis</strong>.</p> </div> <div class="paragraph"> <p><strong>Dia memungkinkan Anda untuk :</strong></p> </div> <div class="ulist"> <ul> <li> <p>✅ Memulai dengan cepat dengan MVP yang berfungsi</p> </li> <li> <p>✅ Memvalidasi pasar Anda tanpa investasi yang besar</p> </li> <li> <p>✅ Berkembang secara bertahap ketika kompleksitas mengharuskannya</p> </li> <li> <p>✅ Mengendalikan biaya Anda pada setiap tahap</p> </li> <li> <p>✅ Memanfaatkan yang terbaik dari setiap teknologi</p> </li> <li> <p>✅ Menghindari over-engineering yang terlalu dini</p> </li> <li> <p>✅ Menjaga fleksibilitas untuk masa depan</p> </li> </ul> </div> <div class="paragraph"> <p><strong>Dia mewakili :</strong></p> </div> <div class="ulist"> <ul> <li> <p>🎯 <strong>Pragmatisme</strong>: Setiap teknologi di mana ia unggul</p> </li> <li> <p>🚀<strong>kecepatan</strong>: Time-to-market minimal</p> </li> <li> <p>💰<strong>ekonomi</strong>: Biaya yang selaras dengan nilai</p> </li> <li> <p>🔮<strong>skalabilitas</strong>: Arsitektur yang tumbuh dengan anda</p> </li> <li> <p>🛡️<strong>ketangguhan</strong>: Layanan yang terbukti dan andal</p> </li> </ul> </div> <div class="sect2"> <h3 id="_langkah_selanjutnya_anda">Langkah selanjutnya Anda</h3> <div class="paragraph"> <p>Jika arsitektur ini Anda rasakan, ini adalah tempat untuk memulai:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Buat akun Supabase</strong>(gratis)</p> </li> <li> <p><strong>Tentukan skema data minimal Anda</strong></p> </li> <li> <p><strong>Konfigurasikan otentikasi OAuth2</strong></p> </li> <li> <p><strong>Buat halaman JBake pertama Anda yang mengkonsumsi API</strong></p> </li> <li> <p><strong>Deploy ke GitHub Pages</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Anda akan memiliki MVP yang fungsional di<strong>beberapa hari</strong>.</p> </div> <div class="paragraph"> <p>Spring Boot akan datang secara alami ketika Anda membutuhkannya. Belum sebelum.</p> </div> <hr> <div class="paragraph"> <p><strong>Arsitektur hibrid adalah seni membangun tepat apa yang diperlukan, ketika diperlukan.</strong></p> </div> <div class="paragraph"> <p><em>Semoga sukses dalam pengembangan! 🚀</em></p> </div> <hr> <div class="paragraph"> <p><em>Bagikan artikel ini jika Anda berpikir bahwa artikel ini dapat membantu pengembang lain untuk membuat pilihan arsitektur yang tepat.</em></p> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0098_preloading_css_variable_post.html Sat, 15 Nov 2025 00:00:00 +0000 blog/2025/0098_preloading_css_variable_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_ringkasan">Ringkasan</a></li> <li><a href="#_masalah_kedipan_tema_yang_sial">Masalah: Kedipan Tema yang Sial</a> <ul class="sectlevel2"> <li><a href="#_sebuah_mimpi_buruk_untuk_pengalaman_pengguna">Sebuah mimpi buruk untuk pengalaman pengguna</a></li> <li><a href="#_fouc_masalah_web_kuno">FOUC: Masalah Web Kuno</a></li> <li><a href="#_dampak_pada_persepsi_kualitas">Dampak pada Persepsi Kualitas</a></li> <li><a href="#_analisis_teknis_masalah">Analisis Teknis Masalah</a></li> </ul> </li> <li><a href="#_mengapa_script_klasik_tidak_cukup">Mengapa script klasik tidak cukup?</a> <ul class="sectlevel2"> <li><a href="#_pendekatan_intuitif_tetapi_tidak_efektif">Pendekatan intuitif tetapi tidak efektif</a></li> <li><a href="#_memahami_acara_domcontentloaded">Memahami Acara DOMContentLoaded</a></li> <li><a href="#_masalah_render_blocking">Masalah Render Blocking</a></li> <li><a href="#_visualisasi_masalah">Visualisasi Masalah</a></li> <li><a href="#_upaya_penyelesaian_yang_tidak_efektif">Upaya Penyelesaian yang Tidak Efektif</a></li> <li><a href="#_solusi_yang_benar_bertindak_lebih_awal">Solusi yang Benar : Bertindak Lebih Awal</a></li> </ul> </li> <li><a href="#_solusi_pemuatan_dini_early_loading">Solusi: Pemuatan Dini (Early Loading)</a> <ul class="sectlevel2"> <li><a href="#_prinsip_dasar">Prinsip Dasar</a></li> <li><a href="#_mengapa_head_adalah_tempat_yang_ideal">Mengapa <code><head></code> adalah tempat yang ideal</a></li> <li><a href="#_arsitektur_solusi_dalam_tiga_lapisan">Arsitektur Solusi dalam Tiga Lapisan</a></li> </ul> </li> <li><a href="#_langkah_1_menyimpan_pilihan_pengguna">Langkah 1: Menyimpan Pilihan Pengguna</a> <ul class="sectlevel2"> <li><a href="#_localstorage_memori_persisten_anda">localStorage : Memori Persisten Anda</a></li> <li><a href="#_implementasi_cadangan_tema">Implementasi Cadangan Tema</a></li> <li><a href="#_manajemen_kasus_kesalahan">Manajemen Kasus Kesalahan</a></li> <li><a href="#_strategi_persistensi_lanjutan">Strategi Persistensi Lanjutan</a></li> </ul> </li> <li><a href="#_langkah_2_skrip_preload_di_head">Langkah 2: Skrip Preload di `<head></a> <ul class="sectlevel2"> <li><a href="#_inti_solusi">Inti Solusi</a></li> <li><a href="#_anatomi_skrip_setiap_baris_penting">Anatomi Skrip : Setiap Baris Penting</a></li> <li><a href="#_deteksi_preferensi_sistem_bonus">Deteksi Preferensi Sistem (Bonus)</a></li> <li><a href="#_kinerja_mengapa_skrip_ini_cepat">Kinerja : Mengapa skrip ini cepat</a></li> <li><a href="#_penempatan_optimal_di_head">Penempatan optimal di `<head></a></li> </ul> </li> <li><a href="#_langkah_3_kekuatan_selektor_atribut_css">Langkah 3: Kekuatan Selektor Atribut CSS</a> <ul class="sectlevel2"> <li><a href="#_sistem_tema_bootstrap_5">Sistem Tema Bootstrap 5</a></li> <li><a href="#_struktur_css_untuk_sebuah_sistem_tema">Struktur CSS untuk sebuah Sistem Tema</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_ringkasan">Ringkasan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam artikel teknis mendalam ini, kita mengeksplorasi cara mengimplementasikan pemilih tema (light/dark) tanpa efek berkedip yang tidak menyenangkan yang terjadi saat memuat halaman. Kami menganalisis secara detail siklus rendering browser, penyebab mendalam FOUC (Flash of Unstyled Content), dan menawarkan solusi kuat berbasis pre-chargement sinkron dalam`<head>`. Teknik ini menjamin pengalaman pengguna yang lancar dan profesional.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_kedipan_tema_yang_sial">Masalah: Kedipan Tema yang Sial</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sebuah_mimpi_buruk_untuk_pengalaman_pengguna">Sebuah mimpi buruk untuk pengalaman pengguna</h3> <div class="paragraph"> <p>Bayangkan adegan ini: Anda telah menghabiskan jam-jam untuk merancang tema gelap yang indah untuk aplikasi web Anda. Warna-warna seimbang sempurna, kontras optimal, dan pengguna Anda menyukai opsi ini. Tapi ada masalah memalukan: setiap kali halaman dimuat ulang, dalam sekejap, tema terang default muncul sebelum tema gelap menggantikannya.</p> </div> <div class="paragraph"> <p>Flash visual ini, meskipun singkat (kadang kurang dari 100ms), langsung terasa oleh mata manusia dan menciptakan pengalaman yang tidak menyenangkan. Untuk pengguna yang telah memilih tema gelap karena alasan kenyamanan visual atau aksesibilitas, kedipan ini bahkan dapat menyakitkan, terutama dalam lingkungan yang tidak terang.</p> </div> </div> <div class="sect2"> <h3 id="_fouc_masalah_web_kuno">FOUC: Masalah Web Kuno</h3> <div class="paragraph"> <p>Fenomena ini adalah varian dari yang disebut "Flash of Unstyled Content" (FOUC), sebuah masalah klasik dalam pengembangan web yang bermula sejak awal era CSS. FOUC terjadi ketika peramban menampilkan sementara konten HTML tanpa gaya CSS yang diterapkan, menciptakan kilat konten yang tidak terdahului.</p> </div> <div class="paragraph"> <p>Dalam kasus spesifik kita, kita tidak berbicara tentang konten yang tidak diberi gaya sepenuhnya, melainkan tentang sebuah<strong>Kilat tema salah</strong>(FOWT) - Konten tersebut telah diberi gaya, tetapi dengan tema yang salah. Ini sangat menyebalkan karena ini menunjukkan bahwa aplikasi kita "melupakan" preferensi pengguna setiap kali halaman dimuat.</p> </div> </div> <div class="sect2"> <h3 id="_dampak_pada_persepsi_kualitas">Dampak pada Persepsi Kualitas</h3> <div class="paragraph"> <p>Masalah ini, meskipun bersifat teknis, memiliki dampak yang signifikan terhadap persepsi kualitas aplikasi Anda :</p> </div> <div class="paragraph"> <p><strong>Kurang halus</strong>: Kedipan memberi kesan bahwa aplikasi belum selesai atau tidak dioptimalkan dengan baik. Pengguna sering mengaitkan cacat visual kecil ini dengan kurangnya profesionalisme secara keseluruhan.</p> </div> <div class="paragraph"> <p><strong>Kehilangan koherensi</strong>Aplikasi sepertinya "melupakan" preferensi pengguna, menciptakan perasaan tidak sinkron antara antarmuka dan harapan.</p> </div> <div class="paragraph"> <p><strong>Kelelahan visual</strong>Untuk pengguna yang sensitif terhadap cahaya atau yang mengalami migrain, cahaya kilat ini bisa menjadi lebih dari sekadar gangguan estetika.</p> </div> <div class="paragraph"> <p><strong>Kinerja yang dirasakan</strong>Ironis, meski situs Anda dimuat dengan cepat, ketipukan ini dapat memberi kesan aplikasi lambat atau kurang responsif.</p> </div> </div> <div class="sect2"> <h3 id="_analisis_teknis_masalah">Analisis Teknis Masalah</h3> <div class="paragraph"> <p>Untuk memahami cara menyelesaikan masalah ini, pertama-tama perlu memahami mengapa hal tersebut terjadi. Kedipan terjadi karena adanya keterlambatan waktu antara tiga peristiwa kritikal dalam siklus hidup sebuah halaman web :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Parsing awal dari HTML</strong>Peramban membaca dan menganalisis struktur halaman Anda.</p> </li> <li> <p><strong>Penerapan gaya CSS</strong>Peramban menerapkan aturan CSS dan menghitung rendering visual</p> </li> <li> <p><strong>Eksekusi JavaScript</strong>: Kode Anda yang mengubah tema berjalan</p> </li> </ol> </div> <div class="paragraph"> <p>Masalah terjadi ketika peristiwa no.3 (eksekusi JavaScript) tiba setelah browser sudah memulai atau menyelesaikan peristiwa no.2 (penerapan gaya). Saat itu, browser sudah membuat keputusan tentang tema mana yang akan ditampilkan, dan kode Anda terlambat untuk memengaruhinya sebelum rendering pertama.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_script_klasik_tidak_cukup">Mengapa script klasik tidak cukup?</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pendekatan_intuitif_tetapi_tidak_efektif">Pendekatan intuitif tetapi tidak efektif</h3> <div class="paragraph"> <p>Pendekatan paling natural untuk seorang pengembang akan menempatkan skrip di akhir dari kita.`<body>`yang memeriksa tema favorit pengguna dan menerapkannya. Pendekatan ini mengikuti praktik terbaik tradisional web yang merekomendasikan untuk memuat skrip di akhir halaman agar tidak memblokir rendering.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// À la fin de <body> - L'APPROCHE INSUFFISANTE document.addEventListener('DOMContentLoaded', () => { const theme = localStorage.getItem('preferred-theme'); if (theme === 'dark') { document.documentElement.setAttribute('data-bs-theme', 'dark'); } });</code></pre> </div> </div> <div class="paragraph"> <p>Pendekatan ini tampak logis pada pandangan pertama. Kami menunggu hingga DOM siap, lalu kami menerapkan tema. Sederhana, bukan? Sayangnya, kesederhanaan ini menyembunyikan cacat fundamental yang terkait dengan timing siklus rendering peramban.</p> </div> </div> <div class="sect2"> <h3 id="_memahami_acara_domcontentloaded">Memahami Acara DOMContentLoaded</h3> <div class="paragraph"> <p>Kejadian`DOMContentLoaded`terpicu ketika dokumen HTML awal telah sepenuhnya dimuat dan dianalisis oleh peramban,<strong>tanpa menunggu</strong>akhir pemuatan stylesheets, gambar, dan subframe. Ini adalah poin penting untuk dipahami.</p> </div> <div class="paragraph"> <p>Berikut adalah urutan tipikal peristiwa:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Peramban mulai mengunduh HTML</p> </li> <li> <p>Dia menganalisis HTML seiring diterimaannya</p> </li> <li> <p>Dia menemukan tag`<link>`untuk CSS dan mulai mengunduhnya</p> </li> <li> <p>Dia menemukan tag`<script>`dan mengeksekusi mereka (sesuai tipe dan atribut mereka)</p> </li> <li> <p>Dia membangun DOM (Document Object Model)</p> </li> <li> <p><strong>Peristiwa <code>DOMContentLoaded</code> terpicu</strong></p> </li> <li> <p>Dia terus menerapkan gaya dan melakukan layout</p> </li> <li> <p>Pengecatan pertama (tampilan) terjadi</p> </li> <li> <p>Acara`load`terjadi ketika semua resource telah dimuat</p> </li> </ol> </div> <div class="paragraph"> <p>Masalah? Di antara langkah 6 (DOMContentLoaded) dan langkah 8 (paint pertama), peramban telah membuat keputusan tentang cara menampilkan halaman. Jika skrip perubahan tema Anda berjalan di langkah 6, sudah terlambat untuk menghindari tampilan pertama dengan gaya default.</p> </div> </div> <div class="sect2"> <h3 id="_masalah_render_blocking">Masalah Render Blocking</h3> <div class="paragraph"> <p>Sebenarnya, timing-nya masih lebih kompleks. Penyelancar modern menggunakan teknik optimisasi yang canggih untuk meningkatkan performa yang dirasakan. Mereka mencoba membuat first paint (First Contentful Paint) secepat mungkin agar pengguna melihat sesuatu di layar.</p> </div> <div class="paragraph"> <p>CSS secara default bersifat "render-blocking", artinya browser menunggu sampai stylesheet terunduh dan diparse sebelum melakukan first paint. Itu masuk akal: kita tidak ingin menampilkan konten yang belum diberi gaya.</p> </div> <div class="paragraph"> <p>Tapi ini adalah jebakannya: ketika peramban menerapkan gaya CSS ini untuk pertama kalinya, ia melakukannya berdasarkan keadaan saat ini dari DOM. Jika atribut`data-bs-theme`belum didefinisikan pada tag`<html>`, perambar akan menerapkan gaya default (biasanya tema terang).</p> </div> <div class="paragraph"> <p>Kemudian, ketika skrip Anda berjalan dan mengubah atribut ini, peramban harus:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Menghitung ulang semua gaya yang dipengaruhi oleh perubahan ini</p> </li> <li> <p>Buat ulang tata letak jika diperlukan</p> </li> <li> <p>Mengulang cat elemen yang terpengaruh</p> </li> </ol> </div> <div class="paragraph"> <p>Proses penghitungan ulang dan penarikan ulang ini yang menyebabkan kedipan yang terlihat.</p> </div> </div> <div class="sect2"> <h3 id="_visualisasi_masalah">Visualisasi Masalah</h3> <div class="paragraph"> <p>Untuk lebih memahami urutan masalah ini, mari kita periksa diagram urutan terperinci:</p> </div> <div id="diag-flux-incorrect" class="listingblock"> <div class="content"> <pre>@startuml actor Utilisateur participant Navigateur participant "Parser HTML" as Parser participant "CSSOM" as CSS participant "Script.js (akhir body)" as Script participant "Mesin render" as Render Utilisateur -> Navigateur: Demande la page activate Navigateur Navigateur -> Parser: Parse le HTML activate Parser Parser -> CSS: Découvre et charge les CSS activate CSS Parser -> Parser: Construit le DOM Parser -> Navigateur: DOM Ready (DOMContentLoaded) deactivate Parser CSS -> CSS: Parse les feuilles de style CSS -> Render: CSSOM Ready deactivate CSS activate Render Render -> Render: Calcule les styles avec data-bs-theme=""note right: Tema default (light) Render -> Navigateur: Premier Paint (Tema Terang) note right: Pengguna melihat tema terang deactivate Render Navigateur -> Script: Menjalankan skrip activate Script Script -> Script: Membaca localStorage Script -> Navigateur: setAttribute('data-bs-theme', 'dark') deactivate Script activate Render Render -> Render: Menghitung ulang gaya dengan data-bs-theme="dark" note right: Thème sombre Render -> Navigateur: Repaint (Thème Sombre) note right: Clignotement visible deactivate Render deactivate Navigateur @enduml</pre> </div> </div> <div class="paragraph"> <p>Diagram ini menggambarkan dengan jelas masalahnya: pertama kali paint terjadi sebelum skrip kami berempatan untuk menentukan tema yang tepat. Repaint yang kemudian menghasilkan berkedip yang terlihat.</p> </div> </div> <div class="sect2"> <h3 id="_upaya_penyelesaian_yang_tidak_efektif">Upaya Penyelesaian yang Tidak Efektif</h3> <div class="paragraph"> <p>Berbagai pendekatan telah dicoba untuk menyelesaikan masalah ini, tetapi kebanyakan memiliki kelemahan masing-masing :</p> </div> <div class="paragraph"> <p><strong>Pendekatan 1: Menyembunyikan konten sampai pemuatan selesai</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">body { opacity: 0; transition: opacity 0.3s; } body.loaded { opacity: 1; }</code></pre> </div> </div> <div class="paragraph"> <p>Pendekatan ini menyembunyikan semua konten sampai JavaScript menentukan tema yang tepat. Masalah? Ini menunda secara buatan penampilan konten, memberi kesan situs lebih lambat. Selain itu, jika JavaScript dinonaktifkan, pengguna tidak akan melihat apa-apa sama sekali!</p> </div> <div class="paragraph"> <p><strong>Pendekatan 2 : Menggunakan loader/spinner</strong></p> </div> <div class="paragraph"> <p>Serupa dengan pendekatan 1, tetapi dengan spinner pemuat. Ini menyembunyikan masalah tetapi tidak meningkatkan performa aktual dan menambahkan penundaan yang dirasa tidak perlu.</p> </div> <div class="paragraph"> <p><strong>Pendekatan 3 : Default ke tema gelap</strong></p> </div> <div class="paragraph"> <p>Beberapa developer mengatur tema gelap sebagai default dalam CSS. Ini mencegah kedipan bagi pengguna tema gelap, tetapi menciptakan masalah yang berlawanan bagi pengguna tema terang!</p> </div> <div class="paragraph"> <p>Tidak ada pendekatan ini yang memuaskan karena mereka mengatasi gejala alih-alih akar masalah.</p> </div> </div> <div class="sect2"> <h3 id="_solusi_yang_benar_bertindak_lebih_awal">Solusi yang Benar : Bertindak Lebih Awal</h3> <div class="paragraph"> <p>Kunci untuk menyelesaikan masalah ini adalah menyadari bahwa kita harus menentukan atribut`data-bs-theme` <strong>sebelum</strong>bahwa peramban belum mulai menerapkan gaya CSS. Ini berarti bahwa skrip kami harus dieksekusi lebih awal dalam siklus hidup halaman, dan ini persis apa yang akan kita jelajahi di bagian berikutnya.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_pemuatan_dini_early_loading">Solusi: Pemuatan Dini (Early Loading)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip_dasar">Prinsip Dasar</h3> <div class="paragraph"> <p>Solusi elegan untuk masalah berkedip kita didasarkan pada prinsip yang sederhana tetapi kuat:<strong>Mengsinkronkan status aplikasi dengan proses rendering peramban</strong>. Sebagai gantinya menunggu hingga halaman dimuat untuk menentukan tema, kita harus menetapkannya<strong>saat</strong>pemuatan, bahkan sebelum gaya CSS diterapkan.</p> </div> <div class="paragraph"> <p>Pendekatan ini disebut "Early Loading" atau "Synchronous Preloading" dalam jargon pengembangan web. Ideanya adalah menjalankan logika deteksi tema kita secepat mungkin dalam siklus hidup halaman, idealnya dalam tag`<head>`, bahkan sebelum peramban mulai mengunduh file CSS.</p> </div> </div> <div class="sect2"> <h3 id="_mengapa_head_adalah_tempat_yang_ideal">Mengapa <code><head></code> adalah tempat yang ideal</h3> <div class="paragraph"> <p>Le `<head>`Sebuah elemen dari dokumen HTML diproses secara berurutan oleh peramban, dari atas ke bawah. Setiap elemen diproses dalam urutan tempat ia muncul. Karakteristik ini krusial untuk solusi kita.</p> </div> <div class="paragraph"> <p>Ketika peramban menemui sebuah tag`<script>`dalam`<head>`tanpa atribut-atribut`async` ou <code>defer</code>, il :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Menginterupsi parsing HTML</strong></p> </li> <li> <p><strong>Unduh skrip</strong>(jika eksternal) atau tempat tidur (jika inline)</p> </li> <li> <p><strong>Jalankan skrip segera</strong></p> </li> <li> <p><strong>Melanjutkan parsing HTML</strong></p> </li> </ol> </div> <div class="paragraph"> <p>Perilaku ini, yang sering dianggap sebagai masalah performa (sebab itu rekomendasi biasa adalah meletakkan script di akhir halaman), menjadi sekutu kita dalam kasus spesifik ini. Dengan menempatkan script deteksi tema kita di awal du`<head>`, kami menjamin bahwa dieksekusi sebelum browser bertemu dengan tag`<link>`dari lembar gaya kami.</p> </div> </div> <div class="sect2"> <h3 id="_arsitektur_solusi_dalam_tiga_lapisan">Arsitektur Solusi dalam Tiga Lapisan</h3> <div class="paragraph"> <p>Solusi lengkap kami terdiri dari tiga lapisan yang saling terkait, masing-masing berperan secara spesifik :</p> </div> <div class="paragraph"> <p><strong>Lapisan 1 : Persistensi (localStorage)</strong> Lapisan ini bertanggung jawab atas penyimpanan dan pemulihan pilihan pengguna antar sesi</p> </div> <div class="paragraph"> <p><strong>Lapisan 2 : Sinkronisasi Dini (script inline dalam <code><head></code>)</strong> Lapisan ini mensinkronkan keadaan aplikasi dengan DOM sebelum rendering awal</p> </div> <div class="paragraph"> <p><strong>Lapisan 3 : Gaya Responsif (CSS dengan selektor atribut)</strong> Lapisan ini menentukan gaya visual berdasarkan keadaan yang ditentukan oleh lapisan 2.</p> </div> <div class="paragraph"> <p>Mari kita jelajahi setiap lapisan secara detail sekarang</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_1_menyimpan_pilihan_pengguna">Langkah 1: Menyimpan Pilihan Pengguna</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_localstorage_memori_persisten_anda">localStorage : Memori Persisten Anda</h3> <div class="paragraph"> <p>Le <code>localStorage`adalah API Web Storage yang memungkinkan penyimpanan pasangan kunci-nilai dalam browser secara persisten. Berbeda dengan cookies, data`localStorage</code>:</p> </div> <div class="ulist"> <ul> <li> <p>Tidak pernah dikirim ke server secara otomatis</p> </li> <li> <p>Mempunyai kapasitas penyimpanan yang lebih besar (biasanya 5-10 MB)</p> </li> <li> <p>Tidak memiliki tanggal kedaluwarsa (bertahan sampai dihapus secara eksplisit)</p> </li> <li> <p>Dibatasi pada protokol dan domain (Same-Origin Policy)</p> </li> </ul> </div> <div class="paragraph"> <p>Untuk kasus penggunaan kita, yang`localStorage`adalah sempurna karena :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Kami tidak perlu berbagi informasi ini dengan server</p> </li> <li> <p>Kami ingin preferensi tersebut tetap bertahan selamanya</p> </li> <li> <p>Ukuran penyimpanan yang diperlukan sangat kecil (beberapa byte)</p> </li> </ol> </div> </div> <div class="sect2"> <h3 id="_implementasi_cadangan_tema">Implementasi Cadangan Tema</h3> <div class="paragraph"> <p>Berikut cara kami menyimpan pilihan pengguna saat ia mengubah tema :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Fonction complète pour changer le thème function setTheme(newTheme) { // Validation de l'entrée if (!['light', 'dark', 'auto'].includes(newTheme)) { console.error('Thème invalide:', newTheme); return; } try { // Sauvegarde dans localStorage localStorage.setItem('preferred-theme', newTheme); // Application immédiate dans le DOM document.documentElement.setAttribute('data-bs-theme', newTheme); // Dispatch d'un événement personnalisé pour notifier d'autres composants window.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: newTheme } })); console.log('Thème changé:', newTheme); } catch (error) { console.error('Erreur lors de la sauvegarde du thème:', error); // Fallback : on applique quand même le thème visuellement document.documentElement.setAttribute('data-bs-theme', newTheme); } } // Exemple d'utilisation avec un bouton document.getElementById('theme-toggle').addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; setTheme(newTheme); });</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_manajemen_kasus_kesalahan">Manajemen Kasus Kesalahan</h3> <div class="paragraph"> <p>Penting untuk mengelola kasus di mana`localStorage`Tidak tersedia atau tidak dapat diakses. Beberapa skenario dapat mencegah akses ke`localStorage` :</p> </div> <div class="paragraph"> <p><strong>Navigasi pribadi ketat</strong>Safari dalam mode penelusuran pribadi menimbulkan pengecualian`QuotaExceededError`saat percobaan menulis dalam`localStorage`.</p> </div> <div class="paragraph"> <p><strong>Pengaturan privasi</strong>: Beberapa peramban atau ekstensi privasi dapat memblokir akses ke`localStorage`.</p> </div> <div class="paragraph"> <p><strong>Keterbatasan domain</strong> : Le `localStorage`tidak dapat diakses pada protokol`file://`di beberapa peramban.</p> </div> <div class="paragraph"> <p><strong>Ruang penyimpanan penuh</strong>Meskipun jarang, ruang penyimpanan dapat sepenuhnya terisi.</p> </div> <div class="paragraph"> <p>Karena itu kode kita menggunakan sebuah blok`try…​catch`Untuk menangani kasus-kasus ini dengan anggun, sambil terus menawarkan fungsionalitas perubahan tema meskipun persistensi tidak tersedia.</p> </div> </div> <div class="sect2"> <h3 id="_strategi_persistensi_lanjutan">Strategi Persistensi Lanjutan</h3> <div class="paragraph"> <p>Untuk aplikasi yang lebih canggih, Anda dapat mempertimbangkan strategi tambahan:</p> </div> <div class="paragraph"> <p><strong>Sinkronisasi server (opsional)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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>Pendekatan ini memungkinkan sinkronisasi preferensi antar perangkat untuk pengguna yang terhubung, sambil tetap menjaga responsivitas lokal yang langsung.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_2_skrip_preload_di_head">Langkah 2: Skrip Preload di `<head></h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_inti_solusi">Inti Solusi</h3> <div class="paragraph"> <p>Ini adalah tempat di mana sihir tersebut benar-benar berfungsi. Kami akan menempatkan sebuah skrip kecil.<strong>secara langsung</strong>langsung di dalam kita`<head>`, sebelum semua tag kami`<link>`de lembar gaya. Skrip ini sengaja dibuat minimalis, mandiri, dan dirancang untuk berjalan secepat mungkin.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mon Site Incroyable</title> <!-- ========================================== NOTRE SCRIPT MAGIQUE DE PRÉ-CHARGEMENT Ce script DOIT être le premier élément dans le <head> après les meta tags ========================================== --> <script> // IIFE pour ne pas polluer le scope global (function() { 'use strict'; try { // Lecture de la préférence sauvegardée const savedTheme = localStorage.getItem('preferred-theme'); // Si une préférence existe, on l'applique immédiatement if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); } // Optionnel : Détecter la préférence système si aucune sauvegarde else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); } // Sinon, le thème par défaut du CSS sera utilisé (généralement 'light') } catch (error) { // En cas d'erreur (localStorage bloqué, etc.), on log discrètement // et on laisse le thème par défaut s'appliquer console.warn('Impossible de charger la préférence de thème:', error); } })(); </script> <!-- FIN DU SCRIPT MAGIQUE --> <!-- Les feuilles de style sont chargées APRÈS le script --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <!-- Autres ressources du head --> <link rel="icon" href="favicon.ico"> </head> <body> <!-- Contenu de la page --> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_anatomi_skrip_setiap_baris_penting">Anatomi Skrip : Setiap Baris Penting</h3> <div class="paragraph"> <p>Mari kita pecah skrip ini baris demi baris untuk memahami setiap keputusan desain:</p> </div> <div class="paragraph"> <p><strong>IIFE (fungsi yang segera dipanggil)</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">(function() { // ... })();</code></pre> </div> </div> <div class="paragraph"> <p>Struktur ini membuat sebuah fungsi yang dieksekusi segera. Mengapa? Untuk mengisolasi variabel kita dalam cakupan lokal dan menghindari pencemaran cakupan global. Meskipun kita hanya menggunakan`const`(yang memiliki scope blok), IIFE adalah praktik yang baik yang membuat niat kita jelas dan melindungi dari konflik nama yang mungkin.</p> </div> <div class="paragraph"> <p><strong>Mode Ketat</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">'use strict';</code></pre> </div> </div> <div class="paragraph"> <p>Directive ini mengaktifkan mode ketat JavaScript, yang : - Melarang penggunaan variabel yang tidak dideklarasikan - Menghasilkan kesalahan untuk operasi berbahaya - Meningkatkan performa di beberapa mesin JavaScript</p> </div> <div class="paragraph"> <p>Untuk skrip kritis seperti ini, kami ingin keamanan maksimal.</p> </div> <div class="paragraph"> <p><strong>Blok try…​catch</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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>Blok ini sangat penting. Ia menjamin bahwa jika terjadi sesuatu yang salah (localStorage terblokir, kesalahan sintaks improbable, dsb.), skrip kita tidak akan menghambat pemuatan seluruh halaman. Penggunaan`console.warn`daripada`console.error`mengindikasikan bahwa ini bukan masalah kritis</p> </div> <div class="paragraph"> <p><strong>Pembacaan localStorage</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const savedTheme = localStorage.getItem('preferred-theme');</code></pre> </div> </div> <div class="paragraph"> <p>Baris ini dapat menimbulkan pengecualian dalam beberapa konteks (privatisasi Safari yang ketat). Itu sebabnya ia berada dalam blok try…​catch.</p> </div> <div class="paragraph"> <p><strong>Aplikasi bersyarat</strong></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">if (savedTheme) { document.documentElement.setAttribute('data-bs-theme', savedTheme); }</code></pre> </div> </div> <div class="paragraph"> <p>Kami menerapkan tema hanya jika kami menemukan tema yang telah disimpan. Jika tidak, kita membiarkan CSS menggunakan tema default-nya. Pendekatan ini lebih robust daripada nilai default yang di-hardcode dalam JavaScript.</p> </div> </div> <div class="sect2"> <h3 id="_deteksi_preferensi_sistem_bonus">Deteksi Preferensi Sistem (Bonus)</h3> <div class="paragraph"> <p>Penambahan yang opsional namun elegan adalah mendeteksi preferensi tema sistem operasi pengguna jika mereka belum membuat pilihan eksplisit dalam aplikasi Anda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark'); }</code></pre> </div> </div> <div class="paragraph"> <p>Fitur ini menggunakan Media Query`prefers-color-scheme`untuk menanyakan sistem. Pada macOS, Windows 10+, iOS, dan Android modern, permintaan ini mengembalikan preferensi sistem pengguna.</p> </div> <div class="paragraph"> <p><strong>Keuntungan :</strong> - Pengalaman yang dipersonalisasi sejak pertama kali berkunjung - Konsistensi dengan lingkungan sistem pengguna - Tidak perlu penyimpanan untuk kunjungan pertama</p> </div> <div class="paragraph"> <p><strong>Pertimbangan:</strong> - Tidak semua browser mendukung fitur ini (tapi dukungannya sangat baik sejak 2020) - Verifikasi`window.matchMedia`memastikan kompatibilitas - Pengguna selalu dapat mengganti pilihan ini</p> </div> </div> <div class="sect2"> <h3 id="_kinerja_mengapa_skrip_ini_cepat">Kinerja : Mengapa skrip ini cepat</h3> <div class="paragraph"> <p>Skrip pre-load kami dirancang untuk sangat cepat:</p> </div> <div class="paragraph"> <p><strong>Ukuran minimum</strong>Kira-kira 300 byte yang tidak dipersempit, 200 byte yang dipersempit. Itu dianggap tidak signifikan dibandingkan dengan gambar atau pustaka JavaScript apa pun.</p> </div> <div class="paragraph"> <p><strong>secara langsung</strong>Tidak ada permintaan HTTP tambahan. Skrip ada di dalam HTML, sehingga ia langsung tersedia.</p> </div> <div class="paragraph"> <p><strong>Operasi sinkron sederhana</strong>: Membaca sebuah kunci dalam localStorage (operasi sangat cepat) dan modifikasi sebuah atribut DOM (operasi bawaan peramban).</p> </div> <div class="paragraph"> <p><strong>Tidak ada ketergantungan</strong>: Tidak ada framework, tidak ada perpustakaan, hanya JavaScript vanilla. Tidak ada waktu pemuatan, tidak ada parsing dependensi.</p> </div> <div class="paragraph"> <p><strong>Eksekusi tunggal</strong>: Skrip ini dijalankan hanya sekali saat dimuat. Tidak ada listener peristiwa, tidak ada perulangan, tidak ada perhitungan kompleks.</p> </div> <div class="paragraph"> <p>Dalam praktiknya, pada perangkat modern, skrip ini berjalan dalam kurang dari 1 milidetik, waktu yang tidak terasa yang tidak memiliki dampak apa pun pada kinerja pemuatan halaman.</p> </div> </div> <div class="sect2"> <h3 id="_penempatan_optimal_di_head">Penempatan optimal di `<head></h3> <div class="paragraph"> <p>Urutan elemen di dalam`<head>`penting. Berikut urutan yang disarankan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><head> <!-- 1. Métadonnées critiques --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 2. Notre script de pré-chargement (IMMÉDIATEMENT après les meta) --> <script> (function() { /* notre code */ })(); </script> <!-- 3. Titre de la page --> <title>Mon Site</title> <!-- 4. Feuilles de style --> <link rel="stylesheet" href="styles.css"> <!-- 5. Autres ressources (fonts, favicons, etc.) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="icon" href="favicon.ico"> <!-- 6. Autres scripts avec defer ou async --> <script src="app.js" defer></script> </head></code></pre> </div> </div> <div class="paragraph"> <p>Perintah ini memastikan bahwa :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Charset ditentukan sebelum apa pun pemrosesan teks</p> </li> <li> <p>Skrip kita dieksekusi sebelum CSS dimuat</p> </li> <li> <p>CSS kemudian dimuat dan langsung menerapkan tema yang tepat</p> </li> <li> <p>Sumber daya non-kritis lainnya dimuat terakhir</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_3_kekuatan_selektor_atribut_css">Langkah 3: Kekuatan Selektor Atribut CSS</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sistem_tema_bootstrap_5">Sistem Tema Bootstrap 5</h3> <div class="paragraph"> <p>Bootstrap 5 telah memperkenalkan sistem tema yang elegan berbasis custom properties CSS (variabel CSS) dan selector atribut. Sistem ini menggunakan atribut`data-bs-theme`pada elemen`<html>`untuk menentukan kumpulan variabel warna yang akan diterapkan.</p> </div> <div class="paragraph"> <p>Keindahan sistem ini terletak pada kesederhanaannya: alih-alih memuat berbagai stylesheet atau mengalihkan kelas pada ribuan elemen, kita hanya mengubah satu atribut pada satu elemen, dan CSS melakukan sisa dengan menggunakan kaskad.</p> </div> </div> <div class="sect2"> <h3 id="_struktur_css_untuk_sebuah_sistem_tema">Struktur CSS untuk sebuah Sistem Tema</h3> <div class="paragraph"> <p>Berikut adalah struktur CSS lengkap untuk mengimplementasikan sistem tema yang kuat :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">/** * SYSTÈME DE THÈME COMPLET * Utilise les Custom Properties CSS pour une maintenance facile */ /* ============================================ THÈME PAR DÉFAUT (LIGHT) Défini sur :root pour être le fallback ============================================ */ :root { /* Couleurs de base */ --color-primary: #0d6efd; --color-secondary: #6c757d; --color-success: #198754; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #0dcaf0; /* Couleurs de fond */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; /* Couleurs de texte */ --text-primary: #212529; --text-secondary: #6c757d; --text-tertiary: #adb5bd; /* Couleurs de bordure */ --border-color: #dee2e6; --border-color-subtle: #e9ecef; /* Couleurs d'ombre */ --shadow-sm: rgba(0, 0, 0, 0.075); --shadow-md: rgba(0, 0, 0, 0.15); --shadow-lg: rgba(0, 0, 0, 0.25</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0097_gradle_plugin_dev_func_test_logger_post.html Fri, 7 Nov 2025 00:00:00 +0000 blog/2025/0097_gradle_plugin_dev_func_test_logger_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_masalah_dependensi_pada_gradlerunner">Masalah: Dependensi pada GradleRunner</a> <ul class="sectlevel2"> <li><a href="#_konteks_pengembangan_plugin">Konteks Pengembangan Plugin</a></li> <li><a href="#_dilemma_logging">Dilemma Logging</a></li> <li><a href="#_ide_ide_yang_salah">Ide-ide yang salah</a></li> </ul> </li> <li><a href="#_solusi_logger_independen">Solusi : Logger Independen</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_yang_disarankan">Arsitektur yang disarankan</a></li> <li><a href="#_alur_eksekusi">Alur eksekusi</a></li> </ul> </li> <li><a href="#_implementasi_lengkap">Implementasi lengkap</a> <ul class="sectlevel2"> <li><a href="#_dependensi_gradle">Dependensi Gradle</a></li> <li><a href="#_konfigurasi_logback">Konfigurasi Logback</a></li> <li><a href="#_kelas_test_lengkap">Kelas Test Lengkap</a></li> </ul> </li> <li><a href="#_skema_logging_multi_tingkat">Skema Logging Multi-Tingkat</a></li> <li><a href="#_praktik_terbaik">Praktik Terbaik</a> <ul class="sectlevel2"> <li><a href="#_struktur_logging_yang_direkomendasikan">Struktur logging yang direkomendasikan</a></li> <li><a href="#_simbol_visual_untuk_keterbacaan">simbol visual untuk keterbacaan</a></li> <li><a href="#_ekstraksi_informasi_dari_keluaran">Ekstraksi Informasi dari Keluaran</a></li> </ul> </li> <li><a href="#_perbandingan_sebelumsesudah">Perbandingan Sebelum/Sesudah</a> <ul class="sectlevel2"> <li><a href="#_sebelum_pendekatan_bermasalah">Sebelum : Pendekatan Bermasalah</a></li> <li><a href="#_setelah_pendekatan_robust">Setelah: Pendekatan Robust</a></li> </ul> </li> <li><a href="#_diagram_rekapitulatif">Diagram Rekapitulatif</a></li> <li><a href="#_jebakan_yang_harus_dihindari">Jebakan yang Harus Dihindari</a> <ul class="sectlevel2"> <li><a href="#_jebakan_no_1_melupakan_forwardoutput">❌ Jebakan No. 1: Melupakan `.forwardOutput()</a></li> <li><a href="#_jebakan_nomor_2_logger_belum_diinisialisasi">❌ Jebakan nomor 2: Logger belum diinisialisasi</a></li> <li><a href="#_jebakan_nomor_3_logging_berlebih">❌ Jebakan nomor 3 : Logging Berlebih</a></li> </ul> </li> <li><a href="#_hasil_dan_metrik">Hasil dan Metrik</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_sumber_daya">Sumber daya</a></li> <li><a href="#_pergi_lebih_jauh">Pergi Lebih Jauh</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Selama mengembangkan plugin Gradle, pengujian fungsional sangat penting untuk memvalidasi perilaku plugin dalam lingkungan Gradle yang sebenarnya. Namun, pertanyaan penting ini muncul dengan cepat :<strong>bagaimana cara menyiapkan sistem pencatatan yang efektif tanpa membuat dependensi yang bermasalah dengan <code>GradleRunner</code> ?</strong></p> </div> <div class="paragraph"> <p>Dalam artikel ini, kita akan menjelajahi :</p> </div> <div class="ulist"> <ul> <li> <p>Masalah logging dalam tes fungsional Gradle</p> </li> <li> <p>Arsitektur solusi yang kuat dengan SLF4J dan Logback</p> </li> <li> <p>Implementasi lengkap dengan contoh konkret</p> </li> <li> <p>Praktik terbaik dan jebakan yang harus dihindari</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_dependensi_pada_gradlerunner">Masalah: Dependensi pada GradleRunner</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_konteks_pengembangan_plugin">Konteks Pengembangan Plugin</h3> <div class="paragraph"> <p>Saat kita mengembangkan sebuah plugin Gradle, kita biasanya menggunakan`GradleRunner`Gradle TestKit untuk menjalankan build pengujian:</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="_dilemma_logging">Dilemma Logging</h3> <div class="paragraph"> <p>Masalah utamanya adalah sebagai berikut :<strong>logging tidak boleh bergantung pada objek yang tidak yakin tentang inisialisasinya</strong>.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur Bermasalah" { RECTANGLE Test { + runTest() } RECTANGLE GradleRunner { + build() + getLogger() ❌ } RECTANGLE Logger { + info() + debug() } Test --> GradleRunner : dépend de Logger ..> GradleRunner : dépend de ❌ } note right of Logger Problème: Le logger dépend du GradleRunner qui peut ne pas être initialisé end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_ide_ide_yang_salah">Ide-ide yang salah</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>Jangan lakukan ini :</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="_solusi_logger_independen">Solusi : Logger Independen</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_yang_disarankan">Arsitektur yang disarankan</h3> <div class="paragraph"> <p>Solusi adalah menggunakan logger<strong>sepenuhnya mandiri</strong> du <code>GradleRunner</code>, diinisialisasikan pada tingkat kelas pengujian.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class skinparam backgroundColor #FEFEFE skinparam componentStyle rectangle package "Arsitektur yang benar" { RECTANGLE TestClass { + {static} logger: Logger ✓ + runTest() } RECTANGLE SLF4J { + LoggerFactory } RECTANGLE GradleRunner { + build() + forwardOutput() } RECTANGLE "Output Konsol" as Output { + captured text } TestClass --> SLF4J : utilise ✓ TestClass --> GradleRunner : utilise GradleRunner --> Output : génère TestClass --> Output : analyse } note top of TestClass Le logger est initialisé indépendamment du GradleRunner end note note bottom of GradleRunner .forwardOutput() permet de capturer la sortie pour analyse end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_alur_eksekusi">Alur eksekusi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam backgroundColor #FEFEFE participant "JUnit" as junit participant "KelasUji" as test participant "Pencatat (SLF4J)" as logger participant "GradleRunner" as runner participant "Membangun Gradle" as gradle activate junit junit -> test : load class activate test test -> logger : initialize (companion) activate logger logger --> test : logger ready ✓ deactivate logger junit -> test : @BeforeAll test -> logger : info("Initialisation...") junit -> test : @BeforeEach test -> logger : debug("Uji coba...") junit -> test : @Test test -> logger : info("TEST: Memulai...") test -> runner : create() activate runner test -> runner : .forwardOutput() test -> runner : .withArguments(...) test -> runner : .build() runner -> gradle : execute build activate gradle gradle --> runner : output text deactivate gradle runner --> test : BuildResult + output deactivate runner test -> logger : debug("Menganalisis keluaran...") test -> test : analyze output test -> logger : info("✓ Tes berhasil") test --> junit : success deactivate test deactivate junit @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_implementasi_lengkap">Implementasi lengkap</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_dependensi_gradle">Dependensi Gradle</h3> <div class="paragraph"> <p>Tambahkan dependensi yang diperlukan pada Anda`build.gradle.kts`</think> (Empty output)</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="_konfigurasi_logback">Konfigurasi Logback</h3> <div class="paragraph"> <p>Buat file`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"><?xml version="1.0" encoding="UTF-8"?> <configuration> <!-- Appender console avec format lisible --> <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern> </encoder> </appender> <!-- Appender fichier pour conservation --> <appender name="FILE" class="ch.qos.logback.core.FileAppender"> <file>build/test-results/functional-tests.log</file> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern> </encoder> </appender> <!-- Logger pour vos tests --> <logger name="com.cheroliv.bakery" level="DEBUG"/> <!-- Réduire le bruit de Gradle --> <logger name="org.gradle" level="WARN"/> <!-- Configuration racine --> <root level="INFO"> <appender-ref ref="STDOUT"/> <appender-ref ref="FILE"/> </root> </configuration></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_kelas_test_lengkap">Kelas Test Lengkap</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">package com.cheroliv.bakery import org.gradle.testkit.runner.GradleRunner import org.gradle.testkit.runner.TaskOutcome import org.junit.jupiter.api.* import org.junit.jupiter.api.TestInstance.Lifecycle.PER_CLASS import org.junit.jupiter.api.io.TempDir import org.slf4j.Logger import org.slf4j.LoggerFactory import java.io.File import kotlin.test.assertEquals import kotlin.test.assertTrue @TestInstance(PER_CLASS) class BakeryPluginFunctionalTest { @field:TempDir lateinit var projectDir: File private val buildFile by lazy { projectDir.resolve("build.gradle.kts") } private val settingsFile by lazy { projectDir.resolve("settings.gradle.kts") } companion object { // ✓ Logger indépendant, initialisé au chargement de la classe private val logger: Logger = LoggerFactory.getLogger( BakeryPluginFunctionalTest::class.java ) @JvmStatic @BeforeAll fun globalSetup() { logger.info("═".repeat(60)) logger.info("DÉMARRAGE DE LA SUITE DE TESTS FONCTIONNELS") logger.info("═".repeat(60)) } @JvmStatic @AfterAll fun globalTeardown() { logger.info("═".repeat(60)) logger.info("FIN DE LA SUITE DE TESTS") logger.info("═".repeat(60)) } } @BeforeEach fun setup() { logger.info("─".repeat(60)) logger.info("Préparation de l'environnement de test") logger.debug("Répertoire de test: ${projectDir.absolutePath}") settingsFile.writeText(""" rootProject.name = "test-bakery-project" """.trimIndent()) logger.debug("✓ settings.gradle.kts créé") } @AfterEach fun teardown(testInfo: TestInfo) { logger.info("✓ Test terminé: ${testInfo.displayName}") logger.info("─".repeat(60)) } @Test fun `plugin can be applied successfully`() { logger.info("TEST: Application du plugin Bakery") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) logger.debug("Fichier build.gradle.kts créé") logger.debug("Lancement du build Gradle...") val startTime = System.currentTimeMillis() val result = GradleRunner.create() .forwardOutput() // ← Important : capture la sortie .withPluginClasspath() .withArguments("tasks", "--group=bakery", "--stacktrace") .withProjectDir(projectDir) .build() val duration = System.currentTimeMillis() - startTime logger.info("Build terminé en ${duration}ms") // Analyse de la sortie logger.debug("Analyse de la sortie Gradle...") val outputLines = result.output.lines() logger.debug("Nombre de lignes capturées: ${outputLines.size}") // Validation val expectedTasks = listOf("bake", "printConfigPath", "printJBakeClasspath") logger.info("Vérification des tâches attendues:") expectedTasks.forEach { task -> val found = result.output.contains(task) logger.debug(" ${if (found) "✓" else "✗"} $task") assertTrue(found, "Task '$task' should be available") } logger.info("✓ Plugin appliqué avec succès - ${expectedTasks.size} tâches trouvées") } @Test fun `bake task executes and prints version`() { logger.info("TEST: Exécution de la tâche 'bake'") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) logger.debug("Exécution de 'gradle bake'...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("bake", "--info") // --info pour plus de détails .withProjectDir(projectDir) .build() // Extraction d'informations depuis la sortie logger.debug("Recherche du message 'Baking site'...") val hasBakingMessage = result.output.contains("Baking site with Bakery Plugin!") logger.debug("Recherche de la version JBake...") val hasVersionMessage = result.output.contains("Using JBake version:") // Extraction de la version (si présente) val versionRegex = Regex("Using JBake version: (.+)") val versionMatch = versionRegex.find(result.output) if (versionMatch != null) { val version = versionMatch.groupValues[1] logger.info("Version JBake détectée: $version") } // Validation assertTrue(hasBakingMessage, "Message 'Baking site' attendu") assertTrue(hasVersionMessage, "Message de version attendu") assertEquals(TaskOutcome.SUCCESS, result.task(":bake")?.outcome) logger.info("✓ Tâche 'bake' exécutée avec succès") } @Test fun `analyze output with structured logging`() { logger.info("TEST: Analyse structurée de la sortie") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } task("diagnostics") { doLast { println("[DIAG] Project: ${'$'}{project.name}") println("[DIAG] Build dir: ${'$'}{project.buildDir}") println("[DIAG] Plugin applied: true") val config = configurations.findByName("jbakeRuntime") println("[DIAG] JBake config exists: ${'$'}{config != null}") if (config != null) { println("[DIAG] Dependencies count: ${'$'}{config.dependencies.size}") } } } """.trimIndent()) logger.debug("Exécution de la tâche diagnostics...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("diagnostics", "--quiet") .withProjectDir(projectDir) .build() // Analyse structurée logger.info("Extraction des informations de diagnostic:") val diagLines = result.output.lines() .filter { it.startsWith("[DIAG]") } logger.debug("Nombre de lignes de diagnostic: ${diagLines.size}") diagLines.forEach { line -> logger.info(" $line") // Analyse spécifique par type de ligne when { line.contains("Project:") -> { val projectName = line.substringAfter("Project:").trim() logger.debug(" → Nom du projet extrait: '$projectName'") } line.contains("Dependencies count:") -> { val count = line.substringAfter("count:").trim() logger.debug(" → Nombre de dépendances: $count") } } } assertTrue(diagLines.isNotEmpty(), "Des lignes de diagnostic devraient être présentes") logger.info("✓ Analyse structurée terminée - ${diagLines.size} lignes analysées") } @Test fun `test with error handling`() { logger.info("TEST: Gestion d'erreurs avec logging") buildFile.writeText(""" plugins { id("com.cheroliv.bakery") } """.trimIndent()) try { logger.debug("Tentative d'exécution...") val result = GradleRunner.create() .forwardOutput() .withPluginClasspath() .withArguments("printJBakeClasspath") .withProjectDir(projectDir) .build() val outcome = result.task(":printJBakeClasspath")?.outcome logger.info("Outcome: $outcome") if (outcome == TaskOutcome.SUCCESS) { logger.info("✓ Exécution réussie") } else { logger.warn("⚠ Outcome inattendu: $outcome") } assertEquals(TaskOutcome.SUCCESS, outcome) } catch (e: Exception) { logger.error("✗ Échec du test", e) logger.error("Type d'exception: ${e.javaClass.simpleName}") logger.error("Message: ${e.message}") // Log de la stack trace si nécessaire if (logger.isDebugEnabled) { logger.debug("Stack trace complète:", e) } throw e } } }</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_skema_logging_multi_tingkat">Skema Logging Multi-Tingkat</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam backgroundColor #FEFEFE package "Tingkat log" { rectangle "jejak" #E8E8E8 { note Détails d'exécution très fins • Valeurs de variables • Appels de méthodes internes end note } rectangle "DEBUG" #D0E8FF { note Informations de débogage • Étapes intermédiaires • Contenu des fichiers créés • Analyse de la sortie Gradle end note } rectangle "informasi" #C8FFC8 { note Informations principales • Début/fin de test • Résultats de validation • Durée d'exécution end note } rectangle "WARN" #FFFFC8 { note Avertissements • Comportements inattendus • Outcomes inhabituels end note } rectangle "kesalahan" #FFC8C8 { note Erreurs • Échecs de test • Exceptions • Stack traces end note } } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_terbaik">Praktik Terbaik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_logging_yang_direkomendasikan">Struktur logging yang direkomendasikan</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="_simbol_visual_untuk_keterbacaan">simbol visual untuk keterbacaan</h3> <div class="paragraph"> <p>Gunakan simbol Unicode untuk meningkatkan keterbacaan log:</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="_ekstraksi_informasi_dari_keluaran">Ekstraksi Informasi dari Keluaran</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="_perbandingan_sebelumsesudah">Perbandingan Sebelum/Sesudah</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sebelum_pendekatan_bermasalah">Sebelum : Pendekatan Bermasalah</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="_setelah_pendekatan_robust">Setelah: Pendekatan Robust</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="_diagram_rekapitulatif">Diagram Rekapitulatif</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain skinparam backgroundColor #FEFEFE title Alur lengkap logging dalam pengujian fungsional actor "Pengembang" as dev participant "JUnit" as junit participant "TestClass" as test participant "Pencatat (SLF4J)" as logger participant "Logback" as logback participant "GradleRunner" as runner participant "Konsol/File" as output dev -> junit : lance les tests activate junit junit -> test : charge la classe activate test test -> logger : initialize (companion) activate logger logger -> logback : configure activate logback logback --> logger : ready deactivate logback logger --> test : ✓ deactivate logger == Phase de Setup == junit -> test : @BeforeAll test -> logger : info("Inisialisasi") logger -> output : [INFO] Initialisation junit -> test : @BeforeEach test -> logger : debug("tes setup") logger -> output : [DEBUG] Setup test == Phase de Test == junit -> test : @Test test -> logger : info("Starting") logger -> output : [INFO] TEST: Starting test -> runner : create() activate runner test -> runner : .forwardOutput() test -> runner : .build() runner -> runner : execute Gradle runner --> test : BuildResult + output text deactivate runner test -> logger : debug("Menganalisis output") logger -> output : [DEBUG] Analyzing output test -> test : assertions test -> logger : info("✓ Test berhasil") logger -> output : [INFO] ✓ Test passed == Phase de Cleanup == junit -> test : @AfterEach test -> logger : debug("pembersihan") logger -> output : [DEBUG] Cleanup junit -> test : @AfterAll test -> logger : info("Selesai pengujian") logger -> output : [INFO] Fin des tests test --> junit : ✓ all tests passed deactivate test deactivate junit dev <-- junit : rapport de tests @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_jebakan_yang_harus_dihindari">Jebakan yang Harus Dihindari</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_jebakan_no_1_melupakan_forwardoutput">❌ Jebakan No. 1: Melupakan `.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="_jebakan_nomor_2_logger_belum_diinisialisasi">❌ Jebakan nomor 2: Logger belum diinisialisasi</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="_jebakan_nomor_3_logging_berlebih">❌ Jebakan nomor 3 : Logging Berlebih</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="_hasil_dan_metrik">Hasil dan Metrik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dengan pendekatan ini, Anda mendapatkan :</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">Metrik</th> <th class="tableblock halign-left valign-top">sebelum</th> <th class="tableblock halign-left valign-top">setelah</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Baris kode</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~50 baris</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~80 baris (+60%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">waktu debugging</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~30 menit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">~5 menit (-83%)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Kesalahan terdeteksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">dasar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">rinci</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">perawatan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sulit</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">sederhana</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kemerdekaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">❌ Bersatu</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">✓ mandiri</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pembuatan sistem logging yang kuat dalam tes fungsional plugin Gradle didasarkan pada prinsip sederhana :<strong>kemerdekaan</strong>.</p> </div> <div class="paragraph"> <p>Poin-poin penting yang harus diingat :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Logger independen</strong>: Diinisialisasi dalam`companion object`</p> </li> <li> <p><strong>SLF4J + Logback</strong>: Stack yang terbukti dan dapat dikonfigurasi</p> </li> <li> <p><strong>.forwardOutput()</strong>: Penangkapan output Gradle</p> </li> <li> <p><strong>Pencatatan terstruktur</strong>: INFO untuk langkah, DEBUG untuk detail</p> </li> <li> <p><strong>Analisis output</strong>Ekstraksi informasi sejak`result.output`</p> </li> </ol> </div> <div class="paragraph"> <p>Pendekatan ini menjamin tes<strong>dapat dipelihara</strong>, <strong>bisa di-debug</strong> et <strong>kuat</strong>, sambil tetap mematuhi prinsip-prinsip desain yang kuat.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_daya">Sumber daya</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/test_kit.html">Gradle TestKit dokumentasi</a></p> </li> <li> <p><a href="https://www.slf4j.org/manual.html">Panduan SLF4J</a></p> </li> <li> <p><a href="https://logback.qos.ch/manual/configuration.html">Konfigurasi Logback</a></p> </li> <li> <p><a href="https://github.com/gradle/gradle/tree/master/subprojects/test-kit">Kode Sumber Gradle TestKit</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_pergi_lebih_jauh">Pergi Lebih Jauh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam artikel berikutnya, kami akan menjelajahi:</p> </div> <div class="ulist"> <ul> <li> <p>Integrasi berkelanjutan dengan logging terstruktur</p> </li> <li> <p>Laporan HTML pengujian dengan log terintegrasi</p> </li> <li> <p>Debugging lanjutan dengan JVM attach</p> </li> <li> <p>Kinerja dan optimasi logging</p> </li> </ul> </div> <div class="paragraph"> <p><em>Artikel ini merupakan bagian dari seri \"Pengembangan Plugin Gradle\" di blog teknis saya.</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0096_afficher-couleurs-asciidoc_post.html Sat, 1 Nov 2025 00:00:00 +0000 blog/2025/0096_afficher-couleurs-asciidoc_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_masalah">Masalah</a> <ul class="sectlevel2"> <li><a href="#_konteks_penggunaan">Konteks penggunaan</a></li> <li><a href="#_pendekatan_yang_mungkin">Pendekatan yang mungkin</a> <ul class="sectlevel3"> <li><a href="#_pilihan_1_karakter_unicode">Pilihan 1 : Karakter Unicode</a></li> <li><a href="#_opsi_2_gambar_eksternal">Opsi 2 : Gambar Eksternal</a></li> <li><a href="#_opsi_3_peran_css_kustom">Opsi 3 : Peran CSS Kustom</a></li> <li><a href="#_opsi_4_injeksi_html_solusi_yang_dipilih">Opsi 4 : Injeksi HTML (solusi yang dipilih)</a></li> </ul> </li> </ul> </li> <li><a href="#_solusi_injeksi_html_dengan">Solusi : Injeksi HTML dengan </a> <ul class="sectlevel2"> <li><a href="#_prinsip_kerja">Prinsip kerja</a></li> <li><a href="#_implementasi">Implementasi</a> <ul class="sectlevel3"> <li><a href="#_penjelasan_properti_css">Penjelasan properti CSS</a></li> </ul> </li> <li><a href="#_contoh_lengkap">Contoh lengkap</a></li> </ul> </li> <li><a href="#_optimisasi_dan_praktik_terbaik">Optimisasi dan praktik terbaik</a> <ul class="sectlevel2"> <li><a href="#_mengelola_warna_terang">Mengelola warna terang</a></li> <li><a href="#_mengatur_ukuran_persegi">Mengatur ukuran persegi</a></li> <li><a href="#_membuat_varian">Membuat varian</a> <ul class="sectlevel3"> <li><a href="#_lingkaran_berwarna">lingkaran berwarna</a></li> <li><a href="#_persegi_dengan_batas_berwarna">Persegi dengan batas berwarna</a></li> </ul> </li> </ul> </li> <li><a href="#_arsitektur_solusi">Arsitektur solusi</a></li> <li><a href="#_manfaat_dan_batasan">Manfaat dan batasan</a> <ul class="sectlevel2"> <li><a href="#_kelebihan">kelebihan</a></li> <li><a href="#_keterbatasan">Keterbatasan</a></li> <li><a href="#_peningkatan_aksesibilitas">Peningkatan aksesibilitas</a></li> </ul> </li> <li><a href="#_contoh_konkret_dokumentasi_tema">Contoh konkret: Dokumentasi tema</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_sumber_daya">Sumber daya</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat menyusun dokumentasi teknis, terutama untuk panduan gaya atau spesifikasi antarmuka pengguna, seringkali diperlukan untuk menampilkan palet warna. AsciiDoc, meski sangat kuat untuk dokumentasi, tidak menyediakan sintaksis bawaan untuk menampilkan sampel warna. Artikel ini mengeksplorasi masalah dan menawarkan solusi yang elegan berbasis injeksi HTML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah">Masalah</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_konteks_penggunaan">Konteks penggunaan</h3> <div class="paragraph"> <p>Bayangkan bahwa Anda mendokumentasikan variabel CSS dari tema aplikasi web. Anda membutuhkan :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Daftar kode warna heksadesimal</p> </li> <li> <p>Menampilkan pratinjau visual setiap warna</p> </li> <li> <p>Mempertahankan keterbacaan dokumen sumber</p> </li> <li> <p>Memastikan kompatibilitas dengan generator situs statis seperti JBake</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml left to right direction skinparam packageStyle rectangle actor "Penulis Teknis" as writer actor "Pembaca" as reader rectangle "Dokumentasi AsciiDoc" { usecase "dokumentasikan palet warna" as UC1 usecase "Tampilkan kode heksadesimal" as UC2 usecase "Lihat warna" as UC3 usecase "Menghasilkan situs statis" as UC4 usecase "Melihat dokumentasi" as UC5 } writer --> UC1 UC1 ..> UC2 : include UC1 ..> UC3 : include UC1 --> UC4 UC4 --> UC5 UC5 <-- reader @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pendekatan_yang_mungkin">Pendekatan yang mungkin</h3> <div class="paragraph"> <p>Beberapa solusi dapat dipertimbangkan untuk menampilkan warna dalam dokumen AsciiDoc :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam componentStyle rectangle package "Solusi mungkin" { component "Karakter Unicode" as unicode component "Gambar eksternal" as images component "Peran CSS khusus" as css component "Injeksi HTML" as html } package "Kriteria evaluasi" { component "kesederhanaan" as simple component "portabilitas" as portable component "Personalisasi" as custom component "Pemeliharaan" as maintain } unicode -down-> simple : ✓ unicode -down-> portable : ✓ unicode -down-> custom : ✗ images -down-> simple : ✗ images -down-> portable : ✗ images -down-> custom : ✓ css -down-> simple : ~ css -down-> portable : ✗ css -down-> custom : ✓ html -down-> simple : ✓ html -down-> portable : ✓ html -down-> custom : ✓✓ html -down-> maintain : ✓ note right of html Solution recommandée end note @enduml</pre> </div> </div> <div class="sect3"> <h4 id="_pilihan_1_karakter_unicode">Pilihan 1 : Karakter Unicode</h4> <div class="paragraph"> <p>Penggunaan karakter Unicode seperti`■`(■) adalah sederhana tetapi terbatas:</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>Keterbatasan</strong> : Tidak ada kontrol atas warna, bergantung pada font sistem.</p> </div> </div> <div class="sect3"> <h4 id="_opsi_2_gambar_eksternal">Opsi 2 : Gambar Eksternal</h4> <div class="paragraph"> <p>Buat gambar PNG atau SVG untuk setiap warna:</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>Keterbatasan</strong> : Pemeliharaan yang berat, perbantasan file, tidak ada sinkronisasi otomatis.</p> </div> </div> <div class="sect3"> <h4 id="_opsi_3_peran_css_kustom">Opsi 3 : Peran CSS Kustom</h4> <div class="paragraph"> <p>Menentukan kelas CSS dan menerapkannya melalui peran AsciiDoc :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* [.color-violet]##■## --accent-color: #7952b3</code></pre> </div> </div> <div class="paragraph"> <p><strong>Keterbatasan</strong> : Memerlukan lembar gaya eksternal, definisi sebelumnya semua warna yang mungkin.</p> </div> </div> <div class="sect3"> <h4 id="_opsi_4_injeksi_html_solusi_yang_dipilih">Opsi 4 : Injeksi HTML (solusi yang dipilih)</h4> <div class="paragraph"> <p>Menggunakan makro``untuk menyisipkan HTML dengan gaya inline :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em; background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: #7952b3 (violet Bootstrap)</code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_injeksi_html_dengan">Solusi : Injeksi HTML dengan </h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_prinsip_kerja">Prinsip kerja</h3> <div class="paragraph"> <p>makro``d’AsciiDoc memungkinkan untuk menyisipkan konten mentah yang tidak akan ditafsirkan oleh prosesor AsciiDoc. Hal ini memungkinkan kita untuk langsung menyisipkan HTML dengan gaya CSS inline.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml participant "Dokumen AsciiDoc" as doc participant "Prosesor\nAsciiDoc" as processor participant "pass:[] macro" as pass participant "HTML akhir" as html doc -> processor : Analyse document processor -> pass : Détecte pass:[] pass -> processor : Retourne HTML brut processor -> html : Insère sans transformation html -> html : Navigateur applique styles @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_implementasi">Implementasi</h3> <div class="paragraph"> <p>Berikut struktur HTML untuk disisipkan:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><span style="display:inline-block; width:1em; height:1em; background:#7952b3; vertical-align:middle; margin-right:0.5em"> </span></code></pre> </div> </div> <div class="sect3"> <h4 id="_penjelasan_properti_css">Penjelasan properti CSS</h4> <table class="tableblock frame-all grid-all stretch"> <colgroup> <col style="width: 25%;"> <col style="width: 75%;"> </colgroup> <thead> <tr> <th class="tableblock halign-left valign-top">Properti</th> <th class="tableblock halign-left valign-top">fungsi</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">Memungkinkan pengaturan lebar/tinggi sambil tetap berada dalam alur inline</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">Ukuran persegi relatif terhadap ukuran font (responsif)</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">Warna yang ditampilkan (variabel sesuai kebutuhan Anda)</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">Ratakan persegi dengan teks yang bersebelahan</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">Jarak antara kotak dan teks</p></td> </tr> </tbody> </table> </div> </div> <div class="sect2"> <h3 id="_contoh_lengkap">Contoh lengkap</h3> <div class="paragraph"> <p>Berikut adalah contoh yang mendokumentasikan palet tema :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">== Thème Clair * pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"></span>] --accent-hover: `#61428f` (violet plus foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --card-bg: `#ffffff` (blanc)</code></pre> </div> </div> <div class="paragraph"> <p>Yang menghasilkan rendering berikut:</p> </div> <div class="paragraph"> <p><strong>Tema Terang</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`(putih krem)</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`(hitam sangat gelap)</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`(ungu Bootstrap)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#61428f;vertical-align:middle;margin-right:0.5em"></span> --accent-hover:`#61428f`(ungu lebih gelap)</p> </li> <li> <p><span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span> --card-bg:`#ffffff`(putih)</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_optimisasi_dan_praktik_terbaik">Optimisasi dan praktik terbaik</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_mengelola_warna_terang">Mengelola warna terang</h3> <div class="paragraph"> <p>Untuk warna-warni yang sangat terang (putih, abu-abu sangat terang), tambahkan garis tepi agar terlihat pada latar belakang putih:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><span style="display:inline-block;width:1em;height:1em; background:#ffffff;border:1px solid #ccc; vertical-align:middle;margin-right:0.5em"></span></code></pre> </div> </div> <div class="paragraph"> <p>batas kelabu`border:1px solid #ccc`) memungkinkan untuk membatasi kotak putih di latar belakang putih.</p> </div> </div> <div class="sect2"> <h3 id="_mengatur_ukuran_persegi">Mengatur ukuran persegi</h3> <div class="paragraph"> <p>Anda dapat menyesuaikan ukuran kotak sesuai kebutuhan Anda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1.5em;height:1.5em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Grand carré * pass:[<span style="display:inline-block;width:0.8em;height:0.8em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] Petit carré</code></pre> </div> </div> <div class="paragraph"> <p>Penggunaan satuan`em`memastikan bahwa kotak menyesuaikan ukuran dengan ukuran huruf</p> </div> </div> <div class="sect2"> <h3 id="_membuat_varian">Membuat varian</h3> <div class="paragraph"> <p>Untuk kebutuhan spesifik, Anda dapat membuat bentuk-bentuk yang berbeda:</p> </div> <div class="sect3"> <h4 id="_lingkaran_berwarna">lingkaran berwarna</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;border-radius:50%;vertical-align:middle;margin-right:0.5em"></span>] Cercle violet</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_persegi_dengan_batas_berwarna">Persegi dengan batas berwarna</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:3px solid #7952b3;vertical-align:middle;margin-right:0.5em"></span>] Bordure violette</code></pre> </div> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_solusi">Arsitektur solusi</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml package "Alur kerja dokumentasi" { [Document AsciiDoc\navec pass macro] as asciidoc [Processeur JBake] as jbake [Site HTML statique] as html [Navigateur Web] as browser } asciidoc --> jbake : 1. Compilation jbake --> html : 2. Génération html --> browser : 3. Affichage browser --> browser : 4. Rendu CSS note right of asciidoc Contient les balises pass:[] avec HTML inline end note note right of jbake Préserve le HTML dans pass:[] end note note right of browser Applique les styles inline CSS end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_manfaat_dan_batasan">Manfaat dan batasan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kelebihan">kelebihan</h3> <div class="ulist"> <ul> <li> <p>✓ <strong>Kemandirian</strong> : Tidak ada ketergantungan pada file eksternal</p> </li> <li> <p>✓ <strong>Portabilitas</strong> : Berfungsi dengan semua prosesor AsciiDoc</p> </li> <li> <p>✓ <strong>Synchronisation</strong> : Kode warnanya berada langsung di HTML</p> </li> <li> <p>✓ <strong>Fleksibilitas</strong> : Penyesuaian lengkap gaya</p> </li> <li> <p>✓ <strong>Maintenance</strong> : Modifikasi sederhana kode heksadesimal</p> </li> <li> <p>✓ <strong>Kompatibilitas JBake</strong> : Berfungsi dengan sempurna dengan generator situs statis</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_keterbatasan">Keterbatasan</h3> <div class="ulist"> <ul> <li> <p>✗ <strong>Verbosity</strong> : Repetitive HTML code in the AsciiDoc source</p> </li> <li> <p>✗ <strong>Keterbacaan sumber</strong> : Dokumen sumber kurang rapi</p> </li> <li> <p>✗ <strong>Aksesibilitas</strong> : Tidak ada teks alternatif bawaan (yang harus ditambahkan secara manual)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_peningkatan_aksesibilitas">Peningkatan aksesibilitas</h3> <div class="paragraph"> <p>Untuk membuat kotak dapat diakses oleh pembaca layar :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">* pass:[<span role="img" aria-label="Couleur violet Bootstrap" style="display:inline-block;width:1em;height:1em;background:#7952b3; vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap)</code></pre> </div> </div> <div class="paragraph"> <p>Atribut`role="img"` et `aria-label`Memungkinkan teknologi asistif untuk memahami dan menggambarkan konten visual.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_contoh_konkret_dokumentasi_tema">Contoh konkret: Dokumentasi tema</h2> <div class="sectionbody"> <div class="paragraph"> <p>Berikut contoh lengkap yang mendokumentasikan beberapa tema:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-asciidoc hljs" data-lang="asciidoc">= Guide des couleurs de l'application == Thème Clair (`:root`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#f8f9fa;border:1px solid #ccc;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#f8f9fa` (blanc cassé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#7952b3;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#7952b3` (violet Bootstrap) == Thème Sombre (`[data-bs-theme="dark"]`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#212529;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#212529` (noir très foncé) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #999;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#0d6efd;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#0d6efd` (bleu Bootstrap) == Thème Contraste Élevé (`[data-bs-theme="high-contrast"]`) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#000000;vertical-align:middle;margin-right:0.5em"></span>] --bg-primary: `#000000` (noir) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#ffffff;border:1px solid #000;vertical-align:middle;margin-right:0.5em"></span>] --text-primary: `#ffffff` (blanc) * pass:[<span style="display:inline-block;width:1em;height:1em;background:#00ff00;vertical-align:middle;margin-right:0.5em"></span>] --accent-color: `#00ff00` (vert vif)</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Injeksi HTML melalui makro``d’AsciiDoc menawarkan solusi yang elegan dan pragmatis untuk menampilkan sampel warna dalam dokumentasi teknis. Meskipun sedikit bertele-tele, pendekatan ini menjamin portabilitas maksimal dan pemeliharaan yang disederhanakan.</p> </div> <div class="paragraph"> <p>Teknik ini tidak memerlukan konfigurasi eksternal, tidak memerlukan lembar gaya tambahan, dan berfungsi segera dengan JBake dan semua prosesor AsciiDoc standar.</p> </div> <div class="paragraph"> <p>Setelah Anda membuat kotak berwarna pertama Anda, cukup menyalin dan menempelkan kode HTML dan mengubah kode heksadesimal untuk dengan cepat membuat palet lengkap.</p> </div> <div class="paragraph"> <p>Teknik ini dapat diperluas ke kasus penggunaan lain yang memerlukan rendering visual khusus: ikon, badge, grafik sederhana, atau elemen visual apa pun yang memerlukan kontrol gaya yang tepat.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_daya">Sumber daya</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">Dokumentasi AsciiDoc : pass macro</a></p> </li> <li> <p><a href="https://jbake.org/docs/2.6.7/" target="_blank" rel="noopener">Dokumentasi JBake</a></p> </li> <li> <p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/color_value" target="_blank" rel="noopener">MDN : Nilai warna CSS</a></p> </li> </ul> </div> <div class="paragraph"> <p><em>Artikel dipublikasikan pada 2025-11-01</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0095_i18n-site-statique-jbake-thymeleaf_post.html Mon, 20 Oct 2025 00:00:00 +0000 blog/2025/0095_i18n-site-statique-jbake-thymeleaf_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a> <ul class="sectlevel2"> <li><a href="#_diagram_kasus_penggunaan_use_case">Diagram kasus penggunaan (Use Case)</a></li> </ul> </li> <li><a href="#_arsitektur_internasionalisasi">Arsitektur internasionalisasi</a> <ul class="sectlevel2"> <li><a href="#_diagram_struktur_organisasi_file">Diagram struktur (Organisasi file)</a></li> <li><a href="#_mengapa_pendekatan_ini">Mengapa pendekatan ini?</a></li> <li><a href="#_diagram_komponen">Diagram komponen</a></li> </ul> </li> <li><a href="#_i18n_templating_dengan_thymeleaf">I18n templating dengan Thymeleaf</a> <ul class="sectlevel2"> <li><a href="#_struktur_file_pesan">Struktur file pesan</a></li> <li><a href="#_isi_file_pesan">Isi file pesan</a></li> <li><a href="#_penggunaan_dalam_templat">Penggunaan dalam templat</a></li> <li><a href="#_diagram_urutan_resolusi_i18n">Diagram urutan - resolusi i18n</a></li> <li><a href="#_konfigurasi_lokal_di_jbake">Konfigurasi lokal di JBake</a></li> </ul> </li> <li><a href="#_internasionalisasi_artikel_organisasi_berdasarkan_folder">Internasionalisasi artikel : organisasi berdasarkan folder</a> <ul class="sectlevel2"> <li><a href="#_diagram_alir_flow_generasi">Diagram alir (Flow) - Generasi</a></li> <li><a href="#_struktur_folder">Struktur folder</a></li> <li><a href="#_keuntungan_dari_pendekatan_ini">Keuntungan dari pendekatan ini</a></li> <li><a href="#_metadata_artikel">Metadata artikel</a></li> <li><a href="#_konfigurasi_url">Konfigurasi URL</a></li> </ul> </li> <li><a href="#_templates_untuk_tampilan_multibahasa">Templates untuk tampilan multibahasa</a> <ul class="sectlevel2"> <li><a href="#_template_artikel_dengan_pemilih_bahasa">Template artikel dengan pemilih bahasa</a></li> <li><a href="#_indeks_difilter_berdasarkan_bahasa">Indeks difilter berdasarkan bahasa</a></li> </ul> </li> <li><a href="#_navigasi_antara_bahasa">Navigasi antara bahasa</a> <ul class="sectlevel2"> <li><a href="#_pemilih_bahasa_global">Pemilih bahasa global</a></li> <li><a href="#_diagram_alur_pembacaan_pengguna">Diagram alur - Pembacaan pengguna</a></li> <li><a href="#_gaya_css_untuk_penilih">Gaya CSS untuk penilih</a></li> </ul> </li> <li><a href="#_umpan_rss_per_bahasa">Umpan RSS per bahasa</a></li> <li><a href="#_praktik_terbaik_dan_tips">Praktik terbaik dan tips</a> <ul class="sectlevel2"> <li><a href="#_1_konsistensi_id_artikel">1. Konsistensi ID artikel</a></li> <li><a href="#_2_tanggal_konsisten">2. Tanggal konsisten</a></li> <li><a href="#_3_tags_multibahasa">3. Tags multibahasa</a></li> <li><a href="#_4_pengelolaan_artikel_yang_tidak_diterjemahkan">4. Pengelolaan artikel yang tidak diterjemahkan</a></li> <li><a href="#_5_peta_situs_multibahasa">5. Peta situs multibahasa</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a> <ul class="sectlevel2"> <li><a href="#_diagram_penerapan">Diagram penerapan</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Internasionalisasi (i18n) situs statis dapat terlihat kompleks pada pertama kalinya, tetapi JBake yang dikombinasikan dengan Thymeleaf menawarkan solusi yang anggun untuk membuat situs multilingual. Dalam artikel ini, saya akan menunjukkan bagaimana saya telah mengimplementasikan i18n di blog saya, mencakup baik templating maupun pengelolaan artikel dalam beberapa bahasa.</p> </div> <div class="sect2"> <h3 id="_diagram_kasus_penggunaan_use_case">Diagram kasus penggunaan (Use Case)</h3> <div class="listingblock"> <div class="content"> <pre>@startuml left to right direction skinparam packageStyle rectangle actor "Penulis" as author actor "Pembaca FR" as reader_fr actor "Pembaca EN" as reader_en rectangle "Situs JBake Multibahasa" { usecase "Tulis artikel FR" as UC1 usecase "Menulis artikel EN" as UC2 usecase "Mengatur pesan i18n" as UC3 usecase "Buat situs" as UC4 usecase "Membaca artikel FR" as UC5 usecase "Baca artikel EN" as UC6 usecase "Ubah bahasa" as UC7 usecase "Lihat terjemahan yang tersedia" as UC8 } author --> UC1 author --> UC2 author --> UC3 author --> UC4 reader_fr --> UC5 reader_fr --> UC7 reader_fr --> UC8 reader_en --> UC6 reader_en --> UC7 reader_en --> UC8 UC1 ..> UC4 : <<include>> UC2 ..> UC4 : <<include>> UC3 ..> UC4 : <<include>> UC5 ..> UC8 : <<extend>> UC6 ..> UC8 : <<extend>> @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_internasionalisasi">Arsitektur internasionalisasi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pendekatan kami didasarkan pada dua pilar :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>internasionalisasi templating</strong>penggunaan file pesan Thymeleaf untuk elemen antarmuka</p> </li> <li> <p><strong>internasionalisasi konten</strong>: pengaturan artikel menurut bahasa dalam struktur folder khusus</p> </li> </ol> </div> <div class="sect2"> <h3 id="_diagram_struktur_organisasi_file">Diagram struktur (Organisasi file)</h3> <div class="listingblock"> <div class="content"> <pre>@startuml @startsalt { {T + projet-jbake ++ content +++ blog ++++ 2024 +++++ fr ++++++ article1.adoc ++++++ article2.adoc +++++ en ++++++ article1.adoc ++++++ article2.adoc ++++ 2025 +++++ fr ++++++ guide-i18n.adoc +++++ en ++++++ i18n-guide.adoc ++ templates +++ post.html +++ index.html +++ index_en.html +++ messages.properties +++ messages_fr.properties +++ messages_en.properties ++ assets +++ css +++ js +++ img ++ jbake.properties ++ output +++ fr ++++ blog +++++ 2025 ++++++ guide-i18n.html +++ en ++++ blog +++++ 2025 ++++++ i18n-guide.html } } @endsalt @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_mengapa_pendekatan_ini">Mengapa pendekatan ini?</h3> <div class="paragraph"> <p>Pemisahan ini memungkinkan :</p> </div> <div class="ulist"> <ul> <li> <p>Pertahankan konsistensi antarmuka apa pun bahasa</p> </li> <li> <p>Mengelola secara independen konten dan terjemahan artikel</p> </li> <li> <p>Memudahkan penambahan bahasa baru tanpa refactoring utama</p> </li> <li> <p>Mengizinkan artikel yang hanya tersedia dalam beberapa bahasa</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_diagram_komponen">Diagram komponen</h3> <div class="listingblock"> <div class="content"> <pre>@startuml skinparam componentStyle rectangle package "Sumber" { folder "content/blog/2025/" { folder "fr/" as content_fr { [article1.adoc] [article2.adoc] } folder "en/" as content_en { [article1.adoc] as article1_en [article2.adoc] as article2_en } } folder "templates/" { [post.html] [index.html] [index_en.html] } folder "pesan/" { [messages_fr.properties] [messages_en.properties] } [jbake.properties] } package "JBake Engine" { [Parser AsciiDoc] as parser [Template Engine\nThymeleaf] as thymeleaf [Generator] as generator [I18n Resolver] as i18n } package "Situs yang dihasilkan" { folder "fr/" { folder "blog/2025/" as blog_fr { [article1.html] [article2.html] } } folder "en/" { folder "blog/2025/" as blog_en { [article1.html] as article1_html_en [article2.html] as article2_html_en } } } content_fr --> parser content_en --> parser parser --> generator templates --> thymeleaf messages --> i18n i18n --> thymeleaf thymeleaf --> generator jbake.properties --> generator generator --> blog_fr generator --> blog_en @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_i18n_templating_dengan_thymeleaf">I18n templating dengan Thymeleaf</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_file_pesan">Struktur file pesan</h3> <div class="paragraph"> <p>Langkah pertama adalah membuat file properti untuk setiap bahasa yang didukung:</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="_isi_file_pesan">Isi file pesan</h3> <div class="paragraph"> <p>Berikut contoh file`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>Dan setaraannya dalam bahasa Inggris`messages_en.properties`:</p> </div> <div class="paragraph"> <p>:</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="_penggunaan_dalam_templat">Penggunaan dalam templat</h3> <div class="paragraph"> <p>Dalam template Thymeleaf Anda, gunakan sintaksis`#{}`untuk mengakses pesan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">Mon Blog</title> <meta name="description" th:content="#{site.description}" /> </head> <body> <nav> <a th:href="@{/}" th:text="#{nav.home}">Accueil</a> <a th:href="@{/blog/}" th:text="#{nav.blog}">Blog</a> <a th:href="@{/about.html}" th:text="#{nav.about}">À propos</a> </nav> <footer> <p th:text="#{footer.copyright}">Copyright</p> </footer> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_diagram_urutan_resolusi_i18n">Diagram urutan - resolusi i18n</h3> <div class="listingblock"> <div class="content"> <pre>@startuml actor Auteur participant JBake participant "AsciiDoc\nParser" as parser participant "Thymeleaf Engine" as thymeleaf participant "I18n\nResolver" as i18n database "messages_*.properties" as messages Auteur -> JBake: jbake -b activate JBake JBake -> parser: Lire article.fr.adoc activate parser parser --> JBake: Contenu + métadonnées\n(lang=fr, article-id=xyz) deactivate parser JBake -> parser: Lire article.en.adoc activate parser parser --> JBake: Contenu + métadonnées\n(lang=en, article-id=xyz) deactivate parser JBake -> thymeleaf: Générer page FR activate thymeleaf thymeleaf -> i18n: Résoudre #{nav.home} activate i18n i18n -> messages: Lire messages_fr.properties messages --> i18n: "Beranda" i18n --> thymeleaf: "Beranda" deactivate i18n thymeleaf -> JBake: Rechercher traductions\n(article-id=xyz, lang!=fr) JBake --> thymeleaf: article.en.html trouvé thymeleaf --> JBake: /fr/blog/article.html deactivate thymeleaf JBake -> thymeleaf: Générer page EN activate thymeleaf thymeleaf -> i18n: Résoudre #{nav.home} activate i18n i18n -> messages: Lire messages_en.properties messages --> i18n: "Rumah" i18n --> thymeleaf: "Rumah" deactivate i18n thymeleaf -> JBake: Rechercher traductions\n(article-id=xyz, lang!=en) JBake --> thymeleaf: article.fr.html trouvé thymeleaf --> JBake: /en/blog/article.html deactivate thymeleaf JBake --> Auteur: Site généré deactivate JBake @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_konfigurasi_lokal_di_jbake">Konfigurasi lokal di JBake</h3> <div class="paragraph"> <p>Di file Anda`jbake.properties`, tetapkan locale default :</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="_internasionalisasi_artikel_organisasi_berdasarkan_folder">Internasionalisasi artikel : organisasi berdasarkan folder</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagram_alir_flow_generasi">Diagram alir (Flow) - Generasi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml start :Lire jbake.properties; :Charger configuration i18n; partition "Untuk setiap file AsciiDoc" { :Lire métadonnées\n(:jbake-lang:, :jbake-article-id:); :Parser contenu AsciiDoc; :Stocker en mémoire avec langue; } partition "Untuk setiap template" { :Charger template Thymeleaf; :Identifier langue cible; :Charger messages_{lang}.properties; partition "Penyaringan konten" { :Filtrer articles par langue; :Grouper traductions\npar article-id; } :Appliquer template avec i18n; :Générer HTML dans /{lang}/; } :Copier assets statiques; :Générer sitemap multilingue; :Générer flux RSS par langue; stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_struktur_folder">Struktur folder</h3> <div class="paragraph"> <p>Alih-alih menggunakan ekstensi dalam nama file, saya memilih organisasi berdasarkan folder yang memberikan lebih banyak kejelasan dan kemudahan pemeliharaan:</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="_keuntungan_dari_pendekatan_ini">Keuntungan dari pendekatan ini</h3> <div class="paragraph"> <p>Struktur ini memiliki beberapa keuntungan :</p> </div> <div class="ulist"> <ul> <li> <p><strong>pemisahan yang jelas</strong>: setiap bahasa memiliki ruang sendiri</p> </li> <li> <p><strong>penamaan fleksibel</strong>: file dapat memiliki nama yang berbeda tergantung pada bahasa</p> </li> <li> <p><strong>Skalabilitas</strong>: mudah menambahkan bahasa baru</p> </li> <li> <p><strong>Organisasi alamiah</strong>: mengikuti logika waktu JBake</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_metadata_artikel">Metadata artikel</h3> <div class="paragraph"> <p>Setiap artikel harus mengandung metadata untuk memungkinkan hubungan antara terjemahan. Ini adalah contoh :</p> </div> <div class="paragraph"> <p><strong>Versi Prancis</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>Versi bahasa Inggris</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>CATATAN: Atribut`:jbake-article-id:`est penting : ia memungkinkan untuk menghubungkan berbagai terjemahan artikel yang sama.</p> </div> </div> <div class="sect2"> <h3 id="_konfigurasi_url">Konfigurasi URL</h3> <div class="paragraph"> <p>di dalam`jbake.properties`, atur pola URL untuk mencakup bahasa :</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>Akan menghasilkan URL bertipe :</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="_templates_untuk_tampilan_multibahasa">Templates untuk tampilan multibahasa</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_template_artikel_dengan_pemilih_bahasa">Template artikel dengan pemilih bahasa</h3> <div class="paragraph"> <p>Buat template`post.html`yang menampilkan terjemahan yang tersedia :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="${content.title}">Article</title> </head> <body> <article> <header> <h1 th:text="${content.title}">Titre</h1> <div class="article-meta"> <time th:text="${#dates.format(content.date, 'dd MMMM yyyy')}" th:attr="datetime=${#dates.format(content.date, 'yyyy-MM-dd')}"> Date </time> <!-- Sélecteur de traductions --> <div class="translations" th:if="${content['article-id']}"> <span th:text="#{article.also.available}">Aussi disponible en :</span> <ul class="language-list"> <li th:each="post : ${published_posts}" th:if="${post['article-id'] == content['article-id'] and post.lang != content.lang}"> <a th:href="${post.uri}" th:text="${post.lang.toUpperCase()}"> LANG </a> </li> </ul> </div> </div> </header> <div class="content" th:utext="${content.body}"> Contenu de l'article </div> <footer class="article-footer"> <div class="tags" th:if="${content.tags}"> <span th:text="#{article.tags}">Étiquettes :</span> <span th:each="tag : ${content.tags}"> <a th:href="@{/tags/{tag}.html(tag=${tag})}" th:text="${tag}">tag</a> </span> </div> </footer> </article> </body> </html></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_indeks_difilter_berdasarkan_bahasa">Indeks difilter berdasarkan bahasa</h3> <div class="paragraph"> <p>Buat templat indeks untuk setiap bahasa :</p> </div> <div class="paragraph"> <p><strong>index.html</strong>(indeks Perancis) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">Mon Blog</title> </head> <body> <main> <h1 th:text="#{nav.blog}">Blog</h1> <div class="articles-list"> <article th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"> <h2> <a th:href="${post.uri}" th:text="${post.title}">Titre</a> </h2> <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"> Date </time> <p th:text="${post.description}">Description</p> <a th:href="${post.uri}" th:text="#{article.readmore}"> Lire la suite </a> </article> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><strong>index_en.html</strong>(indeks bahasa Inggris) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="#{site.title}">My Blog</title> </head> <body> <main> <h1 th:text="#{nav.blog}">Blog</h1> <div class="articles-list"> <article th:each="post : ${published_posts}" th:if="${post.lang == 'en'}"> <h2> <a th:href="${post.uri}" th:text="${post.title}">Title</a> </h2> <time th:text="${#dates.format(post.date, 'dd MMMM yyyy')}"> Date </time> <p th:text="${post.description}">Description</p> <a th:href="${post.uri}" th:text="#{article.readmore}"> Read more </a> </article> </div> </main> </body> </html></code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_navigasi_antara_bahasa">Navigasi antara bahasa</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pemilih_bahasa_global">Pemilih bahasa global</h3> </div> <div class="sect2"> <h3 id="_diagram_alur_pembacaan_pengguna">Diagram alur - Pembacaan pengguna</h3> <div class="listingblock"> <div class="content"> <pre>@startuml start :Utilisateur accède au site; if (Langue préférée ?) then (FR) :Afficher /index.html; :Lister articles FR; else (EN) :Afficher /en/index.html; :Lister articles EN; endif :Utilisateur clique sur article; :Afficher article\navec métadonnées; if (Traductions disponibles ?) then (oui) :Afficher sélecteur\nde traductions; if (Changement de langue ?) then (oui) :Rediriger vers\ntraduction; :Afficher article\ndans nouvelle langue; else (non) :Continuer lecture; endif else (non) :Continuer lecture; endif stop @enduml</pre> </div> </div> <div class="paragraph"> <p>Tambahkan pemilih bahasa di template utama Anda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><nav class="language-switcher"> <a href="/index.html" th:classappend="${content.lang == 'fr'} ? 'active'" title="Français"> 🇫🇷 FR </a> <a href="/en/index.html" th:classappend="${content.lang == 'en'} ? 'active'" title="English"> 🇬🇧 EN </a> </nav></code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_gaya_css_untuk_penilih">Gaya CSS untuk penilih</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="_umpan_rss_per_bahasa">Umpan RSS per bahasa</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk memiliki feed RSS terpisah per bahasa, buat template yang terpisah :</p> </div> <div class="paragraph"> <p><strong>feed.xml</strong>(aliran Prancis) :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:th="http://www.thymeleaf.org"> <channel> <title th:text="#{site.title}">Mon Blog</title> <link th:text="${config.site_host}">http://example.com</link> <description th:text="#{site.description}">Description</description> <language>fr</language> <item th:each="post : ${published_posts}" th:if="${post.lang == 'fr'}"> <title th:text="${post.title}">Titre</title> <link th:text="${config.site_host + post.uri}">Lien</link> <pubDate th:text="${#dates.format(post.date, 'EEE, dd MMM yyyy HH:mm:ss Z')}"> Date </pubDate> <description th:text="${post.description}">Description</description> </item> </channel> </rss></code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_terbaik_dan_tips">Praktik terbaik dan tips</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_1_konsistensi_id_artikel">1. Konsistensi ID artikel</h3> <div class="paragraph"> <p>Pastikan bahwa`:jbake-article-id:`adalah sama untuk semua terjemahan dari artikel yang sama. Gunakan format yang konsisten :</p> </div> <div class="ulist"> <ul> <li> <p>Pilih identifier dalam bahasa Inggris untuk universalitas</p> </li> <li> <p>Gunakan tanda hubung untuk memisahkan kata</p> </li> <li> <p>Hindari karakter khusus</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_2_tanggal_konsisten">2. Tanggal konsisten</h3> <div class="paragraph"> <p>Semua terjemahan suatu artikel harus memiliki tanggal publikasi yang sama (<code>:jbake-date:</code>). Ini memudahkan pengurutan dan penampilan kronologis.</p> </div> </div> <div class="sect2"> <h3 id="_3_tags_multibahasa">3. Tags multibahasa</h3> <div class="paragraph"> <p>Untuk tag, Anda memiliki dua opsi :</p> </div> <div class="paragraph"> <p><strong>Option 1: tag universal bahasa Inggris</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>Opsi 2 : Tag diterjemahkan dengan pemetaan</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_pengelolaan_artikel_yang_tidak_diterjemahkan">4. Pengelolaan artikel yang tidak diterjemahkan</h3> <div class="paragraph"> <p>Tidak wajib untuk menerjemahkan semua artikel. Jika sebuah artikel hanya ada dalam satu bahasa, artikel tersebut tidak akan muncul dalam daftar bahasa lain.</p> </div> </div> <div class="sect2"> <h3 id="_5_peta_situs_multibahasa">5. Peta situs multibahasa</h3> <div class="paragraph"> <p>Buat sitemap yang mencakup semua bahasa</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <url th:each="post : ${published_posts}"> <loc th:text="${config.site_host + post.uri}">URL</loc> <lastmod th:text="${#dates.format(post.date, 'yyyy-MM-dd')}">Date</lastmod> <!-- Liens alternatifs pour les traductions --> <xhtml:link th:each="translation : ${published_posts}" th:if="${translation['article-id'] == post['article-id'] and translation.lang != post.lang}" rel="alternate" th:attr="hreflang=${translation.lang},href=${config.site_host + translation.uri}" /> </url> </urlset></code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Internasionalisasi situs JBake dengan Thymeleaf adalah pendekatan yang kuat dan dapat dipelihara. Dengan memisahkan i18n dari templating (melalui file pesan) dan i18n dari konten (melalui organisasi dalam folder), Anda mendapatkan sistem yang fleksibel yang dapat berkembang dengan mudah.</p> </div> <div class="paragraph"> <p>Poin-poin penting yang harus diingat:</p> </div> <div class="ulist"> <ul> <li> <p><strong>File pesan Thymeleaf</strong>untuk antarmuka pengguna</p> </li> <li> <p><strong>Organisasi berdasarkan folder</strong>(tahun/bahasa) untuk artikel</p> </li> <li> <p><strong>ID artikel</strong>untuk menautkan terjemahan</p> </li> <li> <p><strong>template khusus</strong>untuk setiap bahasa</p> </li> <li> <p><strong>URL eksplisit</strong>memasukkan kode bahasa</p> </li> </ul> </div> <div class="sect2"> <h3 id="_diagram_penerapan">Diagram penerapan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml node "Mesin pengembangan" { artifact "Sumber" { folder "isi/" folder "templates/" folder "aset/" } component "JBake CLI" as jbake Sources --> jbake : jbake -b } node "Server build\n(CI/CD)" { component "GitHub Actions atau GitLab CI" as ci jbake --> ci : push } cloud "CDN / Penyediaan" { node "Server web statis" { artifact "situs yang dihasilkan" { folder "/id/blog/" folder "/en/blog/" folder "/assets/" } } } ci --> "situs yang dihasilkan" : déploiement actor "Pembaca" as users users --> "Server web statis" : HTTPS @enduml</pre> </div> </div> <div class="paragraph"> <p>Arsitektur ini memungkinkan Anda untuk memulai dengan dua bahasa dengan mudah dan menambah bahasa lain tanpa refactoring yang besar. Semuanya tetap sepenuhnya statis dan berkinerja, setia kepada filosofi JBake.</p> </div> <div class="paragraph"> <p>Selamat pengembangan multilingue ! 🌍</p> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0094_tor_browser_install_post.html Sun, 5 Oct 2025 00:00:00 +0000 blog/2025/0094_tor_browser_install_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_unduhan_tor_dan_tanda_tandanya">Unduhan Tor dan tanda tandanya</a></li> <li><a href="#_verifikasi_tanda_tangan_kriptografis">Verifikasi tanda tangan kriptografis</a> <ul class="sectlevel2"> <li><a href="#_1_mengimpor_kunci_publik_dari_proyek_tor">1. Mengimpor kunci publik dari Proyek Tor</a></li> <li><a href="#_2_memeriksa_tanda_tangan">2. Memeriksa tanda tangan</a></li> <li><a href="#_contoh_praktis_tanda_tangan_valid_tetapi_kunci_tidak_bersertifikat">Contoh praktis: Tanda tangan valid tetapi kunci tidak bersertifikat</a></li> </ul> </li> <li><a href="#_mengapa_harus_memeriksa_tanda_tangan">Mengapa harus memeriksa tanda tangan?</a></li> <li><a href="#_ekstraksi_dan_peluncuran_tor_browser">Ekstraksi dan peluncuran Tor Browser</a></li> <li><a href="#_integrasi_ke_desktop_ubuntu">Integrasi ke desktop Ubuntu</a></li> <li><a href="#_menjelajahi_sumber_daya_pendidikan_dengan_tor">Menjelajahi sumber daya pendidikan dengan Tor</a></li> <li><a href="#_pembaruan_tor_browser">Pembaruan Tor Browser</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_referensi">Referensi</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Di dalam dunia di mana keprivasian digital semakin terancam, <strong>Tor Browser</strong> tetap merupakan alat penting untuk melindungi anonimnya dan kebebasan informasinya. Namun, sangat penting untuk tidak pernah menjalankan perangkat lunak yang diunduh tanpa memiliki<strong>memverifikasi keasliannya</strong>. Artikel ini menyajikan metode lengkap untuk:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Unduh <strong>Tor Browser</strong> dan tandatangannya`.asc`</p> </li> <li> <p>Memeriksa validitas file yang diunduh</p> </li> <li> <p>Pasang dan jalankan <strong>Tor Browser</strong> di Ubuntu</p> </li> <li> <p>Menambahkan ke menu desktop untuk penggunaan harian</p> </li> <li> <p>Jelajahi sumber daya pendidikan dan OSINT etik melalui Tor</p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_unduhan_tor_dan_tanda_tandanya">Unduhan Tor dan tanda tandanya</h2> <div class="sectionbody"> <div class="paragraph"> <p>Buatlah folder khusus untuk browser Tor :</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>Unduh kemudian arsip peramban Tor dan tanda tandanya:</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="_verifikasi_tanda_tangan_kriptografis">Verifikasi tanda tangan kriptografis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tahap ini adalah<strong>diperlukan</strong>agar memastikan bahwa file yang diunduh benar-benar berasal dari <strong>Tor Project</strong> dan tidak telah dimodifikasi.</p> </div> <div class="sect2"> <h3 id="_1_mengimpor_kunci_publik_dari_proyek_tor">1. Mengimpor kunci publik dari Proyek Tor</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>Pastikan kunci telah diimpor dengan baik :</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_memeriksa_tanda_tangan">2. Memeriksa tanda tangan</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>Jika semuanya benar, pesan berikutnya akan ditampilkan:</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>Jika ada peringatan kunci tidak bersertifikat, itu hanya berarti bahwa Anda belum menandatangani kunci kepercayaan proyek Tor, tapi tandatangannya tetap valid.</p> </div> </div> <div class="sect2"> <h3 id="_contoh_praktis_tanda_tangan_valid_tetapi_kunci_tidak_bersertifikat">Contoh praktis: Tanda tangan valid tetapi kunci tidak bersertifikat</h3> <div class="paragraph"> <p>Seringkali menemukan pesan seperti ini saat verifikasi :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">gpg --verify tor-browser-linux-x86_64-14.5.7.tar.xz.asc tor-browser-linux-x86_64-14.5.7.tar.xz gpg: Signature faite le mar. 16 sept. 2025 14:26:26 CEST gpg: avec la clef RSA CAAE408AEBE2288E96FC5D5E157432CF78A65729 gpg: Bonne signature de « Tor Browser Developers (signing key) <torbrowser@torproject.org> » [inconnu] gpg: Attention : cette clef n'est pas certifiée avec une signature de confiance. gpg: Rien n'indique que la signature appartient à son propriétaire. Empreinte de clef principale : EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290 Empreinte de la sous-clef : CAAE 408A EBE2 288E 96FC 5D5E 1574 32CF 78A6 5729</code></pre> </div> </div> <div class="paragraph"> <p>Pesan ini menunjukkan bahwa tanda tangan secara teknis "baik" (file tidak diubah), tetapi sistem GPG Anda tidak dapat <strong>mencertifikasi kepercayaan</strong> pada kunci itu sendiri. Untuk menghilangkan keraguan ini, sangat penting untuk membandingkan sidik jari kunci utama (<code>EF6E 286D DA85 EA2A 4BA7 DE68 4E2C 6E87 9329 8290</code>) dengan yang dipublikasikan pada situs resmi Tor Project.</p> </div> <div class="paragraph"> <p>Menurut situs resmi, jejak yang diharapkan adalah :`EF6E286DDA85EA2A4BA7DE684E2C6E8793298290`.</p> </div> <div class="paragraph"> <p>Karena jejak yang ditampilkan oleh`gpg`correspond <strong>tepat</strong> dengan yang ada di situs resmi, Anda dapat yakin bahwa kunci tersebut sah dan file tersebut aman. Peringatan 'kunci tidak bersertifikat' kemudian merupakan informasi tentang konfigurasi GPG lokal Anda, dan bukan tentang validitas tanda tangan atau keaslian file.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mengapa_harus_memeriksa_tanda_tangan">Mengapa harus memeriksa tanda tangan?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Verifikasi tanda tangan GPG adalah tindakan fundamental keamanan digital. Memungkinkan untuk :</p> </div> <div class="ulist"> <ul> <li> <p>memastikan<strong>keaslian</strong>perangkat lunak yang diunduh</p> </li> <li> <p>Mencegah instalasi file yang dikompromikan oleh aktor berbahaya</p> </li> <li> <p>Mengikuti<strong>kekuasaan digital</strong>individual</p> </li> <li> <p>Mendukung budaya digital yang bertanggung jawab dan etis</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml left to right direction actor "Pengguna" as U actor "server TorProject" as S usecase "Unduh Tor dan tandatangannya" as D usecase "Impor kunci publik" as K usecase "Verifikasi tanda tangan GPG" as V usecase "Instal dan jalankan Tor" as I U --> D U --> K U --> V U --> I S --> D @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_ekstraksi_dan_peluncuran_tor_browser">Ekstraksi dan peluncuran Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ekstrak arsip yang diunduh:</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>Jalankan lalu peramban:</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>Sa saat peluncuran pertama, jendela konfigurasi akan terbuka untuk membangun koneksi ke jaringan Tor.</p> </div> </div> </div> <div class="sect1"> <h2 id="_integrasi_ke_desktop_ubuntu">Integrasi ke desktop Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menambahkan <strong>Tor Browser</strong> dalam menu aplikasi :</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>Anda kemudian :</p> </div> <div class="ulist"> <ul> <li> <p>Mulai <strong>Tor Browser</strong> dari menu aplikasi</p> </li> <li> <p>Tambahkan ke favorit dock</p> </li> <li> <p>Buat pintasan keyboard jika diinginkan</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml start :Téléchargement de Tor; :Importation de la clé GPG; :Vérification de la signature; if (Signature valide ?) then (Oui) :Extraction du navigateur; :Lancement du navigateur Tor; :Enregistrement dans le bureau; else (Non) :Supprimer le fichier compromis; endif stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menjelajahi_sumber_daya_pendidikan_dengan_tor">Menjelajahi sumber daya pendidikan dengan Tor</h2> <div class="sectionbody"> <div class="paragraph"> <p>Tor bukan hanya sebuah alat untuk anonimitas. Ini merupakan sebuah portal akses ke sumber daya pendidikan dan penelitian, terutama dalam bidang-bidang :</p> </div> <div class="ulist"> <ul> <li> <p><strong>OSINT (Inteligensi Sumber Terbuka)</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>Berbagi edukatif dan open source</strong></p> </li> <li> <p><a href="https://archive.org">https://archive.org</a>(akses melalui Tor untuk privasi lebih)</p> </li> <li> <p><a href="https://github.com/">https://github.com/</a>(dapat diakses melalui Tor)</p> </li> <li> <p><a href="https://librarygenesis.pro">https://librarygenesis.pro</a>(akses ke literatur ilmiah bebas)</p> </li> <li> <p><strong>Penyaluran pengetahuan dan pemahaman tentang manusia dalam masyarakat digital</strong></p> </li> <li> <p>Sumber daya tentang budaya digital, kebebasan berekspresi, dan akses ke pengetahuan</p> </li> <li> <p>Dokumentasi bebas tentang keamanan siber dan etika teknologi</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_pembaruan_tor_browser">Pembaruan Tor Browser</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menjamin keamanan optimal, sangat penting untuk memastikan <strong>Tor Browser</strong> selalu diperbarui. Peramban memiliki mekanisme pembaruan otomatis yang dapat dipicu lewat baris perintah.</p> </div> <div class="paragraph"> <p>Dari direktori instalasi Tor Browser, cukup menjalankan ulang skrip pemulai :</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>Pada peluncuran, <strong>Tor Browser</strong> akan otomatis memeriksa apakah ada versi baru. Jika ya, ia akan mengunduh dan menginstalnya untuk Anda.</p> </div> <div class="paragraph"> <p>Metode sederhana ini memastikan bahwa Anda selalu memiliki patch keamanan terbaru dan perbaikan terkini, yang sangat penting untuk telusur yang aman.</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Memeriksa unduhan adalah refleks penting bagi siapa pun yang ingin berkembang dalam lingkungan digital yang aman. Menginstal Tor dengan cara terverifikasi, itu<strong>melindungi integritas digitalnya</strong>, <strong>mempertahankan kepercayaan dalam perangkat lunak bebas</strong>, et <strong>memperkuat autonomi informasinya</strong>.</p> </div> <div class="paragraph"> <p><strong>Keamanan digital adalah tindakan kesadaran, bukan paranoia.</strong></p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml title Tampilan ringkas penggunaan Tor actor Utilisateur rectangle "Tor Browser" { rectangle "anonimitas" as A rectangle "Pencarian OSINT" as O rectangle "Berbagi pendidikan" as E } Utilisateur --> A Utilisateur --> O Utilisateur --> E @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_referensi">Referensi</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Situs resmi Tor Project:https://www.torproject.org/download/[<a href="https://www.torproject.org/download/" class="bare">https://www.torproject.org/download/</a>]</p> </li> <li> <p>Dokumentasi verifikasi tanda tangan :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>Dokumentasi Ubuntu :https://ubuntu.com[<a href="https://ubuntu.com" class="bare">https://ubuntu.com</a>]</p> </li> <li> <p>Arsip edukatif :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>Artikel ini adalah bagian dari seri <strong>Keselamatan dan Kesadaran Digital</strong> bertujuan untuk mempromosikan praktik yang bertanggung jawab dan berbasis pendidikan mengenai alat bebas</p> </div> </td> </tr> </table> </div> </div> </div> https://cheroliv.com/blog/2025/0093_gradle_plugin_toml_composite_build_post.html Sat, 27 Sep 2025 00:00:00 +0000 blog/2025/0093_gradle_plugin_toml_composite_build_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pengenalan">Pengenalan</a></li> <li><a href="#_1_daftar_versi_libs_versions_toml_sebuah_pengingat">1. Daftar Versi (<code>libs.versions.toml</code>) : Sebuah pengingat</a></li> <li><a href="#_2_masalah_sebuah_build_komposit_dan_dua_dunia_terpisah">2. Masalah: Sebuah Build Komposit dan Dua Dunia Terpisah</a></li> <li><a href="#_3_solusi_membagikan_resolusi_dependensi">3. Solusi: Membagikan Resolusi Dependensi</a></li> <li><a href="#_4_kesimpulan_kekuatan_dari_builds_komposit_yang_dikelola_dengan_baik">4. Kesimpulan : Kekuatan dari Builds Komposit yang dikelola dengan baik</a></li> </ul> </div> <div class="sect1"> <h2 id="_pengenalan">Pengenalan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Target audience: Gradle developers facing dependency management in multi-build projects.</div> <p>Dalam pencarian kita untuk membuat plugin`site-baker`, kami berusaha menjaga basis kode yang bersih dan terpusat. Salah satu praktik terbaik dalam ekosistem Gradle modern adalah penggunaan<strong>katalog versi</strong>(<code>libs.versions.toml</code>) untuk mengelola dependensi. Namun apa yang terjadi ketika proyek Anda menjadi lebih kompleks, seperti<strong>membangun komposit</strong>Di mana sebuah build independen (plugin kami) harus dimasukkan ke dalam satu yang lain?</p> </div> <div class="paragraph"> <p>Itulah tempat petualangan kita mengambil wending yang tidak terduga. Kami ingin bahwa plugin kami`site-baker`, yang merupakan proyek Gradle itu sendiri, menggunakan katalog versi yang sama dengan proyek utama kami. Artikel ini, yang merupakan kelima dari seri kami, menceritakan bagaimana kami telah mengatasi tantangan ini.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_daftar_versi_libs_versions_toml_sebuah_pengingat">1. Daftar Versi (<code>libs.versions.toml</code>) : Sebuah pengingat</h2> <div class="sectionbody"> <div class="paragraph"> <p>File`gradle/libs.versions.toml`adalah suatu fitur Gradle yang memungkinkan Anda untuk memusatkan versi dan koordinat dependensi proyek Anda. Umumnya diatur dalam empat bagian :</p> </div> <div class="ulist"> <ul> <li> <p><code>[versions]</code>: Mendefinisikan alias untuk nomor versi (contoh:`kotlin = "1.9.20"`).</p> </li> <li> <p><code>[libraries]</code>: Menetapkan alias untuk dependensi lengkap, menggunakan versi yang ditentukan di atas (contoh:`kotlin-stdlib = { module = "org.jetbrains.kotlin:kotlin-stdlib", version.ref = "kotlin" }`).</p> </li> <li> <p><code>[bundles]`Mengelompokkan beberapa perpustakaan di bawah satu alias (contoh:`jackson = ["jackson-core", "jackson-databind"]</code>)</p> </li> <li> <p><code>[plugins]</code>: Menetapkan alias untuk plugin Gradle.</p> </li> </ul> </div> <div class="paragraph"> <p>Setelah ditentukan, Gradle secara otomatis menghasilkan aksesor bertipe, yang membuat Anda`build.gradle.kts`lebih mudah dibaca :</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="listingblock"> <div class="title">aliran data dari katalog versi</div> <div class="content"> <pre>@startuml !theme plain file "gradle/libs.versions.toml" as Toml node "Gradle" as G file "build.gradle.kts" as BuildScript Toml --> G : "dibaca oleh" G --> BuildScript : "menghasilkan getter `libs" BuildScript -> G : "menggunakan `libs` untuk mendeklarasikan dependensi" @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_masalah_sebuah_build_komposit_dan_dua_dunia_terpisah">2. Masalah: Sebuah Build Komposit dan Dua Dunia Terpisah</h2> <div class="sectionbody"> <div class="paragraph"> <p>Struktur proyek kami adalah sebuah<strong>membangun komposit</strong>python print(". Proyek utama (") <code>thymeleaf.cheroliv.com</code>) mengandung proyek plugin (<code>site-baker</code>) melalui perintah`includeBuild("site-baker")<code>dalam file`settings.gradle.kts</code>.</p> </div> <div class="paragraph"> <p>Struktur build komposit</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain package "Proyek Utama" { file "settings.gradle.kts" as MainSettings folder "gradle" { file "libs.versions.toml" as MainToml } } package "Plugin `site-baker` (Build Termasuk)" { file "settings.gradle.kts" as PluginSettings file "build.gradle.kts" as PluginBuild } MainSettings -> PluginSettings : `includeBuild("site-baker")` PluginBuild ..> MainToml : **Voulait accéder à...** note right on link: ...mais ne pouvait pas ! @enduml</pre> </div> </div> <div class="paragraph"> <p>Masalahnya adalah bahwa, secara default, sebuah build yang termasuk adalah sebuah<strong>dunia terpisah</strong>. Dia memiliki konfigurasi sendiri, siklus hidup sendiri, dan dia tidak melihat file`libs.versions.toml`dari build utama. Kami`plugin/build.gradle.kts`mencoba menggunakannya`libs.plugins.kotlin.jvm`, tapi objek`libs`tidak dihasilkan dari file TOML yang benar, yang menyebabkan kesalahan build.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_solusi_membagikan_resolusi_dependensi">3. Solusi: Membagikan Resolusi Dependensi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah beberapa penelitian, ternyata solusinya adalah fitur Gradle yang dirancang khusus untuk kasus ini :`dependencyResolutionManagement`.</p> </div> <div class="paragraph"> <p>dalam file`settings.gradle.kts` du <strong>membangun inklusif</strong>(<code>site-baker/settings.gradle.kts</code>), kita dapat memberitahu Gradle tempat menemukan katalog versi yang akan digunakan.</p> </div> <div class="paragraph"> <p>Ini adalah konfigurasi yang kami tambahkan ke`site-baker/settings.gradle.kts`Saya adalah code dan saya berbicara bahasa Prancis.</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>Mari kita analisis bagian krusial:</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")`Kami mendeklarasikan sebuah katalog versi yang akan dapat diakses melalui alias`libs</code>.</p> </li> <li> <p><code>from(files("../gradle/libs.versions.toml"))</code>: Ini adalah keajaiban. Kami memberi tahu Gradle bahwa sumber katalog ini adalah file TOML yang berada di dalam direktori`gradle` du <strong>proyek induk</strong>(<code>../</code>).</p> </li> </ul> </div> <div class="paragraph"> <p>Dengan konfigurasi ini, build`site-baker`Sekarang dia tahu bahwa ia harus menggunakan katalog versi dari proyek utama. Objek`libs`dibuat dengan benar, dan dependensi telah dipecahkan seperti yang diharapkan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_kesimpulan_kekuatan_dari_builds_komposit_yang_dikelola_dengan_baik">4. Kesimpulan : Kekuatan dari Builds Komposit yang dikelola dengan baik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pengalaman ini kaya akan pelajaran. Katalog versi adalah alat yang luar biasa untuk kemudahan pemeliharaan, tetapi perilakunya dalam skenario build komposit tidak selalu intuitif.</p> </div> <div class="paragraph"> <p>Kunci adalah mengingat bahwa build yang termasuk tetap merupakan build independen. Untuk membagikan konfigurasi seperti katalog versi, harus menggunakan mekanisme eksplisit yang disediakan oleh Gradle, seperti blok`dependencyResolutionManagement`di`settings.gradle.kts`.</p> </div> <div class="paragraph"> <p>Dengan menyelesaikan masalah ini, kami tidak hanya membuat build kami lebih bersih, tetapi kami juga memperkuat koherensi proyek kami dengan memastikan bahwa plugin dan proyek utama berbagi satu sumber kebenaran tunggal untuk dependensi mereka.</p> </div> <div class="paragraph"> <p>Dalam artikel berikutnya, kita akan terus memperkaya plugin kami dengan menambahkan tugas-tugas yang lebih kompleks, mengingat manajemen dependensi kami sudah kuat dan terpusat.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0092_gradle_configuration_cache_post.html Fri, 26 Sep 2025 00:00:00 +0000 blog/2025/0092_gradle_configuration_cache_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_gejala_build_hantu">Gejala: Build Hantu</a></li> <li><a href="#_survei_apa_itu_cache_konfigurasi">Survei: Apa itu Cache Konfigurasi ?</a></li> <li><a href="#_penyebab_masalah_plugin_tidak_sesuai">Penyebab Masalah: Plugin Tidak Sesuai</a></li> <li><a href="#_solusi_sementara_nonaktifkan_cache">Solusi sementara: nonaktifkan cache</a></li> <li><a href="#_solusi_yang_benar_membuat_plugin_kompatibel">Solusi yang Benar : Membuat Plugin Kompatibel</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Sasaran : Pengembang Gradle yang pernah mengalami perilaku build "magis" atau tidak terduga.</div> <p>Dalam petualangan kami dalam pembuatan plugin`site-baker`, kami telah mengikuti pendekatan TDD yang ketat. Setiap fitur diuji, divalidasi, dan kami maju dengan kepercayaan. Dan kemudian, suatu hari, hal yang tidak terduga terjadi. Build mulai berperilaku dengan cara yang tidak teratur. Perubahan dalam logika plugin atau dalam file konfigurasi tampak diabaikan, dan tes fungsional kami yang sebelumnya dapat diandalkan gagal tanpa alasan yang jelas.</p> </div> <div class="paragraph"> <p>Masalah seperti ini bisa sangat memicu frustrasi. Ini menimbulkan pertanyaan tentang keandalan alat dan kevaliditas kode kita. Sesudah sesi debugging yang intensif, penyalah telah diidentifikasi:<strong>cache konfigurasi Gradle</strong>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_gejala_build_hantu">Gejala: Build Hantu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Masalah ini muncul dengan beberapa cara :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Saya sedang memodifikasi sebuah rantai karakter dalam sebuah tugas`println`, tetapi string lama terus ditampilkan saat eksekusi.</p> </li> <li> <p>Saya sedang mengubah sebuah nilai dalam file saya`managed-jbake-context.yml`, tetapi plugin berperilaku seolah-olah file tersebut tidak telah dimodifikasi.</p> </li> <li> <p>Uji fungsional, yang membuat proyek uji secara langsung, gagal karena plugin tidak terlihat mendeteksi file konfigurasi yang baru dibuat.</p> </li> </ol> </div> <div class="paragraph"> <p>Semua terasa seolah-olah Gradle menjalankan \"versi fantom\" dari build kita, mengabaikan perubahan terbaru kita.</p> </div> </div> </div> <div class="sect1"> <h2 id="_survei_apa_itu_cache_konfigurasi">Survei: Apa itu Cache Konfigurasi ?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Cache konfigurasi adalah fitur yang relatif modern dan sangat kuat dari Gradle, yang diaktifkan secara default di versi baru. Tujuannya adalah membuat build lebih cepat.</p> </div> <div class="olist arabic"> <div class="title">Prinsipnya sederhana :</div> <ol class="arabic"> <li> <p>Selama pelaksanaan pertama, Gradle mengeksekusi fase dari<strong>Konfigurasi</strong>(membaca`build.gradle.kts`, pembuatan tugas, penyelesaian dependensi) dan membangun grafik tugas.</p> </li> <li> <p>Di akhir fase ini, Gradle<strong>Serialisasikan graf tugas ini</strong>dan menyimpannya dalam cache.</p> </li> <li> <p>Selama eksekusi berikutnya, jika tidak ada yang berubah (skrip build,<code>gradle.properties</code>, etc.), Gradle<strong>melewati sepenuhnya fase konfigurasi</strong>dan menggunakan kembali grafik tugas yang disimpan di cache.</p> </li> </ol> </div> <div class="paragraph"> <p>Penghematan waktu ini spektakuler pada proyek-proyek besar. Namun, performa ini memiliki harga: ia menegakkan ketentuan yang ketat tentang bagaimana plugin harus ditulis.</p> </div> <div class="listingblock"> <div class="title">siklus hidup cache konfigurasi</div> <div class="content"> <pre>@startuml start :Première exécution; :Phase de Configuration; :Création du graphe de tâches; :Mise en cache du graphe; :Phase d'Exécution; end start :Exécution suivante; if (Cache valide ?) then (oui) :Restauration du graphe depuis le cache; note right La phase de configuration est sautée ! end note else (non) :Phase de Configuration; :Mise à jour du cache; endif :Phase d'Exécution; stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_penyebab_masalah_plugin_tidak_sesuai">Penyebab Masalah: Plugin Tidak Sesuai</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin kami`site-baker`melanggar, tanpa mengetahuinya, beberapa aturan cache konfigurasi. Agar grafik tugas dapat diserialkan, tugas tidak boleh mengandung referensi ke objek kompleks seperti objek`Project`atau membaca file secara sembarangan selama tahap eksekusi.</p> </div> <div class="paragraph"> <p>Kesalahan utama kami adalah membaca konten file YAML langsung di dalam logika eksekusi tugas, dengan menggunakan referensi ke jalur yang disimpan di ekstensi kami. Pendekatan ini tidak kompatibel dengan cache karena Gradle tidak dapat mengetahui apakah konten file telah berubah jika pembacaan ini tidak dimodelkan sebagai sebuah<strong>masukan tugas</strong>(Task Input)</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_sementara_nonaktifkan_cache">Solusi sementara: nonaktifkan cache</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk membebaskan kita dan mengembalikan perilaku build yang dapat diprediksi, solusi tercepat adalah menonaktifkan cache konfigurasi. Cukup menambahkan baris berikut ke dalam file`gradle.properties`proyek yang menggunakan plugin (atau dalam kasus kami, proyek uji)<code>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>Segera, builds telah kembali berperilaku normal. Setiap eksekusi memulai kembali fase konfigurasi dan perubahan kami diperhitungkan.</p> </div> <div class="paragraph"> <p>Namun, ini adalah solusi sementara, bukan solusi permanen. Ia mengorbankan kinerja dan tidak menyelesaikan masalah inti plugin kami.</p> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_yang_benar_membuat_plugin_kompatibel">Solusi yang Benar : Membuat Plugin Kompatibel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agar suatu plugin menjadi warga yang baik dalam ekosistem Gradle modern, ia harus kompatibel dengan cache konfigurasi. Hal ini membutuhkan pemikiran ulang tentang cara data mengalir ke tugas kita.</p> </div> <div class="paragraph"> <p>Kunci adalah untuk menggunakan<strong>API Penyedia</strong>Gradle. Alih-alih meneruskan nilai langsung (seperti satu`String` ou un <code>File</code>) untuk tugas-tugas kita, kita harus menghabiskan beberapa`Property<T>`atau beberapa`Provider<T>`.</p> </div> <div class="olist arabic"> <div class="title">Ini rencana refactoring :</div> <ol class="arabic"> <li> <p><strong>Mendeklarasikan entri tugas:</strong>Tugas yang memparsing file YAML harus menyatakan file tersebut sebagai masukan. Untuk itu, kita menggunakan anotasi.<code>@InputFile</code>.</p> </li> </ol> </div> <div class="paragraph"> <p>[source,kotlin] ---- @get:InputFile abstract val configFile: RegularFileProperty Halo dunia</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0091_jackson_yaml_tdd_post.html Thu, 25 Sep 2025 00:00:00 +0000 blog/2025/0091_jackson_yaml_tdd_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_1_konteks_plugin_kami_site_baker">1. Konteks: Plugin kami `site-baker</a></li> <li><a href="#_2_pemodelan_konfigurasi_dalam_kotlin">2. Pemodelan Konfigurasi dalam Kotlin</a></li> <li><a href="#_3_integrasi_jackson_dalam_build_gradle_kts">3. Integrasi Jackson dalam `build.gradle.kts</a></li> <li><a href="#_4_pendekatan_tdd_menguji_parsing_yaml">4. Pendekatan TDD: Menguji Parsing YAML</a> <ul class="sectlevel2"> <li><a href="#_4_1_uji_unit_memetakan_yaml_menjadi_objek_kotlin">4.1. Uji Unit : Memetakan YAML menjadi Objek Kotlin</a></li> <li><a href="#_4_2_test_fungsional_memvalidasi_pembacaan_file_konfigurasi">4.2. Test Fungsional: Memvalidasi pembacaan file konfigurasi</a></li> </ul> </li> <li><a href="#_5_visualisasi_alur_parsing">5. Visualisasi Alur Parsing</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Target audience: Pengembang Gradle tingkat menengah yang ingin mengelola konfigurasi kompleks.</div> <p>Dalam pengembangan plugin Gradle, pengelolaan konfigurasi kompleks adalah tugas yang umum. Alih-alih membebani DSL dengan ratusan properti, sering kali lebih bersih dan lebih mudah dipelihara untuk mendefinisikan konfigurasi dalam file eksternal, seperti YAML. Artikel ini memandu Anda melalui integrasi pustaka Jackson yang kuat untuk mengurai file YAML menjadi objek Kotlin, dengan menerapkan pendekatan TDD yang ketat untuk memastikan keandalan plugin kami.<code>site-baker</code>.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_konteks_plugin_kami_site_baker">1. Konteks: Plugin kami `site-baker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin kami`site-baker`dirancang untuk mengotomatiskan pembuatan dan penyebaran situs statis. Perlu membaca berkas konfigurasi YAML (<code>managed-jbake-context.yml</code>) untuk mendapatkan informasi seperti jalur sumber, tujuan penyebaran, dan identitas Git.</p> </div> <div class="paragraph"> <p>Konfigurasi YAML yang ingin kita parse mirip seperti ini :</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_pemodelan_konfigurasi_dalam_kotlin">2. Pemodelan Konfigurasi dalam Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebelum mem-parse, kita harus menentukan struktur data kita dalam Kotlin. Jackson akan menggunakan kelas ini untuk secara otomatis memetakan konten YAML.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/src/main/kotlin/com/cheroliv/site/baker/data/SiteConfiguration.kt package com.cheroliv.site.baker.data import com.fasterxml.jackson.databind.ObjectMapper import com.fasterxml.jackson.dataformat.yaml.YAMLFactory import com.fasterxml.jackson.module.kotlin.readValue import com.fasterxml.jackson.module.kotlin.registerKotlinModule fun parseSiteConfiguration(yaml: String): SiteConfiguration { val mapper = ObjectMapper(YAMLFactory()).registerKotlinModule() return mapper.readValue(yaml) } data class GitPushConfiguration( val from: String = "", val to: String = "", val repo: RepositoryConfiguration = RepositoryConfiguration(), val branch: String = "", val message: String = "", ) data class RepositoryConfiguration( val name: String = "", val repository: String = "", val credentials: RepositoryCredentials = RepositoryCredentials(), ) { companion object { const val ORIGIN = "origin" const val CNAME = "CNAME" const val REMOTE = "remote" } } data class RepositoryCredentials(val username: String = "", val password: String = "") data class SiteConfiguration( val bake: BakeConfiguration = BakeConfiguration(), val pushPage: GitPushConfiguration = GitPushConfiguration(), val pushMaquette: GitPushConfiguration = GitPushConfiguration(), val pushSource: GitPushConfiguration? = null, val pushTemplate: GitPushConfiguration? = null, val supabase: SupabaseContactFormConfig? = null ) data class BakeConfiguration( val srcPath: String = "", val destDirPath: String = "", val cname: String? = null, ) // ... (autres data classes pour Supabase, si nécessaire)</code></pre> </div> </div> <div class="paragraph"> <p>Fungsi`parseSiteConfiguration`adalah titik masuk kami untuk deserialisasi. Dia menggunakan`ObjectMapper`Jackson, dikonfigurasi dengan`YAMLFactory`untuk format YAML dan`registerKotlinModule()`untuk dukungan spesifikasi Kotlin (seperti nilai default properti).</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_integrasi_jackson_dalam_build_gradle_kts">3. Integrasi Jackson dalam `build.gradle.kts</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menggunakan Jackson, kita harus menambahkan dependensi yang diperlukan dalam`build.gradle.kts`modul kita`plugin`(Empty output)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// plugin/build.gradle.kts dependencies { // Jackson for YAML parsing implementation("com.fasterxml.jackson.module:jackson-module-kotlin:2.18.3") implementation("com.fasterxml.jackson.dataformat:jackson-dataformat-yaml:2.18.3") // ... autres dépendances }</code></pre> </div> </div> <div class="paragraph"> <p>Kami menggunakan`jackson-module-kotlin`untuk dukungan Kotlin dan`jackson-dataformat-yaml`untuk pengelolaan format YAML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_4_pendekatan_tdd_menguji_parsing_yaml">4. Pendekatan TDD: Menguji Parsing YAML</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sekarang, mari kita terapkan TDD untuk memvalidasi logika parsing kita.</p> </div> <div class="sect2"> <h3 id="_4_1_uji_unit_memetakan_yaml_menjadi_objek_kotlin">4.1. Uji Unit : Memetakan YAML menjadi Objek Kotlin</h3> <div class="paragraph"> <p>Kami memulai dengan pengujian unit di`SiteBakerPluginTest.kt`untuk memastikan bahwa fungsi`parseSiteConfiguration`Dapat dengan benar mengonversi string YAML menjadi objek.<code>SiteConfiguration</code>.</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>Tes ini membaca isi file`managed-jbake-context.yml`(yang harus ada agar uji tersebut valid) dan melakukan asersi pada objek`SiteConfiguration`Hasil. Ia memvalidasi bahwa nilai kunci YAML dipetakan dengan benar.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_test_fungsional_memvalidasi_pembacaan_file_konfigurasi">4.2. Test Fungsional: Memvalidasi pembacaan file konfigurasi</h3> <div class="paragraph"> <p>Untuk memastikan bahwa plugin dapat membaca file konfigurasi melalui DSL-nya dan bahwa parsing berfungsi dalam lingkungan Gradle nyata, kami menambahkan sebuah tes fungsional di`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="paragraph"> <p>Uji ini sangat penting karena mensimulasikan eksekusi plugin dalam proyek nyata. Harus<strong>kedap udara</strong>, yaitu dia harus membuat berkas itu sendiri`managed-jbake-context.yml`dengan konten yang terkontrol, untuk memastikan reprodukibilitas dan isolasi uji.</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>Tes fungsional ini memverifikasi bahwa file konfigurasi yang disalin ke direktori sementara tes mengandung data yang diharapkan. Meskipun tes ini tidak secara langsung mem-parse YAML menjadi objek Kotlin, ia memvalidasi keberadaan file dan isinya, yang merupakan langkah prasyarat penting untuk parsing oleh plugin.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_visualisasi_alur_parsing">5. Visualisasi Alur Parsing</h2> <div class="sectionbody"> <div class="paragraph"> <p>Diagram berikut menggambarkan aliran data dan interaksi saat parsing konfigurasi YAML :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml actor "Pengguna Gradle" as User participant "build.gradle.kts" as BuildScript participant "SiteBakerPlugin" as Plugin participant "ExtensiSitus" as Extension participant "managed-jbake-context.yml" as ConfigFile participant "parseSiteConfiguration()" as Parser participant "SiteConfiguration (Objek Kotlin)" as KotlinObject User -> BuildScript : Applique le plugin et configure le DSL BuildScript -> Plugin : apply() Plugin -> Extension : Crée et enregistre l'extension 'site' User -> BuildScript : site { configPath = "..." } BuildScript -> Extension : Définit configPath Plugin -> ConfigFile : Lit le fichier (via configPath) ConfigFile --> Plugin : Contenu YAML Plugin -> Parser : Appelle parseSiteConfiguration(yamlString) Parser -> KotlinObject : Mappe le YAML en objet SiteConfiguration KotlinObject --> Plugin : Retourne l'objet configuré @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dengan mengikuti pendekatan TDD, kami berhasil mengintegrasikan pustaka Jackson untuk menguraikan file konfigurasi YAML menjadi objek Kotlin dalam plugin Gradle kami. Pendekatan ini memungkinkan kami untuk :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Membuat model dengan jelas</strong>konfigurasi kita dengan kelas data Kotlin.</p> </li> <li> <p><strong>Memvalidasi logika parsing</strong>dengan tes unit terarah.</p> </li> <li> <p><strong>Memastikan integrasi</strong>di lingkungan Gradle yang nyata berkat uji fungsional yang ermetis.</p> </li> </ul> </div> <div class="paragraph"> <p>Dasar solid ini memberi kita kepercayaan besar untuk memperluas plugin kami dengan fitur-fitur yang didasarkan pada konfigurasi ini, sekaligus menjamin kemudahan pemeliharaan dan ketahanan kode. Parsing YAML kini merupakan fitur yang andal dan teruji dari plugin kami.<code>site-baker</code>.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0090_TDD_gradle_plugin_post.html Wed, 24 Sep 2025 00:00:00 +0000 blog/2025/0090_TDD_gradle_plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_inisialisasi_proyek">Inisialisasi Proyek</a></li> <li><a href="#_2_siklus_tdd_pertama_kami_mencatat_sebuah_tugas">2. Siklus TDD Pertama Kami: Mencatat sebuah tugas</a> <ul class="sectlevel2"> <li><a href="#_2_1_uji_coba_pertama_uji_coba_yang_gagal">2.1. Uji Coba Pertama (Uji Coba yang Gagal)</a></li> <li><a href="#_2_2_kode_selanjutnya_menjalankan_uji">2.2. Kode Selanjutnya (Menjalankan Uji)</a></li> </ul> </li> <li><a href="#_3_siklus_kedua_tdd_menambahkan_ekstensi_dsl">3. Siklus Kedua TDD: Menambahkan Ekstensi DSL</a> <ul class="sectlevel2"> <li><a href="#_3_1_uji_coba_pertama">3.1. Uji coba pertama</a></li> <li><a href="#_3_2_kode_berikutnya">3.2. Kode Berikutnya</a></li> </ul> </li> <li><a href="#_4_tes_fungsional_memvalidasi_integrasi">4. Tes Fungsional: Memvalidasi Integrasi</a> <ul class="sectlevel2"> <li><a href="#_4_1_pengujian_integrasi_membuat_lingkungan_terkontrol">4.1. Pengujian Integrasi: Membuat Lingkungan Terkontrol</a></li> <li><a href="#_4_2_menyelesaikan_logika">4.2. Menyelesaikan Logika</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dalam artikel ini, kami akan menjelajahi cara menyiapkan dasar pengembangan yang kuat untuk plugin Gradle dengan menggunakan pendekatan Pengembangan Berbasis Tes (TDD - Test-Driven Development). Metode ini memastikan bahwa kode kita kuat, dapat dipelihara, dan memenuhi persyaratan secara tepat sejak awal.</p> </div> </div> </div> <div class="sect1"> <h2 id="_inisialisasi_proyek">Inisialisasi Proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle sangat memudahkan pembuatan plugin baru melalui perintah`gradle init`. Memilih untuk membuat "Gradle Plugin" dengan Kotlin, kita mendapatkan struktur proyek yang siap digunakan, mencakup dua jenis tes yang penting:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Uji Unit :</strong>Berada di`src/test`, mereka memungkinkan untuk memvalidasi komponen terisolasi dari plugin kami, seperti logika internal dari suatu tugas atau konfigurasi ekstensi. Mereka cepat dan tidak memerlukan eksekusi lengkap Gradle.</p> </li> <li> <p><strong>Uji Fungsional :</strong>Berada di`src/functionalTest`, mereka menggunakan`GradleRunner`untuk menjalankan build Gradle lengkap dalam proyek uji sementara. Hal ini memungkinkan kami untuk memverifikasi perilaku nyata plugin dalam lingkungan yang terkendali.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_2_siklus_tdd_pertama_kami_mencatat_sebuah_tugas">2. Siklus TDD Pertama Kami: Mencatat sebuah tugas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Persyaratan pertama kami sederhana: plugin harus mencatat sebuah tugas bernama`printSiteConfig`.</p> </div> <div class="sect2"> <h3 id="_2_1_uji_coba_pertama_uji_coba_yang_gagal">2.1. Uji Coba Pertama (Uji Coba yang Gagal)</h3> <div class="paragraph"> <p>Sesuai dengan TDD, kita pertama kali menulis sebuah tes yang memverifikasi keberadaan tugas ini. Di`SiteBakerPluginTest.kt`(file tes unit kami), kami menambahkan :</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>Uji coba ini gagal karena kami belum menulis kode apa pun dalam plugin kami.</p> </div> </div> <div class="sect2"> <h3 id="_2_2_kode_selanjutnya_menjalankan_uji">2.2. Kode Selanjutnya (Menjalankan Uji)</h3> <div class="paragraph"> <p>Sekarang, kami menulis kode minimum yang diperlukan di`SiteBakerPlugin.kt`agar test lulus :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class SiteBakerPlugin: Plugin<Project> { override fun apply(project: Project) { // Enregistrer une tâche simple project.tasks.register("printSiteConfig") { task -> // ... la logique de la tâche viendra plus tard } } }</code></pre> </div> </div> <div class="paragraph"> <p>Kami memulai ulang tes, dan mereka lulus. Fitur pertama kami telah divalidasi.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_3_siklus_kedua_tdd_menambahkan_ekstensi_dsl">3. Siklus Kedua TDD: Menambahkan Ekstensi DSL</h2> <div class="sectionbody"> <div class="paragraph"> <p>Persyaratan berikutnya adalah memungkinkan pengguna untuk mengonfigurasi plugin kami melalui blok DSL di`build.gradle.kts`. Kami ingin sebuah blok`site { …​ }`di mana seseorang dapat menentukan jalur konfigurasi.</p> </div> <div class="sect2"> <h3 id="_3_1_uji_coba_pertama">3.1. Uji coba pertama</h3> <div class="paragraph"> <p>Kami menambahkan uji untuk memverifikasi bahwa ekstensi`site`Tercatat dengan baik dan nilai dapat diberikan kepadanya.</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>Uji ini gagal karena tidak kelas`SiteExtension`baik tidak ada pendaftaran ekstensi</p> </div> </div> <div class="sect2"> <h3 id="_3_2_kode_berikutnya">3.2. Kode Berikutnya</h3> <div class="paragraph"> <p>Kami membuat kelas`SiteBakerExtension.kt`dan kami memperbarui`SiteBakerPlugin.kt`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// SiteBakerExtension.kt open class SiteExtension @Inject constructor(objects: ObjectFactory) { val configPath: Property<String> = objects.property(String::class.java) } // SiteBakerPlugin.kt class SiteBakerPlugin: Plugin<Project> { override fun apply(project: Project) { // Enregistrer l'extension val extension = project.extensions.create("site", SiteExtension::class.java) project.tasks.register("printSiteConfig") { task -> task.doLast { // On utilisera l'extension plus tard } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Tes kembali berhasil.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_tes_fungsional_memvalidasi_integrasi">4. Tes Fungsional: Memvalidasi Integrasi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sekarang setelah unit diuji, kita harus memastikan semuanya berfungsi bersama dalam build yang sebenarnya. Ini adalah peran dari pengujian fungsional dalam`SiteBakerPluginFunctionalTest.kt`.</p> </div> <div class="sect2"> <h3 id="_4_1_pengujian_integrasi_membuat_lingkungan_terkontrol">4.1. Pengujian Integrasi: Membuat Lingkungan Terkontrol</h3> <div class="paragraph"> <p>Tes ini akan mensimulasikan proyek nyata yang menggunakan plugin kita. Agar dapat dipercaya, ia harus<strong>hermetis</strong>, artinya ia tidak boleh bergantung pada file yang ada di sistem. Dia harus menciptakan sendiri semua kondisi yang diperlukan untuk eksekusi.</p> </div> <div class="paragraph"> <p>Uji coba maka:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Membuat`build.gradle.kts`uji yang menggunakan plugin kami dan DSL-nya.</p> </li> <li> <p><strong>Membuat file konfigurasi</strong> (<code>managed-jbake-context.yml</code>) yang seharusnya dibaca oleh plugin. Ini adalah langkah krusial untuk ketangguhan uji.</p> </li> <li> <p>Jalankan tugas`printSiteConfig`melalui`GradleRunner`.</p> </li> <li> <p>Pastikan bahwa output build-nya benar.</p> </li> </ol> </div> <div class="paragraph"> <p>Salin atau buat file konfigurasi ini setiap kali dijalankan, kami memastikan bahwa pengujian adalah<strong>dapat direproduksi</strong>dan tidak bergantung pada keadaan eksternal. Ini mengamankan tes kita dari regresi yang mungkin terkait dengan pembacaan file.</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>Test ini akan gagal selama tugas`printSiteConfig`Tidak akan sebenarnya menggunakan nilai ekstensi.</p> </div> </div> <div class="sect2"> <h3 id="_4_2_menyelesaikan_logika">4.2. Menyelesaikan Logika</h3> <div class="paragraph"> <p>Kami sedang memperbarui tugas di`SiteBakerPlugin.kt`supaya ia menampilkan nilai yang dikonfigurasi:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">project.tasks.register("printSiteConfig") { task -> task.doLast { println("Site config path: ${extension.configPath.get()}") } }</code></pre> </div> </div> <div class="paragraph"> <p>Semua tes, unitari dan fungsional, lulus sekarang.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dengan mengikuti pendekatan TDD, kami telah membangun sebuah plugin secara bertahap dan aman. Setiap fungsi kecil langsung divalidasi oleh sebuah tes, dari tes unit yang cepat hingga tes fungsional yang memvalidasi integrasi lengkap.</p> </div> <div class="paragraph"> <p>Dengan berhati-hati untuk membuat tes kami fungsional<strong>hermetis</strong>— terutama dengan membuat secara programmatis file konfigurasi yang diperlukan — kami membangun jaring keamanan yang sangat kuat. Ketelitian ini melindungi kami secara efektif dari regresi dan memberi kami kepercayaan besar untuk menambahkan fitur-fitur yang lebih kompleks nantinya, seperti parsing file konfigurasi YAML.</p> </div> <div class="paragraph"> <p>Basis tes yang kuat ini adalah aset paling berharga untuk pemeliharaan dan perkembangan masa depan plugin.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0089_creation_projet_plugin_gradle_post.html Tue, 23 Sep 2025 00:00:00 +0000 blog/2025/0089_creation_projet_plugin_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_langkah_1_mulai_asisten_proyek">Langkah 1 : Mulai asisten proyek</a></li> <li><a href="#_langkah_2_memahami_struktur_yang_dihasilkan">Langkah 2: Memahami struktur yang dihasilkan</a> <ul class="sectlevel2"> <li><a href="#_file_dan_folder_kunci">File dan folder kunci</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Sasaran : Pengembang pemula hingga menengah dengan Gradle.</div> <p>Memulai proyek plugin Gradle baru bisa terasa mengancam. Untungnya, Gradle menyediakan asisten interaktif yang kuat, tugas`init`, yang menghasilkan struktur proyek lengkap, bersih, dan siap pakai. Panduan ini akan menunjukkan kepada Anda cara menggunakan alat ini untuk membuat dasar plugin sehat, menjelaskan struktur, dan menampilkan cara menjalankan tugas-build pertama.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_1_mulai_asisten_proyek">Langkah 1 : Mulai asisten proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Perintah`gradle init`adalah titik awal. Dia meluncurkan asisten baris perintah yang menanyakan serangkaian pertanyaan untuk mengonfigurasi proyek.</p> </div> <div class="paragraph"> <p>Buka terminal Anda di folder kosong dan jalankan :</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>Asisten akan memandu Anda. Berikut pilihan yang harus dilakukan untuk plugin Gradle yang ditulis dalam Kotlin:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Pilih jenis proyek untuk dihasilkan:</strong>Pilih`Gradle plugin`.</p> </li> <li> <p><strong>Pilih bahasa implementasi:</strong>Pilih`Kotlin`.</p> </li> <li> <p><strong>Pilih DSL skrip build:</strong>Pilih`Kotlin`.</p> </li> <li> <p><strong>Nama proyek:</strong>Masukkan nama untuk proyek Anda (contoh:`site-baker`)</p> </li> <li> <p><strong>Id plugin:</strong>Berikan ID unik untuk plugin Anda (contoh:`com.cheroliv.site-baker`)</p> </li> <li> <p><strong>Kelas plugin:</strong>Tentukan nama kelas implementasi (contoh:`com.cheroliv.SiteBakerPlugin`).</p> </li> </ol> </div> <div class="paragraph"> <p>Setelah selesai, Gradle menghasilkan pohon file lengkap.</p> </div> <div class="listingblock"> <div class="title">Diagram proses inisialisasi</div> <div class="content"> <pre>@startuml start :Lancer `gradle init`; :Choisir "Gradle plugin"; :Choisir "Kotlin" (langage); :Choisir "Kotlin" (DSL); :Saisir nom, ID, et classe; :Projet généré; stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_2_memahami_struktur_yang_dihasilkan">Langkah 2: Memahami struktur yang dihasilkan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Asisten membuat struktur proyek multi-modul, memisahkan proyek root dari kode sumber plugin itu sendiri.</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="_file_dan_folder_kunci">File dan folder kunci</h3> <div class="ulist"> <ul> <li> <p><code>settings.gradle.kts</code>: File ini di root menentukan modul yang termasuk dalam build. Di sini, ia mencakup sub-proyek`plugin`.</p> </li> </ul> </div> <div class="paragraph"> <p>[source,kotlin] ---- rootProject.name = "site-baker include("plugin") (empty)</p> </div> <div class="listingblock"> <div class="content"> <pre></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0088_environnement_plugin_gradle_post.html Mon, 22 Sep 2025 00:00:00 +0000 blog/2025/0088_environnement_plugin_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_1_jdk_mesin_gradle">1. JDK: Mesin Gradle</a> <ul class="sectlevel2"> <li><a href="#_versi_mana_yang_harus_dipilih">Versi mana yang harus dipilih?</a></li> <li><a href="#_installation_via_sdkman_direkomendasikan">Installation via SDKMAN! (Direkomendasikan)</a> <ul class="sectlevel3"> <li><a href="#_instal_sdkman"><strong>Instal SDKMAN!</strong></a></li> <li><a href="#_menginstal_versi_jdk">Menginstal versi JDK</a></li> <li><a href="#_memeriksa_instalasi">Memeriksa instalasi</a></li> </ul> </li> </ul> </li> <li><a href="#_2_ide_intellij_idea">2. IDE : IntelliJ IDEA</a></li> <li><a href="#_3_gradle_alat_build">3. Gradle: Alat build</a> <ul class="sectlevel2"> <li><a href="#_instalasi_via_sdkman">Instalasi via SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_instal_gradle">Instal Gradle</a></li> <li><a href="#_memverifikasi_instalasi">Memverifikasi instalasi</a></li> </ul> </li> </ul> </li> <li><a href="#_4_jbake_generator_situs_statik">4. JBake : Generator situs statik</a> <ul class="sectlevel2"> <li><a href="#_instalasi_via_sdkman_2">Instalasi via SDKMAN!</a> <ul class="sectlevel3"> <li><a href="#_pasang_jbake"><strong>Pasang JBake</strong></a></li> <li><a href="#_memeriksa_instalasi_2">Memeriksa instalasi</a></li> </ul> </li> </ul> </li> <li><a href="#_5_gradle_wrapper_praktik_terbaik_yang_mutlak">5. Gradle Wrapper: Praktik terbaik yang mutlak</a></li> <li><a href="#_6_docker_dan_portainer_untuk_builds_yang_dapat_direproduksi_opsional">6. Docker dan Portainer : Untuk Builds yang Dapat Direproduksi (Opsional)</a> <ul class="sectlevel2"> <li><a href="#_instalasi_docker_engine">Instalasi Docker Engine</a> <ul class="sectlevel3"> <li><a href="#_menginstal_docker_melalui_skrip_resmi"><strong>Menginstal Docker melalui skrip resmi :</strong></a></li> <li><a href="#_mengelola_docker_tanpa_sudo_direkomendasikan">Mengelola Docker tanpa <code>sudo</code> (direkomendasikan) :</a></li> </ul> </li> <li><a href="#_mengelola_docker_dengan_portainer_gui">Mengelola Docker dengan Portainer (GUI)</a> <ul class="sectlevel3"> <li><a href="#_buat_volume_untuk_data_portainer">Buat volume untuk data Portainer:</a></li> <li><a href="#_mulai_kontainer_portainer">Mulai kontainer Portainer :</a></li> </ul> </li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Sasaran: Pengembang yang ingin mulai membuat plugin Gradle.</div> <p>Untuk mengembangkan plugin Gradle secara efektif, lingkungan pengembangan yang terkonfigurasi dengan baik adalah diperlukan. Pengaturan yang baik akan menghemat waktu Anda, mengurangi frustrasi, dan menjamin konsistensi build Anda.</p> </div> <div class="olist arabic"> <div class="title">Panduan ini fokus pada empat pilar penting :</div> <ol class="arabic"> <li> <p>Le <strong>JDK</strong>(Java Development Kit), karena Gradle dan JBake berjalan di JVM.</p> </li> <li> <p>Un <strong>Lingkungan Pengembangan Terintegrasi</strong>modern (IntelliJ IDEA) dengan dukungan yang baik untuk Kotlin dan Gradle.</p> </li> <li> <p><strong>Gradle</strong>dia sendiri, untuk memulai proyek.</p> </li> <li> <p><strong>JBake</strong>, mesin situs statis kita.</p> </li> </ol> </div> <div class="listingblock"> <div class="title">Komponen lingkungan pengembangan</div> <div class="content"> <pre>@startuml !theme plain node "Mesin Pengembang" { component "JDK (JVM)" as JDK component "IntelliJ IDEA" as IDE component "Gradle (global)" as Gradle component "JBake (global)" as JBake IDE --> JDK : utilise Gradle --> JDK : utilise JBake --> JDK : utilise } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_1_jdk_mesin_gradle">1. JDK: Mesin Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Gradle adalah aplikasi yang berjalan pada Java Virtual Machine (JVM). Oleh karena itu, instalasi JDK adalah prasyarat mutlak.</p> </div> <div class="sect2"> <h3 id="_versi_mana_yang_harus_dipilih">Versi mana yang harus dipilih?</h3> <div class="paragraph"> <p>Disarankan untuk menggunakan versi Java LTS (Long-Term Support). Saat ini,<strong>JDK 17</strong> ou <strong>JDK 21</strong>adalah pilihan yang sangat baik.</p> </div> </div> <div class="sect2"> <h3 id="_installation_via_sdkman_direkomendasikan">Installation via SDKMAN! (Direkomendasikan)</h3> <div class="paragraph"> <p>SDKMAN! adalah alat luar biasa untuk mengelola versi banyak SDK, termasuk Java dan Gradle.</p> </div> <div class="sect3"> <h4 id="_instal_sdkman"><strong>Instal SDKMAN!</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="_menginstal_versi_jdk">Menginstal versi JDK</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Pour lister les versions de Java disponibles sdk list java # Pour installer Java 17 (par exemple, la distribution Temurin) sdk install java 17.0.8-tem</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_memeriksa_instalasi">Memeriksa instalasi</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>Anda seharusnya melihat versi yang baru saja Anda instal ditampilkan.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_2_ide_intellij_idea">2. IDE : IntelliJ IDEA</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk pengembangan plugin Gradle dengan DSL Kotlin,<strong>IntelliJ IDEA</strong>adalah alat pilihan. Integrasinya dengan Gradle dan Kotlin tak tertandingi.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Edisi Komunitas :</strong>Gratis dan lebih dari cukup untuk memulai.</p> </li> <li> <p><strong>Edisi Ultimat :</strong>Berbayar, ia menawarkan fitur canggih untuk pengembangan web dan basis data</p> </li> </ul> </div> <div class="paragraph"> <p>Unduh versi yang cocok untuk Anda dari situs JetBrains: <a href="https://www.jetbrains.com/idea/download/" class="bare">https://www.jetbrains.com/idea/download/</a></p> </div> <div class="paragraph"> <p>IDE akan otomatis mendeteksi file Anda`build.gradle.kts` et <code>settings.gradle.kts</code>, menawarkan autocompletion yang kuat, navigasi dalam kode, dan alat debugging yang terintegrasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_3_gradle_alat_build">3. Gradle: Alat build</h2> <div class="sectionbody"> <div class="paragraph"> <p>Meskipun setiap proyek akan menggunakan versi Gradle-nya sendiri melalui Gradle Wrapper, memiliki pemasangan Gradle global berguna untuk tugas seperti inisialisasi proyek baru (<code>gradle init</code>).</p> </div> <div class="sect2"> <h3 id="_instalasi_via_sdkman">Instalasi via SDKMAN!</h3> <div class="paragraph"> <p>Seperti dengan JDK, SDKMAN! menyederhanakan instalasi Gradle.</p> </div> <div class="sect3"> <h4 id="_instal_gradle">Instal Gradle</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sdk install gradle</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_memverifikasi_instalasi">Memverifikasi instalasi</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>Perintah ini akan menampilkan versi Gradle, Kotlin, Groovy dan JDK yang digunakan.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_4_jbake_generator_situs_statik">4. JBake : Generator situs statik</h2> <div class="sectionbody"> <div class="paragraph"> <p>JBake adalah alat yang akan kita gunakan untuk mengubah file sumber kami (seperti ini) menjadi situs web statis. Memiliki instalasi lokal praktis untuk melihat pratinjau perubahan.</p> </div> <div class="sect2"> <h3 id="_instalasi_via_sdkman_2">Instalasi via SDKMAN!</h3> <div class="paragraph"> <p>Seperti dengan alat lainnya, SDKMAN! adalah metode yang paling sederhana.</p> </div> <div class="sect3"> <h4 id="_pasang_jbake"><strong>Pasang JBake</strong></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="_memeriksa_instalasi_2">Memeriksa instalasi</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>Perintah ini akan menampilkan versi JBake dan informasi lingkungan Java yang ia gunakan.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_5_gradle_wrapper_praktik_terbaik_yang_mutlak">5. Gradle Wrapper: Praktik terbaik yang mutlak</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setelah proyek Anda dibuat (yang akan kita lihat dalam artikel berikutnya), Anda tidak sebaiknya lagi menggunakan perintah global`gradle`. Sebaliknya, Anda akan menggunakan<strong>Penyiap Gradle</strong>(<code>./gradlew</code>), sebuah skrip yang termasuk dalam proyek Anda.</p> </div> <div class="paragraph"> <p>Mengapa?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Reproducibilitas :</strong>Le Wrapper memastikan bahwa setiap orang yang bekerja pada proyek (termasuk server CI/CD Anda) menggunakan persis<strong>versi yang sama dari Gradle</strong>, sehingga menghilangkan kesalahan build karena lingkungan yang berbeda.</p> </li> <li> <p><strong>Kesederhanaan :</strong>Tidak perlu menginstal Gradle secara manual untuk berkontribusi pada proyek.</p> </li> </ul> </div> <div class="paragraph"> <p>Cukup mengklon repositori dan menjalankan`./gradlew`.</p> </div> <div class="paragraph"> <p>Sebuah perintah khas akan terlihat seperti ini:</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_dan_portainer_untuk_builds_yang_dapat_direproduksi_opsional">6. Docker dan Portainer : Untuk Builds yang Dapat Direproduksi (Opsional)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Meski tidak secara ketat diperlukan untuk menulis plugin, Docker dan Portainer adalah alat DevOps modern yang sangat memudahkan pembuatan build yang dapat direplikasi dan pengelolaan lingkungan Anda.</p> </div> <div class="sect2"> <h3 id="_instalasi_docker_engine">Instalasi Docker Engine</h3> <div class="paragraph"> <p>Docker memungkinkan Anda memaketkan aplikasi Anda dan dependensinya dalam sebuah kontainer.</p> </div> <div class="sect3"> <h4 id="_menginstal_docker_melalui_skrip_resmi"><strong>Menginstal Docker melalui skrip resmi :</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="_mengelola_docker_tanpa_sudo_direkomendasikan">Mengelola Docker tanpa <code>sudo</code> (direkomendasikan) :</h4> <div class="paragraph"> <p>Tambahkan pengguna Anda ke grup`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="_mengelola_docker_dengan_portainer_gui">Mengelola Docker dengan Portainer (GUI)</h3> <div class="paragraph"> <p>Portainer adalah antarmuka web ringan untuk mengelola kontainer Docker Anda.</p> </div> <div class="sect3"> <h4 id="_buat_volume_untuk_data_portainer">Buat volume untuk data 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="_mulai_kontainer_portainer">Mulai kontainer Portainer :</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>Anda sekarang dapat mengakses antarmuka Portainer di`https://localhost:9443`.</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Lingkungan Anda sekarang siap ! Anda memiliki JDK, IDE yang paling sesuai, Gradle dan JBake. Dengan penambahan Docker, Anda juga siap untuk membuat build yang dikontainerkan dan dapat direproduksi. Dasar yang kuat ini akan memungkinkan Anda untuk fokus pada yang esensial: pengembangan plugin yang kuat dan berguna.</p> </div> <div class="paragraph"> <p>Dalam artikel berikutnya, kami akan menggunakan perintah`gradle init`untuk menghasilkan struktur dari proyek plugin pertama kami.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0087_pypi_cicd_part_3_post.html Sat, 19 Jul 2025 00:00:00 +0000 blog/2025/0087_pypi_cicd_part_3_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_integrasi_dengan_poetry">Integrasi dengan Poetry</a> <ul class="sectlevel2"> <li><a href="#_instalasi_poetry">Instalasi Poetry</a></li> <li><a href="#_inisialisasi_proyek">Inisialisasi proyek</a></li> <li><a href="#_penambahan_dan_instalasi_dependensi">Penambahan dan instalasi dependensi</a></li> <li><a href="#_publication_dengan_poetry">Publication dengan Poetry</a></li> </ul> </li> <li><a href="#_builds_direproduksi_dengan_docker">Builds direproduksi dengan Docker</a> <ul class="sectlevel2"> <li><a href="#_contoh_dockerfile">Contoh Dockerfile</a></li> <li><a href="#_integrasi_di_github_actions">Integrasi di GitHub Actions</a></li> </ul> </li> <li><a href="#_publikasi_bersyarat">Publikasi bersyarat</a></li> <li><a href="#_otomatisasi_dependensi_dengan_renovate_dan_dependabot">Otomatisasi dependensi dengan Renovate dan Dependabot</a> <ul class="sectlevel2"> <li><a href="#_dependabot">Dependabot</a></li> <li><a href="#_meng_renovasi">meng-renovasi</a></li> </ul> </li> <li><a href="#_diagram_plantuml">Diagram PlantUML</a> <ul class="sectlevel2"> <li><a href="#_kasus_penggunaan_cicd_lanjutan">Kasus Penggunaan – CI/CD Lanjutan</a></li> <li><a href="#_urutan_publikasi_bersyarat">Urutan – Publikasi bersyarat</a></li> <li><a href="#_negara_pipeline_cicd">Negara – Pipeline CI/CD</a></li> <li><a href="#_penyebaran_arsitektur_cicd">Penyebaran – Arsitektur CI/CD</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Dalam dua bagian pertama dari seri ini, kita memiliki : - Telah menyusun pipeline CI/CD yang fungsional untuk aplikasi Python dengan GitHub Actions dan PyPI. - Mengindustrialisasi pipeline ini dengan pengujian multi-versi, penerbitan bertahap melalui Test PyPI, dan alat-alat kualitas serta keamanan.</p> </div> <div class="paragraph"> <p>Dalam bagian ketiga ini, kita akan pergi<strong>di luar sekadar publikasi di PyPI</strong>untuk membangun rantai CI/CD yang lengkap, kuat, dan profesional dengan : - <strong>Puisi</strong>untuk packaging modern dan manajemen dependensi yang dioptimalkan. - <strong>Docker</strong>untuk membuat build yang dapat direproduksi dan multi-platform - <strong>Publikasi bersyarat</strong>untuk mengelola skenario seperti release candidates - <strong>Alat otomatisasi</strong>(Renovate, Dependabot) untuk menjaga pipeline tetap aktual tanpa usaha.</p> </div> </div> </div> <div class="sect1"> <h2 id="_integrasi_dengan_poetry">Integrasi dengan Poetry</h2> <div class="sectionbody"> <div class="paragraph"> <p>Poetry menggantikan alat-alat packaging lama (setup.py, requirements.txt) dengan mengkonsolidasikan pengelolaan dependensi dan build dalam`pyproject.toml`.</p> </div> <div class="sect2"> <h3 id="_instalasi_poetry">Instalasi Poetry</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" 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="_inisialisasi_proyek">Inisialisasi proyek</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" 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>Ini menghasilkan sebuah file`pyproject.toml`:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-toml hljs" data-lang="toml">[tool.poetry] name = "playlist-downloader" version = "0.1.0" description = "CLI tool for managing YouTube playlists" authors = ["Christophe Hérolivier <cheroliv@example.com>"] [tool.poetry.dependencies] python = ">=3.8" typer = "^0.9.0" yt-dlp = "^2023.7.6" google-api-python-client = "^2.0.0" google-auth-oauthlib = "^1.0.0" [tool.poetry.group.dev.dependencies] pytest = "^7.0" mypy = "^1.0" bandit = "^1.7" safety = "^2.3" black = "^23.0" ruff = "^0.1"</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_penambahan_dan_instalasi_dependensi">Penambahan dan instalasi dependensi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" 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="_publication_dengan_poetry">Publication dengan Poetry</h3> <div class="paragraph"> <p>Poetry mengelola publikasi secara bawaan:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-shell hljs" 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>Perintah ini secara otomatis menggunakan informasi yang ada di`pyproject.toml`.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_builds_direproduksi_dengan_docker">Builds direproduksi dengan Docker</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk memastikan eksekusi yang identik di pengembangan, CI/CD, dan produksi, Docker terintegrasi sempurna dengan Poetry.</p> </div> <div class="sect2"> <h3 id="_contoh_dockerfile">Contoh Dockerfile</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-dockerfile hljs" 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>Ini menjamin : - Lingkungan Python yang beku. - Dependensi yang terkunci via`poetry.lock`. Gambar yang dapat dijalankan di semua sistem yang mendukung Docker.</p> </div> </div> <div class="sect2"> <h3 id="_integrasi_di_github_actions">Integrasi di GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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="_publikasi_bersyarat">Publikasi bersyarat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam pipeline profesional, harus dapat mempublikasikan hanya dalam beberapa kasus : - Release candidates ke Test PyPI. - Versi stabil ke PyPI. - Builds Docker yang dimemicu hanya untuk`main`.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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>Pendekatan ini menghindari publikasi yang tidak disengaja</p> </div> </div> </div> <div class="sect1"> <h2 id="_otomatisasi_dependensi_dengan_renovate_dan_dependabot">Otomatisasi dependensi dengan Renovate dan Dependabot</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agar dependensi Anda tidak menjadi usang, integrasikan alat pembaruan otomatis.</p> </div> <div class="sect2"> <h3 id="_dependabot">Dependabot</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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 membuka PR setiap minggu untuk memperbarui dependensi Python dan GitHub Actions.</p> </div> </div> <div class="sect2"> <h3 id="_meng_renovasi">meng-renovasi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" 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 memungkinkan kontrol yang lebih halus: pengelompokan dependensi, penjadwalan, dan aturan canggih.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagram_plantuml">Diagram PlantUML</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_kasus_penggunaan_cicd_lanjutan">Kasus Penggunaan – CI/CD Lanjutan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml actor Developer actor GitHub as "GitHub Actions" actor PyPI actor DockerRegistry as "Docker Registry" actor Automation as "Renovate/Dependabot" Developer --> (Push code) (Trigger CI) --> GitHub GitHub --> (Run Tests & Lint) GitHub --> (Build Docker Image) GitHub --> DockerRegistry GitHub --> (Publish to Test PyPI) GitHub --> (Promote to PyPI) Automation --> (Update Dependencies) @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_urutan_publikasi_bersyarat">Urutan – Publikasi bersyarat</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme vibrant left to right direction Developer -> GitHub: Push tag v1.2.3-rc GitHub -> CI: Run tests CI -> CD: Check release type CD -> Test PyPI: Publish RC Developer -> GitHub: Push tag v1.2.3 GitHub -> CD: Publish to PyPI CD -> Docker Registry: Push Docker image @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_negara_pipeline_cicd">Negara – Pipeline CI/CD</h3> <div class="listingblock"> <div class="content"> <pre>@startuml [*] --> Idle Idle --> CI_Running : push CI_Running --> CI_Success : tests ok CI_Running --> CI_Failed : tests fail CI_Success --> CD_Running : tag detected CD_Running --> CD_Success : publish ok CD_Running --> CD_Failed : error CD_Success --> [*] @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_penyebaran_arsitektur_cicd">Penyebaran – Arsitektur CI/CD</h3> <div class="listingblock"> <div class="content"> <pre>@startuml node "Mesin Pengembang" { component "Klien Git" } node "GitHub Actions" { component "CI Alur Kerja" component "CD Alur kerja" } node "Repositori Paket" { artifact "Uji PyPI" artifact "PyPI" artifact "Docker Registry" } "Mesin Pengembang" --> "GitHub Actions" "GitHub Actions" --> "Uji PyPI" "GitHub Actions" --> "PyPI" "GitHub Actions" --> "Docker Registry" @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam bagian ketiga ini, kita telah melihat bagaimana: - Modernisasi packaging Python dengan Poetry - Memastikan build yang dapat direproduksi melalui Docker. - Menyiapkan publikasi bersyarat. - Otomatiskan pembaruan dependensi.</p> </div> <div class="paragraph"> <p>Anda kini memiliki pipeline CI/CD<strong>lengkap, industri, dan aman</strong>, siap untuk berkembang bersama proyek Anda.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0086_pypi_cicd_part_2_post.html Fri, 18 Jul 2025 00:00:00 +0000 blog/2025/0086_pypi_cicd_part_2_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pengantar">Pengantar</a></li> <li><a href="#_arsitektur_pipeline_cicd">Arsitektur Pipeline CI/CD</a></li> <li><a href="#_struktur_proyek">Struktur Proyek</a></li> <li><a href="#_konfigurasi_paket_dengan_pyproject_toml">Konfigurasi Paket dengan pyproject.toml</a></li> <li><a href="#_alur_kerja_cicd_pengujian_dan_kualitas">Alur kerja CI/CD - Pengujian dan Kualitas</a></li> <li><a href="#_workflow_rilis_dan_penerapan">Workflow Rilis dan Penerapan</a></li> <li><a href="#_diagram_arsitektur">diagram arsitektur</a> <ul class="sectlevel2"> <li><a href="#_diagram_urutan_proses_rilis">Diagram Urutan - Proses Rilis</a></li> <li><a href="#_diagram_kondisi_siklus_hidup_paket">Diagram Kondisi - Siklus Hidup Paket</a></li> <li><a href="#_diagram_penyebaran_infrastruktur_cicd">Diagram Penyebaran - Infrastruktur CI/CD</a></li> </ul> </li> <li><a href="#_objek_dan_model_pipeline">Objek dan Model Pipeline</a> <ul class="sectlevel2"> <li><a href="#_diagram_kelas_model_model_cicd">Diagram kelas - Model-model CI/CD</a></li> </ul> </li> <li><a href="#_konfigurasi_rahasia">Konfigurasi Rahasia</a> <ul class="sectlevel2"> <li><a href="#_rahasia_github_actions">Rahasia GitHub Actions</a></li> <li><a href="#_pembuatan_token_pypi">Pembuatan Token PyPI</a></li> </ul> </li> <li><a href="#_skrip_pengembangan_lokal">Skrip Pengembangan Lokal</a> <ul class="sectlevel2"> <li><a href="#_makefile">Makefile</a></li> <li><a href="#_skrip_versi">Skrip Versi</a></li> </ul> </li> <li><a href="#_praktik_baik_dan_rekomendasi">Praktik Baik dan Rekomendasi</a> <ul class="sectlevel2"> <li><a href="#_versioning_semantik">Versioning Semantik</a></li> <li><a href="#_strategi_pembranching">Strategi Pembranching</a></li> <li><a href="#_pengujian_dan_cakupan">Pengujian dan Cakupan</a></li> <li><a href="#_keamanan">Keamanan</a></li> </ul> </li> <li><a href="#_monitoring_dan_observability">monitoring dan observability</a> <ul class="sectlevel2"> <li><a href="#_metrik_pipeline">Metrik Pipeline</a></li> <li><a href="#_notifikasi">Notifikasi</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_sumber_daya_tambahan">Sumber Daya Tambahan</a></li> </ul> </div> <div class="sect1"> <h2 id="_pengantar">Pengantar</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Tujuan : Mengubah pipeline sederhana menjadi pipeline industri yang kuat, mematuhi standar modern dari packaging dan rekayasa perangkat lunak.</div> <p>Dalam bagian pertama dari seri ini, kita telah membangun pipeline CI/CD sederhana namun efektif untuk mengotomatiskan pengujian dan publikasi paket Python ke PyPI.</p> </div> <div class="paragraph"> <p>Saatnya untuk profesionalisasi pipeline ini. Dalam bagian kedua ini, kita akan :</p> </div> <div class="ulist"> <ul> <li> <p>Migrasikan ke standar modern pyproject.toml,</p> </li> <li> <p>Menambahkan alat kualitas dan keamanan (Black, Mypy, Bandit, Safety),</p> </li> <li> <p>Menyiapkan tes multi-versi,</p> </li> <li> <p>Mengintegrasikan peluncuran bertahap melalui Test PyPI,</p> </li> <li> <p>Otomatiskan versioning dan perbaiki pemantauan pipeline.</p> </li> </ul> </div> <div class="paragraph"> <p>Bersiaplah untuk beralih dari pipeline fungsional ke infrastruktur CI/CD profesional.</p> </div> <div class="paragraph"> <p>Menerapkan aplikasi Python ke PyPI membutuhkan pipeline CI/CD yang kuat yang mengotomatiskan pengujian, pembangunan, dan publikasi paket. Artikel ini merinci penyiapan pipeline lengkap yang menggunakan GitHub Actions untuk aplikasi CLI Python, dengan mengandalkan praktik terbaik ekosistem Python modern.</p> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_pipeline_cicd">Arsitektur Pipeline CI/CD</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pipeline yang akan kita bangun mengikuti pendekatan bertahap:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Alur CI/CD Python ke PyPI skinparam backgroundColor #f8f9fa skinparam componentStyle rectangle rectangle "Pengembang" as dev rectangle "Repositori GitHub" as repo { rectangle ".github/workflows/" as workflows rectangle "ujian/" as tests rectangle "setup.py / pyproject.toml" as setup rectangle "requirements.txt" as req } rectangle "GitHub Tindakan" as actions { rectangle "Pelaksana Pengujian" as test_runner rectangle "Bangun" as build rectangle "Pindai Keamanan" as security rectangle "Pemeriksaan Kualitas" as quality } rectangle "PyPI" as pypi { rectangle "Uji PyPI" as test_pypi rectangle "Produksi PyPI" as prod_pypi } rectangle "Pengguna" as users dev --> repo : push/PR repo --> actions : trigger workflow actions --> test_runner : run tests actions --> security : security checks actions --> quality : code quality actions --> build : build package build --> test_pypi : deploy (pre-release) build --> prod_pypi : deploy (release) prod_pypi --> users : install package @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_struktur_proyek">Struktur Proyek</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebuah aplikasi CLI Python yang siap untuk didistribusikan harus mematuhi struktur yang terstandar :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" 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="_konfigurasi_paket_dengan_pyproject_toml">Konfigurasi Paket dengan pyproject.toml</h2> <div class="sectionbody"> <div class="paragraph"> <p>File`pyproject.toml`adalah standar modern untuk mengonfigurasi paket Python:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-toml hljs" data-lang="toml">[build-system] requires = ["setuptools>=45", "wheel", "setuptools_scm>=6.2"] build-backend = "setuptools.build_meta" [project] name = "playlist-downloader" authors = [ {name = "Christophe Hérolivier", email = "cheroliv@example.com"}, ] description = "CLI tool for YouTube playlist management" readme = "README.md" requires-python = ">=3.8" keywords = ["youtube", "playlist", "cli", "downloader"] license = {text = "MIT"} classifiers = [ "Development Status :: 4 - Beta", "Environment :: Console", "Intended Audience :: End Users/Desktop", "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3", "Programming Language :: Python :: 3.8", "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", "Programming Language :: Python :: 3.11", "Topic :: Multimedia :: Sound/Audio", "Topic :: Utilities", ] dependencies = [ "typer>=0.9.0", "yt-dlp>=2023.7.6", "google-api-python-client>=2.0.0", "google-auth-oauthlib>=1.0.0", "pyyaml>=6.0", "rich>=13.0.0", ] dynamic = ["version"] [project.optional-dependencies] dev = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", "black>=23.0.0", "flake8>=6.0.0", "mypy>=1.0.0", "pre-commit>=3.0.0", "tox>=4.0.0", ] test = [ "pytest>=7.0.0", "pytest-cov>=4.0.0", "pytest-mock>=3.10.0", ] [project.urls] Homepage = "https://github.com/cheroliv/playlist-downloader" Documentation = "https://github.com/cheroliv/playlist-downloader#readme" Repository = "https://github.com/cheroliv/playlist-downloader.git" "Bug Tracker" = "https://github.com/cheroliv/playlist-downloader/issues" [project.scripts] playlist-downloader = "playlist_downloader.cli:main" [tool.setuptools_scm] write_to = "src/playlist_downloader/_version.py" [tool.setuptools.packages.find] where = ["src"] [tool.pytest.ini_options] testpaths = ["tests"] python_files = ["test_*.py"] python_classes = ["Test*"] python_functions = ["test_*"] addopts = [ "--cov=src/playlist_downloader", "--cov-report=html", "--cov-report=term-missing", "--cov-fail-under=85", ] [tool.black] line-length = 88 target-version = ['py38'] include = '\.pyi?$' extend-exclude = ''' /( \.eggs | \.git | \.hg | \.mypy_cache | \.tox | \.venv | _build | buck-out | build | dist )/ ''' [tool.mypy] python_version = "3.8" warn_return_any = true warn_unused_configs = true disallow_untyped_defs = true disallow_incomplete_defs = true check_untyped_defs = true disallow_untyped_decorators = true no_implicit_optional = true warn_redundant_casts = true warn_unused_ignores = true warn_no_return = true warn_unreachable = true strict_equality = true [[tool.mypy.overrides]] module = [ "yt_dlp.*", "googleapiclient.*", "google_auth_oauthlib.*", ] ignore_missing_imports = true</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_alur_kerja_cicd_pengujian_dan_kualitas">Alur kerja CI/CD - Pengujian dan Kualitas</h2> <div class="sectionbody"> <div class="paragraph"> <p>Alur kerja utama (<code>ci.yml</code>) menjalankan tes pada beberapa versi Python :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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="_workflow_rilis_dan_penerapan">Workflow Rilis dan Penerapan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Alur kerja rilis (<code>release.yml</code>) mengelola publikasi otomatis ke PyPI:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">name: Release on: push: tags: - 'v*.*.*' workflow_dispatch: inputs: environment: description: 'Deployment environment' required: true default: 'test' type: choice options: - test - production env: PYTHON_VERSION: "3.11" jobs: release: runs-on: ubuntu-latest environment: name: ${{ github.event.inputs.environment || (startsWith(github.ref, 'refs/tags/') && 'production' || 'test') }} steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Set up Python uses: actions/setup-python@v4 with: python-version: ${{ env.PYTHON_VERSION }} - name: Install dependencies run: | python -m pip install --upgrade pip pip install build twine - name: Build package run: python -m build - name: Check package run: twine check dist/* - name: Publish to Test PyPI if: github.event.inputs.environment == 'test' || (startsWith(github.ref, 'refs/tags/') && contains(github.ref, 'rc')) env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.TEST_PYPI_API_TOKEN }} run: | twine upload --repository testpypi dist/* - name: Publish to PyPI if: github.event.inputs.environment == 'production' || (startsWith(github.ref, 'refs/tags/') && !contains(github.ref, 'rc')) env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} run: | twine upload dist/* - name: Create GitHub Release if: startsWith(github.ref, 'refs/tags/') uses: actions/create-release@v1 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ github.ref }} release_name: Release ${{ github.ref }} draft: false prerelease: ${{ contains(github.ref, 'rc') }} post-release: needs: release runs-on: ubuntu-latest if: startsWith(github.ref, 'refs/tags/') steps: - uses: actions/checkout@v4 - name: Set up Python uses: actions/setup-python@v4 with: python-version: ${{ env.PYTHON_VERSION }} - name: Test installation from PyPI run: | sleep 60 # Attendre la propagation sur PyPI pip install playlist-downloader playlist-downloader --version - name: Update documentation run: | # Script pour mettre à jour la documentation echo "Documentation updated for version ${GITHUB_REF#refs/tags/}"</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagram_arsitektur">diagram arsitektur</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagram_urutan_proses_rilis">Diagram Urutan - Proses Rilis</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Urutan rilis ke PyPI actor Developer as dev participant "GitHub" as gh participant "GitHub Actions" as ga participant "Test PyPI" as tpypi participant "PyPI" as pypi participant "Pengguna" as users dev -> gh : git push --tags v1.2.3 gh -> ga : trigger release workflow ga -> ga : checkout code ga -> ga : setup Python environment ga -> ga : install dependencies ga -> ga : run tests ga -> ga : build package (wheel + sdist) ga -> ga : check package with twine alt Pre-release (rc tag) ga -> tpypi : upload to Test PyPI tpypi -> ga : confirm upload else Stable release ga -> pypi : upload to PyPI pypi -> ga : confirm upload end ga -> gh : create GitHub release ga -> ga : test installation from PyPI users -> pypi : pip install playlist-downloader pypi -> users : download package @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_diagram_kondisi_siklus_hidup_paket">Diagram Kondisi - Siklus Hidup Paket</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Status Paket Python [*] --> Development Development --> Testing : commit/PR Testing --> Development : tests fail Testing --> Built : tests pass Built --> TestPyPI : pre-release tag Built --> PyPI : stable tag TestPyPI --> PyPI : validation OK PyPI --> Published Published --> [*] state Development { [*] --> Coding Coding --> LocalTesting LocalTesting --> Coding : fix issues LocalTesting --> ReadyForCI : all tests pass } state Testing { [*] --> CITests CITests --> SecurityScan SecurityScan --> QualityCheck QualityCheck --> BuildValidation } @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_diagram_penyebaran_infrastruktur_cicd">Diagram Penyebaran - Infrastruktur CI/CD</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Infrastruktur penyebaran node "GitHub" { component "Repositori" as repo component "Penjalani Tindakan" as runner component "Toko Rahasia" as secrets } node "PyPI infrastruktur" { component "PyPI" as pypi component "Test PyPI" as testpypi database "Indeks Paket" as index } node "mesin pengembang" { component "Klien Git" as git component "lingkungan Python" as python component "IDE" as ide } node "Lingkungan Pengguna" { component "pip" as pip_client component "Runtime Python" as py_runtime } git --> repo : push code/tags repo --> runner : trigger workflows runner --> secrets : read API tokens runner --> testpypi : upload pre-release runner --> pypi : upload release pypi --> index : store package pip_client --> pypi : download package py_runtime <-- pip_client : install package @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_objek_dan_model_pipeline">Objek dan Model Pipeline</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagram_kelas_model_model_cicd">Diagram kelas - Model-model CI/CD</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Model Pipeline CI/CD class PipelineConfig { +python_versions: List[str] +test_environments: List[str] +security_checks: bool +coverage_threshold: float +validate() } class BuildArtifact { +name: str +version: str +wheel_path: str +sdist_path: str +checksums: Dict[str, str] +validate_integrity() } class TestResult { +test_suite: str +python_version: str +passed: int +failed: int +coverage: float +duration: float +is_success(): bool } class SecurityReport { +bandit_issues: List[Issue] +safety_vulnerabilities: List[Vulnerability] +severity_level: str +is_secure(): bool } class DeploymentTarget { +name: str +url: str +api_token: str +environment: str +deploy(artifact: BuildArtifact) } class ReleaseManager { +version: str +changelog: str +artifacts: List[BuildArtifact] +test_results: List[TestResult] +security_report: SecurityReport +deploy_to_test() +deploy_to_production() +create_github_release() } PipelineConfig ||--o{ TestResult ReleaseManager *-- BuildArtifact ReleaseManager *-- SecurityReport ReleaseManager o-- DeploymentTarget DeploymentTarget ..> BuildArtifact : uses @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfigurasi_rahasia">Konfigurasi Rahasia</h2> <div class="sectionbody"> <div class="paragraph"> <p>Agar pipeline berfungsi, Anda harus mengonfigurasi rahasia berikut di GitHub :</p> </div> <div class="sect2"> <h3 id="_rahasia_github_actions">Rahasia GitHub Actions</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Dans Settings > Secrets and variables > Actions # Token PyPI pour la production PYPI_API_TOKEN=pypi-... # Token Test PyPI pour les pré-releases TEST_PYPI_API_TOKEN=pypi-... # Token GitHub pour créer les releases GITHUB_TOKEN=(automatiquement fourni) # Token Codecov (optionnel) CODECOV_TOKEN=...</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_pembuatan_token_pypi">Pembuatan Token PyPI</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># 1. Créer un compte sur PyPI et Test PyPI # 2. Aller dans Account Settings > API tokens # 3. Créer un token avec scope "Entire account" ou spécifique au projet # 4. Format du token : pypi-AgEIcHlwaS5vcmc...</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_skrip_pengembangan_lokal">Skrip Pengembangan Lokal</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk memudahkan pengembangan, buat skrip utilitas:</p> </div> <div class="sect2"> <h3 id="_makefile">Makefile</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-makefile hljs" 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="_skrip_versi">Skrip Versi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-python hljs" data-lang="python">#!/usr/bin/env python3 """Script pour gérer les versions du projet.""" import sys import subprocess from pathlib import Path def get_current_version(): """Récupère la version actuelle depuis git.""" try: result = subprocess.run( ["git", "describe", "--tags", "--abbrev=0"], capture_output=True, text=True, check=True ) return result.stdout.strip() except subprocess.CalledProcessError: return "0.0.0" def create_version_tag(version, message=None): """Crée un tag de version.""" if not version.startswith('v'): version = f'v{version}' tag_message = message or f"Release {version}" subprocess.run(["git", "tag", "-a", version, "-m", tag_message], check=True) print(f"✅ Tag {version} créé") # Push le tag subprocess.run(["git", "push", "origin", version], check=True) print(f"✅ Tag {version} poussé vers origin") if __name__ == "__main__": if len(sys.argv) < 2: current = get_current_version() print(f"Version actuelle: {current}") print("Usage: python version.py <new_version> [message]") sys.exit(1) new_version = sys.argv[1] message = sys.argv[2] if len(sys.argv) > 2 else None create_version_tag(new_version, message)</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_baik_dan_rekomendasi">Praktik Baik dan Rekomendasi</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_versioning_semantik">Versioning Semantik</h3> <div class="paragraph"> <p>Gunakan versioning semantik (SemVer):</p> </div> <div class="ulist"> <ul> <li> <p><code>MAJOR.MINOR.PATCH</code> (ex: 1.2.3)</p> </li> <li> <p><code>MAJOR</code>: perubahan tidak kompatibel</p> </li> <li> <p><code>MINOR</code>: fitur baru yang kompatibel</p> </li> <li> <p><code>PATCH</code>: perbaikan bug yang kompatibel</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_strategi_pembranching">Strategi Pembranching</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-text hljs" data-lang="text">main ──●──●──●──●──●────●── (releases stables) / / / develop ──●──●──●──●──●──●──●──●── (développement) / / / feature/xxx ●──●──●──●──●──/ (fonctionnalités)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_pengujian_dan_cakupan">Pengujian dan Cakupan</h3> <div class="ulist"> <ul> <li> <p>Cakupan kode minimum : 85%</p> </li> <li> <p>Uji unit untuk logika bisnis</p> </li> <li> <p>Uji integrasi untuk adapter</p> </li> <li> <p>Uji ujung ke ujung untuk CLI</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_keamanan">Keamanan</h3> <div class="ulist"> <ul> <li> <p>Pemindaian otomatis dependensi (Safety)</p> </li> <li> <p>Analisis statis kode (Bandit)</p> </li> <li> <p>Rahasia tidak pernah ada dalam kode</p> </li> <li> <p>Penggunaan token PyPI khusus</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_monitoring_dan_observability">monitoring dan observability</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_metrik_pipeline">Metrik Pipeline</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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="_notifikasi">Notifikasi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pipeline CI/CD lengkap untuk Python menawarkan:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Otomatisasi lengkap</strong>dari validasi kode hingga publikasi</p> </li> <li> <p><strong>Keamanan</strong>: pindai otomatis dan pengelolaan aman rahasia</p> </li> <li> <p><strong>Kualitas</strong>tes multi-versi, linting dan cakupan kode</p> </li> <li> <p><strong>keandalan</strong>: penerapan progresif melalui Test PyPI</p> </li> <li> <p><strong>pelacakan</strong>: artefak, laporan dan rilis GitHub</p> </li> </ul> </div> <div class="paragraph"> <p>Adoptasi praktik ini menjamin proses pengiriman yang kuat dan profesional untuk aplikasi CLI Python Anda, memudahkan pemeliharaan dan perkembangan proyek Anda dalam jangka panjang.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_daya_tambahan">Sumber Daya Tambahan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://packaging.python.org/">Panduan Pengguna Paket Python</a></p> </li> <li> <p><a href="https://docs.github.com/en/actions">Dokumentasi GitHub Actions</a></p> </li> <li> <p><a href="https://pypi.org/help/">PyPI Dokumentasi Bantuan</a></p> </li> <li> <p><a href="https://semver.org/">Spesifikasi Semantic Versioning</a></p> </li> <li> <p><a href="https://keepachangelog.com/">Pertahankan Changelog</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2025/0085_pypi_cicd_part_1_post.html Thu, 17 Jul 2025 00:00:00 +0000 blog/2025/0085_pypi_cicd_part_1_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pengenalan">Pengenalan</a></li> <li><a href="#_arsitektur_pipeline">Arsitektur Pipeline</a></li> <li><a href="#_konfigurasi_pipeline_integrasi_berkelanjutan_ci">Konfigurasi Pipeline Integrasi Berkelanjutan (CI)</a> <ul class="sectlevel2"> <li><a href="#_struktur_alur_kerja_ci">Struktur alur kerja CI</a></li> <li><a href="#_analisis_langkah_ci">Analisis Langkah CI</a> <ul class="sectlevel3"> <li><a href="#_1_pemicu_on">1. Pemicu (<code>on</code>)</a></li> </ul> </li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_pengenalan">Pengenalan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Tujuan : Membimbing pembaca dalam menyiapkan pipeline CI/CD minimalis namun fungsional untuk aplikasi Python, dengan deployment otomatis ke PyPI.</div> <p>Otomatisasi proses pengembangan telah menjadi tidak terelakkan dalam proyek-proyek modern. Sebuah pipeline CI/CD yang dirancang dengan baik tidak hanya memungkinkan deteksi regresi lebih awal dalam siklus pengembangan, tetapi juga mengotomatisasi seluruh proses penyebaran.</p> </div> <div class="paragraph"> <p>Dalam artikel ini, kita akan menjelajahi cara menyiapkan pipeline lengkap dengan GitHub Actions untuk aplikasi Python, dari integrasi berkelanjutan (CI) hingga deploy berkelanjutan (CD) ke PyPI.</p> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_pipeline">Arsitektur Pipeline</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pipeline kami terdiri dari dua alur kerja yang berbeda:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Alur CI</strong>: Dieksekusi pada setiap push dan pull request</p> </li> <li> <p><strong>Pipeline CD</strong>Demicu hanya selama rilis GitHub</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain package "GitHub Repositori" { [Source Code] as source [GitHub Actions] as actions } package "Alur CI" { [Checkout] as checkout_ci [Setup Python] as python_ci [Install Dependencies] as deps_ci [Linting (Ruff)] as lint [Unit Tests] as tests } package "CD Pipeline" { [Checkout] as checkout_cd [Setup Python] as python_cd [Build Package] as build [Publish to PyPI] as pypi } source --> actions : Push/PR actions --> checkout_ci checkout_ci --> python_ci python_ci --> deps_ci deps_ci --> lint lint --> tests source --> actions : Release actions --> checkout_cd : On Release checkout_cd --> python_cd python_cd --> build build --> pypi @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konfigurasi_pipeline_integrasi_berkelanjutan_ci">Konfigurasi Pipeline Integrasi Berkelanjutan (CI)</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_struktur_alur_kerja_ci">Struktur alur kerja CI</h3> <div class="paragraph"> <p>Alur kerja CI dirancang untuk memvalidasi setiap kontribusi ke kode. Berikut konfigurasi lengkapnya :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" 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="_analisis_langkah_ci">Analisis Langkah CI</h3> <div class="sect3"> <h4 id="_1_pemicu_on">1. Pemicu (<code>on</code>)</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-yaml hljs" data-lang="yaml">---- ---- on: push: branches: - main pull_request: branches: - main ---- Pipeline dipicu pada : - Setiap push ke cabang`main` - Setiap pull request menuju`main` Pendekatan ini memastikan bahwa kode utama tetap stabil dan bahwa semua kontribusi divalidasi sebelum integrasi. ==== 2. Lingkungan Eksekusi ---- runs-on: ubuntu-latest Ubuntu Latest menawarkan kompromi yang baik antara performa, biaya, dan kompatibilitas untuk sebagian besar proyek Python. ==== 3. Checkout Kode ```yaml ---- ---- - name: Checkout code uses: actions/checkout@v4 ---- tindakan </think> tindakan`checkout@v4`Mengambil kode sumber dari repositori. Versi v4 memberikan peningkatan performa dan keamanan. ==== 4. Konfigurasi Python ---- - name: Set up Python uses: actions/setup-python@v5 with: python-version: '3.x' penggunaan`'3.x'`memungkinkan penggunaan otomatis versi stabil terbaru dari Python 3, memudahkan pemeliharaan. ==== 5. Instalasi Dependensi ```yaml ---- ---- - name: Install dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt pip install ruff pytest pytest-mock ---- Tahap ini : - Memperbarui pip ke versi terbaru - Instal dependensi proyek - Tambahkan alat pengembangan (linting dan ujian) ==== 6. Linting dengan Ruff ---- - name: Run Linting (Ruff) run: ruff check . **Ruff**adalah linter Python yang sangat cepat yang ditulis dalam Rust. Dia menggabungkan fitur dari beberapa alat (Flake8, Black, isort) menjadi satu alat yang kuat. ==== 7. Pelaksanaan Tes ```yaml ---- ---- - name: Run Tests (Pytest) run: pytest ---- Pytest menjalankan seluruh suite tes, memastikan bahwa perubahan tidak memperkenalkan regresi. == Konfigurasi Pipeline Penerapan (CD) === Struktur Workflow CD Workflow CD hanya terpicu selama rilis GitHub dan mengotomatiskan publikasi ke 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/* ---- === Analisis Tahap CD ==== 1. Pemicu Pelepasan ---- on: release: types: - published Pipeline CD hanya dipicu saat mempublikasikan rilis GitHub. Pendekatan ini memastikan kontrol yang tepat atas penerapan. ==== 2. Instalasi Alat Pembangunan ```yaml ---- ---- pip install setuptools wheel twine ---- - **setuptools**: Alat packaging Python - **roda**: Format distribusi Python modern - **benang**: Alat aman untuk mengunggah ke PyPI ==== 3. Konfigurasi Otentikasi ---- env: TWINE_USERNAME: __token__ TWINE_PASSWORD: ${{ secrets.PYPI_API_TOKEN }} Autentikasi menggunakan token API PyPI yang disimpan sebagai rahasia GitHub, lebih aman daripada kredensial konvensional. ==== 4. Build dan publikasi ```yaml ---- ---- run: | python setup.py sdist bdist_wheel twine upload dist/* ---- - `sdist`: Buat distribusi sumber - `bdist_wheel`: Membuat sebuah wheel (distribusi biner) - `twine upload`Mempublikasikan distribusi pada PyPI == Konfigurasi Paket Python === Struktur setup.py Agar pipeline berfungsi, proyek Anda harus menyertakan sebuah file`setup.py`: [source,python] ---- from setuptools import setup, find_packages with open("README.adoc", "r", encoding="utf-8") as fh: long_description = fh.read() setup( name="playlist-downloader", version="1.0.0", author="Votre Nom", author_email="votre.email@example.com", description="CLI tool for managing YouTube playlists", long_description=long_description, long_description_content_type="text/plain", url="https://github.com/cheroliv/playlist-downloader", packages=find_packages(), classifiers=[ "Development Status :: 4 - Beta", "Intended Audience :: Developers", "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3", "Programming Language :: Python :: 3.8", "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", "Programming Language :: Python :: 3.11", ], python_requires=">=3.8", install_requires=[ "typer>=0.9.0", "yt-dlp>=2023.1.6", "google-api-python-client>=2.70.0", "google-auth-oauthlib>=0.7.1", "pymonad>=2.4.0", "pyyaml>=6.0", ], entry_points={ "console_scripts": [ "playlist-downloader=cli:app", ], }, ) ---- === poin-poin kunci setup.py 1. **metadata**: Nama, versi, penulis, deskripsi 2. **Ketergantungan**: Daftar packages yang diperlukan 3. **Titik Masuk**: Perintah CLI yang diekspos 4. **klasifikasi**: metadata untuk PyPI == Keamanan dengan GitHub Secrets === Konfigurasi Token PyPI 1. **Membuat token API di PyPI**: - Masuk ke PyPI Buka Pengaturan Akun > API tokens - Buat token baru dengan izin yang sesuai 1. **Tambahkan rahasia di GitHub**: - Pengaturan Repositori > Rahasia dan variabel > Tindakan - Buat rahasia baru yang dinamai`PYPI_API_TOKEN` - Tempelkan token PyPI Anda [plantuml, secrets-flow, svg] ---- @startuml !theme plain actor Developer as dev participant "Repositori GitHub" as repo participant "GitHub Actions" as actions participant PyPI dev -> repo : Configure PYPI_API_TOKEN secret repo -> actions : Trigger CD pipeline on release actions -> actions : Access secret securely actions -> PyPI : Authenticate with token PyPI -> PyPI : Validate and publish package note over actions, PyPI Token never exposed in logs Automatic rotation possible end note @enduml ---- == Workflow Deployment Lengkap === Urutan Penyebaran [plantuml, deployment-sequence, svg] ---- @startuml !theme plain actor Developer as dev participant "Git lokal" as git participant "GitHub" as github participant "GitHub Tindakan" as actions participant PyPI participant "Pengguna akhir" as users dev -> git : git tag v1.0.0 dev -> git : git push origin v1.0.0 git -> github : Push tag dev -> github : Create release from tag github -> actions : Trigger CD pipeline actions -> actions : Checkout code actions -> actions : Setup Python environment actions -> actions : Install build tools actions -> actions : Build distributions (sdist + wheel) actions -> PyPI : Upload to PyPI with token PyPI -> PyPI : Validate and publish users -> PyPI : pip install playlist-downloader note over dev, github Release creation can be automated or done manually through GitHub UI end note @enduml ---- === Status Pipeline [plantuml, pipeline-states, svg] ---- @startuml !theme plain [*] --> Idle Idle --> CI_Running : Push/PR created CI_Running --> CI_Success : All checks pass CI_Running --> CI_Failed : Linting/Tests fail CI_Success --> Idle : Merge completed CI_Failed --> Idle : Fix and retry Idle --> CD_Running : Release published CD_Running --> CD_Success : Package published CD_Running --> CD_Failed : Build/Upload error CD_Success --> Idle : Package available on PyPI CD_Failed --> Idle : Fix and retry release note on link #red : Blocks merge note on link #green : Allows deployment @enduml ---- == Praktik Baik dan Optimasi === Manajemen Versi Gunakan tag Git semantik : ---- git tag -a v1.2.3 -m "Release version 1.2.3" git push origin v1.2.3 === 2. Uji Matriks Untuk menguji pada beberapa versi Python: ```yaml ---- ---- strategy: matrix: python-version: [3.8, 3.9, "3.10", "3.11"] ---- === 3. Cache Dependensi Percepat build dengan cache : ---- - name: Cache pip dependencies uses: actions/cache@v3 with: path: ~/.cache/pip key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements.txt') }} === 4. lingkungan penerapan Gunakan lingkungan GitHub untuk penerapan yang terkontrol : ```yaml ---- ---- jobs: deploy: environment: production runs-on: ubuntu-latest ---- == Kasus Penggunaan dan Arsitektur === Diagram Kasus Penggunaan [plantuml, use-cases, svg] ---- @startuml !theme plain left to right direction actor "Pengembang" as dev actor "GitHub Actions" as ga actor "Pengguna akhir" as user package "Sistem CI/CD" { usecase "Jalankan Linting" as lint usecase "Menjalankan tes" as test usecase "Membangun Paket" as build usecase "Terbitkan ke PyPI" as publish usecase "Buat Rilis" as release } dev --> lint : Pushes code dev --> test : Pushes code dev --> release : Creates release ga --> build : On release trigger ga --> publish : After successful build user --> publish : Downloads package lint .> test : triggers test .> build : on success build .> publish : on success @enduml ---- === Arsitektur Penyebaran [plantuml, deployment-architecture, svg] ---- @startuml !theme plain cloud "GitHub" { [Source Repository] [GitHub Actions] [Secrets Store] } cloud "PyPI" { [Package Registry] [Distribution Files] } node "Alur CI/CD" { [Linting] [Testing] [Building] [Publishing] } [Source Repository] --> [GitHub Actions] : Triggers [GitHub Actions] --> [Linting] [Linting] --> [Testing] [Testing] --> [Building] [Building] --> [Publishing] [Publishing] --> [Package Registry] : Uploads [Secrets Store] --> [Publishing] : Provides token note as N1 Secure token-based authentication end note [Secrets Store] .. N1 @enduml ---- == Pengawasan dan Debugging === Log dan Pemantauan GitHub Actions memberikan log terperinci untuk setiap langkah. Untuk debug: 1. **Periksa log**setiap step 2. **Aktifkan debug**dengan`ACTIONS_STEP_DEBUG` 3. **Gunakan artefak**untuk menyimpan file build ---- - name: Upload build artifacts uses: actions/upload-artifact@v3 if: failure() with: name: build-logs path: build/ === Notifikasi Tambahkan notifikasi Slack atau email : ```yaml ---- ---- - name: Notify on failure if: failure() uses: 8398a7/action-slack@v3 with: status: ${{ job.status }} webhook_url: ${{ secrets.SLACK_WEBHOOK }} ---- == Kesimpulan Penerapan pipeline CI/CD yang kuat dengan GitHub Actions secara radikal mengubah pengalaman pengembangan. Dengan mengotomatisasi linting, pengujian, dan penyebaran, Anda : - **Kurangi kesalahan**dalam produksi - **Percepat siklus**pengembangan - **Tingkatkan kepercayaan**dalam rilis Anda - **Mudahkan kolaborasi**dalam tim Pipeline ini dapat disesuaikan dengan berbagai jenis proyek Python dengan menyesuaikan alat linting, kerangka kerja pengujian, atau destinasi penerapan. Investasi awal dalam konfigurasi workflow-nya segera menguntungkan melalui penghematan waktu dan penurunan kesalahan manual selama penerapan. == Sumber Daya Tambahan - https://docs.github.com/en/actions[Dokumentasi GitHub Actions] - https://packaging.python.org/[Panduan Pengemasan Python] - https://docs.pytest.org/[Dokumentasi Pytest] - https://docs.astral.sh/ruff/[Dokumentasi Ruff] - https://twine.readthedocs.io/[Dokumentasi Twine] ✅ Pipeline fungsional tercapai! Anda kini memiliki pipeline CI/CD sederhana yang memungkinkan Anda mengotomatiskan pengujian dan menerbitkan paket Python Anda ke PyPI langsung dari GitHub Actions. Namun, pipeline ini tetap sengaja minimalis. Ia belum mencakup beberapa aspek penting dalam konteks profesional : Uji multi-versi Python, Analisis keamanan otomatis, Penyebaran bertahap melalui Test PyPI, Pemantauan dan metrik pipeline, Otomatisasi versioning dan integrasi praktik terbaik modern (pyproject.toml). Di bagian berikutnya, kita akan melangkah ke tingkat yang lebih tinggi. Anda akan belajar mengubah pipeline dasar ini menjadi benar-benar rangkaian penyebaran industri, kuat dan aman, siap untuk proyek-produksi Python. ----</code></pre> </div> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0084_disco_bot_discord_python_post.html Wed, 16 Jul 2025 00:00:00 +0000 blog/2025/0084_disco_bot_discord_python_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_konteks_dan_tantangan_saat_ini">Konteks dan Tantangan Saat Ini</a> <ul class="sectlevel2"> <li><a href="#_perkembangan_api_musik">Perkembangan API Musik</a></li> <li><a href="#_pendekatan_pengembangan_berbasis_log">Pendekatan Pengembangan Berbasis Log</a></li> </ul> </li> <li><a href="#_arsitektur_konseptual">Arsitektur Konseptual</a></li> <li><a href="#_teknik_stack_dan_paradigma_fungsional">Teknik Stack dan Paradigma Fungsional</a> <ul class="sectlevel2"> <li><a href="#_pilihan_teknologi">Pilihan teknologi</a></li> <li><a href="#_prinsip_fungsional_yang_diterapkan">Prinsip fungsional yang diterapkan</a></li> </ul> </li> <li><a href="#_metodologi_agile_dan_backlog">Metodologi Agile dan Backlog</a> <ul class="sectlevel2"> <li><a href="#_epik_utama">Epik Utama</a> <ul class="sectlevel3"> <li><a href="#_epic_1_bot_infrastruktur_discord">Epic 1 : Bot Infrastruktur Discord</a></li> <li><a href="#_epic_2_integrasi_spotify">Epic 2 : Integrasi Spotify</a></li> <li><a href="#_epic_3_integrasi_youtube">Epic 3 : Integrasi YouTube</a></li> <li><a href="#_epic_4_fitur_musik">Epic 4 : fitur musik</a></li> </ul> </li> <li><a href="#_user_stories_terperinci">User Stories Terperinci</a> <ul class="sectlevel3"> <li><a href="#_us1_1_inisialisasi_bot">US1.1 : Inisialisasi Bot</a></li> <li><a href="#_us2_1_pencarian_spotify_cerdas">US2.1 : Pencarian Spotify Cerdas</a></li> <li><a href="#_us3_1_ekstraksi_youtube_yang_resilién">US3.1 : Ekstraksi YouTube yang resilién</a></li> </ul> </li> </ul> </li> <li><a href="#_pendekatan_pengembangan_berbasis_log_2">Pendekatan Pengembangan Berbasis Log</a> <ul class="sectlevel2"> <li><a href="#_strategi_logging">Strategi Logging</a></li> <li><a href="#_struktur_log">Struktur Log</a></li> <li><a href="#_contoh_desain_log">Contoh desain log</a></li> </ul> </li> <li><a href="#_arsitektur_validasi_dengan_pydantic">Arsitektur Validasi dengan Pydantic</a> <ul class="sectlevel2"> <li><a href="#_model_data">Model Data</a></li> </ul> </li> <li><a href="#_manajemen_kesalahan_fungsional">manajemen kesalahan fungsional</a> <ul class="sectlevel2"> <li><a href="#_monades_dan_error_handling">Monades dan Error Handling</a></li> </ul> </li> <li><a href="#_strategi_penghindaran_pembatasan">Strategi Penghindaran Pembatasan</a> <ul class="sectlevel2"> <li><a href="#_pendekatan_multi_sumber">Pendekatan multi-sumber</a></li> </ul> </li> <li><a href="#_rencana_pengembangan_iteratif">Rencana Pengembangan Iteratif</a> <ul class="sectlevel2"> <li><a href="#_perencanaan_sprint">Perencanaan Sprint</a></li> <li><a href="#_metrik_kualitas">Metrik Kualitas</a></li> </ul> </li> <li><a href="#_penyebaran_dan_pemantauan">Penyebaran dan Pemantauan</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_produksi">Arsitektur Produksi</a></li> <li><a href="#_pemantauan_proaktif">Pemantauan Proaktif</a></li> </ul> </li> <li><a href="#_kesimpulan_dan_perspektif">Kesimpulan dan Perspektif</a> <ul class="sectlevel2"> <li><a href="#_langkah_selanjutnya">Langkah Selanjutnya</a></li> </ul> </li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan"><a class="anchor" href="#_pendahuluan"></a>Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Artikel ini menyajikan pendekatan metodologis yang didasarkan pada<strong>Log Driven Development</strong>(LDD), sebuah ekstensi dari Test Driven Development, diterapkan dalam paradigma fungsional dengan Python.</p> </div> <div class="paragraph"> <p>Tujuan kami: menciptakan bot yang tangguh, mudah dipelihara, dan dapat dikembangkan, yang mampu menavigasi batasan API musik terkini sambil memberikan pengalaman pengguna yang lancar di Discord.</p> </div> </div> </div> <div class="sect1"> <h2 id="_konteks_dan_tantangan_saat_ini"><a class="anchor" href="#_konteks_dan_tantangan_saat_ini"></a>Konteks dan Tantangan Saat Ini</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_perkembangan_api_musik"><a class="anchor" href="#_perkembangan_api_musik"></a>Perkembangan API Musik</h3> <div class="paragraph"> <p>Platform musik telah memperketat secara signifikan kebijakan akses mereka:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Spotify</strong>: Pembatasan akses ke metadata, pembatasan kuota</p> </li> <li> <p><strong>YouTube</strong>: Kebijakan anti-bot diperkuat, kompleksifikasi autentikasi</p> </li> <li> <p><strong>Discord</strong>: Persyaratan baru keamanan dan kinerja</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_pendekatan_pengembangan_berbasis_log"><a class="anchor" href="#_pendekatan_pengembangan_berbasis_log"></a>Pendekatan Pengembangan Berbasis Log</h3> <div class="paragraph"> <p>LDD mengluas TDD dengan menempatkan log di tengah pengembangan :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Definisi log</strong>sebelum implementasi</p> </li> <li> <p><strong>Validasi dengan observasi</strong>perilaku yang diharapkan</p> </li> <li> <p><strong>Lacakabilitas lengkap</strong>aliran data</p> </li> <li> <p><strong>Debugging proaktif</strong>anticipasi kesalahan</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_konseptual"><a class="anchor" href="#_arsitektur_konseptual"></a>Arsitektur Konseptual</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml !theme aws-orange package "Inti Bot Discord" { [Command Handler] as CH [Event Listener] as EL [Log Manager] as LM } package "Lapisan Integrasi Musik" { [Spotify Client] as SC [YouTube Client] as YC [Audio Processor] as AP } package "Inti Fungsional" { [Data Validation] as DV [Business Logic] as BL [Error Handling] as EH } package "API eksternal" { [Spotify API] as SAPI [YouTube API] as YAPI [Discord API] as DAPI } CH --> BL EL --> BL BL --> DV BL --> EH BL --> LM SC --> SAPI YC --> YAPI CH --> DAPI DV ..> SC : validates DV ..> YC : validates AP --> SC AP --> YC LM --> EH : logs errors LM --> BL : logs operations @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_teknik_stack_dan_paradigma_fungsional"><a class="anchor" href="#_teknik_stack_dan_paradigma_fungsional"></a>Teknik Stack dan Paradigma Fungsional</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pilihan_teknologi"><a class="anchor" href="#_pilihan_teknologi"></a>Pilihan teknologi</h3> <div class="paragraph"> <p>Stack kami berpusat pada pemrograman fungsional:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>PyMonade</strong></dt> <dd> <p>Manajemen efek samping dan komposisi fungsi</p> </dd> <dt class="hdlist1"><strong>Pydantic</strong></dt> <dd> <p>Validasi data type-safe dan serialisasi</p> </dd> <dt class="hdlist1"><strong>Asyncio</strong></dt> <dd> <p>Pemrograman asinkron untuk APIs</p> </dd> <dt class="hdlist1"><strong>Structlog</strong></dt> <dd> <p>Logging terstruktur untuk LDD</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_prinsip_fungsional_yang_diterapkan"><a class="anchor" href="#_prinsip_fungsional_yang_diterapkan"></a>Prinsip fungsional yang diterapkan</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme plain title Aliran data fungsional participant "Perintah Discord" as DC participant "Pen-validasi" as V participant "Logika bisnis" as BL participant "Klien API" as AC participant "pencatat" as L DC -> V: Raw Input activate V V -> V: Pydantic Validation V -> L: Log Validation V --> DC: Maybe[ValidData] deactivate V DC -> BL: ValidData activate BL BL -> BL: Pure Computation BL -> L: Log Business Logic BL -> AC: API Request activate AC AC -> AC: IO Operation AC -> L: Log API Call AC --> BL: Maybe[Result] deactivate AC BL --> DC: Either[Error, Success] deactivate BL DC -> L: Log Final Result @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_metodologi_agile_dan_backlog"><a class="anchor" href="#_metodologi_agile_dan_backlog"></a>Metodologi Agile dan Backlog</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_epik_utama"><a class="anchor" href="#_epik_utama"></a>Epik Utama</h3> <div class="paragraph"> <p>Pengembangan kami terorganisasi di sekitar 4 epik utama :</p> </div> <div class="sect3"> <h4 id="_epic_1_bot_infrastruktur_discord"><a class="anchor" href="#_epic_1_bot_infrastruktur_discord"></a>Epic 1 : Bot Infrastruktur Discord</h4> <div class="paragraph"> <p><strong>Nilai bisnis</strong> : Dasar yang kuat dan dapat diperluas</p> </div> <div class="paragraph"> <p><strong>Kriteria penerimaan</strong> : - Koneksi Discord stabil dengan pengelolaan koneksi ulang - Sistem perintah modular - Logging terstruktur terintegrasi - Pengelolaan kesalahan terpusat</p> </div> </div> <div class="sect3"> <h4 id="_epic_2_integrasi_spotify"><a class="anchor" href="#_epic_2_integrasi_spotify"></a>Epic 2 : Integrasi Spotify</h4> <div class="paragraph"> <p><strong>Nilai Bisnis</strong> : Akses ke metadata musik</p> </div> <div class="paragraph"> <p><strong>kriteria penerimaan</strong> : - Otentikasi OAuth2 yang aman - Pencarian tracks dengan cache cerdas - Manajemen kuota API - Fallback pada kesalahan jaringan</p> </div> </div> <div class="sect3"> <h4 id="_epic_3_integrasi_youtube"><a class="anchor" href="#_epic_3_integrasi_youtube"></a>Epic 3 : Integrasi YouTube</h4> <div class="paragraph"> <p><strong>Nilai bisnis</strong> : Akses ke konten audio</p> </div> <div class="paragraph"> <p><strong>Kriteria penerimaan</strong> : - Penghindaran legal terhadap pembatasan - Ekstraksi audio yang dioptimalkan - Pengelolaan video pribadi/terhapus - Menghormati Ketentuan Layanan YouTube</p> </div> </div> <div class="sect3"> <h4 id="_epic_4_fitur_musik"><a class="anchor" href="#_epic_4_fitur_musik"></a>Epic 4 : fitur musik</h4> <div class="paragraph"> <p><strong>Nilai bisnis</strong> : Pengalaman pengguna lengkap</p> </div> <div class="paragraph"> <p><strong>Kriteria penerimaan</strong> : - Pemutaran audio berkualitas tinggi - Antrean pemutaran cerdas - Perintah suara Discord - Sinkronisasi lintas-platform</p> </div> </div> </div> <div class="sect2"> <h3 id="_user_stories_terperinci"><a class="anchor" href="#_user_stories_terperinci"></a>User Stories Terperinci</h3> <div class="sect3"> <h4 id="_us1_1_inisialisasi_bot"><a class="anchor" href="#_us1_1_inisialisasi_bot"></a>US1.1 : Inisialisasi Bot</h4> <div class="paragraph"> <p><strong>Sebagai</strong> seorang pengembang <strong>Saya inginkan</strong> sebuah bot Discord yang terhubung dengan andal <strong>Untuk</strong> menjamin ketersediaan layanan</p> </div> <div class="paragraph"> <p><strong>DoD (Definisi Selesai)</strong> : - [ ] Bot terhubung otomatis saat dimulai - [ ] Logs terstruktur mencatat setiap langkah - [ ] Penghubungan ulang otomatis saat terputus - [ ] Tes integrasi lulus</p> </div> </div> <div class="sect3"> <h4 id="_us2_1_pencarian_spotify_cerdas"><a class="anchor" href="#_us2_1_pencarian_spotify_cerdas"></a>US2.1 : Pencarian Spotify Cerdas</h4> <div class="paragraph"> <p><strong>As a Discord user *Saya ingin</strong> mencari lagu melalui Spotify <strong>Untuk</strong> menemukan dan berbagi musik</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Pesanan`/search`fungsional - [ ] Hasil yang relevan dengan metadata - [ ] Cache lokal untuk mengoptimalkan permintaan - [ ] Penanganan anggun kesalahan API</p> </div> </div> <div class="sect3"> <h4 id="_us3_1_ekstraksi_youtube_yang_resilién"><a class="anchor" href="#_us3_1_ekstraksi_youtube_yang_resilién"></a>US3.1 : Ekstraksi YouTube yang resilién</h4> <div class="paragraph"> <p><strong>Sebagai</strong> sistem <strong>Saya ingin</strong> mengekstrak audio YouTube secara andal Agar menjaga kelangsungan layanan</p> </div> <div class="paragraph"> <p><strong>DoD</strong> : - [ ] Ekstraksi tanpa pelanggaran ToS - [ ] Kualitas audio optimal - [ ] Pengelolaan pembatasan geografis - [ ] Log detail operasi</p> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pendekatan_pengembangan_berbasis_log_2"><a class="anchor" href="#_pendekatan_pengembangan_berbasis_log_2"></a>Pendekatan Pengembangan Berbasis Log</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_strategi_logging"><a class="anchor" href="#_strategi_logging"></a>Strategi Logging</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme spacelab title Alur Pengembangan Berbasis Log start :Define Expected Behavior; note right: Spécification des logs attendus :Write Log Assertions; note right: Tests basés sur les logs :Implement Minimal Code; note right: Code juste suffisant :Run & Observe Logs; note right: Validation comportementale if (Logs Match Expectations?) then (yes) :Refactor & Optimize; note right: Amélioration continue else (no) :Debug via Logs; note right: Analyse des écarts :Fix Implementation; endif :Integration Tests; note right: Validation end-to-end stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_struktur_log"><a class="anchor" href="#_struktur_log"></a>Struktur Log</h3> <div class="paragraph"> <p>Pendekatan LDD kami menggunakan log terstruktur dengan tingkat semantik:</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>jejak</strong></dt> <dd> <p>Aliran data terperinci</p> </dd> <dt class="hdlist1"><strong>DEBUG</strong></dt> <dd> <p>Keadaan internal fungsi</p> </dd> <dt class="hdlist1"><strong>informasi</strong></dt> <dd> <p>Operasi bisnis berhasil</p> </dd> <dt class="hdlist1"><strong>memperingatkan</strong></dt> <dd> <p>Situasi yang memburuk tetapi dikelola</p> </dd> <dt class="hdlist1"><strong>kesalahan</strong></dt> <dd> <p>Kesalahan yang memerlukan intervensi</p> </dd> <dt class="hdlist1"><strong>kritis</strong></dt> <dd> <p>kerusakan sistem</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_contoh_desain_log"><a class="anchor" href="#_contoh_desain_log"></a>Contoh desain log</h3> <div class="paragraph"> <p>Sebelum mengimplementasikan fungsi pencarian Spotify, kami mendefinisikan lognya:</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="_arsitektur_validasi_dengan_pydantic"><a class="anchor" href="#_arsitektur_validasi_dengan_pydantic"></a>Arsitektur Validasi dengan Pydantic</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_model_data"><a class="anchor" href="#_model_data"></a>Model Data</h3> <div class="paragraph"> <p>Pendekatan fungsional kami mengutamakan validasi dini :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme cerulean-outline class SpotifyTrack { +id: str +name: str +artists: List[str] +duration_ms: int +external_urls: Dict[str, str] -- +validate_duration() : bool +to_discord_embed() : Embed } class YouTubeVideo { +id: str +title: str +duration: timedelta +available: bool -- +validate_availability() : bool +extract_audio_url() : Optional[str] } class DiscordCommand { +command: str +args: List[str] +user: User +channel: Channel -- +validate_permissions() : bool +log_execution() : None } SpotifyTrack --|> BaseModel YouTubeVideo --|> BaseModel DiscordCommand --|> BaseModel @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_manajemen_kesalahan_fungsional"><a class="anchor" href="#_manajemen_kesalahan_fungsional"></a>manajemen kesalahan fungsional</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_monades_dan_error_handling"><a class="anchor" href="#_monades_dan_error_handling"></a>Monades dan Error Handling</h3> <div class="paragraph"> <p>Penggunaan PyMonade memungkinkan penanganan kesalahan yang elegan:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme toy title Alur Penanganan Kesalahan participant "Perintah" as C participant "Maybe Monad" as M participant "Atau Monad" as E participant "Logger" as L C -> M: search_query activate M alt Valid Query M -> E: Success(query) activate E E -> E: api_call() alt API Success E -> L: log_success() E --> C: Right(result) else API Error E -> L: log_api_error() E --> C: Left(api_error) end deactivate E else Invalid Query M -> L: log_validation_error() M --> C: Nothing end deactivate M @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_strategi_penghindaran_pembatasan"><a class="anchor" href="#_strategi_penghindaran_pembatasan"></a>Strategi Penghindaran Pembatasan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pendekatan_multi_sumber"><a class="anchor" href="#_pendekatan_multi_sumber"></a>Pendekatan multi-sumber</h3> <div class="paragraph"> <p>Terhadap batasan API, kami mengadopsi strategi diversifikasi:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !theme mars title Strategi multi-sumber start :User Request; :Primary Source\n(Spotify); if (Available?) then (yes) :Return Spotify Data; stop else (no) :Log Fallback; :Secondary Source\n(YouTube Music); if (Available?) then (yes) :Return YouTube Data; stop else (no) :Tertiary Source\n(Local Cache); if (Available?) then (yes) :Return Cached Data; :Log Cache Hit; stop else (no) :Return Error; :Log Complete Failure; stop end end end @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_rencana_pengembangan_iteratif"><a class="anchor" href="#_rencana_pengembangan_iteratif"></a>Rencana Pengembangan Iteratif</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_perencanaan_sprint"><a class="anchor" href="#_perencanaan_sprint"></a>Perencanaan Sprint</h3> <div class="paragraph"> <p>Pengembangan kami mengikuti siklus sprint 2 minggu :</p> </div> <div class="dlist"> <dl> <dt class="hdlist1"><strong>Sprint 1-2</strong></dt> <dd> <p>Infrastruktur dan Bot Discord Inti</p> </dd> <dt class="hdlist1"><strong>Sprint 3-4</strong></dt> <dd> <p>Integrasi Spotify dengan LDD</p> </dd> <dt class="hdlist1"><strong>Sprint 5-6</strong></dt> <dd> <p>Integrasi YouTube dan cara mengelakinya</p> </dd> <dt class="hdlist1"><strong>Sprint 7-8</strong></dt> <dd> <p>Features musik tingkat lanjut</p> </dd> <dt class="hdlist1"><strong>Sprint 9-10</strong></dt> <dd> <p>Optimisasi dan produksi</p> </dd> </dl> </div> </div> <div class="sect2"> <h3 id="_metrik_kualitas"><a class="anchor" href="#_metrik_kualitas"></a>Metrik Kualitas</h3> <div class="paragraph"> <p>Setiap sprint dievaluasi pada:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Cakupan log</strong>: >90% jalur kritis</p> </li> <li> <p><strong>Keandalan API</strong>: <1% kesalahan yang tidak ditangani</p> </li> <li> <p><strong>kinerja</strong>: <500ms waktu respons rata-rata</p> </li> <li> <p><strong>kemudahan pemeliharaan</strong>: Kompleksitas siklik <10</p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_penyebaran_dan_pemantauan"><a class="anchor" href="#_penyebaran_dan_pemantauan"></a>Penyebaran dan Pemantauan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_arsitektur_produksi"><a class="anchor" href="#_arsitektur_produksi"></a>Arsitektur Produksi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !theme vibrant cloud "Server Discord" { [User Commands] } node "Lingkungan Produksi" { [Discord Bot] [Log Aggregator] [Metrics Collector] [Health Monitor] } database "Penyimpanan Log" { [Structured Logs] [Error Traces] [Performance Metrics] } cloud "API Eksternal" { [Spotify API] [YouTube API] } [User Commands] --> [Discord Bot] [Discord Bot] --> [Log Aggregator] [Discord Bot] --> [Spotify API] [Discord Bot] --> [YouTube API] [Log Aggregator] --> [Structured Logs] [Metrics Collector] --> [Performance Metrics] [Health Monitor] --> [Error Traces] @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_pemantauan_proaktif"><a class="anchor" href="#_pemantauan_proaktif"></a>Pemantauan Proaktif</h3> <div class="paragraph"> <p>LDD memudahkan monitoring yang cerdas:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Peringatan berbasis pola log</strong></p> </li> <li> <p><strong>Deteksi anomali perilaku</strong></p> </li> <li> <p><strong>Metrik bisnis secara real-time</strong></p> </li> <li> <p><strong>Debugging yang didukung oleh korelasi log</strong></p> </li> </ul> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_dan_perspektif"><a class="anchor" href="#_kesimpulan_dan_perspektif"></a>Kesimpulan dan Perspektif</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pendekatan metodologis ini menggabungkan manfaat paradigma fungsional dengan ketangguhan Log Driven Development. Hal ini memungkinkan kami untuk :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Mengantisipasi masalah</strong>Berkat log yang dirancang sebelumnya</p> </li> <li> <p><strong>Menjaga kualitas</strong>melalui validasi terus-menerus</p> </li> <li> <p><strong>Beradaptasi dengan cepat</strong>ke perubahan API</p> </li> <li> <p><strong>Memastikan kejelasan jejak</strong>operasi lengkap</p> </li> </ol> </div> <div class="paragraph"> <p>Pengembangan iteratif dan arsitektur moduler menjamin skalabilitas menghadapi kendala yang berubah-ubah dari platform musik.</p> </div> <div class="sect2"> <h3 id="_langkah_selanjutnya"><a class="anchor" href="#_langkah_selanjutnya"></a>Langkah Selanjutnya</h3> <div class="ulist"> <ul> <li> <p><strong>Fase 1</strong>Implementasi core dengan PyMonade</p> </li> <li> <p><strong>Tahap 2</strong>Integrasi Spotify dengan cache cerdas</p> </li> <li> <p><strong>Fase 3</strong>: Solusi YouTube yang tahan</p> </li> <li> <p><strong>Tahap 4</strong>: Fitur canggih dan optimisasi</p> </li> </ul> </div> <div class="paragraph"> <p>Fondasi konseptual yang kuat ini akan memungkinkan kita menavigasi tantangan teknis sekaligus memberikan pengalaman pengguna yang luar biasa.</p> </div> <hr> <div class="paragraph"> <p><strong>Article ini akan diikuti oleh sebuah seri teknis yang mendetailkan implementasi setiap komponen dengan contoh kode dan pola fungsional.</strong></p> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0083_cold_computer_post.html Tue, 15 Jul 2025 00:00:00 +0000 blog/2025/0083_cold_computer_post.html <div id="toc" class="toc"> <div id="toctitle">Table of Contents</div> <ul class="sectlevel1"> <li><a href="#_tujuan_dari_panduan_ini">Tujuan dari panduan ini</a></li> <li><a href="#_prasyarat">Prasyarat</a></li> <li><a href="#_menginstal_dan_mengkonfigurasi_alat">Menginstal dan mengkonfigurasi alat</a> <ul class="sectlevel2"> <li><a href="#_lm_sensors_untuk_mendeteksi_sensor">lm-sensors` untuk mendeteksi sensor</a></li> <li><a href="#_tlp_pengelola_energi_cerdas">tlp` : pengelola energi cerdas</a></li> <li><a href="#_cpufrequtils_membatasi_frekuensi_cpu">cpufrequtils` : membatasi frekuensi CPU</a></li> <li><a href="#_auto_cpufreq_pengelolaan_dinamis_yang_disederhanakan">auto-cpufreq` : pengelolaan dinamis yang disederhanakan</a></li> <li><a href="#_thermald_perlindungan_termal_otomatis">thermald` : perlindungan termal otomatis</a></li> </ul> </li> <li><a href="#_pemantauan_waktu_nyata">pemantauan waktu nyata</a> <ul class="sectlevel2"> <li><a href="#_sensors_baris_perintah">sensors` baris perintah</a></li> <li><a href="#_opsi_gui_psensor">Opsi GUI : `psensor</a></li> </ul> </li> <li><a href="#_tips_tambahan">Tips tambahan</a></li> <li><a href="#_membersihkan_sistem_untuk_membatasi_beban_berlebih">Membersihkan sistem untuk membatasi beban berlebih</a></li> <li><a href="#_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</a></li> <li><a href="#_kesimpulan">📚 Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Apakah Anda merasa bahwa laptop Anda terlalu panas saat berjalan di Ubuntu? Artikel ini menawarkan pendekatan<strong>perangkat lunak</strong>lengkap untuk<strong>mendinginkan</strong>, <strong>memantau</strong> et <strong>mengendalikan suhu</strong>de mesin Anda.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tujuan_dari_panduan_ini">Tujuan dari panduan ini</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Mengurangi suhu keseluruhan komputer</p> </li> <li> <p>Mengoptimalkan pengelolaan energi</p> </li> <li> <p>Memantau komponen kritis (CPU, GPU, dst).</p> </li> <li> <p>Menghindari penurunan kecepatan karena<strong>pembatasan termal</strong></p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre>@startuml start :Installer les outils; :Analyser les capteurs; :Appliquer des réglages; note right: cpufreq, tlp, auto-cpufreq :Surveiller en temps réel; stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_prasyarat">Prasyarat</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Sebuah mesin Ubuntu (20.04 atau lebih tinggi disarankan)</p> </li> <li> <p>koneksi internet</p> </li> <li> <p>Kemampuan baris perintah (tingkat pemula hingga menengah)</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_menginstal_dan_mengkonfigurasi_alat">Menginstal dan mengkonfigurasi alat</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_lm_sensors_untuk_mendeteksi_sensor">lm-sensors` untuk mendeteksi sensor</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>Jawab`YES`ke semua pertanyaan tentang`sensors-detect`untuk mendeteksi modul.</p> </div> </td> </tr> </table> </div> </div> <div class="sect2"> <h3 id="_tlp_pengelola_energi_cerdas">tlp` : pengelola energi cerdas</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="listingblock"> <div class="content"> <pre>@startuml (*) --> "TLP aktif?" if "Ya" then --> [yes] "Pengurangan konsumsi" --> "Batas frekuensi CPU" else --> [no] "Memulai TLP" --> "Aktivasi otomatis" endif -->(*) @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_cpufrequtils_membatasi_frekuensi_cpu">cpufrequtils` : membatasi frekuensi CPU</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install cpufrequtils cpufreq-info sudo cpufreq-set -g powersave</code></pre> </div> </div> <div class="ulist"> <ul> <li> <p><code>powersave</code>: membatasi puncak frekuensi</p> </li> <li> <p><code>performance</code>: memprioritaskan kekuatan dengan mengorbankan suhu</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_auto_cpufreq_pengelolaan_dinamis_yang_disederhanakan">auto-cpufreq` : pengelolaan dinamis yang disederhanakan</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="listingblock"> <div class="content"> <pre>@startuml start :Analyse charge système; :Réglage fréquence CPU; :Vérification température; :Adaptation dynamique; stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_thermald_perlindungan_termal_otomatis">thermald` : perlindungan termal otomatis</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="_pemantauan_waktu_nyata">pemantauan waktu nyata</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_sensors_baris_perintah">sensors` baris perintah</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="_opsi_gui_psensor">Opsi GUI : `psensor</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo apt install psensor</code></pre> </div> </div> <div class="paragraph"> <p>Antarmuka grafis sederhana untuk CPU, GPU, kipas.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_tips_tambahan">Tips tambahan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Menutup tab dan aplikasi berat (contoh: peramban)</p> </li> <li> <p>Hindari penggunaan intens pada baterai</p> </li> <li> <p>Memantau proses melalui`htop`:</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="_membersihkan_sistem_untuk_membatasi_beban_berlebih">Membersihkan sistem untuk membatasi beban berlebih</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="_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</h2> <div class="sectionbody"> <div class="paragraph"> <p>Anda bisa membuat layanan`systemd`disesuaikan untuk menerapkan secara otomatis beberapa pengaturan saat startup Apakah Anda ingin sebuah contoh dalam artikel berikutnya? Beritahu saya!</p> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">📚 Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Menggabungkan alat-alat sederhana ini, Anda akan mendapatkan:</p> </div> <div class="ulist"> <ul> <li> <p>Suhu CPU yang terkontrol</p> </li> <li> <p>Kurang suara ventilasi</p> </li> <li> <p>Otonomi yang lebih baik</p> </li> </ul> </div> <div class="paragraph"> <p>Jangan lupa untuk memantau suhu Anda secara rutin untuk mencegah overheating.</p> </div> <div class="paragraph"> <p><em><em>_ Lebih baik mencegah daripada melelehkan CPU-nya. </em>_</em></p> </div> </div> </div> https://cheroliv.com/blog/2025/0082_ui_struggle_post.html Mon, 14 Jul 2025 00:00:00 +0000 blog/2025/0082_ui_struggle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_medan_pertarungan_sebuah_mockup_tiga_peramban_rendering_berganda">Medan pertarungan: sebuah mockup, tiga peramban, rendering berganda</a></li> <li><a href="#_masalah_1_kartu_melayang_dari_bagian_hero">Masalah 1 : Kartu melayang dari bagian "Hero</a></li> <li><a href="#_masalah_2_bar_navigasi_kannibal">Masalah 2: Bar navigasi kannibal</a></li> <li><a href="#_masalah_3_tipografi_anarkis">Masalah 3 : Tipografi anarkis</a></li> <li><a href="#_masalah_4_bar_navigasi_yang_meluap">Masalah 4 : Bar navigasi yang meluap</a></li> <li><a href="#_masalah_5_menu_hamburger_tidak_terlihat">Masalah 5: Menu hamburger tidak terlihat</a></li> <li><a href="#_kesimpulan_pelajaran_dari_debugging_yang_giat">Kesimpulan: pelajaran dari debugging yang giat</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>Waktu baca :</strong> sekitar 7 menit <strong>Tingkat :</strong> Menengah</p> </div> </td> </tr> </table> </div> <div class="paragraph"> <p>Dalam studi kasus praktis terperinci ini, kita akan membahas masalah kompatibilitas browser paling umum dan terkadang paling frustrasi yang dihadapi saat membuat mockup UI dengan Bootstrap 5.2. Dari pengelolaan Flexbox hingga halusnya rendering font, temukan perjalanan debugging kami untuk mengubah desain yang tidak stabil di Firefox menjadi pengalaman pixel-perfect di semua browser.</p> </div> <hr> </div> </div> <div class="sect1"> <h2 id="_medan_pertarungan_sebuah_mockup_tiga_peramban_rendering_berganda">Medan pertarungan: sebuah mockup, tiga peramban, rendering berganda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Setiap pengembang front-end mengerti perasaan itu. Setelah berjam-jam bekerja, desain akhirnya sempurna. Penyelarasan rapi, tipografi elegan, animasi lancar. Kita menghela napas puas, kagumi karya kita di Chrome (atau Brave, atau Edge), lalu, sebagai langkah berhati-hati, kita membuka proyek di Firefox. Dan tiba-tiba, ini menjadi drama. Elemen yang meluap, penyelarasan yang rusak, font dengan ukuran acak-acakan…​ harmoni indah itu telah hilang.</p> </div> <div class="paragraph"> <p>Ini tepat skenario yang kami hadapi saat mengembangkan antarmuka portofolio baru. Spesifikasi adalah sederhana: halaman beranda modern, responsif, dengan pemilih tema (terang, gelap, dan kontras tinggi), menggunakan <strong>vanilla JavaScript</strong> dan versi terbaru <strong>Bootstrap 5.2</strong>.</p> </div> <div class="paragraph"> <p>Artikel ini bukan daftar solusi ajaib. Ini adalah jurnal dari sesi debugging kita, suatu penyelaman ke "mengapa" perbedaan rendering antara mesin Blink (Chromium, Brave) dan Gecko (Firefox), serta demonstrasi bahwa solusi yang kuat dan modern selalu lebih baik daripada perbaikan sementara yang dibuat terburu-buru.</p> </div> <div class="listingblock"> <div class="title">Diagram Kasus Penggunaan: Proses debugging</div> <div class="content"> <pre>@startuml left to right direction actor "Pengembang Front-End" as Dev rectangle "Mockup UI Bootstrap 5" { usecase "Memperbaiki perataan Flexbox" as UC1 usecase "Menyesuaikan padding secara dinamis (JS)" as UC2 usecase "Mengontrol tipografi (clamp())" as UC3 usecase "Menyelesaikan overflow menu" as UC4 usecase "Membuat ikon menu terlihat" as UC5 } actor "Peramban Firefox" as Firefox Dev -- (UC1) Dev -- (UC2) Dev -- (UC3) Dev -- (UC4) Dev -- (UC5) (UC1) ..> Firefox : <<extend>> (UC2) ..> Firefox : <<extend>> (UC3) ..> Firefox : <<extend>> (UC4) ..> Firefox : <<extend>> (UC5) ..> Firefox : <<extend>> note right of Firefox : Révèle les problèmes de compatibilité @enduml</pre> </div> </div> <div class="listingblock"> <div class="title">Diagram Komponen: Arsitektur Solusi Front-End</div> <div class="content"> <pre>@startuml !theme plain package "Solusi Front-End" { component "HTML (Cetak FTL)" as HTML component "script.js" as JS component "styles.css" as CSS interface "Manipulasi DOM" as iDOM interface "Perbaikan CSS" as iCSS } package "Kerangka Kerja" { component "Bootstrap 5.2" as BS interface "Variabel CSS" as iVars interface "Kelas Utilitas" as iUtils } HTML ..> iDOM : nécessite JS ..> iDOM : réalise HTML ..> iCSS : nécessite CSS ..> iCSS : réalise CSS ..> iVars : nécessite BS ..> iVars : fournit HTML ..> iUtils : utilise BS ..> iUtils : fournit note right of JS - Mesure la hauteur de la navbar - Applique le padding dynamiquement end note note right of CSS - Utilise clamp() pour la typographie - Réduit les marges du menu - Surcharge l'icône du menu via les variables end note @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_1_kartu_melayang_dari_bagian_hero">Masalah 1 : Kartu melayang dari bagian "Hero</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bug pertama juga adalah yang paling terlihat. Bagian selamat datang ("hero") terdiri dari dua kolom: di kiri, judul utama; di kanan, kartu perkenalan.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Gejala :</strong>Di Chrome dan Brave, kedua kolom tersebut berada di tengah secara vertikal sempurna. Di Firefox, kartu di sisi kanan jatuh tanpa alasan yang jelas di bawah teks di sisi kiri.</p> </li> <li> <p><strong>Investigasi :</strong>Kode HTML sebenarnya terlihat sederhana dan benar, menggunakan kelas standar Bootstrap.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><section id="home" class="hero-section"> <div class="container"> <!-- Cette ligne est la clé du problème --> <div class="row align-items-center min-vh-100"> <div class="col-lg-6"> <!-- Contenu de gauche --> </div> <div class="col-lg-6"> <!-- Carte de droite --> </div> </div> </div> </section></code></pre> </div> </div> <div class="paragraph"> <p>CSS kustom kami untuk`.hero-section`menentukan`display: flex` et <code>align-items: center</code>, dan kelas`min-vh-100`memberikan dengan baik tinggi minimum pada baris (<code>div.row</code>). Lalu, mengapa Firefox menolak untuk menengahkan kolom?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Penyebab mendalam :</strong>Ini adalah contoh kasus tentang cara mesin rendering menginterpretasikan tinggi implisit. Yang`<section>`memiliki sebuah`min-height`, tapi tidak ada`height`eksplisit. Untuk menerapkan`align-items-center`di dalam`div.row`, Firefox perlu mengetahui tinggi referensi dari kontainer ini. Seperti orang tuanya (<code>div.container</code> et la `<section>`dia sendiri) tidak memiliki tinggi<strong>ketat</strong>, Firefox tidak tahu lagi. Mesin Blink yang lebih permissive, mampu menebak niat dan memusatkan elemen. Gecko, lebih setia terhadap spesifikasi, tidak melakukannya.</p> </li> <li> <p><strong>Solusi :</strong>Buat tinggi eksplisit. Kami telah memaksakan`.container` et le `.row`mengisi 100% tinggi dari induk masing-masing dengan menggunakan kelas utilitas`h-100`dari Bootstrap.</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><section id="home" class="hero-section"> <div class="container h-100"> <div class="row align-items-center min-vh-100 h-100"> <!-- ... --> </div> </div> </section></code></pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p>Saat seorang`align-items`Flexbox tidak berfungsi seperti yang diharapkan pada sumbu vertikal, pastikan selalu bahwa kontainer memiliki tinggi (<code>height</code> ou <code>min-height</code>) ditentukan dan, jika masalah berlanjut (terutama di Firefox), pastikan bahwa kontainer induk menengah mempropagasi ketinggian ini dengan baik.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_2_bar_navigasi_kannibal">Masalah 2: Bar navigasi kannibal</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Setelah bagian Hero diselaraskan, masalah lain muncul: bilah navigasi, dengan kelasnya`fixed-top`, menumpuk di atas judul. Un`padding-top: 80px`Ia telah diterapkan pada bagian 'Hero' sebagai solusi.</div> <ul> <li> <p><strong>Gejala:</strong> Le `padding`was cukup di Chrome, tapi tidak di Firefox, di mana judulnya selalu sebagian disembunyikan.</p> </li> <li> <p><strong>Sebab mendalam :</strong>Penggunaan sebuah "angka ajaib" (")<code>80px</code>) adalah praktik yang sangat buruk. Tinggi elemen seperti navigasi dapat bervariasi beberapa piksel dari satu browser ke browser lain karena perbedaan halus dalam rendering font, spasi, atau bahkan pilihan pengguna. Mengandalkan nilai tetap adalah resep untuk desain yang rapuh.</p> </li> <li> <p><strong>Solusi :</strong>Solusi dinamis dan andal dalam JavaScript. Kami telah menulis skrip kecil untuk :</p> </li> <li> <p>Ukuran tinggi <strong>sebenarnya</strong> dari bilah navigasi setelah halaman dirender.</p> </li> <li> <p>Terapkan tinggi yang diukur ini seperti`padding-top`ke bagian "Hero".</p> </li> <li> <p>Jalankan kembali fungsi ini setiap kali jendela diubah ukurannya untuk menyesuaikan perubahan (seperti beralih ke menu hamburger).</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">document.addEventListener('DOMContentLoaded', function() { function adjustHeroPadding() { const navbar = document.querySelector('.navbar.fixed-top'); const heroSection = document.querySelector('.hero-section'); if (navbar && heroSection) { const navbarHeight = navbar.offsetHeight; heroSection.style.paddingTop = navbarHeight + 'px'; } } // Ajuster au chargement et au redimensionnement adjustHeroPadding(); window.addEventListener('resize', adjustHeroPadding); });</code></pre> </div> </div> <div class="listingblock"> <div class="title">Diagram Urutan : Penyesuaian dinamis padding</div> <div class="content"> <pre>@startuml title Solusi untuk masalah navigasi kannibal actor Utilisateur participant "Browser" as Browser participant "script.js" as JS participant "DOM" as DOM Utilisateur -> Browser: Charge la page activate Browser Browser -> JS: Déclenche l'événement 'DOMContentLoaded' activate JS JS -> DOM: querySelector('.navbar.fixed-top') activate DOM DOM --> JS: Retourne l'élément Navbar deactivate DOM JS -> DOM: querySelector('.hero-section') activate DOM DOM --> JS: Retourne l'élément Hero deactivate DOM JS -> DOM: navbar.offsetHeight activate DOM DOM --> JS: Retourne la hauteur calculée (ex: 83px) deactivate DOM JS -> DOM: heroSection.style.paddingTop = "83px" activate DOM deactivate DOM deactivate JS deactivate Browser ... Plus tard ... Utilisateur -> Browser: Redimensionne la fenêtre activate Browser Browser -> JS: Déclenche l'événement 'resize' activate JS JS -> JS: Exécute à nouveau adjustHeroPadding() note right of JS: Le processus de mesure et\nd'application du padding se répète. deactivate JS deactivate Browser @enduml</pre> </div> </div> <div class="paragraph"> <p>Secara paralel, kita tentu saja telah menghapus aturan`padding-top: 80px;`dari file kami`styles.css`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_3_tipografi_anarkis">Masalah 3 : Tipografi anarkis</h2> <div class="sectionbody"> <div class="paragraph"> <p>Masalah berikutnya adalah yang paling merusak pada citra merek: ukuran judul utama.</p> </div> <div class="ulist"> <ul> <li> <p><strong>Gejala:</strong>Di Firefox, font judul "Développeur Formateur…​" sangat besar, hampir mengejutkan, sedangkan di browser lain ia harmonis.</p> </li> <li> <p><strong>Penyebab mendalam :</strong>Judul menggunakan kelas`display-4`dari Bootstrap. Kelas-kelas ini menggunakan ukuran font responsif, sering kali berdasarkan satuan`rem`dan media queries. Sekali lagi, algoritma rendering Firefox, dikombinasikan dengan font 'Inter', menghasilkan perhitungan ukuran yang jauh lebih besar pada resolusi 1920x1080 kami.</p> </li> <li> <p><strong>Solusi :</strong>Mengambil kembali kontrol dengan fungsi CSS`clamp()<code>. Fungsi ini merupakan revolusi untuk tipografi fluida. Dia memungkinkan untuk mendefinisikan ukuran font dengan tiga nilai: ukuran minimum, ukuran 'yang diinginkan' (yang menyesuaikan dengan lebar tampilan,`vw</code>), dan ukuran maksimal</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>dengan`clamp()<code>, kami mampu berkata kepada peramban : \"Buat font tumbuh bersama layar, tetapi jangan melebihi*<strong>tidak pernah</strong>*batas dari`2.5rem</code>. Ini segera menyamakan tampilan di semua browser, memberi kita kendali penuh atas estetika akhir.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_4_bar_navigasi_yang_meluap">Masalah 4 : Bar navigasi yang meluap</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Ini adalah masalah yang telah memberi kita banyak kesulitan dan akhirnya mengungkapkan sifat mendalam dari perbedaan render mikro.</div> <ul> <li> <p><strong>Gejala :</strong>Di layar 1920x1080, tautan terakhir pada menu ("Blog", "Contact") tergeser keluar dari layar ke kanan, tetapi hanya pada Firefox.</p> </li> <li> <p><strong>Penyebab yang mendalam:</strong>Setelah beberapa percobaan yang tidak berhasil (mengubah titik putus Bootstrap de`lg` à <code>xl`lalu`xxl</code>), Kami telah memahami. Penyebabnya bukan logika Bootstrap, melainkan perhitungan lebar sederhana. Di Firefox, jumlah lebar semua tautan, termasuk mereka`padding` et `margin`hingga sub-pixel, adalah <strong>sedikit</strong> lebih besar dari 1920 piksel. Di Chrome, jumlah ini juga <strong>sedikit</strong> kurang. Kita kurang beberapa piksel.</p> </li> <li> <p><strong>Solusi:</strong>Pengurangan bedah spasi. Karena tidak bisa menargetkan Firefox secara spesifik dengan 'hacks' CSS usang, satu-satunya solusi yang bersih adalah menemukan gaya umum yang bekerja di mana-mana. Kami kemudian sedikit mengurangi margin dan padding horizontal setiap tautan navigasi.</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>Pengurangan ini, hampir tidak terlihat oleh mata telanjang pada satu elemen, telah memberi kita secara kolektif ruang yang diperlukan agar semua tautan muat di dalam kerangka pada Firefox, sekaligus mempertahankan tampilan hampir identik pada peramban lain.</p> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_5_menu_hamburger_tidak_terlihat">Masalah 5: Menu hamburger tidak terlihat</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">Masalah terakhir, dan bukan yang terkecil, tentang aksesibilitas seluler.</div> <ul> <li> <p><strong>Gejala :</strong>Dalam mode responsif (menu "hamburger"), ikon menu tidak terlihat pada tema "dark" dan "high-contrast".</p> </li> <li> <p><strong>Penyebab mendalam:</strong>Ikon menu Bootstrap 5 adalah`background-image`(a URL-encoded SVG). By default, the stroke color is dark, optimized for a light background. It does not automatically adapt to theme changes.</p> </li> <li> <p><strong>Solusi :</strong>Menggunakan variabel CSS Bootstrap untuk menimpa ikon. Kami telah menentukan ikon SVG baru, tetapi kali ini dengan garis putih (<code>#ffffff</code>), dan kami menerapkannya secara khusus ketika temanya`dark` ou `high-contrast`mereka aktif.</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>Penyesuaian komponen Bootstrap seperti ini semakin dilakukan melalui penggantian variabel CSS (<code>--bs-component-property</code>), yang merupakan metode paling bersih dan tahan lama.</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan_pelajaran_dari_debugging_yang_giat">Kesimpulan: pelajaran dari debugging yang giat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Perjalanan ini, meski kadang frustrante, kaya akan pelajaran. Setiap masalah yang diselesaikan memperkuat satu kebenaran fundamental dari pengembangan web :<strong>Tidak ada yang menggantikan pengujian lintas-browser yang ketat.</strong>.</p> </div> <div class="listingblock"> <div class="title">Mindmap : Ringkasan debugging dan pelajaran yang telah diperoleh</div> <div class="content"> <pre>@startmindmap + Débogage Cross-Browser : Bootstrap 5 ++ **Conflit :** Chrome (Blink) vs Firefox (Gecko) ++ **Problème 1 : Alignement Hero** +++ Cause : Hauteur implicite +++ Solution : Classe `.h-100` ++ **Problème 2 : Navbar Cannibale** +++ Cause : "Nomor Ajaib" (padding fixe) +++ Solution : JS `offsetHeight` ++ **Problème 3 : Typographie Géante** +++ Cause : Rendu des `rem` +++ Solution : CSS `clamp()` ++ **Problème 4 : Menu qui déborde** +++ Cause : Calcul de largeur sub-pixel +++ Solution : Réduction des marges/paddings ++ **Problème 5 : Icône Invisible** +++ Cause : SVG non adaptable au thème +++ Solution : Surcharge de variable CSS ++ **Leçons Clés** +++ Firefox force un code robuste +++ Fuir les "angka ajaib" +++ Maîtriser la typographie fluide +++ Personnaliser via les variables CSS @endmindmap</pre> </div> </div> <div class="olist arabic"> <div class="title">Berikut pelajaran yang kita pelajari :</div> <ol class="arabic"> <li> <p><strong>Firefox adalah sekutu :</strong>Ketaatan lebih tinggi terhadap standar CSS memaksa kita menulis kode yang lebih kuat dan kurang ambigu.</p> </li> <li> <p><strong>Hindari "angka ajaib" :</strong>Nilai tetap (seperti`padding-top: 80px`) adalah bom waktu. Selalu pilih solusi dinamis (JavaScript) atau relatif (Flexbox, Grid).</p> </li> <li> <p><strong>Kuasai tipografi Anda :</strong>Gunakan`clamp()`untuk kontrol penuh atas ukuran font responsif.</p> </li> <li> <p><strong>Berpikir dalam « komponen » :</strong>Untuk menyesuaikan Bootstrap, menimpa variabel CSS-nya alih-alih membanyakkan aturan yang menimpa framework.</p> </li> <li> <p><strong>Jangan menargetkan satu peramban :</strong>Solusinya hampir tidak pernah adalah membuat 'hack' untuk browser tertentu, tetapi menemukan gaya umum yang berfungsi di mana-mana.</p> </li> </ol> </div> <div class="paragraph"> <p>Pada akhirnya, desain prototipe sekarang kuat, dapat diprediksi, dan siap untuk diintegrasikan ke dalam sistem templating. Setiap bug yang diperbaiki bukanlah kegagalan, tetapi sebuah langkah menuju kode yang lebih baik.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0081_TDD_Gradle_Properties_Fix_post.html Sun, 13 Jul 2025 00:00:00 +0000 blog/2025/0081_TDD_Gradle_Properties_Fix_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_masalah_mengisolasi_uji_unit_dari_plugin_gradle">Masalah: Mengisolasi Uji Unit dari Plugin Gradle</a> <ul class="sectlevel2"> <li><a href="#_arsitektur_masalah">Arsitektur Masalah</a></li> <li><a href="#_godaan_dari_gagasan_baik_yang_salah">Godaan dari Gagasan Baik yang Salah</a></li> </ul> </li> <li><a href="#_solusi_mensimulasikan_properti_dengan_extrapropertiesextension">Solusi: Mensimulasikan properti dengan `ExtraPropertiesExtension</a> <ul class="sectlevel2"> <li><a href="#_langkah_1_memahami_extrapropertiesextension">Langkah 1 : Memahami ExtraPropertiesExtension</a></li> <li><a href="#_langkah_2_penyiapan_tes_persiapan">Langkah 2: Penyiapan Tes - Persiapan</a></li> <li><a href="#_langkah_3_injeksi_properti">Langkah 3: Injeksi Properti</a></li> <li><a href="#_langkah_4_diagram_alur_solusi">Langkah 4 : Diagram Alur Solusi</a></li> <li><a href="#_langkah_5_perbandingan_sebelumsesudah">Langkah 5 : Perbandingan Sebelum/Sesudah</a></li> <li><a href="#_langkah_6_pengelolaan_kasus_pengujian_ganda">Langkah 6 : Pengelolaan Kasus Pengujian Ganda</a></li> <li><a href="#_arsitektur_akhir_solusi">Arsitektur Akhir Solusi</a></li> </ul> </li> <li><a href="#_manfaat_pendekatan_ini">Manfaat Pendekatan Ini</a></li> <li><a href="#_praktik_terbaik_dan_saran">Praktik terbaik dan saran</a> <ul class="sectlevel2"> <li><a href="#_buat_metode_utilitas">Buat Metode Utilitas</a></li> <li><a href="#_validasi_properti">Validasi properti</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div class="sect1"> <h2 id="_masalah_mengisolasi_uji_unit_dari_plugin_gradle">Masalah: Mengisolasi Uji Unit dari Plugin Gradle</h2> <div class="sectionbody"> <div class="paragraph"> <p>Saat menulis tes unit untuk plugin Gradle, tantangan umum adalah mengelola dependensi terhadap konfigurasi proyek, seperti properti yang ditentukan dalam file`gradle.properties`. Dalam kasus kita, plugin`jbake.ghpages`harus membaca sebuah properti`site_config_path`untuk berfungsi dengan baik. Uji unit untuk tugas`initialize`harus memeriksa perilaku plugin saat properti ini ada.</p> </div> <div class="paragraph"> <p>Masalah fundamentalnya adalah bahwa tes unit, menurut desainnya, harus <strong>terisolasi</strong>. Penggunaan`ProjectBuilder`Gradle membuat sebuah instance dari`Project`dalam memori, sepenuhnya terputus dari proyek sebenarnya pada sistem file. Oleh karena itu, instance tes ini tidak membaca file secara otomatis.<code>gradle.properties`dan karena itu tidak mengetahui properti`site_config_path</code>.</p> </div> <div class="sect2"> <h3 id="_arsitektur_masalah">Arsitektur Masalah</h3> <div class="paragraph"> <p>Diagram berikut menggambarkan pemisahan antara lingkungan uji dan sistem file:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class package "Lingkungan Produksi" { RECTANGLE ProjectReal { + build.gradle.kts + gradle.properties + src/ } RECTANGLE GradleProperties { site_config_path=src/jbake/settings/site.yml } RECTANGLE JbakePlugin { - readProperty(name: String) + initialize() } ProjectReal --> GradleProperties : lit au démarrage JbakePlugin --> GradleProperties : accède via project.properties } package "Lingkungan Test" { RECTANGLE ProjectTest { + Créé par ProjectBuilder + En mémoire uniquement + Pas de gradle.properties } RECTANGLE JbakePluginTest { + testInitialize() } ProjectTest -[#red]x GradleProperties : ❌ Pas d'accès JbakePluginTest --> ProjectTest : utilise } note right of ProjectTest : Isolation = Pas d'accès\nau système de fichiers @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_godaan_dari_gagasan_baik_yang_salah">Godaan dari Gagasan Baik yang Salah</h3> <div class="paragraph"> <p>Salah satu pendekatan pertama mungkin adalah membuat file`gradle.properties`palsu dalam sumber daya ujian.</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>Namun, metode ini ditakdirkan untuk gagal karena`ProjectBuilder`tidak dirancang untuk memindai sistem file dalam mencari file konfigurasi. Ujian akan tetap terisolasi dan mengabaikan file ini.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_mensimulasikan_properti_dengan_extrapropertiesextension">Solusi: Mensimulasikan properti dengan `ExtraPropertiesExtension</h2> <div class="sectionbody"> <div class="paragraph"> <p>Solusi yang anggun untuk masalah ini bukanlah <strong>membaca</strong> file, tetapi <strong>mensimulasikan</strong> kehadiran properti langsung dalam objek`Project`uji. Gradle menyediakan mekanisme yang kuat untuk ini: <strong>properti tambahan</strong> (Extra Properties).</p> </div> <div class="sect2"> <h3 id="_langkah_1_memahami_extrapropertiesextension">Langkah 1 : Memahami ExtraPropertiesExtension</h3> <div class="paragraph"> <p>`ExtraPropertiesExtension`adalah sebuah kontainer kunci-nilai yang terlampir pada setiap objek model Gradle. Ia memungkinkan penambahan properti secara dinamis ke sebuah proyek, sebuah tugas, atau ekstensi Gradle lain.</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class RECTANGLE Project { + name: String + version: String + extensions: ExtensionContainer + properties: Map<String, ?> } RECTANGLE ExtensionContainer { + getByType(Class<T>): T + add(String, Object): void } RECTANGLE ExtraPropertiesExtension { + set(String, Object): void + get(String): Object + has(String): boolean + getProperties(): Map<String, Object> } Project --> ExtensionContainer : contient ExtensionContainer --> ExtraPropertiesExtension : gère ExtraPropertiesExtension --> Project : synchronise avec\nproject.properties note right of ExtraPropertiesExtension : Point d'entrée pour\ninjecter des propriétés @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_langkah_2_penyiapan_tes_persiapan">Langkah 2: Penyiapan Tes - Persiapan</h3> <div class="paragraph"> <p>Mari kita mulai dengan membuat struktur dasar dari tes unit kita :</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="_langkah_3_injeksi_properti">Langkah 3: Injeksi Properti</h3> <div class="paragraph"> <p>Berikut proses detail untuk menyuntikkan properti ke dalam proyek uji :</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="_langkah_4_diagram_alur_solusi">Langkah 4 : Diagram Alur Solusi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml start :Créer ProjectBuilder; :Obtenir ExtraPropertiesExtension; :Injecter la propriété\nvia extra.set(); partition "verifikasi" { :Vérifier project.hasProperty(); :Appliquer le plugin; :Récupérer la tâche; } partition "pelaksanaan" { :Exécuter les actions\nde la tâche; :Le plugin lit\nproject.properties; } partition "Pernyataan" { :Vérifier la propriété\nest accessible; :Valider le comportement\nattendues; } stop @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_langkah_5_perbandingan_sebelumsesudah">Langkah 5 : Perbandingan Sebelum/Sesudah</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class package "SEBELUM - Masalah" { RECTANGLE TestProject1 { + ProjectBuilder.build() + Pas de propriétés } RECTANGLE Plugin1 { + initialize() + ❌ project.properties["site_config_path"] = null } TestProject1 --> Plugin1 : échec note right of Plugin1 : Test échoue car\nla propriété n'existe pas } package "Setelah - Solusi" { RECTANGLE TestProject2 { + ProjectBuilder.build() + ExtraPropertiesExtension } RECTANGLE ExtraProps { + set("site_config_path", "...") } RECTANGLE Plugin2 { + initialize() + ✅ project.properties["site_config_path"] = "src/jbake/settings/site.yml" } TestProject2 --> ExtraProps : configure ExtraProps --> Plugin2 : propriété disponible note right of Plugin2 : Test réussit car\nla propriété est simulée } @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_langkah_6_pengelolaan_kasus_pengujian_ganda">Langkah 6 : Pengelolaan Kasus Pengujian Ganda</h3> <div class="paragraph"> <p>Untuk menguji berbagai skenario, mari buat beberapa tes dengan konfigurasi yang beragam :</p> </div> <div class="listingblock"> <div class="title">Tests multiples avec configurations différentes</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class JbakeGhPagesPluginTest { @TempDir lateinit var testProjectDir: File private fun createProjectWithProperty(propertyValue: String?): Project { val project = ProjectBuilder.builder() .withProjectDir(testProjectDir) .build() // Injection conditionnelle de la propriété propertyValue?.let { value -> val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) extra.set("site_config_path", value) } return project } @Test fun `should work with valid property`() { val project = createProjectWithProperty("src/jbake/settings/site.yml") project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! task.actions.forEach { it.execute(task) } // Assertions pour le cas normal assertEquals("src/jbake/settings/site.yml", project.properties["site_config_path"]) } @Test fun `should handle missing property gracefully`() { val project = createProjectWithProperty(null) // Pas de propriété project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! // Le plugin devrait gérer l'absence de propriété assertDoesNotThrow { task.actions.forEach { it.execute(task) } } } @Test fun `should handle invalid property path`() { val project = createProjectWithProperty("invalid/path/to/config.yml") project.plugins.apply("jbake.ghpages") val task = project.tasks.findByName("initialize")!! // Test du comportement avec un chemin invalide assertThrows<FileNotFoundException> { task.actions.forEach { it.execute(task) } } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_arsitektur_akhir_solusi">Arsitektur Akhir Solusi</h3> <div class="listingblock"> <div class="content"> <pre>@startuml !define RECTANGLE class package "lingkungan uji" { RECTANGLE TestClass { + createProjectWithProperty() + testValidProperty() + testMissingProperty() + testInvalidProperty() } RECTANGLE ProjectBuilder { + builder() + withProjectDir() + build() } RECTANGLE TestProject { + extensions + properties + plugins + tasks } RECTANGLE ExtraPropertiesExtension { + set(key, value) + get(key) + has(key) } RECTANGLE JbakePlugin { + apply(project) + createInitializeTask() + readSiteConfigPath() } } TestClass --> ProjectBuilder : utilise ProjectBuilder --> TestProject : crée TestProject --> ExtraPropertiesExtension : contient TestClass --> ExtraPropertiesExtension : configure ExtraPropertiesExtension --> TestProject : synchronise properties TestProject --> JbakePlugin : applique JbakePlugin --> TestProject : lit properties note right of ExtraPropertiesExtension : Point de contrôle\npour l'injection note bottom of TestProject : Environnement\ncontrôlé et isolé @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_manfaat_pendekatan_ini">Manfaat Pendekatan Ini</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><strong>Isolasi Lengkap</strong>Uji tidak bergantung pada file eksternal apa pun. Ia mandiri dan dapat dieksekusi dengan andal di mana-mana lingkungan (lokal, CI/CD, dst.).</p> </li> <li> <p><strong>Kejelasan dan Niat</strong>: Test secara eksplisit menyatakan prasyarat untuk eksekusinya. Siapa pun yang membaca tes akan langsung melihat bahwa plugin membutuhkan properti`site_config_path`untuk berfungsi.</p> </li> <li> <p><strong>kemudahan pemeliharaan</strong>: Jika nama properti berubah, cukup memperbaruinya di satu tempat dalam tes, tanpa perlu memanipulasi file konfigurasi tes.</p> </li> <li> <p><strong>fleksibilitas</strong>: Menjadi trivial untuk menguji berbagai skenario hanya dengan mengubah nilai properti yang di-injeksi pada setiap test (nilai valid, tidak valid, tidak ada, dsb.).</p> </li> <li> <p><strong>Kinerja</strong>Tidak ada pembacaan file, semuanya berlangsung di memori, yang membuat tes lebih cepat.</p> </li> <li> <p><strong>kecocokan</strong>Pengujian bersifat deterministik karena tidak tergantung pada keadaan sistem berkas.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_terbaik_dan_saran">Praktik terbaik dan saran</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_buat_metode_utilitas">Buat Metode Utilitas</h3> <div class="listingblock"> <div class="title">Méthode utilitaire pour la réutilisation</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class GradleTestUtils { companion object { fun createProjectWithProperties( projectDir: File, properties: Map<String, String> ): Project { val project = ProjectBuilder.builder() .withProjectDir(projectDir) .build() val extra = project.extensions.getByType(ExtraPropertiesExtension::class.java) properties.forEach { (key, value) -> extra.set(key, value) } return project } } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_validasi_properti">Validasi properti</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="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Alih-alih berjuang agar lingkungan pengujian unit membaca file konfigurasi, praktik terbaiknya adalah mensimulasikan kondisi yang diperlukan. Penggunaan`ExtraPropertiesExtension`Untuk menentukan secara program properti Gradle adalah metode yang paling bersih dan paling kuat untuk melakukan tes unit plugin yang efektif dan andal.</p> </div> <div class="paragraph"> <p>Teknik ini mengubah masalah dependensi eksternal menjadi injeksi dependensi sederhana, di tengah-tengah filosofi Test-Driven Development (TDD). Ia memberikan kontrol penuh atas lingkungan ujian sekaligus menjaga isolasi yang diperlukan untuk pengujian unit berkualitas.</p> </div> <div class="paragraph"> <p>Diagram dan contoh yang disajikan dalam artikel ini menunjukkan bagaimana pendekatan ini dapat diimplementasikan secara progresif dan metodis, memungkinkan pembuatan rangkaian uji yang kuat dan dapat dipelihara untuk plugin Gradle Anda.</p> </div> </div> </div> https://cheroliv.com/blog/2025/0079_gradle_tasks_tests_report_post.html Fri, 11 Jul 2025 00:00:00 +0000 blog/2025/0079_gradle_tasks_tests_report_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pusatkan_konfigurasi_dengan_allprojects_dan_subprojects">Pusatkan Konfigurasi dengan <code>allprojects</code> dan `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>Otomatisasi tugas build sangat penting untuk setiap proyek perangkat lunak, dan Gradle, dengan DSL Kotlinnya, menawarkan fleksibilitas yang luar biasa. Selama percakapan kami, kami telah menjelajahi cara memusatkan dan menggunakan kembali logika build, khususnya untuk laporan pengujian, dengan memanfaatkan<strong>allprojects</strong>, <strong>sumber build</strong>, dan tugas khusus dalam Kotlin.</p> </div> </div> </div> <div class="sect1"> <h2 id="_pusatkan_konfigurasi_dengan_allprojects_dan_subprojects">Pusatkan Konfigurasi dengan <code>allprojects</code> dan `subprojects</h2> <div class="sectionbody"> <div class="paragraph"> <p>blok-blok`allprojects` et `subprojects`dalam Anda`build.gradle.kts`Akar merupakan dasar untuk menerapkan konfigurasi umum di seluruh proyek multi-modul Anda.</p> </div> <div class="paragraph"> <p>*<code>allprojects { …​ }</code>: Terapkan konfigurasi ke<strong>proyek induk dan semua sub-proyeknya</strong>. Ideal untuk mendefinisikan`group`, sebuah`version`, atau beberapa`repositories`umum. *<code>subprojects { …​ }`Terapkan konfigurasi<strong>hanya ke sub-proyek</strong>, mengkecualikan proyek akar. Cocok untuk menerapkan plugin khusus modul (seperti`java</code> ou <code>kotlin-jvm</code>) atau dependensi umum untuk perpustakaan Anda.</p> </div> <div class="paragraph"> <p>Berikut contoh ilustratif :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// build.gradle.kts (projet racine) plugins { base // Appliqué au projet racine } allprojects { group = "com.example" version = "1.0.0" repositories { mavenCentral() } tasks.withType<org.gradle.api.tasks.testing.Test> { useJUnitPlatform() // Configuration commune des tests pour tous les projets } } subprojects { apply(plugin = "java") apply(plugin = "org.jetbrains.kotlin.jvm") dependencies { implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8") } }</code></pre> </div> </div> <div class="paragraph"> <p>\==`buildSrc`pisau Swiss logika Build</p> </div> <div class="paragraph"> <p>Saat logika dari tugas-tugas Anda menjadi kompleks atau perlu digunakan kembali,<strong>buildSrc</strong>Ini adalah solusi yang diprioritaskan. Ini adalah modul Gradle khusus yang dikompilasi sebelum skrip build utama, sehingga kelasnya tersedia di classpath seluruh build Anda.</p> </div> <div class="paragraph"> <p>\=== Mengapa menggunakan`buildSrc`untuk Tugas ?</p> </div> <div class="ulist"> <ul> <li> <p><strong>Kemampuan untuk digunakan kembali</strong>: Sebuah tugas yang didefinisikan di`buildSrc`bisa diterapkan pada setiap proyek build.</p> </li> <li> <p><strong>Organisasi</strong>: Memusatkan kode build, membuatnya lebih bersih dan dapat dipelihara.</p> </li> <li> <p><strong>Keamanan Tipe dan Penyelesaian Otomatis</strong>: Kode Kotlin di`buildSrc`dikompilas, menawarkan pemeriksaan kesalahan dan autocompletion IDE Anda, meningkatkan pengalaman pengembangan.</p> </li> </ul> </div> <div class="paragraph"> <p>\=== Diagram Alur`buildSrc`(kode PlantUML)</p> </div> <div class="paragraph"> <p>Untuk menghasilkan diagram ini, salin kode di bawah ini dan tempelkan ke dalam alat yang mendukung PlantUML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_sourceplantuml">[source,plantuml]</h2> <div class="sectionbody"> <div class="paragraph"> <p>@startuml skinparam tulis tangan benar skinparam monochrome true</p> </div> <div class="paragraph"> <p>persegi panjang "Gradle Build Process komponen "buildSrc" sebagai BS { file "MyCustomTask.kt" as T file "MyConventionPlugin.kt" sebagai P } komponen "Root Project" sebagai RP komponen "Subproject A" sebagai SA komponen "Subproject B" sebagai SB }</p> </div> <div class="paragraph"> <p>T --\> P : "didefinisikan dalam P --\> RP : "diterapkan pada P --\> SA : "diterapkan untuk P --\> SB : "diterapkan pada</p> </div> <div class="paragraph"> <p>RP --|\> SA : "contains RP --|\> SB : "mengandung</p> </div> <div class="paragraph"> <p>RP -up-\> BS : "tergantung pada (untuk logika build) SA -up-\> BS : "tergantung pada (untuk logika pembangunan) SB -up-\> BS : "tergantung pada (untuk logika build)</p> </div> <div class="paragraph"> <p>catatan di sebelah kanan T Kelas tugas kustom (ex: OpenTestReportTask) catatan akhir</p> </div> <div class="paragraph"> <p>catatan di sebelah kanan P Plugin konvensi yang mencatat tugas catatan akhir</p> </div> </div> </div> <div class="sect1"> <h2 id="_enduml">@enduml</h2> <div class="sectionbody"> <div class="paragraph"> <p>\== Pembuatan Tugas Laporan Abstrak</p> </div> <div class="paragraph"> <p>Untuk mengelola laporan tes, kami telah merancang pendekatan modular dengan menggunakan kelas tugas abstrak di`buildSrc`. Sesuai kebutuhan Anda, kelas ini dapat mewarisi dari`DefaultTask` ou de <code>Exec</code>.</p> </div> <div class="paragraph"> <p>\=== Tugas Abstrak`OpenTestReportTask`(mewarisi dari`DefaultTask`)</p> </div> <div class="paragraph"> <p>Pendekatan ini direkomendasikan jika Anda memerlukan logika Kotlin kustom yang berinteraksi dengan sistem file atau API Gradle lainnya, lalu menjalankan perintah eksternal.</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 impor org.gradle.api.tasks.Input import org.gradle.api.tasks.TaskAction import java.io.File</p> </div> <div class="paragraph"> <p>kelas abstrak 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}") } ---- ## } === Implementasi konkret Kelas-kelas ini mewarisi tugas abstrak dan menentukan jalur spesifik laporan. ## [source,kotlin] paket com.paketAnda abstract class ReportUnitTestsTask : OpenTestReportTask() { inisialisasi { description = "Membuka laporan tes unit di Firefox. reportPath = "build/reports/tests/test/index.html } } package com.yourpackage ## kelas abstrak ReportFunctionalTestsTask : OpenTestReportTask() { init { deskripsi = "Membuka laporan tes fungsional di Firefox." jalurLaporan = "build/reports/tests/functionalTest/index.html" } } Pencatatan Tugas dalam`build.gradle.kts`dari proyek akar Anda : ## [source,kotlin] tasks.register\<com.yourpackage.ReportUnitTestsTask\>("reportTests") {} tasks.register\<com.yourpackage.ReportFunctionalTestsTask\>("reportFunctionalTests") {} \=== Diagram UML Tugas Laporan (Kode PlantUML) Salin kode di bawah ini dan tempelkan ke dalam alat yang mendukung PlantUML. ## [source,plantuml] @startuml skinparam tulisan tangan true skinparam monochrome true classe abstraite DefaultTask { } kelas abstrak Exec { \+ commandLine(args: String...) \+ exec() } abstract class OpenTestReportTask extends DefaultTask { \+ group: String = "verifikasi \+ deskripsi: String \+ dependsOn("check") \+ abstract reportPath: String + openReport() : void } kelas abstrak AbstractJbakeExecTask meng-extends Exec { \+ group: String = "verification \+ description: String \+ dependsOn("check") \+ abstrak jalurLaporanRelatif: 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 \<-- ReportUnitTestsTask OpenTestReportTask \<-- ReportFunctionalTestsTask AbstractJbakeExecTask \<-- ReportJbakeTestsTask AbstrakJbakeTugasEksekusi \<-- LaporanJbakeTugasUjiFungsional DefaultTask \<|-- OpenTestReportTask Exec \<|-- AbstractJbakeExecTask DefaultTask \<|-- Eksekusi ## @enduml \== Tugas Abstrak`AbstractJbakeExecTask`(mewarisi dari`Exec`) Jika tugas Anda terutama melibatkan eksekusi perintah eksternal dengan argumen yang berubah-ubah, wariskan secara langsung dari**Eksekusi**lebih langsung. ## [source,kotlin] package com.yourpackage import org.gradle.api.tasks.Exec import org.gradle.api.tasks.Input import java.io.File kelas abstrak 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 } ## } \=== Implementasi konkret untuk`Exec` ## [source,kotlin] package com.yourpackage abstract class ReportJbakeTestsTask : AbstractJbakeExecTask() { inisialisasi { Membuka laporan uji unit Jbake di Firefox. reportRelativePath = "build/reports/tests/test/index.html } } package com.yourpackage ## abstract class ReportJbakeFunctionalTestsTask : AbstractJbakeExecTask() { init { description = "Membuka laporan tes fungsional di Firefox." reportRelativePath = "build/reports/tests/functionalTest/index.html" } } \== Visibilitas Tugas`buildSrc` Tugas dan kelas yang Anda tetapkan dalam**buildSrc**adalah : ***Terlihat dan dapat digunakan**oleh semua proyek build utama Anda (root dan sub-proyek). Itu sebabnya Anda dapat menggunakan`com.yourpackage.ReportUnitTestsTask`dalam`allprojects { ... }`. ***Tidak dapat dieksekusi**langsung sebagai tugas buildSrc (misalnya,`gradle :buildSrc:reportTests`tidak akan berfungsi jika tugas tidak tercatat secara khusus dalam`buildSrc/build.gradle.kts`).`buildSrc`adalah modul kompilasi, bukan modul aplikasi yang dapat dieksekusi untuk tugas-tugas build utama. \=== Menjalankan laporan untuk pengujian`buildSrc`sendiri Si `buildSrc`Ia memiliki tesnya sendiri dan menghasilkan laporan, Anda dapat merekam tugas laporan langsung di`buildSrc/build.gradle.kts`: ## [source,kotlin] plugins { `kotlin-jvm` } repositori { mavenCentral() } tasks.withType\<Test\> { useJUnitPlatform() reports.html.outputLocation.set(layout.buildDirectory.dir("reports/tests")) } import com.yourpackage.ReportJbakeTestsTask // Impor kelas tugas Anda ## tasks.register\<ReportJbakeTestsTask\>("reportBuildSrcTests") { // Jalur sudah didefinisikan di kelas, akan menunjuk ke laporan buildSrc } Anda kemudian dapat mengeksekusi :`./gradlew :buildSrc:test`diikuti oleh`./gradlew :buildSrc:reportBuildSrcTests`. Dengan mengadopsi praktik ini, Anda akan membangun sistem build Gradle dengan Kotlin DSL yang tidak hanya kuat, tetapi juga sangat modular, mudah dipelihara, dan mudah dipahami.</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2025/0078_jbake_gradle_plugin_syntaxe_post.html Wed, 9 Jul 2025 00:00:00 +0000 blog/2025/0078_jbake_gradle_plugin_syntaxe_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_tujuan">Tujuan</a></li> <li><a href="#_konfigurasi_deklaratif">Konfigurasi deklaratif</a></li> <li><a href="#_arsitektur_plugin">Arsitektur plugin</a></li> <li><a href="#_definisi_ekstensi_dsl">Definisi ekstensi DSL</a></li> <li><a href="#_definisi_tugas_kustom">Definisi tugas kustom</a></li> <li><a href="#_antarmuka_gitadapter">Antarmuka GitAdapter</a></li> <li><a href="#_implementasi_konkret_dengan_jgit">Implementasi konkret dengan JGit</a></li> <li><a href="#_konfigurasi_dsl_kotlin">Konfigurasi DSL Kotlin</a></li> <li><a href="#_uji_unit_dengan_mockito">Uji unit dengan Mockito</a> <ul class="sectlevel2"> <li><a href="#_ketergantungan">Ketergantungan</a></li> <li><a href="#_uji_perilaku_git">Uji perilaku Git</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_langkah_selanjutnya">Langkah selanjutnya</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Pos ini menyajikan pendekatan lengkap dalam perancangan dan pengujian (TDD) dari sebuah plugin Gradle yang ditulis dalam Kotlin DSL. Plugin ini mengotomatiskan pembuatan situs statis dengan <strong>JBake</strong> dan <strong>penerapan Git</strong> melalui <strong>JGit</strong>, semuanya dari file konfigurasi YAML.</p> </div> </div> </div> <div class="sect1"> <h2 id="_tujuan">Tujuan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Membuat plugin Gradle :</p> </div> <div class="ulist"> <ul> <li> <p>dapat dikonfigurasi dalam DSL Kotlin ;</p> </li> <li> <p>mampu :</p> </li> <li> <p>menghasilkan situs statis dari JBake ;</p> </li> <li> <p>menyebarkan pada repositori Git jauh melalui JGit ;</p> </li> <li> <p>dapat diintegrasikan dalam alur kerja CI/CD ;</p> </li> <li> <p>diuji sesuai dengan pendekatan TDD.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_konfigurasi_deklaratif">Konfigurasi deklaratif</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini adalah contoh konfigurasi YAML untuk dimodelkan dalam DSL kami:</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>Konfigurasi ini direpresentasikan melalui ekstensi Gradle yang dapat dideklarasikan dalam Kotlin DSL.</p> </div> </div> </div> <div class="sect1"> <h2 id="_arsitektur_plugin">Arsitektur plugin</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml package "plugin mesin" { class WorkspaceEngineExtension class GenerateSiteTask interface GitAdapter class JGitAdapter WorkspaceEnginePlugin --> WorkspaceEngineExtension WorkspaceEnginePlugin --> GenerateSiteTask GenerateSiteTask --> GitAdapter JGitAdapter ..|> GitAdapter } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_definisi_ekstensi_dsl">Definisi ekstensi DSL</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">open class WorkspaceEngineExtension { var outputDir: String = "build/site" var template: String = "freemarker" var repoUrl: String = "" var branch: String = "main" var message: String = "Generated by engine" }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_definisi_tugas_kustom">Definisi tugas kustom</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">abstract class GenerateSiteTask : DefaultTask() { lateinit var gitAdapter: GitAdapter @get:Input abstract val repoUrl: Property<String> @get:InputDirectory abstract val outputDir: DirectoryProperty @get:Input abstract val branch: Property<String> @get:Input abstract val message: Property<String> @TaskAction fun run() { val repo = gitAdapter.cloneRepository(repoUrl.get(), outputDir.get().asFile) gitAdapter.commitAndPush(repo, branch.get(), message.get()) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_antarmuka_gitadapter">Antarmuka 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="_implementasi_konkret_dengan_jgit">Implementasi konkret dengan 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="_konfigurasi_dsl_kotlin">Konfigurasi 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="_uji_unit_dengan_mockito">Uji unit dengan Mockito</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_ketergantungan">Ketergantungan</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="_uji_perilaku_git">Uji perilaku 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<GitAdapter>() val mockRepo = mock<Repository>() whenever(mockGitAdapter.cloneRepository(any(), any())).thenReturn(mockRepo) task.gitAdapter = mockGitAdapter task.repoUrl.set("https://github.com/cheroliv/test.git") task.outputDir.set(project.layout.projectDirectory.dir(tempDir.name)) task.branch.set("main") task.message.set("test commit") task.run() verify(mockGitAdapter).cloneRepository(eq("https://github.com/cheroliv/test.git"), any()) verify(mockGitAdapter).commitAndPush(eq(mockRepo), eq("main"), eq("test commit")) } }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml actor "Pengembang" as Dev participant "Gradle ProjectBuilder" as Project participant "GenerateSiteTask" as Task participant "GitAdapter (Mock)" as Adapter participant "JGitAdapter / Mockito" as Impl Dev -> Project : construit projet Gradle Dev -> Task : configure les propriétés Task -> Adapter : cloneRepository() Adapter -> Impl : simulé par Mockito Task -> Adapter : commitAndPush() @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pemisahan tanggung jawab melalui`GitAdapter`memungkinkan penerapan lengkap TDD dalam pengembangan plugin Gradle :</p> </div> <div class="ulist"> <ul> <li> <p>panggilan Git abstrak dan dapat diuji;</p> </li> <li> <p>konfigurasi DSL bersih dan jelas;</p> </li> <li> <p>Plugin tetap agnostik terhadap implementasi sebenarnya.</p> </li> </ul> </div> <div class="paragraph"> <p>Pendekatan ini menjamin keteruji-an yang tinggi dan ekstensibilitas (menuju GitHub API, GitLab, dst.).</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_selanjutnya">Langkah selanjutnya</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Mengintegrasikan generasi JBake sebagai`BakeAdapter`</p> </li> <li> <p>Menambahkan tes integrasi dengan`GradleRunner`</p> </li> <li> <p>Mendukung pemuatan otomatis file`site.yml`melalui SnakeYAML</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2025/0077_asciidoc_syntaxe_post.html Fri, 20 Jun 2025 00:00:00 +0000 blog/2025/0077_asciidoc_syntaxe_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pengenalan">Pengenalan</a></li> <li><a href="#_apa_itu_asciidoc">Apa itu AsciiDoc?</a> <ul class="sectlevel2"> <li><a href="#_mengapa_memilih_asciidoc">Mengapa memilih AsciiDoc?</a></li> </ul> </li> <li><a href="#_diagram_kasus_penggunaan_kasus_penggunaan">Diagram kasus penggunaan (Kasus Penggunaan)</a></li> <li><a href="#_diagram_peta_pikiran">Diagram Peta Pikiran</a></li> <li><a href="#_diagram_dari_flow_aliran">Diagram dari Flow (aliran)</a></li> <li><a href="#_struktur_dasar_file_asciidoc">Struktur dasar file AsciiDoc</a></li> <li><a href="#_sintaks_dasar">Sintaks dasar</a> <ul class="sectlevel2"> <li><a href="#_judul_dan_bagian">Judul dan bagian</a></li> <li><a href="#_teks_tebal_miring_dan_monospasi">Teks tebal, miring dan monospasi</a></li> <li><a href="#_daftar_bullet_dan_daftar_bernomor">Daftar bullet dan daftar bernomor</a></li> <li><a href="#_tautan_dan_gambar">Tautan dan gambar</a></li> <li><a href="#_blok_kode">Blok kode</a></li> <li><a href="#_tabel">tabel</a></li> <li><a href="#_catatan_dan_peringatan">Catatan dan peringatan</a></li> </ul> </li> <li><a href="#_penggunaan_atribut_dan_variabel">Penggunaan atribut dan variabel</a></li> <li><a href="#_kasus_penggunaan_umum">kasus penggunaan umum</a></li> <li><a href="#_praktik_terbaik">Praktik terbaik</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_untuk_melanjutkan_lebih_jauh">Untuk melanjutkan lebih jauh</a></li> </ul> </div> <div class="sect1"> <h2 id="_pengenalan">Pengenalan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Sasaran :</em> Pengembang, penulis teknis, dan siapa pun yang ingin menulis dokumentasi teknis atau artikel yang kaya.</div> <p>AsciiDoc adalah bahasa markup ringan yang dirancang untuk membuat dokumen teknis terstruktur, artikel, buku, atau presentasi. Ia tercatat dengan kemudahan bacaan, kekayaan sintaksis, dan kemampuannya untuk menghasilkan berbagai format (HTML, PDF, DocBook, dst.). Dalam artikel ini, kami akan menjelajahi sintaksis penting AsciiDoc dan memberikan tips untuk memulai dengan cepat.</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_itu_asciidoc">Apa itu AsciiDoc?</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc adalah bahasa deskripsi dokumen, mirip dengan Markdown tetapi lebih kuat. Ia memungkinkan untuk mengstruktur dengan efektif teks, judul, daftar, tabel, blok kode, dan banyak lagi. Keserbagunaannya menjadikannya pilihan populer untuk dokumentasi proyek open source, penulisan buku, dan publikasi web.</p> </div> <div class="sect2"> <h3 id="_mengapa_memilih_asciidoc">Mengapa memilih AsciiDoc?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Sintaksis yang mudah dibaca dan intuitif.</p> </li> <li> <p>Dukungan bawaan untuk struktur kompleks (tabel, catatan, peringatan, etc.).</p> </li> <li> <p>Generasi multi-format (HTML, PDF, ePub, DocBook…).</p> </li> <li> <p>Integrasi mudah dengan generator situs statis seperti JBake atau Antora.</p> </li> <li> <p>Personalisasi lanjutan dengan atribut dan ekstensi.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagram_kasus_penggunaan_kasus_penggunaan">Diagram kasus penggunaan (Kasus Penggunaan)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebuah diagram kasus penggunaan memungkinkan untuk menyajikan interaksi utama antara pengguna dan sistem. Berikut contoh sederhana untuk sistem dokumentasi :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml :Utilisateur: --> (Rédiger documentation) :Utilisateur: --> (Générer PDF) :Utilisateur: --> (Publier sur site web) (Rédiger documentation) ..> (Générer PDF) : inclut @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagram_peta_pikiran">Diagram Peta Pikiran</h2> <div class="sectionbody"> <div class="paragraph"> <p>Peta pikir (peta konseptual) adalah ideal untuk menjelajahi konsep yang terkait dengan AsciiDoc dan hubungannya:</p> </div> <div class="listingblock"> <div class="content"> <pre>@startmindmap * AsciiDoc ** Syntaxe *** Titres *** Listes *** Blocs de code *** Tableaux ** Extensions *** PlantUML *** MathJax ** Export *** HTML *** PDF *** EPUB @endmindmap</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_diagram_dari_flow_aliran">Diagram dari Flow (aliran)</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebuah diagram alur dapat menggambarkan proses pembuatan dokumen AsciiDoc :</p> </div> <div class="listingblock"> <div class="content"> <pre>@startuml start :Écrire fichier .adoc; :Ajouter images et diagrammes; if (Valider la syntaxe ?) then (oui) :Générer HTML/PDF; :Publier ou partager; else (non) :Corriger erreurs; :back to start; endif stop @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_struktur_dasar_file_asciidoc">Struktur dasar file AsciiDoc</h2> <div class="sectionbody"> <div class="paragraph"> <p>Sebuah file AsciiDoc biasanya dimulai dengan judul, atribut opsional, lalu konten terstruktur. Berikut contoh minimal :</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="_sintaks_dasar">Sintaks dasar</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_judul_dan_bagian">Judul dan bagian</h3> <div class="paragraph"> <p>AsciiDoc mendukung beberapa tingkat judul :</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="_teks_tebal_miring_dan_monospasi">Teks tebal, miring dan monospasi</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="_daftar_bullet_dan_daftar_bernomor">Daftar bullet dan daftar bernomor</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="_tautan_dan_gambar">Tautan dan gambar</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="_blok_kode">Blok kode</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("Halo AsciiDoc!")</p> </div> </div> <div class="sect2"> <h3 id="_tabel">tabel</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="_catatan_dan_peringatan">Catatan dan peringatan</h3> <div class="paragraph"> <p>AsciiDoc menawarkan blok informasi visual :</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="_penggunaan_atribut_dan_variabel">Penggunaan atribut dan variabel</h2> <div class="sectionbody"> <div class="paragraph"> <p>Atribut khusus memungkinkan untuk menggunakan kembali nilai atau mengkonfigurasi perilaku :</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="_kasus_penggunaan_umum">kasus penggunaan umum</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dokumentasi proyek open source (README, panduan teknis) - Penulisan buku dan ebook - Generasi otomatis situs web statis (<code>JBake, Antora</code>) - Presentasi teknis</p> </div> </div> </div> <div class="sect1"> <h2 id="_praktik_terbaik">Praktik terbaik</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Gunakan judul yang konsisten dan daftar isi otomatis (:toc:). - Prioritaskan peringatan untuk menarik perhatian pada poin kunci. - Susun file Anda untuk memudahkan pemeliharaan. - Manfaatkan blok kode yang diberi anotasi untuk mengilustrasikan contoh.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>AsciiDoc adalah alat yang kuat dan mudah diakses untuk membuat dokumentasi teknis atau artikel terstruktur. Sintaksisnya yang kaya, gabungan dengan pembuatan multi-format, menjadikannya pilihan yang tepat untuk pengembang dan penulis yang membutuhkan standar tinggi. Coba AsciiDoc di proyek Anda berikutnya dan rasakan perbedaannya!</p> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_melanjutkan_lebih_jauh">Untuk melanjutkan lebih jauh</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Dokumentasi resmi : <a href="https://asciidoc.org" class="bare">https://asciidoc.org</a> - Asciidoctor : <a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a> - JBake dan 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>Berbagi pengalaman dan tips Anda di komentar!</p> </div> </div> </div> https://cheroliv.com/blog/2025/0076_port_forwarding_post.html Wed, 28 May 2025 00:00:00 +0000 blog/2025/0076_port_forwarding_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_masalah_nat_dan_alamat_pribadi">Masalah: NAT dan alamat pribadi</a></li> <li><a href="#_langkah_1_identifikasi_alamat_ip_publik_anda">Langkah 1: Identifikasi alamat IP publik Anda</a></li> <li><a href="#_langkah_2_mengetahui_alamat_ip_lokal_dari_mesin_ubuntu_anda">Langkah 2 : Mengetahui alamat IP lokal dari mesin Ubuntu Anda</a></li> <li><a href="#_langkah_3_mengatur_forwarding_port_pada_router_anda">Langkah 3 : Mengatur forwarding port pada router Anda</a> <ul class="sectlevel2"> <li><a href="#_akses_ke_antarmuka_administrasi">Akses ke antarmuka administrasi</a></li> <li><a href="#_konfigurasi_pengalihan">Konfigurasi Pengalihan</a></li> </ul> </li> <li><a href="#_langkah_4_konfigurasi_layanan_di_ubuntu">Langkah 4: Konfigurasi layanan di Ubuntu</a></li> <li><a href="#_langkah_5_konfigurasi_firewall_ubuntu">Langkah 5 : Konfigurasi firewall Ubuntu</a></li> <li><a href="#_tahap_6_pengujian_dan_validasi">Tahap 6 : Pengujian dan validasi</a> <ul class="sectlevel2"> <li><a href="#_uji_dari_jaringan_lokal">Uji dari jaringan lokal</a></li> <li><a href="#_test_dari_luar">Test dari luar</a></li> </ul> </li> <li><a href="#_praktik_terbaik_dan_keamanan">Praktik terbaik dan keamanan</a> <ul class="sectlevel2"> <li><a href="#_keamanan_dasar">keamanan dasar</a></li> <li><a href="#_pemantauan_koneksi">Pemantauan koneksi</a></li> <li><a href="#_penggunaan_reverse_proxy">Penggunaan reverse proxy</a></li> </ul> </li> <li><a href="#_alternatif_untuk_port_forwarding">Alternatif untuk port forwarding</a> <ul class="sectlevel2"> <li><a href="#_solusi_cloud">Solusi cloud</a></li> <li><a href="#_vps_dan_reverse_proxy">VPS dan reverse proxy</a></li> </ul> </li> <li><a href="#_pemecahan_masalah">Pemecahan Masalah</a> <ul class="sectlevel2"> <li><a href="#_masalah_umum">Masalah umum</a></li> <li><a href="#_debug_jaringan">Debug jaringan</a></li> </ul> </li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div id="preamble"> <div class="sectionbody"> <div class="ulist"> <div class="title">Sasaran : Menengah</div> <ul> <li> <p><strong>Prasyarat yang diasumsikan</strong> : pengetahuan dasar Ubuntu, terminal, konsep jaringan dasar</p> </li> <li> <p><strong>Konsep Teknis</strong> : NAT, forwarding port, firewall, proxy terbalik</p> </li> <li> <p><strong>Perintah sistem</strong> : penggunaan terminal, konfigurasi jaringan</p> </li> <li> <p><strong>Bagian lanjutan</strong> : pemantauan, keamanan, alternatif cloud</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_nat_dan_alamat_pribadi">Masalah: NAT dan alamat pribadi</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Masalah : Anda mengembangkan aplikasi web di mesin Ubuntu Anda dan ingin membuatnya dapat diakses dari luar jaringan rumah Anda? Anda berada di tempat yang tepat! Dalam artikel ini, kita akan melihat cara mengekspos layanan lokal (misalnya di port 8080) ke Internet dengan mengonfigurasi port forwarding pada router internet Anda.</div> <p>Secara default, box internet Anda menggunakan NAT (Network Address Translation) untuk berbagi satu alamat IP publik antara semua perangkat di jaringan rumah Anda. Mesin lokal Anda menggunakan alamat IP pribadi (192.168.x.x, 10.x.x.x, dst.) yang tidak dapat dirutekan di Internet.</p> </div> <div class="paragraph"> <p>Saat Anda menjalankan layanan pada mesin Ubuntu Anda (misalnya server web pada port 8080), layanan tersebut hanya dapat diakses dari jaringan lokal Anda. Untuk membuatnya dapat diakses dari Internet, kita harus mengkonfigurasi alihkan port.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_1_identifikasi_alamat_ip_publik_anda">Langkah 1: Identifikasi alamat IP publik Anda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pertama-tama, mari kita dapatkan alamat IP publik koneksi internet Anda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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>Alamat IP ini akan digunakan oleh pengguna internet untuk mengakses layanan Anda.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_2_mengetahui_alamat_ip_lokal_dari_mesin_ubuntu_anda">Langkah 2 : Mengetahui alamat IP lokal dari mesin Ubuntu Anda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Mesin Ubuntu Anda memiliki alamat IP pribadi di jaringan lokal Anda. Untuk mengetahuinya :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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>Catat alamat ini (misalnya`192.168.1.100`), kita akan membutuhkannya untuk konfigurasi.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_3_mengatur_forwarding_port_pada_router_anda">Langkah 3 : Mengatur forwarding port pada router Anda</h2> <div class="sectionbody"> <div class="paragraph"> <p>Konfigurasi bervariasi tergantung pada model kotak Anda, tetapi prinsipnya tetap sama:</p> </div> <div class="sect2"> <h3 id="_akses_ke_antarmuka_administrasi">Akses ke antarmuka administrasi</h3> <div class="paragraph"> <p>Buka browser Anda dan buka antarmuka web dari kotak Anda :</p> </div> <div class="ulist"> <ul> <li> <p><strong>Freebox</strong>:`192.168.1.1` 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>:`192.168.1.254`</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_konfigurasi_pengalihan">Konfigurasi Pengalihan</h3> <div class="paragraph"> <p>Cari bagian khusus untuk port forwarding (nama-nama bervariasi):</p> </div> <div class="ulist"> <ul> <li> <p>Pengalihan port</p> </li> <li> <p>NAT/PAT</p> </li> <li> <p>Penerusan Port</p> </li> <li> <p>Server game</p> </li> </ul> </div> <div class="paragraph"> <p>Buat aturan baru dengan parameter ini:</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">lapangan</th> <th class="tableblock halign-left valign-top">nilai</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Nama/Deskripsi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Layanan Web Ubuntu" (atau nama eksplisit lain)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Port eksternal (atau port publik)</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">Alamat IP internal</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Alamat IP mesin Ubuntu Anda (contoh: 192.168.1.100)</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Port internal (atau port pribadi)</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">protokol</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">keadaan</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">diaktifkan</p></td> </tr> </tbody> </table> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_4_konfigurasi_layanan_di_ubuntu">Langkah 4: Konfigurasi layanan di Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pastikan layanan Anda mendengarkan di semua antarmuka, bukan hanya di localhost:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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>Untuk memastikan bahwa layanan Anda mendengarkan dengan benar:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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>Anda seharusnya melihat sesuatu seperti`0.0.0.0:8080`dan tidak`127.0.0.1:8080`.</p> </div> </div> </div> <div class="sect1"> <h2 id="_langkah_5_konfigurasi_firewall_ubuntu">Langkah 5 : Konfigurasi firewall Ubuntu</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ubuntu menggunakan UFW (Uncomplicated Firewall) secara default. Periksa statusnya dan izinkan port jika diperlukan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="_tahap_6_pengujian_dan_validasi">Tahap 6 : Pengujian dan validasi</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_uji_dari_jaringan_lokal">Uji dari jaringan lokal</h3> <div class="paragraph"> <p>Pertama, uji akses dari sebuah komputer lain di jaringan lokal Anda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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_dari_luar">Test dari luar</h3> <div class="paragraph"> <p>Sekarang, uji dari Internet menggunakan IP publik Anda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Remplacez par votre IP publique curl http://VOTRE_IP_PUBLIQUE:8080</code></pre> </div> </div> <div class="paragraph"> <p>Anda juga dapat menggunakan alat online seperti :</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="_praktik_terbaik_dan_keamanan">Praktik terbaik dan keamanan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_keamanan_dasar">keamanan dasar</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># Configurer fail2ban pour protéger contre les attaques par force brute sudo apt update && sudo apt install fail2ban # Limiter l'accès avec UFW (exemple : autoriser seulement certaines IP) sudo ufw allow from 203.0.113.0/24 to any port 8080</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_pemantauan_koneksi">Pemantauan koneksi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="_penggunaan_reverse_proxy">Penggunaan reverse proxy</h3> <div class="paragraph"> <p>Untuk keamanan dan fleksibilitas yang lebih baik, pertimbangkan penggunaan reverse proxy seperti Nginx :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-nginx hljs" 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="_alternatif_untuk_port_forwarding">Alternatif untuk port forwarding</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_solusi_cloud">Solusi cloud</h3> <div class="ulist"> <ul> <li> <p><strong>ngrok</strong>terowongan aman sementara</p> </li> <li> <p><strong>Cloudflare Tunnel</strong>solusi gratis dan aman</p> </li> <li> <p><strong>serveo.net</strong>: tunnel SSH sederhana</p> </li> </ul> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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_dan_reverse_proxy">VPS dan reverse proxy</h3> <div class="paragraph"> <p>Untuk penggunaan profesional, pertimbangkan menggunakan VPS dengan reverse proxy yang mengarah ke infrastruktur lokal Anda melalui VPN.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pemecahan_masalah">Pemecahan Masalah</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_masalah_umum">Masalah umum</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">Masalah</th> <th class="tableblock halign-left valign-top">Solusi</th> </tr> </thead> <tbody> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Layanan tidak dapat diakses dari luar</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Periksa konfigurasi port forwarding dan bahwa layanan mendengarkan pada 0.0.0.0</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Koneksi ditolak</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Layanan tidak dimulai atau hanya mendengarkan pada 127.0.0.1</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">Timeout koneksi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Masalah firewall (box atau Ubuntu) atau port forwarding yang salah dikonfigurasi</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">IP publik berubah secara teratur</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Konfigurasi DNS dinamis (DynDNS, No-IP, etc.)</p></td> </tr> </tbody> </table> </div> <div class="sect2"> <h3 id="_debug_jaringan">Debug jaringan</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Menampilkan layanan lokal ke Internet memerlukan konfigurasi yang berhati-hati untuk port forwarding, keamanan, dan monitoring. Meskipun pendekatan ini sempurna untuk pengembangan atau proyek pribadi, pertimbangkan alternatif yang lebih kuat (VPS, CDN, layanan cloud) untuk penggunaan produksi.</p> </div> <div class="paragraph"> <p>Yang penting adalah selalu mengingat keamanan: gunakan kata sandi yang kuat, perbarui sistem Anda secara teratur, dan pantau akses ke layanan Anda yang terpapar.</p> </div> <div class="paragraph"> <p>Jangan ragu untuk berbagi pengalaman dan pertanyaan Anda di komentar!</p> </div> </div> </div> https://cheroliv.com/blog/2025/0099_debugging-mockito-gradle-plugin_post.html Sun, 17 Nov 2024 00:00:00 +0000 blog/2025/0099_debugging-mockito-gradle-plugin_post.html <div id="toc" class="toc"> <div id="toctitle">Table des matières</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_konteks_plugin_gradle_bakery">Konteks : Plugin Gradle Bakery</a></li> <li><a href="#_masalah_1_memeriksa_mock_yang_salah">Masalah #1: Memeriksa mock yang salah</a> <ul class="sectlevel2"> <li><a href="#_diagnosa">Diagnosa</a></li> <li><a href="#_solusi">Solusi</a></li> </ul> </li> <li><a href="#_masalah_2_unfinishedstubbingexception_berantai">Masalah #2 : UnfinishedStubbingException berantai</a> <ul class="sectlevel2"> <li><a href="#_diagnosa_2">Diagnosa</a></li> <li><a href="#_solusi_2">Solusi</a></li> </ul> </li> <li><a href="#_masalah_3_file_konfigurasi_tidak_ada">Masalah #3: File konfigurasi tidak ada</a> <ul class="sectlevel2"> <li><a href="#_diagnosa_3">Diagnosa</a></li> <li><a href="#_solusi_3">solusi</a></li> </ul> </li> <li><a href="#_masalah_4_afterevaluate_dan_nullpointerexception">Masalah #4 : afterEvaluate dan NullPointerException</a> <ul class="sectlevel2"> <li><a href="#_diagnosa_4">Diagnosa</a></li> <li><a href="#_solusi_4">solusi</a></li> </ul> </li> <li><a href="#_solusi_lengkap">Solusi lengkap</a></li> <li><a href="#_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</a> <ul class="sectlevel2"> <li><a href="#_memeriksa_mock_yang_benar">Memeriksa mock yang benar</a></li> <li><a href="#_2_menghindari_mock_bersarang">2. Menghindari mock bersarang</a></li> <li><a href="#_3_meniru_callback_evaluasi">3. Meniru callback evaluasi</a></li> <li><a href="#_4_menguji_resolusi_jalur">4. Menguji resolusi jalur</a></li> </ul> </li> <li><a href="#_arsitektur_pengujian_akhir">Arsitektur pengujian akhir</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_sumber_daya">Sumber daya</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Selama pengembangan plugin Gradle<strong>Toko roti</strong>Untuk blog JBake saya, saya telah menemui masalah yang tampak sederhana: sebuah tes unit yang gagal dengan kesalahan`Wanted but not invoked`. Apa yang terlihat sebagai bug trivial ternyata menjadi contoh kasus yang sempurna untuk memahami kehalusan mocking dengan Mockito dan Kotlin.</p> </div> <div class="paragraph"> <p>Dalam artikel ini, saya mengajak Anda melakukan perjalanan debugging metodis, di mana setiap solusi mengungkapkan masalah baru, hingga penyelesaian akhir.</p> </div> </div> </div> <div class="sect1"> <h2 id="_konteks_plugin_gradle_bakery">Konteks : Plugin Gradle Bakery</h2> <div class="sectionbody"> <div class="paragraph"> <p>Plugin Bakery adalah sebuah wrapper di sekitar JBake yang memudahkan publikasi situs statis. Berikut adalah struktur yang disederhanakannya :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">class BakeryPlugin : Plugin<Project> { override fun apply(project: Project) { val extension = project.extensions.create( "bakery", BakeryExtension::class.java ) project.afterEvaluate { if (!project.layout.projectDirectory.asFile .resolve(extension.configPath.get()).exists()) { println("config file does not exists") } else { // C'EST ICI QUE ÇA SE PASSE project.plugins.apply(JBakePlugin::class.java) val site = FileSystemManager.from(project, extension.configPath.get()) // Configuration de JBake... } } } }</code></pre> </div> </div> <div class="paragraph"> <p>Uji yang gagal adalah sederhana:</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>Kesalahan:</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="_masalah_1_memeriksa_mock_yang_salah">Masalah #1: Memeriksa mock yang salah</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagnosa">Diagnosa</h3> <div class="listingblock"> <div class="content"> <pre>@startuml actor Test participant "project.plugins" as PP participant "mockPluginContainer" as MPC participant "BakeryPlugin" as BP Test -> Test: createMockProject() activate Test Test -> MPC: create mock Test -> PP: doReturn mockPluginContainer Test --> Test: return project deactivate Test Test -> BP: apply(project) activate BP BP -> PP: project.plugins PP --> BP: returns mockPluginContainer BP -> MPC: apply(JBakePlugin::class.java) deactivate BP Test -> PP: verify(project.plugins).apply(...) note right ❌ ÉCHEC ! Mockito vérifie "project.plugins" mais l'interaction a eu lieu sur "mockPluginContainer" end note @enduml</pre> </div> </div> <div class="paragraph"> <p>Masalah: Mockito tidak dapat melacak interaksi pada`project.plugins`karena itu hanyalah getter yang mengembalikan mock sebenarnya`mockPluginContainer`. Pemeriksaan harus dilakukan langsung pada instance mock.</p> </div> </div> <div class="sect2"> <h3 id="_solusi">Solusi</h3> <div class="paragraph"> <p>Edit`createMockProject()`untuk mengembalikan kedua objek:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { val mockPluginContainer = mock<PluginContainer>() val mockProject = mock<Project> { on { plugins } doReturn mockPluginContainer } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>Dan sesuaikan tes :</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="_masalah_2_unfinishedstubbingexception_berantai">Masalah #2 : UnfinishedStubbingException berantai</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagnosa_2">Diagnosa</h3> <div class="paragraph"> <p>Setelah perbaikan pertama diterapkan, sebuah kesalahan baru muncul:</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>Kode bermasalah menggunakan sintaksis DSL 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<Project> { on { extensions } doReturn mockExtensionContainer on { plugins } doReturn mockPluginContainer on { logger } doReturn mock() // ❌ PROBLÈME ICI ! }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml participant "Mockito" as M participant "Pembangun Mock" as MB participant "Mock inline" as IM M -> MB: mock<Project> { ... } activate MB MB -> MB: on { logger } doReturn MB -> IM: mock() activate IM note right ❌ Création d'un nouveau mock PENDANT le stubbing en cours ! Mockito perd le contexte du stubbing parent end note IM --> MB: nouveau mock deactivate IM MB -x M: UnfinishedStubbingException deactivate MB @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_solusi_2">Solusi</h3> <div class="paragraph"> <p>Membuat<strong>semua</strong>mock di luar blok stubbing apa pun, lalu konfigurasikan dengan`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<Project, PluginContainer> { // 1️⃣ Créer TOUS les mocks d'abord val mockPluginContainer = mock<PluginContainer>() val mockExtensionContainer = mock<ExtensionContainer>() val mockLogger = mock<org.gradle.api.logging.Logger>() val mockProject = mock<Project>() // 2️⃣ Configurer les mocks séparément avec whenever() whenever(mockProject.plugins).thenReturn(mockPluginContainer) whenever(mockProject.extensions).thenReturn(mockExtensionContainer) whenever(mockProject.logger).thenReturn(mockLogger) return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="admonitionblock tip"> <table> <tr> <td class="icon"> <i class="fa icon-tip" title="Tip"></i> </td> <td class="content"> <div class="paragraph"> <p><strong>Aturan emas</strong>: Jangan pernah menelepon`mock()`di dalam blok konfigurasi mock. Selalu buat mock terlebih dahulu, lalu konfigurasikan.</p> </div> </td> </tr> </table> </div> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_3_file_konfigurasi_tidak_ada">Masalah #3: File konfigurasi tidak ada</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagnosa_3">Diagnosa</h3> <div class="paragraph"> <p>Meskipun dengan mocks yang benar, test terus gagal karena plugin tidak dapat menemukan file konfigurasi :</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="listingblock"> <div class="content"> <pre>@startuml participant "BakeryPlugin" as BP participant "Tata Letak Proyek" as PL participant "Ekstensi" as EXT participant "FileSystem" as FS BP -> PL: layout.projectDirectory.asFile PL --> BP: /some/mock/path BP -> EXT: extension.configPath.get() EXT --> BP: "../../site.yml" BP -> BP: resolve("../../site.yml") BP -> FS: exists() ? FS --> BP: false ❌ BP -> BP: return (skip JBake) note right Le plugin ne trouve pas le fichier et sort avant d'appliquer JBake end note @enduml</pre> </div> </div> </div> <div class="sect2"> <h3 id="_solusi_3">solusi</h3> <div class="paragraph"> <p>Konfigurasikan mocks agar resolusi jalur berfungsi:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // ... autres mocks ... val configFile = File("../../site.yml").canonicalFile val projectDir = configFile.parentFile // Configuration cohérente des chemins whenever(mockConfigPathProperty.get()).thenReturn("site.yml") whenever(mockProjectDirectory.asFile).thenReturn(projectDir) // Maintenant : projectDir.resolve("site.yml") existe ! ✅ }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml !define SUCCESS #90EE90 !define PROBLEM #FFB6C1 rectangle "Konfigurasi Mock" { card "projectDirectory.asFile" SUCCESS card "returns: /real/path/to/project" SUCCESS card "configPath.get()" SUCCESS card "mengembalikan: site.yml" SUCCESS card "resolve()" SUCCESS card "/real/path/to/project/site.yml" SUCCESS card "ada()" SUCCESS card "benar ✅" SUCCESS } @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_masalah_4_afterevaluate_dan_nullpointerexception">Masalah #4 : afterEvaluate dan NullPointerException</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_diagnosa_4">Diagnosa</h3> <div class="paragraph"> <p>Plugin ini menerapkan JBake dalam sebuah blok`afterEvaluate`, dan mengakses`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>Mock dari`buildDirectory.dir()<code>kembali`null</code>.</p> </div> </div> <div class="sect2"> <h3 id="_solusi_4">solusi</h3> <div class="paragraph"> <p>mengejek`afterEvaluate`agar dieksekusi segera, dan mengkonfigurasi sepenuhnya`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<Project, PluginContainer> { // ... autres mocks ... val mockBuildDirectory = mock<DirectoryProperty>() val buildDir = File(projectDir, "build") // Mocker dir() pour retourner un Provider valide whenever(mockBuildDirectory.dir(any<String>())).doAnswer { invocation -> val path = invocation.arguments[0] as String val mockDirProvider = mock<Provider<Directory>>() val mockDir = mock<Directory>() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // Mocker afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any<Action<Project>>())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) // ✅ Exécution synchrone null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre>@startuml participant "uji" as T participant "BakeryPlugin" as BP participant "proyek tiruan" as MP participant "afterEvaluate Action" as AE T -> BP: apply(project) activate BP BP -> MP: afterEvaluate { ... } activate MP note right Mock configuré pour exécuter immédiatement end note MP -> AE: execute(project) activate AE AE -> MP: layout.buildDirectory.dir("memanggang") MP --> AE: Provider<Directory> ✅ AE -> MP: plugins.apply(JBakePlugin) deactivate AE MP --> BP: deactivate MP BP --> T: deactivate BP T -> T: verify(mockPluginContainer).apply(...) note right: ✅ SUCCÈS ! @enduml</pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_solusi_lengkap">Solusi lengkap</h2> <div class="sectionbody"> <div class="paragraph"> <p>Ini fungsi`createMockProject()`akhir, yang memecahkan semua masalah :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">private fun createMockProject(): Pair<Project, PluginContainer> { // 1️⃣ CRÉER tous les mocks (pas de nested mocks !) val mockPluginContainer = mock<PluginContainer>() val mockExtensionContainer = mock<ExtensionContainer>() val mockLogger = mock<org.gradle.api.logging.Logger>() val mockTaskContainer = mock<TaskContainer>() val mockConfigPathProperty = mock<Property<String>>() val mockBakeryExtension = mock<BakeryExtension>() val mockProjectDirectory = mock<Directory>() val mockBuildDirectory = mock<DirectoryProperty>() val mockProjectLayout = mock<ProjectLayout>() val mockProject = mock<Project>() // 2️⃣ CONFIGURER la résolution des chemins val configFile = File("../../site.yml").canonicalFile val projectDir = configFile.parentFile val buildDir = File(projectDir, "build") whenever(mockConfigPathProperty.get()).thenReturn("site.yml") whenever(mockConfigPathProperty.isPresent).thenReturn(true) whenever(mockBakeryExtension.configPath).thenReturn(mockConfigPathProperty) whenever(mockProjectDirectory.asFile).thenReturn(projectDir) // 3️⃣ CONFIGURER buildDirectory avec dir() whenever(mockBuildDirectory.dir(any<String>())).doAnswer { invocation -> val path = invocation.arguments[0] as String val mockDirProvider = mock<Provider<Directory>>() val mockDir = mock<Directory>() whenever(mockDir.asFile).thenReturn(File(buildDir, path)) whenever(mockDirProvider.get()).thenReturn(mockDir) mockDirProvider } // 4️⃣ ASSEMBLER le projet whenever(mockProjectLayout.projectDirectory).thenReturn(mockProjectDirectory) whenever(mockProjectLayout.buildDirectory).thenReturn(mockBuildDirectory) whenever(mockExtensionContainer.create("bakery", BakeryExtension::class.java)) .thenReturn(mockBakeryExtension) whenever(mockExtensionContainer.getByType(BakeryExtension::class.java)) .thenReturn(mockBakeryExtension) whenever(mockProject.extensions).thenReturn(mockExtensionContainer) whenever(mockProject.plugins).thenReturn(mockPluginContainer) whenever(mockProject.tasks).thenReturn(mockTaskContainer) whenever(mockProject.layout).thenReturn(mockProjectLayout) whenever(mockProject.logger).thenReturn(mockLogger) whenever(mockProject.projectDir).thenReturn(projectDir) // 5️⃣ CONFIGURER afterEvaluate pour exécution immédiate whenever(mockProject.afterEvaluate(any<Action<Project>>())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) null } return Pair(mockProject, mockPluginContainer) }</code></pre> </div> </div> <div class="paragraph"> <p>Dan uji akhir yang lolos:</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="_pelajaran_yang_dipelajari">Pelajaran yang dipelajari</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startmindmap * Mocking avec Mockito ** ✅ Bonnes pratiques *** Créer tous les mocks d'abord *** Configurer avec whenever() séparément *** Vérifier le mock exact, pas un proxy *** Tester la résolution des chemins ** ❌ Pièges à éviter *** mock() dans un bloc de configuration *** Vérifier project.x au lieu de mockX *** Ignorer les blocs afterEvaluate *** Retourner null pour les Providers @endmindmap</pre> </div> </div> <div class="sect2"> <h3 id="_memeriksa_mock_yang_benar">Memeriksa mock yang benar</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_menghindari_mock_bersarang">2. Menghindari mock bersarang</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ❌ FAUX - UnfinishedStubbingException val mockProject = mock<Project> { on { logger } doReturn mock() // Nested mock creation ! } // ✅ CORRECT - Créer séparément val mockLogger = mock<org.gradle.api.logging.Logger>() val mockProject = mock<Project>() whenever(mockProject.logger).thenReturn(mockLogger)</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_3_meniru_callback_evaluasi">3. Meniru callback evaluasi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">// ✅ afterEvaluate doit s'exécuter pour les tests whenever(mockProject.afterEvaluate(any())).doAnswer { invocation -> val action = invocation.arguments[0] as Action<Project> action.execute(mockProject) null }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_4_menguji_resolusi_jalur">4. Menguji resolusi jalur</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="_arsitektur_pengujian_akhir">Arsitektur pengujian akhir</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre>@startuml package "lapisan ujian" { [Test Class] --> [createMockProject()] } package "Pembuatan Mock" { [createMockProject()] --> [Create All Mocks] [Create All Mocks] --> [Configure Paths] [Configure Paths] --> [Configure Callbacks] [Configure Callbacks] --> [Assemble Project] } package "Objek tiruan" { [Assemble Project] --> [Project Mock] [Assemble Project] --> [PluginContainer Mock] [Assemble Project] --> [Extension Mocks] [Assemble Project] --> [Layout Mocks] } package "Plugin yang sedang diuji" { [Test Class] --> [BakeryPlugin] [BakeryPlugin] --> [Project Mock] [BakeryPlugin] --> [PluginContainer Mock] } package "verifikasi" { [Test Class] --> [verify(mockPluginContainer)] } @enduml</pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Yang seolah-olah hanya sebuah masalah tes sederhana ternyata menjadi studi kasus yang sangat baik tentang :</p> </div> <div class="ulist"> <ul> <li> <p>Kehalusan Mockito dengan Kotlin</p> </li> <li> <p>Pentingnya melakukan mock terhadap objek yang tepat</p> </li> <li> <p>Pengelolaan callback asinkron dalam pengujian</p> </li> <li> <p>Penyelesaian jalur dalam plugin Gradle</p> </li> </ul> </div> <div class="paragraph"> <p>Debugging metodis, dengan memahami setiap lapisan masalah, memungkinkan untuk mencapai solusi yang kuat dan dapat dipelihara.</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>Tips untuk tes Anda</strong>Jika Anda menemukan "Wanted but not invoked" dengan Mockito, selalu tanya pada diri sendiri : 1. Apakah saya sedang memeriksa mock yang benar? 2. Apakah semua mock saya dibuat di luar blok konfigurasi? 3. Apakah callback saya benar-benar dijalankan? 4. Apakah jalur saya diselesaikan dengan benar?</p> </div> </td> </tr> </table> </div> </div> </div> <div class="sect1"> <h2 id="_sumber_daya">Sumber daya</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p><a href="https://github.com/mockito/mockito-kotlin">Dokumentasi Mockito-Kotlin</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/custom_plugins.html">Panduan Pengembangan Plugin Gradle</a></p> </li> <li> <p><a href="https://jbake.org/">JBake Static Site Generator</a></p> </li> </ul> </div> <hr> <div class="paragraph"> <p><em>Anda pernah mengalami masalah serupa dalam tes Anda? Bagikan pengalaman Anda di komentar !</em></p> </div> </div> </div> https://cheroliv.com/blog/2024/0075_kotlin_arrow-traverse_right_and_left_post.html Tue, 24 Sep 2024 00:00:00 +0000 blog/2024/0075_kotlin_arrow-traverse_right_and_left_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_apa_itu_monade_either">Apa itu monade Either?</a> <ul class="sectlevel2"> <li><a href="#_mengapa_menggunakan_either">Mengapa menggunakan Either?</a></li> </ul> </li> <li><a href="#_konteks">Konteks</a></li> <li><a href="#_berbagai_pendekatan">Berbagai pendekatan</a> <ul class="sectlevel2"> <li><a href="#_pendekatan_klasik_dengan_when">Pendekatan klasik dengan `when</a></li> <li><a href="#_penggunaan_fold_untuk_pendekatan_yang_lebih_ringkas">Penggunaan <code>fold</code> untuk pendekatan yang lebih ringkas</a></li> <li><a href="#_transformasi_dengan_map_dan_mapleft">Transformasi dengan <code>map</code> dan `mapLeft</a></li> <li><a href="#_penanganan_error_dengan_getorelse">Penanganan error dengan `getOrElse</a></li> <li><a href="#_aksi_samping_dengan_onleft_dan_onright">Aksi samping dengan <code>onLeft</code> dan `onRight</a></li> <li><a href="#_rantai_operasi_dengan_flatmap">Rantai operasi dengan `flatMap</a></li> <li><a href="#_transformasi_dua_arah_dengan_bimap">Transformasi dua arah dengan `bimap</a></li> <li><a href="#_inversi_sisi_dengan_swap">Inversi sisi dengan `swap</a></li> <li><a href="#_penggunaan_dari_tap_dan_tapleft">Penggunaan dari <code>tap</code> dan <code>tapLeft</code> :</a></li> <li><a href="#_penggunaan_recover">Penggunaan <code>recover</code>:</a></li> </ul> </li> <li><a href="#_kasus_penggunaan_praktis">Kasus penggunaan praktis</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> <li><a href="#_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Sasaran :</em> Pengembang Kotlin tingkat menengah hingga lanjut.</div> <p>Di dunia pemrograman fungsional di Kotlin, perpustakaan Arrow menawarkan alat yang kuat untuk mengelola kesalahan dan kasus alternatif. Di antara alat-alat ini, monade`Either`ditandai oleh kemampuannya untuk mewakili dua keadaan yang mungkin: keberhasilan (Right) atau kegagalan (Left). Namun bagaimana cara menavigasi secara efektif antara kedua keadaan ini? Itulah yang akan kita jelajahi dalam artikel ini.</p> </div> </div> </div> <div class="sect1"> <h2 id="_apa_itu_monade_either">Apa itu monade Either?</h2> <div class="sectionbody"> <div class="paragraph"> <p>Monad`Either`adalah sebuah struktur data yang merepresentasikan dua kemungkinan yang saling eksklusif. Di Kotlin dengan Arrow, ia sering digunakan untuk mengelola kasus keberhasilan dan kegagalan suatu operasi, menawarkan alternatif yang elegan terhadap pengecualian tradisional.</p> </div> <div class="sect2"> <h3 id="_mengapa_menggunakan_either">Mengapa menggunakan Either?</h3> <div class="olist arabic"> <ol class="arabic"> <li> <p>Penanganan eksplisit kesalahan: Memaksa developer untuk mempertimbangkan kasus kegagalan.</p> </li> <li> <p>Komposisi fungsional: Memudahkan rantai operasi yang dapat gagal.</p> </li> <li> <p>Keamanan tipe : Kesalahan telah diberi tipe, yang membantu mengelola mereka dengan lebih presisi.</p> </li> <li> <p>Tanpa pengecualian: Hindari efek samping dan interupsi yang tidak terduga dalam aliran eksekusi.</p> </li> </ol> </div> </div> </div> </div> <div class="sect1"> <h2 id="_konteks">Konteks</h2> <div class="sectionbody"> <div class="paragraph"> <p>Bayangkan Anda sedang mengembangkan sebuah API REST denganhttps://spring.io/projects/spring-boot/[Spring Boot,windows=read-later] et <a href="https://kotlinlang.org/">Kotlin</a>, menggunakan perpustakaanhttps://arrow-kt.io/[Panah,Windows=baca-nanti]. Anda memiliki sebuah fungsi`findOneUserByEmail`yang mengembalikan`Either<Throwable, User>`. Bagaimana Anda dapat menangani hasil ini dengan cara yang elegan dan fungsional?</p> </div> <div class="paragraph"> <p>Kami memiliki kelas User :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">@file:Suppress( "RemoveRedundantQualifierName", "MemberVisibilityCanBePrivate", "SqlNoDataSourceInspection" ) package webapp.users import arrow.core.Either import arrow.core.left import arrow.core.right import com.fasterxml.jackson.annotation.JsonIgnore import com.fasterxml.jackson.databind.ObjectMapper import jakarta.validation.constraints.NotNull import jakarta.validation.constraints.Pattern import jakarta.validation.constraints.Size import org.springframework.beans.factory.getBean import org.springframework.context.ApplicationContext import org.springframework.data.r2dbc.core.R2dbcEntityTemplate import org.springframework.r2dbc.core.DatabaseClient import org.springframework.r2dbc.core.awaitOne import org.springframework.r2dbc.core.awaitRowsUpdated import webapp.core.property.ANONYMOUS_USER import webapp.core.property.EMPTY_STRING import webapp.core.utils.AppUtils.cleanField import webapp.users.EntityModel.Companion.ID_MEMBER import webapp.users.User.UserDao.Attributes.EMAIL_ATTR import webapp.users.User.UserDao.Attributes.ID_ATTR import webapp.users.User.UserDao.Attributes.LANG_KEY_ATTR import webapp.users.User.UserDao.Attributes.LOGIN_ATTR import webapp.users.User.UserDao.Attributes.PASSWORD_ATTR import webapp.users.User.UserDao.Attributes.VERSION_ATTR import webapp.users.User.UserDao.Constraints.LOGIN_REGEX import webapp.users.User.UserDao.Fields.EMAIL_FIELD import webapp.users.User.UserDao.Fields.ID_FIELD import webapp.users.User.UserDao.Fields.LANG_KEY_FIELD import webapp.users.User.UserDao.Fields.LOGIN_FIELD import webapp.users.User.UserDao.Fields.PASSWORD_FIELD import webapp.users.User.UserDao.Fields.VERSION_FIELD import webapp.users.User.UserDao.Relations.INSERT import webapp.users.security.Role import webapp.users.security.Role.RoleDao import webapp.users.security.UserRole.UserRoleDao import java.util.* import jakarta.validation.constraints.Email as EmailConstraint data class User( override val id: UUID? = null, @field:NotNull @field:Pattern(regexp = LOGIN_REGEX) @field:Size(min = 1, max = 50) val login: String, @JsonIgnore @field:NotNull @field:Size(min = 60, max = 60) val password: String = EMPTY_STRING, @field:EmailConstraint @field:Size(min = 5, max = 254) val email: String = EMPTY_STRING, @JsonIgnore val roles: MutableSet<Role> = mutableSetOf(Role(ANONYMOUS_USER)), @field:Size(min = 2, max = 10) val langKey: String = EMPTY_STRING, @JsonIgnore val version: Long = -1, ) : EntityModel<UUID>() { companion object { @JvmStatic fun main(args: Array<String>) = println(UserDao.Relations.sqlScript) } object UserDao { object Constraints { // Regex for acceptable logins const val LOGIN_REGEX = "^(?>[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*)|(?>[_.@A-Za-z0-9-]+)$" const val PASSWORD_MIN: Int = 4 const val PASSWORD_MAX: Int = 16 const val IMAGE_URL_DEFAULT = "https://placehold.it/50x50" const val PHONE_REGEX = "^(\\+|00)?[1-9]\\d{0,49}\$" } object Members { const val PASSWORD_MEMBER = "password" const val ROLES_MEMBER = "roles" } object Fields { const val ID_FIELD = "`id`" const val LOGIN_FIELD = "`login`" const val PASSWORD_FIELD = "`password`" const val EMAIL_FIELD = "`email`" const val LANG_KEY_FIELD = "`lang_key`" const val VERSION_FIELD = "`version`" } object Attributes { val ID_ATTR = ID_FIELD.cleanField() val LOGIN_ATTR = LOGIN_FIELD.cleanField() val PASSWORD_ATTR = PASSWORD_FIELD.cleanField() val EMAIL_ATTR = EMAIL_FIELD.cleanField() const val LANG_KEY_ATTR = "langKey" val VERSION_ATTR = VERSION_FIELD.cleanField() } object Relations { const val TABLE_NAME = "`user`" const val SQL_SCRIPT = """ CREATE TABLE IF NOT EXISTS $TABLE_NAME ( $ID_FIELD UUID default random_uuid() PRIMARY KEY, $LOGIN_FIELD VARCHAR, $PASSWORD_FIELD VARCHAR, $EMAIL_FIELD VARCHAR, $LANG_KEY_FIELD VARCHAR, $VERSION_FIELD bigint ); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_login` ON $TABLE_NAME ($LOGIN_FIELD); CREATE UNIQUE INDEX IF NOT EXISTS `uniq_idx_user_email` ON $TABLE_NAME ($EMAIL_FIELD); """ @Suppress("SqlDialectInspection") const val INSERT = """ insert into $TABLE_NAME ( $LOGIN_FIELD, $EMAIL_FIELD, $PASSWORD_FIELD, $LANG_KEY_FIELD, $VERSION_FIELD ) values ( :login, :email, :password, :langKey, :version)""" @JvmStatic val sqlScript: String get() = setOf( UserDao.Relations.SQL_SCRIPT, RoleDao.Relations.SQL_SCRIPT, UserRoleDao.Relations.SQL_SCRIPT ).joinToString("") .trimMargin() } object Dao { val Pair<User, ApplicationContext>.toJson: String get() = second.getBean<ObjectMapper>().writeValueAsString(first) suspend fun Pair<User, ApplicationContext>.save(): Either<Throwable, Long> = try { second.getBean<R2dbcEntityTemplate>() .databaseClient .sql(INSERT) .bind(LOGIN_ATTR, first.login) .bind(EMAIL_ATTR, first.email) .bind(PASSWORD_ATTR, first.password) .bind(LANG_KEY_ATTR, first.langKey) .bind(VERSION_ATTR, first.version) .fetch() .awaitRowsUpdated() .right() } catch (e: Throwable) { e.left() } suspend fun ApplicationContext.findOneUserByEmail( email: String ): Either<Throwable, User> = try { getBean<DatabaseClient>() .sql("SELECT * FROM `user` WHERE LOWER(email) = LOWER(:email)") .bind("email", email) .fetch() .awaitOne() .let { row -> User( id = row[ID_ATTR] as UUID?, login = row[LOGIN_ATTR] as String, password = row[PASSWORD_ATTR] as String, email = row[EMAIL_ATTR] as String, langKey = row[LANG_KEY_ATTR] as String, version = row[VERSION_ATTR] as Long ) }.right() } catch (e: Throwable) { e.left() } } } /** Account REST API URIs */ object UserRestApis { const val API_AUTHORITY = "/api/authorities" const val API_USERS = "/api/users" const val API_SIGNUP = "/signup" const val API_SIGNUP_PATH = "$API_USERS$API_SIGNUP" const val API_ACTIVATE = "/activate" const val API_ACTIVATE_PATH = "$API_USERS$API_ACTIVATE?key=" const val API_ACTIVATE_PARAM = "{activationKey}" const val API_ACTIVATE_KEY = "key" const val API_RESET_INIT = "/reset-password/init" const val API_RESET_FINISH = "/reset-password/finish" const val API_CHANGE = "/change-password" const val API_CHANGE_PATH = "$API_USERS$API_CHANGE" } } // Abstract entity model with Generic ID, which can be of any type abstract class EntityModel<T>( open val id: T? = null ) { companion object { const val ID_MEMBER = "id" } } // Generic extension function that allows the ID to be applied to any EntityModel type inline fun <reified T : EntityModel<ID>, ID> T.withId(id: ID): T { // Use reflection to create a copy with the passed ID return this::class.constructors.first { it.parameters.any { param -> param.name == ID_MEMBER } } .call(id, *this::class.constructors.first().parameters.drop(1).map { param -> this::class.members.first { member -> member.name == param.name }.call(this) }.toTypedArray()) }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_berbagai_pendekatan">Berbagai pendekatan</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_pendekatan_klasik_dengan_when">Pendekatan klasik dengan `when</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val user: User by lazy { userFactory(USER) } val result: Either<Throwable, User> = context.findOneUserByEmail(user.email) when (result) { is Either.Left -> { val error = result.value println("Erreur : ${error.message}") } is Either.Right -> { val user = result.value println("Utilisateur trouvé : ${user.login}") } }</code></pre> </div> </div> <div class="paragraph"> <p>Metode ini, meskipun sederhana dan dapat dibaca, tidak sepenuhnya memanfaatkan kemampuan fungsional Arrow.</p> </div> </div> <div class="sect2"> <h3 id="_penggunaan_fold_untuk_pendekatan_yang_lebih_ringkas">Penggunaan <code>fold</code> untuk pendekatan yang lebih ringkas</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">result.fold( { error -> println("Erreur : ${error.message}") }, { user -> println("Utilisateur trouvé : ${user.login}") } )</code></pre> </div> </div> <div class="paragraph"> <p>`fold`memungkinkan menentukan tindakan untuk kedua kasus (Left dan Right) dengan cara yang ringkas dan elegan.</p> </div> </div> <div class="sect2"> <h3 id="_transformasi_dengan_map_dan_mapleft">Transformasi dengan <code>map</code> dan `mapLeft</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val processedResult = result .map { user -> "Utilisateur trouvé : ${user.login}" } .mapLeft { error -> "Erreur : ${error.message}" } println(processedResult.merge())</code></pre> </div> </div> <div class="paragraph"> <p>Pendekatan ini memungkinkan untuk mengubah nilai-nilai yang terkandung dalam Either sambil menjaga struktur-nya, ideal untuk rantai pemrosesan yang lebih kompleks.</p> </div> </div> <div class="sect2"> <h3 id="_penanganan_error_dengan_getorelse">Penanganan error dengan `getOrElse</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val user = result.getOrElse { error -> println("Erreur : ${error.message}") User(login = "default", email = "default@example.com") // utilisateur par défaut } println("Login : ${user.login}")</code></pre> </div> </div> <div class="paragraph"> <p>`getOrElse`menawarkan penanganan kesalahan yang elegan dengan memungkinkan penyediaan nilai default.</p> </div> </div> <div class="sect2"> <h3 id="_aksi_samping_dengan_onleft_dan_onright">Aksi samping dengan <code>onLeft</code> dan `onRight</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">result.onLeft { error -> println("Erreur : ${error.message}") } .onRight { user -> println("Utilisateur trouvé : ${user.login}") }</code></pre> </div> </div> <div class="paragraph"> <p>Metode-metode ini memungkinkan melakukan tindakan di setiap sisi tanpa mengubah Either, sempurna untuk logging atau efek samping ringan.</p> </div> </div> <div class="sect2"> <h3 id="_rantai_operasi_dengan_flatmap">Rantai operasi dengan `flatMap</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun findUser(email: String): Either<Throwable, User> = // ... implémentation fun getUserPermissions(user: User): Either<Throwable, List<String>> = // ... implémentation val userPermissions = findUser("user@example.com") .flatMap { user -> getUserPermissions(user) }</code></pre> </div> </div> <div class="paragraph"> <p><code>flatMap`adalah berguna untuk merai operasi yang mengembalikan sendiri`Either</code>, sehingga menghindari`Either`bersarang.</p> </div> </div> <div class="sect2"> <h3 id="_transformasi_dua_arah_dengan_bimap">Transformasi dua arah dengan `bimap</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val processedResult = result.bimap( { error -> "Erreur: ${error.message}" }, { user -> "Utilisateur: ${user.login}" } )</code></pre> </div> </div> <div class="paragraph"> <p>`bimap`memungkinkan mengubah baik sisi kiri maupun sisi kanan dalam satu operasi.</p> </div> </div> <div class="sect2"> <h3 id="_inversi_sisi_dengan_swap">Inversi sisi dengan `swap</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val result: Either<Throwable, User> = // ... obtention du résultat val swapped = result.swap()</code></pre> </div> </div> <div class="paragraph"> <p><code>swap`berguna ketika Anda ingin membalikkan sisi dari satu`Either</code>, misalnya untuk menyesuaikan antarmuka satu fungsi dengan fungsi lain.</p> </div> </div> <div class="sect2"> <h3 id="_penggunaan_dari_tap_dan_tapleft">Penggunaan dari <code>tap</code> dan <code>tapLeft</code> :</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">result.tap { user -> println("Utilisateur trouvé : ${user.login}") } .tapLeft { error -> println("Erreur : ${error.message}") }</code></pre> </div> </div> <div class="paragraph"> <p>serupa dengan`onLeft` et <code>onRight</code>, tetapi metode-metode ini mengembalikan Either aslinya, yang berguna untuk menautkan operasi.</p> </div> </div> <div class="sect2"> <h3 id="_penggunaan_recover">Penggunaan <code>recover</code>:</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val recoveredUser = result.recover { error -> println("Erreur récupérée : ${error.message}") User(login = "recovered", email = "recovered@example.com") } println("Login : ${recoveredUser.login}")</code></pre> </div> </div> <div class="paragraph"> <p>Metode ini memungkinkan mengubah Either.Left menjadi Either.Right dengan menyediakan nilai pengganti.</p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kasus_penggunaan_praktis">Kasus penggunaan praktis</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Gunakan`fold`untuk operasi sederhana yang memerlukan pengolahan untuk setiap kasus. Pilih`map` et <code>mapLeft`untuk transformasi data tanpa mengubah struktur dari`Either</code>. - Pilih`flatMap`saat menautkan operasi yang dapat gagal. - Gunakan`recover`untuk menyediakan nilai default jika terjadi kesalahan. - Pilih`onLeft` et <code>onRight</code> (ou <code>tap</code> et <code>tapLeft</code>) untuk efek samping seperti logging - Gunakan`bimap`untuk mengubah kedua sisi menjadi satu operasi. - Terapkan`swap`ketika Anda harus menyesuaikan antarmuka sebuah fungsi dengan fungsi lain.</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Masing-masing pendekatan ini memiliki kelebihannya tergantung pada konteks penggunaannya. Metode-metode seperti`fold`, <code>map</code>/<code>mapLeft</code>, et `recover`Sangat berguna ketika Anda ingin menghubungkan beberapa operasi atau mengubah data dengan cara fungsional.</p> </div> <div class="paragraph"> <p>Monade`Either`d’Arrow menawarkan fleksibilitas yang luar biasa untuk menangani kasus kesuksesan dan kesalahan dalam aplikasi Kotlin Anda. Dengan menguasai pendekatan-pendekatan ini, Anda akan dapat menulis kode yang lebih kuat, lebih mudah dibaca, dan lebih fungsional.</p> </div> <div class="paragraph"> <p>Dalam proyek Anda berikutnya, jangan ragu untuk menjelajah teknik-teknik ini untuk mendapatkan maksimal dari pemrograman fungsional dengan Kotlin dan Arrow!</p> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_pergi_lebih_jauh">Untuk pergi lebih jauh</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Dokumentasi resmi Arrow :https://arrow-kt.io/docs/apidocs/arrow-core/arrow.core/-either/[Panah Either] - Kotlin Coroutines dengan Arrow :https://arrow-kt.io/docs/fx/[Panah Efek Koroutin]</p> </li> </ul> </div> <div class="paragraph"> <p>Jangan lupa untuk berbagi pengalaman dan teknik favorit Anda untuk bekerja dengan`Either`dalam komentar di bawah ini!</p> </div> </div> </div> https://cheroliv.com/blog/2024/0074_seach_file_linux_post.html Mon, 23 Sep 2024 00:00:00 +0000 blog/2024/0074_seach_file_linux_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_pendahuluan">Pendahuluan</a></li> <li><a href="#_penggunaan_perintah_find">Penggunaan perintah `find</a> <ul class="sectlevel2"> <li><a href="#_opsi_tambahan_untuk_find">Opsi tambahan untuk `find</a></li> </ul> </li> <li><a href="#_penggunaan_perintah_locate">Penggunaan perintah `locate</a></li> <li><a href="#_penggunaan_perintah_grep_untuk_mencari_teks_dalam_file">Penggunaan perintah <code>grep</code> untuk mencari teks dalam file</a></li> <li><a href="#_kesimpulan">Kesimpulan</a></li> </ul> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Masalah : Mencari file dalam sistem operasi Linux melalui terminal.</div> <p>Dalam artikel ini, kami akan menjelajahi cara mencari file di Ubuntu menggunakan terminal Zsh. Zsh (Z shell) adalah interpreter shell yang powerful dan banyak digunakan karena fleksibilitasnya dan fitur-fitur lanjutannya.</p> </div> <div class="paragraph"> <p>Ubuntu, distribusi Linux populer, menawarkan beberapa alat baris perintah untuk mencari file. Kami akan menunjukkan cara menggunakan perintah seperti`find`, <code>locate</code> et `grep`untuk mencari file dengan cepat dan efisien di terminal.</p> </div> </div> </div> <div class="sect1"> <h2 id="_penggunaan_perintah_find">Penggunaan perintah `find</h2> <div class="sectionbody"> <div class="paragraph"> <p>Perintah`find`memungkinkan mencari file dalam direktori spesifik dan subdirektorinya. Sintaks dasarnya adalah sebagai berikut:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find [chemin] -name [nom_du_fichier]</code></pre> </div> </div> <div class="paragraph"> <p>Ini adalah contoh praktis di mana kami mencari sebuah file bernama`example.txt`di direktori`/home` :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find /home -name "example.txt"</code></pre> </div> </div> <div class="paragraph"> <p>Perintah ini akan menelusuri semua subdirektori dari`/home`dan tampilkan jalur lengkap file jika ditemukan</p> </div> <div class="paragraph"> <p><strong>Manual online dari perintah`find`:https://man.archlinux.org/man/find.1.fr/[man find,windows=read-later]</strong></p> </div> <div class="sect2"> <h3 id="_opsi_tambahan_untuk_find">Opsi tambahan untuk `find</h3> <div class="paragraph"> <p>perintah`find`sangat kuat dan memiliki banyak opsi. Berikut beberapa contoh berguna:</p> </div> <div class="ulist"> <ul> <li> <p><strong>Cari berdasarkan jenis file</strong>Untuk mencari hanya file, gunakan`-type f`, dan untuk mencari direktori, gunakan`-type d`. - <strong>Cari berdasarkan ukuran</strong>: Anda juga dapat memfilter file berdasarkan ukurannya menggunakan opsi`-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="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">find /home -size +100M</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_penggunaan_perintah_locate">Penggunaan perintah `locate</h2> <div class="sectionbody"> <div class="paragraph"> <p>perintah`locate`lebih cepat daripada`find`Karena ia menggunakan basis data yang sudah diindeks sebelumnya dari file yang ada di sistem. Anda harus terlebih dahulu memperbarui basis data ini dengan perintah berikut:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo updatedb</code></pre> </div> </div> <div class="paragraph"> <p>Selanjutnya, Anda dapat mencari file seperti ini:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">locate example.txt</code></pre> </div> </div> <div class="paragraph"> <p>Saya menggunakanhttps://fr.wikipedia.org/wiki/Z_Shell[zsh]denganhttps://github.com/ohmyzsh/ohmyzsh/wiki[oh-my-zsh], ternyata perintah`locate`tidak dapat diakses dari`zsh`tapi mungkin sejak`bash`, untuk mengatasi hal ini, argumen`-c`dari perintah`bash`memungkinkan menjalankan perintah`bash`dari jenis terminal lain.</p> </div> <div class="paragraph"> <p>di sini saya mencari file-file yang berakhir dengan pola`001.pdf`di direktori pengguna</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">bash -c "locate ~/*001.pdf"</code></pre> </div> </div> <div class="paragraph"> <p>Manual daring perintah`locate` : <a href="https://man.archlinux.org/man/locate.1.fr/">manual locate</a>*</p> </div> </div> </div> <div class="sect1"> <h2 id="_penggunaan_perintah_grep_untuk_mencari_teks_dalam_file">Penggunaan perintah <code>grep</code> untuk mencari teks dalam file</h2> <div class="sectionbody"> <div class="paragraph"> <p>Jika Anda ingin mencari teks tertentu di dalam file, Anda dapat menggunakan`grep`. Sebagai contoh, untuk mencari kemunculan kata "Ubuntu" dalam semua file`.txt`dari direktori saat ini, gunakan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">grep "Ubuntu" *.txt</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pencarian file di Ubuntu melalui terminal Zsh dapat dilakukan dengan beberapa alat yang kuat.`find`adalah fleksibel dan menawarkan banyak pilihan, sedangkan`locate`memungkinkan pencarian cepat menggunakan basis data pra-dibuat. Terakhir,`grep`memungkinkan untuk menemukan kemunculan teks di dalam file.</p> </div> <div class="paragraph"> <p>Perintah-perintah ini menawarkan serangkaian alat lengkap untuk membuat pencarian file Anda lebih efisien dan disesuaikan dengan kebutuhan Anda, dan setiap perintah ini memiliki manual yang dapat dilihat dengan perintah`man`</p> </div> </div> </div> https://cheroliv.com/blog/2021/0030_memo_linux_post.html Mon, 23 Sep 2024 00:00:00 +0000 blog/2021/0030_memo_linux_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_papan_ketik">Papan ketik :</a> <ul class="sectlevel2"> <li><a href="#_tombol_ctrl"><em>tombol <Ctrl></em></a></li> </ul> </li> <li><a href="#_izinotorisasi">Izin(otorisasi)</a></li> <li><a href="#_pencarian_file">Pencarian file</a></li> </ul> </div> <div class="sect1"> <h2 id="_papan_ketik">Papan ketik :</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_tombol_ctrl"><em>tombol <Ctrl></em></h3> <table class="tableblock frame-all grid-all stretch"> </table> <div class="paragraph"> <p><a href="https://korben.info/les-raccourcis-clavier-pour-bash-terminal-linux-et-macos.html">tautan</a><br> <a href="https://blogmotion.fr/systeme/astuces-bash-linux-16175">link lain</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_izinotorisasi">Izin(otorisasi)</h2> <div class="sectionbody"> <div class="paragraph"> <p>CHMOD digunakan untuk mengubah izin file.</p> </div> <div class="paragraph"> <p>izin perintah</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 = Pengguna G = Group W = Dunia</p> </div> <div class="paragraph"> <p>r = Dapat dibaca w = dapat ditulis x = dapat dijalankan - = tidak ada izin</p> </div> <div class="paragraph"> <p>Cara lain untuk melihat izin:</p> </div> <div class="paragraph"> <p>400 dibaca oleh pemilik 040 dibaca oleh kelompok 004 dibaca oleh siapa saja (lain) 200 ditulis oleh pemilik 020 menulis oleh kelompok 002 ditulis oleh siapa saja 100 dieksekusi oleh pemilik 010 menjalankan per kelompok diejalankan oleh siapa saja</p> </div> <div class="paragraph"> <p>Untuk mendapatkan kombinasi, cukup menjumlahkannya.<br> Sebagai contoh, agar dapat dibaca, ditulis, dieksekusi oleh pemilik,<br> dibaca, dieksekusi, oleh kelompok dan dieksekusi oleh siapa pun,<br> Anda akan menambahkan 400+200+100+040+010+001 untuk menghasilkan 751.<br></p> </div> </div> </div> <div class="sect1"> <h2 id="_pencarian_file"><a href="/blog/2024/0074_seach_file_linux_post.html">Pencarian file</a></h2> <div class="sectionbody"> </div> </div> https://cheroliv.com/blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html Thu, 1 Feb 2024 00:00:00 +0000 blog/2024/0072_Exposer_un_port_linux_subsystem_post.adoc.html <div class="olist arabic"> <div class="title"><em>Waktu baca : 10 detik</em></div> <ol class="arabic"> <li> <p>masalah: Bagaimana mengekspos port 8820 dari sub-sistem Ubuntu yang hostnya Windows? Ubuntu dijalankan oleh perintah`wsl --install`.</p> </li> </ol> </div> https://cheroliv.com/blog/2024/0070_installer_pandoc_post.html Tue, 30 Jan 2024 00:00:00 +0000 blog/2024/0070_installer_pandoc_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Waktu membaca : 3 menit</em> Pandoc adalah konverter dokumen universal</div> <p>Pandoc adalah perangkat lunak pengolah teks open source yang dapat digunakan untuk mengonversi dokumen antar berbagai format. Ada beberapa cara untuk menginstal Pandoc.</p> </div> </div> </div> <div class="sect1"> <h2 id="_instalasi_dari_halaman_download">Instalasi dari halaman download</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk menginstal Pandoc dari halaman unduhan, ikuti langkah berikut:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Akses halaman unduhan Pandoc :https://pandoc.org/installing.html/[<a href="https://pandoc.org/installing.html" class="bare">https://pandoc.org/installing.html</a>]</p> </li> <li> <p>Unduh installer paket untuk sistem operasi Anda.</p> </li> <li> <p>Jalankan penginstal untuk menginstal Pandoc.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Instalasi dari file zip</strong></p> </div> <div class="paragraph"> <p>Untuk menginstal Pandoc dari file zip, ikuti langkah berikut :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Unduh file zip yang berisi biner Pandoc dan dokumentasi.</p> </li> <li> <p>Ekstrak file ZIP.</p> </li> <li> <p>Pindahkan biner ke direktori pilihan Anda.</p> </li> </ol> </div> <div class="paragraph"> <p><strong>Instalasi menggunakan Chocolatey</strong></p> </div> <div class="paragraph"> <p>Untuk menginstal Pandoc menggunakan Chocolatey, ikuti langkah-langkah berikut :</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Buka prompt perintah.</p> </li> <li> <p>Jalankan perintah berikut:</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-powershell hljs" data-lang="powershell">choco install pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>Instalasi menggunakan winget</strong></p> </div> <div class="paragraph"> <p>Untuk menginstal Pandoc menggunakan winget, ikuti langkah berikut:</p> </div> <div class="olist arabic"> <ol class="arabic"> <li> <p>Buka prompt perintah.</p> </li> <li> <p>Jalankan perintah berikut :</p> </li> </ol> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-powershell hljs" data-lang="powershell">winget install --source winget --exact --id JohnMacFarlane.Pandoc</code></pre> </div> </div> <div class="paragraph"> <p><strong>Rekomendasi</strong></p> </div> <div class="paragraph"> <p>Secara default, Pandoc membuat PDF menggunakan LaTeX. Disarankan untuk menginstal LaTeX melalui MiKTeX. Dengan opsi`--pdf-engine`, Anda dapat menentukan program lain untuk tugas ini.</p> </div> <div class="paragraph"> <p><strong>Peringatan</strong></p> </div> <div class="paragraph"> <p>Menggunakan beberapa metode instalasi dapat menyebabkan dua instalasi Pandoc yang terpisah. Disarankan untuk menguninstall Pandoc dengan benar sebelum beralih ke metode instalasi alternatif.</p> </div> <div class="paragraph"> <p><strong>Instalasi pada Linux melalui WSL</strong></p> </div> <div class="paragraph"> <p>Periksa apakah versi pandoc di manajer paket Anda tidak usang Pandoc berada di repositori Debian, Ubuntu, Slackware, Arch, Fedora, NixOS, openSUSE, gentoo dan Void.</p> </div> <div class="paragraph"> <p>Untuk mendapatkan versi terbaru, kami menawarkan sebuah paket biner untuk arsitektur amd64 di halaman unduhan.</p> </div> <div class="paragraph"> <p>File eksekusi dihubungkan secara statis dan tidak memiliki dependensi dinamik maupun dependensi pada file data eksternal. Catatan : karena tautan statis, biner pandoc dari paket ini tidak dapat menggunakan filter lua yang memerlukan modul lua eksternal yang ditulis dalam C.</p> </div> <div class="paragraph"> <p>Sebuah tarball dan instalator deb disediakan. Untuk menginstal deb :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo dpkg -i $DEB</code></pre> </div> </div> <div class="paragraph"> <p>Contoh pada saat penulisan:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">sudo dpkg -i pandoc-3.1.11.1-1-amd64.deb</code></pre> </div> </div> <div class="paragraph"> <p>où `$DEB`adalah jalur ke file .deb yang diunduh Ini akan menginstal file eksekusi`pandoc`dan halaman manual.</p> </div> <div class="paragraph"> <p>Jika Anda menggunakan distribusi berbasis RPM, Anda mungkin dapat menginstal file deb dari halaman unduhan kami dengan menggunakan alien.</p> </div> <div class="paragraph"> <p>pada distribusi apa pun, Anda dapat menginstal dari tarball di`$DEST`(misalnya,<code>/usr/local/</code> ou <code>$HOME/.local</code>) dengan melakukan :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">tar xvzf $TGZ --strip-components 1 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>où `$TGZ`adalah jalur menuju tarball zip yang diunduh. Untuk versi Pandoc sebelum 2.0, yang tidak menyediakan tarball, coba sebaliknya :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">ar p $DEB data.tar.gz | tar xvz --strip-components 2 -C $DEST</code></pre> </div> </div> <div class="paragraph"> <p>Anda juga dapat menginstal dari sumber, menggunakan instruksi di bawah ini di bawah`Compilation à partir de la source`. Catat bahwa kebanyakan distribusi memiliki platform Haskell dalam repositori paket mereka. Sebagai contoh, pada Debian/Ubuntu, Anda dapat menginstalnya dengan</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">apt-get install haskell-platform</code></pre> </div> </div> <div class="paragraph"> <p>Secara default, Pandoc membuat PDF menggunakan LaTeX. Kami merekomendasikan Anda menginstal TeX Live melalui manajer paket Anda. (Di Debian/Ubuntu,<code>apt-get install texlive</code>). dengan opsi`--pdf-engine`, Anda juga dapat menentukan program lain untuk tugas ini.</p> </div> </div> </div> https://cheroliv.com/blog/2023/0069_triple_python_js_ts_post.html Mon, 25 Dec 2023 00:00:00 +0000 blog/2023/0069_triple_python_js_ts_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <div class="title"><em>Waktu baca: 2 menit</em> Membuat implementasi lengkap dari kelas kotlin.Triple di JavaScript, TypeScript, dan Python menggunakan pemrograman fungsional.</div> <p><strong>Catatan :</strong>Jenis-jenis`Maybe`, <code>Either</code>, `Result`Tidak termasuk dalam bahasa dasar JavaScript atau TypeScript, sehingga kita harus mengimplementasikannya sendiri.</p> </div> </div> </div> <div class="sect1"> <h2 id="_javascript">JavaScript</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">//javascript // Maybe type const Maybe = (value) => ({ map: (fn) => (value !== null && value !== undefined ? Maybe(fn(value)) : Maybe(null)), flatMap: (fn) => (value !== null && value !== undefined ? fn(value) : Maybe(null)), getOrElse: (defaultValue) => (value !== null && value !== undefined ? value : defaultValue), }); // Either type const Either = { Left: (value) => ({ map: (fn) => Either.Left(value), flatMap: (fn) => Either.Left(value), getOrElse: (defaultValue) => defaultValue, isLeft: true, isRight: false, }), Right: (value) => ({ map: (fn) => Either.Right(fn(value)), flatMap: (fn) => fn(value), getOrElse: (defaultValue) => value, isLeft: false, isRight: true, }), }; // Triple class class Triple { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; } map(fn) { return new Triple(fn(this.a), fn(this.b), fn(this.c)); } static of(a, b, c) { return new Triple(a, b, c); } // Example method using Maybe and Either divideBy(other) { return Maybe(this.b) .flatMap((numerator) => Maybe(other) .flatMap((denominator) => denominator !== 0 ? Either.Right(numerator / denominator) : Either.Left('Division by zero') ) ) .getOrElse(Either.Left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_typescript">TypeScript</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">//Typescript // Maybe type // noinspection JSAnnotator type Maybe<T> = { map<U>(fn: (value: T) => U): Maybe<U>; flatMap<U>(fn: (value: T) => Maybe<U>): Maybe<U>; getOrElse(defaultValue: T): T; }; const just = <T>(value: T): Maybe<T> => ({ map: <U>(fn: (value: T) => U) => just(fn(value)), flatMap: <U>(fn: (value: T) => Maybe<U>) => fn(value), getOrElse: (_: T) => value, }); const nothing = <T>(): Maybe<T> => ({ map: <U>(_: (value: T) => U) => nothing<U>(), flatMap: <U>(_: (value: T) => Maybe<U>) => nothing<U>(), getOrElse: (defaultValue: T) => defaultValue, }); // Either type type Either<L, R> = { map<U>(fn: (value: R) => U): Either<L, U>; flatMap<U>(fn: (value: R) => Either<L, U>): Either<L, U>; getOrElse(defaultValue: R): R; isLeft: boolean; isRight: boolean; }; const left = <L, R>(value: L): Either<L, R> => ({ map: <U>(_: (value: R) => U) => left<L, U>(value), flatMap: <U>(_: (value: R) => Either<L, U>) => left<L, U>(value), getOrElse: (defaultValue: R) => defaultValue, isLeft: true, isRight: false, }); const right = <L, R>(value: R): Either<L, R> => ({ map: <U>(fn: (value: R) => U) => right<L, U>(fn(value)), flatMap: <U>(fn: (value: R) => Either<L, U>) => fn(value), getOrElse: (_: R) => value, isLeft: false, isRight: true, }); // Triple class class Triple<T> { constructor(public a: T, public b: T, public c: T) {} map<U>(fn: (value: T) => U): Triple<U> { return new Triple<U>(fn(this.a), fn(this.b), fn(this.c)); } static of<T>(a: T, b: T, c: T): Triple<T> { return new Triple<T>(a, b, c); } // Example method using Maybe and Either divideBy(other: T): Either<string, number> { return just(this.b) .flatMap((numerator) => just(other) .flatMap((denominator) => denominator !== 0 ? right(numerator / denominator) : left('Division by zero') ) ) .getOrElse(left('Invalid input')); } } // Example usage const triple = Triple.of(1, 2, 3); const result = triple.map((x) => x * 2); console.log(result); // Triple { a: 2, b: 4, c: 6 } const divisionResult = triple.divideBy(2); console.log(divisionResult); // Either.Right { value: 1 } const invalidDivisionResult = triple.divideBy(0); console.log(invalidDivisionResult); // Either.Left { value: 'Division by zero' }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_python_pydantic_pymonad">Python, pydantic, pymonad</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk membuat implementasi dalam Python menggunakan`pydantic`untuk validasi tipe dan`pymonad`untuk monade :</p> </div> <div class="listingblock"> <div class="title">Memansang dependensi:</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">pip install pydantic pymonad</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-python hljs" 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">Dalam contoh ini:</div> <ul> <li> <p><code>pydantic`untuk menentukan kelas`Triple`dengan kolom bertipe. - Metode`divide_by`menggunakan monade`Either</code> de `pymonad`untuk mengatasi kesalahan potensial yang terjadi akibat pembagian dengan nol. - Validasi kustom untuk memastikan nilai dari`b`tidak sama dengan nol. Jika sama dengan nol, sebuah pengecualian dilempar, dan`pymonad`tangkap pengecualian ini untuk mengembalikan hasil`Left`mengindikasikan kesalahan.</p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2023/0068_introduction_google_apps_script_post.html Fri, 22 Dec 2023 00:00:00 +0000 blog/2023/0068_introduction_google_apps_script_post.html <div class="sect1"> <h2 id="_daftar_isi">Daftar Isi</h2> <div class="sectionbody"> <div class="paragraph"> <p><em>waktu bacaan : 30 menit</em></p> </div> <div class="ulist"> <ul> <li> <p><a href="#Pengantar">[Pengantar]</a></p> </li> <li> <p><a href="#Struktur Dasar dalam Google Apps Script">[Struktur Dasar dalam Google Apps Script]</a></p> </li> <li> <p><a href="#Tipe dan Variabel dalam Google Apps Script">[Tipe dan Variabel dalam Google Apps Script]</a></p> </li> <li> <p><a href="#Konstanta">Variabel, dan Huruf di Google Apps Script</a></p> </li> <li> <p><a href="#Operasi dan Operator di Google Apps Script">[Operasi dan Operator di Google Apps Script]</a></p> </li> <li> <p><a href="#Var">Let dan Const dalam Google Apps Script</a></p> </li> <li> <p><a href="#Struktur Kontrol dalam Google Apps Script">[Struktur Kontrol dalam Google Apps Script]</a></p> </li> <li> <p><a href="#Perulangan di Google Apps Script">[Perulangan di Google Apps Script]</a></p> </li> <li> <p><a href="#_objek_di_google_apps_script">Objek di Google Apps Script</a></p> </li> <li> <p><a href="#Fungsi di Google Apps Script">[Fungsi di Google Apps Script]</a></p> </li> <li> <p><a href="#Parameter dan Ruang Lingkup di Google Apps Script">[Parameter dan Ruang Lingkup di Google Apps Script]</a></p> </li> <li> <p><a href="#Operator Rest dan Operator Spread di Google Apps Script">[Operator Rest dan Operator Spread di Google Apps Script]</a></p> </li> <li> <p>Penugasan dengan dekomposisi dalam Google Apps Script</p> </li> <li> <p><a href="#Koleksi dan Pemrograman Deklaratif dalam Google Apps Script">[Koleksi dan Pemrograman Deklaratif dalam Google Apps Script]</a></p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_pendahuluan">Pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script (GAS) adalah platform pengembangan skrip yang terkait dengan layanan Google yang berbeda seperti Google Sheets, Google Docs, dan Google Forms. Ia memungkinkan untuk mengotomatisasi tugas, menambahkan fitur khusus, dan mengintegrasikan layanan Google.</p> </div> <div class="paragraph"> <p>Dalam catatan ini, kita akan menjelajahi konsep utama Google Apps Script dengan didasarkan pada contoh konkret. Kita akan membahas konsep seperti variabel, perulangan, fungsi, dan banyak lagi, dengan menyesuaikannya pada konteks khusus GAS.</p> </div> </div> </div> <div class="sect1"> <h2 id="_struktur_dasar_di_google_apps_script">Struktur dasar di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk memulai, mari kita lihat struktur dasar dari skrip Google Apps.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_jenis_dan_variabel_dalam_google_apps_script">Jenis dan Variabel dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script menggunakan JavaScript sebagai bahasa pemrograman. Jenis data dan variabel berfungsi secara mirip dengan JavaScript standar.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_operasi_dan_operator_dalam_google_apps_script">Operasi dan Operator dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Operasi dan operator di Google Apps Script sama dengan JavaScript.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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_dan_const_di_google_apps_script">Var, Let dan Const di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Dalam GAS, konsep-konsep`var`, <code>let</code>, et `const`digunakan untuk mendeklarasikan variabel. Namun, sangat penting untuk memahami perbedaan dan implikasi mereka.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_struktur_kontrol_di_google_apps_script">Struktur Kontrol di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Struktur kontrol seperti`if`, <code>else</code>, <code>while</code> et `for`digunakan untuk mengelola aliran eksekusi di Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Structures de Contrôle en Google Apps Script */ function exempleStructuresControleGAS() { // Votre code ici var condition = true; if (condition) { Logger.log("La condition est vraie."); } else { Logger.log("La condition est fausse."); } var compteur = 0; while (compteur < 5) { Logger.log(compteur); compteur++; } for (var i = 0; i < 3; i++) { Logger.log(i); } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pengaturan_dan_scopes_dalam_google_apps_script">Pengaturan dan Scopes dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Parameter dan scope berperan krusial dalam pengembangan skrip di GAS. Pahami cara mereka bekerja untuk menghindari perilaku tak terduga.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_konstanta_variabel_dan_huruf_dalam_google_apps_script">Konstanta, Variabel, dan Huruf dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Memahami perbedaan antara`const`, <code>var</code>, et `let`itu penting untuk penggunaan efektif variabel di Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_perulangan_dalam_google_apps_script">Perulangan dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Loop, seperti`for` et <code>while</code>, adalah penting untuk mengiterasi melalui elemen dan melakukan operasi berulang.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Boucles en Google Apps Script */ function exempleBouclesGAS() { // Votre code ici for (var i = 0; i < 3; i++) { Logger.log(i); } var condition = true; var compteur = 0; while (condition) { Logger.log("Tour de boucle"); compteur++; if (compteur === 3) { condition = false; } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_objek_di_google_apps_script">Objek di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Objek digunakan untuk mengatur data. Dalam GAS, banyak objek bawaan memudahkan interaksi dengan layanan Google.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_konstanta_variabel_dan_huruf_dalam_google_apps_script_2">Konstanta, Variabel, dan Huruf dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Memahami perbedaan antara`const`, <code>var</code>, et `let`adalah penting untuk penggunaan efektif variabel di Google Apps Script.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_fungsi_dalam_google_apps_script">Fungsi dalam Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fungsi merupakan elemen dasar dalam pemrograman. Dalam GAS, fungsi dapat dideklarasikan dan dipanggil dengan berbagai cara.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_operator_rest_dan_spread_di_google_apps_script">Operator Rest dan Spread di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>operator istirahat (<code>…​</code>) dan perambatan (<code>…​</code>) adalah berguna untuk memanipulasi array dan objek dengan cara yang singkat.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_penugasan_dengan_dekomposisi_di_google_apps_script">Penugasan dengan dekomposisi di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Penugasan dekomposisi adalah fitur yang kuat yang memungkinkan mengekstrak nilai dari objek dan array secara ringkas.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_koleksi_dan_pemrograman_deklaratif_di_google_apps_script">Koleksi dan Pemrograman Deklaratif di Google Apps Script</h2> <div class="sectionbody"> <div class="paragraph"> <p>Google Apps Script mendukung struktur data seperti array, dan konsep pemrograman fungsional dan iterasi deklaratif <code>(><impératif)</code>, seperti`map`, <code>reduce</code> et <code>forEach</code>.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="_kesimpulan">Kesimpulan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Memo ini membahas konsep dasar Google Apps Script dengan mengilustrasikannya menggunakan contoh kode konkret. Manfaatkan pengetahuan ini untuk mengotomatiskan tugas harian Anda, menyesuaikan dokumen Anda, dan memanfaatkan sepenuhnya fitur Google Apps Script.</p> </div> </div> </div> https://cheroliv.com/blog/2023/0067_formation_express_sur_google_forms_script_post.html Wed, 20 Dec 2023 00:00:00 +0000 blog/2023/0067_formation_express_sur_google_forms_script_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>Durasi: 30 menit</p> </div> </div> </div> <div class="sect1"> <h2 id="_tujuan">Tujuan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Memahami dasar-dasar Google Apps Script di Forms - Belajar mengakses editor skrip dan mengeksekusi instruksi pada pemicu</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_penundaan">penundaan</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><strong>Pengantar Google Form Script</strong>(5 menit)</p> <div class="ulist"> <ul> <li> <p>Ringkasan cepat Google Form Script - Presentasi fitur utama</p> </li> </ul> </div> </li> <li> <p><strong>Pembuatan formulir Google dan skrip terkait</strong>(5 menit)</p> <div class="ulist"> <ul> <li> <p>Membuat formulir sederhana dengan Google Forms - Pengantar editor skrip terkait</p> </li> </ul> </div> </li> <li> <p><strong>Menjalankan sebuah instruksi</strong>(10 menit)</p> <div class="ulist"> <ul> <li> <p>Konfigurasi pemicu 'on start' - Konfigurasi pemicu "on submit - Penulisan skrip untuk menjalankan instruksi - Tes cepat untuk memverifikasi bahwa berfungsi dengan baik dalam jurnal</p> </li> </ul> </div> </li> <li> <p><strong>Analisis Hasil dan Praktik Terbaik</strong>(10 menit)</p> <div class="ulist"> <ul> <li> <p>Verifikasi hasil eksekusi instruksi - Diskusi tentang contoh skrip dan bagaimana otomatisasi dapat menghemat waktu</p> </li> </ul> </div> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="_prasyarat">Prasyarat</h2> <div class="sectionbody"> <div class="paragraph"> <p>Memiliki akun Google dan akses ke Google Forms dan Google Sheets</p> </div> </div> </div> <div class="sect1"> <h2 id="_peralatan">peralatan</h2> <div class="sectionbody"> <div class="ulist"> <ul> <li> <p>Komputer dengan peramban web dan koneksi internet</p> </li> </ul> </div> </div> </div> <div class="sect1"> <h2 id="_catatan">Catatan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pelatihan singkat ini memberikan pengantar cepat tentang otomatisasi dengan Google Form Script. Untuk pemahaman yang lebih dalam, pelatihan yang lebih lama direkomendasikan.</p> </div> </div> </div> <div class="sect1"> <h2 id="_1_pengantar_google_form_script">1 - Pengantar Google Form Script</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_slide_1_ringkasan_cepat_google_form_script">Slide 1: Ringkasan cepat Google Form Script</h3> <div class="ulist"> <ul> <li> <p>Google Form Script adalah platform skrip yang terintegrasi ke Google Forms. - Ia memungkinkan penambahan fitur kustom dan otomatisasi tugas.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_2_presentasi_fitur_utama">Slide 2: Presentasi fitur utama</h3> <div class="ulist"> <ul> <li> <p>Script Editor : Editor skrip terintegrasi untuk menulis skrip Google Apps Script - Pemicu: Peristiwa seperti "on submit" yang mengaktifkan eksekusi skrip.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_slide_3_keuntungan_menggunakan_google_form_script">Slide 3: Keuntungan Menggunakan Google Form Script</h3> <div class="ulist"> <ul> <li> <p>Personalisasi : Buat formulir yang dapat dipersonalisasi dengan fitur unik. - Otomatisasi: Otomatiskan tindakan sebagai respons terhadap jawaban formulir. - Integrasi: Integrasikan skrip dengan layanan Google lain untuk pengalaman yang lebih kaya.</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_catatan_untuk_presenter">Catatan untuk presenter :</h3> <div class="paragraph"> <p>Fitur-fitur ini menawarkan potensi besar untuk menyesuaikan dan mengotomatiskan formulir. Bagian selanjutnya dari pelatihan ini akan mengeksplorasi lebih detail tentang pembuatan skrip dan otomatisasi khusus.</p> </div> <div class="paragraph"> <p><a href="https://developers.google.com/apps-script/add-ons/editors/forms?hl=id" class="bare">https://developers.google.com/apps-script/add-ons/editors/forms?hl=id</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=id" class="bare">https://developers.google.com/apps-script/reference/forms/form-app?hl=id</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pembuatan_formulir_google_dan_skrip_yang_terkait_5_min"><strong>Pembuatan Formulir Google dan Skrip yang terkait</strong> (5 min)</h2> <div class="sectionbody"> </div> </div> https://cheroliv.com/blog/2023/0066_memo_python_post.html Sun, 19 Nov 2023 00:00:00 +0000 blog/2023/0066_memo_python_post.html <div class="sect1"> <h2 id="_instal_python_di_windows">Instal python di windows</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://ninite.com/pythonx3/">python di 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="_menjalankan_python">Menjalankan python</h2> <div class="sectionbody"> <div class="listingblock"> <div class="title">Referensi :</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="_persyaratan_instalasi">persyaratan instalasi</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">pip install -r requirements.txt</code></pre> </div> </div> </div> </div> </div> <div class="sect1"> <h2 id="_pendahuluan">pendahuluan</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://python.doctor/page-apprendre-programmation-orientee-objet-poo-classes-python-cours-debutants">python PBO</a></p> </div> </div> </div> <div class="sect1"> <h2 id="_pola_desain_gof_dalam_python">Pola Desain GoF dalam Python</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://github.com/whikwon/python-patterns/">implementasi 1</a></p> </div> <div class="paragraph"> <p><a href="https://github.com/Sean-Bradley/Design-Patterns-In-Python">implementasi 2</a></p> </div> <div class="paragraph"> <p><a href="https://sbcode.net/python/">buku lengkap</a></p> </div> <div class="paragraph"> <p>Design pattern GoF adalah sekumpulan 23 design pattern yang dijelaskan dalam buku "Design Patterns: Elements of Reusable Object-Oriented Software".</p> </div> <table class="tableblock frame-all grid-all stretch"> <caption class="title">Table 1. Berikut adalah daftar pola desain GoF</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">Nama</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Deskripsi</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Metode Pabrik</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Buat objek tanpa menentukan kelas yang tepat untuk diinstansiasi.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Pabrik Abstrak</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Buat keluarga objek terkait atau dependen tanpa menentukan kelas konkritnya.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Pembuat</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memisahkan pembuatan objek kompleks dari representasinya sehingga proses pembuatan yang sama dapat membuat representasi yang berbeda.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>prototipe</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Membuat objek baru dengan menyalin prototipe yang ada.</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">Membatasi instansiasi kelas menjadi satu objek saja.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>adaptor</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengubah antarmuka suatu kelas menjadi antarmuka lain yang diharapkan oleh klien.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>bridge</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memisahkan abstraksi dari implementasinya sehingga keduanya dapat berubah secara independen.</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">Buat objek dalam struktur pohon untuk merepresentasikan hierarki bagian-keseluruhan.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>dekorator</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Melampirkan secara dinamis tanggung jawab tambahan ke sebuah objek.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>fasad</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memberikan satu antarmuka terpadu ke sekumpulan antarmuka dalam sebuah subsistem.</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">Mengurangi biaya pembuatan dan penggunaan objek ringan.</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">Memberikan pengganti atau placeholder untuk objek lain untuk mengontrol akses padanya.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Rantai Tanggung Jawab</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengizinkan lebih dari satu objek untuk memproses permintaan.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>perintah</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Mengenkapsulasi sebuah permintaan dalam sebuah objek, sehingga memungkinkan klien dikonfigurasi dengan permintaan yang berbeda, antrian atau log, dan mendukung operasi yang dapat dibatalkan.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>penerjemah</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Berikan representasi tata bahasa suatu bahasa dan gunakan representasi tersebut untuk menafsirkan kalimat dalam bahasa tersebut.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Iterator</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memberikan cara untuk melintasi secara berurutan elemen dari objek gabungan tanpa mengekspos representasi dasarnya.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>perantara</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memungkinkan untuk mengurangi dependensi kompleks antara objek dengan membuat mereka berkomunikasi hanya melalui objek mediator.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>kenangan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memberikan kemampuan untuk mengembalikan objek ke kondisi sebelumnya (tanpa melanggar enkapsulasi).</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Pengamat</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menetapkan ketergantungan satu-ke-banyak antara objek sehingga ketika sebuah objek mengubah statusnya, semua dependennya diberi tahu dan diperbarui secara otomatis.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Negara</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memungkinkan suatu objek untuk mengubah perilaku ketika mengubah keadaan internalnya</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Strategi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menentukan sebuah keluarga algoritma, mengenkapsulasi masing-masingnya dan membuatnya dapat ditukar.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>Metode Templat</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Menetapkan kerangka sebuah algoritma dalam sebuah metode, mendelegasikan beberapa langkah ke subkelas.</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><strong>pengunjung</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Memungkinkan untuk mendefinisikan operasi baru yang harus dilakukan pada struktur objek tanpa mengubah kelas objek yang padanya ia beroperasi.</p></td> </tr> </tbody> </table> </div> </div> <div class="sect1"> <h2 id="_pemrograman_fungsional">Pemrograman fungsional</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">perpustakaan</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">Keterangan</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 adalah implementasi struktur data monadik dalam Python yang berdasarkan bahasa pemrograman seperti Haskell dan F# dengan implementasi untuk tipe monad yang paling umum digunakan dalam pemrograman fungsional.https://www.miguelfarrajota.com/2021/06/monads-in-python-with-pymonad/[artikel]</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 adalah perpustakaan Python untuk pemrograman fungsional yang menyediakan alat untuk bekerja dengan fungsi murni dan iterabel.</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 adalah pustaka Python untuk pemrograman fungsional yang menyediakan alat untuk bekerja dengan fungsi murni dan iterable.</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 adalah sebuah pustaka Python untuk pemrograman fungsional yang menyediakan alat untuk bekerja dengan fungsi murni dan iterable.</p></td> </tr> <tr> <td class="tableblock halign-left valign-top"><p class="tableblock">kelapa</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 menambahkan beberapa fitur ke Python untuk pemrograman fungsional, termasuk pencocokan pola.https://stackoverflow.com/questions/11909681/are-there-pattern-matching-functions-in-python-like-this[percakapan sof]</p></td> </tr> </tbody> </table> <div class="sect2"> <h3 id="_efek_samping">efek samping</h3> </div> <div class="sect2"> <h3 id="_perulangan">perulangan</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-python hljs" data-lang="python"># impérative way result = [] for i in inputs: x = f(g(i)) result.append(x) # idiomatic way result = map(comp(f,g), inputs)</code></pre> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2023/0065_training_web_dev_post.html Thu, 24 Aug 2023 00:00:00 +0000 blog/2023/0065_training_web_dev_post.html https://cheroliv.com/blog/2023/0064_training_trading_card_games_post.html Mon, 21 Aug 2023 00:00:00 +0000 blog/2023/0064_training_trading_card_games_post.html https://cheroliv.com/blog/2023/0063_memo_ts_post.html Sat, 19 Aug 2023 00:00:00 +0000 blog/2023/0063_memo_ts_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>repositori github:https://github.com/cheroliv/ts-codebase[ts-codebase, window="_blank]</p> </div> </div> </div> <div class="sect1"> <h2 id="toc_ts"><span class="underline">Pengantar typescript</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#ts_types">Tipe-tipe dalam typescript</a></p> </li> <li> <p><a href="#fungsi">[fungsi]</a></p> </li> <li> <p><a href="#data_struct">Struktur data</a></p> </li> <li> <p><a href="#enums_tuples">Enums dan tuples</a></p> </li> <li> <p><a href="#void_never">Void and Never</a></p> </li> <li> <p><a href="#class_interface">Kelas dan antarmuka</a></p> </li> <li> <p><a href="#tsconfig">File tsconfig.json</a></p> </li> <li> <p><a href="#modules">Modul</a></p> </li> <li> <p><a href="#janji">[janji]</a></p> </li> <li> <p>async-await</p> </li> <li> <p>generik</p> </li> </ol> </div> <div class="paragraph"> <p>index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> Intro typescript <script src="01_types.js"></script> <script src="02_data_structure.js"></script> <script src="03_enums_tuples.js"></script> </body> </html></code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="ts_types">Tipe-tipe dalam typescript</h2> <div class="sectionbody"> <div class="paragraph"> <p>01_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" 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">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="fonctions">Fungsi</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fungsi adalah blok kode yang dapat digunakan ulang.</p> </div> <div class="paragraph"> <p>Contoh skor :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">const add = (a: number, b: number): number => a + b;</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="data_struct">Struktur data</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_data_structure.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" 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">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="enums_tuples">Enums dan tuples</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_enums_tuples.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">/** * Enums et Tuples * * Enum: il existe les enums numérique * et les enums chaine de caracteres. * * Tuple: similaire aux arrays mais ne peut * contenir qu'une valeur de type spécifié. * */ //Enum numérique // l'index par de debut défaut est 0 // ici on le place a 1 enum Week { Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6, Sunday = 7, }; console.assert(Week.Monday == 1); console.assert(Week.Tuesday == 2); console.assert(Week.Wednesday == 3); console.assert(Week.Thursday == 4); console.assert(Week.Friday == 5); console.assert(Week.Saturday == 6); console.assert(Week.Sunday == 7); console.assert(Week[1] === "Monday"); console.assert(Week[2] === "Tuesday"); console.assert(Week[3] === "Wednesday"); console.assert(Week[4] === "Thursday"); console.assert(Week[5] === "Friday"); console.assert(Week[6] === "Saturday"); console.assert(Week[7] === "Sunday"); let motd_arr_fr: String[] = [ "Associé à la Lune", "Du dieu Tiw, associé à Mars", "Du dieu germanique Odin", "Du dieu germanique du tonnerre Thor", "De la déesse germanique Frigga associée à Vénus", "Associé à Saturne", "Associé au Soleil", ]; let motd_arr_en: String[] = [ "associated with the Moon", "from the god Tiw, associated with Mars", "from Germanic god Odin", "from Germanic god of thunder Thor", "from Germanic goddess Frigga associated with Venus", "associated with Saturn", "associated with the Sun", ]; // Un tuple (triple) let monday_triple_fr: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_fr[0], ]; console.assert(monday_triple_fr[0] === 1); console.assert(monday_triple_fr[1] === "Monday"); console.assert(monday_triple_fr[2] === "Associé à la Lune"); let monday_triple_en: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_arr_en[0], ]; console.assert(monday_triple_en[0] === 1); console.assert(monday_triple_en[1] === "Monday"); console.assert(monday_triple_en[2] === "associated with the Moon"); // On se fait un type pour ajouter le nom de la langue type Meaning_of_the_day = { lang: String, meaning: (Week | String)[][], }; //fonction d'affichage du type Meaning_of_the_day const display_motd = (motd: Meaning_of_the_day) => { motd.meaning.forEach(day => console.table(`${Week[day[0] as Week]}: ${day[1]}.(${motd.lang})`) ) }; //fonction d'assertion sur le type Meaning_of_the_day // afin de verifier la concordance du contenu avec // motd_arr_#lang# const test_motd = ( motd: Meaning_of_the_day, motd_arr: String[] ) => { console.assert(motd.lang.length === 2) for (const [i, value] of motd.meaning.entries()) { console.assert(value[1] === motd_arr[i]); } }; let motd_fr: Meaning_of_the_day = { lang: "fr", meaning: [ [Week.Monday, motd_arr_fr[0]], [Week.Tuesday, motd_arr_fr[1]], [Week.Wednesday, motd_arr_fr[2]], [Week.Thursday, motd_arr_fr[3]], [Week.Friday, motd_arr_fr[4]], [Week.Saturday, motd_arr_fr[5]], [Week.Sunday, motd_arr_fr[6]], ], } console.log("---------"); console.log("display_motd(motd_fr):"); display_motd(motd_fr); test_motd(motd_fr, motd_arr_fr) let motd_en: Meaning_of_the_day = { lang: "en", meaning: [ [Week.Monday, motd_arr_en[0]], [Week.Tuesday, motd_arr_en[1]], [Week.Wednesday, motd_arr_en[2]], [Week.Thursday, motd_arr_en[3]], [Week.Friday, motd_arr_en[4]], [Week.Saturday, motd_arr_en[5]], [Week.Sunday, motd_arr_en[6]], ], } console.log("---------"); console.log("display_motd(motd_en):"); display_motd(motd_en); console.log("---------"); test_motd(motd_en, motd_arr_en); // Un tuple (triple) utilisant le type // Meaning_of_the_day pour peupler le meaning let motd_triple: [ Number, String, String ] = [ Week.Monday, Week[Week.Monday], motd_fr.meaning[0][1] as String ]; console.assert(motd_triple[0] === 1); console.assert(motd_triple[1] === "Monday"); console.assert(motd_triple[2] === "Associé à la Lune");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="void_never">Void and Never</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_vide_jamais_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">// Le type void est l'opposé du type any // c'est l'absence de type. function verify_writers_length(): void { console.assert(writers.length > 0); } verify_writers_length(); const verify_writers_length_arrow = (): void => console.assert(writers.length > 0); verify_writers_length_arrow(); //Type of et never let value = 30; console.assert(typeof value === "number"); //never: qqchs qui n'arrive jamais function foo(x: String | Number): Boolean { if (typeof x === "string") { return true; } else if (typeof x === "number") { return false; } return fail("Error!") } function fail(message: String): never { throw new Error(message as string); }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="class_interface">Kelas dan antarmuka</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_void_never_types.ts</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" 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">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="tsconfig">File tsconfig.json</h2> <div class="sectionbody"> <div class="paragraph"> <p>tsconfig.json</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-json hljs" 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">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="modules">Modul</h2> <div class="sectionbody"> <div class="paragraph"> <p>Modul memungkinkan mengatur kode dalam beberapa file.</p> </div> <div class="paragraph"> <p>Contoh nilai:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">// Dans un fichier math.ts export const add = (a: number, b: number): number => a + b; // Dans un autre fichier import { add } from './math'; let result = add(2, 3);</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="promesses">Janji</h2> <div class="sectionbody"> <div class="paragraph"> <p>Janji-janji digunakan untuk melakukan operasi asinkron.</p> </div> <div class="paragraph"> <p>Contoh nilai :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">const promise = new Promise<string>((resolve) => { // Code asynchrone ici resolve("Succès"); }); promise.then((result) => { console.log(result); });</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar 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 menyederhanakan pengelolaan janji.</p> </div> <div class="paragraph"> <p>Contoh nilai :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">const fetchData = async (): Promise<void> => { const result = await someAsyncFunction(); console.log(result); };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_ts"><span class="underline">Pengantar typescript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="generik">Generik</h2> <div class="sectionbody"> <div class="paragraph"> <p>Generik memungkinkan pembuatan komponen yang dapat digunakan kembali dengan tipe dinamis.</p> </div> <div class="paragraph"> <p>Contoh nilai :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-typescript hljs" data-lang="typescript">const identity = <T>(arg: T): T => arg; const output = identity<string>("hello"); console.log(output);</code></pre> </div> </div> </div> </div> https://cheroliv.com/blog/2023/0062_memo_css_post.html Mon, 14 Aug 2023 00:00:00 +0000 blog/2023/0062_memo_css_post.html <div class="sect1"> <h2 id="toc">Daftar Isi</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#good_links">tautan baik</a></p> </li> <li> <p><a href="#repo">Repositori dan contoh kode</a></p> </li> <li> <p><a href="#toc_début"><span class="underline">Awalan CSS</span></a></p> </li> </ol> </div> <div class="sect2"> <h3 id="good_links">tautan baik</h3> <div class="paragraph"> <p><a href="#toc">Daftar Isi</a></p> </div> </div> <div class="sect2"> <h3 id="repo">Repositori dan contoh kode</h3> <div class="paragraph"> <p>repositori GitHub:https://github.com/cheroliv/css-codebase[css-codebase, window = "_blank]</p> </div> </div> <div class="sect2"> <h3 id="toc_début"><span class="underline">Awalan CSS</span></h3> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#awal_pendahuluan">[awal_pendahuluan]</a></p> </li> <li> <p><a href="#début_texts">texts</a></p> </li> <li> <p><a href="#mulai_latar_belakang">[mulai_latar_belakang]</a></p> </li> <li> <p><a href="#début_boxes">Kotak (boxes)</a></p> </li> <li> <p>awal_flexbox</p> </li> <li> <p><a href="#awal_grid">Grid</a></p> </li> <li> <p><a href="#awal_posisi_abs">[awal_posisi_abs]</a></p> </li> <li> <p><a href="#awal_responsif">[awal_responsif]</a></p> </li> <li> <p><a href="#awal_kesimpulan">Debug & Kesimpulan</a></p> </li> </ol> </div> <div class="paragraph"> <p><a href="#toc">Daftar Isi</a></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="début_intro">Pengantar & Penyiapan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Pendahuluan berdasarkan video ini:</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/[awal css, window = "_blank]</p> </div> <div class="paragraph"> <p>memo sumber:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message" ></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p>Menautkan file style.css ke halaman HTML:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"></head> <link rel="stylesheet" href="style.css" /> </head></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_awal">[toc_awal]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_texts">texts</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">/* import remote de font sur l'ensemble de la feuille*/ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); /* import local de font */ @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* body est le parent de toutes les balises, qu'il contient, donc je le déclare avant, pour la logique de précédence de parent */ body { /* si DMSerif n'est pas trouvé alors il se rabat sur Verdana*/ font-family: "DMSerif", Verdana; } /* va styliser toutes les balises h1, celles de body sont surchargés, par la déclaration présente */ h1 { text-transform: uppercase; /* espacement entre les lettres en pixel*/ letter-spacing: 3px; /* alignement du texte*/ text-align: center; /* Les tailles de polices doivent être en REM (rem = root em). Le REM se base pas sur l'élément parent pour obtenir sa taille mais sur l'élément racine. Ainsi 1rem prendra sa valeur de la font-size de votre document (body ou html).*/ font-size: 2.5rem; /* ombrage du texte */ text-shadow: 3px /* offset-x */ 3px /* offset-y */ 8px /* blur-radius */ #00000042/* color */; /* couleur du texte */ color: #ab0ef4; /*attibuer les polices(font): liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.*/ font-family: "Oswald", sans-serif; /* surligner le text*/ text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_awal">[toc_awal]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_background">Latar belakang</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; /* 100VH = 100% de la taille de l'écran (viewport height) min afin de ne pas bloquer la possibilité d'avoir un plus grand */ min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_awal">[toc_awal]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_boxes">Kotak (boxes)</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } /* *: létoile donne du style a tous les éléments. Ensuite remettre un à un les parametres par defaut afin d'eviter les stylisation inattendu.*/ * { /* surcharge de base tous les elements à padding 0*/ margin: 0; /* surcharge de base tous les elements à padding 0*/ padding: 0; } body { font-family: "DMSerif", Verdana; /* image comme background*/ background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; /* quelque soit la taille de l'écran, la boite fait toujours 90% de la taille de la page, les 10% restant sont une marge à droite, pour avoir 5% de chaque coté on ajoute une margin, tel que [0, auto]*/ width: 90%; /* haut bas prend 0, et gauche droite prend auto(center cad meme de chaque cotés)*/ margin: 0 auto; /* on ajoute des bords a notre boite*/ border: 2px solid rgb(0, 140, 255); /* on arrondis les coins de la boite*/ border-radius: 20px 20px 0 0; /* ombrage sur la boite*/ box-shadow: 0px 0px 20px 4px #81cfc6; /* marge interrieure de la boite sur tous les cotés*/ padding: 15px; } h2 { /* afin de recuprer le comportement par defaut qui a ete surchargé par l'operateur étoile*/ margin: 0; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Awalan CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="awal_flexbox">Flexbox</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } /* le point permet d'acceder à la classe d'un composant*/ .flexbox { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } /* FLEXBOX */ /* Sert à répartir équitablement des éléments sur la page */ .flexbox ul { padding: 0; /* aligne les éléments enfants de ul(les li)*/ display: flex; /* reparti convenablement(équitablement les li sur la page) */ justify-content: space-around; } /* ce style concerne les li de la classe, flexbox des balises qui y font referencent*/ .flexbox li { /* suprime les boules des éléments de la list li*/ list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; /* Centrer un unique élément verticalement et horizontalement */ display: flex; justify-content: center; align-items: center; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#awal_daftar_isi">[awal_daftar_isi]</a></p> </div> </div> </div> <div class="sect1"> <h2 id="awal_grid">Grid</h2> <div class="sectionbody"> <div class="paragraph"> <p>Untuk mendistribusikan elemen dengan cara yang sedikit lebih kompleks daripada dengan flexbox, dengan sistem grid di antara lainnya.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid { border: 2px solid skyblue; border-radius: 10px; padding: 10px; margin-top: 20px; min-height: 150px; } .flexbox ul { padding: 0; display: flex; justify-content: space-around; } .flexbox li { list-style: none; height: 160px; width: 160px; margin: 10px; background: turquoise; display: flex; justify-content: center; align-items: center; } /* GRID */ .grid-container { display: grid; /* séparatuion de la grille en deux(à ses deux enfants), avec à gauche 30% pour l'image et à droite 70% pour le formulaire*/ grid-template-columns: 30% 70%; } /* sizing de l'image css-logo contenu dans la classe grid qui est dans le parent grid-container*/ .grid img { /* l'image remplt 80% de part de grille*/ width: 80%; margin: 20px auto; display: block; } form { display: grid; /* deux colonnes de chacune 1 fraction*/ grid-template-columns: 1fr 1fr; /* trois rangés de chacune 1 fraction*/ grid-template-rows: 1fr 1fr 1fr; /* structuration sous forme de template de notre repartition des composants enfants de la forme*/ grid-template-areas: "i1 i2"/* i1: input1, i2:input2*/ "ta ta"/*ta: text area */ "vi bt"/*vi:, bt: bouton */; } /* on donne du style sur deux éléments en meme temps en les listant avant les parentheses*/ input, textarea { margin: 5px; border: 1px solid darkblue; padding: 10px; font-size: 1.1rem; font-family: "DMSerif"; border-radius: 5px; } /* donner du style uniquement la textearea*/ textarea { /* renseigner le nommage pour le grid template area*/ grid-area: ta; height: 40px; /* empeche le cassage du style de la page en empechant le resizing de la textarea du formulaire*/ resize: none; } /* pour pointer un id d'élément html on utilise la notation préfixe # */ #btn-submit { /* renseigner le nommage*/ grid-area: bt; /* change le le symbole de curseur souris quand il survole sur le bouton*/ cursor: pointer; background: cyan; transition: 0.2s; } /* au survole(hover) de la souris le bouton change de comportement*/ #btn-submit:hover { background: darkblue; /* couleur de text du bouton devient blanc*/ color: white; }</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Awalan CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_abs_pos">Posisi mutlak</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 2.5rem; text-shadow: 3px 3px 8px #00000042; color: #ab0ef4; font-family: "Oswald", sans-serif; text-decoration: underline; } main { background: rgba(245, 245, 245, 0.9); min-height: 500px; width: 90%; margin: 0 auto; border: 2px solid rgb(0, 140, 255); border-radius: 20px 20px 0 0; box-shadow: 0px 0px 20px 4px #81cfc6; padding: 15px; } h2 { margin: 0; } .flexbox, .grid, .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="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_début"><span class="underline">Awalan CSS</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="début_responsive">Responsif</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"); @font-face { font-family: "DMSerif"; src: url(./assets/fonts/DMSerifDisplay-Regular.ttf); } body { font-family: "DMSerif", Verdana; background: url(./assets/img/bg.jpg) center/cover; min-height: 100vh; } h1 { text-transform: uppercase; letter-spacing: 3px; text-align: center; /* 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="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cours CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Les bases de CSS</h1> </header> <main> <div class="flexbox"> <h2>Flexbox</h2> <ul> <li>boite 1</li> <li>boite 2</li> <li>boite 3</li> </ul> </div> <div class="grid"> <h2>Grid</h2> <div class="grid-container"> <img src="./assets/img/css-logo.png" alt="logo css" /> <form action=""> <input type="text" id="firstname" placeholder="Prénom" /> <input type="text" id="surname" placeholder="Nom" /> <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea> <input type="submit" value="Valider" id="btn-submit" /> </form> </div> </div> <div class="absolute"> <h2>Absolute</h2> <span id="circle1"></span> <span id="circle2"></span> </div> </main> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p>toc_awal</p> </div> </div> </div> <div class="sect1"> <h2 id="awal_kesimpulan">Debug & Kesimpulan</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-css hljs" 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="#daftar_isi_awal">[daftar_isi_awal]</a></p> </div> </div> </div> https://cheroliv.com/blog/2023/0061_memo_html_post.html Sun, 13 Aug 2023 00:00:00 +0000 blog/2023/0061_memo_html_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_bon_liens">Bon liens</a></li> <li><a href="#_répository_et_code_sample">Répository et code sample</a></li> </ul> </div> <div class="sect1"> <h2 id="_bon_liens">Bon liens</h2> <div class="sectionbody"> <div class="ulist"> <div class="title">html</div> <ul> <li> <p><a href="https://htmlcheatsheet.com" target="_blank" rel="noopener">htmlcheatsheet.com</a>: HTML Cheatsheet</p> </li> </ul> </div> <div class="ulist"> <div class="title">font</div> <ul> <li> <p><a href="https://fontawesome.com" target="_blank" rel="noopener">fontawesome.com</a>: bibliothèque d’icones</p> </li> <li> <p><a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank" rel="noopener">toptal.com/designers/htmlarrows/symbols</a>: Icones natives en HTML</p> </li> </ul> </div> <div class="ulist"> <div class="title">caractères spéciaux et échappements</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="_répository_et_code_sample">Répository et code sample</h2> <div class="sectionbody"> <div class="paragraph"> <p>github repository: <a href="https://github.com/cheroliv/html-codebase" target="_blank" rel="noopener">html-codebase</a></p> </div> <div class="paragraph"> <p>memo source:<br> index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Le titre de la page --> <title>Cours HTML</title> <!-- Icone de l'onglet --> <link rel="shortcut icon" href="html-logo.png" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" /> </head> <body> <header> <h1>Texte - Titre H1</h1> <p> <em>em pour mettre en italique</em>, <strong>strong pour mettre en gras</strong> <span>L'élement en span ne revient pas à la ligne</span>. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem cumque ratione veniam officiis nulla a debitis at facilis sed dignissimos. </p> </header> <section> <div> <h2>Photo - Titre H2</h2> <img src="./img-1.jpg" alt="image-arbre" height="200" /> </div> <div> <h3>Liste - Titre H3</h3> <ul> <li>UL = unordered list</li> <li>UL = unordered list</li> <li>UL = unordered list</li> </ul> <ol> <li>OL = ordered list</li> <li>OL = ordered list</li> <li>OL = ordered list</li> </ol> </div> <div> <h4>Tableaux - Titre H4</h4> <table border="4" cellpadding="10" cellspacing="4" style="text-align: center"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </tbody> </table> </div> <div> <h5><span>♖</span> Liens - Titre H5</h5> <a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a> <br /> <a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a> </div> <div> <h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6> <video src="video.mp4" height="150" autoplay loop muted></video> </div> </section> <br /> <!-- Formulaires en HTML --> <section> <h2>Formulaire</h2> <form action="/action.php" method="post"> <label for="name">Nom</label> <input id="name" type="text" placeholder="Entrez votre nom" /><br /> <label for="number">Entrez votre age</label> <input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value"> <input type="range" id="range-age" min="0" max="100" oninput="document.getElementById('number-age').value=this.value"><br /> <!-- Input select --> <label for="gender">Genre</label> <select id="gender"> <option selected="selected" value="Homme">Homme</option> <option value="Femme">Femme</option> </select><br /> <!-- Input radio --> <div> <input type="radio" name="type" id="human" checked /> <label for="human">Humain</label> <input type="radio" name="type" id="dog" /> <label for="dog">Chien</label> <input type="radio" name="type" id="cat" /> <label for="cat">Chat</label> </div> <textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br /> <!-- Input Checkbox --> <label><input type="checkbox" />Accepter les CGV</label> <br /> <input type="submit" value="Submit" /> </form> </section> <br /> <!-- Mail & envoi de fichiers --> <footer> <a href="mailto:fs@gmail.com">Ecrivez-moi !</a> <br /> <a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a> <details> <summary>Plus d'infos</summary> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, repellendus. </p> </details> </footer> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">[toc]</a></p> </div> </div> </div> https://cheroliv.com/blog/2023/0060_memo_js_post.html Fri, 4 Aug 2023 00:00:00 +0000 blog/2023/0060_memo_js_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p>github repository: <a href="https://github.com/cheroliv/js-codebase" target="_blank" rel="noopener">js-codebase</a></p> </div> </div> </div> <div class="sect1"> <h2 id="toc_js"><span class="underline">Intro Javascript</span></h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#start">Variables, opérateurs arithmétiques et chaines de caractères</a></p> </li> <li> <p><a href="#arrays">Les arrays</a></p> </li> <li> <p><a href="#functions">Les fonctions</a></p> </li> <li> <p><a href="#param_x_scope">Paramètres et scopes</a></p> </li> <li> <p><a href="#objects">Les objects</a></p> </li> <li> <p><a href="#loops">Les boucles</a></p> </li> <li> <p><a href="#const_var_let">Const, var et let</a></p> </li> <li> <p><a href="#rest_and_spread_operators">Rest et spread operators</a></p> </li> <li> <p><a href="#destructuring">Destructuring</a></p> </li> <li> <p><a href="#import_export">Import et export de modules</a></p> </li> <li> <p><a href="#classes">Utilisation des classes</a></p> </li> </ol> </div> <div class="paragraph"> <p>index.html</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> </head> <body> index <script src="01_start.js"></script> <script src="02_arrays.js"></script> <script src="03_functions.js"></script> <script src="04_param_x_scope.js"></script> <script src="05_objects.js"></script> <script src="06_loops.js"></script> <script src="07_const_var_let.js"></script> <script src="08_rest_and_spread_operators.js"></script> <script src="09_destructuring.js"></script> <script src="10_module_import_export.js"></script> </body> </html></code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="start">Variables, opérateurs arithmétiques et chaines de caractères</h2> <div class="sectionbody"> <div class="paragraph"> <p>01_start.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrays">Les arrays</h2> <div class="sectionbody"> <div class="paragraph"> <p>02_arrays.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Les arrays */ // auteurs [["nom ", "prénom", "pays"]] var writers = [ ["Karl", "Marx", "de"], ["Jean-Jacques", "Rousseau", "fr"], ["Victor", "Hugo", "fr"], ["René", "Descartes", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["Georg", "Hegel", "de"], ["Friedrich", "Engels", "de"], ] console.table(writers); // accés aux élèments du tableau console.log(writers[0]); console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); //sauvegarder la valeur du prénom de Marx var karl = writers[0][0] //éditer un élement du tableau, le prénom de Marx writers[0][0] = "Karlito" console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karlito, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.assert("Karl" === karl); //remettre la valeur initale du prénom de Marx writers[0][0] = karl; console.assert(`${karl}, Marx (de)` === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`); console.log("---------"); /** * Arrays: map/forEach/pop/push/slice/sort/shift/unshift */ var numbers = [1, 5, 4, 3, 2]; console.log("Iterate with forEach"); // parcourir avec array.forEach numbers.forEach((it) => console.log(it)); console.log("---------"); console.log("Iterate with map"); // parcourir avec array.map numbers.map((it) => console.log(it)); console.log("---------"); //afficher les éléments sur une ligne //génère la string avec le formatage des nombres const numbersString = (numberArray) => { var consoleOutput = new String(); numberArray.forEach(number => consoleOutput += `${number}, `); return consoleOutput = consoleOutput.substring(0, consoleOutput.length - 2); }; //affiche la chaine entre crochets dans la console const displayNumbers = (numbersStr) => { console.log(`[${numbersString(numbersStr)}]`); }; console.log("orginal number array") displayNumbers(numbers); console.log("---------"); //push: ajoute à la fin console.log("push"); numbers.push(6); displayNumbers(numbers); console.log("---------"); //pop: suprime le dernier console.log("pop"); numbers.pop(); displayNumbers(numbers); console.log("---------"); //unshift: ajouter le parametre au debut de l'array console.log("unshift"); numbers.unshift(0); displayNumbers(numbers); console.log("---------"); //shift: supprime le premier element de l'array console.log("shift"); numbers.shift(); displayNumbers(numbers); console.log("---------"); //slice: renvoi l'array entre les positions en argument console.log("slice"); var sliceNumbersResult = numbers.slice(2, 4); displayNumbers(sliceNumbersResult); console.log("---------"); //sort asc console.log("sort asc"); var ascSort = numbers.sort((a, b) => a - b); displayNumbers(ascSort); console.log("---------"); //sort desc console.log("sort desc"); var descSort = numbers.sort((a, b) => b - a); displayNumbers(descSort); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="functions">Les fonctions</h2> <div class="sectionbody"> <div class="paragraph"> <p>03_functions.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Les fonctions */ //function style legacy function sayHelloWorldLegacy() { console.log("Hello world legacy!"); } sayHelloWorldLegacy(); function sayHelloLegacy(firstName, lastName, style) { console.log(`Hello ${firstName}, ${lastName} (${style})`); } sayHelloLegacy("Cher", "Oliv", "legacy"); console.log("---------"); //function style arrow const sayHelloWorld = () => console.log("Hello world!"); sayHelloWorld(); const sayHello = (firstName, lastName) => console.log(`Hello ${firstName}, ${lastName}`); sayHello("Cher", "Oliv"); console.log("---------"); var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ] const displayAuthors = (authorsArray) => authorsArray.forEach(author => console.log(`${author[0]} ${author[1]}, (${author[2]})`) ); displayAuthors(authors); console.log("---------"); /** * valeur par défaut des parametres d'une fonctions */ const add = (a = 0, b = 0) => a + b; console.assert(add() === 0) console.assert(add(1) === 1) console.assert(add(1, 1) === 2) console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="param_x_scope">Paramètres et scopes</h2> <div class="sectionbody"> <div class="paragraph"> <p>04_param_x_scope.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">//global scope: visible partout, dans et hors functions var global; const foo = () => { //local scope: visible uniquement dans la fonction foo var bar = "bar" console.log(bar) } foo(); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="objects">Les objects</h2> <div class="sectionbody"> <div class="paragraph"> <p>05_objects.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="loops">Les boucles</h2> <div class="sectionbody"> <div class="paragraph"> <p>06_loops.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Les boucles: Itérer sur arrays et objets. */ console.log("for loop over array"); var numbers = [12, 10, 8, 6, 4, 2, 0]; for (number of numbers) { console.log(number); } console.log("---------"); console.log("for loop over object key"); var obj = { a: 1, b: 2, c: 3, d: 4 }; for (key in obj) { console.log(key); } console.log("---------"); console.log("for loop over object value"); for (value in obj) { console.log(obj[value]); } console.log("---------"); console.log("another for loop over authors array") var authors = [ ["Chrétien", "de Troyes", "fr"], ["François", "Rabelais", "fr"], ["René", "Descartes", "fr"], ["Jean-Jacques", "Rousseau", "fr"], ["Georg", "Hegel", "de"], ["Karl", "Marx", "de"], ["Friedrich", "Engels", "de"], ["Victor", "Hugo", "fr"], ["Paul", "Verlaine", "fr"], ["Antonio", "Gramsci", "it"], ["Georg", "Lukacs", "hu"], ["Franz", "Kafka", "hu"], ["Arthur", "Rimbaud", "fr"], ["Gérard", "de Nerval", "fr"], ]; for (const [i, value] of authors.entries()) { console.log(`${value[0]}, ${value[1]} (${value[2]})`); } console.log("---------"); console.log("while loop over array") var i = 0 while (i < authors.length) { console.log(`${authors[i][0]}, ${authors[i][1]} (${authors[i][2]})`); i++; } console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="const_var_let">Const, var et let</h2> <div class="sectionbody"> <div class="paragraph"> <p>07_const_var_let.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * const X var X let */ //var x du if n'est pas confiné au scope du if const varTest = () => { var x = 1; console.log(x); console.assert(x === 1); if (true) { var x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x !== 1); console.assert(x === 2); } varTest(); console.log("---------"); //var x est global à tous les fichier js //chargés dans la page html //var x issue du fichier 1_start.js //ligne 46 console.log(x); console.assert(x === 20); console.log("---------"); //premier let x est confiné au scope de la fonction //le let x du if est confiné au scope du if const letTest = () => { let x = 1; console.log(x); console.assert(x === 1); if (true) { let x = 2; console.log(x); console.assert(x === 2); } console.log(x); console.assert(x === 1); console.assert(x !== 2); } letTest(); console.log("---------"); /** * const: déclare un emplacement mémoire non réattribuable * c'est modifiable pour un array, * mais non réinitialisable; * ex: * const arr = [25, 27, 29] * arr = [5, 7] //impossible * arr[0]=20 // possible * ex: * const n = 1; * n = 3; //impossible */ const arr = [25, 27, 29] console.table(arr); arr[0] = 20 // possible console.table(arr); arr.pop() console.table(arr); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="rest_and_spread_operators">Rest et spread operators</h2> <div class="sectionbody"> <div class="paragraph"> <p>08_rest_and_spread_operators.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Opérateur de rest: * const add = (...operandes) => a + b; * ou avec parametres avec valeur par défaut * const add = (a=0, b=0, ...operandes) => a + b; */ /** * spread opérateur: * récupère l'ensemble des elements d'une collection, * dans un array */ const user_ages = [25, 56, 12, 58, 41, 62, 26]; const max_user_age = Math.max(...user_ages); const min_user_age = Math.min(...user_ages); console.assert(max_user_age == 62); console.assert(min_user_age == 12); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="destructuring">Destructuring</h2> <div class="sectionbody"> <div class="paragraph"> <p>09_destructuring.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="import_export">Import et export de modules</h2> <div class="sectionbody"> <div class="paragraph"> <p>10_module_import_export.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" 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="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">//sum const sum = (x, y) => x + y; // subtraction const minus = (x, y) => x - y; // multiplication const times = (x, y) => x * y; // division const div = (x, y) => x / y; // remainder: reste de la division euclidiene const rem = (x, y) => x % y; // log sum const sum_log = (x, y) => console.log(sum(x, y)); // log subtraction const minus_log = (x, y) => console.log(minus(x, y)); // log multiplication const times_log = (x, y) => console.log(times(x, y)); // log division const div_log = (x, y) => console.log(div(x, y)); // log remainder const rem_log = (x, y) => console.log(rem(x, y)); export { sum, minus, times, div, rem, sum_log, minus_log, times_log, div_log, rem_log };</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> <div class="sect1"> <h2 id="classes">Utilisation des classes</h2> <div class="sectionbody"> <div class="paragraph"> <p>11_classes.js</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">/** * Utilisation des classes */ //creation d'un objet class Account { constructor(username) { this.username = username; } }; const acc1 = new Account("cheroliv"); console.table(acc1); console.assert(acc1.username === "cheroliv"); console.log("---------"); //création d'un objet et ajout de getter et setter(accesseurs) class AccountInfo { constructor(username) { this._username = username; } get username() { return this._username; } /** * @param {(arg0: string) => void} new_username */ set new_username(new_username) { this._username = new_username; } }; const acc_info1 = new AccountInfo("cheroliv"); console.table(acc_info1); //accés au membre _username avec le getter username() console.assert(acc_info1.username === "cheroliv"); //update la valeur username de acc_info1 avec le setter acc_info1.new_username = "imrandeh"; console.assert(acc_info1.username === "imrandeh"); console.log("---------");</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc_js"><span class="underline">Intro Javascript</span></a></p> </div> </div> </div> https://cheroliv.com/blog/2022/0054_memo_cadrage_post.html Sat, 31 Dec 2022 00:00:00 +0000 blog/2022/0054_memo_cadrage_post.html <div class="sect1"> <h2 id="_pengaturan_bingkai">pengaturan bingkai</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_bengkel_1_vision">Bengkel 1: Vision</h3> <div class="sect3"> <h4 id="_pola_qqoqcp_siapa_apa_di_mana_kapan_bagaimana_mengapa">Pola “QQOQCP” – Siapa, Apa, Di mana, Kapan, Bagaimana, Mengapa</h4> </div> <div class="sect3"> <h4 id="_2_papan_visi_produk">2. Papan Visi Produk</h4> <div class="sect4"> <h5 id="_kelompok_target">kelompok target</h5> <div class="paragraph"> <p>Siapa pengguna yang menggunakan produk atau penawaran ? (langsung, tidak langsung)</p> </div> </div> <div class="sect4"> <h5 id="_kebutuhan">Kebutuhan</h5> <div class="paragraph"> <p>Apa yang menjadi 5 kebutuhan utama pengguna kunci aplikasi?</p> </div> </div> <div class="sect4"> <h5 id="_produk">Produk</h5> <div class="paragraph"> <p>Apa proposisi nilai saya? Apa 5 fitur utama produk yang memungkinkan untuk menjawab pada kebutuhan</p> </div> </div> <div class="sect4"> <h5 id="_tujuan_bisnis">Tujuan Bisnis</h5> <div class="paragraph"> <p>Apa kriteria keberhasilan ?</p> </div> </div> <div class="sect4"> <h5 id="_visi">visi</h5> <div class="paragraph"> <p>Ketika 4 kolom sudah lengkap, Anda harus mengisi bagian visi dari Product Vision Papan dalam satu kalimat lengkap.</p> </div> </div> </div> </div> <div class="sect2"> <h3 id="_bengkel_2_personaperjalanan_pengguna">Bengkel 2: Persona/Perjalanan Pengguna</h3> <div class="ulist"> <div class="title">Tentukan untuk setiap persona perjalanan pengguna:</div> <ul> <li> <p>Siapa yang akan menggunakan layanan saya? (Target)</p> </li> <li> <p>Apa yang ingin dia lakukan ? (But)</p> </li> <li> <p>Bagaimana dia akan melakukannya? (Perjalanan Pengguna)</p> </li> </ul> </div> </div> <div class="sect2"> <h3 id="_workshop_3_zoning_storyboard_sitemap">Workshop 3: Zoning, Storyboard, Sitemap</h3> <div class="sect3"> <h4 id="_1_zonasi">1. Zonasi</h4> </div> <div class="sect3"> <h4 id="_2_papan_cerita">2. Papan Cerita</h4> </div> <div class="sect3"> <h4 id="_3_peta_situs">3. Peta Situs</h4> </div> </div> <div class="sect2"> <h3 id="_workshop_4_wireframemoodboard">Workshop 4: Wireframe/Moodboard</h3> <div class="sect3"> <h4 id="_wireframes">Wireframes</h4> </div> <div class="sect3"> <h4 id="_2_papan_suasana">2. Papan suasana</h4> </div> </div> <div class="sect2"> <h3 id="_workshop_5_pemetaan_cerita_cerita_pengguna">Workshop 5: Pemetaan Cerita/ Cerita Pengguna</h3> <div class="sect3"> <h4 id="_story_mapping_prioritas_us">Story mapping (prioritas US)</h4> </div> <div class="sect3"> <h4 id="_sebagai_type_dutilisateur_saya_ingin_un_objectif_agar_une_raison">Sebagai <type d’utilisateur>, saya ingin <un objectif> agar <une raison>.</h4> </div> </div> <div class="sect2"> <h3 id="_lokakarya_6_daftar_tugas">Lokakarya 6: Daftar tugas</h3> <div class="paragraph"> <p><a href="https://www.atlassian.com/fr/agile/scrum/backlogs">tumpukan pekerjaan</a></p> </div> </div> <div class="sect2"> <h3 id="_workshop_7_teknik_dan_arsitektur">Workshop 7: Teknik dan Arsitektur</h3> </div> </div> </div> https://cheroliv.com/blog/2022/0053_memo_kotlin_post.html Sun, 29 May 2022 00:00:00 +0000 blog/2022/0053_memo_kotlin_post.html <div class="sect1"> <h2 id="_tautan_yang_baik">Tautan yang baik</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://play.kotlinlang.org/">kotlinlang playground</a>+</p> </div> <div class="paragraph"> <p><a href="https://arrow-kt.io/">arrow.kt</a><br></p> </div> <div class="paragraph"> <p><a href="https://arkivanov.github.io/MVIKotlin/">MVI:Model Tampilan Inten</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/">mengurai</a>+</p> </div> </div> </div> <div class="sect1"> <h2 id="_berbagai_potongan_kode">Berbagai potongan kode</h2> <div class="sectionbody"> <div class="sect2"> <h3 id="_map_reduce">map reduce</h3> <div class="paragraph"> <p>Mengonversi daftar bite menjadi daftar string dan meringkas daftar string<br> dalam sebuah string yang berisi penggabungan Bagaimana mencatat permintaan yang dikirim(requestBodyContent:byte[])</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">log.info( requestBodyContent!!.map { it.toInt().toChar().toString() } .reduce { request: String, s: String -> request + s } )</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_enum_dan_kelas_yang_disegel">enum dan kelas yang disegel</h3> <div class="paragraph"> <p>post:<a href="0038_training_kotlin_enum_sealed_class_post">pelatihan kotlin enum kelas tertutup</a></p> </div> </div> <div class="sect2"> <h3 id="_interface_fungsional_dan_referensi_metode">interface fungsional dan referensi metode</h3> <div class="paragraph"> <p>Kita dapat mengubah sebuah entitas menjadi model domain dari dto dengan metode referensi (gaya fungsional - java 8)</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun findAllByLoginNot( pageable:Pageable, login:String) :Page<UserDto> { return userDao.findAllByLoginNot( pageable, login).map(::fromEntity) }</code></pre> </div> </div> <div class="paragraph"> <p>sebuahhttps://stackoverflow.com/a/22245383/837404[penjelasan yang baik]</p> </div> </div> <div class="sect2"> <h3 id="_menangkap_output_standar">Menangkap output standar</h3> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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: () -> Unit) = (1..this).forEach { _ -> fn() } }</code></pre> </div> </div> </div> <div class="sect2"> <h3 id="_apa_perbedaan_di_kotlin_antara_apply_run_let_also_use_dan_with">Apa perbedaan di Kotlin antara apply, run, let, also, use dan with?</h3> <div class="paragraph"> <p><strong>Perbandingan fungsi Kotlin dan Penggunaan Bentuk Lambda Reference</strong></p> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menerapkan">menerapkan</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Pendahuluan Fungsi Kotlin`apply`, <code>run</code>, <code>let</code>, <code>also</code>, <code>use</code>, et `with`Menyediakan cara berbeda untuk memproses objek. Masing-masing memiliki kasus penggunaan dan perilaku masing-masing. Selain itu, bentuk lambda reference memungkinkan kode menjadi lebih mudah dibaca dan dapat digunakan kembali dengan merujuk pada fungsi lambda yang sudah ada.</div> <p>Fungsi`apply`digunakan untuk mengonfigurasi sebuah objek selama pembuatannya. Ia mengembalikan objek yang dipanggilnya.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val someObject = SomeClass().apply(::configureObject)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_run">run</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fungsi`run`digunakan untuk mengeksekusi blok kode pada sebuah objek dan mengembalikan hasil dari blok kode.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val result = someObject.run(::someFunction)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Fungsi`let`digunakan untuk menjalankan blok kode pada objek dan mengembalikan hasil dari blok kode.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val result = someObject.let(::processObject)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_juga">juga</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fungsi`also`digunakan untuk melakukan tindakan tambahan pada sebuah objek dan mengembalikan objek yang dipanggilnya.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">someObject.also(::performAdditionalAction)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>fungsi`use`digunakan untuk bekerja dengan sumber daya yang harus ditutup setelah penggunaan. Ia memanggil secara otomatis fungsi`close`di akhir blok.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">someResource.use(::useResource)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">someResource.use { // travailler avec la ressource }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_dengan">dengan</h2> <div class="sectionbody"> <div class="paragraph"> <p>Fungsi`with`digunakan untuk memanggil beberapa metode pada sebuah objek tanpa mengulangi namanya dan mengembalikan hasil dari ekspresi terakhir.</p> </div> <div class="paragraph"> <p>Contoh dengan referensi lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">val result = with(someObject, ::processWithObject)</code></pre> </div> </div> <div class="paragraph"> <p>Contoh dengan lambda :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Menggunakan bentuk referensi lambda atau blok`{}`, Anda dapat mengenkapsulasi logika ke dalam fungsi terpisah, sehingga meningkatkan kejelasan dan penggunaan kembali kode.</p> </div> </div> </div> <div class="sect1"> <h2 id="_let_function_di_kotlin">let Function di Kotlin</h2> <div class="sectionbody"> <div class="paragraph"> <div class="title">Apakah let mengembalikan objek dengan efek samping yang diterapkan padanya atau dalam kondisi awal input tergantung pada let?</div> <p>Fungsi`let`Di Kotlin digunakan untuk melakukan operasi pada objek dan mengembalikan hasil yang berbeda. Namun, penting untuk dicatat bahwa fungsi`let`tidak mengubah keadaan awal objek yang dipanggil</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>Tanda tangan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock"><code>inline fun <T, R> T.let(block: (T) → 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>penggunaan</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Fungsi`let`sering digunakan untuk menerapkan transformasi pada sebuah objek dan mendapatkan hasil berdasarkan transformasi tersebut.</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>Hasil</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Nilai yang dikembalikan oleh fungsi`let`adalah hasil dari ekspresi lambda yang diteruskan sebagai argumen, biasanya hasil dari operasi yang dilakukan pada objek.</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>Efek tepi</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Meskipun fungsi`let`dia dapat menimbulkan efek samping pada objek ketika digunakan dalam ekspresi lambda, dia tidak mengubah keadaan awal objek itu sendiri.</p></td> </tr> </tbody> </table> <div class="paragraph"> <p>Sebab itu, fungsi`let`adalah cara elegan untuk melakukan operasi pada sebuah objek sekaligus mendapatkan hasil yang diturunkan, sekaligus menjaga integritas objek aslinya.</p> </div> </div> </div> https://cheroliv.com/blog/2022/0052_memo_jvm_post.html Sat, 28 May 2022 00:00:00 +0000 blog/2022/0052_memo_jvm_post.html <div class="sect1"> <h2 id="toc">table des matières</h2> <div class="sectionbody"> <div class="olist arabic"> <ol class="arabic"> <li> <p><a href="#char">chaines de caractères et caractères</a></p> </li> <li> <p><a href="#math">nombres et math</a></p> </li> <li> <p><a href="#date">dates et heures</a></p> </li> <li> <p><a href="#java8date">dates et heures java8</a></p> </li> <li> <p><a href="#arrCol">tableaux et collections</a></p> </li> <li> <p><a href="#sysProp">System.Properties</a></p> </li> <li> <p><a href="#threads">Threads</a></p> </li> <li> <p><a href="#regex">Expressions Régulières</a></p> </li> </ol> </div> </div> </div> <div class="sect1"> <h2 id="char">chaines de caractères et caractères</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.text.Collator import java.util.* import kotlin.test.* class StringsTest { @Test fun `chaines de caractères et caractères`() { //inférence de type val s = "C'est" assertEquals("C'est", s) //concaténation val t: String = s + " le moment." assertEquals("C'est le moment.", t) // StringBuilder val t1: String = s + buildString { append(" le moment.") } assertEquals("C'est le moment.", t1) //interpolation val t2 = "$s le moment." assertEquals("C'est le moment.", t2) //multiligne chaine de caractères val t3 = """$s le moment.""" assertEquals("C'est le moment.", t3) //conversion de type val t4 = t + " " + 23.4 assertEquals("C'est le moment. 23.4", t4) val t5 = 'C'.toString() assertEquals("C", t5) //taille de la chaine de caractères assertEquals(16, t.length) //sous-chaine d'une chaine de caractères //retourne une chaine de caractères contenant, //les caractères aux positions x à y-1 //sub = t.substring(x, y) //t = "C'est le moment." //retourne les caractères 6 et 7 var sub = t.substring(6, 8) assertEquals("le", sub) //retourne les caractères 0 à 4 sub = t.substring(0, 5) assertEquals("C'est", sub) //la longueur d'une sous-chaine est toujours égale (y-x) val numChars = sub.length assertEquals(5 - 0, numChars) //extraction des caractères d'une chaine assertEquals('e', t.elementAt(2)) assertEquals('e', t.get(2)) assertEquals('e', t[2]) //conversion d'une chaine en tableau de caractères val ca = t.toCharArray() assertEquals(t.length, ca.size) t.mapIndexed { index, char -> assertEquals(char, ca[index]) } //place les 4 premiers caractères de t1 //dans le tableau ca a la position 2 (t as java.lang.String).getChars( /* srcBegin = */ 0, /* srcEnd = */ 3, /* dst = */ ca, /* dstBegin = */ 1 ) assertEquals("CC'et le moment.", String(ca)) //colle tous les caractères dans un meme string assertEquals("CC'et le moment.", ca.concatToString()) //to lower case assertEquals("c'est le moment.", t.toLowerCase()) assertEquals("c'est le moment.", t.lowercase()) //to upper case assertEquals("C'EST LE MOMENT.", t.toUpperCase()) assertEquals("C'EST LE MOMENT.", t.uppercase()) //comparaison de chaines de caractères //t = "C'est le moment." assertFalse(t.equals("hello")) assertFalse(t == "hello") //ignore la casse assertTrue(t.equalsIgnoreCase("C'EST LE MOMENT.")) assertTrue(t.equals("C'EST LE MOMENT.", ignoreCase = true)) //démarre par assertTrue(t.startsWith("C'est")) //se finit par assertTrue(t.endsWith("le moment.")) //compareTo //retourne une valeur < 0, car s est //alphabétiquement avant "N'est" val r1: Int = s.compareTo("N'est") assertTrue(r1 < 0) //variante ignorant la casse val r1Prime: Int = (s as java.lang.String).compareToIgnoreCase("n'est") assertTrue(r1Prime < 0) //retourne 0 si les chaines sont equivalente val r2: Int = s.compareTo("C'est") assertEquals(0, r2) //retourne une valeur > 0 car s vient apres "B'est" val r3: Int = s.compareTo("B'est") assertTrue(r3 > 0) //Recherche de caractères et de sous-chaines de caractères //recherche de caractères //position du premier caractères 't' var pos = t.indexOf('t') assertEquals(4, pos) //position du suivant pos = t.indexOf('t', pos + 1) assertEquals(14, pos) //retour d'érreur -1 si absence de suivant pos = t.indexOf('t', pos + 1) assertEquals(-1, pos) //position du dernier 't' dans la chaine: 14 pos = t.lastIndexOf('t') assertEquals(14, pos) //recherche de 't' vers l'arrière a partir du caractères 13 pos = t.lastIndexOf('t', pos - 1) assertEquals(4, pos) //recherche de sous-chaines //retourne 2 pos = t.indexOf("est") assertEquals(2, pos) //"est" n'apparait qu'une seule fois: retourne -1 pos = t.indexOf("est", pos + 1) assertEquals(-1, pos) //recherche d'une sous-chaine depuis l'arrière //t = "C'est le moment." //retourne 6 pos = t.lastIndexOf("le ") assertEquals(6, pos) //extrait depuis la position 9, //renvoi toute la chaine après "le " val noun = t.substring(pos + 3) assertEquals(-1, noun.indexOf("le ")) //remplacement de toutes les instances d'un caractère //par un autre caractère //ne fonctionne que avec les caractères, pas les chaines val exclaim: String = t.replace('.', '!') assertEquals('!', exclaim.get(exclaim.length - 1)) assertEquals(exclaim.length - 1, exclaim.indexOf('!')) assertEquals(-1, exclaim.indexOf('.')) //suppression des espaces blancs //au début et à la fin d'une chaine val noextraspaces = t.trim() assertNotEquals(' ', noextraspaces.get(0)) assertNotEquals(' ', noextraspaces.get(noextraspaces.length - 1)) //extraction des instances uniques de chaines de caractères //avec intern() val s1 = s.intern() assertEquals(s, s1) val s2 = "C'est".intern() assertEquals("C'est", s2) assertEquals(s1, s2) //StringBuilder pour manipuler les caractères d'une chaine de caractères //crée un tampon StringBuilder à partir d'une chaine de caractères val b = StringBuilder("N'est") //extrait et définit des caractères individuel du tampon StringBuilder //le caractères à l'index 0 val c: Char = b.get(0) assertEquals('N', c) //modifier le premier caractère de la chaine b.setCharAt(0, 'C') assertEquals(s, b.toString()) //ajouter des données à un StringBuilder b.append(' ') b.append("le moment.") b.append(23) //insère des chaines de caractères ou autre dans le StringBuilder b.insert(6, "pas ") assertEquals("C'est pas le moment.23", b.toString()) //remplace un sous ensemble de caractères //avec une chaine de caractères donnée b.replace(2, 9, "est") assertEquals("C'est le moment.23", b.toString()) //supprime les caractères b.delete(15, 18) assertEquals("C'est le moment", b.toString()) b.deleteCharAt(2) assertEquals("C'st le moment", b.toString()) //insert à la postion 2 et décale reste à droite(sans perte de données) b.insert(2, 'e') //tronque la taille de la donnée b.setLength(5) assertEquals("C'est", b.toString()) //inverse les caractères de la chaine b.reverse() assertEquals("tse'C", b.toString()) //écrase le StringBuilder, pret à etre réutilisé b.setLength(0) assertEquals("", b.toString()) //java.util.StringTokenizer pour fragmenter une chaine //de caractères en un ensemble de mots var st = StringTokenizer(t) //nb d'items encore présentent dans la file assertEquals(3, st.countTokens()) //est ce que il y a encore des items dans la file assertTrue(st.hasMoreTokens()) //récupérer le token courrant assertEquals("C'est", st.nextToken()) assertEquals("le", st.nextToken()) assertEquals("moment.", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //extraire des occurences de mots délimités //par des caractères autres que des expaces. val str = "a:b:c:d" st = StringTokenizer(str, ":") assertEquals(4, st.countTokens()) assertTrue(st.hasMoreTokens()) assertEquals("a", st.nextToken()) assertEquals("b", st.nextToken()) assertEquals("c", st.nextToken()) assertEquals("d", st.nextToken()) assertFalse(st.hasMoreTokens()) assertEquals(0, st.countTokens()) //text="C'est le moment." val text = t.toCharArray() var p = 0 //sauter les espaces de tete //pour ramener p à la position du premier caractère imprimable while ((p < text.size) && (Character.isWhitespace(text[p])) ) p++ assertEquals(0, p) assertEquals("C'est le moment.", text.concatToString()) //met le premier mot du texte en majuscule while (p < text.size && Character.isLetter(text[p])) { text[p] = Character.toUpperCase(text[p]) p++ } assertEquals(1, p) assertEquals('C', text[0]) assertTrue(Character.isUpperCase(text[0])) assertFalse(Character.isLetter(text[1])) //comparer des chaines de caractères // avec les contrainte la locale système val col = Collator.getInstance() //le résulat est négatif car chica //est avant chico dans l'ordre alphabétique assertTrue(col.compare("chica", "chico") < 0) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="math">nombres et math</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.math.BigInteger import java.security.SecureRandom import java.text.NumberFormat import java.util.* import kotlin.test.* class NumbersMathTest { @Test fun `Nombres et Math`() { //Constantes utiles Byte.MIN_VALUE Byte.MAX_VALUE Short.MIN_VALUE Short.MAX_VALUE Float.MIN_VALUE Float.MAX_VALUE Math.PI Math.E val s = "-42" //conversion de chaine de caractères //vers un nombre, si possible. var b: Byte = java.lang.Byte.parseByte(s) var sh: Short = java.lang.Short.parseShort(s) var i: Int = java.lang.Integer.parseInt(s) var l: Long = java.lang.Long.parseLong(s) var f: Float = java.lang.Float.parseFloat(s) var d: Double = java.lang.Double.parseDouble(s) //valeur exacte val f_exac = java.lang.Float.valueOf(s) val d_exac = java.lang.Double.valueOf(s) //les routines de conversions entière gérent //les nombres dans diverses bases. //1011 en binare est égal a 11 en base dix b = java.lang.Byte.parseByte("1011", 2) assertEquals(11, b) //ff en base 16(hexa) est égal à 255 en base dix. sh = java.lang.Short.parseShort("ff", 16) assertEquals(255, sh) //la méthode valueOf() peut gérer des bases arbitraires. i = java.lang.Integer.valueOf("egg", 17).toInt() assertEquals(4334, i) //la méthode decode() gére les representations octale, //décimal, hexadécimal, en fonction du préfixe numérique //de la chaine de caractères //un 0 de tete signifie base 8 //un 0x de tete signifie base 16 //les autres sont en base 10 val sho = java.lang.Short.decode("0377") //la classe Integer peut convertir les nombres //en diverses chaines de caractères. val decimal = java.lang.Integer.toString(42) assertEquals("42", decimal) val decimal_ = 42.toString() assertEquals("42", decimal_) val binary = java.lang.Integer.toBinaryString(42) assertEquals("101010", binary) val octal = java.lang.Integer.toOctalString(42) assertEquals("52", octal) val hex = java.lang.Integer.toHexString(42) assertEquals("2a", hex) val base36 = java.lang.Integer.toString(42, 36) assertEquals("16", base36) val base36_ = 42.toString(36) assertEquals("16", base36_) //java.text.NumberFormat effectue la conversion // d'une maniere spécifique aux parametres locaux //sans parametre prend la local systeme comme reference val nf = NumberFormat.getNumberInstance(Locale.FRANCE) val formatted_number = nf.format(9876543.21) assertNotEquals("9876543.21", formatted_number) //parse la chaine de caractères en fonction des parametres locaux(fr) val n = nf.parse("1234567,89") assertEquals(1234567.89, n) //les valeurs monétaires sont parfois formaté // d'une maniere differente des nombres val money_format = NumberFormat.getCurrencyInstance(Locale.FRANCE) assertEquals("123,40 €", money_format.format(1234.56)) //java.lang.Math d = Math.toRadians(27.0) d = Math.cos(d) d = Math.sqrt(d) d = Math.log(d) d = Math.exp(d) d = Math.pow(10.0, d) d = Math.atan(d) d = Math.toDegrees(d) //arrondi au dessus val up = Math.ceil(d) //arrondi au dessous val down = Math.floor(d) //arrondi au plus près val nearest = Math.round(d) //java.lang.Math.Random() val r = Math.random() assertTrue(r >= 0.0 && r < 1.0) //créé un nouvel objet Random, en l'initialisant //avec l'heure courante val generator = java.util.Random(System.currentTimeMillis()) //prochaine valeur aléatoire de taille double d = generator.nextDouble() assertTrue((d >= 0.0) && (d < 1.0)) //prochaine valeur aléatoire de taille float f = generator.nextFloat() assertTrue((f >= 0.0) && (f < 1.0)) //prochaine valeur aléatoire de taille long l = generator.nextLong() assertTrue( (Math.abs(l) <= Long.MAX_VALUE) && (Math.abs(l) >= 0) ) //prochaine valeur aléatoire de taille int i = generator.nextInt() assertTrue( (Math.abs(i) <= java.lang.Integer.MAX_VALUE) && (Math.abs(i) >= 0) ) val limit = 100 //prochaine valeur aléatoire de taille int //la limit max du ramdom est ramené à limit //et la limit min est 0 i = generator.nextInt(limit) assertTrue(i in 0 until limit) //prochaine valeur aléatoire de taille booléen val bool = generator.nextBoolean() assertNotNull(bool) //valeur moyenne 0.0, déviation standard 1.0 d = generator.nextGaussian() //randoms bytes //rempli un tableau avec des valeurs byte aléatoires val b_arr = ByteArray(128) generator.nextBytes(b_arr) b_arr.iterator().forEachRemaining { assertTrue( it <= Byte.MAX_VALUE && it >= Byte.MIN_VALUE ) } //java.security.SecureRandom pour les nombres aléatoires //utilisé en cryptographie val secure_generator = SecureRandom() //le générateur génère sa propre tete de liste sur 16 octets secure_generator.setSeed(secure_generator.generateSeed(16)) val sec_b_arr = ByteArray(128) secure_generator.nextBytes(sec_b_arr) sec_b_arr.iterator().forEachRemaining { assertTrue( it <= java.lang.Byte.MAX_VALUE && it >= java.lang.Byte.MIN_VALUE ) } //java.math.BigDecimal java.math.BigInteger //pour travailler sur des grandes valeurs. //calcule de la factorielle de 1000 var total = BigInteger.valueOf(1) (2..1000).forEach { total = total.multiply(BigInteger.valueOf(it.toLong())) } assertTrue(total.toString().length == 2568) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="date">dates et heures</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.text.DateFormat import java.text.SimpleDateFormat import java.time.Instant import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertTrue class DatesHoursTest { @Test fun `Dates et heures`() { //l'heure courante en millisecondes val t0 = System.currentTimeMillis() //une autre représentation de la meme information val now = java.util.Date() //converti un objet java.util.Date en une valeur long. val t1 = now.getTime() assertTrue(t1 > Instant.EPOCH.toEpochMilli()) //kotlin property access syntaxe style val t1_prime = now.time //java.text.DateFormat //affiche la date d'aujourd'hui en utilisant le format //par défaut des parametres locaux val defaultDateFormat = DateFormat.getDateInstance() //personnalisation du formatage et de la locale val df = DateFormat.getDateInstance(DateFormat.LONG, Locale.FRANCE) val localeFormattedDate = df.format(Date()) //constantes pour les styles de pattern de formatage assertEquals(0, DateFormat.FULL) assertEquals(1, DateFormat.LONG) assertEquals(2, DateFormat.MEDIUM) assertEquals(3, DateFormat.SHORT) assertEquals(2, DateFormat.DEFAULT) //utilise pour l'heure un format abrégé avec //des parametres personnalisés val tf = DateFormat.getTimeInstance( DateFormat.SHORT, Locale.FRANCE ) //affiche l'heure en utilisant le format de tf val shortTime = tf.format(Date()) assertTrue(shortTime.contains(':')) //affiche la date et l'heure en utilisant //un format détaillé val longTimeStamp = DateFormat.getDateTimeInstance( DateFormat.FULL, DateFormat.FULL, ) assert(longTimeStamp.format(Date()).isNotEmpty()) //utilisez java.text.SimpleDateFormat //pour définir votre propre modele de formatage val customFormat = SimpleDateFormat("yyyy.MM.dd") assertEquals(10, customFormat.format(Date()).length) //DateFormat peut également parser les date contenu dans des chaines val kotlinAnnounceDate = customFormat.parse("2019.05.08") //la class Date et sa représentation en millisecondes //n'autorise qu'une forme trés simple d'arithmétique //on ajoute 3 600 000 millisecondes à l'heure courante val anHourFromNow = now.getTime() + (60 * 60 * 1000) assert(anHourFromNow > now.getTime()) //java.util.Calendar //pour manipuler les dates et heures de facon plus sophistiquée //instanciation selon les parametres locaux //et le fuseau horaire local val calendar = Calendar.getInstance() //initialisation du calendrier à la date de maintenant calendar.setTime(now) //détermine le jour de l'année auquel correspond la date courante val dayOfYear = calendar.get(Calendar.DAY_OF_YEAR) assert(dayOfYear < 366) //réinitialisation de la date courante calendar.set(2019, Calendar.MAY, 8) assertEquals(4, calendar.get(Calendar.DAY_OF_WEEK)) //à quel jour du mois correspond le deuxieme mercredi de mai 2019 //set(key,value) calendar.set(Calendar.YEAR, 2019) calendar.set(Calendar.MONTH, Calendar.MAY) calendar.set(Calendar.DAY_OF_WEEK, Calendar.WEDNESDAY) //defini à quel (n=2) semaine du mois est la date calendar.set(Calendar.DAY_OF_WEEK_IN_MONTH, 2) //extrait le jour du mois val dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH) assertEquals(8, dayOfMonth) calendar.setTime(kotlinAnnounceDate) //ajoute 30j à la date calendar.add(Calendar.DATE, 30) val monthAfter = calendar.getTime() //date est elle avant ou apres? assertTrue(monthAfter.after(kotlinAnnounceDate)) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="java8date">dates et heures java8</h2> <div class="sectionbody"> <div class="paragraph"> <p>Java 8 introduit le nouveau package <strong><em>java.time</em></strong>, qui contient les classes de base qui<br> la plupart des développeurs travaillent avec. Il contient également quatre sous-packages:<br></p> </div> <div class="paragraph"> <p><strong><em>java.time.chrono</em></strong><br> Chronologies alternatives que les développeurs utilisant des systèmes de calendrier qui ne<br> suivre la norme ISO va interagir avec. Un exemple serait un cal japonais<br> système endurant.<br> <strong><em>java.time.format</em></strong><br> Contient le DateTimeFormatter utilisé pour convertir les objets de date et d’heure<br> dans une chaîne et également pour analyser les chaînes dans les objets de données et de temps.<br> <strong><em>java.time.temporal</em></strong><br> Contient les interfaces requises par les classes de date et d’heure de base et également<br> des abstractions (telles que des requêtes et des ajusteurs) pour des opérations avancées avec des dates.<br> <strong><em>java.time.zone</em></strong><br> Classes utilisées pour les règles de fuseau horaire sous-jacentes;<br> la plupart des développeurs n’auront pas besoin ce paquet.<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="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.time.LocalDate import java.time.Month import java.time.Period import java.time.YearMonth import java.time.temporal.* import java.util.HashMap import java.util.stream.Collectors import kotlin.test.Test class DatesHoursJava8Test { class BirthdayDiary { private val birthdays: MutableMap<String, LocalDate> init { birthdays = HashMap() } fun addBirthday( name: String, day: Int, month: Int, year: Int ): LocalDate { val birthday: LocalDate = LocalDate.of(year, month, day) birthdays[name] = birthday return birthday } fun getBirthdayFor(name: String): LocalDate? { return birthdays[name] } fun getAgeInYear(name: String, year: Int): Int { val period: Period = Period.between( birthdays[name], birthdays[name]!!.withYear(year) ) return period.getYears() } fun getFriendsOfAgeIn(age: Int, year: Int): Set<String> { return birthdays.keys.stream() .filter { p: String -> getAgeInYear(p, year) == age } .collect(Collectors.toSet()) } fun getDaysUntilBirthday(name: String): Int { val period: Period = Period.between( LocalDate.now(), birthdays[name] ) return period.getDays() } fun getBirthdaysIn(month: Month): Set<String> { return birthdays.entries.stream() .filter { (_, value): Map.Entry<String, LocalDate> -> value.getMonth() === month } .map<String> { (key): Map.Entry<String, LocalDate> -> key } .collect(Collectors.toSet()) } val birthdaysInCurrentMonth: Set<String> get() = getBirthdaysIn(LocalDate.now().getMonth()) val totalAgeInYears: Int get() = birthdays.keys.stream() .mapToInt { p: String -> getAgeInYear( p, LocalDate.now().getYear() ) } .sum() } //Les ajusteurs modifient les objets de date et d'heure. Supposons, par exemple, que nous voulions //renvoie le premier jour d'un trimestre qui contient un horodatage particulier : class FirstDayOfQuarter : TemporalAdjuster { override fun adjustInto(temporal: Temporal): Temporal? { val currentQuarter: Int = YearMonth.from(temporal) .get(IsoFields.QUARTER_OF_YEAR) return when (currentQuarter) { 1 -> LocalDate.from(temporal) .with(TemporalAdjusters.firstDayOfYear()) 2 -> LocalDate.from(temporal) .withMonth(Month.APRIL.value) .with(TemporalAdjusters.firstDayOfMonth()) 3 -> LocalDate.from(temporal) .withMonth(Month.JULY.value) .with(TemporalAdjusters.firstDayOfMonth()) 4 -> LocalDate.from(temporal) .withMonth(Month.OCTOBER.value) .with(TemporalAdjusters.firstDayOfMonth()) else -> null } } } enum class Quarter { FIRST, SECOND, THIRD, FOURTH } //Dans quel trimestre de l'année cette date se situe-t-elle ? class QuarterOfYearQuery : TemporalQuery<Quarter> { override fun queryFrom(temporal: TemporalAccessor): Quarter { val now = LocalDate.from(temporal) return if (now.isBefore(now.with(Month.APRIL).withDayOfMonth(1))) Quarter.FIRST else if (now.isBefore( now.with(Month.JULY) .withDayOfMonth(1) ) ) Quarter.SECOND else if (now.isBefore( now.with(Month.NOVEMBER) .withDayOfMonth(1) ) ) Quarter.THIRD else Quarter.FOURTH } } @Test fun `Dates et heures après java 8`() { val today = LocalDate.now() val currentMonth = today.month val firstMonthOfQuarter = currentMonth.firstMonthOfQuarter() val q = QuarterOfYearQuery() // Direct var quarter: Quarter? = q.queryFrom(LocalDate.now()) println(quarter) // Indirect quarter = LocalDate.now().query(q) println(quarter) val now = LocalDate.now() val fdoq: Temporal = now.with(FirstDayOfQuarter()) println(fdoq) } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="arrCol">tableaux et collections</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="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">package playground.programming import java.util.* import kotlin.test.Test import kotlin.test.assertEquals import kotlin.test.assertFalse import kotlin.test.assertTrue class ArrayCollectionTest { @Test fun `Tableaux, collections`() { //Tableau //java.util.Arrays définit d'utiles méthodes de manipulation de tableaux, //y compris de tri et de recherche au sein d'un tableau val intArray = arrayOf(10, 5, 7, -3) //tri le tableau Arrays.sort(intArray) var pos = Arrays.binarySearch(intArray, 7) //la valeur 7 est trouvé a l'index 2 assertEquals(2, pos) //12 pas trouvé retourne une valeur negative assert(Arrays.binarySearch(intArray, 12) < 0) //les tableaux peuvent également etre triés //et faire l'objet d'une recherche val stringArray = arrayOf("le", "moment", "c'est") assertEquals("c'est", stringArray[2]) assertEquals("le", stringArray[0]) assertEquals("moment", stringArray[1]) Arrays.sort(stringArray) assertEquals("c'est", stringArray[0]) assertEquals("le", stringArray[1]) assertEquals("moment", stringArray[2]) //Arrays.equals() compare tous les éléments de deux tableaux //Arrays.clone() copie tous les elements du tableau dans un autre stringArray.forEachIndexed { i, it -> assertEquals(it, stringArray.clone()[i]) } val data = ByteArray(100) //Arrays.fill() initialise tous les éléments des deux tableaux //initalise tous les éléments à -1 Arrays.fill(data, -1) data.forEach { assertEquals(-1, it) } //attribue aux éléments 5, 6, 7, 8 et 9 la valeur -2 Arrays.fill(data, 5, 10, -2) ((5 until (10 - 1))).forEach { assertEquals(-2, data[it]) } //récupère le type de data val type = data::class.java //est ce que data est un tableau? assertTrue(type.isArray()) //est ce que data est un tableau de byte assertEquals(Byte::class.java, type.getComponentType()) //Collection val s = java.util.HashSet<String>() s.add("test") assertTrue(s.contains("test")) assertFalse(s.contains("test2")) s.remove("test") assertFalse(s.contains("test")) val ss = TreeSet<String>() ss.add("b") ss.add("a") ss.iterator().forEach { assertTrue(it == "a" || it == "b") } //liste doublement chainée var dll: List<String> = LinkedList<String>() //plus efficace val l = java.util.ArrayList<String>() l.addAll(ss) l.addAll(1, ss) val obj = l.get(1) val obj_prime = l[1] assertEquals(obj, obj_prime) l.set(3, "nouvel élément") l.add("test") l.add(0, "test2") l.removeAt(1) l.remove("a") assertFalse(l.contains("a")) l.removeAll(ss) assertFalse(l.containsAll(ss)) assertFalse(l.isEmpty()) assertTrue(l.isNotEmpty()) val sublist = l.subList(1, 3) val elements = l.toArray() l.clear() val m = HashMap<String, Integer>() m.put("clé", Integer(42)) m["clé"] = Integer(42) val value: Integer = m.get("clé")!! assertEquals(Integer(42), value) m.remove("clé") assertTrue(m.isEmpty()) val keys = m.keys assertTrue(keys.isEmpty()) val set = HashSet<String>() set.add("key_1") set.add("key_2") set.add("key_3") val members = set.toArray() assertEquals(3, members.size) val list = ArrayList<String>() list.add("items1") list.add("items2") list.add("items3") val items = list.toArray() assertEquals(3, items.size) //trie et recherche d'éléments sur les collections list.add("clé") //en premier on trie Collections.sort(list) //en kotlin list.sort() //en deuxieme on cherche //retourne l'index du premier trouvé sinon -1 pos = Collections.binarySearch(list, "clé") assertEquals(0, pos) val list1 = mutableListOf(1, 2, 3, 4, 5) val list2 = mutableListOf<Int>(0, 0, 0, 0, 0) //d'autres méthodes intéressantes concernant Collections //copie list1 dans list2, 2e parametre dans 1er parametre Collections.copy(list2, list1) //comparaison de la copy avec filter assertTrue(list1.filterIndexed { i: Int, it: Int -> it != list2[i] }.isEmpty()) //comparaison de la copy avec map list1.mapIndexed { index: Int, it: Int -> assertEquals(it, list2[index]) } //rempli avec des 0 Collections.fill(list2, 0) assertTrue(list2.none { it != 0 }) //le maximum assertEquals(5, Collections.max(list1)) //le minimum assertEquals(1, Collections.min(list1)) //renverse Collections.reverse(list) listOf("items3", "items2", "items1", "clé").mapIndexed { i: Int, it: String -> assertEquals(it, list[i]) } //mélange la list Collections.shuffle(list) //retourne un ensemble immuable possédant un seul élément 0 Collections.singleton(0) //renvoi un emballage immuable autour d'une liste Collections.unmodifiableList(list) //renvoi un emballage synchronisé autour d'une map, ensemble clé valeur Collections.synchronizedMap(m) //java.util.Properties un est objet key value } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="sysProp">System.Properties</h2> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/essential/environment/sysprop.html">System.Properties doc officielle</a></p> </div> <div class="paragraph"> <p>voici un tableau de quelques propriétés intéressantes<br> Ces propriétés sont intéressantes pour avoir des informations<br> sur le système hôte de la 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>Meaning</strong></p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">file.separator</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Character that separates components of a file path. This is "/" on UNIX and "\" on 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">Path used to find directories and JAR archives containing class files. Elements of the class path are separated by a platform-specific character specified in the path.separator property.</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">Installation directory for 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 vendor name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">java.vendor.url</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">JRE vendor 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 version number</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">line.separator</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Sequence used by operating system to separate lines in text files</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">Operating system name</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">os.version</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Operating system version</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">Path separator character used 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">User working directory</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">user.home</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">User home directory</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">User account name</p></td> </tr> </tbody> </table> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="threads">Threads</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.text.DateFormat import java.util.* import kotlin.test.Test class ThreadsTest { @Test fun `threads test`() { //java.lang.Thread représente le thread fondamentale de l'API java //il existe deux manière de définir un thread //1) étendre la classe Thread ou une lambda en kotlin //2) implémenter l'interface Runnable, // puis passer une instance de cet objet Runnable au constructeur de Thread. val list1: List<Int> = List( size = 45, init = { (1..31).random() } ) println("list1$list1") //facon 1 val t = Thread { Collections.sort(list1) println("list1 sorted$list1") } t.start() val list2 = List( size = 45, init = { (1..31).random() } ) println("list2$list2") //facon 2 val sorter = BackgroundSorter(list2) sorter.start() //priorité des threads //tant qu'un thread de niveau de priorité supérieure n'est pas fini //alors celui de niveau inférieur ne peut s'exécuter //on définit un thread avec une priorité inférieur à la normale t.setPriority(Thread.NORM_PRIORITY - 1) //ici on définit un thread avec une priorité inférieur à la priorité //du thread courant t.setPriority(Thread.currentThread().getPriority() - 1) //Thread.yield() fait une pause pour laisser les autres threads de meme priorité s'exécuter } class BackgroundSorter(private val l: List<Int>) : Thread() { override fun run() { Collections.sort(l) println("list2 sorted$l") } } //pour l'arrêt du thread, plutôt qu'utiliser la fonction Thread.stop() // qui laisse la memoire dans un état non controlé. //utiliser la méthode tel que l'exemple pleaseStop() class DummyClock( private val df: DateFormat = DateFormat.getTimeInstance(DateFormat.MEDIUM), private var keepRunning: Boolean = true ) : Thread() { init { isDaemon = true start() } override fun run() { while (keepRunning) { println(df.format(Date())) try { sleep(1000) } catch (e: InterruptedException) { println(e.message) } } } fun pleaseStop() { keepRunning = false } } //java.util.Timer //java.util.TimerTask //ces classes permettent l'exécution de taches répétitives @Test fun `Timer et TimerTask test`() { DummyClock() } }</code></pre> </div> </div> <div class="paragraph"> <p><a href="#toc">table des matières</a></p> </div> </div> </div> <div class="sect1"> <h2 id="regex">Expressions Régulières</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">import java.util.* import java.util.regex.Matcher import java.util.regex.Pattern import java.util.stream.Collectors import kotlin.test.Test import kotlin.test.assertEquals class RegularExpressionsTest { @Test fun `expressions régulières`() { val p: Pattern = Pattern.compile("honou?r") val caesarUK = "For Brutus is an honourable man" val mUK: Matcher = p.matcher(caesarUK) assertEquals(true, mUK.find(), "Should matches UK spelling") val caesarUS = "For Brutus is an honorable man" val mUS: Matcher = p.matcher(caesarUS) assertEquals(true, mUS.find(), "Should matches US spelling") } @Test fun `expressions régulières plus complexes`() { //Notez que nous devons utiliser \\ car nous avons besoin d'un littéral \ //et Java utilise un seul \ comme caractère d'échappement var pStr = "\\d" // Un chiffre numérique var text = "Apollo 13" var p = Pattern.compile(pStr) var m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) pStr = "[a..zA..Z]" //N'importe quelle lettre p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) //N'importe quel nombre de lettres, qui doivent toutes être comprises entre 'a' et 'j' //mais peut-être en majuscule ou en minuscule. pStr = "([a..jA..J]*)" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) text = "abacab" //'a' suivi de quatre caractères quelconques, suivi de 'b' pStr = "a....b" p = Pattern.compile(pStr) m = p.matcher(text) print(pStr + " matches " + text + "? " + m.find()) println(" ; match: " + m.group()) } @Test fun `Quelles chaînes correspondent à la regex ?`() { val pStr = "\\d" // Un chiffre numérique val p = Pattern.compile(pStr) val ls: List<String> = Arrays.asList("Cat", "Dog", "Ice-9", "99 Luftballoons") val containDigits: List<String> = ls.stream() .filter(p.asPredicate()) .collect(Collectors.toList()) assert(containDigits.contains("Ice-9")) assert(containDigits.contains("99 Luftballoons")) assertEquals(2, containDigits.size) } }</code></pre> </div> </div> <div class="sect2"> <h3 id="_tableau_regex_metacharacters">Tableau regex metacharacters</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">Metacharacter</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">fonctionnalité</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Notes</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">?</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Caractère facultatif—zéro ou une instance</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">Zéro ou plus du caractère précédent</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">Un ou plusieurs des caractères précédents</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">Entre M et N instances du caractère précédent</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">Un chiffre</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">Un caractère non numérique</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">Un caractère de mot</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Chiffres, lettres et _</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">Un caractère sans mot</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">Un caractère d’espacement</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">Un caractère non blanc</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">Caractère de saut de ligne</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">Caractère de tabulation</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">Un caractère n’importe lequel</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">N’inclut pas la nouvelle ligne en Java</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tout caractère contenu entre crochets</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Appelé une classe de caractères</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">[^ ]</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Tout caractère non contenu entre crochets</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Appelé une classe de caractères inversée</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">( )</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Construire un groupe d’éléments de motif</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Appelé un groupe (ou groupe de capture)</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">|</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Définir des possibilités alternatives</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Implémente le OU logique</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">^</p></td> <td class="tableblock halign-left valign-top"><p class="tableblock">Début de chaîne $ Fin de chaîne</p></td> <td class="tableblock halign-left valign-top"></td> </tr> </tbody> </table> <div class="paragraph"> <p>compléter <a href="https://www.codeurjava.com/2015/05/les-expressions-regulieres-avec-regex.html">avec</a></p> </div> </div> </div> </div> https://cheroliv.com/blog/2022/0047_memo_gradle_post.html Mon, 23 May 2022 00:00:00 +0000 blog/2022/0047_memo_gradle_post.html <div id="toc" class="toc"> <div id="toctitle">Sommaire</div> <ul class="sectlevel1"> <li><a href="#_tampilkan_bantuan">Tampilkan bantuan</a></li> <li><a href="#_menetapkan_properti_sistem_jvm_d_system_prop">Menetapkan properti sistem JVM: `-D, --system-prop</a></li> <li><a href="#_menetapkan_properti_proyek_untuk_skrip_build_pmypropmyvalue">Menetapkan properti proyek untuk skrip build : `-Pmyprop=myvalue</a></li> <li><a href="#_menentukan_direktori_awal_gradle_nilai_defaultnya_adalah_direktori_saat_ini">Menentukan direktori awal Gradle. Nilai defaultnya adalah direktori saat ini.</a></li> <li><a href="#_mengoverride_properti_param_component_melalui_baris_perintah">Mengoverride properti 'param_component' melalui baris perintah:</a></li> <li><a href="#_menambahkan_folder_ke_source_set_dalam_proyek_biasa_dengan_kotlin_dsl">Menambahkan folder ke source-set dalam proyek biasa dengan kotlin dsl</a></li> <li><a href="#_menambahkan_folder_ke_source_set_dalam_proyek_android_dengan_groovy_dsl">Menambahkan folder ke source-set dalam proyek Android dengan Groovy DSL</a></li> <li><a href="#_menghindari_membangun_dan_menguji_sub_modul">Menghindari membangun dan menguji sub-modul</a></li> <li><a href="#_buat_arsip_sebuah_direktori">Buat arsip sebuah direktori</a></li> <li><a href="#_menampilkan_dependensi_build">Menampilkan dependensi build</a></li> <li><a href="#_contoh_penggunaan_reduce_penggabungan_satu_daftar_dalam_sebuah_string">Contoh penggunaan reduce : penggabungan satu daftar dalam sebuah string</a></li> <li><a href="#_mendapatkan_deskripsi_tugas_tertentu">Mendapatkan deskripsi tugas tertentu</a></li> <li><a href="#_untuk_menjalankan_tugas_dari_root_workingdir_maka_awali_tugas_dengan">Untuk menjalankan tugas dari root workingDir, maka awali tugas dengan `:</a></li> <li><a href="#_untuk_memulai_ulang_tugas_yang_gagal_gunakan_opsi_rerun_tasks">Untuk memulai ulang tugas yang gagal, gunakan opsi `--rerun-tasks</a></li> <li><a href="#_menjalankan_tugas_dalam_proyek_tertentu_dari_direktori_lain">Menjalankan tugas dalam proyek tertentu dari direktori lain</a></li> </ul> </div> <div class="sect1"> <h2 id="_tampilkan_bantuan">Tampilkan bantuan</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew --help</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menetapkan_properti_sistem_jvm_d_system_prop">Menetapkan properti sistem JVM: `-D, --system-prop</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew -Dmyprop=myvalue #ou ./gradlew --system-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menetapkan_properti_proyek_untuk_skrip_build_pmypropmyvalue">Menetapkan properti proyek untuk skrip build : `-Pmyprop=myvalue</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew -Pmyprop=myvalue #ou ./gradlew --project-prop myvalue</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menentukan_direktori_awal_gradle_nilai_defaultnya_adalah_direktori_saat_ini">Menentukan direktori awal Gradle. Nilai defaultnya adalah direktori saat ini.</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" 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="_mengoverride_properti_param_component_melalui_baris_perintah">Mengoverride properti 'param_component' melalui baris perintah:</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew -Pparam_component=CUSTOM_VALUE</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menambahkan_folder_ke_source_set_dalam_proyek_biasa_dengan_kotlin_dsl">Menambahkan folder ke source-set dalam proyek biasa dengan kotlin dsl</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_menambahkan_folder_ke_source_set_dalam_proyek_android_dengan_groovy_dsl">Menambahkan folder ke source-set dalam proyek Android dengan Groovy DSL</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_menghindari_membangun_dan_menguji_sub_modul">Menghindari membangun dan menguji sub-modul</h2> <div class="sectionbody"> <div class="paragraph"> <p>gradle membangun -x :excluded-module:memeriksa -x :excluded-module:merakit -x :excluded-module:membangun</p> </div> <div class="listingblock"> <div class="title">Memindahkan file</div> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_buat_arsip_sebuah_direktori">Buat arsip sebuah direktori</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">tasks.register<Tar>("tarWebapp") { dependsOn("moveWebappNpm") group = WEBAPP description = "tar webapp" doLast { setOf( "build", "target", "node_modules" ).forEach { dir -> exclude { it.name .dir } } archiveFileName.set("webapp.tar") destinationDirectory.set(File("${rootDir.absolutePath}$sep$WEBAPP_SRC")) } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menampilkan_dependensi_build">Menampilkan dependensi build</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">tasks.register("printDependencies") { description = "print project dependencies" group = WEBAPP doLast { println("${project.name} dependencies") mutableMapOf<String, Map<String, String>>( "buildDependencies" to buildDependencies, "domainDeps" to domainDeps, "domainTestDeps" to domainTestDeps, ).apply { putAll(appModules) } .forEach { module -> if (module.value.isNotEmpty()) { println("${module.key}:") module.value.forEach { println(dependency(it)) } println() } } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_contoh_penggunaan_reduce_penggabungan_satu_daftar_dalam_sebuah_string">Contoh penggunaan reduce : penggabungan satu daftar dalam sebuah string</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">tasks.register("printWebappSrc") { description = "print webapp sources" group = WEBAPP doLast { webAppSrc .reduce { acc, s -> "$acc\n\t$s" } .run { println("$WEBAPP_SRC: $this\n") } } }</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_mendapatkan_deskripsi_tugas_tertentu">Mendapatkan deskripsi tugas tertentu</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew -q help --task foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_menjalankan_tugas_dari_root_workingdir_maka_awali_tugas_dengan">Untuk menjalankan tugas dari root workingDir, maka awali tugas dengan `:</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew :foo</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_untuk_memulai_ulang_tugas_yang_gagal_gunakan_opsi_rerun_tasks">Untuk memulai ulang tugas yang gagal, gunakan opsi `--rerun-tasks</h2> <div class="sectionbody"> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew check --rerun-tasks</code></pre> </div> </div> </div> </div> <div class="sect1"> <h2 id="_menjalankan_tugas_dalam_proyek_tertentu_dari_direktori_lain">Menjalankan tugas dalam proyek tertentu dari direktori lain</h2> <div class="sectionbody"> <div class="paragraph"> <p>pilihan`-p` (ou <code>--project-dir</code>) memungkinkan menentukan jalur akses ke sebuah proyek Gradle dan mengeksekusi sebuah tugas di sana, bahkan jika direktori saat ini berbeda.</p> </div> <div class="paragraph"> <p>Contoh, untuk meluncurkan tugas`build`proyek yang terletak di`~/projets/mon-autre-projet`sambil berada di direktori lain:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">./gradlew -p ~/projets/mon-autre-projet build</code></pre> </div> </div> <div class="paragraph"> <p>Hal ini sangat berguna untuk membuat skrip aksi pada beberapa proyek dari satu lokasi pusat.</p> </div> <div class="ulist"> <div class="title">lihat juga :</div> <ul> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_warnings">referensi</a></p> </li> <li> <p><a href="https://docs.gradle.org/current/userguide/command_line_interface.html#sec:command_line_options">referensi</a></p> </li> <li> <p><a href="https://stackoverflow.com/a/36178581/837404">diskusi</a></p> </li> </ul> </div> </div> </div> https://cheroliv.com/blog/2022/0038_training_kotlin_enum_sealed_class_post.html Tue, 17 May 2022 00:00:00 +0000 blog/2022/0038_training_kotlin_enum_sealed_class_post.html <div class="paragraph"> <p>kelas sealed bukan merupakan enumerasi(kata kunci:enum).<br> Dari Java, Anda mungkin tergoda untuk membebani enumerasi kontribusi fitur Anda: // Kode Java</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-java hljs" 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>Alih-alih, Anda dapat menggunakan kelas sealed :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Keuntungan dari pendekatan ini adalah bahwa sekarang kami dapat mengirim data dengan status:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">var status: PizzaOrderStatus = OrderReceived(123) while (status !is Completed) { status = when (status) { is OrderReceived -> status.nextStatus() is PizzaBeingMade -> status.nextStatus() is OutForDelivery -> status.nextStatus() is Completed -> status } }</code></pre> </div> </div> <div class="paragraph"> <p>Umumnya, sealed classes bagus jika Anda ingin memiliki data terkait dengan satu Negara.</p> </div> https://cheroliv.com/blog/2022/0036_training_kotlin_post.html Thu, 12 May 2022 00:00:00 +0000 blog/2022/0036_training_kotlin_post.html <div class="sect1"> <h2 id="_peta_pikir">Peta pikir</h2> <div class="sectionbody"> <div class="paragraph"> <p><span class="image"><img src="../../diagram/training_kotlin.png" alt="training_kotlin"></span></p> </div> </div> </div> <div class="sect1"> <h2 id="_pemrograman_fungsional">Pemrograman fungsional</h2> <div class="sectionbody"> <div class="paragraph"> <p>Latihan diambil dari buku:<br> Pemrograman fungsional dalam Kotlin oleh tutorial<br> Ditulis oleh Massimo Carli<br> repo: <a href="https://github.com/kodecocodes/fpk-materials" class="bare">https://github.com/kodecocodes/fpk-materials</a></p> </div> <div class="sect2"> <h3 id="_sintaksis">Sintaksis</h3> <div class="sect3"> <h4 id="_firstprogramtest">FirstProgramTest</h4> <div class="paragraph"> <p>konsep: tampilan layar, fungsi<br> FirstProgramTest:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/FirstProgramTest.kt[sumber]+</p> </div> </div> <div class="sect3"> <h4 id="_concatfunctiontest">ConcatFunctionTest</h4> <div class="paragraph"> <p>konsep: memori, variabel, nilai, objek, ekstensi fungsi<br> ExampleUnitTest: <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/ConcatFunctionTest.kt">sumber</a>+</p> </div> </div> <div class="sect3"> <h4 id="_birthdaymessagetestoutput">BirthdayMessageTestOutput</h4> <div class="paragraph"> <p>konsep: himpunan, loop<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">Pengantar kotlin</a><br> BirthdayMessageTestOutput:https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/programming/BirthdayMessageTestOutput.kt[sumber]+</p> </div> </div> </div> <div class="sect2"> <h3 id="_kursus_kotlin">Kursus kotlin</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_koleksi_di_java">Tutorial koleksi di Java</h3> <div class="paragraph"> <p><a href="https://docs.oracle.com/javase/tutorial/collections/index.html" target="_blank" rel="noopener">Koleksi</a></p> </div> <div class="paragraph"> <p>Jantung antarmuka koleksi<br> <span class="image"><img src="../../img/0036_training_kotlin_post/colls-coreInterfaces.gif" alt="Koleksi"></span><br></p> </div> </div> <div class="sect2"> <h3 id="_dasar_fungsional">dasar fungsional</h3> <div class="sect3"> <h4 id="_pendekatan_deklaratif_x_imperatif">pendekatan deklaratif X imperatif</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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<String>): Int { var sum = 0 for (item in list) { try { sum += item.toInt() } catch (_: NumberFormatException) { } } return sum } @Test fun `test imperative approach`() { imperativeSum(input).run { println("Sum $this") assertEquals(1299, this) } } fun isValidNumber(s: String) = try { s.toInt() true } catch (_: NumberFormatException) { false } fun declarativeSum(list: List<String>) = list .filter(::isValidNumber) .map(String::toInt) .sum() @Test fun `test declarative approach`() { assertEquals(1299, declarativeSum(input).apply { println("Sum $this") }) } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_latihan_1_1">Latihan 1.1</h4> <div class="paragraph"> <p>Implementasikan fungsi sumInRange, yang menjumlahkan nilai-nilai di dalam<br> sebuah List<String> dalam rentang yang diberikan. tanda tangan adalah :</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun sumInRange(input: List<String>, range: IntRange): Int</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Cobalah dan periksa jawaban Anda denganhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/DeclarativeTests.kt[solusi, windows="_blank].</p> </div> </div> <div class="sect3"> <h4 id="_fungsi_orde_tinggi">fungsi orde tinggi</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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: () -> Unit) { for (i in 1..this) { fn() } } fun Int.times2(fn: () -> Unit) { for (i in 1..this) fn() } fun Int.times3(fn: () -> Unit) = (1..this).forEach { fn() } fun Int.times4(fn: () -> Unit) = repeat((1..this).count()) { fn() } fun Int.times(fn: () -> Unit) = (1..this).forEach { _ -> fn() } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_latihan_1_2">Latihan 1.2</h4> <div class="paragraph"> <p>Menerapkan chrono, yang menerima fungsi dengan tipe`() →`<br> Unit pada masukan dan mengembalikan waktu yang dihabiskan untuk mengeksekusinya. Tanda tandanya:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun chrono(fn : () -> Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Coba itu dan periksa jawaban Anda denganhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[solusi, windows="_blank].</p> </div> </div> <div class="sect3"> <h4 id="_komposisi">komposisi</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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 <A, B, C> ((A) -> B).compose(g: (B) -> C) : (A) -> C = { a -> g(this(a)) } class CompositionTests { @Test fun composition_impure() { assertEquals(200, double(square(10))) assertEquals(200, squareAndDouble1(10)) } @Test fun composition_pure() { val squareAndDouble = ::square compose ::double assertEquals(200, squareAndDouble(10)) } }</code></pre> </div> </div> </div> <div class="sect3"> <h4 id="_fungsi_murni_dan_kemampuan_diuji">Fungsi murni dan kemampuan diuji</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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="_penanganan_pengecualian">Penanganan pengecualian</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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<Int> = try { success(str.toInt()) } catch (nfe: NumberFormatException) { failure(nfe) } class ExceptionHandlingTests { @Test fun impure() { assertThrows<NumberFormatException> { strToInt("foo") } assertEquals(1, strToInt("1")) } @Test fun pure() { assertEquals(null, strToIntOrNull("foo")) assertEquals(1, strToIntOrNull("1")) } @Test fun `pure avec result`() { assertEquals(1, strToIntResult("1").getOrNull()) assertEquals( "For input string: \"foo\"", strToIntResult("foo") .exceptionOrNull() ?.message ) } }</code></pre> </div> </div> </div> </div> <div class="sect2"> <h3 id="_poin_poin_kunci">poin-poin kunci</h3> <div class="ulist"> <ul> <li> <p>Sementara pemrograman berorientasi objek berarti memprogram dengan objek,</p> </li> </ul> </div> <div class="paragraph"> <p>pemrograman fungsional berarti memprogram dengan fungsi. Anda memecah masalah menjadi beberapa sub-masalah, yang Anda modelkan dengan fungsi-fungsi.</p> </div> <div class="ulist"> <ul> <li> <p>Fungsi orde tinggi menerima fungsi lain sebagai input atau mengembalikan fungsi lain</p> </li> </ul> </div> <div class="paragraph"> <p>berfungsi sebagai nilai pengembalian. Teori kategori adalah teori komposisi, dan Anda menggunakannya untuk memahami bagaimana menyusun fungsi-fungsimu dalam sebuah program kerja Nilai output dari fungsi murni hanya tergantung pada parameter inputnya, dan ia tidak memiliki efek samping</p> </div> <div class="ulist"> <ul> <li> <p>Sebuah efek samping adalah sesuatu yang dilakukan oleh sebuah fungsi ke dunia luar. Ini</p> </li> </ul> </div> <div class="paragraph"> <p>mungkin menjadi log di output standar atau modifikasi nilai variabel global Pemrograman fungsional berfungsi untuk fungsi murni, tetapi juga menyediakan alat untuk mengubah fungsi tidak murni menjadi fungsi murni. Anda dapat membuat fungsi tidak murni menjadi murni dengan memindahkan efek untuk membuatnya bagian dari nilai pengembalian</p> </div> <div class="ulist"> <ul> <li> <p>Pemrograman fungsional adalah tentang komposisi.</p> </li> </ul> </div> <div class="paragraph"> <p>Penanganan kesalahan adalah contoh khas efek samping, dan Kotlin memberi Anda alat. untuk mengelola mereka secara fungsional.</p> </div> </div> <div class="sect2"> <h3 id="_mendalam_java8_ekspresi_lambda_dan_antarmuka_fungsional">Mendalam java8: ekspresi lambda dan antarmuka fungsional</h3> <div class="videoblock"> <div class="content"> <iframe src="https://www.youtube.com/embed/20waNRw6wMA?rel=0&list=PLzzeuFUy_Cng0wZhqbnkvWAW0d2fdVfyQ" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="sect2"> <h3 id="_teori_kategori">Teori Kategori</h3> <div class="paragraph"> <p>Teori matematika kategori:</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="_dasar_dasar_fungsi">Dasar-dasar fungsi</h3> <div class="sect3"> <h4 id="_latihan_2_1">Latihan 2.1</h4> <div class="paragraph"> <p>Bisakah Anda menulis contoh fungsi yang memetakan nilai yang berbeda<br> yang memiliki domain dengan nilai-nilai yang tidak berbeda dalam rentang, seperti f(b) dan f(c) dalam gambar di bawah ini?<br></p> </div> <div class="paragraph"> <p>Cobalah, lalu periksa proyek tantangan untuk solusi yang menunjukkan bagaimana kamu melakukannya.<br> Anda akan menemukan saran dan penjelasan dengan mengikuti tautan ke <a href="https://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt">solusi</a>.<br></p> </div> </div> <div class="sect3"> <h4 id="_latihan_2_2">Latihan 2.2</h4> <div class="paragraph"> <p>Bisakah kamu menulis fungsi invers dari dua kali ?<br> Apa domain dan jangkauan untuk fungsi invers?<br> Lihat proyek tantangan dan Lampiran B untuk solusi.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin">fun chrono(fn : () -> Unité) : Long</code></pre> </div> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" 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>Coba dan periksa jawaban Anda denganhttps://github.com/cheroliv/cheroliv.com/blob/master/codes/src/test/kotlin/functional/BasicsHOFTests.kt[solution, windows="_blank].</p> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2022/0031_memo_design_system_post.html Sun, 9 Jan 2022 00:00:00 +0000 blog/2022/0031_memo_design_system_post.html <div class="sect1"> <h2 id="_alat">Alat</h2> <div class="sectionbody"> <div class="dlist"> <div class="title"><strong>Ilustrasi</strong></div> <dl> <dt class="hdlist1"><a href="https://undraw.co/">undraw.co</a></dt> <dd> <p>Ilustrasi open source untuk semua ide yang dapat Anda bayangkan dan ciptakan.</p> </dd> <dt class="hdlist1"><a href="https://absurd.design/">absurd.design</a></dt> <dd> <p>Ilustrasi absurd yang bermakna.</p> </dd> <dt class="hdlist1"><a href="https://drawkit.com/">drawkit.com</a></dt> <dd> <p>Ilustrasi gratis yang indah. Pembaruan mingguan.</p> </dd> <dt class="hdlist1"><a href="https://icons8.com/">icons8.com</a></dt> <dd> <p>Ikon, ilustrasi, foto, musik, dan alat desain.</p> </dd> <dt class="hdlist1"><a href="https://blush.design/">blush.design</a></dt> <dd> <p>Ikon, ilustrasi, foto, musik, dan alat desain.</p> </dd> <dt class="hdlist1"><a href="https://www.humaaans.com/">humaaans.com</a></dt> <dd> <p>Campur dan pilih ilustrasi orang dengan pustaka desain</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Warna</strong></div> <dl> <dt class="hdlist1"><a href="https://coolors.co/">coolors.co</a></dt> <dd> <p>Pembuat skema warna ultra-cepat!</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Tren</strong></div> <dl> <dt class="hdlist1"><a href="https://fr.pinterest.com">pinterest</a></dt> <dd> <p>Penemuan visual ide: gambar, video, koleksi tematik.</p> </dd> <dt class="hdlist1"><a href="https://dribbble.com">menggiring</a></dt> <dd> <p>Platform untuk desainer berbagi kreasi mereka dan berinteraksi.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>UX/UI dan Design Systems</strong></div> <dl> <dt class="hdlist1"><a href="https://material.io/">Desain Material Google</a></dt> <dd> <p>Sistem desain Google untuk antarmuka pengguna yang terintegrasi dan adaptif.</p> </dd> <dt class="hdlist1"><a href="https://developer.apple.com/design/human-interface-guidelines/">Panduan Antarmuka Manusia Apple</a></dt> <dd> <p>Rekomendasi Apple untuk merancang aplikasi iOS dan macOS yang intuitif.</p> </dd> <dt class="hdlist1"><a href="https://www.uxpin.com/">UXPin</a></dt> <dd> <p>Platform desain dan kolaborasi untuk membuat prototipe dan sistem desain.</p> </dd> <dt class="hdlist1"><a href="https://www.frontify.com/">Frontify</a></dt> <dd> <p>Platform manajemen merek dan sistem desain untuk menjamin konsistensi.</p> </dd> <dt class="hdlist1"><a href="https://designsystemsrepo.com/design-systems/">Repositori Sistem Desain</a></dt> <dd> <p>Koleksi sumber dan contoh sistem desain untuk inspirasi.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Pengembangan Frontend</strong></div> <dl> <dt class="hdlist1"><a href="https://htmlcheatsheet.com" target=""_blank">htmlcheatsheet.com</a></dt> <dd> <p>Cheat Sheet HTML</p> </dd> <dt class="hdlist1"><a href="https://fontawesome.com" target=""_blank">fontawesome.com</a></dt> <dd> <p>koleksi ikon</p> </dd> <dt class="hdlist1"><a href="https://www.toptal.com/designers/htmlarrows/symbols/">toptal.com/designers/htmlarrows/symbols</a></dt> <dd> <p>Ikon bawaan dalam HTML</p> </dd> <dt class="hdlist1"><a href="https://css-tricks.com/">CSS-Tricks</a></dt> <dd> <p>Wajib untuk CSS, dengan artikel, tutorial, dan tips frontend modern.</p> </dd> <dt class="hdlist1"><a href="https://www.frontendmentor.io/">Mentor Frontend</a></dt> <dd> <p>Tantangan kode frontend yang didasarkan pada proyek nyata untuk meningkatkan keterampilan Anda.</p> </dd> <dt class="hdlist1"><a href="https://dev.to/">Dev.to</a></dt> <dd> <p>Komunitas pengembang untuk berbagi artikel, tutorial, dan proyek.</p> </dd> <dt class="hdlist1"><a href="https://codepen.io/">CodePen</a></dt> <dd> <p>Editor kode daring dan komunitas untuk berbagi cuplikan kode dan demo.</p> </dd> </dl> </div> <div class="dlist"> <div class="title"><strong>Pengembangan Frontend yang didukung AI</strong></div> <dl> <dt class="hdlist1"><a href="https://v0.dev/">v0.dev</a></dt> <dd> <p>v0 mengonversi deskripsi dalam bahasa natural menjadi kode dan antarmuka pengguna.</p> </dd> <dt class="hdlist1"><a href="https://uizard.io/">Uizard</a></dt> <dd> <p>Uizard berfokus pada transformasi prototipe (gambar, sketsa) menjadi kode HTML, CSS, dan React.</p> </dd> <dt class="hdlist1"><a href="https://www.usegalileo.ai/explore">usegalileo.ai</a></dt> <dd> <p>Galileo AI memungkinkan Anda menggambarkan antarmuka yang Anda inginkan dengan bahasa alami, dan AI menghasilkan desain Figma yang dapat diedit.</p> </dd> <dt class="hdlist1"><a href="https://play.teleporthq.io/">TeleportHQ</a></dt> <dd> <p>TeleportHQ adalah platform pengembangan front-end low-code yang menggunakan AI untuk membantu Anda membangun dan menyebarkan situs web secara visual.</p> </dd> </dl> </div> </div> </div> https://cheroliv.com/blog/2020/0029_kubernetes_microk8s_docker_premiers_pas_post.html Tue, 3 Nov 2020 00:00:00 +0000 blog/2020/0029_kubernetes_microk8s_docker_premiers_pas_post.html <div id="preamble"> <div class="sectionbody"> <div class="paragraph"> <p><a href="https://microk8s.io/docs/">dokumen resmi microk8s</a>+</p> </div> </div> </div> <div class="sect3"> <h4 id="_pemasangan_paket_microk8s">Pemasangan paket microk8s:</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html Mon, 28 Sep 2020 00:00:00 +0000 blog/2020/0028_gradle_executer_un_processus_externe_depuis_une_tache_gradle_post.html <div class="sect3"> <h4 id="_gradle_kotlin_dsl">Gradle-Kotlin-DSL:</h4> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-kotlin hljs" data-lang="kotlin"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0027_kotlin_not_implemented_exception_not_implemented_error_post.html Sun, 27 Sep 2020 00:00:00 +0000 blog/2020/0027_kotlin_not_implemented_exception_not_implemented_error_post.html <div class="paragraph"> <p>NotImplementedException NotImplementedError, utilité pour les tests, ça permet de savoir, où on en est, et la cause du fail.<br> Pas encore implémenté, permet de lever la bonne exception.<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><br></p> </div> https://cheroliv.com/blog/2020/0026_untar_post.html Sat, 26 Sep 2020 00:00:00 +0000 blog/2020/0026_untar_post.html <div class="sect3"> <h4 id="_liens_interserver_net">Liens: <a href="https://www.interserver.net/tips/kb/extract-tar-gz-files-using-linux-command-line/">interserver.net</a></h4> </div> https://cheroliv.com/blog/2020/0025_gradle_rejouer_les_tests_meme_lorsque_les_tests_sont_UP-TO-DATE_post.html Fri, 25 Sep 2020 00:00:00 +0000 blog/2020/0025_gradle_rejouer_les_tests_meme_lorsque_les_tests_sont_UP-TO-DATE_post.html https://cheroliv.com/blog/2020/0024_docker_n_installe_pas_l_application_mais_tire_la_plutot_post.html Thu, 24 Sep 2020 00:00:00 +0000 blog/2020/0024_docker_n_installe_pas_l_application_mais_tire_la_plutot_post.html <div class="sect3"> <h4 id="_source_hackernoon_com">source: <a href="https://hackernoon.com/dont-install-postgres-docker-pull-postgres-bee20e200198">hackernoon.com</a></h4> </div> https://cheroliv.com/blog/2020/0023_gherkin_en_francais_post.html Wed, 23 Sep 2020 00:00:00 +0000 blog/2020/0023_gherkin_en_francais_post.html https://cheroliv.com/blog/2020/0022_gradle_cli_surcharger_un_parametre_post.html Tue, 22 Sep 2020 00:00:00 +0000 blog/2020/0022_gradle_cli_surcharger_un_parametre_post.html <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- $ ./gradlew -Pparam_component=CUSTOM ---- ----</code></pre> </div> </div> https://cheroliv.com/blog/2020/0021_memo_git_post.html Mon, 21 Sep 2020 00:00:00 +0000 blog/2020/0021_memo_git_post.html <div class="sect3"> <h4 id="_sumber">Sumber:</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="_mengubah_repo_remote_di_git">mengubah repo remote di git</h4> <div class="paragraph"> <p>menampilkan URL repo remote saat ini:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"></code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0021_aspirer_depuis_une_URL_post.html Sun, 20 Sep 2020 00:00:00 +0000 blog/2020/0021_aspirer_depuis_une_URL_post.html <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-none hljs">---- ---- $ wget -r -k -np http://site.com/docs/manual/ ---- Untuk menentukan folder target, tambahkan argumen -P lalu berikan jalur. ----</code></pre> </div> </div> https://cheroliv.com/blog/2020/0020_creer_un_disk_bootable_post.html Sat, 19 Sep 2020 00:00:00 +0000 blog/2020/0020_creer_un_disk_bootable_post.html <div class="sect3"> <h4 id="_liens_etcher">Liens: <a href="https://www.balena.io/etcher/">etcher</a></h4> </div> https://cheroliv.com/blog/2020/0019_dezipper_en_CLI_dans_un_dossier_cible_post.html Fri, 18 Sep 2020 00:00:00 +0000 blog/2020/0019_dezipper_en_CLI_dans_un_dossier_cible_post.html <div class="sect3"> <h4 id="_tautan_askubuntu">Tautan: <a href="https://askubuntu.com/questions/86849/how-to-unzip-a-zip-file-from-the-terminal">askubuntu</a></h4> <div class="paragraph"> <p>Jika Anda ingin mengekstrak ke folder tujuan tertentu, Anda dapat menggunakan : <code>` $ unzip fichier.zip -d direktori_tujuan </code>` Jika direktori sumber dan direktori tujuan sama, Anda cukup melakukan: <code>`</code> $ unzip file.zip (empty)</p> </div> </div> https://cheroliv.com/blog/2020/0018_Afficher_la_somme_des_tailles_de_fichier_dans_la_liste_des_r%C3%A9pertoires_post.html Thu, 17 Sep 2020 00:00:00 +0000 blog/2020/0018_Afficher_la_somme_des_tailles_de_fichier_dans_la_liste_des_r%C3%A9pertoires_post.html <div class="sect3"> <h4 id="_liens_stackexchange">Liens: <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="highlightjs highlight"><code class="language-none hljs">---- ---- $ du -ach --exclude "./.*" /home/troll/ ---- ----</code></pre> </div> </div> </div> https://cheroliv.com/blog/2020/0017_detruire_une_branch_sur_github_post.html Wed, 16 Sep 2020 00:00:00 +0000 blog/2020/0017_detruire_une_branch_sur_github_post.html <div class="sect3"> <h4 id="_détruire_une_branch_sur_github">Détruire une branch sur github</h4> </div> <div class="sect3"> <h4 id="_lien_gist">Lien: <a href="https://gist.github.com/cheroliv/921a13ed23ae6d4d66af8d43dd536987">gist</a></h4> </div> https://cheroliv.com/blog/2020/0016_asciidoc_markdown_memo_post.html Tue, 15 Sep 2020 00:00:00 +0000 blog/2020/0016_asciidoc_markdown_memo_post.html <div class="paragraph"> <div class="title">Pourquoi asciidoc ou markdown ? Ici, je m’oriente vers asciidoc, car j’ai déjà quelques tickets écris en asciidoc.<br></div> <p>Asciidoc est un langage de balisage, qui permet de produire du contenu, en apportant une mise en page qui garde le texte lisible pour un humain.<br> C’est une façon de standardiser les traitements de textes pour des contenus simples sans logiciel supplémentaire.</p> </div> <div class="ulist"> <div class="title">Liens :</div> <ul> <li> <p><a href="https://blog.oxiane.com/2018/06/13/asciidoc-documentation-as-code/" target="_blank" rel="noopener">@jmdoudoux sur blog.oxiane.com</a> [asciidoc]</p> </li> <li> <p><a href="https://powerman.name/doc/asciidoc" target="_blank" rel="noopener">powerman.name</a> [asciidoc]</p> </li> </ul> </div> https://cheroliv.com/blog/2019/0013_how-to-install-a-deb-file_post.html Mon, 19 Aug 2019 00:00:00 +0000 blog/2019/0013_how-to-install-a-deb-file_post.html <div class="paragraph"> <p>Untuk menginstal paket Debian dari file .deb melalui command line.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ sudo dpkg -i /chemin/du/fichier/deb/</code></pre> </div> </div> <div class="paragraph"> <p>lihat di sini untukhttps://unix.stackexchange.com/questions/159094/how-to-install-a-deb-file-by-dpkg-i-or-by-apt[referensi]+</p> </div> https://cheroliv.com/blog/2019/0011_gradle_configuration_ide_jbake_content_post.html Fri, 16 Aug 2019 00:00:00 +0000 blog/2019/0011_gradle_configuration_ide_jbake_content_post.html <div class="paragraph"> <p>Dans un projet applicatif piloté par le gestionnaire de build Gradle<br> il est plus agréable d’avoir la visibilité sur tous les dossiers<br> participant au développement de l’application,<br> comme des dossiers de ressources qui ne sont pas<br> dans les chemins par convention.<br> Par exemple je veux que le dossier src/jbake,<br> soit visible en tant ‘resource folder’,<br> il est possible de le faire en rentrant dans la configuration du projet,<br> dans les wizards de l’IDE. Cependant cette option n’est pas sauvegardée au rechargement suivant<br> du projet Gradle dans l’IDE. Pour apporter cette configuration de façon permanente<br> la solution est de surcharger la configuration des chemins de sources<br> dans le fichier de configuration build.gradle tel que aux lignes 18, 19, 20 et 21 :<br> build.gradle<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">plugins { id "java" id "groovy" id "org.jbake.site" version "5.0.0" id "org.ajoberstar.git-publish" version "2.1.1" } repositories { mavenCentral() jcenter() } group project_group version project_version sourceSets { main { java { srcDirs = [] } groovy { srcDirs =["src/main/java", "src/main/groovy"] } resources { srcDirs =[ "src/main/resources", "src/jbake"//in order to get site src content in the IDE ] } } test { java { srcDirs = [] } groovy { srcDirs =["src/test/java", "src/test/groovy"] } } } test { useJUnitPlatform() } configurations { ivy } dependencies { ivy "org.apache.ivy:ivy:$ivy_version" implementation "org.codehaus.groovy:groovy-all:$groovy_version" implementation "org.asciidoctor:asciidoctor-java-integration:$asciidoctor_java_integration_version" implementation "org.freemarker:freemarker:$freemarker_version" testImplementation "org.junit.jupiter:junit-jupiter-api:$junit5_version" testRuntimeOnly "org.junit.jupiter:junit-jupiter-engine:$junit5_version" } gitPublish { repoUri = github_pages_blog_repository branch = git_branch contents { from(file(jbake_content_from)) { into jbake_content_to } } } tasks.withType(GroovyCompile) { groovyClasspath += configurations.ivy }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0010_gradle_groovy_script_grab_ivy_configuration_post.html Wed, 14 Aug 2019 00:00:00 +0000 blog/2019/0010_gradle_groovy_script_grab_ivy_configuration_post.html <div class="paragraph"> <p>Subjek tiket adalah konfigurasi skrip build Gradle.<br> Saya ingin dapat menggunakan skrip Groovy tanpa referensi<br> ke proyek Gradle tempat saya melampirkan.<br> Saya ingin dapat menjalankan skrip Groovy ini di luar Gradle<br> tanpa anotasi ivy untuk pengambilan dependensi eksternal<br> tidak menimbulkan masalah performa atau kompilasi<br> dari skrip build Gradle.<br> Untuk mengilustrasikan konfigurasi saya mengandalkan dua skrip:<br> skrip build Gradle dan skrip Groovy.<br> Skrip Groovy berisi di awal pada baris 2,<br> sebuah instruksi untuk menarik ketergantungan eksternal<br> dengan menggunakan pengelola dependensi ivy.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-Groovy hljs" data-lang="Groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import org.apache.commons.io.FileUtils static String getSeparator() { System.getProperty("file.separator") } String from = "${System.getProperty("user.home")}${separator}.config${separator}transmission${separator}torrents" String to = "${System.getProperty("user.home")}${separator}Documents${separator}torrents_completed" File fromDlDir = new File("${System.getProperty("user.home")}${separator}Téléchargements") File fromDir = new File(from) File toDir = new File(to) Collection<File> torrentFiles = FileUtils.listFiles( fromDir, ["torrent"] as String[], false) torrentFiles.addAll(FileUtils.listFiles( fromDlDir, ["torrent", "torrent.added"] as String[], false)) torrentFiles.empty ?: torrentFiles.each { it -> FileUtils.copyFileToDirectory(it, toDir) } println torrentFiles.size()</code></pre> </div> </div> <div class="paragraph"> <p>Dalam file build.gradle, sekarang mari kita lihat bagaimana mengharmonkan<br> kedua manajer dependensi, ivy dan Gradle. Perjanjian antara keduanya dilakukan pada baris:<br> 26, 30, 37, 38 et 39<br> Jadi saya dapat menjalankan skrip Groovy saya secara manual,<br> dan kompilasi Gradle tidak terganggu oleh @Grab.<br> Ketergantungan skrip Groovy tidak perlu disediakan dalam Gradle.<br> Sebaliknya saya tidak dapat menjalankan skrip Groovy dari Gradle.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-Groovy hljs" 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>referensi tiket padahttps://stackoverflow.com/a/18174033/837404[stackoverflow]</p> </div> https://cheroliv.com/blog/2019/0009_groovy_algebre_pgcd_ppmc_post.html Tue, 13 Aug 2019 00:00:00 +0000 blog/2019/0009_groovy_algebre_pgcd_ppmc_post.html <div class="sect2"> <h3 id="_ppmc">PPMC</h3> <div class="paragraph"> <p><a href="https://fr.wikipedia.org/wiki/Plus_petit_commun_multiple">wiki PPMC atau Kelipatan Persekutuan Terkecil</a></p> </div> <div class="paragraph"> <p>AlgebraUtils.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" 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>hasil:</p> </div> <div class="paragraph"> <p>gcd(96, 28) = 4 lcm(790, 990) = 78210</p> </div> </div> https://cheroliv.com/blog/2019/0008_bash_find_trouver_fichiers_par_extension_post.html Mon, 12 Aug 2019 00:00:00 +0000 blog/2019/0008_bash_find_trouver_fichiers_par_extension_post.html <div class="paragraph"> <p>Saya mencari file berdasarkan kriteria nama: daftar file yang memiliki ekstensi .h dan .cpp</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' + +</code></pre> </div> </div> <div class="paragraph"> <p>daftar file yang memiliki ekstensi .h dan .cpp<br> Hasilnya disimpan dalam file list_of_txt_files.list.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ find . -name '*.h' -o -name '*.cpp' -print > list_of_txt_files.list</code></pre> </div> </div> <div class="paragraph"> <p>Saya mencari daftar file dengan ekstensi .chm<br> dan saya menghancurkan daftar ini.<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ find . -name "*.chm" -type f -delete</code></pre> </div> </div> https://cheroliv.com/blog/2019/0015_projet_avec_methodologie_en_cascade_post.html Thu, 1 Aug 2019 00:00:00 +0000 blog/2019/0015_projet_avec_methodologie_en_cascade_post.html <div class="sect2"> <h3 id="_analyser_et_receuillir_les_besoins">Analyser et receuillir les besoins</h3> </div> <div class="sect2"> <h3 id="_definir_la_gestion_de_projet">Definir la gestion de projet</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="_contextualiser_le_projet">Contextualiser le projet</h3> </div> <div class="sect2"> <h3 id="_analyser_et_recueillir_des_besoins">Analyser et recueillir des besoins</h3> <div class="sect3"> <h4 id="_formuler_les_objectifs_et_livrables">Formuler les objectifs et livrables</h4> </div> </div> <div class="sect2"> <h3 id="_décrypter_une_grille_de_lecture">Décrypter une grille de lecture</h3> </div> <div class="sect1"> <h2 id="_cadrez_le_projet_avec_votre_équipe">Cadrez le projet avec votre équipe</h2> <div class="sectionbody"> <div class="imageblock"> <div class="content"> <img src="../../img/conductor.png" alt="chef d’orchestre"> </div> </div> <div class="sect2"> <h3 id="_consulter_les_experts_pour_trouver_la_solution">Consulter les experts pour trouver la solution</h3> </div> <div class="sect2"> <h3 id="_choisir_une_méthodologie_de_gestion_de_projet">Choisir une méthodologie de gestion de projet</h3> <div class="imageblock"> <div class="content"> <img src="../../img/cascading_planning.png" alt="planning en cascade"> </div> </div> <div class="imageblock"> <div class="content"> <img src="../../img/Cycle_V_details.jpeg" alt="cycle en V"> </div> </div> </div> </div> </div> https://cheroliv.com/blog/2019/0014_list_all_databases_in_postgresql_post.html Tue, 30 Jul 2019 00:00:00 +0000 blog/2019/0014_list_all_databases_in_postgresql_post.html <div class="paragraph"> <p>Saya tidak ingin menginstalhttps://www.pgadmin.org/[pgAdmin] ou <a href="http://phppgadmin.sourceforge.net/">phppgadmin</a> sementara semua ada di baris perintah.<br> Untuk melakukannya, kita harus meluncurkan terminal dan masuk sebagai user postgres.<br> pengguna postgres adalah satu-satunya yang secara default memiliki hak untuk menjalankan aplikasi psql yang merupakan klien baris perintah (<a href="https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande">Antarmuka Baris Perintah</a>) postgresql,<br> Agar bisa berbicara dengan basis data melalui baris perintah dari terminal.<br> Untuk terhubung, jalankan terminal dan ketik ini:<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ sudo -i -u postgres</code></pre> </div> </div> <div class="paragraph"> <p>Untuk terhubung dan langsung masuk ke prompt perintah postgresql, ketik ini:</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ sudo -i -u postgres psql</code></pre> </div> </div> <div class="paragraph"> <p>Untuk mencantumkan basis data dari sebuah instance postgresql, berikut perintah :<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-SQL hljs" data-lang="SQL">postgres=# \l</code></pre> </div> </div> <div class="paragraph"> <p>hasil:</p> </div> <div class="paragraph"> <p>Daftar basis data Nama | Pemilik | Enkodifikasi | Kolasi | Jenis karakter | Hak akses</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 baris)</p> </div> <div class="paragraph"> <p>ketik q untuk keluar dari tampilan hasil<br> <br> untuk menampilkan skema dari sebuah instance postgresl.</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-sql hljs" data-lang="sql">postgres=# SELECT schema_name FROM information_schema.schemata;</code></pre> </div> </div> <div class="paragraph"> <p>hasil</p> </div> <div class="paragraph"> <p>umum information_schema pg_catalog pg_toast_temp_1 pg_temp_1 pg_toast (6 baris)</p> </div> <div class="paragraph"> <p>ou</p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-sql hljs" data-lang="sql">postgres=# SELECT nspname FROM pg_catalog.pg_namespace;</code></pre> </div> </div> <div class="paragraph"> <p>hasil</p> </div> <div class="paragraph"> <p>pg_toast pg_temp_1 pg_toast_temp_1 pg_catalog information_schema publik (6 baris)</p> </div> https://cheroliv.com/blog/2019/0007_groovy_rename_recursively_files_post.html Mon, 29 Jul 2019 00:00:00 +0000 blog/2019/0007_groovy_rename_recursively_files_post.html <div class="paragraph"> <p>Mon lecteur de vidéo sur ma TV a sa façon de passer<br> d’un fichier à l’autre en lecture continue<br> et son mode de lecture est de passer de 1…​..mp4 à 10…​.mp4,<br> et non pas de 1…​mp4 à 2…​.mp4.<br> Le problème est qu’il y a près de 900 fichiers et dossiers.<br> Bingo un super cas d’utilisation de Groovy pour manipuler<br> des fichiers, renommage, recherche de motif dans le nom du fichier<br> ou dossier.<br> Ici le but est de changer les noms commençant par<br> un chiffre et dont le second caractère du nom<br> n’est pas un chiffre, j’ajouterai à ce nom un 0 au début<br></p> </div> <div class="paragraph"> <p>renameFilesToStartWithTwoDigit.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">#!/usr/bin/env groovy /** * get a crossplateform separator * @return */ static String getSeparator() { System.getProperty("file.separator") } /** * rename file * @param file * @param newName * @return the renamed file */ static File rename(File file, String newName) { assert file.renameTo(file .parentFile.path + getSeparator() + newName) new File(file .parentFile.path + getSeparator() + newName) } String rootFolderPath = System.getProperty("user.home") + "/Bureau/ng-courses/Udemy - Angular 7 " + "(formerly Angular 2) - The Complete Guide" File rootFolder = new File(rootFolderPath) assert rootFolder.exists() assert rootFolder.directory assert rootFolder.canRead() List<File> dirList = new ArrayList<>() //Adding rootFolder in dirList // just in case there is some files in it dirList.add(rootFolder) //looping to get list of directories //recursively inside rootFolder rootFolder.traverse { File file -> !file.directory ?: dirList.add(file) } //looping through dirList //to rename directories filling criterias for (int i = dirList.size() - 1; i >= 0; i--) { Character[] chars = dirList.get(i).name.chars !(chars[0].digit && !chars[1].digit) ?: dirList.set(i, rename(dirList.get(i), "0${dirList.get(i).name}")) if (dirList.get(i).directory) { //looping through directory //to rename file filling criterias dirList.get(i).listFiles().each { File f -> Character[] cs = f.name.chars !(cs[0].digit && !cs[1].digit) ?: rename(f, "0${f.name}") } } }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0006_groovy_find_files_copy_to_post.html Fri, 19 Jul 2019 00:00:00 +0000 blog/2019/0006_groovy_find_files_copy_to_post.html <div class="paragraph"> <p>Le but de ce script est de rechercher des fichiers,<br> à partir d’un répertoire parent; récupérer la sélection<br> dans une liste. Enfin copier cette liste de fichiers<br> dans un répertoire destination cela en Groovy.</p> </div> <div class="paragraph"> <p>findCopyTo.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">#!/usr/bin/env groovy @Grab("commons-io:commons-io:2.6") import groovy.io.FileType import org.apache.commons.io.FileUtils /** * un separateur OS independant * @return */ static String getSep() { System.getProperty("file.separator") } /** * la liste des fichiers dont le titre contient un item * de la liste des motifs * * @param path * @param motifs * @return la liste des chemins complet de fichiers */ static List<String> findFilesContainingMotifs( String path, List<String> motifs) { List<String> filePathResultList = new ArrayList<>() new File(path) .eachFileRecurse(FileType.FILES) { if (it.name.toLowerCase().contains('cucumber')) { filePathResultList.add it.path } } filePathResultList } /** * copy vers la liste des fichiers * @param files * @param to */ static void copyFilesTo(List<String> files, String to) { File toDirDest = new File(to) files.each { String filepath -> File file = new File(filepath) //si le dernier caractere de to n'est pas un separateur // alors ajoute le a la chaine (to.substring(to.length() - 1) == sep) ?: to.concat(sep) if (to + file.name != filepath) { FileUtils.copyFileToDirectory(file, toDirDest) file.delete() } } } /** * la list des arguments */ String userName = System.getProperty("user.name") List<String> motifs = ['cucumber'] String path = "/media/$userName/320/Books/" String to = "/media/$userName/320/Books/bdd/" /** * lappel aux methodes */ copyFilesTo(findFilesContainingMotifs(path, motifs), to) //affiche moi les fichiers déplacés findFilesContainingMotifs(path, motifs).each { println it }</code></pre> </div> </div> https://cheroliv.com/blog/2019/0005_groovy_manipulation_files_post.html Thu, 18 Jul 2019 00:00:00 +0000 blog/2019/0005_groovy_manipulation_files_post.html <div class="paragraph"> <p>Ici je vais m’intéresser au chargement d’une propriété dans un build projet <a href="https://docs.gradle.org/current/userguide/userguide.html">gradle</a><br> sans que celle ci soit disponible dans le code.<br> La propriété sera défini dans le fichier gradle.properties du dossier ~/.gradle/gradle.properties<br> ~ est un raccourcie de la variable symbolique HOME_PATH représentant la racine utilisateur de session: le <a href="https://fr.wikipedia.org/wiki/R%C3%A9pertoire_personnel">répertoire personnel</a>.<br> De la même façon dans un build projet <a href="https://maven.apache.org/guides/index.html">maven</a>, avec ~/.m2/settings.xml Le but de ce script c’est de supprimer les fichiers qui correspondraient aux motifs énoncés<br> dans la variable strCriteria. Pour cela je vais utiliser les <a href="https://fr.wikipedia.org/wiki/Fermeture_(informatique)">closures</a>: each, findAll, collect<br> ainsi que la classe StringTokenizer qui va découper en morceau ma chaîne de critères<br> pour en récupérer une liste de strings. Si un des fichiers de mon dossier à nettoyer contient un des motif dans son nom<br> alors il sera un candidat à la destruction en étant ajouté à la liste résultat.<br> Et à la dernière ligne un petit exemple d’<a href="https://en.wikipedia.org/wiki/Elvis_operator">Elvis operator</a><br> filemanip.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">#!/usr/bin/env groovy //Mes criteres de selection des fichiers à detruire String strCriteria = "Dummies Dummie ajax Objective-C Windows blackberry " + "wordpress joomla ios c# f# rails ruby flex asp flash Dreamweaver adobe " + "CoffeeScript c++ .chm .epub .rar .zip .tar drupal drupals .net php javascript " + ".js iphone ipad js _js facebook gwt vaadin linq python py zope window " + "3D scala gaming active_directory tomcat jboss glassfish microsoft 2d " + "lego blogger blog cocoa dojo dom dotnetnuke eclipse .gz unity sharepoint " + ".tgz iwork filemaker .doc .txt" //repertoire personnel String userDir = System.getProperty("user.home") //un separateur de chemin crossplatform String sep = System.getProperty("file.separator") //la variable symbolique String sym_books_vrac_path = "books_vrac_path" //le chemin de mon fichier gradle.properties hors projet String propertiesFilePath = userDir .concat("${sep}.gradle${sep}gradle.properties") File propertiesFile = new File(propertiesFilePath) //je m'aassure que le fichier existe et que ce n'est pas un dossier assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() //on boucle avec un inpustream sur le fichier //gradle.properties pour peupler ma variable gradleProperties propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } //le chemin du dossier books_vrac est la valeur de notre clé books_vrac_path String pathVracDir = gradleProperties.get(sym_books_vrac_path) //j'ai récuperé tous ces livres en tapant cette commande dans le terminal //wget -m -np -c -R "index.html*" "http://the-eye.eu/public/Books/IT%20Various/" //on ouvre le dossier dont le chemin est dans la variable pathVracDir // on s'assure qu'il existe et que c'est un dossier File vracDir = new File(pathVracDir) assert vracDir.exists() && vracDir.directory //separer les élèments de ma liste de critère StringTokenizer tokenizer = new StringTokenizer(strCriteria) //la liste de critere List<String> criteriaList = new ArrayList<>() //j'itère sur les tokens et je construit ma liste de token, // mot clef critère de recherche tokenizer.each { String it -> criteriaList.add(it.toLowerCase()) } //je collect tous les noms de fichier dans le dossier List<String> fileNameList = vracDir .listFiles() .collect { File it -> it.directory ?: it.name } // je collect les noms de fichier qui contiendraient un des criteres List<String> resultList = fileNameList.findAll { String name -> criteriaList.findAll { String crit -> name.toLowerCase().contains(crit) } } // je parcours ma liste de résultat pour les effacer resultList.each { String fileName -> assert new File(vracDir.path + sep + fileName).delete() } println fileNameList.size() println resultList.size() resultList.empty ?: println(vracDir.path + sep + resultList.first())</code></pre> </div> </div> https://cheroliv.com/blog/2019/0004_groovy_replace_string_load_properties_post.html Wed, 17 Jul 2019 00:00:00 +0000 blog/2019/0004_groovy_replace_string_load_properties_post.html <div class="paragraph"> <p>Voici un bout de code fonctionnel en groovy,<br> pour changer toutes les occurrences d’une séquence de caractères dans une String<br> et charger un fichier .properties dans un objet properties.<br> Exécuter une commande dans une String.<br> replaceTextinFile.groovy<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">#!/usr/bin/env groovy println System.getProperty("user.home") static String getSeparator_() { System.getProperty("file.separator") } String separator = separator_ String path = System.getProperty("user.home") .concat("${separator}.gradle" + separator + "gradle.properties") File propertiesFile = new File(path) assert propertiesFile.exists() && !propertiesFile.directory Properties gradleProperties = new Properties() propertiesFile.withInputStream { InputStream it -> gradleProperties.load(it) } String user_name = gradleProperties.getProperty("user_name") String text String resultText text = new File("${System.getProperty("user.home")}" + separator + "src" + separator + "cheroliv.github.io" + separator + "src" + separator + "main" + separator + "resources" + separator + "eco_space.txt").text String to = separator + "media" + separator + "${user_name}" + separator + "320" + separator + "videoCours" + separator String from = "${System.getProperty("user.home")}" + separator + "p2p" + separator resultText = text.replace(to, from) println resultText //execute command line in a string println "rsync -avr ${resultText} ${to}".execute().text</code></pre> </div> </div> https://cheroliv.com/blog/2019/0003_groovy_char_ascci_post.html Wed, 10 Jul 2019 00:00:00 +0000 blog/2019/0003_groovy_char_ascci_post.html <div class="paragraph"> <p>Voici un bout de code fonctionnel en Groovy, qui génère un fichier texte,<br> avec les 256 premiers caractères lisibles du tableau ASCII<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-groovy hljs" data-lang="groovy">#!/usr/bin/env groovy import java.nio.charset.StandardCharsets List<Character> chars = new ArrayList<>() int j = 0 Character jumpLine = '\n' 256.times { Integer idx -> if (Character.isAlphabetic(idx) || Character.isDigit(idx)) { if (j % 10 == 0 && j != 0) { chars.add(jumpLine) chars.add(idx as char) } else chars.add(idx as char) j++ } } String seperator = System.getProperty("file.separator") String path = "${System.getProperty("user.home")}${seperator}ascii.txt" File speCharFile = new File(path) if (speCharFile.exists() && !speCharFile.directory) { speCharFile.text = "" } else { speCharFile.createNewFile() } String text = new String() chars.each { Character it -> text = it == jumpLine ? "$text$it" : "$text $it " } speCharFile.setText(text, StandardCharsets.UTF_8.toString())</code></pre> </div> </div> <div class="paragraph"> <p>j’ai nommé le fichier spe_char.groovy,<br> depuis le dossier ou est le fichier<br> ouvrir un terminal et copier coller pour exécuter le script<br></p> </div> <div class="listingblock"> <div class="content"> <pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">$ groovy spe_char.groovy</code></pre> </div> </div> <div class="paragraph"> <p>résultat:</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>